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>
This commit is contained in:
@@ -13,3 +13,5 @@ test-prettier:
|
|||||||
|
|
||||||
prettify:
|
prettify:
|
||||||
yarn prettier --write . --loglevel warn
|
yarn prettier --write . --loglevel warn
|
||||||
|
|
||||||
|
pretty: prettify
|
||||||
|
|||||||
@@ -52,7 +52,7 @@ const styles = (theme: Theme) =>
|
|||||||
interface IHelpBox {
|
interface IHelpBox {
|
||||||
classes: any;
|
classes: any;
|
||||||
iconComponent: any;
|
iconComponent: any;
|
||||||
title: string;
|
title: string | React.ReactNode;
|
||||||
help: any;
|
help: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
48
portal-ui/src/icons/ExtraFeaturesIcon.tsx
Normal file
48
portal-ui/src/icons/ExtraFeaturesIcon.tsx
Normal file
@@ -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;
|
||||||
33
portal-ui/src/icons/StarIcon.tsx
Normal file
33
portal-ui/src/icons/StarIcon.tsx
Normal file
@@ -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;
|
||||||
@@ -202,3 +202,5 @@ export { default as StandardLightLogo } from "./StandardLightLogo";
|
|||||||
export { default as AGPLV3DarkLogo } from "./AGPLV3DarkLogo";
|
export { default as AGPLV3DarkLogo } from "./AGPLV3DarkLogo";
|
||||||
export { default as LDAPIcon } from "./LDAPIcon";
|
export { default as LDAPIcon } from "./LDAPIcon";
|
||||||
export { default as OIDCIcon } from "./OIDCIcon";
|
export { default as OIDCIcon } from "./OIDCIcon";
|
||||||
|
export { default as StarIcon } from "./StarIcon";
|
||||||
|
export { default as ExtraFeaturesIcon } from "./ExtraFeaturesIcon";
|
||||||
|
|||||||
@@ -457,6 +457,12 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {
|
|||||||
EventSubscriptionIcon
|
EventSubscriptionIcon
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={3} sm={2} md={1}>
|
||||||
|
<cicons.ExtraFeaturesIcon />
|
||||||
|
<br />
|
||||||
|
ExtraFeaturesIcon
|
||||||
|
</Grid>
|
||||||
|
|
||||||
<Grid item xs={3} sm={2} md={1}>
|
<Grid item xs={3} sm={2} md={1}>
|
||||||
<cicons.FileBookIcon />
|
<cicons.FileBookIcon />
|
||||||
<br />
|
<br />
|
||||||
@@ -979,6 +985,12 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {
|
|||||||
SpeedtestIcon
|
SpeedtestIcon
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={3} sm={2} md={1}>
|
||||||
|
<cicons.StarIcon />
|
||||||
|
<br />
|
||||||
|
StarIcon
|
||||||
|
</Grid>
|
||||||
|
|
||||||
<Grid item xs={3} sm={2} md={1}>
|
<Grid item xs={3} sm={2} md={1}>
|
||||||
<cicons.StorageIcon />
|
<cicons.StorageIcon />
|
||||||
<br />
|
<br />
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ import {
|
|||||||
} from "websocket";
|
} from "websocket";
|
||||||
import { AppState, useAppDispatch } from "../../../store";
|
import { AppState, useAppDispatch } from "../../../store";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
import { Button } from "mds";
|
import { Button } from "mds";
|
||||||
import {
|
import {
|
||||||
DiagStatError,
|
DiagStatError,
|
||||||
@@ -56,6 +57,7 @@ import {
|
|||||||
healthInfoMessageReceived,
|
healthInfoMessageReceived,
|
||||||
healthInfoResetMessage,
|
healthInfoResetMessage,
|
||||||
} from "./healthInfoSlice";
|
} from "./healthInfoSlice";
|
||||||
|
import RegisterCluster from "../Support/RegisterCluster";
|
||||||
|
|
||||||
const styles = (theme: Theme) =>
|
const styles = (theme: Theme) =>
|
||||||
createStyles({
|
createStyles({
|
||||||
@@ -100,9 +102,17 @@ interface IHealthInfo {
|
|||||||
|
|
||||||
const HealthInfo = ({ classes }: IHealthInfo) => {
|
const HealthInfo = ({ classes }: IHealthInfo) => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const message = useSelector((state: AppState) => state.healthInfo.message);
|
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(
|
const serverDiagnosticStatus = useSelector(
|
||||||
(state: AppState) => state.system.serverDiagnosticStatus
|
(state: AppState) => state.system.serverDiagnosticStatus
|
||||||
);
|
);
|
||||||
@@ -249,10 +259,19 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
|
|||||||
}
|
}
|
||||||
}, [startDiagnostic, dispatch]);
|
}, [startDiagnostic, dispatch]);
|
||||||
|
|
||||||
|
const startDiagnosticAction = () => {
|
||||||
|
if (plan !== "STANDARD" && plan !== "ENTERPRISE") {
|
||||||
|
navigate("/support/register");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setStartDiagnostic(true);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<PageHeader label="Health" />
|
<PageHeader label="Health" />
|
||||||
<PageLayout>
|
<PageLayout>
|
||||||
|
{!registeredCluster && <RegisterCluster compactMode />}
|
||||||
<Grid item xs={12} className={classes.boxy}>
|
<Grid item xs={12} className={classes.boxy}>
|
||||||
<TestWrapper title={title} advancedVisible={false}>
|
<TestWrapper title={title} advancedVisible={false}>
|
||||||
<Grid container className={classes.buttons}>
|
<Grid container className={classes.buttons}>
|
||||||
@@ -290,9 +309,9 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
|
|||||||
<Button
|
<Button
|
||||||
id="start-new-diagnostic"
|
id="start-new-diagnostic"
|
||||||
type="submit"
|
type="submit"
|
||||||
variant="callAction"
|
variant={!registeredCluster ? "regular" : "callAction"}
|
||||||
disabled={startDiagnostic}
|
disabled={startDiagnostic}
|
||||||
onClick={() => setStartDiagnostic(true)}
|
onClick={startDiagnosticAction}
|
||||||
label={buttonStartText}
|
label={buttonStartText}
|
||||||
/>
|
/>
|
||||||
</Grid>
|
</Grid>
|
||||||
@@ -302,7 +321,7 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
|
|||||||
</Grid>
|
</Grid>
|
||||||
</TestWrapper>
|
</TestWrapper>
|
||||||
</Grid>
|
</Grid>
|
||||||
{!startDiagnostic && (
|
{!startDiagnostic && registeredCluster && (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<br />
|
<br />
|
||||||
<HelpBox
|
<HelpBox
|
||||||
|
|||||||
@@ -241,6 +241,7 @@ const MenuItem = ({
|
|||||||
<Suspense fallback={<div>...</div>}>
|
<Suspense fallback={<div>...</div>}>
|
||||||
<item.icon />
|
<item.icon />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
{item.badge ? <item.badge /> : null}
|
||||||
</ListItemIcon>
|
</ListItemIcon>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -19,6 +19,8 @@ import { useSelector } from "react-redux";
|
|||||||
import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
|
import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
|
||||||
import { Grid } from "@mui/material";
|
import { Grid } from "@mui/material";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { AppState } from "../../../store";
|
||||||
import { Button } from "mds";
|
import { Button } from "mds";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
import createStyles from "@mui/styles/createStyles";
|
||||||
import moment from "moment/moment";
|
import moment from "moment/moment";
|
||||||
@@ -49,6 +51,7 @@ import WarnIcon from "../../../icons/WarnIcon";
|
|||||||
import Loader from "../Common/Loader/Loader";
|
import Loader from "../Common/Loader/Loader";
|
||||||
import { selDistSet } from "../../../systemSlice";
|
import { selDistSet } from "../../../systemSlice";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import makeStyles from "@mui/styles/makeStyles";
|
||||||
|
import RegisterCluster from "../Support/RegisterCluster";
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles((theme: Theme) =>
|
||||||
createStyles({
|
createStyles({
|
||||||
@@ -80,6 +83,14 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
|
|
||||||
const Speedtest = () => {
|
const Speedtest = () => {
|
||||||
const distributedSetup = useSelector(selDistSet);
|
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 classes = useStyles();
|
||||||
const [start, setStart] = useState<boolean>(false);
|
const [start, setStart] = useState<boolean>(false);
|
||||||
|
|
||||||
@@ -187,10 +198,21 @@ const Speedtest = () => {
|
|||||||
|
|
||||||
const buttonLabel = start ? "Start" : stoppedLabel;
|
const buttonLabel = start ? "Start" : stoppedLabel;
|
||||||
|
|
||||||
|
const startSpeedtestButton = () => {
|
||||||
|
if (plan !== "STANDARD" && plan !== "ENTERPRISE") {
|
||||||
|
navigate("/support/register");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setCurrStatus(null);
|
||||||
|
setStart(true);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<PageHeader label="Performance" />
|
<PageHeader label="Performance" />
|
||||||
<PageLayout>
|
<PageLayout>
|
||||||
|
{!registeredCluster && <RegisterCluster compactMode />}
|
||||||
{!distributedSetup ? (
|
{!distributedSetup ? (
|
||||||
<DistributedOnly
|
<DistributedOnly
|
||||||
iconComponent={<SpeedtestIcon />}
|
iconComponent={<SpeedtestIcon />}
|
||||||
@@ -286,15 +308,14 @@ const Speedtest = () => {
|
|||||||
</Grid>
|
</Grid>
|
||||||
<Grid item md={1} sm={12} textAlign={"right"}>
|
<Grid item md={1} sm={12} textAlign={"right"}>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => {
|
onClick={startSpeedtestButton}
|
||||||
setCurrStatus(null);
|
|
||||||
setStart(true);
|
|
||||||
}}
|
|
||||||
color="primary"
|
color="primary"
|
||||||
type="button"
|
type="button"
|
||||||
id={"start-speed-test"}
|
id={"start-speed-test"}
|
||||||
variant={
|
variant={
|
||||||
currStatus !== null && !start ? "callAction" : "regular"
|
registeredCluster && currStatus !== null && !start
|
||||||
|
? "callAction"
|
||||||
|
: "regular"
|
||||||
}
|
}
|
||||||
className={`${classes.buttonBackground} ${classes.speedStart}`}
|
className={`${classes.buttonBackground} ${classes.speedStart}`}
|
||||||
disabled={
|
disabled={
|
||||||
@@ -319,7 +340,7 @@ const Speedtest = () => {
|
|||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
{!start && !currStatus && (
|
{!start && !currStatus && registeredCluster && (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<br />
|
<br />
|
||||||
<HelpBox
|
<HelpBox
|
||||||
|
|||||||
@@ -14,6 +14,10 @@ import {
|
|||||||
containerForHeader,
|
containerForHeader,
|
||||||
inlineCheckboxes,
|
inlineCheckboxes,
|
||||||
} from "../Common/FormComponents/common/styleLibrary";
|
} 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) =>
|
const styles = (theme: Theme) =>
|
||||||
createStyles({
|
createStyles({
|
||||||
@@ -57,6 +61,14 @@ interface IProfileProps {
|
|||||||
var c: any = null;
|
var c: any = null;
|
||||||
|
|
||||||
const Profile = ({ classes }: IProfileProps) => {
|
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 [profilingStarted, setProfilingStarted] = useState<boolean>(false);
|
||||||
const [types, setTypes] = useState<string[]>([
|
const [types, setTypes] = useState<string[]>([
|
||||||
"cpu",
|
"cpu",
|
||||||
@@ -138,6 +150,7 @@ const Profile = ({ classes }: IProfileProps) => {
|
|||||||
<Fragment>
|
<Fragment>
|
||||||
<PageHeader label="Profile" />
|
<PageHeader label="Profile" />
|
||||||
<PageLayout>
|
<PageLayout>
|
||||||
|
{!registeredCluster && <RegisterCluster compactMode />}
|
||||||
<Grid item xs={12} className={classes.boxy}>
|
<Grid item xs={12} className={classes.boxy}>
|
||||||
<Grid item xs={12} className={classes.dropdown}>
|
<Grid item xs={12} className={classes.dropdown}>
|
||||||
<Grid
|
<Grid
|
||||||
@@ -166,9 +179,13 @@ const Profile = ({ classes }: IProfileProps) => {
|
|||||||
<Button
|
<Button
|
||||||
id={"start-profiling"}
|
id={"start-profiling"}
|
||||||
type="submit"
|
type="submit"
|
||||||
variant="callAction"
|
variant={registeredCluster ? "callAction" : "regular"}
|
||||||
disabled={profilingStarted || types.length < 1}
|
disabled={profilingStarted || types.length < 1}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
if (!registeredCluster) {
|
||||||
|
navigate("/support/register");
|
||||||
|
return;
|
||||||
|
}
|
||||||
startProfiling();
|
startProfiling();
|
||||||
}}
|
}}
|
||||||
label={"Start Profiling"}
|
label={"Start Profiling"}
|
||||||
|
|||||||
156
portal-ui/src/screens/Console/Support/RegisterCluster.tsx
Normal file
156
portal-ui/src/screens/Console/Support/RegisterCluster.tsx
Normal file
@@ -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;
|
||||||
@@ -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 {
|
import {
|
||||||
CallHomeFeatureIcon,
|
CallHomeFeatureIcon,
|
||||||
DiagnosticsFeatureIcon,
|
DiagnosticsFeatureIcon,
|
||||||
|
ExtraFeaturesIcon,
|
||||||
HelpIconFilled,
|
HelpIconFilled,
|
||||||
PerformanceFeatureIcon,
|
PerformanceFeatureIcon,
|
||||||
} from "../../../icons";
|
} from "../../../icons";
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
const FeatureItem = ({
|
const FeatureItem = ({
|
||||||
icon,
|
icon,
|
||||||
description,
|
description,
|
||||||
}: {
|
}: {
|
||||||
icon: any;
|
icon: any;
|
||||||
description: string;
|
description: string | React.ReactNode;
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
@@ -96,6 +113,21 @@ const RegisterHelpBox = ({ hasMargin = true }: { hasMargin?: boolean }) => {
|
|||||||
icon={<PerformanceFeatureIcon />}
|
icon={<PerformanceFeatureIcon />}
|
||||||
description={`Performance Analysis`}
|
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>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -17,6 +17,7 @@
|
|||||||
import React, { Fragment, useEffect, useState } from "react";
|
import React, { Fragment, useEffect, useState } from "react";
|
||||||
import { Box, DialogContentText } from "@mui/material";
|
import { Box, DialogContentText } from "@mui/material";
|
||||||
import { Button } from "mds";
|
import { Button } from "mds";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
import PageHeader from "../Common/PageHeader/PageHeader";
|
import PageHeader from "../Common/PageHeader/PageHeader";
|
||||||
import PageLayout from "../Common/Layout/PageLayout";
|
import PageLayout from "../Common/Layout/PageLayout";
|
||||||
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
|
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
|
||||||
@@ -42,7 +43,8 @@ import DistributedOnly from "../Common/DistributedOnly/DistributedOnly";
|
|||||||
import { InspectMenuIcon } from "../../../icons/SidebarMenus";
|
import { InspectMenuIcon } from "../../../icons/SidebarMenus";
|
||||||
import KeyRevealer from "./KeyRevealer";
|
import KeyRevealer from "./KeyRevealer";
|
||||||
import { selDistSet, setErrorSnackMessage } from "../../../systemSlice";
|
import { selDistSet, setErrorSnackMessage } from "../../../systemSlice";
|
||||||
import { useAppDispatch } from "../../../store";
|
import { AppState, useAppDispatch } from "../../../store";
|
||||||
|
import RegisterCluster from "../Support/RegisterCluster";
|
||||||
|
|
||||||
const styles = (theme: Theme) =>
|
const styles = (theme: Theme) =>
|
||||||
createStyles({
|
createStyles({
|
||||||
@@ -94,7 +96,15 @@ const ExampleBlock = ({
|
|||||||
|
|
||||||
const Inspect = ({ classes }: { classes: any }) => {
|
const Inspect = ({ classes }: { classes: any }) => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
|
const navigate = useNavigate();
|
||||||
const distributedSetup = useSelector(selDistSet);
|
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 [volumeName, setVolumeName] = useState<string>("");
|
||||||
const [inspectPath, setInspectPath] = useState<string>("");
|
const [inspectPath, setInspectPath] = useState<string>("");
|
||||||
const [isEncrypt, setIsEncrypt] = useState<boolean>(true);
|
const [isEncrypt, setIsEncrypt] = useState<boolean>(true);
|
||||||
@@ -193,6 +203,7 @@ const Inspect = ({ classes }: { classes: any }) => {
|
|||||||
<Fragment>
|
<Fragment>
|
||||||
<PageHeader label={"Inspect"} />
|
<PageHeader label={"Inspect"} />
|
||||||
<PageLayout>
|
<PageLayout>
|
||||||
|
{!registeredCluster && <RegisterCluster compactMode />}
|
||||||
{!distributedSetup ? (
|
{!distributedSetup ? (
|
||||||
<DistributedOnly
|
<DistributedOnly
|
||||||
iconComponent={<InspectMenuIcon />}
|
iconComponent={<InspectMenuIcon />}
|
||||||
@@ -246,6 +257,10 @@ const Inspect = ({ classes }: { classes: any }) => {
|
|||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
|
onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
if (plan !== "STANDARD" && plan !== "ENTERPRISE") {
|
||||||
|
navigate("/support/register");
|
||||||
|
return;
|
||||||
|
}
|
||||||
performInspect();
|
performInspect();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -332,7 +347,7 @@ const Inspect = ({ classes }: { classes: any }) => {
|
|||||||
<Button
|
<Button
|
||||||
id={"inspect-start"}
|
id={"inspect-start"}
|
||||||
type="submit"
|
type="submit"
|
||||||
variant="callAction"
|
variant={!registeredCluster ? "regular" : "callAction"}
|
||||||
data-test-id="inspect-submit-button"
|
data-test-id="inspect-submit-button"
|
||||||
disabled={!isFormValid}
|
disabled={!isFormValid}
|
||||||
label={"Inspect"}
|
label={"Inspect"}
|
||||||
|
|||||||
@@ -38,13 +38,13 @@ import {
|
|||||||
MonitoringMenuIcon,
|
MonitoringMenuIcon,
|
||||||
PerformanceMenuIcon,
|
PerformanceMenuIcon,
|
||||||
ProfileMenuIcon,
|
ProfileMenuIcon,
|
||||||
|
RegisterMenuIcon,
|
||||||
SupportMenuIcon,
|
SupportMenuIcon,
|
||||||
TraceMenuIcon,
|
TraceMenuIcon,
|
||||||
UsersMenuIcon,
|
UsersMenuIcon,
|
||||||
} from "../../icons/SidebarMenus";
|
} from "../../icons/SidebarMenus";
|
||||||
import { hasPermission } from "../../common/SecureComponent";
|
import { hasPermission } from "../../common/SecureComponent";
|
||||||
import WatchIcon from "../../icons/WatchIcon";
|
import WatchIcon from "../../icons/WatchIcon";
|
||||||
import RegisterMenuIcon from "../../icons/SidebarMenus/RegisterMenuIcon";
|
|
||||||
import {
|
import {
|
||||||
ClustersIcon,
|
ClustersIcon,
|
||||||
DocumentationIcon,
|
DocumentationIcon,
|
||||||
@@ -194,18 +194,20 @@ export const validRoutes = (
|
|||||||
id: "configurations",
|
id: "configurations",
|
||||||
icon: SettingsIcon,
|
icon: SettingsIcon,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
component: NavLink,
|
||||||
|
to: IAM_PAGES.LICENSE,
|
||||||
|
name: "License",
|
||||||
|
id: "license",
|
||||||
|
icon: LicenseIcon,
|
||||||
|
badge: LicenseBadge,
|
||||||
|
forceDisplay: true,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "Support",
|
name: "Support",
|
||||||
id: "support",
|
id: "support",
|
||||||
icon: SupportMenuIcon,
|
icon: SupportMenuIcon,
|
||||||
children: [
|
children: [
|
||||||
{
|
|
||||||
name: "Register",
|
|
||||||
id: "register",
|
|
||||||
component: NavLink,
|
|
||||||
icon: RegisterMenuIcon,
|
|
||||||
to: IAM_PAGES.REGISTER_SUPPORT,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: "Health",
|
name: "Health",
|
||||||
id: "diagnostics",
|
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",
|
type: "item",
|
||||||
component: NavLink,
|
component: NavLink,
|
||||||
|
|||||||
@@ -64,8 +64,6 @@ test("All sidebar items exist", async (t) => {
|
|||||||
.expect(supportElement.exists)
|
.expect(supportElement.exists)
|
||||||
.ok()
|
.ok()
|
||||||
.click(supportElement)
|
.click(supportElement)
|
||||||
.expect(elements.registerElement.exists)
|
|
||||||
.ok()
|
|
||||||
.expect(elements.diagnosticsElement.exists)
|
.expect(elements.diagnosticsElement.exists)
|
||||||
.ok()
|
.ok()
|
||||||
.expect(elements.performanceElement.exists)
|
.expect(elements.performanceElement.exists)
|
||||||
|
|||||||
@@ -83,9 +83,6 @@ export const supportElement = Selector(".MuiPaper-root")
|
|||||||
.child("#support");
|
.child("#support");
|
||||||
export const supportChildren = Selector("#support-children");
|
export const supportChildren = Selector("#support-children");
|
||||||
|
|
||||||
export const registerElement = supportChildren
|
|
||||||
.find("a")
|
|
||||||
.withAttribute("href", "/support/register");
|
|
||||||
export const diagnosticsElement = supportChildren
|
export const diagnosticsElement = supportChildren
|
||||||
.find("a")
|
.find("a")
|
||||||
.withAttribute("href", "/support/diagnostics");
|
.withAttribute("href", "/support/diagnostics");
|
||||||
|
|||||||
Reference in New Issue
Block a user