MDS Menu (#1622)

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

web-app/package.json

@@ -17,7 +17,7 @@
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.21",
     "luxon": "^3.3.0",
-    "mds": "https://github.com/minio/mds.git#v0.3.0",
+    "mds": "https://github.com/minio/mds.git#v0.6.0",
     "react": "^18.1.0",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^18.1.0",

web-app/src/config.ts

@@ -24,7 +24,7 @@ export const MinIOPlan =
 type LogoVar = "simple" | "AGPL" | "standard" | "enterprise";
 
 export const getLogoVar = (): LogoVar => {
-  let logoVar: LogoVar = "AGPL";
+  let logoVar: LogoVar;
   switch (MinIOPlan) {
     case "enterprise":
       logoVar = "enterprise";

web-app/src/screens/Console/Console.tsx

@@ -22,7 +22,7 @@ import React, {
   useState,
 } from "react";
 import { Theme } from "@mui/material/styles";
-import { Button } from "mds";
+import { MainContainer } from "mds";
 import debounce from "lodash/debounce";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -33,9 +33,7 @@ import { Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { AppState, useAppDispatch } from "../../store";
 import { snackBarCommon } from "./Common/FormComponents/common/styleLibrary";
-import { ErrorResponseHandler } from "../../common/types";
-import Menu from "./Menu/Menu";
-import api from "../../common/api";
+import AppMenu from "./Menu/AppMenu";
 import MainError from "./Common/MainError/MainError";
 import {
   CONSOLE_UI_RESOURCE,
@@ -47,12 +45,7 @@ import { IRouteRule } from "./Menu/types";
 import LoadingComponent from "../../common/LoadingComponent";
 import EditPool from "./Tenants/TenantDetails/Pools/EditPool/EditPool";
 import ComponentsScreen from "./Common/ComponentsScreen";
-import {
-  menuOpen,
-  serverIsLoading,
-  setServerNeedsRestart,
-  setSnackBarMessage,
-} from "../../systemSlice";
+import { menuOpen, setSnackBarMessage } from "../../systemSlice";
 import { selFeatures, selSession } from "./consoleSlice";
 
 const Hop = React.lazy(() => import("./Tenants/TenantDetails/hop/Hop"));
@@ -123,12 +116,6 @@ const Console = ({ classes }: IConsoleProps) => {
   const snackBarMessage = useSelector(
     (state: AppState) => state.system.snackBar
   );
-  const needsRestart = useSelector(
-    (state: AppState) => state.system.serverNeedsRestart
-  );
-  const isServerLoading = useSelector(
-    (state: AppState) => state.system.serverIsLoading
-  );
   const loadingProgress = useSelector(
     (state: AppState) => state.system.loadingProgress
   );
@@ -137,25 +124,6 @@ const Console = ({ classes }: IConsoleProps) => {
 
   const obOnly = !!features?.includes("object-browser-only");
 
-  const restartServer = () => {
-    dispatch(serverIsLoading(true));
-    api
-      .invoke("POST", "/api/v1/service/restart", {})
-      .then((res) => {
-        console.log("success restarting service");
-        dispatch(serverIsLoading(false));
-        dispatch(setServerNeedsRestart(false));
-      })
-      .catch((err: ErrorResponseHandler) => {
-        if (err.errorMessage === "Error 502") {
-          dispatch(setServerNeedsRestart(false));
-        }
-        dispatch(serverIsLoading(false));
-        console.log("failure restarting service");
-        console.error(err);
-      });
-  };
-
   // Layout effect to be executed after last re-render for resizing only
   useLayoutEffect(() => {
     // Debounce to not execute constantly
@@ -261,36 +229,12 @@ const Console = ({ classes }: IConsoleProps) => {
   }
 
   return (
-    <Fragment>
+    <MainContainer menu={!hideMenu ? <AppMenu /> : <Fragment />}>
       {session && session.status === "ok" ? (
         <div className={classes.root}>
           <CssBaseline />
-          {!hideMenu && <Menu />}
 
           <main className={classes.content}>
-            {needsRestart && (
-              <div className={classes.warningBar}>
-                {isServerLoading ? (
-                  <Fragment>
-                    The server is restarting.
-                    <LinearProgress className={classes.progress} />
-                  </Fragment>
-                ) : (
-                  <Fragment>
-                    The instance needs to be restarted for configuration changes
-                    to take effect.{" "}
-                    <Button
-                      id={"restart-server"}
-                      variant="secondary"
-                      onClick={() => {
-                        restartServer();
-                      }}
-                      label={"Restart"}
-                    />
-                  </Fragment>
-                )}
-              </div>
-            )}
             {loadingProgress < 100 && (
               <LinearProgress
                 className={classes.progress}
@@ -365,8 +309,10 @@ const Console = ({ classes }: IConsoleProps) => {
             </Routes>
           </main>
         </div>
-      ) : null}
-    </Fragment>
+      ) : (
+        <Fragment />
+      )}
+    </MainContainer>
   );
 };
 

web-app/src/screens/Console/Menu/AppMenu.tsx

@@ -0,0 +1,55 @@
+// This file is part of MinIO Operator
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 from "react";
+import { useSelector } from "react-redux";
+import { AppState, useAppDispatch } from "../../../store";
+import { validRoutes } from "../valid-routes";
+import { menuOpen } from "../../../systemSlice";
+import { getLogoVar } from "../../../config";
+import { Menu } from "mds";
+import { useLocation, useNavigate } from "react-router-dom";
+
+const AppMenu = () => {
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  let logoPlan = getLogoVar();
+
+  const sidebarOpen = useSelector(
+    (state: AppState) => state.system.sidebarOpen
+  );
+
+  const routes = validRoutes();
+
+  return (
+    <Menu
+      isOpen={sidebarOpen}
+      applicationLogo={{
+        applicationName: "operator",
+        subVariant: logoPlan,
+      }}
+      callPathAction={(path) => navigate(path)}
+      collapseAction={() => dispatch(menuOpen(!sidebarOpen))}
+      currentPath={pathname}
+      displayGroupTitles
+      options={routes}
+      signOutAction={() => navigate("/logout")}
+    />
+  );
+};
+
+export default AppMenu;