Skip to content

Commit

Permalink
frontend: Add PodMetrics to the Pod list
Browse files Browse the repository at this point in the history 
Signed-off-by: Oleksandr Dubenko <[email protected]>
  • Loading branch information
@sniok
sniok committed Jan 20, 2025
1 parent 46ca038 commit 7275325
Show file tree
Hide file tree
Showing 3 changed files with 248 additions and 2 deletions.
63 changes: 62 additions & 1 deletion frontend/src/components/pod/List.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import { ApiError } from '../../lib/k8s/apiProxy';
import Pod from '../../lib/k8s/pod';
import { METRIC_REFETCH_INTERVAL_MS, PodMetrics } from '../../lib/k8s/PodMetrics';
import { parseCpu, parseRam, unparseCpu, unparseRam } from '../../lib/units';
import { timeAgo } from '../../lib/util';
import { useNamespaces } from '../../redux/filterSlice';
import { HeadlampEventType, useEventCallback } from '../../redux/headlampEventSlice';
Expand Down Expand Up @@ -62,6 +64,7 @@ function getReadinessGatesStatus(pods: Pod) {
export interface PodListProps {
pods: Pod[] | null;
error: ApiError | null;
metrics: PodMetrics[] | null;
hideColumns?: ('namespace' | 'restarts')[];
reflectTableInURL?: SimpleTableProps['reflectInURL'];
noNamespaceFilter?: boolean;
Expand All @@ -72,13 +75,33 @@ export function PodListRenderer(props: PodListProps) {
const {
pods,
error,
metrics,
hideColumns = [],
reflectTableInURL = 'pods',
noNamespaceFilter,
clusterErrors,
} = props;
const { t } = useTranslation(['glossary', 'translation']);

const getCpuUsage = (pod: Pod) => {
const metric = metrics?.find(it => it.getName() === pod.getName());
if (!metric) return;

return (
metric?.jsonData.containers.map(it => parseCpu(it.usage.cpu)).reduce((a, b) => a + b, 0) ?? 0
);
};

const getMemoryUsage = (pod: Pod) => {
const metric = metrics?.find(it => it.getName() === pod.getName());
if (!metric) return;

return (
metric?.jsonData.containers.map(it => parseRam(it.usage.memory)).reduce((a, b) => a + b, 0) ??
0
);
};

return (
<ResourceListView
title={t('Pods')}
Expand Down Expand Up @@ -117,6 +140,34 @@ export function PodListRenderer(props: PodListProps) {
getValue: pod => pod.getDetailedStatus().reason,
render: makePodStatusLabel,
},
{
id: 'cpu',
label: t('CPU'),
gridTemplate: 'min-content',
render: pod => {
const cpu = getCpuUsage(pod);
if (!cpu) return;

const { value, unit } = unparseCpu(String(cpu));

return `${value} ${unit}`;
},
getValue: pod => getCpuUsage(pod),
},
{
id: 'memory',
label: t('Memory'),
render: pod => {
const memory = getMemoryUsage(pod);
if (!memory) return;
const { value, unit } = unparseRam(memory);

return `${value} ${unit}`;
},
getValue: pod => {
return getMemoryUsage(pod);
},
},
{
id: 'ip',
label: t('glossary|IP'),
Expand Down Expand Up @@ -218,6 +269,10 @@ export function PodListRenderer(props: PodListProps) {

export default function PodList() {
const { items, error, clusterErrors } = Pod.useList({ namespace: useNamespaces() });
const { items: podMetrics, clusterErrors: metricsClusterErrors } = PodMetrics.useList({
namespace: useNamespaces(),
refetchInterval: METRIC_REFETCH_INTERVAL_MS,
});

const dispatchHeadlampEvent = useEventCallback(HeadlampEventType.LIST_VIEW);

Expand All @@ -230,6 +285,12 @@ export default function PodList() {
}, [items, error]);

return (
<PodListRenderer pods={items} error={error} clusterErrors={clusterErrors} reflectTableInURL />
<PodListRenderer
pods={items}
error={error}
metrics={podMetrics}
clusterErrors={{ ...metricsClusterErrors, ...clusterErrors }}
reflectTableInURL
/>
);
}
23 changes: 23 additions & 0 deletions frontend/src/components/pod/PodList.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,29 @@ export default {
items: podList,
})
),
http.get('http://localhost:4466/apis/metrics.k8s.io/v1beta1/pods', () =>
HttpResponse.json({
kind: 'PodMetricsList',
apiVersion: 'metrics.k8s.io/v1beta1',
metadata: {},
items: [
{
metadata: {
name: 'successful',
},
containers: [
{
name: 'etcd',
usage: {
cpu: '16317640n',
memory: '47544Ki',
},
},
],
},
],
})
),
],
},
},
Expand Down
164 changes: 163 additions & 1 deletion frontend/src/components/pod/__snapshots__/PodList.Items.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@
</div>
</div>
<table
class="MuiTable-root css-j2jh6a-MuiTable-root"
class="MuiTable-root css-m4vyty-MuiTable-root"
>
<thead
class="MuiTableHead-root css-1tmrira-MuiTableHead-root"
Expand Down Expand Up @@ -572,6 +572,116 @@
/>
</div>
</th>
<th
aria-sort="none"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1ki1qk1-MuiTableCell-root"
colspan="1"
data-can-sort="true"
data-index="-1"
scope="col"
>
<div
class="Mui-TableHeadCell-Content MuiBox-root css-1w86f15"
>
<div
class="Mui-TableHeadCell-Content-Labels MuiBox-root css-68rqdf"
>
<div
class="Mui-TableHeadCell-Content-Wrapper MuiBox-root css-chb057"
>
CPU
</div>
<span
aria-label="Sort by CPU ascending"
class="MuiBadge-root css-1c32n2y-MuiBadge-root"
data-mui-internal-clone-element="true"
>
<span
aria-label="Sort by CPU ascending"
class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-118d58w-MuiButtonBase-root-MuiTableSortLabel-root"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon"
data-testid="SyncAltIcon"
focusable="false"
style="transform: rotate(-90deg) scaleX(0.9) translateX(-1px);"
viewBox="0 0 24 24"
>
<path
d="m18 12 4-4-4-4v3H3v2h15zM6 12l-4 4 4 4v-3h15v-2H6z"
/>
</svg>
</span>
<span
class="MuiBadge-badge MuiBadge-standard MuiBadge-invisible MuiBadge-anchorOriginTopRight MuiBadge-anchorOriginTopRightCircular MuiBadge-overlapCircular css-dniquu-MuiBadge-badge"
>
0
</span>
</span>
</div>
<div
class="Mui-TableHeadCell-Content-Actions MuiBox-root css-epvm6"
/>
</div>
</th>
<th
aria-sort="none"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1p0s4m1-MuiTableCell-root"
colspan="1"
data-can-sort="true"
data-index="-1"
scope="col"
>
<div
class="Mui-TableHeadCell-Content MuiBox-root css-1w86f15"
>
<div
class="Mui-TableHeadCell-Content-Labels MuiBox-root css-68rqdf"
>
<div
class="Mui-TableHeadCell-Content-Wrapper MuiBox-root css-lapokc"
>
Memory
</div>
<span
aria-label="Sort by Memory ascending"
class="MuiBadge-root css-1c32n2y-MuiBadge-root"
data-mui-internal-clone-element="true"
>
<span
aria-label="Sort by Memory ascending"
class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-118d58w-MuiButtonBase-root-MuiTableSortLabel-root"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon"
data-testid="SyncAltIcon"
focusable="false"
style="transform: rotate(-90deg) scaleX(0.9) translateX(-1px);"
viewBox="0 0 24 24"
>
<path
d="m18 12 4-4-4-4v3H3v2h15zM6 12l-4 4 4 4v-3h15v-2H6z"
/>
</svg>
</span>
<span
class="MuiBadge-badge MuiBadge-standard MuiBadge-invisible MuiBadge-anchorOriginTopRight MuiBadge-anchorOriginTopRightCircular MuiBadge-overlapCircular css-dniquu-MuiBadge-badge"
>
0
</span>
</span>
</div>
<div
class="Mui-TableHeadCell-Content-Actions MuiBox-root css-epvm6"
/>
</div>
</th>
<th
aria-sort="none"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeMedium css-5ustae-MuiTableCell-root"
Expand Down Expand Up @@ -846,6 +956,12 @@
</span>
</div>
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ab4kvo-MuiTableCell-root"
/>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1ni1ao8-MuiTableCell-root"
/>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-149w9qi-MuiTableCell-root"
>
Expand Down Expand Up @@ -985,6 +1101,16 @@
</span>
</div>
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ab4kvo-MuiTableCell-root"
>
16.32 m
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1ni1ao8-MuiTableCell-root"
>
46.4 Mi
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-149w9qi-MuiTableCell-root"
/>
Expand Down Expand Up @@ -1122,6 +1248,12 @@
</span>
</div>
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ab4kvo-MuiTableCell-root"
/>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1ni1ao8-MuiTableCell-root"
/>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-149w9qi-MuiTableCell-root"
>
Expand Down Expand Up @@ -1261,6 +1393,12 @@
</span>
</div>
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ab4kvo-MuiTableCell-root"
/>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1ni1ao8-MuiTableCell-root"
/>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-149w9qi-MuiTableCell-root"
>
Expand Down Expand Up @@ -1400,6 +1538,12 @@
</span>
</div>
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ab4kvo-MuiTableCell-root"
/>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1ni1ao8-MuiTableCell-root"
/>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-149w9qi-MuiTableCell-root"
>
Expand Down Expand Up @@ -1539,6 +1683,12 @@
</span>
</div>
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ab4kvo-MuiTableCell-root"
/>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1ni1ao8-MuiTableCell-root"
/>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-149w9qi-MuiTableCell-root"
>
Expand Down Expand Up @@ -1678,6 +1828,12 @@
</span>
</div>
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ab4kvo-MuiTableCell-root"
/>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1ni1ao8-MuiTableCell-root"
/>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-149w9qi-MuiTableCell-root"
>
Expand Down Expand Up @@ -1817,6 +1973,12 @@
</span>
</div>
</td>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ab4kvo-MuiTableCell-root"
/>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1ni1ao8-MuiTableCell-root"
/>
<td
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-149w9qi-MuiTableCell-root"
>
Expand Down

0 comments on commit 7275325

Please sign in to comment.