fix: capacity reported usage value (#2028)

do not use unix-epoch to be displayed, instead
use the actual value at that epoch to be displayed.

portal-ui/src/common/utils.ts

@@ -59,14 +59,10 @@ export const niceBytesInt = (n: number, showK8sUnits: boolean = false) => {
   while (n >= 1024 && ++l) {
     n = n / 1024;
   }
-  //include a decimal point and a tenths-place digit if presenting
+  // include a decimal point and a tenths-place digit if presenting
-  //less than ten of KB or greater units
+  // less than ten of KB or greater units
   const k8sUnitsN = ["B", ...k8sUnits];
-  return (
+  return n.toFixed(1) + " " + (showK8sUnits ? k8sUnitsN[l] : units[l]);
-    n.toFixed(n < 10 && l > 0 ? 1 : 0) +
-    " " +
-    (showK8sUnits ? k8sUnitsN[l] : units[l])
-  );
 };
 
 export const setCookie = (name: string, val: string) => {

portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/CapacityItem.tsx

@@ -87,19 +87,19 @@ const CapacityItem = ({
 
   const [middleLabel, unitValue] = (result?.innerLabel || "").split(" ");
 
-  const usedValueObj = dataInner[0];
+  const usableValueObj = dataInner[0];
-  const { value: usedValue = 0 } = usedValueObj || { value: 0 };
+  const { value: usableValue = 0 } = usableValueObj || { value: 0 };
 
   const plotValues = [
     {
-      value: parseInt(usedValue) * 5, //just for display
+      value: parseInt(usableValue),
       color: "#D6D6D6",
-      label: "Free Space",
+      label: "Usable Space",
     },
     {
-      value: parseInt(usedValue),
+      value: parseInt(usableValue),
       color: "#073052",
-      label: "Used Space",
+      label: "Usable Space",
     },
   ];
   return (
@@ -150,7 +150,7 @@ const CapacityItem = ({
             fontSize: 12,
           }}
         >
-          {niceBytes(usedValue)}
+          {niceBytes(usableValue)}
           <br />
           <Box
             sx={{
@@ -162,7 +162,7 @@ const CapacityItem = ({
               textAlign: "center",
             }}
           >
-            Reported usage
+            Current Usable Capacity
           </Box>
         </Box>
         <PieChart width={110} height={110}>

portal-ui/src/screens/Console/Dashboard/Prometheus/utils.tsx

@@ -579,14 +579,14 @@ export const widgetDetailsToPanel = (
         const values = chartSeries.map((elementValue: any) => {
           const values = get(elementValue, "values", []);
           const metricKeyItem = Object.keys(elementValue.metric);
-
           const sortResult = values.sort(
-            (value1: any[], value2: any[]) => value1[0] - value2[0]
+            (value1: any[], value2: any[]) =>
+              parseInt(value1[0][1]) - parseInt(value2[0][1])
           );
 
           const metricName = elementValue.metric[metricKeyItem[0]];
           const value = sortResult[sortResult.length - 1];
-          return { name: metricName, value: parseInt(value) };
+          return { name: metricName, value: parseInt(value[1]) };
         });
 
         const innerLabel = panelItem.labelDisplayFunction