From 1d92f90cbe583824e371ee9153340361260ef546 Mon Sep 17 00:00:00 2001 From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com> Date: Fri, 28 Jan 2022 17:08:32 +0000 Subject: [PATCH] UX Register screen (#1485) --- portal-ui/src/icons/CallHomeFeatureIcon.tsx | 101 ++ .../src/icons/DiagnosticsFeatureIcon.tsx | 64 ++ portal-ui/src/icons/HelpIconFilled.tsx | 57 ++ .../src/icons/PerformanceFeatureIcon.tsx | 90 ++ portal-ui/src/icons/index.ts | 4 + .../src/screens/Console/Support/Register.tsx | 921 ++++++++++++------ .../Console/Support/RegisterStatus.tsx | 2 +- 7 files changed, 966 insertions(+), 273 deletions(-) create mode 100644 portal-ui/src/icons/CallHomeFeatureIcon.tsx create mode 100644 portal-ui/src/icons/DiagnosticsFeatureIcon.tsx create mode 100644 portal-ui/src/icons/HelpIconFilled.tsx create mode 100644 portal-ui/src/icons/PerformanceFeatureIcon.tsx diff --git a/portal-ui/src/icons/CallHomeFeatureIcon.tsx b/portal-ui/src/icons/CallHomeFeatureIcon.tsx new file mode 100644 index 000000000..b84497659 --- /dev/null +++ b/portal-ui/src/icons/CallHomeFeatureIcon.tsx @@ -0,0 +1,101 @@ +// 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 . + +import * as React from "react"; +import { SVGProps } from "react"; + +const CallHomeFeatureIcon = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default CallHomeFeatureIcon; diff --git a/portal-ui/src/icons/DiagnosticsFeatureIcon.tsx b/portal-ui/src/icons/DiagnosticsFeatureIcon.tsx new file mode 100644 index 000000000..386fc20e5 --- /dev/null +++ b/portal-ui/src/icons/DiagnosticsFeatureIcon.tsx @@ -0,0 +1,64 @@ +// 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 . + +import * as React from "react"; +import { SVGProps } from "react"; + +const DiagnosticsFeatureIcon = (props: SVGProps) => ( + + + + + + + + + + + + + + + + +); + +export default DiagnosticsFeatureIcon; diff --git a/portal-ui/src/icons/HelpIconFilled.tsx b/portal-ui/src/icons/HelpIconFilled.tsx new file mode 100644 index 000000000..e497c26a9 --- /dev/null +++ b/portal-ui/src/icons/HelpIconFilled.tsx @@ -0,0 +1,57 @@ +// 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 . + +import * as React from "react"; +import { SVGProps } from "react"; + +const HelpIconFilled = (props: SVGProps) => ( + + + + + + + + + + + + +); + +export default HelpIconFilled; diff --git a/portal-ui/src/icons/PerformanceFeatureIcon.tsx b/portal-ui/src/icons/PerformanceFeatureIcon.tsx new file mode 100644 index 000000000..b13fa541a --- /dev/null +++ b/portal-ui/src/icons/PerformanceFeatureIcon.tsx @@ -0,0 +1,90 @@ +// 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 . + +import * as React from "react"; +import { SVGProps } from "react"; + +const PerformanceFeatureIcon = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default PerformanceFeatureIcon; diff --git a/portal-ui/src/icons/index.ts b/portal-ui/src/icons/index.ts index 79dfdca35..5a0cc76e3 100644 --- a/portal-ui/src/icons/index.ts +++ b/portal-ui/src/icons/index.ts @@ -157,3 +157,7 @@ export { default as S3TierIcon } from "./S3TierIcon"; export { default as S3TierIconXs } from "./S3TierIconXs"; export { default as EditorThemeSwitchIcon } from "./EditorThemeSwitchIcon"; export { default as PasswordKeyIcon } from "./PasswordKeyIcon"; +export { default as HelpIconFilled } from "./HelpIconFilled"; +export { default as CallHomeFeatureIcon } from "./CallHomeFeatureIcon"; +export { default as DiagnosticsFeatureIcon } from "./DiagnosticsFeatureIcon"; +export { default as PerformanceFeatureIcon } from "./PerformanceFeatureIcon"; diff --git a/portal-ui/src/screens/Console/Support/Register.tsx b/portal-ui/src/screens/Console/Support/Register.tsx index eeacf235e..af12fa7ba 100644 --- a/portal-ui/src/screens/Console/Support/Register.tsx +++ b/portal-ui/src/screens/Console/Support/Register.tsx @@ -20,20 +20,20 @@ import { actionsTray, containerForHeader, searchField, + spacingUtils, } from "../Common/FormComponents/common/styleLibrary"; import withStyles from "@mui/styles/withStyles"; -import { Button, Grid, Link, Typography } from "@mui/material"; +import { Box, Button, Link } from "@mui/material"; import PageHeader from "../Common/PageHeader/PageHeader"; import PageLayout from "../Common/Layout/PageLayout"; import React, { Fragment, useCallback, useEffect, useState } from "react"; -import { CopyIcon, UsersIcon } from "../../../icons"; +import { CopyIcon, DiagnosticsFeatureIcon, UsersIcon } from "../../../icons"; import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye"; import VisibilityOffIcon from "@mui/icons-material/VisibilityOff"; import DnsIcon from "@mui/icons-material/Dns"; import OnlineRegistrationIcon from "../../../icons/OnlineRegistrationIcon"; import OfflineRegistrationIcon from "../../../icons/OfflineRegistrationIcon"; import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper"; -import clsx from "clsx"; import OnlineRegistrationBackIcon from "../../../icons/OnlineRegistrationBackIcon"; import OfflineRegistrationBackIcon from "../../../icons/OfflineRegistrationBackIcon"; import api from "../../../common/api"; @@ -58,11 +58,15 @@ import { } from "../../../common/SecureComponent/permissions"; import { connect } from "react-redux"; import { setErrorSnackMessage } from "../../../actions"; -import HelpBox from "../../../common/HelpBox"; import SettingsIcon from "../../../icons/SettingsIcon"; import RegisterStatus from "./RegisterStatus"; import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper"; import { AppState } from "../../../store"; +import { + HelpIconFilled, + CallHomeFeatureIcon, + PerformanceFeatureIcon, +} from "../../../icons"; interface IRegister { classes: any; @@ -157,11 +161,123 @@ const styles = (theme: Theme) => padding: 20, backgroundColor: "#fff", }, + sizedLabel: { + minWidth: "75px", + }, ...actionsTray, ...searchField, + ...spacingUtils, ...containerForHeader(theme.spacing(4)), }); +const FormTitle = ({ icon = null, title }: { icon?: any; title: any }) => { + return ( + + {icon} +
{title}
+ + ); +}; + +const RegisterHelpBox = () => { + return ( + + + +
Why should I register?
+ + + Registering this cluster with the MinIO Subscription Network (SUBNET) + provides the following benefits in addition to the commercial license + and SLA backed support. + + + + } + description={`Call Home Monitoring`} + /> + } + description={`Health Diagnostics`} + /> + } + description={`Performance Analysis`} + /> + + + ); +}; +const FeatureItem = ({ + icon, + description, +}: { + icon: any; + description: string; +}) => { + return ( + + {icon}{" "} +
+ {description} +
+ + ); +}; const Register = ({ classes, displayErrorMessage, @@ -366,16 +482,34 @@ const Register = ({ } }, [fetchLicenseInfo, initialLicenseLoading, setInitialLicenseLoading]); - const title = onlineActivation ? ( - - - Register with MinIO Subscription Network - + const formTitle = onlineActivation ? ( + + } + title={`Register with MinIO Subscription Network`} + /> + ) : ( - - - Offline Activation of SUBNET License - + + } + title={` Offline Activation of SUBNET License`} + /> + ); let clusterRegistrationForm: JSX.Element; @@ -383,128 +517,218 @@ const Register = ({ if (onlineActivation) { if (subnetAccessToken && subnetOrganizations.length > 0) { clusterRegistrationForm = ( - - - Register MinIO cluster - -
- - - setSelectedSubnetOrganization(e.target.value as string) - } - label="Select an organization" - value={selectedSubnetOrganization} - options={subnetOrganizations.map((organization) => ({ - label: organization.company, - value: organization.accountId.toString(), - }))} - /> - - - - - + + + + + setSelectedSubnetOrganization(e.target.value as string) + } + label="Select an organization" + value={selectedSubnetOrganization} + options={subnetOrganizations.map((organization) => ({ + label: organization.company, + value: organization.accountId.toString(), + }))} + /> + + + + + + + ); } else if (subnetMFAToken) { clusterRegistrationForm = ( - - - Two-Factor Authentication - + + + + Two-Factor Authentication + + + Please enter the 6-digit verification code that was sent to your email address. This code will be valid for 5 minutes. - - -
- - } - id="subnet-otp" - name="subnet-otp" - onChange={(event: React.ChangeEvent) => - setSubnetOTP(event.target.value) - } - placeholder="" - label="" - value={subnetOTP} - /> - - - + } + id="subnet-otp" + name="subnet-otp" + onChange={(event: React.ChangeEvent) => + setSubnetOTP(event.target.value) + } + placeholder="" + label="" + value={subnetOTP} + /> + + + + + + + + ); } else { clusterRegistrationForm = ( - - - Use your MinIO Subscription Network login credentials to register - this cluster. - -
- - + + - - ) => - setSubnetEmail(event.target.value) - } - label="Email" - value={subnetEmail} - overlayIcon={} - /> - - - {" "} - ) => - setSubnetPassword(event.target.value) - } - label="Password" - type={showPassword ? "text" : "password"} - value={subnetPassword} - overlayIcon={ - showPassword ? : - } - overlayAction={() => setShowPassword(!showPassword)} - /> - - -
- - + Use your MinIO Subscription Network login credentials to register + this cluster. + + + ) => + setSubnetEmail(event.target.value) + } + label="Email" + value={subnetEmail} + overlayIcon={} + /> + ) => + setSubnetPassword(event.target.value) + } + label="Password" + type={showPassword ? "text" : "password"} + value={subnetPassword} + overlayIcon={ + showPassword ? : + } + overlayAction={() => setShowPassword(!showPassword)} + /> + + - - - - -
-

