Tenant Details Tabs (#910)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
2021-07-29 11:12:49 -07:00
parent e20ef0cfb8
commit 1689a73809
20 changed files with 118 additions and 53 deletions
--- a/portal-ui/build/asset-manifest.json
+++ b/portal-ui/build/asset-manifest.json
@@ -1,25 +1,25 @@
 {
  "files": {
    "main.css": "/static/css/main.8cfac526.chunk.css",
-    "main.js": "/static/js/main.d02553d5.chunk.js",
-    "main.js.map": "/static/js/main.d02553d5.chunk.js.map",
+    "main.js": "/static/js/main.8fd542d7.chunk.js",
+    "main.js.map": "/static/js/main.8fd542d7.chunk.js.map",
    "runtime-main.js": "/static/js/runtime-main.43a31377.js",
    "runtime-main.js.map": "/static/js/runtime-main.43a31377.js.map",
    "static/css/2.60e04a19.chunk.css": "/static/css/2.60e04a19.chunk.css",
-    "static/js/2.a3d22cff.chunk.js": "/static/js/2.a3d22cff.chunk.js",
-    "static/js/2.a3d22cff.chunk.js.map": "/static/js/2.a3d22cff.chunk.js.map",
+    "static/js/2.ad4d622f.chunk.js": "/static/js/2.ad4d622f.chunk.js",
+    "static/js/2.ad4d622f.chunk.js.map": "/static/js/2.ad4d622f.chunk.js.map",
    "index.html": "/index.html",
    "static/css/2.60e04a19.chunk.css.map": "/static/css/2.60e04a19.chunk.css.map",
    "static/css/main.8cfac526.chunk.css.map": "/static/css/main.8cfac526.chunk.css.map",
-    "static/js/2.a3d22cff.chunk.js.LICENSE.txt": "/static/js/2.a3d22cff.chunk.js.LICENSE.txt",
+    "static/js/2.ad4d622f.chunk.js.LICENSE.txt": "/static/js/2.ad4d622f.chunk.js.LICENSE.txt",
    "static/media/minio_console_logo.0837460e.svg": "/static/media/minio_console_logo.0837460e.svg",
    "static/media/minio_operator_logo.1312b7c9.svg": "/static/media/minio_operator_logo.1312b7c9.svg"
  },
  "entrypoints": [
    "static/js/runtime-main.43a31377.js",
    "static/css/2.60e04a19.chunk.css",
-    "static/js/2.a3d22cff.chunk.js",
+    "static/js/2.ad4d622f.chunk.js",
    "static/css/main.8cfac526.chunk.css",
-    "static/js/main.d02553d5.chunk.js"
+    "static/js/main.8fd542d7.chunk.js"
  ]
 }
--- a/portal-ui/build/index.html
+++ b/portal-ui/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="MinIO Console"/><link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700;900&display=swap" rel="stylesheet"/><link href="/styles/root-styles.css" rel="stylesheet"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="manifest" href="/manifest.json"/><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3a4e54"/><title>MinIO Console</title><link href="/static/css/2.60e04a19.chunk.css" rel="stylesheet"><link href="/static/css/main.8cfac526.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div id="loader-block"><svg class="loader-svg-container" viewBox="22 22 44 44"><circle class="loader-style MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate" cx="44" cy="44" r="20.2" fill="none" stroke-width="3.6"></circle></svg></div></div><script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],p=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this["webpackJsonpportal-ui"]=this["webpackJsonpportal-ui"]||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var p=0;p<i.length;p++)r(i[p]);var f=a;t()}([])</script><script src="/static/js/2.a3d22cff.chunk.js"></script><script src="/static/js/main.d02553d5.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="MinIO Console"/><link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700;900&display=swap" rel="stylesheet"/><link href="/styles/root-styles.css" rel="stylesheet"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="manifest" href="/manifest.json"/><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3a4e54"/><title>MinIO Console</title><link href="/static/css/2.60e04a19.chunk.css" rel="stylesheet"><link href="/static/css/main.8cfac526.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div id="loader-block"><svg class="loader-svg-container" viewBox="22 22 44 44"><circle class="loader-style MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate" cx="44" cy="44" r="20.2" fill="none" stroke-width="3.6"></circle></svg></div></div><script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],p=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this["webpackJsonpportal-ui"]=this["webpackJsonpportal-ui"]||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var p=0;p<i.length;p++)r(i[p]);var f=a;t()}([])</script><script src="/static/js/2.ad4d622f.chunk.js"></script><script src="/static/js/main.8fd542d7.chunk.js"></script></body></html>
--- a/portal-ui/build/static/js/2.ad4d622f.chunk.js
+++ b/portal-ui/build/static/js/2.ad4d622f.chunk.js
--- a/portal-ui/build/static/js/2.ad4d622f.chunk.js.LICENSE.txt
+++ b/portal-ui/build/static/js/2.ad4d622f.chunk.js.LICENSE.txt
--- a/portal-ui/build/static/js/2.ad4d622f.chunk.js.map
+++ b/portal-ui/build/static/js/2.ad4d622f.chunk.js.map
--- a/portal-ui/build/static/js/main.8fd542d7.chunk.js
+++ b/portal-ui/build/static/js/main.8fd542d7.chunk.js
--- a/portal-ui/build/static/js/main.8fd542d7.chunk.js.map
+++ b/portal-ui/build/static/js/main.8fd542d7.chunk.js.map
--- a/portal-ui/build/static/js/main.d02553d5.chunk.js
+++ b/portal-ui/build/static/js/main.d02553d5.chunk.js
--- a/portal-ui/build/static/js/main.d02553d5.chunk.js.map
+++ b/portal-ui/build/static/js/main.d02553d5.chunk.js.map
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
@@ -265,8 +265,8 @@ const BucketDetails = ({
        <Grid item xs={2}>
          <List component="nav" dense={true}>
            <ListItem
-              className={classes.listItem}
              button
+              selected={selectedTab === "summary"}
              onClick={() => {
                changeRoute("summary");
              }}
@@ -274,8 +274,8 @@ const BucketDetails = ({
              <ListItemText primary="Summary" />
            </ListItem>
            <ListItem
-              className={classes.listItem}
              button
+              selected={selectedTab === "events"}
              onClick={() => {
                changeRoute("events");
              }}
@@ -284,8 +284,8 @@ const BucketDetails = ({
            </ListItem>
            {canGetReplication && (
              <ListItem
-                className={classes.listItem}
                button
+                selected={selectedTab === "replication"}
                onClick={() => {
                  changeRoute("replication");
                }}
@@ -295,8 +295,8 @@ const BucketDetails = ({
            )}

            <ListItem
-              className={classes.listItem}
              button
+              selected={selectedTab === "lifecycle"}
              onClick={() => {
                changeRoute("lifecycle");
              }}
@@ -304,8 +304,8 @@ const BucketDetails = ({
              <ListItemText primary="Lifecycle" />
            </ListItem>
            <ListItem
-              className={classes.listItem}
              button
+              selected={selectedTab === "access"}
              onClick={() => {
                changeRoute("access");
              }}
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx
@@ -48,9 +48,6 @@ const styles = (theme: Theme) =>
  createStyles({
    ...searchField,
    ...actionsTray,
-    actionsTray: {
-      ...actionsTray.actionsTray,
-    },
  });

 const BucketReplicationPanel = ({
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -138,6 +138,9 @@ export const containerForHeader = (bottomSpacing: any) => ({
      },
    },
  },
+  topSpacer: {
+    height: "8px",
+  },
 });

 export const actionsTray = {
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/PodsSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/PodsSummary.tsx
@@ -32,6 +32,7 @@ import { ErrorResponseHandler } from "../../../../common/types";
 import DeletePod from "./DeletePod";

 interface IPodsSummary {
+  classes: any;
  match: any;
  history: any;
  loadingTenant: boolean;
@@ -44,7 +45,12 @@ const styles = (theme: Theme) =>
    ...containerForHeader(theme.spacing(4)),
  });

-const PodsSummary = ({ match, history, loadingTenant }: IPodsSummary) => {
+const PodsSummary = ({
+  classes,
+  match,
+  history,
+  loadingTenant,
+}: IPodsSummary) => {
  const [pods, setPods] = useState<IPodListElement[]>([]);
  const [loadingPods, setLoadingPods] = useState<boolean>(true);
  const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
@@ -117,7 +123,7 @@ const PodsSummary = ({ match, history, loadingTenant }: IPodsSummary) => {
          closeDeleteModalAndRefresh={closeDeleteModalAndRefresh}
        />
      )}
-      <br />
+      <div className={classes.topSpacer} />
      <TableWrapper
        columns={[
          { label: "Name", elementKey: "name" },
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
@@ -18,6 +18,7 @@ import React, { Fragment, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import {
+  actionsTray,
  containerForHeader,
  tenantDetailsStyles,
 } from "../../Common/FormComponents/common/styleLibrary";
@@ -56,6 +57,7 @@ const styles = (theme: Theme) =>
    greyState: {
      color: "grey",
    },
+    ...actionsTray,
    ...containerForHeader(theme.spacing(4)),
  });

@@ -101,6 +103,7 @@ const PoolsSummary = ({
          tenant={tenant}
        />
      )}
+      <div className={classes.topSpacer} />
      <Grid container>
        <Grid item xs={12} className={classes.actionsTray}>
          <TextField
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
@@ -21,8 +21,6 @@ import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { IconButton, Menu, MenuItem } from "@material-ui/core";
 import get from "lodash/get";
 import Grid from "@material-ui/core/Grid";
-import Tabs from "@material-ui/core/Tabs";
-import Tab from "@material-ui/core/Tab";
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 import RefreshIcon from "@material-ui/icons/Refresh";
 import { setErrorSnackMessage } from "../../../../actions";
@@ -48,6 +46,9 @@ import PoolsSummary from "./PoolsSummary";
 import PodsSummary from "./PodsSummary";
 import TenantMetrics from "./TenantMetrics";
 import TenantSecurity from "./TenantSecurity";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";

 interface ITenantDetailsProps {
  classes: any;
@@ -180,6 +181,13 @@ const TenantDetails = ({
    setTenantDetailsLoad(true);
  };

+  const changeRoute = (newValue: string) => {
+    setTenantTab(newValue);
+    history.push(
+      `/namespaces/${tenantNamespace}/tenants/${tenantName}/${newValue}`
+    );
+  };
+
  return (
    <Fragment>
      {yamlScreenOpen && (
@@ -233,30 +241,65 @@ const TenantDetails = ({
      />
      <Grid item xs={12} className={classes.container} />
      <Grid container>
-        <Grid item xs={12}>
-          <Tabs
-            value={currentTab}
-            indicatorColor="primary"
-            textColor="primary"
-            onChange={(_, newValue: string) => {
-              setTenantTab(newValue);
-              history.push(
-                `/namespaces/${tenantNamespace}/tenants/${tenantName}/${newValue}`
-              );
-            }}
-            aria-label="tenant-tabs"
-            variant="scrollable"
-            scrollButtons="auto"
-          >
-            <Tab value="summary" label="Summary" />
-            <Tab value="metrics" label="Metrics" />
-            <Tab value="security" label="Security" />
-            <Tab value="pools" label="Pools" />
-            <Tab value="pods" label="Pods" />
-            <Tab value="license" label="License" />
-          </Tabs>
+        <Grid item xs={2}>
+          <List component="nav" dense={true}>
+            <ListItem
+              button
+              selected={currentTab === "summary"}
+              onClick={() => {
+                changeRoute("summary");
+              }}
+            >
+              <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"}
+              onClick={() => {
+                changeRoute("pods");
+              }}
+            >
+              <ListItemText primary="Pods" />
+            </ListItem>
+            <ListItem
+              button
+              selected={currentTab === "license"}
+              onClick={() => {
+                changeRoute("license");
+              }}
+            >
+              <ListItemText primary="License" />
+            </ListItem>
+          </List>
        </Grid>
-        <Grid item xs={12}>
+        <Grid item xs={10}>
          <Router history={history}>
            <Switch>
              <Route
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLicense.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLicense.tsx
@@ -97,7 +97,7 @@ const TenantLicense = ({

  return (
    <Fragment>
-      <br />
+      <div className={classes.topSpacer} />
      {loadingTenant ? (
        <div className={classes.loaderAlign}>
          <CircularProgress />
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx
@@ -418,7 +418,7 @@ const TenantSecurity = ({
        cancelLabel="Cancel"
        okLabel={"Restart"}
      />
-      <br />
+      <div className={classes.topSpacer} />
      {loadingTenant ? (
        <Paper className={classes.paperContainer}>
          <div className={classes.loaderAlign}>
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
@@ -175,7 +175,7 @@ const TenantSummary = ({
          namespace={tenantNamespace}
        />
      )}
-      <br />
+      <div className={classes.topSpacer} />
      <Paper className={classes.paperContainer}>
        <Grid container>
          <Grid item xs={8}>
--- a/portal-ui/src/screens/Console/Users/UserDetails.tsx
+++ b/portal-ui/src/screens/Console/Users/UserDetails.tsx
@@ -308,6 +308,7 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
          <List component="nav" dense={true}>
            <ListItem
              button
+              selected={curTab == 0}
              onClick={() => {
                setCurTab(0);
              }}
@@ -316,6 +317,7 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
            </ListItem>
            <ListItem
              button
+              selected={curTab == 1}
              onClick={() => {
                setCurTab(1);
              }}
@@ -324,6 +326,7 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
            </ListItem>
            <ListItem
              button
+              selected={curTab == 2}
              onClick={() => {
                setCurTab(2);
              }}
--- a/portal-ui/src/theme/main.ts
+++ b/portal-ui/src/theme/main.ts
@@ -91,6 +91,16 @@ const theme = createMuiTheme({
        borderRadius: 3,
      },
    },
+    MuiListItem: {
+      root: {
+        "&.MuiListItem-root.Mui-selected": {
+          background: "inherit",
+          "& .MuiTypography-root": {
+            fontWeight: "bold",
+          },
+        },
+      },
+    },
  },
 });