Skip to content

Commit 69ac2cd

Browse files
illumeillume
authored
Merge pull request #3612 from skoeva/pod-metrics
frontend: Pod: Add tooltip for requests and limits
2 parents c5c584e + 3bdf049 commit 69ac2cd

File tree

15 files changed

+118
-9
lines changed

15 files changed

+118
-9
lines changed

‎frontend/src/components/common/Tooltip/TooltipIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import React from 'react';
2020
import TooltipLight from './TooltipLight';
2121

2222
export interface TooltipIconProps {
23-
children: string;
23+
children: string | React.ReactNode;
2424
/** A materialui/core icon. */
2525
icon?: IconProps['icon'];
2626
}

‎frontend/src/components/pod/List.tsx‎

Lines changed: 75 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { StatusLabel, StatusLabelProps } from '../common/Label';
3131
import Link from '../common/Link';
3232
import ResourceListView from '../common/Resource/ResourceListView';
3333
import { SimpleTableProps } from '../common/SimpleTable';
34+
import { TooltipIcon } from '../common/Tooltip';
3435
import LightTooltip from '../common/Tooltip/TooltipLight';
3536

3637
function getPodStatus(pod: Pod) {
@@ -246,9 +247,43 @@ export function PodListRenderer(props: PodListProps) {
246247
const cpu = getCpuUsage(pod);
247248
if (cpu === undefined) return;
248249

249-
const { value, unit } = unparseCpu(String(cpu));
250-
251-
return `${value} ${unit}`;
250+
const { value: aValue, unit: aUnit } = unparseCpu(String(cpu));
251+
252+
const request = pod.spec.containers
253+
.map(c => parseCpu(c.resources?.requests?.cpu || '0'))
254+
.reduce((a, b) => a + b, 0);
255+
256+
const limit = pod.spec.containers
257+
.map(c => parseCpu(c.resources?.limits?.cpu || '0'))
258+
.reduce((a, b) => a + b, 0);
259+
260+
const tooltipLines = [];
261+
if (request > 0) {
262+
const { value: rValue, unit: rUnit } = unparseCpu(String(request));
263+
const percentOfRequest = ((cpu / request) * 100).toFixed(1);
264+
tooltipLines.push(
265+
t('Request') +
266+
`: ${percentOfRequest}% (${aValue} ${aUnit}/${rValue} ${rUnit})`
267+
);
268+
}
269+
if (limit > 0) {
270+
const { value: lValue, unit: lUnit } = unparseCpu(String(limit));
271+
const percentOfLimit = ((cpu / limit) * 100).toFixed(1);
272+
tooltipLines.push(
273+
t('Limit') + `: ${percentOfLimit}% (${aValue} ${aUnit}/${lValue} ${lUnit})`
274+
);
275+
}
276+
277+
return (
278+
<Box display="flex" alignItems="center">
279+
<span style={{ whiteSpace: 'nowrap' }}>{`${aValue} ${aUnit}`}</span>
280+
{tooltipLines.length > 0 && (
281+
<TooltipIcon>
282+
<span style={{ whiteSpace: 'pre-line' }}>{tooltipLines.join('\n')}</span>
283+
</TooltipIcon>
284+
)}
285+
</Box>
286+
);
252287
},
253288
getValue: (pod: Pod) => getCpuUsage(pod) ?? 0,
254289
},
@@ -259,9 +294,43 @@ export function PodListRenderer(props: PodListProps) {
259294
render: (pod: Pod) => {
260295
const memory = getMemoryUsage(pod);
261296
if (memory === undefined) return;
262-
const { value, unit } = unparseRam(memory);
263-
264-
return `${value} ${unit}`;
297+
const { value: aValue, unit: aUnit } = unparseRam(memory);
298+
299+
const request = pod.spec.containers
300+
.map(c => parseRam(c.resources?.requests?.memory || '0'))
301+
.reduce((a, b) => a + b, 0);
302+
303+
const limit = pod.spec.containers
304+
.map(c => parseRam(c.resources?.limits?.memory || '0'))
305+
.reduce((a, b) => a + b, 0);
306+
307+
const tooltipLines = [];
308+
if (request > 0) {
309+
const { value: rValue, unit: rUnit } = unparseRam(request);
310+
const percentOfRequest = ((memory / request) * 100).toFixed(1);
311+
tooltipLines.push(
312+
t('Request') +
313+
`: ${percentOfRequest}% (${aValue} ${aUnit}/${rValue} ${rUnit})`
314+
);
315+
}
316+
if (limit > 0) {
317+
const { value: lValue, unit: lUnit } = unparseRam(limit);
318+
const percentOfLimit = ((memory / limit) * 100).toFixed(1);
319+
tooltipLines.push(
320+
t('Limit') + `: ${percentOfLimit}% (${aValue} ${aUnit}/${lValue} ${lUnit})`
321+
);
322+
}
323+
324+
return (
325+
<Box display="flex" alignItems="center">
326+
<span style={{ whiteSpace: 'nowrap' }}>{`${aValue} ${aUnit}`}</span>
327+
{tooltipLines.length > 0 && (
328+
<TooltipIcon>
329+
<span style={{ whiteSpace: 'pre-line' }}>{tooltipLines.join('\n')}</span>
330+
</TooltipIcon>
331+
)}
332+
</Box>
333+
);
265334
},
266335
getValue: (pod: Pod) => getMemoryUsage(pod) ?? 0,
267336
},

