Fix ResourceQuotaDetails quotas display bugs (#5909)

src/common/utils/convertCpu.ts

@@ -3,18 +3,38 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
+import { TypedRegEx } from "typed-regex";
+
 // Helper to convert CPU K8S units to numbers
 
-const thousand = 1000;
-const million = thousand * thousand;
-const shortBillion = thousand * million;
+const unitConverters = new Map([
+  ["n", 1000 ** -3],
+  ["u", 1000 ** -2],
+  ["m", 1000 ** -1], // milli
+  ["", 1000 ** 0], // no units
+  ["k", 1000 ** 1],
+  ["M", 1000 ** 2],
+  ["G", 1000 ** 3],
+  ["P", 1000 ** 4],
+  ["T", 1000 ** 5],
+  ["E", 1000 ** 6],
+]);
 
-export function cpuUnitsToNumber(cpu: string) {
-  const cpuNum = parseInt(cpu);
+const cpuUnitsRegex = TypedRegEx("^(?<digits>[+-]?[0-9.]+(e[-+]?[0-9]+)?)(?<unit>[EinumkKMGTP]*)$");
 
-  if (cpu.includes("m")) return cpuNum / thousand;
-  if (cpu.includes("u")) return cpuNum / million;
-  if (cpu.includes("n")) return cpuNum / shortBillion;
+export function cpuUnitsToNumber(value: string) {
+  const match = cpuUnitsRegex.captures(value);
 
-  return parseFloat(cpu);
+  if (!match) {
+    return undefined;
+  }
+
+  const { digits = "", unit } = match;
+  const conversion = unitConverters.get(unit);
+
+  if (conversion === undefined) {
+    return undefined;
+  }
+
+  return parseFloat(digits) * conversion;
 }

src/renderer/components/+config-resource-quotas/resource-quota-details.tsx

@@ -19,7 +19,7 @@ import logger from "../../../common/logger";
 export interface ResourceQuotaDetailsProps extends KubeObjectDetailsProps<ResourceQuota> {
 }
 
-function transformUnit(name: string, value: string): number {
+function transformUnit(name: string, value: string): number | undefined {
   if (name.includes("memory") || name.includes("storage")) {
     return unitsToBytes(value);
   }
@@ -36,23 +36,38 @@ function renderQuotas(quota: ResourceQuota): JSX.Element[] {
 
   return object.entries(hard)
     .filter(hasDefinedTupleValue)
-    .map(([name, value]) => {
-      const current = transformUnit(name, value);
-      const max = transformUnit(name, value);
-      const usage = max === 0 ? 100 : Math.ceil(current / max * 100); // special case 0 max as always 100% usage
+    .map(([name, rawMax]) => {
+      const rawCurrent = used[name] ?? "0";
+      const current = transformUnit(name, rawCurrent);
+      const max = transformUnit(name, rawMax);
+
+      if (current === undefined || max === undefined) {
+        return (
+          <div key={name} className={cssNames("param", kebabCase(name))}>
+            <span className="title">{name}</span>
+            <span className="value">
+              {`${rawCurrent} / ${rawMax}`}
+            </span>
+          </div>
+        );
+      }
+
+      const usage = max === 0
+        ? 100 // special case 0 max as always 100% usage
+        : current / max * 100;
 
       return (
         <div key={name} className={cssNames("param", kebabCase(name))}>
           <span className="title">{name}</span>
           <span className="value">
-            {`${used[name]} / ${value}`}
+            {`${rawCurrent} / ${rawMax}`}
           </span>
           <LineProgress
             max={max}
             value={current}
             tooltip={(
               <p>
-                {`Set: ${value}. Usage: ${usage}%`}
+                {`Set: ${rawMax}. Usage: ${+usage.toFixed(2)}%`}
               </p>
             )}
           />

src/renderer/components/+workloads-pods/store.ts

@@ -82,7 +82,7 @@ export class PodStore extends KubeObjectStore<Pod, PodApi> {
       }
 
       return {
-        cpu: total.cpu + cpuUnitsToNumber(cpu),
+        cpu: total.cpu + (cpuUnitsToNumber(cpu) ?? 0),
         memory: total.memory + unitsToBytes(memory),
       };
     }, empty);