From 701039454af8822a95df523e5c0b22818d1568a7 Mon Sep 17 00:00:00 2001 From: Alex <33497058+bexsoft@users.noreply.github.com> Date: Tue, 24 Oct 2023 14:09:22 -0600 Subject: [PATCH] MDS Console improvements (#3102) - Removed mui badge component - Updated icons screen - Migrated Wizard Component - Improved modals styles - Updated KMS Status page Signed-off-by: Benjamin Perez --- .../ListBuckets/BulkLifecycleModal.tsx | 19 +- .../ListBuckets/BulkReplicationModal.tsx | 23 +- .../Objects/ListObjects/ListObjects.tsx | 11 +- .../QueryMultiSelector/QueryMultiSelector.tsx | 1 + .../FormComponents/common/styleLibrary.ts | 27 -- .../Common/GenericWizard/GenericWizard.tsx | 256 ------------------ .../Common/GenericWizard/WizardPage.tsx | 129 --------- .../Console/Common/GenericWizard/types.ts | 47 ---- .../screens/Console/Common/IconsScreen.tsx | 151 +++++------ .../Common/UsageBarWrapper/LabelValuePair.tsx | 33 --- portal-ui/src/screens/Console/KMS/Status.tsx | 197 +++++++------- 11 files changed, 195 insertions(+), 699 deletions(-) delete mode 100644 portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx delete mode 100644 portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx delete mode 100644 portal-ui/src/screens/Console/Common/GenericWizard/types.ts delete mode 100644 portal-ui/src/screens/Console/Common/UsageBarWrapper/LabelValuePair.tsx diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkLifecycleModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkLifecycleModal.tsx index 21e507b0d..f291cae32 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkLifecycleModal.tsx +++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkLifecycleModal.tsx @@ -27,10 +27,10 @@ import { Switch, Tooltip, WarnIcon, + Wizard, } from "mds"; import get from "lodash/get"; import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper"; -import GenericWizard from "../../Common/GenericWizard/GenericWizard"; import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector"; import { ITiersDropDown } from "../types"; import { setModalErrorSnackMessage } from "../../../../systemSlice"; @@ -196,20 +196,23 @@ const AddBulkReplicationModal = ({ }} title="Set Lifecycle to multiple buckets" > - - - - {buckets.join(", ")} - - -

Remote Endpoint Configuration

+ + + {buckets.join(", ")} + + +

Remote Endpoint Configuration

Lifecycle Configuration - - + {bucketsToAlter.join(", ")} - -

Remote Endpoint Configuration

- - Please avoid the use of root credentials for this feature - -
-
- +

Remote Endpoint Configuration

+ + Please avoid the use of root credentials for this feature +
+
+ { id={"rewind-objects-list"} label={"Rewind"} icon={ - + {label} diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts index a0559e58f..db6b74795 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts +++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts @@ -104,33 +104,6 @@ export const tooltipHelper = { }, }; -export const containerForHeader = { - container: { - position: "relative" as const, - padding: "20px 35px 0", - "& h6": { - color: "#777777", - fontSize: 30, - }, - "& p": { - "& span:not(*[class*='smallUnit'])": { - fontSize: 16, - }, - }, - }, - sectionTitle: { - margin: 0, - marginBottom: ".8rem", - fontSize: "1.3rem", - }, - boxy: { - border: "#E5E5E5 1px solid", - borderRadius: 2, - padding: 40, - backgroundColor: "#fff", - }, -}; - export const actionsTray = { label: { color: "#07193E", diff --git a/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx b/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx deleted file mode 100644 index 6c061068c..000000000 --- a/portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx +++ /dev/null @@ -1,256 +0,0 @@ -// 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 . - -import React, { Fragment, useState } from "react"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { IWizardMain } from "./types"; -import WizardPage from "./WizardPage"; -import { Grid, List } from "@mui/material"; -import ListItem from "@mui/material/ListItem"; -import ListItemText from "@mui/material/ListItemText"; - -const styles = (theme: Theme) => - createStyles({ - wizFromContainer: {}, - wizFromModal: { - position: "relative", - }, - modalWizardSteps: { - padding: 5, - borderBottom: "#eaeaea 1px solid", - "& ul": { - padding: 0, - marginTop: 0, - display: "flex", - justifyContent: "space-evenly", - - "& li": { - listStyle: "lower-roman", - "&::marker": { - paddingLeft: 15, - }, - }, - }, - }, - buttonList: { - backgroundColor: "transparent", - border: "none", - cursor: "pointer", - "&:not(:disabled):hover": { - textDecoration: "underline", - }, - "&:selected, &:active, &:focus, &:focus:active": { - border: "none", - outline: 0, - boxShadow: "none", - }, - }, - paddedContentGrid: { - marginTop: 8, - padding: "0 10px", - minHeight: 400, - }, - stepsLabel: { - fontSize: 20, - color: "#393939", - fontWeight: 600, - margin: "15px 12px", - "&.stepsModalTitle": { - textAlign: "center", - width: "100%", - marginTop: 0, - marginBottom: 10, - }, - }, - stepsMasterContainer: { - position: "sticky", - top: 0, - backgroundColor: "#FFFFFF", - width: "100%", - maxHeight: 90, - }, - verticalSteps: { - borderRight: "1px solid #E5E5E5", - background: "#F8F8F8", - }, - stepsContainer: { - paddingTop: 0, - "& .MuiButtonBase-root.Mui-selected": { - background: "#E5E5E5", - }, - }, - stepItem: { - minHeight: 60, - borderBottom: "1px solid #E5E5E5", - "&:hover": { - background: "rgba(247,247,247,0.7)", - }, - }, - }); - -const GenericWizard = ({ - classes, - wizardSteps, - loadingStep, - forModal, -}: IWizardMain) => { - const [currentStep, setCurrentStep] = useState(0); - - const pageChange = (toElement: string | number) => { - const lastPage = wizardSteps.length - 1; - - if (toElement === "++") { - let nextPage = currentStep + 1; - - if (nextPage > lastPage) { - nextPage = lastPage; - } - - setCurrentStep(nextPage); - } - - if (toElement === "--") { - let prevPage = currentStep - 1; - - if (prevPage < 0) { - prevPage = 0; - } - - setCurrentStep(prevPage); - } - - if (typeof toElement === "number") { - let pg = toElement; - if (toElement < 0) { - pg = 0; - } - - if (toElement > lastPage) { - pg = lastPage; - } - - setCurrentStep(pg); - } - }; - - if (wizardSteps.length === 0) { - return null; - } - - const stepsList = () => { - return ( - - - {wizardSteps.map((step, index) => { - return ( - pageChange(index)} - key={`wizard-${index.toString()}`} - selected={currentStep === index} - classes={{ - root: classes.stepItem, - }} - > - - - ); - })} - - - ); - }; - const stepsListModal = () => { - return ( -
    - {wizardSteps.map((step, index) => { - return ( -
  • - -
    • - ); - })} -
- ); - }; - - return ( - - {forModal ? ( - -
-
Steps
-
{stepsListModal()}
-
- - ) : ( - - - {stepsList()} - - - )} - - - - - - ); -}; - -export default withStyles(styles)(GenericWizard); diff --git a/portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx b/portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx deleted file mode 100644 index c7951889a..000000000 --- a/portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx +++ /dev/null @@ -1,129 +0,0 @@ -// 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 . - -import React from "react"; -import { Theme } from "@mui/material/styles"; -import { Button, ProgressBar } from "mds"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { IWizardButton, IWizardPage } from "./types"; - -const styles = (theme: Theme) => - createStyles({ - wizardStepContainer: { - display: "flex", - flexDirection: "column", - flex: 1, - }, - wizardComponent: { - overflowY: "auto", - marginBottom: 10, - height: "calc(100vh - 100px - 80px)", - minHeight: 400, - flex: 1, - width: "100%", - }, - wizardModal: { - overflowY: "auto", - marginBottom: 10, - height: "calc(100vh - 515px)", - }, - buttonsContainer: { - display: "flex", - flexDirection: "row", - justifyContent: "flex-start" as const, - padding: "10px 0", - borderTop: "#EAEAEA 1px solid", - "& button": { - marginLeft: 10, - }, - "&.forModal": { - paddingBottom: 0, - }, - }, - buttonInnerContainer: { - width: "100%", - display: "flex", - justifyContent: "flex-end", - marginRight: 15, - }, - }); - -const WizardPage = ({ - classes, - page, - pageChange, - loadingStep, - forModal, -}: IWizardPage) => { - const buttonAction = (btn: IWizardButton) => { - switch (btn.type) { - case "next": - pageChange("++"); - break; - case "back": - pageChange("--"); - break; - case "to": - pageChange(btn.toPage || 0); - break; - case "custom": - default: - } - - if (btn.action) { - btn.action(pageChange); - } - }; - - return ( -
-
- {page.componentRender} -
- {loadingStep && ( -
- -
- )} -
-
- {page.buttons.map((btn) => { - if (btn.componentRender) { - return btn.componentRender; - } - return ( -
-
-
- ); -}; - -export default withStyles(styles)(WizardPage); diff --git a/portal-ui/src/screens/Console/Common/GenericWizard/types.ts b/portal-ui/src/screens/Console/Common/GenericWizard/types.ts deleted file mode 100644 index cc5847018..000000000 --- a/portal-ui/src/screens/Console/Common/GenericWizard/types.ts +++ /dev/null @@ -1,47 +0,0 @@ -// 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 . - -export interface IWizardButton { - label?: string; - type?: string; - action?: (nextFunction: (to: string | number) => void) => void; - enabled?: boolean; - toPage?: number; - componentRender?: React.ReactNode; -} - -export interface IWizardElement { - label: string; - componentRender: any; - buttons: IWizardButton[]; - advancedOnly?: boolean; - loadingStep?: boolean; -} - -export interface IWizardMain { - classes: any; - loadingStep?: boolean; - wizardSteps: IWizardElement[]; - forModal?: boolean; -} - -export interface IWizardPage { - classes: any; - page: IWizardElement; - pageChange: (to: string | number) => void; - loadingStep?: boolean; - forModal?: boolean; -} diff --git a/portal-ui/src/screens/Console/Common/IconsScreen.tsx b/portal-ui/src/screens/Console/Common/IconsScreen.tsx index 9b33090d2..a3def3d34 100644 --- a/portal-ui/src/screens/Console/Common/IconsScreen.tsx +++ b/portal-ui/src/screens/Console/Common/IconsScreen.tsx @@ -15,75 +15,56 @@ // along with this program. If not, see . import React, { useState } from "react"; -import { containerForHeader } from "./FormComponents/common/styleLibrary"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import clsx from "clsx"; -import { - FormControl, - FormControlLabel, - FormLabel, - Grid, - Radio, - RadioGroup, -} from "@mui/material"; - import * as cicons from "mds"; import * as micons from "mds"; -import { Loader } from "mds"; +import { Box, Grid, Loader, RadioGroup } from "mds"; -interface IIconsScreenSimple { - classes: any; -} - -const styles = (theme: Theme) => - createStyles({ - ...containerForHeader, - root: { - fontSize: 12, - wordWrap: "break-word", - "& .min-loader": { - width: 45, - height: 45, - }, - }, - red: { - "& .min-icon": { - color: "red", - }, - }, - }); - -const IconsScreen = ({ classes }: IIconsScreenSimple) => { +const IconsScreen = () => { const [color, setColor] = useState("default"); return ( -
+ - - Color - { - setColor(c.target.value); - }} - > - } label="Default" /> - } label="Color" /> - - + { + setColor(c.target.value); + }} + />

