From 0b5e3d5a10d78b9b2c5ad5595d0a34e67915d63d Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Fri, 10 Jun 2022 13:26:50 -0700
Subject: [PATCH] Metrics tweaks for free space (#2113)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 .../Console/Dashboard/Prometheus/PrDashboard.tsx      |  9 +++++++++
 .../Dashboard/Prometheus/Widgets/CapacityItem.tsx     |  8 ++++++--
 .../Dashboard/Prometheus/Widgets/LayoutUtil.tsx       | 11 +++++++----
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
index 55ffd564d..aa82f315d 100644
--- a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
@@ -41,6 +41,7 @@ import {
   DLayoutColumnProps,
   DLayoutRowProps,
   resourcesPanelsLayout,
+  resourcesPanelsLayoutAdvanced,
   RowPanelLayout,
   summaryPanelsLayout,
   trafficPanelsLayout,
@@ -192,6 +193,10 @@ const PrDashboard = ({ apiPrefix = "admin" }: IPrDashboard) => {
     return renderPanelItems(resourcesPanelsLayout);
   };
 
+  const renderAdvancedResourcesPanels = () => {
+    return renderPanelItems(resourcesPanelsLayoutAdvanced);
+  };
+
   return (
     <PageLayout>
       {zoomOpen && (
@@ -251,6 +256,10 @@ const PrDashboard = ({ apiPrefix = "admin" }: IPrDashboard) => {
         <TabPanel index={2} value={curTab}>
           <RowPanelLayout>
             {panelInformation.length ? renderResourcesPanels() : null}
+            <h2 style={{ margin: 0, borderBottom: "1px solid #dedede" }}>
+              Advanced
+            </h2>
+            {panelInformation.length ? renderAdvancedResourcesPanels() : null}
           </RowPanelLayout>
         </TabPanel>
       </Grid>
diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/CapacityItem.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/CapacityItem.tsx
index 967b532b5..4a1bacc08 100644
--- a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/CapacityItem.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/CapacityItem.tsx
@@ -49,6 +49,7 @@ const CapacityItem = ({
   const [loading, setLoading] = useState<boolean>(true);
 
   const [totalUsableFree, setTotalUsableFree] = useState<number>(0);
+  const [totalUsableFreeRatio, setTotalUsableFreeRatio] = useState<number>(0);
   const [totalUsed, setTotalUsed] = useState<number>(0);
   const [totalUsable, setTotalUsable] = useState<number>(0);
 
@@ -100,7 +101,10 @@ const CapacityItem = ({
             });
           });
 
+          const freeRatio = Math.round((tFree / tUsable) * 100);
+
           setTotalUsableFree(tFree);
+          setTotalUsableFreeRatio(freeRatio);
           setTotalUsed(tUsed);
           setTotalUsable(tUsable);
 
@@ -175,7 +179,7 @@ const CapacityItem = ({
             fontSize: 12,
           }}
         >
-          {niceBytesInt(totalUsableFree)}
+          {`${totalUsableFreeRatio}%`}
           <br />
           <Box
             sx={{
@@ -187,7 +191,7 @@ const CapacityItem = ({
               textAlign: "center",
             }}
           >
-            Current Usable Capacity
+            Free
           </Box>
         </Box>
         <PieChart width={110} height={110}>
diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/LayoutUtil.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/LayoutUtil.tsx
index f75d74bcb..0f9061353 100644
--- a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/LayoutUtil.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/LayoutUtil.tsx
@@ -216,13 +216,15 @@ export const resourcesPanelsLayout: DLayoutRowProps[] = [
     },
     columns: [
       {
-        componentId: 11,
+        componentId: 82,
       },
       {
-        componentId: 8,
+        componentId: 74,
       },
     ],
   },
+];
+export const resourcesPanelsLayoutAdvanced: DLayoutRowProps[] = [
   {
     sx: {
       display: "grid",
@@ -232,14 +234,15 @@ export const resourcesPanelsLayout: DLayoutRowProps[] = [
     },
     columns: [
       {
-        componentId: 82,
+        componentId: 11,
       },
       {
-        componentId: 74,
+        componentId: 8,
       },
     ],
   },
 ];
+
 export const RowPanelLayout = ({ children }: { children: any }) => {
   return (
     <Box