From 52ee9bb49b02ef21fb6b1e857e27b3ebe9dd73e6 Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Wed, 15 Sep 2021 21:11:46 -0700
Subject: [PATCH] Reactive Tenant Details and Summary (#1051)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 .../Tenants/TenantDetails/TenantDetails.tsx   | 196 ++++++----
 .../Tenants/TenantDetails/TenantSummary.tsx   | 354 ++++++++++--------
 2 files changed, 323 insertions(+), 227 deletions(-)

diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
index 0839bd2db..9d36b3c18 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
@@ -18,7 +18,7 @@ import React, { Fragment, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { Link, Redirect, Route, Router, Switch } from "react-router-dom";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
-import { IconButton, Tooltip } from "@material-ui/core";
+import { Box, IconButton, Tab, Tabs, Tooltip } from "@material-ui/core";
 import get from "lodash/get";
 import Grid from "@material-ui/core/Grid";
 import { setErrorSnackMessage, setSnackBarMessage } from "../../../../actions";
@@ -242,6 +242,94 @@ const TenantDetails = ({
       : classes.greyState;
   };
 
+  interface ListMenuItem {
+    label: string;
+    value: string;
+    onclick: (val: string) => void;
+    selected: () => boolean;
+  }
+
+  const menu: ListMenuItem[] = [
+    {
+      label: "Summary",
+      value: "summary",
+      onclick: (val) => {
+        changeRoute(val);
+      },
+      selected: () => {
+        return currentTab === "summary";
+      },
+    },
+    {
+      label: "Metrics",
+      value: "metrics",
+      onclick: (val) => {
+        changeRoute("metrics");
+      },
+      selected: () => {
+        return currentTab === "metrics";
+      },
+    },
+    {
+      label: "Security",
+      value: "security",
+      onclick: (val) => {
+        changeRoute("security");
+      },
+      selected: () => {
+        return currentTab === "security";
+      },
+    },
+    {
+      label: "Pools",
+      value: "pools",
+      onclick: (val) => {
+        changeRoute("pools");
+      },
+      selected: () => {
+        return currentTab === "pools";
+      },
+    },
+    {
+      label: "Pods",
+      value: "pods",
+      onclick: (val) => {
+        changeRoute("pods");
+      },
+      selected: () => {
+        return currentTab === "pods" || currentTab === ":podName";
+      },
+    },
+    {
+      label: "Volumes",
+      value: "volumes",
+      onclick: (val) => {
+        changeRoute("volumes");
+      },
+      selected: () => {
+        return currentTab === "volumes";
+      },
+    },
+    {
+      label: "License",
+      value: "license",
+      onclick: (val) => {
+        changeRoute("license");
+      },
+      selected: () => {
+        return currentTab === "license";
+      },
+    },
+  ];
+
+  let value = menu[0].value;
+  for (const mli of menu) {
+    if (mli.selected()) {
+      value = mli.value;
+      break;
+    }
+  }
+
   return (
     <Fragment>
       {yamlScreenOpen && (
@@ -336,74 +424,48 @@ const TenantDetails = ({
             }
           />
         </Grid>
-        <Grid item xs={2}>
-          <List component="nav" dense={true}>
-            <ListItem
-              button
-              selected={currentTab === "summary"}
-              onClick={() => {
-                changeRoute("summary");
-              }}
+        <Grid item xs={12} sm={12} md={2}>
+          <Box display={{ xs: "none", sm: "none", md: "block" }}>
+            <List component="nav" dense={true}>
+              {menu.map((mli) => {
+                return (
+                  <ListItem
+                    button
+                    selected={mli.selected()}
+                    onClick={() => {
+                      mli.onclick(mli.value);
+                    }}
+                  >
+                    <ListItemText primary={mli.label} />
+                  </ListItem>
+                );
+              })}
+            </List>
+          </Box>
+          <Box display={{ xs: "block", sm: "block", md: "none" }}>
+            <Tabs
+              value={value}
+              indicatorColor="primary"
+              textColor="primary"
+              variant="scrollable"
+              scrollButtons="auto"
+              aria-label="scrollable auto tabs example"
             >
-              <ListItemText primary="Summary" />
-            </ListItem>
-            <ListItem
-              button
-              selected={currentTab === "metrics"}
-              onClick={() => {
-                changeRoute("metrics");
-              }}
-            >
-              <ListItemText primary="Metrics" />
-            </ListItem>
-            <ListItem
-              button
-              selected={currentTab === "security"}
-              onClick={() => {
-                changeRoute("security");
-              }}
-            >
-              <ListItemText primary="Security" />
-            </ListItem>
-            <ListItem
-              button
-              selected={currentTab === "pools"}
-              onClick={() => {
-                changeRoute("pools");
-              }}
-            >
-              <ListItemText primary="Pools" />
-            </ListItem>
-            <ListItem
-              button
-              selected={currentTab === "pods" || currentTab === ":podName"}
-              onClick={() => {
-                changeRoute("pods");
-              }}
-            >
-              <ListItemText primary="Pods" />
-            </ListItem>
-            <ListItem
-              button
-              selected={currentTab === "volumes"}
-              onClick={() => {
-                changeRoute("volumes");
-              }}
-            >
-              <ListItemText primary="Volumes" />
-            </ListItem>
-            <ListItem
-              button
-              selected={currentTab === "license"}
-              onClick={() => {
-                changeRoute("license");
-              }}
-            >
-              <ListItemText primary="License" />
-            </ListItem>
-          </List>
+              {menu.map((mli) => {
+                return (
+                  <Tab
+                    label={mli.label}
+                    value={mli.value}
+                    onClick={() => {
+                      mli.onclick(mli.value);
+                    }}
+                  />
+                );
+              })}
+            </Tabs>
+          </Box>
         </Grid>
-        <Grid item xs={10}>
+        <Grid item xs={12} sm={12} md={10}>
           <Router history={history}>
             <Switch>
               <Route
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
index aed800fd1..3ce43b4cc 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
@@ -93,6 +93,26 @@ const styles = (theme: Theme) =>
     centerAlign: {
       textAlign: "center",
     },
+    detailSection: {
+      "& div": {
+        "& b,i": {
+          minWidth: 80,
+          display: "block",
+          float: "left",
+        },
+        "& i": {
+          fontStyle: "normal",
+          wordWrap: "break-word",
+          overflowWrap: "break-word",
+        },
+        "& div": {
+          clear: "both",
+        },
+        clear: "both",
+        marginBottom: 2,
+      },
+    },
+
     ...containerForHeader(theme.spacing(4)),
   });
 
@@ -200,83 +220,101 @@ const TenantSummary = ({
       <h1 className={classes.sectionTitle}>Summary</h1>
       <Paper className={classes.paperContainer}>
         <Grid container>
-          <Grid item xs={8}>
-            <table width={"100%"}>
-              <tbody>
-                <tr>
-                  <td colSpan={4}>
-                    <h2>Details</h2>
-                    <hr className={classes.hrClass} />
-                  </td>
-                </tr>
-                {loadingTenant ? (
-                  <tr>
-                    <td colSpan={4} className={classes.centerAlign}>
-                      <CircularProgress />
-                    </td>
-                  </tr>
-                ) : (
-                  <Fragment>
-                    <tr>
-                      <td className={classes.titleCol}>Capacity:</td>
-                      <td>{niceBytes(capacity.toString(10))}</td>
-                      <td className={classes.titleCol}>Clusters:</td>
-                      <td>{poolCount}</td>
-                    </tr>
-                    <tr>
-                      <td className={classes.titleCol}>Instances:</td>
-                      <td>{instances}</td>
-                      <td className={classes.titleCol}>Volumes:</td>
-                      <td>{volumes}</td>
-                    </tr>
-                    {tenant?.endpoints && (
-                      <tr>
-                        <td className={classes.titleCol}>Endpoint:</td>
-                        <td>
-                          <a
-                            href={tenant?.endpoints.minio}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            {tenant?.endpoints.minio}
-                          </a>
-                        </td>
-                        <td className={classes.titleCol}>Console:</td>
-                        <td>
-                          <a
-                            href={tenant?.endpoints.console}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            {tenant?.endpoints.console}
-                          </a>
-                        </td>
-                      </tr>
-                    )}
-                    <tr>
-                      <td className={classes.titleCol}>MinIO:</td>
-                      <td colSpan={3}>
-                        <Button
-                          color="primary"
-                          className={classes.anchorButton}
-                          onClick={() => {
-                            setUpdateMinioVersion(true);
-                          }}
-                        >
-                          {tenant ? tenant.image : ""}
-                        </Button>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td className={classes.titleCol}>State:</td>
-                      <td colSpan={3}>{tenant?.currentState}</td>
-                    </tr>
-                  </Fragment>
-                )}
-              </tbody>
-            </table>
+          <Grid item xs={12} sm={8}>
+            <Grid container>
+              <Grid item xs={12}>
+                <h2>Details</h2>
+                <hr className={classes.hrClass} />
+              </Grid>
+              <Grid
+                item
+                xs={12}
+                sm={12}
+                md={6}
+                className={classes.detailSection}
+              >
+                <div>
+                  <b>Capacity:</b>
+                  <i>{niceBytes(capacity.toString(10))}</i>
+                  <div />
+                </div>
+                <div>
+                  <b>Instances:</b>
+                  <i>{instances}</i>
+                  <div />
+                </div>
+                <div>
+                  <b>Endpoint:</b>
+                  <i>
+                    <a
+                      href={tenant?.endpoints.minio}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {tenant?.endpoints.minio}
+                    </a>
+                  </i>
+                  <div />
+                </div>
+              </Grid>
+              <Grid
+                item
+                xs={12}
+                sm={12}
+                md={6}
+                className={classes.detailSection}
+              >
+                <div>
+                  <b>Clusters:</b>
+                  <i>{poolCount}</i>
+                  <div />
+                </div>
+                <div>
+                  <b>Volumes:</b>
+                  <i>{volumes}</i>
+                  <div />
+                </div>
+                <div>
+                  <b>Console:</b>
+                  <i>
+                    <a
+                      href={tenant?.endpoints.console}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {tenant?.endpoints.console}
+                    </a>
+                  </i>
+                  <div />
+                </div>
+              </Grid>
+              <Grid item xs={12} className={classes.detailSection}>
+                <div>
+                  <b>MinIO:</b>
+                  <i>
+                    <Button
+                      color="primary"
+                      className={classes.anchorButton}
+                      onClick={() => {
+                        setUpdateMinioVersion(true);
+                      }}
+                    >
+                      {tenant ? tenant.image : ""}
+                    </Button>
+                  </i>
+                  <div />
+                </div>
+              </Grid>
+              <Grid item xs={12} className={classes.detailSection}>
+                <div>
+                  <b>State:</b>
+                  <i>{tenant?.currentState}</i>
+                  <div />
+                </div>
+              </Grid>
+            </Grid>
           </Grid>
-          <Grid item xs={4}>
+          <Grid item xs={12} sm={4}>
             {loadingTenant ? (
               <div className={classes.centerAlign}>
                 <CircularProgress />
@@ -354,91 +392,87 @@ const TenantSummary = ({
       <Paper className={classes.paperContainer}>
         <Grid container>
           <Grid item xs={12}>
-            <table width={"100%"}>
-              <tbody>
-                <tr>
-                  <td colSpan={4}>
-                    <h2>Features</h2>
-                    <hr className={classes.hrClass} />
-                  </td>
-                </tr>
-                {loadingTenant ? (
-                  <tr>
-                    <td className={classes.centerAlign} colSpan={4}>
-                      <CircularProgress />
-                    </td>
-                  </tr>
-                ) : (
-                  <Fragment>
-                    <tr>
-                      <td className={classes.titleCol}>Logs:</td>
-                      <td>
-                        <Button
-                          color="primary"
-                          className={classes.anchorButton}
-                        >
-                          {logEnabled ? "Enabled" : "Disabled"}
-                        </Button>
-                      </td>
-                      <td className={classes.titleCol}>Monitoring:</td>
-                      <td>
-                        <Button
-                          color="primary"
-                          className={classes.anchorButton}
-                        >
-                          {monitoringEnabled ? "Enabled" : "Disabled"}
-                        </Button>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td className={classes.titleCol}>MinIO TLS:</td>
-                      <td>
-                        <Button
-                          color="primary"
-                          className={classes.anchorButton}
-                        >
-                          {minioTLS ? "Enabled" : "Disabled"}
-                        </Button>
-                      </td>
-                      <td className={classes.titleCol}>Encryption:</td>
-                      <td>
-                        <Button
-                          color="primary"
-                          className={classes.anchorButton}
-                        >
-                          {encryptionEnabled ? "Enabled" : "Disabled"}
-                        </Button>
-                      </td>
-                    </tr>
-                    <tr>
-                      <React.Fragment>
-                        <td className={classes.titleCol}>Active Directory:</td>
-                        <td>
-                          <Button
-                            color="primary"
-                            className={classes.anchorButton}
-                          >
-                            {adEnabled ? "Enabled" : "Disabled"}
-                          </Button>
-                        </td>
-                      </React.Fragment>
-                      <React.Fragment>
-                        <td className={classes.titleCol}>OpenID:</td>
-                        <td>
-                          <Button
-                            color="primary"
-                            className={classes.anchorButton}
-                          >
-                            {oidcEnabled ? "Enabled" : "Disabled"}
-                          </Button>
-                        </td>
-                      </React.Fragment>
-                    </tr>
-                  </Fragment>
-                )}
-              </tbody>
-            </table>
+            <h2>Features</h2>
+            <hr className={classes.hrClass} />
           </Grid>
+          {loadingTenant ? (
+            <Grid item xs={12} className={classes.centerAlign}>
+              <CircularProgress />
+            </Grid>
+          ) : (
+            <Fragment>
+              <Grid
+                item
+                xs={12}
+                sm={12}
+                md={6}
+                className={classes.detailSection}
+              >
+                <div>
+                  <b>Logs:</b>
+                  <i>
+                    <Button color="primary" className={classes.anchorButton}>
+                      {logEnabled ? "Enabled" : "Disabled"}
+                    </Button>
+                  </i>
+                  <div />
+                </div>
+                <div>
+                  <b>MinIO TLS:</b>
+                  <i>
+                    <Button color="primary" className={classes.anchorButton}>
+                      {minioTLS ? "Enabled" : "Disabled"}
+                    </Button>
+                  </i>
+                  <div />
+                </div>
+                <div>
+                  <b>AD/LDAP:</b>
+                  <i>
+                    <Button color="primary" className={classes.anchorButton}>
+                      {adEnabled ? "Enabled" : "Disabled"}
+                    </Button>
+                  </i>
+                  <div />
+                </div>
+              </Grid>
+              <Grid
+                item
+                xs={12}
+                sm={12}
+                md={6}
+                className={classes.detailSection}
+              >
+                <div>
+                  <b>Monitoring:</b>
+                  <i>
+                    <Button color="primary" className={classes.anchorButton}>
+                      {monitoringEnabled ? "Enabled" : "Disabled"}
+                    </Button>
+                  </i>
+                  <div />
+                </div>
+                <div>
+                  <b>Encryption:</b>
+                  <i>
+                    <Button color="primary" className={classes.anchorButton}>
+                      {encryptionEnabled ? "Enabled" : "Disabled"}
+                    </Button>
+                  </i>
+                  <div />
+                </div>
+                <div>
+                  <b>OpenID:</b>
+                  <i>
+                    <Button color="primary" className={classes.anchorButton}>
+                      {oidcEnabled ? "Enabled" : "Disabled"}
+                    </Button>
+                  </i>
+                  <div />
+                </div>
+              </Grid>
+            </Fragment>
+          )}
         </Grid>
       </Paper>
     </Fragment>