fix(nodes): fix metrics for nodes

src/components/Nodes/NodeDetails/NodeDetails.js

@@ -18,6 +18,7 @@ export default function NodeDetails({ nodeName }) {
   const { t } = useTranslation();
   useWindowTitle(t('nodes.title_details', { nodeName }));
   const { data: resources } = useResourceByNode(nodeName);
+  console.log('XDD', data);
 
   const filterByHost = e => e.source.host === nodeName;
   const Events = (

src/components/Nodes/NodeResources/NodeResources.js

@@ -7,6 +7,7 @@ import './NodeResources.scss';
 export function NodeResources({ metrics, resources }) {
   const { t } = useTranslation();
   const { cpu, memory } = metrics || {};
+  console.log(metrics, resources);
 
   return cpu && memory ? (
     <>
@@ -39,7 +40,7 @@ export function NodeResources({ metrics, resources }) {
           max={memory.capacity}
           additionalInfo={`${roundTwoDecimals(
             memory.usage,
-          )}GiB / ${roundTwoDecimals(memory.capacity)}GiB`}
+          )}Gi / ${roundTwoDecimals(memory.capacity)}Gi`}
         />
       </Card>
       <Card
@@ -73,7 +74,7 @@ export function NodeResources({ metrics, resources }) {
           max={memory.capacity}
           additionalInfo={`${roundTwoDecimals(
             resources.requests?.memory,
-          )}GiB / ${roundTwoDecimals(memory.capacity)}GiB`}
+          )}Gi / ${roundTwoDecimals(memory.capacity)}Gi`}
         />
       </Card>
       <Card
@@ -105,7 +106,7 @@ export function NodeResources({ metrics, resources }) {
           max={memory.capacity}
           additionalInfo={`${roundTwoDecimals(
             resources.limits.memory,
-          )}GiB / ${roundTwoDecimals(memory.capacity)}GiB`}
+          )}Gi / ${roundTwoDecimals(memory.capacity)}Gi`}
         />
       </Card>
     </>

src/components/Nodes/nodeQueries.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useGet } from 'shared/hooks/BackendAPI/useGet';
 import {
   getBytes,
@@ -22,27 +22,30 @@ const formatMemory = memoryStr =>
 const createUsageMetrics = (node, metricsForNode) => {
   const cpuUsage = formatCpu(metricsForNode?.usage.cpu);
   const memoryUsage = formatMemory(metricsForNode?.usage.memory);
-  const cpuCapacity = parseInt(node.status.capacity?.cpu || '0') * 1000;
-  const memoryCapacity = formatMemory(node.status.capacity?.memory);
+  const cpuCapacity = parseInt(node.status.allocatable?.cpu || '0');
+  const memoryCapacity = formatMemory(node.status.allocatable?.memory);
+
+  const cpuPercentage = getPercentageFromUsage(cpuUsage, cpuCapacity);
+  const memoryPercentage = getPercentageFromUsage(memoryUsage, memoryCapacity);
 
   return {
     cpu: {
       usage: cpuUsage,
       capacity: cpuCapacity,
-      percentage: getPercentageFromUsage(cpuUsage, cpuCapacity) + '%',
-      percentageValue: getPercentageFromUsage(cpuUsage, cpuCapacity),
+      percentage: cpuPercentage + '%',
+      percentageValue: cpuPercentage,
     },
     memory: {
       usage: memoryUsage,
       capacity: memoryCapacity,
-      percentage: getPercentageFromUsage(memoryUsage, memoryCapacity) + '%',
-      percentageValue: getPercentageFromUsage(memoryUsage, memoryCapacity),
+      percentage: memoryPercentage + '%',
+      percentageValue: memoryPercentage,
     },
   };
 };
 
 export function useNodesQuery(skip = false) {
-  const [data, setData] = React.useState(null);
+  const [data, setData] = useState(null);
   const { data: nodeMetrics, loading: metricsLoading } = useGet(
     '/apis/metrics.k8s.io/v1beta1/nodes',
     {
@@ -57,12 +60,13 @@ export function useNodesQuery(skip = false) {
     loading: nodesLoading,
   } = useGet('/api/v1/nodes', { pollingInterval: 5500, skip });
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (nodes) {
       const getNodeMetrics = node => {
         const metricsForNode = nodeMetrics.items.find(
           metrics => node.metadata.name === metrics.metadata.name,
         );
+        console.log(metricsForNode);
         return createUsageMetrics(node, metricsForNode);
       };
 
@@ -83,7 +87,7 @@ export function useNodesQuery(skip = false) {
 }
 
 export function useNodeQuery(nodeName) {
-  const [data, setData] = React.useState(null);
+  const [data, setData] = useState(null);
   const {
     data: nodeMetrics,
     error: metricsError,
@@ -98,8 +102,9 @@ export function useNodeQuery(nodeName) {
     loading: nodeLoading,
   } = useGet(`/api/v1/nodes/${nodeName}`, { pollingInterval: 3000 });
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (node) {
+      console.log(nodeMetrics);
       setData({
         node,
         metrics: nodeMetrics ? createUsageMetrics(node, nodeMetrics) : {},
@@ -138,7 +143,7 @@ function addResources(a, b) {
     }
     return a;
   }
-  return {
+  const addedResources = {
     limits: {
       cpu: getCpus(a?.limits?.cpu) + getCpus(b?.limits?.cpu),
       memory: getBytes(a?.limits?.memory) + getBytes(b?.limits?.memory),
@@ -148,11 +153,14 @@ function addResources(a, b) {
       memory: getBytes(a?.requests?.memory) + getBytes(b?.requests?.memory),
     },
   };
+  return addedResources;
 }
 
 function sumContainersResources(containers) {
   return containers?.reduce((containerAccu, container) => {
-    return addResources(containerAccu, container.resources);
+    const containerResources = container.resources;
+    const updatedResources = addResources(containerAccu, containerResources);
+    return updatedResources;
   }, structuredClone(emptyResources));
 }
 
@@ -175,20 +183,20 @@ export function calcNodeResources(pods) {
     },
     requests: {
       cpu: nodeResources.requests.cpu * 1000,
-      memory: nodeResources.requests.memory / Math.pow(1024, 3),
+      memory: nodeResources.requests.memory / 1024 / 1024 / 1024,
     },
   };
 }
 
 export function useResourceByNode(nodeName) {
-  const [data, setData] = React.useState(null);
+  const [data, setData] = useState(null);
   const { data: pods, error, loading } = useGet(
     `/api/v1/pods?fieldSelector=spec.nodeName=${nodeName},status.phase!=Failed,status.phase!=Succeeded&limit=500`,
   );
 
   const nodeResources = useMemo(() => calcNodeResources(pods), [pods]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (nodeResources) {
       setData(nodeResources);
     }

src/resources/Namespaces/ResourcesUsage.js

@@ -9,6 +9,7 @@ import { Card, CardHeader } from '@ui5/webcomponents-react';
 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,
@@ -22,24 +23,13 @@ const CPU_SUFFIX_POWER = {
   m: 1e-3,
 };
 
-export function getBytes(memoryString) {
-  if (!memoryString || memoryString === '0') {
-    return 0;
-  }
-  const suffixMatch = String(memoryString).match(/\D+$/);
-
-  if (!suffixMatch?.length) {
-    return memoryString;
-  }
-  const suffix = suffixMatch[0];
-  const number = String(memoryString).replace(suffix, '');
+export function getBytes(memoryStr) {
+  if (!memoryStr) return 0;
 
-  const suffixPower = MEMORY_SUFFIX_POWER[suffix];
-  if (!suffixPower) {
-    return number;
-  }
-
-  return number * suffixPower;
+  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) {

src/shared/utils/helpers.js

@@ -139,7 +139,6 @@ export function buildPathsFromObject(object, path = '') {
 }
 
 export function roundTwoDecimals(number) {
-  return number > 100_000
-    ? Number.parseFloat(number).toExponential(2)
-    : Number.parseFloat(number.toFixed(2));
+  console.log(number > 100_000);
+  return Number.parseFloat(number.toFixed(2));
 }