Why should I register?

- Registering this cluster with the MinIO Subscription Network - (SUBNET) provides the following benefits in addition to the - commercial license and SLA backed support: -
-
    -
  • Call Home Monitoring
    • -
  • Health Diagnostics
    • -
  • Performance Analysis
    • -
-
- - + + + + + ); } } else { clusterRegistrationForm = ( - - - Step 1: Copy the following registration token - - - {}} - value={subnetRegToken} - disabled - overlayIcon={} - overlayAction={() => navigator.clipboard.writeText(subnetRegToken)} - /> - - - Step 2: Use the previous token to register your cluster - at:{" "} - + + + +
1
{" "} +
+ Copy the following registration token +
+ + + + {}} + value={subnetRegToken} + overlayIcon={} + extraInputProps={{ + readOnly: true, + }} + overlayAction={() => + navigator.clipboard.writeText(subnetRegToken) + } + /> + + + + + +
2
+
+ Navigate to SUBNET and register your cluster +
+ + + + + https://subnet.min.io/cluster/register + + + + + - https://subnet.min.io/cluster/register - - -
- - Step 3: Enter the API key generated by SUBNET - - - ) => - setLicense(event.target.value) - } - id="api-key" - name="api-key" - placeholder="" - label="" - type="text" - /> - - - - - + + + + + + ); } @@ -619,86 +921,161 @@ const Register = ({ - + {clusterRegistered && } - - - {title} - - - {onlineActivation ? ( - - ) : ( - - - setOnlineActivation(!onlineActivation)} - > - Back to Online Activation - - - )} - - + + {!onlineActivation ? ( + + + setOnlineActivation(!onlineActivation)} + > + Back to Online Activation + + + ) : null} + + {formTitle} {clusterRegistrationForm} - + + {onlineActivation && ( - - } - help={ - + + + + + +
+ Proxy Configuration +
+ + For airgap/firewalled environments it is possible to configure - a proxy to connect to Subnet. -
-
- - - - ) => { - setDisplaySubnetProxy(event.target.checked); - }} - /> - - - {displaySubnetProxy && ( - } - id="subnetProxy" - name="subnetProxy" - onChange={( - event: React.ChangeEvent - ) => setSubnetProxy(event.target.value)} - placeholder="https://192.168.1.3:3128" - label="" - value={subnetProxy} - /> - )} - - - Alternatively you can try - { - fetchSubnetRegToken(); - setOnlineActivation(!onlineActivation); - }} - > - Offline Activation. - - - } - /> - + a proxy to connect to SUBNET. + + + {displaySubnetProxy && ( + } + id="subnetProxy" + name="subnetProxy" + onChange={(event: React.ChangeEvent) => + setSubnetProxy(event.target.value) + } + placeholder="https://192.168.1.3:3128" + label="" + value={subnetProxy} + /> + )} + + + + ) => { + setDisplaySubnetProxy(event.target.checked); + }} + /> + + + + + + Cluster does not have internet + access? Use{" "} + + + { + fetchSubnetRegToken(); + setOnlineActivation(!onlineActivation); + }} + > + Offline Activation. + + + + )} diff --git a/portal-ui/src/screens/Console/Support/RegisterStatus.tsx b/portal-ui/src/screens/Console/Support/RegisterStatus.tsx index 25566e1ec..bc4728fc6 100644 --- a/portal-ui/src/screens/Console/Support/RegisterStatus.tsx +++ b/portal-ui/src/screens/Console/Support/RegisterStatus.tsx @@ -51,7 +51,7 @@ function RegisterStatus({ classes }: IRegisterStatus) { return ( - Register Status: + Registration Status: Registered