Fix Resource Quota Rendering (#624)

* add parsing of quota values which are non-numeric in the general case

* add unit tests

Signed-off-by: Sebastian Malton <smalton@mirantis.com>

Co-authored-by: Sebastian Malton <smalton@mirantis.com>

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

@@ -4,7 +4,7 @@ import kebabCase from "lodash/kebabCase";
 import { observer } from "mobx-react";
 import { Trans } from "@lingui/macro";
 import { DrawerItem, DrawerTitle } from "../drawer";
-import { cpuUnitsToNumber, cssNames, unitsToBytes } from "../../utils";
+import { cpuUnitsToNumber, cssNames, unitsToBytes, metricUnitsToNumber } from "../../utils";
 import { KubeObjectDetailsProps } from "../kube-object";
 import { ResourceQuota, resourceQuotaApi } from "../../api/endpoints/resource-quota.api";
 import { LineProgress } from "../line-progress";
@@ -15,24 +15,30 @@ import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 interface Props extends KubeObjectDetailsProps<ResourceQuota> {
 }
 
-@observer
+const onlyNumbers = /$[0-9]*^/g;
-export class ResourceQuotaDetails extends React.Component<Props> {
+
-  renderQuotas = (quota: ResourceQuota) => {
+function transformUnit(name: string, value: string): number {
-    const { hard, used } = quota.status
+  if (name.includes("memory") || name.includes("storage")) {
-    if (!hard || !used) return null
+    return unitsToBytes(value)
-    const transformUnit = (name: string, value: string) => {
+  }
-      if (name.includes("memory") || name.includes("storage")) {
+
-        return unitsToBytes(value)
+  if (name.includes("cpu")) {
-      }
+    return cpuUnitsToNumber(value)
-      if (name.includes("cpu")) {
+  }
-        return cpuUnitsToNumber(value)
+
-      }
+  return metricUnitsToNumber(value);
-      return parseInt(value)
+}
-    }
+
-    return Object.entries(hard).map(([name, value]) => {
+function renderQuotas(quota: ResourceQuota): JSX.Element[] {
-      if (!used[name]) return null
+  const { hard = {}, used = {} } = quota.status
+
+  return Object.entries(hard)
+    .filter(([name]) => used[name])
+    .map(([name, value]) => {
       const current = transformUnit(name, used[name])
       const max = transformUnit(name, value)
+      const usage = max === 0 ? 100 : Math.ceil(current / max * 100); // special case 0 max as always 100% usage
+
       return (
         <div key={name} className={cssNames("param", kebabCase(name))}>
           <span className="title">{name}</span>
@@ -41,14 +47,16 @@ export class ResourceQuotaDetails extends React.Component<Props> {
             max={max}
             value={current}
             tooltip={
-              <p><Trans>Set</Trans>: {value}. <Trans>Used</Trans>: {Math.ceil(current / max * 100) + "%"}</p>
+              <p><Trans>Set</Trans>: {value}. <Trans>Usage</Trans>: {usage + "%"}</p>
             }
           />
         </div>
       )
     })
-  }
+}
 
+@observer
+export class ResourceQuotaDetails extends React.Component<Props> {
   render() {
     const { object: quota } = this.props;
     if (!quota) return null;
@@ -57,7 +65,7 @@ export class ResourceQuotaDetails extends React.Component<Props> {
         <KubeObjectMeta object={quota}/>
 
         <DrawerItem name={<Trans>Quotas</Trans>} className="quota-list">
-          {this.renderQuotas(quota)}
+          {renderQuotas(quota)}
         </DrawerItem>
 
         {quota.getScopeSelector().length > 0 && (

src/renderer/utils/convertCpu.ts

@@ -1,10 +1,13 @@
 // Helper to convert CPU K8S units to numbers
 
+const thousand = 1000;
+const million = thousand * thousand;
+const shortBillion = thousand * million;
+
 export function cpuUnitsToNumber(cpu: string) {
   const cpuNum = parseInt(cpu)
-  const billion = 1000000 * 1000
+  if (cpu.includes("m")) return cpuNum / thousand
-  if (cpu.includes("m")) return cpuNum / 1000
+  if (cpu.includes("u")) return cpuNum / million
-  if (cpu.includes("u")) return cpuNum / 1000000
+  if (cpu.includes("n")) return cpuNum / shortBillion
-  if (cpu.includes("n")) return cpuNum / billion
   return parseFloat(cpu)
-}
+}

src/renderer/utils/convertMemory.ts

@@ -7,9 +7,9 @@ export function unitsToBytes(value: string) {
   if (!suffixes.some(suffix => value.includes(suffix))) {
     return parseFloat(value)
   }
-  const index = suffixes.findIndex(suffix =>
+ 
-    suffix == value.replace(/[0-9]|i|\./g, '')
+  const suffix = value.replace(/[0-9]|i|\./g, '');
-  )
+  const index = suffixes.indexOf(suffix);
   return parseInt(
     (parseFloat(value) * Math.pow(base, index + 1)).toFixed(1)
   )
@@ -21,8 +21,10 @@ export function bytesToUnits(bytes: number, precision = 1) {
   if (!bytes) {
     return "N/A"
   }
+
   if (index === 0) {
     return `${bytes}${sizes[index]}`
   }
+
   return `${(bytes / (1024 ** index)).toFixed(precision)}${sizes[index]}i`
-}
+}

src/renderer/utils/index.ts

@@ -20,3 +20,4 @@ export * from './formatDuration'
 export * from './isReactNode'
 export * from './convertMemory'
 export * from './convertCpu'
+export * from './metricUnitsToNumber'

src/renderer/utils/metricUnitsToNumber.ts

@@ -0,0 +1,10 @@
+const base = 1000;
+const suffixes = ["k", "m", "g", "t", "q"];
+
+export function metricUnitsToNumber(value: string): number {
+  const suffix = value.toLowerCase().slice(-1);
+  const index = suffixes.indexOf(suffix);
+  return parseInt(
+    (parseFloat(value) * Math.pow(base, index + 1)).toFixed(1)
+  )
+}

src/renderer/utils/metricUnitsToNumber_test.ts

@@ -0,0 +1,15 @@
+import { metricUnitsToNumber } from "./metricUnitsToNumber";
+
+describe("metricUnitsToNumber tests", () => {
+  test("plain number", () => {
+    expect(metricUnitsToNumber("124")).toStrictEqual(124);
+  });
+
+  test("with k suffix", () => {
+    expect(metricUnitsToNumber("124k")).toStrictEqual(124000);
+  });
+
+  test("with m suffix", () => {
+    expect(metricUnitsToNumber("124m")).toStrictEqual(124000000);
+  });
+});