Disabled support tools if cluster is not registered.

- Redirect to register page when not register vars are set
- Added double column for register page

Signed-off-by: Benjamin Perez <[email protected]>

Author: Benjamin Perez

portal-ui/src/common/HelpBox.tsx

@@ -52,7 +52,7 @@ const styles = (theme: Theme) =>
 interface IHelpBox {
   classes: any;
   iconComponent: any;
-  title: string;
+  title: string | React.ReactNode;
   help: any;
 }
 

portal-ui/src/icons/ExtraFeaturesIcon.tsx

@@ -0,0 +1,48 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 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 * as React from "react";
+import { SVGProps } from "react";
+
+const AccountIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <path
+      d="M172.07,136.15c-5.91-7.02-8.83-14.66-6.34-24.08,1.2-4.53-1.18-8.5-5.24-10.85-6.26-3.64-9.79-8.84-10.93-16.01-.83-5.19-4.34-8.35-9.52-9.18-6.83-1.09-11.85-4.46-15.38-10.44-2.96-5.02-7.01-6.65-12.76-5.32-8.79,2.04-15.91-1.18-22.42-6.64h-6.88c-7.01,5.93-14.68,8.79-24.06,6.31-4.59-1.21-8.51,1.19-10.87,5.22-3.65,6.26-8.84,9.82-16.02,10.94-5.04,.79-8.27,4.15-9.1,9.1-1.22,7.31-4.86,12.57-11.29,16.27-3.89,2.24-6.09,6.23-4.94,10.58,2.49,9.4-.4,17.07-6.32,24.1v6.88c5.96,7.02,8.77,14.7,6.32,24.1-1.2,4.57,1.26,8.51,5.28,10.85,6.28,3.65,9.75,8.87,10.91,16.02,.84,5.19,4.39,8.31,9.56,9.15,6.81,1.11,11.9,4.44,15.35,10.48,2.41,4.23,6.39,6.8,11.11,5.57,9.42-2.45,17.06,.37,24.06,6.35h6.88c7.01-5.92,14.65-8.83,24.06-6.34,4.57,1.21,8.49-1.22,10.86-5.24,3.67-6.23,8.87-9.81,16.05-10.91,4.85-.74,8.2-3.91,8.99-8.69,1.25-7.64,4.99-13.07,11.71-16.96,3.68-2.12,5.75-6.14,4.61-10.33-2.56-9.4,.36-17.05,6.32-24.06v-6.88Zm-40.57,9.57h-39.33v39.48h-12.27v-39.48H40.57v-12.26h39.33v-39.48h12.27v39.48h39.33v12.26Z"
+      style={{ fill: "#07193e" }}
+    />
+    <g id="Grupo_2537" transform="translate(12.323 0)">
+      <g id="Elipse_623" transform="translate(-0.323 -0.249)">
+        <circle cx="179.04" cy="66.03" r="66.03" style={{ fill: "#4ccb92" }} />
+        <path
+          d="M179.05,132.07c-36.42,0-66.04-29.62-66.04-66.03S142.63,0,179.05,0s66.03,29.62,66.03,66.03-29.63,66.03-66.03,66.03Zm0-122.63c-31.21,0-56.61,25.39-56.61,56.6s25.39,56.6,56.61,56.6,56.6-25.39,56.6-56.6-25.39-56.6-56.6-56.6Z"
+          style={{ fill: "#fff" }}
+        />
+      </g>
+      <g id="check" transform="translate(2.934 4.069)">
+        <g id="Trazado_7261">
+          <path d="M197.68,42.49c2.27-2.32,5.99-2.35,8.3-.08s2.35,5.99,.08,8.3l-31.23,39.05c-2.19,2.39-5.9,2.54-8.29,.35-.07-.06-.13-.13-.2-.19l-20.7-20.71c-2.38-2.2-2.52-5.91-.32-8.29,2.2-2.38,5.91-2.52,8.29-.32,.11,.1,.22,.21,.32,.32l16.39,16.38,27.18-34.62,.16-.17h.02Z" />
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+export default AccountIcon;

portal-ui/src/icons/StarIcon.tsx

@@ -0,0 +1,33 @@
+// 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 * as React from "react";
+import { SVGProps } from "react";
+
+const StarIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <polygon points="118.6 2.54 154.49 75.25 234.74 86.91 176.67 143.52 190.38 223.44 118.6 185.71 46.82 223.44 60.53 143.52 2.46 86.91 82.71 75.25 118.6 2.54" />
+    <path d="M116.44,3.8l12.23,24.78L148,67.83c1.4,2.84,2.64,5.86,4.24,8.59.69,1.18,1.59,1.25,2.73,1.42l4.87.7,41.32,6,32.35,4.7.52.07L233,85.15l-19.79,19.29L181.83,135c-2.28,2.22-4.71,4.36-6.87,6.7-1,1.12-.73,2.31-.51,3.6l.84,4.93,7.06,41.15,5.53,32.22.08.51,3.68-2.82-24.46-12.86-38.75-20.37c-2.83-1.48-5.62-3.07-8.5-4.47-1.43-.69-2.4-.13-3.59.49l-4.42,2.33L75,205.83,46,221l-.47.24,3.67,2.82,4.67-27.23,7.4-43.15c.54-3.15,1.13-6.3,1.63-9.46.26-1.64-.46-2.34-1.44-3.3l-3.58-3.49L28,108.33,4.61,85.51l-.38-.36-1.1,4.17,27.35-4,43.31-6.29,6.44-.94c1-.15,2.06-.21,3-.44,1.26-.3,1.64-1.24,2.13-2.24L87.58,71l18.48-37.44L120.52,4.27l.24-.47a2.57,2.57,0,0,0-.9-3.42,2.52,2.52,0,0,0-3.42.89L104.31,25.84,85,65l-4.44,9,1.5-1.15L54.93,76.78,11.72,83.06,1.8,84.5c-1.92.28-2.33,3-1.11,4.18l19.62,19.13,31.27,30.48,7.18,7-.64-2.43-4.63,27-7.38,43-1.7,9.88a2.54,2.54,0,0,0,3.67,2.82l24.25-12.75L111,192.53l8.87-4.67h-2.52l24.25,12.75,38.65,20.32,8.87,4.67a2.54,2.54,0,0,0,3.68-2.82l-4.64-27-7.38-43-1.69-9.88-.65,2.43,19.62-19.12,31.28-30.48,7.17-7c1.23-1.19.81-3.9-1.1-4.18l-27.11-3.94-43.22-6.28-9.92-1.44,1.5,1.15L144.52,49.42,125.19,10.26l-4.43-9C119.33-1.61,115,.92,116.44,3.8Z" />
+  </svg>
+);
+
+export default StarIcon;

