Added tenant usage indicator (#454)

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

@@ -0,0 +1,109 @@
+import React from "react";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import { LinearProgress } from "@material-ui/core";
+import Paper from "@material-ui/core/Paper";
+import Grid from "@material-ui/core/Grid";
+import CircularProgress from "@material-ui/core/CircularProgress";
+
+interface IProgressBar {
+  maxValue: number;
+  currValue: number;
+  label: string;
+  renderFunction?: (element: string) => any;
+  error: string;
+  loading: boolean;
+  classes: any;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    paperContainer: {
+      padding: 15,
+    },
+    allValue: {
+      fontSize: 16,
+      fontWeight: 700,
+      marginBottom: 8,
+    },
+    currentUsage: {
+      fontSize: 12,
+      marginTop: 8,
+    },
+    centerItem: {
+      textAlign: "center",
+    },
+    error: {
+      color: "#9c9c9c",
+    },
+  });
+
+const BorderLinearProgress = withStyles((theme) => ({
+  root: {
+    height: 10,
+    borderRadius: 5,
+  },
+  colorPrimary: {
+    backgroundColor: "#F4F4F4",
+  },
+  bar: {
+    borderRadius: 5,
+    backgroundColor: "#081C42",
+  },
+}))(LinearProgress);
+
+const UsageBarWrapper = ({
+  classes,
+  maxValue,
+  currValue,
+  label,
+  renderFunction,
+  loading,
+  error,
+}: IProgressBar) => {
+  const porcentualValue = (currValue * 100) / maxValue;
+
+  const renderComponent = () => {
+    if (!loading) {
+      return error !== "" ? (
+        <React.Fragment>
+          <span className={classes.error}>{error}</span>
+        </React.Fragment>
+      ) : (
+        <React.Fragment>
+          <Grid item xs={12} className={classes.allValue}>
+            {label}{" "}
+            {renderFunction ? renderFunction(maxValue.toString()) : maxValue}
+          </Grid>
+          <BorderLinearProgress variant="determinate" value={porcentualValue} />
+          <Grid item xs={12} className={classes.currentUsage}>
+            Used:{" "}
+            {renderFunction ? renderFunction(currValue.toString()) : currValue}
+          </Grid>
+        </React.Fragment>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <React.Fragment>
+      <Paper className={classes.paperContainer}>
+        {loading && (
+          <React.Fragment>
+            <Grid item xs={12} className={classes.centerItem}>
+              <CircularProgress
+                color="primary"
+                size={40}
+                variant="indeterminate"
+              />
+            </Grid>
+          </React.Fragment>
+        )}
+        {renderComponent()}
+      </Paper>
+    </React.Fragment>
+  );
+};
+
+export default withStyles(styles)(UsageBarWrapper);

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

@@ -15,6 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState, useEffect } from "react";
+import get from "lodash/get";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import {
   containerForHeader,
@@ -38,12 +39,18 @@ import Trace from "./Trace/Trace";
 import Watch from "./Watch/Watch";
 import Heal from "./Heal/Heal";
 import PageHeader from "../../Common/PageHeader/PageHeader";
+import UsageBarWrapper from "../../Common/UsageBarWrapper/UsageBarWrapper";
 
 interface ITenantDetailsProps {
   classes: any;
   match: any;
 }
 
+interface ITenantUsage {
+  used: string;
+  disk_used: string;
+}
+
 const styles = (theme: Theme) =>
   createStyles({
     errorBlock: {
@@ -109,6 +116,12 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => {
   const [addReplicationOpen, setAddReplicationOpen] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
   const [tenant, setTenant] = useState<ITenant | null>(null);
+  const [loadingUsage, setLoadingUsage] = useState<boolean>(true);
+  const [usageError, setUsageError] = useState<string>("");
+  const [usage, setUsage] = useState<number>(0);
+
+  const tenantName = match.params["tenantName"];
+  const tenantNamespace = match.params["tenantNamespace"];
 
   const onCloseZoneAndRefresh = (reload: boolean) => {
     setAddZone(false);
@@ -131,9 +144,6 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => {
   };
 
   const loadInfo = () => {
-    const tenantName = match.params["tenantName"];
-    const tenantNamespace = match.params["tenantNamespace"];
-
     api
       .invoke(
         "GET",
@@ -172,8 +182,28 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => {
       });
   };
 
+  const loadUsage = () => {
+    api
+      .invoke(
+        "GET",
+        `/api/v1/namespaces/${tenantNamespace}/tenants/${tenantName}/usage`
+      )
+      .then((result: ITenantUsage) => {
+        const usage = get(result, "disk_used", "0");
+        setUsage(parseInt(usage));
+        setUsageError("");
+        setLoadingUsage(false);
+      })
+      .catch((err) => {
+        setUsageError(err);
+        setUsage(0);
+        setLoadingUsage(false);
+      });
+  };
+
   useEffect(() => {
     loadInfo();
+    loadUsage();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -209,7 +239,7 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => {
         <Grid item xs={12}>
           <br />
         </Grid>
-        <Grid item xs={12} className={classes.containerHeader}>
+        <Grid item xs={9} className={classes.containerHeader}>
           <Paper className={classes.paperContainer}>
             <div className={classes.infoGrid}>
               <div>Capacity:</div>
@@ -227,6 +257,16 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => {
             </div>
           </Paper>
         </Grid>
+        <Grid item xs={3}>
+          <UsageBarWrapper
+            currValue={usage}
+            maxValue={tenant ? tenant.total_size : 0}
+            label={"Storage"}
+            renderFunction={niceBytes}
+            error={usageError}
+            loading={loadingUsage}
+          />
+        </Grid>
         <Grid item xs={12}>
           <br />
         </Grid>