convert bytes to best conv

Signed-off-by: Mohammed Abdi <moabdi@Mohammeds-MBP.attlocal.net>
project-codeflare · Aug 25, 2023 · 14dbfbd · 14dbfbd
1 parent a3be2b6
commit 14dbfbd
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 22 deletions.
diff --git a/frontend/src/pages/MCADashboard/MCADashboard.tsx b/frontend/src/pages/MCADashboard/MCADashboard.tsx
@@ -127,11 +127,11 @@ export const MCADashboardInner: React.FC<MCADashboardInnerProps> = React.memo(
               name={'Cluster Utilized/ Available Resources'}
               refreshRate={refreshRate}
             />
-            <MetricsCards
+            {/* <MetricsCards
               queries={availableResourceQueries}
               name={'Cluster Available Resources'}
               refreshRate={refreshRate}
-            />
+            /> */}
           </div>
         )}
         <StatusSummaryTable data={data ? data : emptyDataObject} />

diff --git a/frontend/src/pages/MCADashboard/Metrics/DonutMetricCard.tsx b/frontend/src/pages/MCADashboard/Metrics/DonutMetricCard.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Card, CardBody, CardHeader } from '@patternfly/react-core';
 import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
 import { getMetricData } from './api/metricsData';
-
+import { convertBytesToBestUnit } from './metrics-utils';
 import { Unit } from './types';
 
 interface DataMap {
@@ -64,18 +64,26 @@ const DonutMetricCard: React.FC<MetricCardProps> = ({
         >
           <ChartDonutUtilization
             data={{
-              x: name, y: totalClusterResources[name]
-                ? `${Math.round((percentage * 100) / Number(totalClusterResources[name][0]) * 100) / 100}`
-                : `0%`
+              x: name, y: (totalClusterResources[name] && totalClusterResources[name][0] !== '0')
+                ? Math.round((percentage * 100) / Number(totalClusterResources[name][0]) * 100) / 100
+                : 0
             }}
             labels={({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null}
-            subTitle={totalClusterResources[name]
-              ? `of ${Math.round(Number(totalClusterResources[name][0]))} ${totalClusterResources[name][1]}`
-              : 'of -'}
+            subTitle={
+              noGpu === ''
+                ? (totalClusterResources[name]
+                  ? (totalClusterResources[name][1] === 'B'
+                    ? `of ${convertBytesToBestUnit(Number(totalClusterResources[name][0]))}`
+                    : `of ${Math.round(Number(totalClusterResources[name][0]))} ${totalClusterResources[name][1]}`)
+                  : 'of -')
+                : `${noGpu}`}
             title={
-              unit
+              unit === Unit.PERCENT
                 ? `${percentage}${unit}`
-                : `${percentage}`
+                : (unit === Unit.BYTES
+                  ? `${convertBytesToBestUnit(percentage)}`
+                  : `${percentage}`
+                )
             }
             thresholds={[{ value: 60 }, { value: 90 }]}
           />

diff --git a/frontend/src/pages/MCADashboard/Metrics/api/metricsData.ts b/frontend/src/pages/MCADashboard/Metrics/api/metricsData.ts
@@ -1,6 +1,4 @@
 import axios from 'axios';
-// import { PrometheusQueryResponse } from '~/types';
-// import React from 'react';
 import { timeStringToSeconds } from '~/pages/MCADashboard/Metrics/metrics-utils';
 import { TotalQuery } from '../types';
 
@@ -13,7 +11,11 @@ export const getTotalClusterResourcesData = async (queries: TotalQuery[]) => {
   const requests = queries.map(async (query) => {
     try {
       const res = await axios.post('/api/metrics-data', { query: query.query });
-      dataMap[query.name] = [res.data[0].value[1], query.totalUnit];
+      if (res.data.length !== 0) {
+        dataMap[query.name] = [res.data[0].value[1], query.totalUnit];
+      } else {
+        dataMap[query.name] = ["0", query.totalUnit];
+      }
     } catch (error) {
       console.error(`Error fetching data for query: ${query}`, error);
     }

diff --git a/frontend/src/pages/MCADashboard/Metrics/metrics-utils.ts b/frontend/src/pages/MCADashboard/Metrics/metrics-utils.ts
@@ -54,6 +54,19 @@ export const getNamespacesFromAppwrappers = (data: { appwrappers: any }): string
   return Array.from(namespaces);
 };
 
+export const convertBytesToBestUnit = (bytes: number): string => {
+  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB'];
+  let unitIndex = 0;
+  let size = bytes;
+
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+  //return [size.toFixed(2), units[unitIndex]];
+  return `${size.toFixed(2)}${units[unitIndex]}`;
+}
+
 export const formatUnitString = (value: number, unit?: Unit): string => {
   const round = (num: number) => {
     return (Math.round(num * 100) / 100).toString();
@@ -104,7 +117,7 @@ export const formatUnitStringOnAxis = (value: number, maxVal: number, unit?: Uni
 export const filterData = (data: any[], validNamespaces: Set<string> | undefined) => {
   if (data && validNamespaces) {
     const filteredData = data.filter((dataPoint) => {
-      return validNamespaces.has(dataPoint.metric.namespace ? dataPoint.metric.namespace: dataPoint.metric.exported_namespace);
+      return validNamespaces.has(dataPoint.metric.namespace ? dataPoint.metric.namespace : dataPoint.metric.exported_namespace);
     });
     return filteredData;
   } else {

diff --git a/frontend/src/pages/MCADashboard/Metrics/queries.ts b/frontend/src/pages/MCADashboard/Metrics/queries.ts
@@ -19,19 +19,19 @@ export const totalResourceQueries: TotalQuery[] = [
   {
     name: 'Total Utilized Memory %',
     query:
-      'sum(cluster:capacity_memory_bytes:sum{cluster=""}) / 1048576',
-    totalUnit: "MiB",
+      'sum(cluster:capacity_memory_bytes:sum{cluster=""})',
+    totalUnit: "B",
   },
   {
     name: 'Total Utilized GPU Memory %',
     query: 'count(DCGM_FI_PROF_GR_ENGINE_ACTIVE)',
     totalUnit: "MB",
   },
   {
-    name: 'Utilized Memory (Mebibytes)',
+    name: 'Utilized Memory',
     query:
-      'sum(cluster:capacity_memory_bytes:sum{cluster=""}) / 1048576',
-    totalUnit: "MiB",
+      'sum(cluster:capacity_memory_bytes:sum{cluster=""})',
+    totalUnit: "B",
   },
 ];
 
@@ -61,10 +61,12 @@ export const availableResourceQueries: Query[] = [
     unit: Unit.PERCENT,
   },
   {
-    name: 'Utilized Memory (Mebibytes)',
+    name: 'Utilized Memory',
     query:
-      '(sum(cluster:memory_usage_bytes:sum{cluster=""})) / 1048576',
+      '(sum(cluster:memory_usage_bytes:sum{cluster=""}))',
+    unit: Unit.BYTES,
   },
+  // / 1048576 - convert bytes to MIB
 ];
 
 export const statusSummaryQueries: Query[] = [