Added routes to tab selection in storage (#761)

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
2021-05-21 17:40:39 -05:00
parent 6b2043c832
commit d8350625f3
15 changed files with 70 additions and 49 deletions
--- a/pkg/acl/endpoints.go
+++ b/pkg/acl/endpoints.go
@@ -37,6 +37,8 @@ var (
 	tenants             = "/tenants"
 	tenantsDetail       = "/namespaces/:tenantNamespace/tenants/:tenantName"
 	storage             = "/storage"
+	storageVolumes      = "/storage/volumes"
+	storageDrives       = "/storage/drives"
 	remoteBuckets       = "/remote-buckets"
 	replication         = "/replication"
 	objectBrowser       = "/object-browser/:bucket/*"
@@ -301,10 +303,12 @@ var endpointRules = map[string]ConfigurationActionSet{

 // operatorRules contains the mapping between endpoints and ActionSets for operator only mode
 var operatorRules = map[string]ConfigurationActionSet{
-	tenants:       tenantsActionSet,
-	tenantsDetail: tenantsActionSet,
-	storage:       storageActionSet,
-	license:       licenseActionSet,
+	tenants:        tenantsActionSet,
+	tenantsDetail:  tenantsActionSet,
+	storage:        storageActionSet,
+	storageDrives:  storageActionSet,
+	storageVolumes: storageActionSet,
+	license:        licenseActionSet,
 }

 // operatorOnly ENV variable
--- a/pkg/acl/endpoints_test.go
+++ b/pkg/acl/endpoints_test.go
@@ -116,7 +116,7 @@ func TestOperatorOnlyEndpoints(t *testing.T) {
 					"admin:*",
 				},
 			},
-			want: 4,
+			want: 6,
 		},
 		{
 			name: "Operator Only - all s3 endpoints",
@@ -125,7 +125,7 @@ func TestOperatorOnlyEndpoints(t *testing.T) {
 					"s3:*",
 				},
 			},
-			want: 4,
+			want: 6,
 		},
 		{
 			name: "Operator Only - all admin and s3 endpoints",
@@ -135,14 +135,14 @@ func TestOperatorOnlyEndpoints(t *testing.T) {
 					"s3:*",
 				},
 			},
-			want: 4,
+			want: 6,
 		},
 		{
 			name: "Operator Only - default endpoints",
 			args: args{
 				[]string{},
 			},
-			want: 4,
+			want: 6,
 		},
 	}

