From 62e270e95ece2cccdbfa7270c2d1de38f71e131d Mon Sep 17 00:00:00 2001 From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> Date: Thu, 7 Apr 2022 20:06:28 -0700 Subject: [PATCH] Tenant Forms alignment. Components Page. (#1811) Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> --- .../BucketDetails/BucketSummaryPanel.tsx | 503 +++++++------- .../Console/Common/ComponentsScreen.tsx | 258 +++++++ .../screens/Console/Common/SectionTitle.tsx | 54 ++ portal-ui/src/screens/Console/Console.tsx | 6 + .../Console/Policies/PolicyDetails.tsx | 7 +- .../TenantDetails/TenantEncryption.tsx | 649 ++++++++---------- .../TenantDetails/TenantIdentityProvider.tsx | 584 ++++++++-------- .../Tenants/TenantDetails/TenantSecurity.tsx | 401 ++++++----- .../Tenants/TenantDetails/TenantSummary.tsx | 117 ++-- .../Tenants/TenantDetails/VolumesSummary.tsx | 108 +-- 10 files changed, 1429 insertions(+), 1258 deletions(-) create mode 100644 portal-ui/src/screens/Console/Common/ComponentsScreen.tsx create mode 100644 portal-ui/src/screens/Console/Common/SectionTitle.tsx diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx index 27d1c120e..50c116945 100644 --- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx +++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx @@ -19,9 +19,8 @@ import { connect } from "react-redux"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; -import { Box } from "@mui/material"; +import { Box, Grid } from "@mui/material"; import get from "lodash/get"; -import Grid from "@mui/material/Grid"; import { AppState } from "../../../../store"; import { setErrorSnackMessage } from "../../../../actions"; import { @@ -45,17 +44,18 @@ import api from "../../../../common/api"; import { setBucketDetailsLoad } from "../actions"; import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions"; import { - SecureComponent, hasPermission, + SecureComponent, } from "../../../../common/SecureComponent"; import withSuspense from "../../Common/Components/withSuspense"; import LabelValuePair from "../../Common/UsageBarWrapper/LabelValuePair"; import LabelWithIcon from "./SummaryItems/LabelWithIcon"; -import { EnabledIcon, DisabledIcon } from "../../../../icons"; +import { DisabledIcon, EnabledIcon } from "../../../../icons"; import EditablePropertyItem from "./SummaryItems/EditablePropertyItem"; import ReportedUsage from "./SummaryItems/ReportedUsage"; import BucketQuotaSize from "./SummaryItems/BucketQuotaSize"; +import SectionTitle from "../../Common/SectionTitle"; const SetAccessPolicy = withSuspense( React.lazy(() => import("./SetAccessPolicy")) @@ -415,264 +415,247 @@ const BucketSummary = ({ /> )} - - -

Summary + + + + + + + { + setAccessPolicyScreenOpen(true); + }} + isLoading={bucketLoading} + /> + + + + { + setEnableEncryptionScreenOpen(true); + }} + isLoading={loadingEncryption} + /> + + + + : + } + label={ + + } + /> + } + /> + + + + : + } + label={ + + } + /> + } + /> + + + + } + /> + + + + + + + + + + + {distributedSetup && ( + - Summary -

- + + Versioning + + + + + + + + + {quotaEnabled && quota ? ( + + ) : null} + + + + + )} + + {hasObjectLocking && ( + + + Retention + + + + { + setRetentionConfigOpen(true); + }} + isLoading={loadingRetention} + /> + + + {retentionConfig && retentionConfig.mode + ? retentionConfig.mode + : "-"} + + } + /> + + {retentionConfig && retentionConfig.validity}{" "} + {retentionConfig && + (retentionConfig.validity === 1 + ? retentionConfig.unit.slice(0, -1) + : retentionConfig.unit)} + + } + /> + + + + {/*Spacer*/} + + + + + )} - - - - - { - setAccessPolicyScreenOpen(true); - }} - isLoading={bucketLoading} - /> - - - - { - setEnableEncryptionScreenOpen(true); - }} - isLoading={loadingEncryption} - /> - - - - : } - label={ - - } - /> - } - /> - - - - : } - label={ - - } - /> - } - /> - - - - } - /> - - - - - - - - - - {distributedSetup && ( - - - -

- Versioning -

- - - - - - - - - - - {quotaEnabled && quota ? : null} - - - - )} - - {hasObjectLocking && ( - - - -

- Retention -

- - - - - - { - setRetentionConfigOpen(true); - }} - isLoading={loadingRetention} - /> - - - {retentionConfig && retentionConfig.mode - ? retentionConfig.mode - : "-"} - - } - /> - - {retentionConfig && retentionConfig.validity}{" "} - {retentionConfig && - (retentionConfig.validity === 1 - ? retentionConfig.unit.slice(0, -1) - : retentionConfig.unit)} - - } - /> - - - - {/*Spacer*/} - - - - )} ); }; diff --git a/portal-ui/src/screens/Console/Common/ComponentsScreen.tsx b/portal-ui/src/screens/Console/Common/ComponentsScreen.tsx new file mode 100644 index 000000000..061e2d739 --- /dev/null +++ b/portal-ui/src/screens/Console/Common/ComponentsScreen.tsx @@ -0,0 +1,258 @@ +// 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 { containerForHeader } from "../Common/FormComponents/common/styleLibrary"; +import { Theme } from "@mui/material/styles"; +import createStyles from "@mui/styles/createStyles"; +import withStyles from "@mui/styles/withStyles"; +import { Button, DialogContentText, Grid } from "@mui/material"; +import PageHeader from "./PageHeader/PageHeader"; +import PageLayout from "./Layout/PageLayout"; +import SectionTitle from "./SectionTitle"; +import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton"; +import { + ArrowIcon, + ConfirmDeleteIcon, + EditIcon, + TrashIcon, +} from "../../../icons"; +import ConfirmDialog from "./ModalWrapper/ConfirmDialog"; + +interface IComponentsScreen { + classes: any; +} + +const styles = (theme: Theme) => + createStyles({ + ...containerForHeader(theme.spacing(4)), + root: { + fontSize: 12, + wordWrap: "break-word", + "& .min-loader": { + width: 45, + height: 45, + }, + }, + def: {}, + red: { + "& .min-icon": { + color: "red", + }, + }, + }); + +const ComponentsScreen = ({ classes }: IComponentsScreen) => { + const [dialogOpen, setDialogOpen] = useState(false); + return ( + + + + + + Buttons + + +

