UX license logo on sidebar (#2037)

2022-05-27 23:23:36 +00:00
parent 2aa5081889
commit 35fdaf1ddd
9 changed files with 257 additions and 8 deletions
--- a/portal-ui/src/icons/ConsoleAgpl.tsx
+++ b/portal-ui/src/icons/ConsoleAgpl.tsx
--- a/portal-ui/src/icons/ConsoleEnterprise.tsx
+++ b/portal-ui/src/icons/ConsoleEnterprise.tsx
@@ -0,0 +1,46 @@
+// This file is part of MinIO Console Server
+// 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, { SVGProps } from "react";
+
+const ConsoleEnterprise = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      {...props}
+      className={`min-icon`}
+      fill={"currentcolor"}
+      xmlns="http://www.w3.org/2000/svg"
+      width="121.755"
+      height="28.546"
+      viewBox="0 0 121.755 28.546"
+    >
+      <g transform="translate(-1.655)">
+        <path
+          d="M12.537-8.4H4.594v-4.437h7.593v-1.612H4.594v-4.34H12.44v-1.6H2.886V-6.8h9.651ZM27.5-20.4H25.79V-9.725l-8.224-10.68H16.022V-6.8h1.709l.01-10.671,8.214,10.68H27.5Zm13.312,0H29.829v1.621H34.47V-6.8h1.709V-18.774h4.631ZM52.782-8.4H44.84v-4.437h7.593v-1.612H44.84v-4.34h7.845v-1.6H43.131V-6.8h9.651ZM56.268-20.4V-6.8h1.709v-5.865h1.592L64.239-6.8h2.117l-4.787-5.865h.107c2.913,0,4.748-1.515,4.748-3.874,0-2.476-1.689-3.855-4.758-3.855Zm5.36,1.6c1.971,0,3.02.748,3.02,2.253,0,1.524-1.019,2.321-3.02,2.321H57.977v-4.573ZM74.609-12.24c3.068,0,4.806-1.534,4.806-4.078S77.677-20.4,74.609-20.4H69.444V-6.8h1.709V-12.24Zm-.039-6.544c2.01,0,3.068.816,3.068,2.466s-1.058,2.466-3.068,2.466H71.153v-4.932ZM82.328-20.4V-6.8h1.709v-5.865h1.592L90.3-6.8h2.117l-4.787-5.865h.107c2.913,0,4.748-1.515,4.748-3.874,0-2.476-1.689-3.855-4.758-3.855Zm5.36,1.6c1.971,0,3.02.748,3.02,2.253,0,1.524-1.02,2.321-3.02,2.321H84.037v-4.573Zm9.525-1.6H95.5V-6.8h1.709ZM110.835-19.1a8.323,8.323,0,0,0-4.894-1.486c-2.864,0-5.195,1.466-5.195,4.088,0,2.321,1.787,3.359,4.029,3.631l1.262.155c2.117.262,3.253.864,3.253,2.126,0,1.534-1.592,2.359-3.622,2.359a7.261,7.261,0,0,1-4.428-1.5l-.932,1.359a8.808,8.808,0,0,0,5.36,1.767c2.942,0,5.4-1.418,5.4-4.127,0-2.4-1.971-3.33-4.272-3.612l-1.194-.146c-2.039-.252-3.078-.884-3.078-2.117,0-1.466,1.418-2.359,3.408-2.359a7.113,7.113,0,0,1,4.029,1.253ZM123.817-8.4h-7.942v-4.437h7.593v-1.612h-7.593v-4.34h7.845v-1.6h-9.554V-6.8h9.651Z"
+          transform="translate(-0.407 35.155)"
+          fill="#fff"
+        />
+        <path
+          d="M15.34.122H17.7V7.1H15.34Zm-2.865.1L7.68,3.147a.214.214,0,0,1-.223,0L2.662.218a.66.66,0,0,0-.344-.1H2.313a.659.659,0,0,0-.658.658V7.091H4.017v-3a.236.236,0,0,1,.36-.2L7.063,5.53a.841.841,0,0,0,.865.009l2.836-1.664a.239.239,0,0,1,.236,0,.234.234,0,0,1,.12.2V7.089h2.361V.778a.656.656,0,0,0-.657-.658h-.006a.656.656,0,0,0-.344.1Zm17.009-.1h-2.4V3.3a.234.234,0,0,1-.115.2.237.237,0,0,1-.232.006L20.531.2a.663.663,0,0,0-.309-.077h0a.659.659,0,0,0-.658.658V7.092h2.377V3.919a.236.236,0,0,1,.347-.208l6.235,3.307a.656.656,0,0,0,.308.077h0a.659.659,0,0,0,.658-.658ZM31.342,7.1V.122H32.43V7.1Zm7.485.125c-2.925,0-5-1.387-5-3.611S35.916,0,38.827,0,43.84,1.387,43.84,3.613s-2.05,3.611-5.012,3.611Zm0-6.3c-2.175,0-3.85.95-3.85,2.687S36.652,6.3,38.827,6.3s3.862-.937,3.862-2.687S41,.925,38.827.925Z"
+          transform="translate(0)"
+          fill="#fff"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default ConsoleEnterprise;
--- a/portal-ui/src/icons/ConsoleStandard.tsx
+++ b/portal-ui/src/icons/ConsoleStandard.tsx
@@ -0,0 +1,46 @@
+// This file is part of MinIO Console Server
+// 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, { SVGProps } from "react";
+
+const ConsoleStandard = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      {...props}
+      className={`min-icon`}
+      fill={"currentcolor"}
+      xmlns="http://www.w3.org/2000/svg"
+      width="113.208"
+      height="29.822"
+      viewBox="0 0 113.208 29.822"
+    >
+      <g transform="translate(-1.655)">
+        <path
+          d="M12.721-19.038A8.7,8.7,0,0,0,7.609-20.59c-2.992,0-5.427,1.532-5.427,4.27,0,2.424,1.866,3.51,4.209,3.794l1.319.162c2.211.274,3.4.9,3.4,2.221,0,1.6-1.664,2.465-3.783,2.465A7.586,7.586,0,0,1,2.7-9.25L1.726-7.83a9.2,9.2,0,0,0,5.6,1.846c3.073,0,5.64-1.481,5.64-4.311,0-2.505-2.059-3.479-4.463-3.773L7.254-14.22c-2.13-.264-3.215-.923-3.215-2.211,0-1.532,1.481-2.465,3.56-2.465a7.431,7.431,0,0,1,4.209,1.308Zm13.338-1.349H14.587v1.694h4.849V-6.187h1.785V-18.693h4.838Zm7.668,0H31.506l-5.772,14.2h1.856l1.552-3.875H36.03l1.562,3.875h1.917Zm-1.136,1.765,2.759,6.867H29.822Zm21.281-1.765H52.087V-9.24L43.5-20.4H41.883V-6.187h1.785l.01-11.147L52.259-6.176h1.613Zm4.047,0v14.2h5.417c4.585,0,7.526-2.779,7.526-7.1s-2.942-7.1-7.526-7.1Zm5.417,1.694c3.723,0,5.65,2.171,5.65,5.406,0,3.215-1.927,5.406-5.65,5.406H59.7V-18.693Zm16.686-1.694H77.8l-5.772,14.2h1.856l1.552-3.875h6.887l1.562,3.875H85.8Zm-1.136,1.765,2.759,6.867H76.117Zm9.291-1.765v14.2h1.785v-6.127h1.664L96.5-6.187h2.211l-5-6.127h.112c3.043,0,4.96-1.582,4.96-4.047,0-2.587-1.765-4.027-4.97-4.027Zm5.6,1.674c2.059,0,3.155.781,3.155,2.353,0,1.592-1.065,2.424-3.155,2.424H89.962v-4.777Zm8.165-1.674v14.2h5.417c4.585,0,7.526-2.779,7.526-7.1s-2.942-7.1-7.526-7.1Zm5.417,1.694c3.723,0,5.65,2.171,5.65,5.406,0,3.215-1.927,5.406-5.65,5.406h-3.631V-18.693Z"
+          transform="translate(-0.021 35.806)"
+          fill="#fff"
+        />
+        <path
+          d="M15.951.127h2.468V7.417H15.951Zm-2.993.1L7.949,3.288a.224.224,0,0,1-.233,0L2.707.228a.69.69,0,0,0-.359-.1H2.342a.688.688,0,0,0-.687.687V7.407H4.122V4.269a.247.247,0,0,1,.376-.21L7.305,5.777a.879.879,0,0,0,.9.009l2.963-1.738a.249.249,0,0,1,.246,0,.245.245,0,0,1,.125.212V7.406H14.01V.813a.686.686,0,0,0-.686-.687h-.006a.686.686,0,0,0-.359.1Zm17.769-.1h-2.5V3.445a.245.245,0,0,1-.12.211.248.248,0,0,1-.243.006L21.374.208a.693.693,0,0,0-.323-.08h0a.688.688,0,0,0-.687.687V7.409h2.483V4.094a.247.247,0,0,1,.362-.218L29.719,7.33a.686.686,0,0,0,.322.08h0a.688.688,0,0,0,.687-.687Zm1.941,7.289V.127h1.136V7.417Zm7.819.13c-3.056,0-5.223-1.449-5.223-3.773S37.447,0,40.488,0s5.236,1.449,5.236,3.774-2.141,3.773-5.236,3.773Zm0-6.58c-2.272,0-4.022.992-4.022,2.807s1.749,2.807,4.022,2.807,4.035-.979,4.035-2.807S42.761.967,40.488.967Z"
+          transform="translate(0)"
+          fill="#fff"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default ConsoleStandard;
--- a/portal-ui/src/icons/index.ts
+++ b/portal-ui/src/icons/index.ts
@@ -192,3 +192,6 @@ export { default as EditTagIcon } from "./EditTagIcon";
 export { default as LinkIcon } from "./LinkIcon";
 export { default as AlertIcon } from "./AlertIcon";
 export { default as InfoIcon } from "./InfoIcon";
+export { default as ConsoleAgpl } from "./ConsoleAgpl";
+export { default as ConsoleStandard } from "./ConsoleStandard";
+export { default as ConsoleEnterprise } from "./ConsoleEnterprise";
--- a/portal-ui/src/screens/Console/Common/Components/LicensedConsoleLogo.tsx
+++ b/portal-ui/src/screens/Console/Common/Components/LicensedConsoleLogo.tsx
@@ -0,0 +1,45 @@
+// This file is part of MinIO Console Server
+// 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 {
+  ConsoleAgpl,
+  ConsoleEnterprise,
+  ConsoleStandard,
+} from "../../../../icons";
+
+const LicensedConsoleLogo = ({
+  plan,
+  isLoading,
+}: {
+  plan: string;
+  isLoading: boolean;
+}) => {
+  let licenseLogo = null;
+  if (isLoading) {
+    return licenseLogo;
+  } else if (plan === "STANDARD") {
+    licenseLogo = <ConsoleStandard />;
+  } else if (plan === "ENTERPRISE") {
+    licenseLogo = <ConsoleEnterprise />;
+  } else {
+    licenseLogo = <ConsoleAgpl />;
+  }
+
+  return licenseLogo;
+};
+
+export default LicensedConsoleLogo;
--- a/portal-ui/src/screens/Console/Menu/Menu.tsx
+++ b/portal-ui/src/screens/Console/Menu/Menu.tsx
@@ -138,7 +138,6 @@ const Menu = ({ classes }: IMenuProps) => {
        onToggle={(nextState) => {
          dispatch(menuOpen(nextState));
        }}
-        isOperatorMode={operatorMode}
        isOpen={sidebarOpen}
      />

--- a/portal-ui/src/screens/Console/Menu/MenuToggle.tsx
+++ b/portal-ui/src/screens/Console/Menu/MenuToggle.tsx
@@ -14,22 +14,53 @@
 // 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, { Suspense } from "react";
+import React, { Suspense, useEffect } from "react";
 import OperatorLogo from "../../../icons/OperatorLogo";
-import ConsoleLogo from "../../../icons/ConsoleLogo";
 import { VersionIcon } from "../../../icons";
 import { Box, IconButton } from "@mui/material";
 import { ChevronLeft } from "@mui/icons-material";
 import MenuIcon from "@mui/icons-material/Menu";
+import LicensedConsoleLogo from "../Common/Components/LicensedConsoleLogo";
+import { useDispatch, useSelector } from "react-redux";
+import useApi from "../Common/Hooks/useApi";
+import { setLicenseInfo } from "../../../systemSlice";
+import { AppState } from "../../../store";

 type MenuToggleProps = {
  isOpen: boolean;
-  isOperatorMode: boolean;
  onToggle: (nextState: boolean) => void;
 };
-const MenuToggle = ({ isOpen, isOperatorMode, onToggle }: MenuToggleProps) => {
+const MenuToggle = ({ isOpen, onToggle }: MenuToggleProps) => {
  const stateClsName = isOpen ? "wide" : "mini";

+  const dispatch = useDispatch();
+
+  const licenseInfo = useSelector(
+    (state: AppState) => state?.system?.licenseInfo
+  );
+  const operatorMode = useSelector(
+    (state: AppState) => state.system.operatorMode
+  );
+
+  const [isLicenseLoading, invokeLicenseInfoApi] = useApi(
+    (res: any) => {
+      dispatch(setLicenseInfo(res));
+    },
+    () => {
+      dispatch(setLicenseInfo(null));
+    }
+  );
+
+  //Get License info from SUBNET
+  useEffect(() => {
+    if (!operatorMode) {
+      invokeLicenseInfoApi("GET", `/api/v1/subnet/info`);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const { plan = "" } = licenseInfo || {};
+
  return (
    <Box
      className={`${stateClsName}`}
@@ -38,7 +69,7 @@ const MenuToggle = ({ isOpen, isOperatorMode, onToggle }: MenuToggleProps) => {
        marginTop: "28px",
        marginRight: "8px",
        display: "flex",
-        minHeight: "36px",
+        height: "36px",

        "&.mini": {
          flexFlow: "column",
@@ -69,7 +100,11 @@ const MenuToggle = ({ isOpen, isOperatorMode, onToggle }: MenuToggleProps) => {
    >
      {isOpen ? (
        <div className={`logo ${stateClsName}`}>
-          {isOperatorMode ? <OperatorLogo /> : <ConsoleLogo />}
+          {operatorMode ? (
+            <OperatorLogo />
+          ) : (
+            <LicensedConsoleLogo plan={plan} isLoading={isLicenseLoading} />
+          )}
        </div>
      ) : (
        <div className={`logo ${stateClsName}`}>
@@ -82,6 +117,8 @@ const MenuToggle = ({ isOpen, isOperatorMode, onToggle }: MenuToggleProps) => {
      <IconButton
        className={`${stateClsName}`}
        sx={{
+          height: "30px",
+          width: "30px",
          "&.mini": {
            marginBottom: "10px",
            "&:hover": {
@@ -95,6 +132,8 @@ const MenuToggle = ({ isOpen, isOperatorMode, onToggle }: MenuToggleProps) => {
          },
          "& svg": {
            fill: "#ffffff",
+            height: "18px",
+            width: "18px",
          },
        }}
        onClick={() => {
--- a/portal-ui/src/systemSlice.ts
+++ b/portal-ui/src/systemSlice.ts
@@ -17,6 +17,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { snackBarMessage, SRInfoStateType } from "./types";
 import { ErrorResponseHandler } from "./common/types";
 import { AppState } from "./store";
+import { SubnetInfo } from "./screens/Console/License/types";

 // determine whether we have the sidebar state stored on localstorage
 const initSideBarOpen = localStorage.getItem("sidebarOpen")
@@ -38,6 +39,7 @@ export interface SystemState {
  serverDiagnosticStatus: string;
  distributedSetup: boolean;
  siteReplicationInfo: SRInfoStateType;
+  licenseInfo: null | SubnetInfo;
 }

 const initialState: SystemState = {
@@ -63,6 +65,7 @@ const initialState: SystemState = {
  },
  serverDiagnosticStatus: "",
  distributedSetup: false,
+  licenseInfo: null,
 };

 export const systemSlice = createSlice({
@@ -135,6 +138,9 @@ export const systemSlice = createSlice({
    setSiteReplicationInfo: (state, action: PayloadAction<SRInfoStateType>) => {
      state.siteReplicationInfo = action.payload;
    },
+    setLicenseInfo: (state, action: PayloadAction<SubnetInfo | null>) => {
+      state.licenseInfo = action.payload;
+    },
  },
 });

@@ -153,6 +159,7 @@ export const {
  setServerDiagStat,
  globalSetDistributedSetup,
  setSiteReplicationInfo,
+  setLicenseInfo,
 } = systemSlice.actions;

 export const selDistSet = (state: AppState) => state.system.distributedSetup;
--- a/portal-ui/src/types.ts
+++ b/portal-ui/src/types.ts
@@ -14,6 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License

 import { ErrorResponseHandler } from "./common/types";
+import { SubnetInfo } from "./screens/Console/License/types";

 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 export interface snackBarMessage {
@@ -57,6 +58,7 @@ export const SET_SNACK_MODAL_MESSAGE = "SET_SNACK_MODAL_MESSAGE";
 export const SET_MODAL_ERROR_MESSAGE = "SET_MODAL_ERROR_MESSAGE";
 export const GLOBAL_SET_DISTRIBUTED_SETUP = "GLOBAL/SET_DISTRIBUTED_SETUP";
 export const SET_SITE_REPLICATION_INFO = "SET_SITE_REPLICATION_INFO";
+export const SET_LICENSE_INFO = "SET_LICENSE_INFO";

 interface UserLoggedAction {
  type: typeof USER_LOGGED;
@@ -123,6 +125,11 @@ interface SetSiteReplicationInfo {
  siteReplicationInfo: SRInfoStateType;
 }

+interface SetLicenseInfo {
+  type: typeof SET_LICENSE_INFO;
+  licenseInfo: SubnetInfo;
+}
+
 export type SystemActionTypes =
  | UserLoggedAction
  | OperatorModeAction
@@ -136,4 +143,5 @@ export type SystemActionTypes =
  | SetModalSnackMessage
  | SetModalErrorMessage
  | SetDistributedSetup
-  | SetSiteReplicationInfo;
+  | SetSiteReplicationInfo
+  | SetLicenseInfo;