Metrics tweaks for free space (#2113)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

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>

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}>

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