Buttons should always be of one of the following four types:

+ + + + + + + + + + + + + + + + + + + + + + + + +
    +
  • + Primary: A call to action. +
    • +
  • + Generic: An optional action. +
    • +
  • + Dangerous: An irreversible action. +
    • +
+ + + Icon Buttons + + +

Icon Buttons should always be of one of the following types:

+ + + + + {}} + text={"Primary"} + icon={} + color={"primary"} + variant={"outlined"} + /> + + + {}} + text={"Primary Disabled"} + icon={} + color={"primary"} + variant={"outlined"} + disabled={true} + /> + + + {}} + text={"Generic"} + icon={} + variant={"outlined"} + /> + + + {}} + text={"Generic Disabled"} + icon={} + variant={"outlined"} + disabled={true} + /> + + + {}} + text={"Dangerous"} + icon={} + color={"secondary"} + variant={"outlined"} + /> + + + {}} + text={"Dangerous Disabled"} + icon={} + color={"secondary"} + variant={"outlined"} + disabled={true} + /> + + + + + Confirm Dialogs + + +

Used to confirm a non-idempotent action.

+ + + + } + isLoading={false} + onConfirm={() => { + setDialogOpen(false); + }} + onClose={() => { + setDialogOpen(false); + }} + confirmationContent={ + + Are you sure you want to delete bucket bucket + ?
A bucket can only be deleted if it's empty. + + } + /> + + + + + ); +}; + +export default withStyles(styles)(ComponentsScreen); diff --git a/portal-ui/src/screens/Console/Common/SectionTitle.tsx b/portal-ui/src/screens/Console/Common/SectionTitle.tsx new file mode 100644 index 000000000..6565b7bf4 --- /dev/null +++ b/portal-ui/src/screens/Console/Common/SectionTitle.tsx @@ -0,0 +1,54 @@ +// 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 React from "react"; +import Grid from "@mui/material/Grid"; + +type Props = { + separator?: boolean; + actions?: React.ReactNode; +}; + +const SectionTitle: React.FC = ({ + children, + separator = true, + actions, +}) => { + return ( + + +

+ {children} +

+ + {actions && {actions}} + + ); +}; + +export default SectionTitle; diff --git a/portal-ui/src/screens/Console/Console.tsx b/portal-ui/src/screens/Console/Console.tsx index ddc491a24..fe0b13a9b 100644 --- a/portal-ui/src/screens/Console/Console.tsx +++ b/portal-ui/src/screens/Console/Console.tsx @@ -51,6 +51,7 @@ import { hasPermission } from "../../common/SecureComponent"; import { IRouteRule } from "./Menu/types"; import LoadingComponent from "../../common/LoadingComponent"; import EditPool from "./Tenants/TenantDetails/Pools/EditPool/EditPool"; +import ComponentsScreen from "./Common/ComponentsScreen"; const Trace = React.lazy(() => import("./Trace/Trace")); const Heal = React.lazy(() => import("./Heal/Heal")); @@ -613,6 +614,11 @@ const Console = ({ + + }> + + + {allowedRoutes.length > 0 ? ( ) : null} diff --git a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx index f34490046..1ad5c66d7 100644 --- a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx +++ b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx @@ -489,9 +489,7 @@ const PolicyDetails = ({ variant="standard" /> - -
- + - -
- - + {confirmOpen && ( )} - - -

Encryption

- - - { - setEncryptionEnabled(!encryptionEnabled); - }} - description="" - /> - + +

Encryption

+ + + { + setEncryptionEnabled(!encryptionEnabled); + }} + description="" + /> + + +
{encryptionEnabled && ( - + {encryptionType === "vault" && ( - + - + - + - + - - - -

- App Role -

- - - - ) => - setVaultConfiguration({ - ...vaultConfiguration, - approle: { - ...vaultConfiguration?.approle, - engine: e.target.value, - }, - }) - } - label="Engine" - value={vaultConfiguration?.approle?.engine || ""} - /> - - - ) => - setVaultConfiguration({ - ...vaultConfiguration, - approle: { - ...vaultConfiguration?.approle, - id: e.target.value, - }, - }) - } - label="AppRole ID" - value={vaultConfiguration?.approle?.id || ""} - required - error={validationErrors["vault_id"] || ""} - overlayIcon={ - showVaultAppRoleID ? ( - - ) : ( - - ) - } - overlayAction={() => - setShowVaultAppRoleID(!showVaultAppRoleID) - } - /> - - - ) => - setVaultConfiguration({ - ...vaultConfiguration, - approle: { - ...vaultConfiguration?.approle, - secret: e.target.value, - }, - }) - } - label="AppRole Secret" - value={vaultConfiguration?.approle?.secret || ""} - required - error={validationErrors["vault_secret"] || ""} - overlayIcon={ - showVaultAppRoleSecret ? ( - - ) : ( - - ) - } - overlayAction={() => - setShowVaultAppRoleSecret(!showVaultAppRoleSecret) - } - /> - - - ) => - setVaultConfiguration({ - ...vaultConfiguration, - approle: { - ...vaultConfiguration?.approle, - retry: e.target.value, - }, - }) - } - label="Retry (Seconds)" - error={validationErrors["vault_retry"] || ""} - value={vaultConfiguration?.approle?.retry || ""} - /> - - - + + App Role - - - -