‎frontend/src/components/pod/__snapshots__/PodList.Items.stories.storyshot‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1124,12 +1124,28 @@
11241124
<td
11251125
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-lm23yi-MuiTableCell-root"
11261126
>
1127-
16.32 m
1127+
<div
1128+
class="MuiBox-root css-70qvj9"
1129+
>
1130+
<span
1131+
style="white-space: nowrap;"
1132+
>
1133+
16.32 m
1134+
</span>
1135+
</div>
11281136
</td>
11291137
<td
11301138
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-rrz0sj-MuiTableCell-root"
11311139
>
1132-
46.4 Mi
1140+
<div
1141+
class="MuiBox-root css-70qvj9"
1142+
>
1143+
<span
1144+
style="white-space: nowrap;"
1145+
>
1146+
46.4 Mi
1147+
</span>
1148+
</div>
11331149
</td>
11341150
<td
11351151
class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-fe8q5p-MuiTableCell-root"

‎frontend/src/i18n/locales/de/glossary.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,8 @@
160160
"Attach": "Anhängen",
161161
"Restarts": "Neustarts",
162162
"{{ restarts }} ({{ abbrevTime }} ago)": "{{ restarts }} (vor {{ abbrevTime }})",
163+
"Request": "",
164+
"Limit": "",
163165
"Nominated Node": "Nominierte Node",
164166
"Readiness Gates": "Bereitschaftstore",
165167
"Pod Disruption Budget": "Budget für Pod Disruption",

‎frontend/src/i18n/locales/en/glossary.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,8 @@
160160
"Attach": "Attach",
161161
"Restarts": "Restarts",
162162
"{{ restarts }} ({{ abbrevTime }} ago)": "{{ restarts }} ({{ abbrevTime }} ago)",
163+
"Request": "Request",
164+
"Limit": "Limit",
163165
"Nominated Node": "Nominated Node",
164166
"Readiness Gates": "Readiness Gates",
165167
"Pod Disruption Budget": "Pod Disruption Budget",

‎frontend/src/i18n/locales/es/glossary.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,8 @@
160160
"Attach": "Adjuntar",
161161
"Restarts": "Reinicios",
162162
"{{ restarts }} ({{ abbrevTime }} ago)": "{{ restarts }} (hace {{ abbrevTime }})",
163+
"Request": "",
164+
"Limit": "",
163165
"Nominated Node": "Nodo Nominado",
164166
"Readiness Gates": "Readiness Gates",
165167
"Pod Disruption Budget": "Pod Disruption Budget",

‎frontend/src/i18n/locales/fr/glossary.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,8 @@
160160
"Attach": "Attacher",
161161
"Restarts": "Redémarrages",
162162
"{{ restarts }} ({{ abbrevTime }} ago)": "{{ restarts }} (il y a {{ abbrevTime }})",
163+
"Request": "",
164+
"Limit": "",
163165
"Nominated Node": "Nœud nommé",
164166
"Readiness Gates": "Portes de disponibilité",
165167
"Pod Disruption Budget": "Pod Disruption Budget",

‎frontend/src/i18n/locales/hi/glossary.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,8 @@
160160
"Attach": "अटैच",
161161
"Restarts": "रीस्टार्ट",
162162
"{{ restarts }} ({{ abbrevTime }} ago)": "{{ restarts }} ({{ abbrevTime }} पहले)",
163+
"Request": "",
164+
"Limit": "",
163165
"Nominated Node": "नामांकित नोड",
164166
"Readiness Gates": "रेडीनेस गेट्स",
165167
"Pod Disruption Budget": "Pod डिसरप्शन बजट",

‎frontend/src/i18n/locales/it/glossary.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,8 @@
160160
"Attach": "Collega",
161161
"Restarts": "Riavvii",
162162
"{{ restarts }} ({{ abbrevTime }} ago)": "{{ restarts }} ({{ abbrevTime }} fa)",
163+
"Request": "",
164+
"Limit": "",
163165
"Nominated Node": "Nodo Nominato",
164166
"Readiness Gates": "Readiness Gate",
165167
"Pod Disruption Budget": "Pod Disruption Budget",

‎frontend/src/i18n/locales/ja/glossary.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,8 @@
160160
"Attach": "アタッチ",
161161
"Restarts": "再起動",
162162
"{{ restarts }} ({{ abbrevTime }} ago)": "{{ restarts }} ({{ abbrevTime }} 前)",
163+
"Request": "",
164+
"Limit": "",
163165
"Nominated Node": "指名ノード",
164166
"Readiness Gates": "準備ゲート",
165167
"Pod Disruption Budget": "ポッド中断バジェット",

0 commit comments

Comments
 (0)