feat: improve handling of resource units (kyma-project#3980)

Author: chriskari

src/components/Clusters/views/ClusterOverview/ClusterStats.js

@@ -9,7 +9,7 @@ import {
   bytesToHumanReadable,
   cpusToHumanReadable,
   getBytes,
-} from 'resources/Namespaces/ResourcesUsage';
+} from 'shared/helpers/resources';
 import {
   getHealthyDaemonsets,
   getHealthyReplicasCount,

src/components/Nodes/NodeResources/NodeResources.js

@@ -5,7 +5,7 @@ import './NodeResources.scss';
 import {
   bytesToHumanReadable,
   cpusToHumanReadable,
-} from '../../../resources/Namespaces/ResourcesUsage.js';
+} from 'shared/helpers/resources';
 
 export function NodeResources({ metrics, resources }) {
   const { t } = useTranslation();

src/components/Nodes/nodeQueries.js

@@ -1,9 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useGet } from 'shared/hooks/BackendAPI/useGet';
-import {
-  getBytes,
-  getCpus,
-} from '../../resources/Namespaces/ResourcesUsage.js';
+import { getBytes, getCpus } from 'shared/helpers/resources';
 
 const getPercentageFromUsage = (value, total) => {
   if (total === 0) {
@@ -123,18 +120,12 @@ const emptyResources = {
 };
 
 function addResources(a, b) {
-  if (!a) {
-    if (!b) {
-      return structuredClone(emptyResources);
-    }
-    return b;
-  }
-  if (!b) {
-    if (!a) {
-      return structuredClone(emptyResources);
-    }
-    return a;
+  if (!a && !b) {
+    return structuredClone(emptyResources);
   }
+  if (!a) return b ?? structuredClone(emptyResources);
+  if (!b) return a;
+
   return {
     limits: {
       cpu: getCpus(a?.limits?.cpu) + getCpus(b?.limits?.cpu),

src/resources/Namespaces/ResourcesUsage.js

@@ -1,65 +1,17 @@
 import { UI5RadialChart } from 'shared/components/UI5RadialChart/UI5RadialChart';
 import { useTranslation } from 'react-i18next';
 
-import { formatResourceUnit } from 'shared/helpers/resources.js';
+import {
+  bytesToHumanReadable,
+  cpusToHumanReadable,
+} from 'shared/helpers/resources';
 import { Card, CardHeader } from '@ui5/webcomponents-react';
 import {
   calculateMetrics,
   usePodsMetricsQuery,
 } from 'resources/Pods/podQueries';
 import { Spinner } from 'shared/components/Spinner/Spinner';
 
-const MEMORY_SUFFIX_POWER = {
-  // must be sorted from the smallest to the largest; it is case sensitive; more info: https://medium.com/swlh/understanding-kubernetes-resource-cpu-and-memory-units-30284b3cc866
-  m: 1e-3,
-  k: 1e3,
-  K: 1e3,
-  Ki: 2 ** 10,
-  M: 1e6,
-  Mi: 2 ** 20,
-  G: 1e9,
-  Gi: 2 ** 30,
-  Ti: 2 ** 40,
-};
-
-const CPU_SUFFIX_POWER = {
-  m: 1e-3,
-  n: 1e-9,
-};
-
-export function getBytes(memoryStr) {
-  if (!memoryStr) return 0;
-
-  const unit = String(memoryStr).match(/[a-zA-Z]+/g)?.[0];
-  const value = parseFloat(memoryStr);
-  const bytes = value * (MEMORY_SUFFIX_POWER[unit] || 1);
-  return bytes;
-}
-
-export function getCpus(cpuString) {
-  if (!cpuString || cpuString === '0') {
-    return 0;
-  }
-
-  const suffix = String(cpuString).slice(-1);
-
-  const suffixPower = CPU_SUFFIX_POWER[suffix];
-  if (!suffixPower) {
-    return parseFloat(cpuString);
-  }
-
-  const number = String(cpuString).replace(suffix, '');
-  return number * suffixPower;
-}
-
-export function bytesToHumanReadable(bytes, { fixed = 0, unit = '' } = {}) {
-  return formatResourceUnit(bytes, true, { withoutSpace: true, fixed, unit });
-}
-
-export function cpusToHumanReadable(cpus, { fixed = 0, unit = '' } = {}) {
-  return formatResourceUnit(cpus, false, { withoutSpace: true, fixed, unit });
-}
-
 export const ResourcesUsage = ({ namespace }) => {
   const { t } = useTranslation();
   const { podsMetrics, error, loading } = usePodsMetricsQuery(namespace);

src/resources/Pods/podQueries.ts

@@ -3,7 +3,7 @@ import {
   cpusToHumanReadable,
   getBytes,
   getCpus,
-} from 'resources/Namespaces/ResourcesUsage';
+} from 'shared/helpers/resources';
 import { ResourceQuota } from './ResourceQuotaDetails';
 import { calculateMetrics } from 'resources/Pods/podQueries';
 import { UsageMetrics } from 'resources/Pods/types';

src/resources/ResourceQuotas/support.ts

@@ -12,7 +12,7 @@ type LinkProps = {
   design?: 'Default' | 'Subtle' | 'Emphasized';
   resetLayout?: boolean;
   onClick?: any;
-  style: React.CSSProperties;
+  style?: React.CSSProperties;
 };
 
 export const Link = ({
@@ -23,7 +23,7 @@ export const Link = ({
   design = 'Emphasized',
   resetLayout = true,
   onClick,
-  style,
+  style = {},
 }: LinkProps) => {
   const setLayout = useSetRecoilState(columnLayoutState);
   const navigate = useNavigate();

src/shared/components/Link/Link.tsx

@@ -5,6 +5,7 @@ const SI_PREFIXES = {
   m: 1e-3,
   '': 1,
   k: 1e3,
+  K: 1e3,
   M: 1e6,
   G: 1e9,
   T: 1e12,
@@ -13,20 +14,28 @@ const SI_PREFIXES = {
 };
 
 const SI_PREFIXES_BINARY = {
+  '': 1,
   Ki: 2 ** 10,
   Mi: 2 ** 20,
   Gi: 2 ** 30,
   Ti: 2 ** 40,
   Pi: 2 ** 50,
+  Ei: 2 ** 60,
+};
+
+const MEMORY_PREFIXES = {
+  ...SI_PREFIXES,
+  ...SI_PREFIXES_BINARY,
 };
 
 /*
 More precise round method.
-Want 1.005 to be rounded to 1.01 we need to add Number.EPSILON to fix the float inaccuracy
+Fixes floating point precision issues (e.g., 1.005 rounds to 1.01)
  */
-const preciseRound = (num, places) =>
-  Math.round((num + Number.EPSILON) * Math.pow(10, places)) /
-  Math.pow(10, places);
+const preciseRound = (num, places) => {
+  const multiplier = Math.pow(10, places);
+  return Math.round((num + Number.EPSILON) * multiplier) / multiplier;
+};
 
 export function formatResourceUnit(
   amount = 0,
@@ -67,3 +76,36 @@ export function formatResourceUnit(
 
   return output;
 }
+
+export function bytesToHumanReadable(bytes, { fixed = 0, unit = '' } = {}) {
+  return formatResourceUnit(bytes, true, { withoutSpace: true, fixed, unit });
+}
+
+export function cpusToHumanReadable(cpus, { fixed = 0, unit = '' } = {}) {
+  return formatResourceUnit(cpus, false, { withoutSpace: true, fixed, unit });
+}
+
+export function getCpus(cpuString) {
+  if (!cpuString || cpuString === '0') {
+    return 0;
+  }
+
+  const suffix = String(cpuString).slice(-1);
+
+  const suffixPower = SI_PREFIXES[suffix];
+  if (!suffixPower) {
+    return parseFloat(cpuString);
+  }
+
+  const number = String(cpuString).replace(suffix, '');
+  return number * suffixPower;
+}
+
+export function getBytes(memoryStr) {
+  if (!memoryStr) return 0;
+
+  const unit = String(memoryStr).match(/[a-zA-Z]+/g)?.[0];
+  const value = parseFloat(memoryStr);
+  const bytes = value * (MEMORY_PREFIXES[unit] || 1);
+  return bytes;
+}