- Vault Certificates (optional) -

- - + + ) => + setVaultConfiguration({ + ...vaultConfiguration, + approle: { + ...vaultConfiguration?.approle, + engine: e.target.value, + }, + }) + } + label="Engine" + value={vaultConfiguration?.approle?.engine || ""} + /> + + + ) => + setVaultConfiguration({ + ...vaultConfiguration, + approle: { + ...vaultConfiguration?.approle, + id: e.target.value, + }, + }) + } + label="AppRole ID" + value={vaultConfiguration?.approle?.id || ""} + required + error={validationErrors["vault_id"] || ""} + overlayIcon={ + showVaultAppRoleID ? ( + + ) : ( + + ) + } + overlayAction={() => + setShowVaultAppRoleID(!showVaultAppRoleID) + } + /> + + + ) => + setVaultConfiguration({ + ...vaultConfiguration, + approle: { + ...vaultConfiguration?.approle, + secret: e.target.value, + }, + }) + } + label="AppRole Secret" + value={vaultConfiguration?.approle?.secret || ""} + required + error={validationErrors["vault_secret"] || ""} + overlayIcon={ + showVaultAppRoleSecret ? ( + + ) : ( + + ) + } + overlayAction={() => + setShowVaultAppRoleSecret(!showVaultAppRoleSecret) + } + /> + + + ) => + setVaultConfiguration({ + ...vaultConfiguration, + approle: { + ...vaultConfiguration?.approle, + retry: e.target.value, + }, + }) + } + label="Retry (Seconds)" + error={validationErrors["vault_retry"] || ""} + value={vaultConfiguration?.approle?.retry || ""} + /> + + + Vault Certificates (optional) + +
Mutual TLS authentication with Vault (optional) @@ -1027,48 +990,34 @@ const TenantEncryption = ({ )}
- - - -

