add CPU and Memory to Pod table

Signed-off-by: goenning <me@goenning.net>

.changeset/fluffy-wasps-chew.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-kubernetes': patch
+---
+
+show request/limit CPU and Memory on the UI

plugins/kubernetes/src/components/Pods/PodsTable.test.tsx

@@ -108,10 +108,10 @@ describe('PodsTable', () => {
     expect(getByText('1/1')).toBeInTheDocument();
     expect(getByText('0')).toBeInTheDocument();
     expect(getByText('OK')).toBeInTheDocument();
-    expect(getByText('requests: 99%')).toBeInTheDocument();
-    expect(getByText('limits: 99%')).toBeInTheDocument();
-    expect(getByText('requests: 1%')).toBeInTheDocument();
-    expect(getByText('limits: 0%')).toBeInTheDocument();
+    expect(getByText('requests: 99% of 50m')).toBeInTheDocument();
+    expect(getByText('limits: 99% of 50m')).toBeInTheDocument();
+    expect(getByText('requests: 1% of 64MiB')).toBeInTheDocument();
+    expect(getByText('limits: 0% of 128MiB')).toBeInTheDocument();
   });
   it('should render placehoplder when empty metrics context', async () => {
     const podNameToClientPodStatus = new Map<string, ClientPodStatus>();

plugins/kubernetes/src/utils/pod.test.tsx

@@ -15,7 +15,11 @@
  */
 
 import React from 'react';
-import { currentToDeclaredResourceToPerc, podStatusToCpuUtil } from './pod';
+import {
+  currentToDeclaredResourceToPerc,
+  podStatusToCpuUtil,
+  podStatusToMemoryUtil,
+} from './pod';
 import { SubvalueCell } from '@backstage/core-components';
 
 describe('pod', () => {
@@ -46,7 +50,30 @@ describe('pod', () => {
         },
       } as any);
       expect(result).toStrictEqual(
-        <SubvalueCell subvalue="limits: 50%" value="requests: 99%" />,
+        <SubvalueCell
+          subvalue="limits: 50% of 100m"
+          value="requests: 99% of 50m"
+        />,
+      );
+    });
+  });
+  describe('podStatusToMemoryUtil', () => {
+    it('does use correct units', () => {
+      const result = podStatusToMemoryUtil({
+        memory: {
+          // ~91.5 MiB
+          currentUsage: '95948800',
+          // 320 MiB
+          limitTotal: '335544320',
+          // 192 MiB
+          requestTotal: '201326592',
+        },
+      } as any);
+      expect(result).toStrictEqual(
+        <SubvalueCell
+          subvalue="limits: 28% of 320MiB"
+          value="requests: 47% of 192MiB"
+        />,
       );
     });
   });

plugins/kubernetes/src/utils/pod.tsx

@@ -130,6 +130,10 @@ export const currentToDeclaredResourceToPerc = (
   return `${(numerator * BigInt(100)) / denominator}%`;
 };
 
+const formatMilicores = (value: string | number): string => {
+  return `${parseFloat(value.toString()) * 1000}m`;
+};
+
 export const podStatusToCpuUtil = (podStatus: ClientPodStatus): ReactNode => {
   const cpuUtil = podStatus.cpu;
 
@@ -146,15 +150,19 @@ export const podStatusToCpuUtil = (podStatus: ClientPodStatus): ReactNode => {
       value={`requests: ${currentToDeclaredResourceToPerc(
         currentUsage,
         cpuUtil.requestTotal,
-      )}`}
+      )} of ${formatMilicores(cpuUtil.requestTotal)}`}
       subvalue={`limits: ${currentToDeclaredResourceToPerc(
         currentUsage,
         cpuUtil.limitTotal,
-      )}`}
+      )} of ${formatMilicores(cpuUtil.limitTotal)}`}
     />
   );
 };
 
+const bytesToMiB = (value: string | number): string => {
+  return `${parseFloat(value.toString()) / 1024 / 1024}MiB`;
+};
+
 export const podStatusToMemoryUtil = (
   podStatus: ClientPodStatus,
 ): ReactNode => {
@@ -165,11 +173,11 @@ export const podStatusToMemoryUtil = (
       value={`requests: ${currentToDeclaredResourceToPerc(
         memUtil.currentUsage,
         memUtil.requestTotal,
-      )}`}
+      )} of ${bytesToMiB(memUtil.requestTotal)}`}
       subvalue={`limits: ${currentToDeclaredResourceToPerc(
         memUtil.currentUsage,
         memUtil.limitTotal,
-      )}`}
+      )} of ${bytesToMiB(memUtil.limitTotal)}`}
     />
   );
 };