Redesigned Bucket Details. User Details. Account Screen. Login Error. (…

…#903) Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
minio · Jul 28, 2021 · 988958f · 988958f
1 parent 13844e1
commit 988958f
Show file tree

Hide file tree

Showing 24 changed files with 376 additions and 461 deletions.
diff --git 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.6ca7d2e8.chunk.js",
-    "main.js.map": "/static/js/main.6ca7d2e8.chunk.js.map",
+    "main.js": "/static/js/main.09738e85.chunk.js",
+    "main.js.map": "/static/js/main.09738e85.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.da0353b6.chunk.js": "/static/js/2.da0353b6.chunk.js",
-    "static/js/2.da0353b6.chunk.js.map": "/static/js/2.da0353b6.chunk.js.map",
+    "static/js/2.fdaf1119.chunk.js": "/static/js/2.fdaf1119.chunk.js",
+    "static/js/2.fdaf1119.chunk.js.map": "/static/js/2.fdaf1119.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.da0353b6.chunk.js.LICENSE.txt": "/static/js/2.da0353b6.chunk.js.LICENSE.txt",
+    "static/js/2.fdaf1119.chunk.js.LICENSE.txt": "/static/js/2.fdaf1119.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.da0353b6.chunk.js",
+    "static/js/2.fdaf1119.chunk.js",
     "static/css/main.8cfac526.chunk.css",
-    "static/js/main.6ca7d2e8.chunk.js"
+    "static/js/main.09738e85.chunk.js"
   ]
 }
diff --git 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.da0353b6.chunk.js"></script><script src="/static/js/main.6ca7d2e8.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.fdaf1119.chunk.js"></script><script src="/static/js/main.09738e85.chunk.js"></script></body></html>
diff --git a/portal-ui/build/static/js/2.da0353b6.chunk.js b/portal-ui/build/static/js/2.da0353b6.chunk.js
diff --git a/portal-ui/build/static/js/2.fdaf1119.chunk.js b/portal-ui/build/static/js/2.fdaf1119.chunk.js
diff --git a/...static/js/2.da0353b6.chunk.js.LICENSE.txt → ...static/js/2.fdaf1119.chunk.js.LICENSE.txt b/...static/js/2.da0353b6.chunk.js.LICENSE.txt → ...static/js/2.fdaf1119.chunk.js.LICENSE.txt
diff --git a/...i/build/static/js/2.da0353b6.chunk.js.map → ...i/build/static/js/2.fdaf1119.chunk.js.map b/...i/build/static/js/2.da0353b6.chunk.js.map → ...i/build/static/js/2.fdaf1119.chunk.js.map
diff --git a/portal-ui/build/static/js/main.09738e85.chunk.js b/portal-ui/build/static/js/main.09738e85.chunk.js
diff --git a/portal-ui/build/static/js/main.09738e85.chunk.js.map b/portal-ui/build/static/js/main.09738e85.chunk.js.map
diff --git a/portal-ui/build/static/js/main.6ca7d2e8.chunk.js b/portal-ui/build/static/js/main.6ca7d2e8.chunk.js
diff --git a/portal-ui/build/static/js/main.6ca7d2e8.chunk.js.map b/portal-ui/build/static/js/main.6ca7d2e8.chunk.js.map
diff --git a/portal-ui/src/screens/Console/Account/Account.tsx b/portal-ui/src/screens/Console/Account/Account.tsx
@@ -14,12 +14,12 @@
 // 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, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import api from "../../../common/api";
-import { Button } from "@material-ui/core";
+import { Button, IconButton, Tooltip } from "@material-ui/core";
 import Typography from "@material-ui/core/Typography";
 import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
 import { setErrorSnackMessage } from "../../../actions";
@@ -38,7 +38,6 @@ import {
   containerForHeader,
   searchField,
 } from "../Common/FormComponents/common/styleLibrary";
-import Divider from "@material-ui/core/Divider";
 import LockIcon from "@material-ui/icons/Lock";
 import ChangePasswordModal from "./ChangePasswordModal";
 
@@ -206,40 +205,31 @@ const Account = ({
           entity="Service Account"
         />
       )}