- Status -

- - ) => - setVaultConfiguration({ - ...vaultConfiguration, - status: { - ...vaultConfiguration?.status, - ping: e.target.value, - }, - }) - } - label="Ping (Seconds)" - error={validationErrors["vault_ping"] || ""} - value={vaultConfiguration?.status?.ping || ""} - /> - + + Status + + + ) => + setVaultConfiguration({ + ...vaultConfiguration, + status: { + ...vaultConfiguration?.status, + ping: e.target.value, + }, + }) + } + label="Ping (Seconds)" + error={validationErrors["vault_ping"] || ""} + value={vaultConfiguration?.status?.ping || ""} + /> )} {encryptionType === "azure" && ( - + - +
Credentials - + - + - + - + - + - +
Credentials - + - + - + - + - + - + - + - +
Credentials - + - + - + - +
Credentials - + - + - +
@@ -1599,39 +1546,24 @@ const TenantEncryption = ({ )} - - - -

- Additional Configuration for KES -

- - - - setEnabledCustomCertificates(!enabledCustomCertificates) - } - label={"Custom Certificates"} - /> - + + Additional Configuration for KES + + + + setEnabledCustomCertificates(!enabledCustomCertificates) + } + label={"Custom Certificates"} + /> {enabledCustomCertificates && ( - +
KES server TLS Certificates (optional) @@ -1684,7 +1616,7 @@ const TenantEncryption = ({ )}
- +
Mutual TLS authentication with MinIO (optional) @@ -1738,7 +1670,7 @@ const TenantEncryption = ({ )} - + - + - - - + SecurityContext for KES + + +
+
-

- SecurityContext for KES -

- - -
-
- ) => { - setSecurityContext({ - ...securityContext, - runAsUser: e.target.value, - }); - }} - label="Run As User" - value={securityContext.runAsUser} - required - error={ - validationErrors["kes_securityContext_runAsUser"] || - "" - } - min="0" - /> -
-
- ) => { - setSecurityContext({ - ...securityContext, - runAsGroup: e.target.value, - }); - }} - label="Run As Group" - value={securityContext.runAsGroup} - required - error={ - validationErrors["kes_securityContext_runAsGroup"] || - "" - } - min="0" - /> -
-
- ) => { - setSecurityContext({ - ...securityContext, - fsGroup: e.target.value, - }); - }} - label="FsGroup" - value={securityContext.fsGroup} - required - error={ - validationErrors["kes_securityContext_fsGroup"] || "" - } - min="0" - /> -
-
- -
- - { - const targetD = e.target; - const checked = targetD.checked; + ) => { setSecurityContext({ ...securityContext, - runAsNonRoot: checked, + runAsUser: e.target.value, }); }} - label={"Do not run as Root"} + label="Run As User" + value={securityContext.runAsUser} + required + error={ + validationErrors["kes_securityContext_runAsUser"] || "" + } + min="0" /> - - +
+
+ ) => { + setSecurityContext({ + ...securityContext, + runAsGroup: e.target.value, + }); + }} + label="Run As Group" + value={securityContext.runAsGroup} + required + error={ + validationErrors["kes_securityContext_runAsGroup"] || "" + } + min="0" + /> +
+
+ ) => { + setSecurityContext({ + ...securityContext, + fsGroup: e.target.value, + }); + }} + label="FsGroup" + value={securityContext.fsGroup} + required + error={ + validationErrors["kes_securityContext_fsGroup"] || "" + } + min="0" + /> +
+
- + + { + const targetD = e.target; + const checked = targetD.checked; + setSecurityContext({ + ...securityContext, + runAsNonRoot: checked, + }); + }} + label={"Do not run as Root"} + /> + + )} - + - - + + + )} diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx index 4243c053c..fa958d73b 100644 --- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx +++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx @@ -28,7 +28,6 @@ import { tenantDetailsStyles, wizardCommon, } from "../../Common/FormComponents/common/styleLibrary"; -import Paper from "@mui/material/Paper"; import Grid from "@mui/material/Grid"; import React, { Fragment, useCallback, useEffect, useState } from "react"; import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper"; @@ -44,6 +43,7 @@ import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog"; import { AddIcon, ConfirmModalIcon } from "../../../../icons"; import Loader from "../../Common/Loader/Loader"; import TLSCertificate from "../../Common/TLSCertificate/TLSCertificate"; +import SectionTitle from "../../Common/SectionTitle"; interface ITenantSecurity { classes: any; @@ -78,12 +78,6 @@ const styles = (theme: Theme) => flexFlow: "column", }, }, - certInputRow: { - display: "flex", - alignItems: "center", - borderBottom: "1px solid #eaeaea", - marginBottom: 10, - }, caCertsRow: { borderBottom: "1px solid #eaeaea", display: "flex", @@ -341,212 +335,209 @@ const TenantSecurity = ({ } /> {loadingTenant ? ( - -
- -
- +
+ +
) : ( - -

Security

- - - - { - const targetD = e.target; - const checked = targetD.checked; - setEnableAutoCert(checked); - }} - label={"TLS"} - description={ - "The internode certificates will be generated and managed by MinIO Operator" - } - /> + + +

Security

+
+ + + { + const targetD = e.target; + const checked = targetD.checked; + setEnableAutoCert(checked); + }} + label={"TLS"} + description={ + "The internode certificates will be generated and managed by MinIO Operator" + } + /> + + + { + const targetD = e.target; + const checked = targetD.checked; + setEnableCustomCerts(checked); + }} + label={"Custom Certificates"} + description={"Certificates used to terminated TLS at MinIO"} + /> + + + {enableCustomCerts && ( + + + MinIO Certificates - - { - const targetD = e.target; - const checked = targetD.checked; - setEnableCustomCerts(checked); - }} - label={"Custom Certificates"} - /> + + {minioTLSCertificateSecrets.map( + (certificateInfo: ICertificateInfo) => ( + removeCertificate(certificateInfo)} + /> + ) + )} - - {enableCustomCerts && ( - - -

MinIO Certificates

- - - {minioTLSCertificateSecrets.map( - (certificateInfo: ICertificateInfo) => ( - removeCertificate(certificateInfo)} - /> - ) - )} - - - - {minioCertificates.map((keyPair) => ( - - - - - addFileToKeyPair( - "minio", - keyPair.id, - "cert", - fileName, - encodedValue - ) - } - accept=".cer,.crt,.cert,.pem" - id="tlsCert" - name="tlsCert" - label="Cert" - value={keyPair.cert} - /> - - - - addFileToKeyPair( - "minio", - keyPair.id, - "key", - fileName, - encodedValue - ) - } - accept=".key,.pem" - id="tlsKey" - name="tlsKey" - label="Key" - value={keyPair.key} - /> - - - - - - - ))} - - - - - - -

