Merge pull request #1113 from layer5io/aabidsofi19-patch-1

fix cpu metrics formatting

Author: aabidsofi19

src/custom/ResourceDetailFormatters/Formatter.tsx

@@ -57,7 +57,7 @@ import {
   TableDataFormatterProps,
   TextWithLinkFormatterProps
 } from './types';
-import { splitCamelCaseString } from './utils';
+import { parseCpu, splitCamelCaseString } from './utils';
 
 interface ResourceProgressProps {
   title: string;
@@ -368,10 +368,12 @@ export const MemoryUsage: React.FC<MemoryUsageProps> = ({
     return parseInt(kiValue.replace('Ki', '')) * 1024;
   }, []);
 
-  const cpuUsage = useMemo(() => {
+  const reservedCpu = useMemo(() => {
     if (!allocatable || !capacity) return 0;
-    const usedCPU = parseInt(capacity.cpu) - parseInt(allocatable.cpu);
-    return (usedCPU / parseInt(capacity.cpu)) * 100;
+    const usedCPU = parseCpu(capacity.cpu) - parseCpu(allocatable.cpu);
+    const capacityCPU = parseCpu(capacity.cpu);
+
+    return (usedCPU / capacityCPU) * 100;
   }, [allocatable, capacity]);
 
   const memoryUsage = useMemo(() => {
@@ -382,12 +384,14 @@ export const MemoryUsage: React.FC<MemoryUsageProps> = ({
     return (usedMemory / totalMemory) * 100;
   }, [allocatable, capacity]);
 
-  const diskUsage = useMemo(() => {
+  const diskUsagePercent = useMemo(() => {
     if (!allocatable || !capacity) return 0;
-    const totalStorageInBytes = convertKiToBytes(capacity['ephemeral-storage']);
-    const availableStorageInBytes = parseInt(allocatable['ephemeral-storage']);
-    const usedStorageInBytes = totalStorageInBytes - availableStorageInBytes;
-    return (usedStorageInBytes / totalStorageInBytes) * 100;
+
+    const total = convertKiToBytes(capacity['ephemeral-storage']);
+    const available = convertKiToBytes(allocatable['ephemeral-storage']);
+
+    const used = total - available;
+    return (used / total) * 100;
   }, [allocatable, capacity, convertKiToBytes]);
 
   const chartOptions = useCallback(
@@ -439,9 +443,9 @@ export const MemoryUsage: React.FC<MemoryUsageProps> = ({
 
   return (
     <FlexResourceContainer>
-      <ResourceProgress title="CPU Usage" percentage={cpuUsage} type={'CPU'} />
+      <ResourceProgress title="System Reserved Cpu" percentage={reservedCpu} type={'CPU'} />
       <ResourceProgress title="Memory Usage" percentage={memoryUsage} type={'Memory'} />
-      <ResourceProgress title="Disk Usage" percentage={diskUsage} type={'Disk'} />
+      <ResourceProgress title="Disk Usage" percentage={diskUsagePercent} type={'Disk'} />
     </FlexResourceContainer>
   );
 };

src/custom/ResourceDetailFormatters/utils.ts

@@ -103,3 +103,24 @@ export const convertToReadableUnit = (value: number): string => {
 
   return `${value.toFixed(2)} ${units[index]}`;
 };
+
+/**
+ * Parses a Kubernetes CPU string (e.g., "100m", "1", "1000000n")
+ * and returns the CPU value in cores as a float.
+ */
+export function parseCpu(cpu: string): number {
+  if (!cpu) return 0;
+
+  if (cpu.endsWith('n')) {
+    // Nanocores → cores
+    return parseInt(cpu.slice(0, -1), 10) / 1_000_000_000;
+  }
+
+  if (cpu.endsWith('m')) {
+    // Millicores → cores
+    return parseInt(cpu.slice(0, -1), 10) / 1000;
+  }
+
+  // No suffix = cores
+  return parseFloat(cpu);
+}