Add Tenant Health Details (#780)

* Add Tenant Health Details

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

* Colors

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

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

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useEffect, useState, Fragment } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import Grid from "@material-ui/core/Grid";
 import TextField from "@material-ui/core/TextField";
@@ -93,6 +93,18 @@ const styles = (theme: Theme) =>
         display: "none",
       },
     },
+    redState: {
+      color: theme.palette.error.main,
+    },
+    yellowState: {
+      color: theme.palette.warning.main,
+    },
+    greenState: {
+      color: theme.palette.success.main,
+    },
+    greyState: {
+      color: "grey",
+    },
   });
 
 const ListTenants = ({
@@ -203,6 +215,16 @@ const ListTenants = ({
     setCurrentPanel(1);
   };
 
+  const healthStatusToClass = (health_status: string) => {
+    return health_status == "red"
+      ? classes.redState
+      : health_status == "yellow"
+      ? classes.yellowState
+      : health_status == "green"
+      ? classes.greenState
+      : classes.greyState;
+  };
+
   return (
     <Fragment>
       {deleteOpen && (
@@ -271,7 +293,25 @@ const ListTenants = ({
                         <TableWrapper
                           itemActions={tableActions}
                           columns={[
-                            { label: "Name", elementKey: "name" },
+                            {
+                              label: "Name",
+                              elementKey: "name",
+                              renderFullObject: true,
+                              renderFunction: (t) => {
+                                return (
+                                  <React.Fragment>
+                                    <span
+                                      className={healthStatusToClass(
+                                        t.health_status
+                                      )}
+                                    >
+                                      ⬤
+                                    </span>{" "}
+                                    {t.name}
+                                  </React.Fragment>
+                                );
+                              },
+                            },
                             { label: "Namespace", elementKey: "namespace" },
                             { label: "Capacity", elementKey: "capacity" },
                             { label: "# of Pools", elementKey: "pool_count" },

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

@@ -57,6 +57,14 @@ export interface IEndpoints {
   console: string;
 }
 
+export interface ITenantStatus {
+  write_quorum: string;
+  drives_online: string;
+  drives_offline: string;
+  drives_healing: string;
+  health_status: string;
+}
+
 export interface ITenant {
   total_size: number;
   name: string;
@@ -77,6 +85,8 @@ export interface ITenant {
   encryptionEnabled: boolean;
   idpAdEnabled: boolean;
   idpOicEnabled: boolean;
+  health_status: string;
+  status?: ITenantStatus;
   // computed
   capacity: string;
   subnet_license: LicenseInfo;

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

@@ -133,6 +133,22 @@ const styles = (theme: Theme) =>
       textDecoration: "none",
       color: "black",
     },
+    redState: {
+      color: theme.palette.error.main,
+    },
+    yellowState: {
+      color: theme.palette.warning.main,
+    },
+    greenState: {
+      color: theme.palette.success.main,
+    },
+    greyState: {
+      color: "grey",
+    },
+    healthCol: {
+      fontWeight: "bold",
+      paddingRight: "10px",
+    },
     ...modalBasic,
     ...actionsTray,
     ...buttonsStyles,
@@ -345,6 +361,16 @@ const TenantDetails = ({
     loadInfo();
   };
 
+  const healthStatusToClass = (health_status: string) => {
+    return health_status == "red"
+      ? classes.redState
+      : health_status == "yellow"
+      ? classes.yellowState
+      : health_status == "green"
+      ? classes.greenState
+      : classes.greyState;
+  };
+
   return (
     <React.Fragment>
       {addPoolOpen && tenant !== null && (
@@ -524,6 +550,44 @@ const TenantDetails = ({
                       error={usageError}
                       loading={loadingUsage}
                     />
+                    <h4>
+                      {tenant && tenant.status && (
+                        <span
+                          className={healthStatusToClass(
+                            tenant.status.health_status
+                          )}
+                        >
+                          ⬤&nbsp;
+                        </span>
+                      )}
+                      Health
+                    </h4>
+                    <table>
+                      <tr>
+                        <td className={classes.healthCol}>Drives Online</td>
+                        <td>
+                          {tenant?.status?.drives_online
+                            ? tenant?.status?.drives_online
+                            : 0}
+                        </td>
+                      </tr>
+                      <tr>
+                        <td className={classes.healthCol}>Drives Offline</td>
+                        <td>
+                          {tenant?.status?.drives_offline
+                            ? tenant?.status?.drives_offline
+                            : 0}
+                        </td>
+                      </tr>
+                      <tr>
+                        <td className={classes.healthCol}>Write Quorum</td>
+                        <td>
+                          {tenant?.status?.write_quorum
+                            ? tenant?.status?.write_quorum
+                            : 0}
+                        </td>
+                      </tr>
+                    </table>
                   </Grid>
                 </Grid>
               </Paper>

portal-ui/src/theme/newtheme.ts

@@ -14,11 +14,6 @@ const newTheme = createMuiTheme({
       dark: "#01262E",
       contrastText: "#000",
     },
-    error: {
-      light: "#e03a48",
-      main: "#dc1f2e",
-      contrastText: "#ffffff",
-    },
     grey: {
       100: "#F7F7F7",
       200: "#D8DDDE",
@@ -33,6 +28,17 @@ const newTheme = createMuiTheme({
     background: {
       default: "#F4F4F4",
     },
+    success: {
+      main: "#32c787",
+    },
+    warning: {
+      main: "#ffb300",
+    },
+    error: {
+      light: "#e03a48",
+      main: "#dc1f2e",
+      contrastText: "#ffffff",
+    },
   },
   typography: {
     fontFamily: ["Lato", "sans-serif"].join(","),