MinIO CA Certificates

- - - {minioTLSCaCertificateSecrets.map( - (certificateInfo: ICertificateInfo) => ( - removeCertificate(certificateInfo)} + + + addFileToKeyPair( + "minio", + keyPair.id, + "cert", + fileName, + encodedValue + ) + } + accept=".cer,.crt,.cert,.pem" + id="tlsCert" + name="tlsCert" + label="Cert" + value={keyPair.cert} /> - ) - )} - - - - {minioCaCertificates.map((keyPair: KeyPair) => ( - - - - addFileToKeyPair( - "minioCAs", - keyPair.id, - "cert", - fileName, - encodedValue - ) - } - accept=".cer,.crt,.cert,.pem" - id="tlsCert" - name="tlsCert" - label="Cert" - value={keyPair.cert} - /> - - - - - ))} - - - - - - )} + + + addFileToKeyPair( + "minio", + keyPair.id, + "key", + fileName, + encodedValue + ) + } + accept=".key,.pem" + id="tlsKey" + name="tlsKey" + label="Key" + value={keyPair.key} + /> + + + + + + ))} + + + + - - - - - + + MinIO CA Certificates + + + {minioTLSCaCertificateSecrets.map( + (certificateInfo: ICertificateInfo) => ( + removeCertificate(certificateInfo)} + /> + ) + )} + + + + {minioCaCertificates.map((keyPair: KeyPair) => ( + + + + addFileToKeyPair( + "minioCAs", + keyPair.id, + "cert", + fileName, + encodedValue + ) + } + accept=".cer,.crt,.cert,.pem" + id="tlsCert" + name="tlsCert" + label="Cert" + value={keyPair.cert} + /> + + + + + + ))} + + + + + + )} + + + + + )} ); diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx index e4ac75900..c487663ce 100644 --- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx +++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx @@ -24,17 +24,15 @@ import { containerForHeader, tenantDetailsStyles, } from "../../Common/FormComponents/common/styleLibrary"; -import { Box, Grid, Stack } from "@mui/material"; -import Paper from "@mui/material/Paper"; +import { Box, Grid } from "@mui/material"; import { ITenant } from "../ListTenants/types"; import UpdateTenantModal from "./UpdateTenantModal"; import { AppState } from "../../../../store"; import AButton from "../../Common/AButton/AButton"; -import { styled } from "@mui/styles"; import SummaryUsageBar from "../../Common/UsageBarWrapper/SummaryUsageBar"; import LabelValuePair from "../../Common/UsageBarWrapper/LabelValuePair"; import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper"; -import StackRow from "../../Common/UsageBarWrapper/StackRow"; +import SectionTitle from "../../Common/SectionTitle"; interface ITenantsSummary { classes: any; @@ -114,10 +112,6 @@ const styles = (theme: Theme) => ...containerForHeader(theme.spacing(4)), }); -const StackItem = styled(Paper)(({ theme }) => ({ - border: 0, -})); - const healthStatusToClass = (health_status: string = "red", classes: any) => { return health_status === "red" ? classes.redState @@ -226,15 +220,7 @@ const TenantSummary = ({ /> )} - - -

Details

- - - + Details @@ -361,64 +347,49 @@ const TenantSummary = ({ - - -

- Features -

- - - + Features + + - - - - - + + + + + - - - - + + + ); }; diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx index e9b1a8ec4..303489b74 100644 --- a/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx +++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx @@ -131,59 +131,61 @@ const TenantVolumes = ({ closeDeleteModalAndRefresh={closeDeleteModalAndRefresh} /> )} -

Volumes

- - - - - ), - }} - onChange={(e) => { - setFilter(e.target.value); - }} - variant="standard" - /> - - - + +

Volumes

+ + + + + ), + }} + onChange={(e) => { + setFilter(e.target.value); + }} + variant="standard" + /> + + + + );