Report N/A when usage is not yet known (#1369)

* Report N/A when usage is not yet known

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

* lint

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

portal-ui/src/screens/Console/Common/UsageBarWrapper/SummaryUsageBar.tsx

@@ -8,12 +8,13 @@ import CircularProgress from "@mui/material/CircularProgress";
 import ErrorBlock from "../../../shared/ErrorBlock";
 import { CircleIcon } from "../../../../icons";
 import LabelValuePair from "./LabelValuePair";
+import { ValueUnit } from "../../Tenants/ListTenants/types";
+import { niceBytes } from "../../../../common/utils";
 
-interface IProgressBar {
-  maxValue: number;
-  currValue: number;
+interface ISummaryUsageBar {
+  maxValue: number | undefined;
+  currValue: number | undefined;
   label: string;
-  renderFunction?: (element: string) => any;
   error: string;
   loading: boolean;
   classes: any;
@@ -59,11 +60,29 @@ const SummaryUsageBar = ({
   maxValue,
   currValue,
   healthStatus,
-  renderFunction,
   loading,
   error,
-}: IProgressBar) => {
-  const porcentualValue = (currValue * 100) / maxValue;
+}: ISummaryUsageBar) => {
+  var capacity: ValueUnit = { value: "n/a", unit: "" };
+  var used: ValueUnit = { value: "n/a", unit: "" };
+
+  if (maxValue) {
+    const b = niceBytes(`${maxValue}`, true);
+    const parts = b.split(" ");
+    capacity.value = parts[0];
+    capacity.unit = parts[1];
+  }
+  if (currValue) {
+    const b = niceBytes(`${currValue}`, true);
+    const parts = b.split(" ");
+    used.value = parts[0];
+    used.unit = parts[1];
+  }
+
+  let percentagelValue = 0;
+  if (currValue && maxValue) {
+    percentagelValue = (currValue * 100) / maxValue;
+  }
 
   const renderComponent = () => {
     if (!loading) {
@@ -71,7 +90,10 @@ const SummaryUsageBar = ({
         <ErrorBlock errorMessage={error} withBreak={false} />
       ) : (
         <Grid item xs={12}>
-          <BorderLinearProgress variant="determinate" value={porcentualValue} />
+          <BorderLinearProgress
+            variant="determinate"
+            value={percentagelValue}
+          />
           <Stack
             direction={{ xs: "column", sm: "row" }}
             spacing={{ xs: 1, sm: 2, md: 4 }}
@@ -81,18 +103,12 @@ const SummaryUsageBar = ({
             <LabelValuePair
               label={"Storage Capacity:"}
               orientation={"row"}
-              value={
-                renderFunction ? renderFunction(maxValue.toString()) : maxValue
-              }
+              value={`${capacity.value} ${capacity.unit}`}
             />
             <LabelValuePair
               label={"Used:"}
               orientation={"row"}
-              value={
-                renderFunction
-                  ? renderFunction(currValue.toString())
-                  : currValue
-              }
+              value={`${used.value} ${used.unit}`}
             />
             {healthStatus && (
               <LabelValuePair

portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx

@@ -16,7 +16,7 @@
 
 import React, { Fragment } from "react";
 import { Button } from "@mui/material";
-import { ITenant } from "./types";
+import { ITenant, ValueUnit } from "./types";
 import { connect } from "react-redux";
 import { setErrorSnackMessage } from "../../../../actions";
 import Grid from "@mui/material/Grid";
@@ -119,11 +119,6 @@ interface ITenantListItem {
   classes: any;
 }
 
-interface ValueUnit {
-  value: string;
-  unit: string;
-}
-
 const TenantListItem = ({ tenant, classes }: ITenantListItem) => {
   const healthStatusToClass = (health_status: string) => {
     switch (health_status) {

portal-ui/src/screens/Console/Tenants/ListTenants/types.ts

@@ -165,3 +165,8 @@ export interface IKeyValue {
   key: string;
   value: string;
 }
+
+export interface ValueUnit {
+  value: string;
+  unit: string;
+}

portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx

@@ -26,7 +26,6 @@ import {
 } from "../../Common/FormComponents/common/styleLibrary";
 import { Box, Button, Grid, Stack } from "@mui/material";
 import Paper from "@mui/material/Paper";
-import { niceBytes } from "../../../../common/utils";
 import { ITenant } from "../ListTenants/types";
 import UpdateTenantModal from "./UpdateTenantModal";
 import { AppState } from "../../../../store";
@@ -134,10 +133,9 @@ const healthStatusToClass = (health_status: string = "red", classes: any) => {
 const StorageSummary = ({ tenant, classes }: Partial<ITenantsSummary>) => {
   return (
     <SummaryUsageBar
-      currValue={tenant?.status?.usage?.raw_usage ?? 0}
-      maxValue={tenant?.status?.usage?.raw ?? 1}
+      currValue={tenant?.status?.usage?.raw_usage}
+      maxValue={tenant?.status?.usage?.raw}
       label={"Storage"}
-      renderFunction={niceBytes}
       error={""}
       loading={false}
       healthStatus={healthStatusToClass(tenant?.status?.health_status, classes)}