Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

frontend: pod: Add quick status for containers #3008

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

frontend: pod: Add quick status for containers #3008

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/components/pod/Details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -472,7 +472,7 @@ export default function PodDetails(props: PodDetailsProps) {
item && [
{
name: t('State'),
value: makePodStatusLabel(item),
value: makePodStatusLabel(item, false),
},
{
name: t('Node'),
Expand Down
90 changes: 79 additions & 11 deletions frontend/src/components/pod/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Box } from '@mui/material';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { ApiError } from '../../lib/k8s/apiProxy';
import { KubeContainerStatus } from '../../lib/k8s/cluster';
import Pod from '../../lib/k8s/pod';
import { METRIC_REFETCH_INTERVAL_MS, PodMetrics } from '../../lib/k8s/PodMetrics';
import { parseCpu, parseRam, unparseCpu, unparseRam } from '../../lib/units';
Expand All @@ -13,7 +14,7 @@ import { LightTooltip, Link, SimpleTableProps } from '../common';
import { StatusLabel, StatusLabelProps } from '../common/Label';
import ResourceListView from '../common/Resource/ResourceListView';

export function makePodStatusLabel(pod: Pod) {
export function makePodStatusLabel(pod: Pod, showContainerStatus: boolean = true) {
const phase = pod.status.phase;
let status: StatusLabelProps['status'] = '';

Expand All @@ -30,17 +31,34 @@ export function makePodStatusLabel(pod: Pod) {
}
}

const containerStatuses = pod.status?.containerStatuses || [];
const containerIndicators = containerStatuses.map((cs, index) => {
const { color, tooltip } = getContainerDisplayStatus(cs);
return (
<LightTooltip title={tooltip} key={index}>
<Icon icon="mdi:circle" style={{ color }} width="1rem" height="1rem" />
</LightTooltip>
);
});

return (
<LightTooltip title={tooltip} interactive>
<Box display="inline">
<StatusLabel status={status}>
{reason}
{(status === 'warning' || status === 'error') && (
<Icon aria-label="hidden" icon="mdi:alert-outline" width="1.2rem" height="1.2rem" />
)}
</StatusLabel>
</Box>
</LightTooltip>
<Box display="flex" alignItems="center" gap={1}>
<LightTooltip title={tooltip} interactive>
<Box display="inline">
<StatusLabel status={status}>
{reason}
{(status === 'warning' || status === 'error') && (
<Icon aria-label="hidden" icon="mdi:alert-outline" width="1.2rem" height="1.2rem" />
)}
</StatusLabel>
</Box>
</LightTooltip>
{showContainerStatus && containerIndicators.length > 0 && (
<Box display="flex" gap={0.5}>
{containerIndicators}
</Box>
)}
</Box>
);
}

Expand All @@ -60,6 +78,56 @@ function getReadinessGatesStatus(pods: Pod) {
return readinessGatesMap;
}

function getContainerDisplayStatus(container: KubeContainerStatus) {
const state = container.state || {};
let color = 'grey';
let label = '';
const tooltipLines: string[] = [`Name: ${container.name}`];

if (state.waiting) {
color = 'orange';
label = 'Waiting';
if (state.waiting.reason) {
tooltipLines.push(`Reason: ${state.waiting.reason}`);
}
} else if (state.terminated) {
color = 'green';
label = 'Terminated';
if (state.terminated.reason) {
tooltipLines.push(`Reason: ${state.terminated.reason}`);
}
if (state.terminated.exitCode !== undefined) {
tooltipLines.push(`Exit Code: ${state.terminated.exitCode}`);
}
if (state.terminated.startedAt) {
tooltipLines.push(`Started: ${new Date(state.terminated.startedAt).toLocaleString()}`);
}
if (state.terminated.finishedAt) {
tooltipLines.push(`Finished: ${new Date(state.terminated.finishedAt).toLocaleString()}`);
}
if (container.restartCount > 0) {
tooltipLines.push(`Restarts: ${container.restartCount}`);
}
} else if (state.running) {
color = 'green';
label = 'Running';
if (state.running.startedAt) {
tooltipLines.push(`Started: ${new Date(state.running.startedAt).toLocaleString()}`);
}
if (container.restartCount > 0) {
tooltipLines.push(`Restarts: ${container.restartCount}`);
}
}

tooltipLines.splice(1, 0, `Status: ${label}`);

return {
color,
label,
tooltip: <span style={{ whiteSpace: 'pre-line' }}>{tooltipLines.join('\n')}</span>,
};
}

export interface PodListProps {
pods: Pod[] | null;
metrics: PodMetrics[] | null;
Expand Down
20 changes: 12 additions & 8 deletions frontend/src/components/pod/__snapshots__/PodDetails.Error.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,16 +219,20 @@
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-deb4a-MuiGrid-root"
>
<div
aria-label=""
class="MuiBox-root css-6n7j50"
data-mui-internal-clone-element="true"
class="MuiBox-root css-axw7ok"
>
<span
class="MuiTypography-root MuiTypography-body1 css-1q14vbw-MuiTypography-root"
style="background-color: rgb(255, 235, 238); color: rgb(198, 40, 40);"
<div
aria-label=""
class="MuiBox-root css-6n7j50"
data-mui-internal-clone-element="true"
>
Error
</span>
<span
class="MuiTypography-root MuiTypography-body1 css-1q14vbw-MuiTypography-root"
style="background-color: rgb(255, 235, 238); color: rgb(198, 40, 40);"
>
Error
</span>
</div>
</div>
</dd>
<dt
Expand Down
20 changes: 12 additions & 8 deletions frontend/src/components/pod/__snapshots__/PodDetails.Initializing.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,16 +219,20 @@
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-deb4a-MuiGrid-root"
>
<div
aria-label=""
class="MuiBox-root css-6n7j50"
data-mui-internal-clone-element="true"
class="MuiBox-root css-axw7ok"
>
<span
class="MuiTypography-root MuiTypography-body1 css-1q14vbw-MuiTypography-root"
style="background-color: rgb(240, 240, 240); color: rgba(0, 0, 0, 0.87);"
<div
aria-label=""
class="MuiBox-root css-6n7j50"
data-mui-internal-clone-element="true"
>
Init:0/2
</span>
<span
class="MuiTypography-root MuiTypography-body1 css-1q14vbw-MuiTypography-root"
style="background-color: rgb(240, 240, 240); color: rgba(0, 0, 0, 0.87);"
>
Init:0/2
</span>
</div>
</div>
</dd>
<dt
Expand Down
20 changes: 12 additions & 8 deletions frontend/src/components/pod/__snapshots__/PodDetails.LivenessFailed.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,16 +219,20 @@
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-deb4a-MuiGrid-root"
>
<div
aria-label="back-off 5m0s restarting failed container=liveness pod=liveness-http_default(4f8b71a3-f99c-41c2-9523-83edc1de02ce)"
class="MuiBox-root css-6n7j50"
data-mui-internal-clone-element="true"
class="MuiBox-root css-axw7ok"
>
<span
class="MuiTypography-root MuiTypography-body1 css-1q14vbw-MuiTypography-root"
style="background-color: rgb(255, 243, 224); color: rgb(196, 69, 0);"
<div
aria-label="back-off 5m0s restarting failed container=liveness pod=liveness-http_default(4f8b71a3-f99c-41c2-9523-83edc1de02ce)"
class="MuiBox-root css-6n7j50"
data-mui-internal-clone-element="true"
>
CrashLoopBackOff
</span>
<span
class="MuiTypography-root MuiTypography-body1 css-1q14vbw-MuiTypography-root"
style="background-color: rgb(255, 243, 224); color: rgb(196, 69, 0);"
>
CrashLoopBackOff
</span>
</div>
</div>
</dd>
<dt
Expand Down
20 changes: 12 additions & 8 deletions frontend/src/components/pod/__snapshots__/PodDetails.PullBackOff.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,16 +219,20 @@
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-deb4a-MuiGrid-root"
>
<div
aria-label="Back-off pulling image "doesnotexist:nover""
class="MuiBox-root css-6n7j50"
data-mui-internal-clone-element="true"
class="MuiBox-root css-axw7ok"
>
<span
class="MuiTypography-root MuiTypography-body1 css-1q14vbw-MuiTypography-root"
style="background-color: rgb(240, 240, 240); color: rgba(0, 0, 0, 0.87);"
<div
aria-label="Back-off pulling image "doesnotexist:nover""
class="MuiBox-root css-6n7j50"
data-mui-internal-clone-element="true"
>
ImagePullBackOff
</span>
<span
class="MuiTypography-root MuiTypography-body1 css-1q14vbw-MuiTypography-root"
style="background-color: rgb(240, 240, 240); color: rgba(0, 0, 0, 0.87);"
>
ImagePullBackOff
</span>
</div>
</div>
</dd>
<dt
Expand Down
20 changes: 12 additions & 8 deletions frontend/src/components/pod/__snapshots__/PodDetails.Running.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,16 +219,20 @@
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-deb4a-MuiGrid-root"
>
<div
aria-label=""
class="MuiBox-root css-6n7j50"
data-mui-internal-clone-element="true"
class="MuiBox-root css-axw7ok"
>
<span
class="MuiTypography-root MuiTypography-body1 css-1q14vbw-MuiTypography-root"
style="background-color: rgb(248, 255, 240); color: rgb(46, 125, 50);"
<div
aria-label=""
class="MuiBox-root css-6n7j50"
data-mui-internal-clone-element="true"
>
Running
</span>
<span
class="MuiTypography-root MuiTypography-body1 css-1q14vbw-MuiTypography-root"
style="background-color: rgb(248, 255, 240); color: rgb(46, 125, 50);"
>
Running
</span>
</div>
</div>
</dd>
<dt
Expand Down
20 changes: 12 additions & 8 deletions frontend/src/components/pod/__snapshots__/PodDetails.Successful.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,16 +219,20 @@
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-deb4a-MuiGrid-root"
>
<div
aria-label=""
class="MuiBox-root css-6n7j50"
data-mui-internal-clone-element="true"
class="MuiBox-root css-axw7ok"
>
<span
class="MuiTypography-root MuiTypography-body1 css-1q14vbw-MuiTypography-root"
style="background-color: rgb(248, 255, 240); color: rgb(46, 125, 50);"
<div
aria-label=""
class="MuiBox-root css-6n7j50"
data-mui-internal-clone-element="true"
>
Completed
</span>
<span
class="MuiTypography-root MuiTypography-body1 css-1q14vbw-MuiTypography-root"
style="background-color: rgb(248, 255, 240); color: rgb(46, 125, 50);"
>
Completed
</span>
</div>
</div>
</dd>
<dt
Expand Down
Loading
Loading