--- a/portal-ui/build/asset-manifest.json
+++ b/portal-ui/build/asset-manifest.json
@@ -1,25 +1,25 @@
 {
  "files": {
    "main.css": "/static/css/main.a19f3d53.chunk.css",
-    "main.js": "/static/js/main.bce84d5c.chunk.js",
-    "main.js.map": "/static/js/main.bce84d5c.chunk.js.map",
+    "main.js": "/static/js/main.e94e6cae.chunk.js",
+    "main.js.map": "/static/js/main.e94e6cae.chunk.js.map",
    "runtime-main.js": "/static/js/runtime-main.f48e99e5.js",
    "runtime-main.js.map": "/static/js/runtime-main.f48e99e5.js.map",
-    "static/css/2.f324abd6.chunk.css": "/static/css/2.f324abd6.chunk.css",
-    "static/js/2.abb15bb1.chunk.js": "/static/js/2.abb15bb1.chunk.js",
-    "static/js/2.abb15bb1.chunk.js.map": "/static/js/2.abb15bb1.chunk.js.map",
+    "static/css/2.13d7fda8.chunk.css": "/static/css/2.13d7fda8.chunk.css",
+    "static/js/2.52177747.chunk.js": "/static/js/2.52177747.chunk.js",
+    "static/js/2.52177747.chunk.js.map": "/static/js/2.52177747.chunk.js.map",
    "index.html": "/index.html",
-    "static/css/2.f324abd6.chunk.css.map": "/static/css/2.f324abd6.chunk.css.map",
+    "static/css/2.13d7fda8.chunk.css.map": "/static/css/2.13d7fda8.chunk.css.map",
    "static/css/main.a19f3d53.chunk.css.map": "/static/css/main.a19f3d53.chunk.css.map",
-    "static/js/2.abb15bb1.chunk.js.LICENSE.txt": "/static/js/2.abb15bb1.chunk.js.LICENSE.txt",
+    "static/js/2.52177747.chunk.js.LICENSE.txt": "/static/js/2.52177747.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.f48e99e5.js",
-    "static/css/2.f324abd6.chunk.css",
-    "static/js/2.abb15bb1.chunk.js",
+    "static/css/2.13d7fda8.chunk.css",
+    "static/js/2.52177747.chunk.js",
    "static/css/main.a19f3d53.chunk.css",
-    "static/js/main.bce84d5c.chunk.js"
+    "static/js/main.e94e6cae.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 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.f324abd6.chunk.css" rel="stylesheet"><link href="/static/css/main.a19f3d53.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></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.abb15bb1.chunk.js"></script><script src="/static/js/main.bce84d5c.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 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.13d7fda8.chunk.css" rel="stylesheet"><link href="/static/css/main.a19f3d53.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></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.52177747.chunk.js"></script><script src="/static/js/main.e94e6cae.chunk.js"></script></body></html>
--- a/portal-ui/build/static/css/2.13d7fda8.chunk.css
+++ b/portal-ui/build/static/css/2.13d7fda8.chunk.css
@@ -1,2 +1,2 @@
 .ReactVirtualized__Table__headerRow{font-weight:700;text-transform:uppercase}.ReactVirtualized__Table__headerRow,.ReactVirtualized__Table__row{display:flex;flex-direction:row;align-items:center}.ReactVirtualized__Table__headerTruncatedText{display:inline-block;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ReactVirtualized__Table__headerColumn,.ReactVirtualized__Table__rowColumn{margin-right:10px;min-width:0}.ReactVirtualized__Table__rowColumn{text-overflow:ellipsis;white-space:nowrap}.ReactVirtualized__Table__headerColumn:first-of-type,.ReactVirtualized__Table__rowColumn:first-of-type{margin-left:10px}.ReactVirtualized__Table__sortableHeaderColumn{cursor:pointer}.ReactVirtualized__Table__sortableHeaderIconContainer{display:flex;align-items:center}.ReactVirtualized__Table__sortableHeaderIcon{flex:0 0 24px;height:1em;width:1em;fill:currentColor}.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top}.react-grid-item img{pointer-events:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.react-grid-item.cssTransforms{transition-property:transform}.react-grid-item.resizing{z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e,.react-grid-item>.react-resizable-handle.react-resizable-handle-w{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgd2lkdGg9IjYiIGhlaWdodD0iNiI+PHBhdGggZD0iTTYgNkgwVjQuMmg0LjJWMEg2djZ6IiBvcGFjaXR5PSIuMzAyIi8+PC9zdmc+");background-position:100% 100%;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-e,.react-resizable-handle-w{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}
-/*# sourceMappingURL=2.f324abd6.chunk.css.map */
+/*# sourceMappingURL=2.13d7fda8.chunk.css.map */
--- a/portal-ui/build/static/css/2.13d7fda8.chunk.css.map
+++ b/portal-ui/build/static/css/2.13d7fda8.chunk.css.map
--- a/portal-ui/build/static/js/2.52177747.chunk.js
+++ b/portal-ui/build/static/js/2.52177747.chunk.js
--- a/portal-ui/build/static/js/2.52177747.chunk.js.LICENSE.txt
+++ b/portal-ui/build/static/js/2.52177747.chunk.js.LICENSE.txt
--- a/portal-ui/build/static/js/2.52177747.chunk.js.map
+++ b/portal-ui/build/static/js/2.52177747.chunk.js.map
--- a/portal-ui/build/static/js/main.bce84d5c.chunk.js.map
+++ b/portal-ui/build/static/js/main.bce84d5c.chunk.js.map
--- a/portal-ui/build/static/js/main.e94e6cae.chunk.js
+++ b/portal-ui/build/static/js/main.e94e6cae.chunk.js
--- a/portal-ui/build/static/js/main.e94e6cae.chunk.js.map
+++ b/portal-ui/build/static/js/main.e94e6cae.chunk.js.map
--- a/portal-ui/src/screens/Console/Console.tsx
+++ b/portal-ui/src/screens/Console/Console.tsx
@@ -55,7 +55,7 @@ import LogsMain from "./Logs/LogsMain";
 import Heal from "./Heal/Heal";
 import Watch from "./Watch/Watch";
 import HealthInfo from "./HealthInfo/HealthInfo";
-import StorageMain from "./Storage/StorageMain";
+import Storage from "./Storage/Storage";

 const drawerWidth = 245;

@@ -306,9 +306,17 @@ const Console = ({
      path: "/tenants",
    },
    {
-      component: StorageMain,
+      component: Storage,
      path: "/storage",
    },
+    {
+      component: Storage,
+      path: "/storage/volumes",
+    },
+    {
+      component: Storage,
+      path: "/storage/drives",
+    },
    {
      component: TenantDetails,
      path: "/namespaces/:tenantNamespace/tenants/:tenantName",
--- a/portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx
+++ b/portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx
@@ -113,7 +113,7 @@ const DirectCSIMain = ({
  >([]);
  const [formatErrorsOpen, setFormatErrorsOpen] = useState<boolean>(false);
  const [drivesToFormat, setDrivesToFormat] = useState<string[]>([]);
-  const [notAvailable, setNotAvailable] = useState<boolean>(false);
+  const [notAvailable, setNotAvailable] = useState<boolean>(true);

  useEffect(() => {
    if (loading && !notAvailable) {
@@ -147,6 +147,7 @@ const DirectCSIMain = ({

          setRecords(drives);
          setLoading(false);
+          setNotAvailable(false);
        })
        .catch((err) => {
          setLoading(false);
--- a/portal-ui/src/screens/Console/Storage/StorageMain.tsx
+++ b/portal-ui/src/screens/Console/Storage/StorageMain.tsx
@@ -14,23 +14,23 @@
 // 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, { Fragment, useState } from "react";
-import { connect } from "react-redux";
+import React, { Fragment, useState, useEffect } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { Grid, Tab, Tabs } from "@material-ui/core";
-import { setErrorSnackMessage } from "../../../actions";
+import { Route, Router, Switch, Redirect } from "react-router-dom";
 import {
  actionsTray,
  containerForHeader,
  searchField,
 } from "../Common/FormComponents/common/styleLibrary";
+import history from "../../../history";
 import PageHeader from "../Common/PageHeader/PageHeader";
 import StoragePVCs from "./StoragePVCs";
 import DirectCSIDrives from "../DirectCSI/DirectCSIDrives";

-interface IStorageMain {
+interface IStorageProps {
  classes: any;
-  setErrorSnackMessage: typeof setErrorSnackMessage;
+  match: any;
 }

 const styles = (theme: Theme) =>
@@ -49,9 +49,20 @@ const styles = (theme: Theme) =>
    ...containerForHeader(theme.spacing(4)),
  });

-const StorageMain = ({ classes, setErrorSnackMessage }: IStorageMain) => {
+const routes = ["/storage/volumes", "/storage/drives"];
+
+const Storage = ({ classes, match }: IStorageProps) => {
  const [selectedTab, setSelectedTab] = useState<number>(0);

+  useEffect(() => {
+    const index = routes.findIndex((route) => route === match.path);
+    setSelectedTab(index);
+  }, [match]);
+
+  const routeChange = (e: React.ChangeEvent<{}>, newValue: number) => {
+    history.push(routes[newValue]);
+  };
+
  return (
    <Fragment>
      <PageHeader label={"Storage"} />
@@ -60,9 +71,7 @@ const StorageMain = ({ classes, setErrorSnackMessage }: IStorageMain) => {
          <Grid item xs={12} className={classes.tabsContainer}>
            <Tabs
              value={selectedTab}
-              onChange={(e: React.ChangeEvent<{}>, newValue: number) => {
-                setSelectedTab(newValue);
-              }}
+              onChange={routeChange}
              indicatorColor="primary"
              textColor="primary"
              aria-label="cluster-tabs"
@@ -71,18 +80,17 @@ const StorageMain = ({ classes, setErrorSnackMessage }: IStorageMain) => {
              <Tab label="Drives" />
            </Tabs>
          </Grid>
-          {selectedTab === 0 && <StoragePVCs />}
-          {selectedTab === 1 && <DirectCSIDrives />}
+          <Router history={history}>
+            <Switch>
+              <Route path={routes[0]} component={StoragePVCs} />
+              <Route path={routes[1]} component={DirectCSIDrives} />
+              <Route render={() => <Redirect to="/storage/volumes" />} />
+            </Switch>
+          </Router>
        </Grid>
      </Grid>
    </Fragment>
  );
 };

-const mapDispatchToProps = {
-  setErrorSnackMessage,
-};
-
-const connector = connect(null, mapDispatchToProps);
-
-export default withStyles(styles)(connector(StorageMain));
+export default withStyles(styles)(Storage);