Disabled support tools if cluster is not registered. (#2168)

- Redirect to register page when not register vars are set - Added double column for register page Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
2022-10-28 15:04:30 -05:00
parent e5e053a2ad
commit a2745c687e
16 changed files with 384 additions and 38 deletions
--- a/portal-ui/Makefile
+++ b/portal-ui/Makefile
@@ -13,3 +13,5 @@ test-prettier:

 prettify:
 	yarn prettier --write . --loglevel warn
+
+pretty: prettify
--- a/portal-ui/src/common/HelpBox.tsx
+++ b/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;
 }

--- a/portal-ui/src/icons/ExtraFeaturesIcon.tsx
+++ b/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;
--- a/portal-ui/src/icons/StarIcon.tsx
+++ b/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;
--- a/portal-ui/src/icons/index.ts
+++ b/portal-ui/src/icons/index.ts
@@ -202,3 +202,5 @@ export { default as StandardLightLogo } from "./StandardLightLogo";
 export { default as AGPLV3DarkLogo } from "./AGPLV3DarkLogo";
 export { default as LDAPIcon } from "./LDAPIcon";
 export { default as OIDCIcon } from "./OIDCIcon";
+export { default as StarIcon } from "./StarIcon";
+export { default as ExtraFeaturesIcon } from "./ExtraFeaturesIcon";
--- a/portal-ui/src/screens/Console/Common/IconsScreen.tsx
+++ b/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 />
--- a/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
+++ b/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
@@ -22,6 +22,7 @@ import {
 } from "websocket";
 import { AppState, useAppDispatch } from "../../../store";
 import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
 import { Button } from "mds";
 import {
  DiagStatError,
@@ -56,6 +57,7 @@ import {
  healthInfoMessageReceived,
  healthInfoResetMessage,
 } from "./healthInfoSlice";
+import RegisterCluster from "../Support/RegisterCluster";

 const styles = (theme: Theme) =>
  createStyles({
@@ -100,9 +102,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
  );
@@ -249,10 +259,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}>
@@ -290,9 +309,9 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
                      <Button
                        id="start-new-diagnostic"
                        type="submit"
-                        variant="callAction"
+                        variant={!registeredCluster ? "regular" : "callAction"}
                        disabled={startDiagnostic}
-                        onClick={() => setStartDiagnostic(true)}
+                        onClick={startDiagnosticAction}
                        label={buttonStartText}
                      />
                    </Grid>
@@ -302,7 +321,7 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
            </Grid>
          </TestWrapper>
        </Grid>
-        {!startDiagnostic && (
+        {!startDiagnostic && registeredCluster && (
          <Fragment>
            <br />
            <HelpBox
--- a/portal-ui/src/screens/Console/Menu/MenuItem.tsx
+++ b/portal-ui/src/screens/Console/Menu/MenuItem.tsx
@@ -241,6 +241,7 @@ const MenuItem = ({
                        <Suspense fallback={<div>...</div>}>
                          <item.icon />
                        </Suspense>
+                        {item.badge ? <item.badge /> : null}
                      </ListItemIcon>
                    </Tooltip>
                  )}
--- a/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
+++ b/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
@@ -19,6 +19,8 @@ import { useSelector } from "react-redux";
 import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
 import { Grid } from "@mui/material";
 import { Theme } from "@mui/material/styles";
+import { useNavigate } from "react-router-dom";
+import { AppState } from "../../../store";
 import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import moment from "moment/moment";
@@ -49,6 +51,7 @@ import WarnIcon from "../../../icons/WarnIcon";
 import Loader from "../Common/Loader/Loader";
 import { selDistSet } from "../../../systemSlice";
 import makeStyles from "@mui/styles/makeStyles";
+import RegisterCluster from "../Support/RegisterCluster";

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -80,6 +83,14 @@ const useStyles = makeStyles((theme: Theme) =>

 const Speedtest = () => {
  const distributedSetup = useSelector(selDistSet);
+  const licenseInfo = useSelector(
+    (state: AppState) => state?.system?.licenseInfo
+  );
+  const navigate = useNavigate();
+
+  const { plan = "" } = licenseInfo || {};
+  const registeredCluster = plan === "STANDARD" || plan === "ENTERPRISE";
+
  const classes = useStyles();
  const [start, setStart] = useState<boolean>(false);

@@ -187,10 +198,21 @@ const Speedtest = () => {

  const buttonLabel = start ? "Start" : stoppedLabel;

+  const startSpeedtestButton = () => {
+    if (plan !== "STANDARD" && plan !== "ENTERPRISE") {
+      navigate("/support/register");
+      return;
+    }
+
+    setCurrStatus(null);
+    setStart(true);
+  };
+
  return (
    <Fragment>
      <PageHeader label="Performance" />
      <PageLayout>
+        {!registeredCluster && <RegisterCluster compactMode />}
        {!distributedSetup ? (
          <DistributedOnly
            iconComponent={<SpeedtestIcon />}
@@ -286,15 +308,14 @@ const Speedtest = () => {
                </Grid>
                <Grid item md={1} sm={12} textAlign={"right"}>
                  <Button
-                    onClick={() => {
-                      setCurrStatus(null);
-                      setStart(true);
-                    }}
+                    onClick={startSpeedtestButton}
                    color="primary"
                    type="button"
                    id={"start-speed-test"}
                    variant={
-                      currStatus !== null && !start ? "callAction" : "regular"
+                      registeredCluster && currStatus !== null && !start
+                        ? "callAction"
+                        : "regular"
                    }
                    className={`${classes.buttonBackground} ${classes.speedStart}`}
                    disabled={
@@ -319,7 +340,7 @@ const Speedtest = () => {
              </Grid>
            </Grid>

-            {!start && !currStatus && (
+            {!start && !currStatus && registeredCluster && (
              <Fragment>
                <br />
                <HelpBox
--- a/portal-ui/src/screens/Console/Support/Profile.tsx
+++ b/portal-ui/src/screens/Console/Support/Profile.tsx
@@ -14,6 +14,10 @@ import {
  containerForHeader,
  inlineCheckboxes,
 } from "../Common/FormComponents/common/styleLibrary";
+import { useSelector } from "react-redux";
+import { AppState } from "../../../store";
+import { useNavigate } from "react-router-dom";
+import RegisterCluster from "./RegisterCluster";

 const styles = (theme: Theme) =>
  createStyles({
@@ -57,6 +61,14 @@ interface IProfileProps {
 var c: any = null;

 const Profile = ({ classes }: IProfileProps) => {
+  const licenseInfo = useSelector(
+    (state: AppState) => state?.system?.licenseInfo
+  );
+  const navigate = useNavigate();
+
+  const { plan = "" } = licenseInfo || {};
+  const registeredCluster = plan === "STANDARD" || plan === "ENTERPRISE";
+
  const [profilingStarted, setProfilingStarted] = useState<boolean>(false);
  const [types, setTypes] = useState<string[]>([
    "cpu",
@@ -138,6 +150,7 @@ const Profile = ({ classes }: IProfileProps) => {
    <Fragment>
      <PageHeader label="Profile" />
      <PageLayout>
+        {!registeredCluster && <RegisterCluster compactMode />}
        <Grid item xs={12} className={classes.boxy}>
          <Grid item xs={12} className={classes.dropdown}>
            <Grid
@@ -166,9 +179,13 @@ const Profile = ({ classes }: IProfileProps) => {
            <Button
              id={"start-profiling"}
              type="submit"
-              variant="callAction"
+              variant={registeredCluster ? "callAction" : "regular"}
              disabled={profilingStarted || types.length < 1}
              onClick={() => {
+                if (!registeredCluster) {
+                  navigate("/support/register");
+                  return;
+                }
                startProfiling();
              }}
              label={"Start Profiling"}
--- a/portal-ui/src/screens/Console/Support/RegisterCluster.tsx
+++ b/portal-ui/src/screens/Console/Support/RegisterCluster.tsx
@@ -0,0 +1,156 @@
+// 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 React, { Fragment } from "react";
+import Grid from "@mui/material/Grid";
+import { Box, Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import WarnIcon from "../../../icons/WarnIcon";
+import HelpBox from "../../../common/HelpBox";
+
+interface IRegisterCluster {
+  compactMode?: boolean;
+}
+
+const RegisterCluster = ({ compactMode = false }: IRegisterCluster) => {
+  const navigate = useNavigate();
+
+  const redirectButton = (
+    <Button
+      type="submit"
+      variant="contained"
+      color="primary"
+      onClick={() => navigate("/support/register")}
+    >
+      Register your Cluster
+    </Button>
+  );
+
+  const registerMessage =
+    "Use your MinIO Subscription Network login credentials to register this cluster.";
+
+  if (compactMode) {
+    return (
+      <Fragment>
+        <HelpBox
+          title={
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                flexGrow: 1,
+              }}
+            >
+              <span>{registerMessage}</span> {redirectButton}
+            </div>
+          }
+          iconComponent={<WarnIcon />}
+          help={<Fragment />}
+        />
+        <br />
+      </Fragment>
+    );
+  }
+
+  return (
+    <Box
+      sx={{
+        padding: "25px",
+        border: "1px solid #eaeaea",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexFlow: {
+          sm: "row",
+          xs: "column",
+        },
+        marginBottom: "15px",
+      }}
+    >
+      <Grid container>
+        <Grid item xs={12}>
+          <Box
+            sx={{
+              marginRight: "8px",
+              fontSize: "16px",
+              fontWeight: 600,
+              display: "flex",
+              alignItems: "center",
+
+              "& .min-icon": {
+                width: "83px",
+                height: "14px",
+                marginLeft: "5px",
+                marginRight: "5px",
+              },
+            }}
+          >
+            Register your cluster
+          </Box>
+        </Grid>
+        <Grid item xs={12}>
+          <Box
+            sx={{
+              display: "flex",
+              flexFlow: {
+                xs: "column",
+                md: "row",
+              },
+            }}
+          >
+            <Box
+              sx={{
+                display: "flex",
+                flexFlow: "column",
+                flex: "2",
+              }}
+            >
+              <Box
+                sx={{
+                  fontSize: "16px",
+                  display: "flex",
+                  flexFlow: "column",
+                  marginTop: "15px",
+                  marginBottom: "15px",
+                }}
+              >
+                {registerMessage}
+              </Box>
+              <Box
+                sx={{
+                  flex: "1",
+                }}
+              >
+                <Box
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "flex-end",
+                  }}
+                >
+                  {redirectButton}
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default RegisterCluster;
--- a/portal-ui/src/screens/Console/Support/RegisterHelpBox.tsx
+++ b/portal-ui/src/screens/Console/Support/RegisterHelpBox.tsx
@@ -1,18 +1,35 @@
-import { Box } from "@mui/material";
+// 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 { Box, Link } from "@mui/material";
 import {
  CallHomeFeatureIcon,
  DiagnosticsFeatureIcon,
+  ExtraFeaturesIcon,
  HelpIconFilled,
  PerformanceFeatureIcon,
 } from "../../../icons";
-import React from "react";

 const FeatureItem = ({
  icon,
  description,
 }: {
  icon: any;
-  description: string;
+  description: string | React.ReactNode;
 }) => {
  return (
    <Box
@@ -96,6 +113,21 @@ const RegisterHelpBox = ({ hasMargin = true }: { hasMargin?: boolean }) => {
          icon={<PerformanceFeatureIcon />}
          description={`Performance Analysis`}
        />
+        <FeatureItem
+          icon={<ExtraFeaturesIcon />}
+          description={
+            <Link
+              href="https://min.io/signup?ref=con"
+              target="_blank"
+              sx={{
+                color: "#2781B0",
+                cursor: "pointer",
+              }}
+            >
+              More Features
+            </Link>
+          }
+        />
      </Box>
    </Box>
  );
--- a/portal-ui/src/screens/Console/Tools/Inspect.tsx
+++ b/portal-ui/src/screens/Console/Tools/Inspect.tsx
@@ -17,6 +17,7 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { Box, DialogContentText } from "@mui/material";
 import { Button } from "mds";
+import { useNavigate } from "react-router-dom";
 import PageHeader from "../Common/PageHeader/PageHeader";
 import PageLayout from "../Common/Layout/PageLayout";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
@@ -42,7 +43,8 @@ import DistributedOnly from "../Common/DistributedOnly/DistributedOnly";
 import { InspectMenuIcon } from "../../../icons/SidebarMenus";
 import KeyRevealer from "./KeyRevealer";
 import { selDistSet, setErrorSnackMessage } from "../../../systemSlice";
-import { useAppDispatch } from "../../../store";
+import { AppState, useAppDispatch } from "../../../store";
+import RegisterCluster from "../Support/RegisterCluster";

 const styles = (theme: Theme) =>
  createStyles({
@@ -94,7 +96,15 @@ const ExampleBlock = ({

 const Inspect = ({ classes }: { classes: any }) => {
  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
  const distributedSetup = useSelector(selDistSet);
+  const licenseInfo = useSelector(
+    (state: AppState) => state?.system?.licenseInfo
+  );
+
+  const { plan = "" } = licenseInfo || {};
+  const registeredCluster = plan === "STANDARD" || plan === "ENTERPRISE";
+
  const [volumeName, setVolumeName] = useState<string>("");
  const [inspectPath, setInspectPath] = useState<string>("");
  const [isEncrypt, setIsEncrypt] = useState<boolean>(true);
@@ -193,6 +203,7 @@ const Inspect = ({ classes }: { classes: any }) => {
    <Fragment>
      <PageHeader label={"Inspect"} />
      <PageLayout>
+        {!registeredCluster && <RegisterCluster compactMode />}
        {!distributedSetup ? (
          <DistributedOnly
            iconComponent={<InspectMenuIcon />}
@@ -246,6 +257,10 @@ const Inspect = ({ classes }: { classes: any }) => {
                autoComplete="off"
                onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
                  e.preventDefault();
+                  if (plan !== "STANDARD" && plan !== "ENTERPRISE") {
+                    navigate("/support/register");
+                    return;
+                  }
                  performInspect();
                }}
              >
@@ -332,7 +347,7 @@ const Inspect = ({ classes }: { classes: any }) => {
                  <Button
                    id={"inspect-start"}
                    type="submit"
-                    variant="callAction"
+                    variant={!registeredCluster ? "regular" : "callAction"}
                    data-test-id="inspect-submit-button"
                    disabled={!isFormValid}
                    label={"Inspect"}
--- a/portal-ui/src/screens/Console/valid-routes.ts
+++ b/portal-ui/src/screens/Console/valid-routes.ts
@@ -38,13 +38,13 @@ import {
  MonitoringMenuIcon,
  PerformanceMenuIcon,
  ProfileMenuIcon,
+  RegisterMenuIcon,
  SupportMenuIcon,
  TraceMenuIcon,
  UsersMenuIcon,
 } from "../../icons/SidebarMenus";
 import { hasPermission } from "../../common/SecureComponent";
 import WatchIcon from "../../icons/WatchIcon";
-import RegisterMenuIcon from "../../icons/SidebarMenus/RegisterMenuIcon";
 import {
  ClustersIcon,
  DocumentationIcon,
@@ -194,18 +194,20 @@ export const validRoutes = (
      id: "configurations",
      icon: SettingsIcon,
    },
+    {
+      component: NavLink,
+      to: IAM_PAGES.LICENSE,
+      name: "License",
+      id: "license",
+      icon: LicenseIcon,
+      badge: LicenseBadge,
+      forceDisplay: true,
+    },
    {
      name: "Support",
      id: "support",
      icon: SupportMenuIcon,
      children: [
-        {
-          name: "Register",
-          id: "register",
-          component: NavLink,
-          icon: RegisterMenuIcon,
-          to: IAM_PAGES.REGISTER_SUPPORT,
-        },
        {
          name: "Health",
          id: "diagnostics",
@@ -244,15 +246,6 @@ export const validRoutes = (
        },
      ],
    },
-    {
-      component: NavLink,
-      to: IAM_PAGES.LICENSE,
-      name: "License",
-      id: "license",
-      icon: LicenseIcon,
-      badge: LicenseBadge,
-      forceDisplay: true,
-    },
    {
      type: "item",
      component: NavLink,
--- a/portal-ui/tests/permissions-3/admin.ts
+++ b/portal-ui/tests/permissions-3/admin.ts
@@ -64,8 +64,6 @@ test("All sidebar items exist", async (t) => {
    .expect(supportElement.exists)
    .ok()
    .click(supportElement)
-    .expect(elements.registerElement.exists)
-    .ok()
    .expect(elements.diagnosticsElement.exists)
    .ok()
    .expect(elements.performanceElement.exists)
--- a/portal-ui/tests/utils/elements-menu.ts
+++ b/portal-ui/tests/utils/elements-menu.ts
@@ -83,9 +83,6 @@ export const supportElement = Selector(".MuiPaper-root")
  .child("#support");
 export const supportChildren = Selector("#support-children");

-export const registerElement = supportChildren
-  .find("a")
-  .withAttribute("href", "/support/register");
 export const diagnosticsElement = supportChildren
  .find("a")
  .withAttribute("href", "/support/diagnostics");