-      <PageHeader label="Account" />
-      <Grid container>
-        <Grid item xs={12} className={classes.container}>
-          {changePassword && (
-            <React.Fragment>
-              <Grid item xs={12}>
-                <Typography variant="h5" component="h5">
-                  Settings
-                </Typography>
-              </Grid>
-              <Grid item xs={12}>
-                <br />
-              </Grid>
-              <Grid item xs={12}>
-                <ChangePasswordModal
-                  open={changePasswordModalOpen}
-                  closeModal={() => setChangePasswordModalOpen(false)}
-                />
-                <Button
-                  variant="contained"
+      <ChangePasswordModal
+        open={changePasswordModalOpen}
+        closeModal={() => setChangePasswordModalOpen(false)}
+      />
+      <PageHeader
+        label="Account"
+        actions={
+          <React.Fragment>
+            {changePassword && (
+              <Tooltip title="Change Password">
+                <IconButton
                   color="primary"
-                  startIcon={<LockIcon />}
+                  aria-label="Change Password"
+                  component="span"
                   onClick={() => setChangePasswordModalOpen(true)}
                 >
-                  Change Password
-                </Button>
-              </Grid>
-              <Grid item xs={12}>
-                <br />
-                <Divider />
-                <br />
-              </Grid>
-            </React.Fragment>
-          )}
+                  <LockIcon />
+                </IconButton>
+              </Tooltip>
+            )}
+          </React.Fragment>
+        }
+      />
+      <Grid container>
+        <Grid item xs={12} className={classes.container}>
           <Grid item xs={12}>
             <Typography variant="h5" component="h5">
               Service Accounts

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx
@@ -118,22 +118,21 @@ const AccessDetails = ({
 
   return (
     <Fragment>
-      <br />
+      <Tabs
+        value={curTab}
+        onChange={(e: React.ChangeEvent<{}>, newValue: number) => {
+          setCurTab(newValue);
+        }}
+        indicatorColor="primary"
+        textColor="primary"
+        aria-label="cluster-tabs"
+        variant="scrollable"
+        scrollButtons="auto"
+      >
+        <Tab label="Policies" {...a11yProps(0)} />
+        {usersEnabled && <Tab label="Users" {...a11yProps(1)} />}
+      </Tabs>
       <Paper>
-        <Tabs
-          value={curTab}
-          onChange={(e: React.ChangeEvent<{}>, newValue: number) => {
-            setCurTab(newValue);
-          }}
-          indicatorColor="primary"
-          textColor="primary"
-          aria-label="cluster-tabs"
-          variant="scrollable"
-          scrollButtons="auto"
-        >
-          <Tab label="Policies" {...a11yProps(0)} />
-          {usersEnabled && <Tab label="Users" {...a11yProps(1)} />}
-        </Tabs>
         <TabPanel index={0} value={curTab}>
           <TableWrapper
             noBackground={true}

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
@@ -15,12 +15,10 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { Redirect, Route, Router, Switch } from "react-router-dom";
+import { Link, Redirect, Route, Router, Switch } from "react-router-dom";
 import { connect } from "react-redux";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
-import Tabs from "@material-ui/core/Tabs";
-import Tab from "@material-ui/core/Tab";
 import api from "../../../../common/api";
 import { HasPermissionResponse } from "../types";
 import {
@@ -39,6 +37,9 @@ import BucketSummaryPanel from "./BucketSummaryPanel";
 import BucketEventsPanel from "./BucketEventsPanel";
 import BucketReplicationPanel from "./BucketReplicationPanel";
 import BucketLifecyclePanel from "./BucketLifecyclePanel";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -132,6 +133,10 @@ const styles = (theme: Theme) =>
     titleCol: {
       fontWeight: "bold",
     },
+    breadcrumLink: {
+      textDecoration: "none",
+      color: "black",
+    },
     ...searchField,
     ...actionsTray,
     actionsTray: {
@@ -153,13 +158,6 @@ interface IBucketDetailsProps {
   setBucketDetailsTab: typeof setBucketDetailsTab;
 }
 
-function a11yProps(index: any) {
-  return {
-    id: `simple-tab-${index}`,
-    "aria-controls": `simple-tabpanel-${index}`,
-  };
-}
-
 const BucketDetails = ({
   classes,
   match,
@@ -252,75 +250,105 @@ const BucketDetails = ({
 
   return (
     <Fragment>
-      <PageHeader label={`Bucket > ${match.params["bucketName"]}`} />
+      <PageHeader
+        label={
+          <Fragment>
+            <Link to={"/buckets"} className={classes.breadcrumLink}>
+              Buckets
+            </Link>
+            {` > ${bucketName}`}
+          </Fragment>
+        }
+      />
       <Grid container className={classes.container}>
-        <Grid item xs={12}>
-          <Tabs
-            value={selectedTab !== "" ? selectedTab : "summary"}
-            onChange={(e: React.ChangeEvent<{}>, newValue: string) => {
-              changeRoute(newValue);
-            }}
-            indicatorColor="primary"
-            textColor="primary"
-            aria-label="cluster-tabs"
-            variant="scrollable"
-            scrollButtons="auto"
-          >
-            <Tab value="summary" label="Summary" {...a11yProps(0)} />
-            <Tab value="events" label="Events" {...a11yProps(1)} />
-            <Tab
-              value="replication"
-              label="Replication"
-              {...a11yProps(2)}
-              disabled={!canGetReplication || !distributedSetup}
-            />
-            <Tab
-              value="lifecycle"
-              label="Lifecycle"
-              {...a11yProps(3)}
-              disabled={!distributedSetup}
-            />
-            <Tab value="access" label="Access" {...a11yProps(4)} />
-          </Tabs>
+        <Grid item xs={2}>
+          <List component="nav" dense={true}>
+            <ListItem
+              className={classes.listItem}
+              button
+              onClick={() => {
+                changeRoute("summary");
+              }}
+            >
+              <ListItemText primary="Summary" />
+            </ListItem>
+            <ListItem
+              className={classes.listItem}
+              button
+              onClick={() => {
+                changeRoute("events");
+              }}
+            >
+              <ListItemText primary="Events" />
+            </ListItem>
+            {canGetReplication && (
+              <ListItem
+                className={classes.listItem}
+                button
+                onClick={() => {
+                  changeRoute("replication");
+                }}
+              >
+                <ListItemText primary="Replication" />
+              </ListItem>
+            )}
+
+            <ListItem
+              className={classes.listItem}
+              button
+              onClick={() => {
+                changeRoute("lifecycle");
+              }}
+            >
+              <ListItemText primary="Lifecycle" />
+            </ListItem>
+            <ListItem
+              className={classes.listItem}
+              button
+              onClick={() => {
+                changeRoute("access");
+              }}
+            >
+              <ListItemText primary="Audit Access" />
+            </ListItem>
+          </List>
         </Grid>
-        <Grid item xs={12}>
-          <Grid item xs={12} className={classes.routerContainer}>
-            <Router history={history}>
-              <Switch>
+        <Grid item xs={10}>
+          <Router history={history}>
+            <Switch>
+              <Route
+                path="/buckets/:bucketName/summary"
+                component={BucketSummaryPanel}
+              />
+              <Route
+                path="/buckets/:bucketName/events"
+                component={BucketEventsPanel}
+              />
+              {distributedSetup && (
                 <Route
-                  path="/buckets/:bucketName/summary"
-                  component={BucketSummaryPanel}
+                  path="/buckets/:bucketName/replication"
+                  component={BucketReplicationPanel}
                 />
+              )}
+              {distributedSetup && (
                 <Route
-                  path="/buckets/:bucketName/events"
-                  component={BucketEventsPanel}
+                  path="/buckets/:bucketName/lifecycle"
+                  component={BucketLifecyclePanel}
                 />
-                {distributedSetup && (
-                  <Route
-                    path="/buckets/:bucketName/replication"
-                    component={BucketReplicationPanel}
-                  />
-                )}
-                {distributedSetup && (
-                  <Route
-                    path="/buckets/:bucketName/lifecycle"
-                    component={BucketLifecyclePanel}
-                  />
-                )}
+              )}
 
-                <Route
-                  path="/buckets/:bucketName/access"
-                  component={AccessDetailsPanel}
-                />
-                <Route
-                  path="/buckets/:bucketName"
-                  component={() => (
-                    <Redirect to={`/buckets/${bucketName}/summary`} />
-                  )}
-                />
-              </Switch>
-            </Router>
-          </Grid>
+              <Route
+                path="/buckets/:bucketName/access"
+                component={AccessDetailsPanel}
+              />
+              <Route
+                path="/buckets/:bucketName"
+                component={() => (
+                  <Redirect to={`/buckets/${bucketName}/summary`} />
+                )}
+              />
+            </Switch>
+          </Router>
         </Grid>
       </Grid>
     </Fragment>