portal-ui/src/icons/index.ts

@@ -200,3 +200,5 @@ export { default as AGPLV3Logo } from "./AGPLV3Logo";
 export { default as EnterpriseLightLogo } from "./EnterpriseLightLogo";
 export { default as StandardLightLogo } from "./StandardLightLogo";
 export { default as AGPLV3DarkLogo } from "./AGPLV3DarkLogo";
+export { default as StarIcon } from "./StarIcon";
+export { default as ExtraFeaturesIcon } from "./ExtraFeaturesIcon";

portal-ui/src/screens/Console/Common/IconsScreen.tsx

@@ -457,6 +457,12 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {
           EventSubscriptionIcon
         </Grid>
 
+        <Grid item xs={3} sm={2} md={1}>
+          <cicons.ExtraFeaturesIcon />
+          <br />
+          ExtraFeaturesIcon
+        </Grid>
+
         <Grid item xs={3} sm={2} md={1}>
           <cicons.FileBookIcon />
           <br />
@@ -979,6 +985,12 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {
           SpeedtestIcon
         </Grid>
 
+        <Grid item xs={3} sm={2} md={1}>
+          <cicons.StarIcon />
+          <br />
+          StarIcon
+        </Grid>
+
         <Grid item xs={3} sm={2} md={1}>
           <cicons.StorageIcon />
           <br />

portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx

@@ -19,8 +19,9 @@ import {
   IMessageEvent,
   w3cwebsocket as W3CWebSocket,
 } from "websocket";
-import { AppState, useAppDispatch } from "../../../store";
 import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { AppState, useAppDispatch } from "../../../store";
 import {
   DiagStatError,
   DiagStatInProgress,
@@ -54,6 +55,7 @@ import {
   healthInfoMessageReceived,
   healthInfoResetMessage,
 } from "./healthInfoSlice";
+import RegisterCluster from "../Support/RegisterCluster";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -97,9 +99,17 @@ interface IHealthInfo {
 
 const HealthInfo = ({ classes }: IHealthInfo) => {
   const dispatch = useAppDispatch();
+  const navigate = useNavigate();
 
   const message = useSelector((state: AppState) => state.healthInfo.message);
 
+  const licenseInfo = useSelector(
+    (state: AppState) => state?.system?.licenseInfo
+  );
+
+  const { plan = "" } = licenseInfo || {};
+  const registeredCluster = plan === "STANDARD" || plan === "ENTERPRISE";
+
   const serverDiagnosticStatus = useSelector(
     (state: AppState) => state.system.serverDiagnosticStatus
   );
@@ -235,10 +245,19 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
     }
   }, [startDiagnostic, dispatch]);
 
+  const startDiagnosticAction = () => {
+    if (plan !== "STANDARD" && plan !== "ENTERPRISE") {
+      navigate("/support/register");
+      return;
+    }
+    setStartDiagnostic(true);
+  };
+
   return (
     <Fragment>
       <PageHeader label="Health" />
       <PageLayout>
+        {!registeredCluster && <RegisterCluster compactMode />}
         <Grid item xs={12} className={classes.boxy}>
           <TestWrapper title={title} advancedVisible={false}>
             <Grid container className={classes.buttons}>
@@ -251,10 +270,10 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
                 >
                   <Button
                     type="submit"
-                    variant="contained"
+                    variant={!registeredCluster ? "outlined" : "contained"}
                     color="primary"
                     disabled={startDiagnostic}
-                    onClick={() => setStartDiagnostic(true)}
+                    onClick={startDiagnosticAction}
                   >
                     Start Diagnostic
                   </Button>
@@ -289,10 +308,12 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
                         <Button
                           id="start-new-diagnostic"
                           type="submit"
-                          variant="contained"
+                          variant={
+                            !registeredCluster ? "outlined" : "contained"
+                          }
                           color="primary"
                           disabled={startDiagnostic}
-                          onClick={() => setStartDiagnostic(true)}
+                          onClick={startDiagnosticAction}
                         >
                           Start New Diagnostic
                         </Button>
@@ -304,7 +325,7 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
             </Grid>
           </TestWrapper>
         </Grid>
-        {!diagStarted && (
+        {!diagStarted && registeredCluster && (
           <Fragment>
             <br />
             <HelpBox