Logos

@@ -94,11 +75,17 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {

Loaders

@@ -109,11 +96,17 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {

Icons

@@ -1160,11 +1153,17 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {

Menu Icons

@@ -1298,8 +1297,8 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => { UsersMenuIcon -
+ ); }; -export default withStyles(styles)(IconsScreen); +export default IconsScreen; diff --git a/portal-ui/src/screens/Console/Common/UsageBarWrapper/LabelValuePair.tsx b/portal-ui/src/screens/Console/Common/UsageBarWrapper/LabelValuePair.tsx deleted file mode 100644 index 7694d6cd4..000000000 --- a/portal-ui/src/screens/Console/Common/UsageBarWrapper/LabelValuePair.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import { Stack } from "@mui/material"; - -type LabelValuePairProps = { - label?: any; - value?: any; - orientation?: any; - stkProps?: any; - lblProps?: any; - valProps?: any; -}; - -const LabelValuePair = ({ - label = null, - value = "-", - orientation = "column", - stkProps = {}, - lblProps = {}, - valProps = {}, -}: LabelValuePairProps) => { - return ( - - - - - ); -}; - -export default LabelValuePair; diff --git a/portal-ui/src/screens/Console/KMS/Status.tsx b/portal-ui/src/screens/Console/KMS/Status.tsx index f9194c3af..e7daf80cf 100644 --- a/portal-ui/src/screens/Console/KMS/Status.tsx +++ b/portal-ui/src/screens/Console/KMS/Status.tsx @@ -15,25 +15,17 @@ // along with this program. If not, see . import React, { Fragment, useEffect, useState } from "react"; -import { Box, Grid } from "@mui/material"; -import { SectionTitle } from "mds"; -import api from "../../../common/api"; - -import { ErrorResponseHandler } from "../../../common/types"; -import { hasPermission } from "../../../common/SecureComponent"; import { - CONSOLE_UI_RESOURCE, - IAM_SCOPES, -} from "../../../common/SecureComponent/permissions"; - -import { setErrorSnackMessage, setHelpName } from "../../../systemSlice"; -import { useAppDispatch } from "../../../store"; -import Tabs from "@mui/material/Tabs"; -import Tab from "@mui/material/Tab"; -import { TabPanel } from "../../shared/tabs"; - -import LabelValuePair from "../Common/UsageBarWrapper/LabelValuePair"; -import LabelWithIcon from "../Buckets/BucketDetails/SummaryItems/LabelWithIcon"; + Box, + breakPoints, + DisabledIcon, + EnabledIcon, + Grid, + PageLayout, + SectionTitle, + Tabs, + ValuePair, +} from "mds"; import { Bar, BarChart, @@ -45,14 +37,22 @@ import { XAxis, YAxis, } from "recharts"; -import { DisabledIcon, EnabledIcon, PageLayout } from "mds"; +import api from "../../../common/api"; +import { ErrorResponseHandler } from "../../../common/types"; +import { hasPermission } from "../../../common/SecureComponent"; +import { + CONSOLE_UI_RESOURCE, + IAM_SCOPES, +} from "../../../common/SecureComponent/permissions"; +import { setErrorSnackMessage, setHelpName } from "../../../systemSlice"; +import { useAppDispatch } from "../../../store"; +import LabelWithIcon from "../Buckets/BucketDetails/SummaryItems/LabelWithIcon"; import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper"; - import HelpMenu from "../HelpMenu"; const Status = () => { const dispatch = useAppDispatch(); - const [curTab, setCurTab] = useState(0); + const [curTab, setCurTab] = useState("simple-tab-0"); const [status, setStatus] = useState(null); const [loadingStatus, setLoadingStatus] = useState(true); @@ -184,33 +184,41 @@ const Status = () => { Status
{status && ( - + - + {version && ( - + )} - - @@ -243,17 +251,21 @@ const Status = () => { Supported API endpoints
{apis && ( - + - {apis.results.map((e: any, i: number) => ( @@ -364,73 +376,56 @@ const Status = () => { , newValue: number) => { - setCurTab(newValue); - }} - indicatorColor="primary" - textColor="primary" - aria-label="cluster-tabs" - variant="scrollable" - scrollButtons="auto" - > - - - {}} - /> - - - - - {statusPanel} - - - - - {apisPanel} - - - - - {metricsPanel} - - + currentTabOrPath={curTab} + onTabClick={(newValue) => setCurTab(newValue)} + options={[ + { + tabConfig: { label: "Status", id: "simple-tab-0" }, + content: ( + + {statusPanel} + + ), + }, + { + tabConfig: { label: "APIs", id: "simple-tab-1" }, + content: ( + + {apisPanel} + + ), + }, + { + tabConfig: { label: "Metrics", id: "simple-tab-2" }, + content: ( + + {metricsPanel} + + ), + }, + ]} + /> );