From 9db0c358a46fec9f2087f46eea6e12bec0974cd2 Mon Sep 17 00:00:00 2001 From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com> Date: Tue, 30 Nov 2021 19:21:55 +0000 Subject: [PATCH] UX Create New Tenant (#1266) --- .../RadioGroupSelector/RadioGroupSelector.tsx | 2 +- .../FormComponents/common/styleLibrary.ts | 12 + .../Common/GenericWizard/GenericWizard.tsx | 38 +- .../Common/GenericWizard/WizardPage.tsx | 6 +- .../Console/Tenants/AddTenant/AddTenant.tsx | 12 +- .../Tenants/AddTenant/Steps/Affinity.tsx | 110 ++- .../Tenants/AddTenant/Steps/Configure.tsx | 414 +++++---- .../Tenants/AddTenant/Steps/Encryption.tsx | 823 ++++++++++-------- .../AddTenant/Steps/IdentityProvider.tsx | 206 +++-- .../Tenants/AddTenant/Steps/Images.tsx | 43 +- .../Tenants/AddTenant/Steps/NameTenant.tsx | 52 +- .../Tenants/AddTenant/Steps/Security.tsx | 293 ++++--- .../Tenants/AddTenant/Steps/SizePreview.tsx | 6 +- .../Tenants/AddTenant/Steps/TenantSize.tsx | 94 +- .../Steps/helpers/AddNamespaceModal.tsx | 36 +- 15 files changed, 1336 insertions(+), 811 deletions(-) diff --git a/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx index e3d24412d..ef60b3eac 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx +++ b/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx @@ -125,7 +125,7 @@ export const RadioGroupSelector = ({ )} - + paddedContentGrid: { marginTop: 8, padding: "0 10px", + minHeight: 400, }, stepsLabel: { fontSize: 20, @@ -89,6 +90,21 @@ const styles = (theme: Theme) => width: "100%", maxHeight: 90, }, + verticalSteps: { + borderRight: "1px solid #EAEAEA", + background: "#FBFAFA", + }, + stepsContainer: { + paddingTop: 0, + "& .MuiButtonBase-root.Mui-selected": { + background: "#EAEAEA", + }, + }, + stepItem: { + "&:hover": { + background: "rgba(247,247,247,0.7)", + }, + }, }); const GenericWizard = ({ @@ -143,14 +159,24 @@ const GenericWizard = ({ const stepsList = () => { return ( - + {wizardSteps.map((step, index) => { return ( pageChange(index)} key={`wizard-${index.toString()}`} selected={currentStep === index} + classes={{ + root: classes.stepItem, + }} > @@ -194,7 +220,15 @@ const GenericWizard = ({ ) : ( - + {stepsList()} diff --git a/portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx b/portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx index 94b8cc484..96aace911 100644 --- a/portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx +++ b/portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx @@ -26,12 +26,14 @@ const styles = (theme: Theme) => wizardStepContainer: { display: "flex", flexDirection: "column", + flex: 1, }, wizardComponent: { overflowY: "auto", marginBottom: 10, height: "calc(100vh - 100px - 80px)", - maxWidth: 840, + minHeight: 400, + flex: 1, width: "100%", }, wizardModal: { @@ -53,9 +55,9 @@ const styles = (theme: Theme) => }, }, buttonInnerContainer: { - maxWidth: 840, width: "100%", textAlign: "right" as const, + marginRight: 15, }, }); diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx index 4c4769863..8ddbcaa40 100644 --- a/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx +++ b/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx @@ -51,6 +51,8 @@ import Affinity from "./Steps/Affinity"; import PageHeader from "../../Common/PageHeader/PageHeader"; import history from "../../../../history"; import Images from "./Steps/Images"; +import PageLayout from "../../Common/Layout/PageLayout"; +import BackLink from "../../../../common/BackLink"; interface IAddTenantProps { setErrorSnackMessage: typeof setErrorSnackMessage; @@ -69,6 +71,9 @@ const styles = (theme: Theme) => buttonContainer: { textAlign: "right", }, + pageBox: { + border: "1px solid #EAEAEA", + }, ...modalBasic, ...wizardCommon, ...settingsCommon, @@ -728,16 +733,17 @@ const AddTenant = ({ /> )} - + + {addSending && ( )} - + - + ); }; diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx index 0d26a10bc..e175c4aea 100644 --- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx +++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx @@ -56,12 +56,62 @@ const styles = (theme: Theme) => textAlign: "right", }, overlayAction: { - lineHeight: "50px", - float: "left", + marginLeft: 10, "& svg": { maxWidth: 15, maxHeight: 15, }, + "& button": { + background: "#EAEAEA", + }, + }, + radioOptionsLayout: { + "& div": { + display: "flex", + flexFlow: "column", + }, + }, + affinityConfigField: { + display: "flex", + }, + + affinityFieldLabel: { + display: "flex", + flexFlow: "column", + flex: 1, + }, + radioField: { + display: "flex", + alignItems: "flex-start", + marginTop: 10, + "& div:first-child": { + display: "flex", + flexFlow: "column", + alignItems: "baseline", + textAlign: "left !important", + }, + }, + affinityLabelKey: { + "& div:first-child": { + marginBottom: 0, + }, + }, + affinityLabelValue: { + marginLeft: 10, + "& div:first-child": { + marginBottom: 0, + }, + }, + rowActions: { + display: "flex", + alignItems: "center", + }, + fieldContainer: { + marginBottom: 0, + }, + affinityRow: { + marginBottom: 10, + display: "flex", }, ...modalBasic, ...wizardCommon, @@ -196,22 +246,32 @@ const Affinity = ({ Configure how pods will be assigned to nodes - - { - updateField("podAffinity", e.target.value); - }} - selectorOptions={[ - { label: "None", value: "none" }, - { label: "Default (Pod Anti-Affinnity)", value: "default" }, - { label: "Node Selector", value: "nodeSelector" }, - ]} - /> - MinIO supports multiple configurations for Pod Affinity + + +
Type
+
+ MinIO supports multiple configurations for Pod Affinity +
+ + { + updateField("podAffinity", e.target.value); + }} + selectorOptions={[ + { label: "None", value: "none" }, + { label: "Default (Pod Anti-Affinnity)", value: "default" }, + { label: "Node Selector", value: "nodeSelector" }, + ]} + /> + + {podAffinity === "nodeSelector" && ( @@ -238,8 +298,8 @@ const Affinity = ({ {keyValuePairs && keyValuePairs.map((kvp, i) => { return ( - - + + {keyOptions.length > 0 && ( ) => { @@ -258,6 +318,7 @@ const Affinity = ({ label={""} value={kvp.key} options={keyOptions} + classes={classes.fieldContainer} /> )} {keyOptions.length === 0 && ( @@ -276,10 +337,11 @@ const Affinity = ({ }} index={i} placeholder={"Key"} + classes={classes.fieldContainer} /> )} - + {keyOptions.length > 0 && ( ) => { @@ -301,6 +363,7 @@ const Affinity = ({ }) : [] } + classes={classes.fieldContainer} /> )} {keyOptions.length === 0 && ( @@ -319,10 +382,11 @@ const Affinity = ({ }} index={i} placeholder={"value"} + classes={classes.fieldContainer} /> )} - +
)} - + ); })} diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx index fb51aed94..7e25c8b47 100644 --- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx +++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx @@ -14,13 +14,14 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { Fragment, useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { connect } from "react-redux"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; import { Grid, Paper, SelectChangeEvent } from "@mui/material"; import { + createTenantCommon, modalBasic, wizardCommon, } from "../../../Common/FormComponents/common/styleLibrary"; @@ -77,6 +78,62 @@ const styles = (theme: Theme) => buttonContainer: { textAlign: "right", }, + configSectionItem: { + marginRight: 15, + + "& .multiContainer": { + border: "1px solid red", + }, + }, + inputLabel: { + fontWeight: 300, + fontSize: 14, + }, + textBoxContainer: { + "& input": { + fontWeight: 400, + }, + }, + tenantCustomizationFields: { + marginLeft: 30, // 2nd Level(15+15) + width: "88%", + margin: "auto", + }, + containerItem: { + marginRight: 15, + }, + fieldGroup: { + ...createTenantCommon.fieldGroup, + paddingTop: 15, + marginBottom: 25, + }, + responsiveSectionItem: { + "@media (max-width: 900px)": { + flexFlow: "column", + alignItems: "flex-start", + + "& div > div": { + marginBottom: 5, + marginRight: 0, + }, + }, + }, + + logSearchCustomFields: { + marginLeft: 20, // 2nd Level(15+15) + padding: 10, + width: "90%", + margin: "auto", + }, + fieldSpaceTop: { + marginTop: 15, + }, + prometheusCustomFields: { + marginLeft: 20, // 2nd Level(15+15) + padding: 10, + width: "90%", + margin: "auto", + }, ...modalBasic, ...wizardCommon, }); @@ -447,12 +504,13 @@ const Configure = ({ Whether the tenant's services should request an external IP.
- + { const targetD = e.target; const checked = targetD.checked; @@ -462,11 +520,12 @@ const Configure = ({ label={"Expose MiniO Service"} /> - + { const targetD = e.target; @@ -485,7 +544,7 @@ const Configure = ({ Search, Prometheus add-ons and your Tenant - + {tenantCustom && ( - - - SecurityContext for MinIO - -
-
- -
-
- ) => { + +
+ + SecurityContext for MinIO + + +
+
+ ) => { + updateField("tenantSecurityContext", { + ...tenantSecurityContext, + runAsUser: e.target.value, + }); + cleanValidation("tenant_securityContext_runAsUser"); + }} + label="Run As User" + value={tenantSecurityContext.runAsUser} + required + error={ + validationErrors["tenant_securityContext_runAsUser"] || "" + } + min="0" + /> +
+
+ ) => { + updateField("tenantSecurityContext", { + ...tenantSecurityContext, + runAsGroup: e.target.value, + }); + cleanValidation("tenant_securityContext_runAsGroup"); + }} + label="Run As Group" + value={tenantSecurityContext.runAsGroup} + required + error={ + validationErrors["tenant_securityContext_runAsGroup"] || + "" + } + min="0" + /> +
+
+ ) => { + updateField("tenantSecurityContext", { + ...tenantSecurityContext, + fsGroup: e.target.value, + }); + cleanValidation("tenant_securityContext_fsGroup"); + }} + label="FsGroup" + value={tenantSecurityContext.fsGroup} + required + error={ + validationErrors["tenant_securityContext_fsGroup"] || "" + } + min="0" + /> +
+
+ +
+ +
+ { + const targetD = e.target; + const checked = targetD.checked; updateField("tenantSecurityContext", { ...tenantSecurityContext, - runAsUser: e.target.value, + runAsNonRoot: checked, }); - cleanValidation("tenant_securityContext_runAsUser"); }} - label="Run As User" - value={tenantSecurityContext.runAsUser} - required - error={ - validationErrors["tenant_securityContext_runAsUser"] || "" - } - min="0" + label={"Do not run as Root"} />
-
- ) => { - updateField("tenantSecurityContext", { - ...tenantSecurityContext, - runAsGroup: e.target.value, - }); - cleanValidation("tenant_securityContext_runAsGroup"); - }} - label="Run As Group" - value={tenantSecurityContext.runAsGroup} - required - error={ - validationErrors["tenant_securityContext_runAsGroup"] || "" - } - min="0" - /> -
-
- ) => { - updateField("tenantSecurityContext", { - ...tenantSecurityContext, - fsGroup: e.target.value, - }); - cleanValidation("tenant_securityContext_fsGroup"); - }} - label="FsGroup" - value={tenantSecurityContext.fsGroup} - required - error={ - validationErrors["tenant_securityContext_fsGroup"] || "" - } - min="0" - /> -
-
- -
- -
- { - const targetD = e.target; - const checked = targetD.checked; - updateField("tenantSecurityContext", { - ...tenantSecurityContext, - runAsNonRoot: checked, - }); - }} - label={"Do not run as Root"} - /> -
- - + + + )} - + {logSearchCustom && ( - + ) => { @@ -631,37 +698,41 @@ const Configure = ({
-
- ) => { - updateField("logSearchVolumeSize", e.target.value); - cleanValidation("log_search_volume_size"); - }} - label="Storage Size [Gi]" - value={logSearchVolumeSize} - required - error={validationErrors["log_search_volume_size"] || ""} - min="0" - /> -
+ ) => { + updateField("logSearchVolumeSize", e.target.value); + cleanValidation("log_search_volume_size"); + }} + label="Storage Size [Gi]" + value={logSearchVolumeSize} + required + error={validationErrors["log_search_volume_size"] || ""} + min="0" + />
- - + +
+ SecurityContext for LogSearch - -
-
+ + -
-
+
+
) => { updateField("logSearchSecurityContext", { ...logSearchSecurityContext, @@ -679,11 +750,12 @@ const Configure = ({ min="0" />
-
+
) => { updateField("logSearchSecurityContext", { ...logSearchSecurityContext, @@ -702,11 +774,12 @@ const Configure = ({ min="0" />
-
+
) => { updateField("logSearchSecurityContext", { ...logSearchSecurityContext, @@ -733,6 +806,7 @@ const Configure = ({ value="logSearchSecurityContextRunAsNonRoot" id="logSearch_securityContext_runAsNonRoot" name="logSearch_securityContext_runAsNonRoot" + classes={classes} checked={logSearchSecurityContext.runAsNonRoot} onChange={(e) => { const targetD = e.target; @@ -746,20 +820,22 @@ const Configure = ({ />
- - - +
+
+ SecurityContext for PostgreSQL - -
-
+ + -
-
+
+
) => { updateField("logSearchPostgresSecurityContext", { ...logSearchPostgresSecurityContext, @@ -777,11 +853,12 @@ const Configure = ({ min="0" />
-
+
) => { updateField("logSearchPostgresSecurityContext", { ...logSearchPostgresSecurityContext, @@ -799,11 +876,12 @@ const Configure = ({ min="0" />
-
+
) => { updateField("logSearchPostgresSecurityContext", { ...logSearchPostgresSecurityContext, @@ -829,6 +907,7 @@ const Configure = ({ value="postgresSecurityContextRunAsNonRoot" id="postgres_securityContext_runAsNonRoot" name="postgres_securityContext_runAsNonRoot" + classes={classes} checked={logSearchPostgresSecurityContext.runAsNonRoot} onChange={(e) => { const targetD = e.target; @@ -842,10 +921,10 @@ const Configure = ({ />
- - +
+ )} - + {prometheusCustom && ( - + ) => { updateField( "prometheusSelectedStorageClass", @@ -880,37 +960,39 @@ const Configure = ({
-
- ) => { - updateField("prometheusVolumeSize", e.target.value); - cleanValidation("prometheus_volume_size"); - }} - label="Storage Size [Gi]" - value={prometheusVolumeSize} - required - error={validationErrors["prometheus_volume_size"] || ""} - min="0" - /> -
+ ) => { + updateField("prometheusVolumeSize", e.target.value); + cleanValidation("prometheus_volume_size"); + }} + label="Storage Size [Gi]" + value={prometheusVolumeSize} + required + error={validationErrors["prometheus_volume_size"] || ""} + min="0" + />
- - +
+ SecurityContext for Prometheus - -
-
- -
-
+ + +
+
) => { updateField("prometheusSecurityContext", { ...prometheusSecurityContext, @@ -929,11 +1011,12 @@ const Configure = ({ min="0" />
-
+
) => { updateField("prometheusSecurityContext", { ...prometheusSecurityContext, @@ -952,11 +1035,12 @@ const Configure = ({ min="0" />
-
+
) => { updateField("prometheusSecurityContext", { ...prometheusSecurityContext, @@ -976,13 +1060,15 @@ const Configure = ({
-
- -
+ +
{ const targetD = e.target; @@ -996,8 +1082,8 @@ const Configure = ({ />
- - +
+ )} ); diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx index 98ccce960..fff5f0d19 100644 --- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx +++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx @@ -19,7 +19,7 @@ import { connect } from "react-redux"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; -import { Paper, Typography } from "@mui/material"; +import { Paper } from "@mui/material"; import Grid from "@mui/material/Grid"; import { updateAddField, @@ -31,6 +31,8 @@ import { addFileGemaltoCa, } from "../../actions"; import { + createTenantCommon, + formFieldStyles, modalBasic, wizardCommon, } from "../../../Common/FormComponents/common/styleLibrary"; @@ -106,6 +108,35 @@ const styles = (theme: Theme) => buttonContainer: { textAlign: "right", }, + encryptionTypeOptions: { + marginBottom: 15, + }, + mutualTlsConfig: { + marginTop: 15, + "& fieldset": { + flex: 1, + }, + }, + fileInputField: { + borderBottom: "1px solid #EAEAEA", + "&:last-child": { + borderBottom: 0, + }, + "& input": { + borderBottom: 0, + }, + }, + rightSpacer: { + marginRight: 15, + }, + responsiveContainer: { + "@media (max-width: 900px)": { + display: "flex", + flexFlow: "column", + }, + }, + ...createTenantCommon, + ...formFieldStyles, ...modalBasic, ...wizardCommon, }); @@ -443,7 +474,7 @@ const Encryption = ({ {enableEncryption && ( - + {(enableCustomCertsForKES || !enableAutoCert) && ( - - - Encryption Service Certificates - - - - { - addFileServerCert("key", fileName, encodedValue); - cleanValidation("serverKey"); - }} - accept=".key,.pem" - id="serverKey" - name="serverKey" - label="Key" - error={validationErrors["serverKey"] || ""} - value={serverCertificate.key} - required={!enableAutoCert} - /> - - - { - addFileServerCert("cert", fileName, encodedValue); - cleanValidation("serverCert"); - }} - accept=".cer,.crt,.cert,.pem" - id="serverCert" - name="serverCert" - label="Cert" - error={validationErrors["serverCert"] || ""} - value={serverCertificate.cert} - required={!enableAutoCert} - /> + +
+ Encryption Service Certificates + { + addFileServerCert("key", fileName, encodedValue); + cleanValidation("serverKey"); + }} + accept=".key,.pem" + id="serverKey" + name="serverKey" + label="Key" + error={validationErrors["serverKey"] || ""} + value={serverCertificate.key} + required={!enableAutoCert} + /> + { + addFileServerCert("cert", fileName, encodedValue); + cleanValidation("serverCert"); + }} + accept=".cer,.crt,.cert,.pem" + id="serverCert" + name="serverCert" + label="Cert" + error={validationErrors["serverCert"] || ""} + value={serverCertificate.cert} + required={!enableAutoCert} + /> +
- - - Mutual TLS authentication - - - - - { - addFileClientCert("key", fileName, encodedValue); - cleanValidation("clientKey"); - }} - accept=".key,.pem" - id="clientKey" - name="clientKey" - label="Key" - error={validationErrors["clientKey"] || ""} - value={clientCertificate.key} - required={!enableAutoCert} - /> - - - { - addFileClientCert("cert", fileName, encodedValue); - cleanValidation("clientCert"); - }} - accept=".cer,.crt,.cert,.pem" - id="clientCert" - name="clientCert" - label="Cert" - error={validationErrors["clientCert"] || ""} - value={clientCertificate.cert} - required={!enableAutoCert} - /> + + +
+ Mutual TLS authentication + { + addFileClientCert("key", fileName, encodedValue); + cleanValidation("clientKey"); + }} + accept=".key,.pem" + id="clientKey" + name="clientKey" + label="Key" + error={validationErrors["clientKey"] || ""} + value={clientCertificate.key} + required={!enableAutoCert} + /> + { + addFileClientCert("cert", fileName, encodedValue); + cleanValidation("clientCert"); + }} + accept=".cer,.crt,.cert,.pem" + id="clientCert" + name="clientCert" + label="Cert" + error={validationErrors["clientCert"] || ""} + value={clientCertificate.cert} + required={!enableAutoCert} + /> +
)} - + - + - + - + -
App Role
+ - ) => { - updateField("vaultAppRoleEngine", e.target.value); - }} - label="Engine" - value={vaultAppRoleEngine} - /> +
+ App Role + + ) => { + updateField("vaultAppRoleEngine", e.target.value); + }} + label="Engine" + value={vaultAppRoleEngine} + /> + + + ) => { + updateField("vaultId", e.target.value); + cleanValidation("vault_id"); + }} + label="AppRole ID" + value={vaultId} + error={validationErrors["vault_id"] || ""} + required + /> + + + ) => { + updateField("vaultSecret", e.target.value); + cleanValidation("vault_secret"); + }} + label="AppRole Secret" + value={vaultSecret} + error={validationErrors["vault_secret"] || ""} + required + /> + + + ) => { + updateField("vaultRetry", e.target.value); + cleanValidation("vault_retry"); + }} + label="Retry (Seconds)" + value={vaultRetry} + error={validationErrors["vault_retry"] || ""} + /> + +
- - ) => { - updateField("vaultId", e.target.value); - cleanValidation("vault_id"); - }} - label="AppRole ID" - value={vaultId} - error={validationErrors["vault_id"] || ""} - required - /> - - - ) => { - updateField("vaultSecret", e.target.value); - cleanValidation("vault_secret"); - }} - label="AppRole Secret" - value={vaultSecret} - error={validationErrors["vault_secret"] || ""} - required - /> - - - ) => { - updateField("vaultRetry", e.target.value); - cleanValidation("vault_retry"); - }} - label="Retry (Seconds)" - value={vaultRetry} - error={validationErrors["vault_retry"] || ""} - /> - -
Mutual TLS authentication (optional)
- - + + +
+ Mutual TLS authentication (optional) { addFileVaultCert("key", fileName, encodedValue); cleanValidation("vault_key"); @@ -675,9 +709,8 @@ const Encryption = ({ label="Key" value={vaultCertificate.key} /> - - { addFileVaultCert("cert", fileName, encodedValue); cleanValidation("vault_cert"); @@ -688,42 +721,48 @@ const Encryption = ({ label="Cert" value={vaultCertificate.cert} /> - + { + addFileVaultCa(fileName, encodedValue); + cleanValidation("vault_ca"); + }} + accept=".cer,.crt,.cert,.pem" + id="vault_ca" + name="vault_ca" + label="CA" + value={vaultCA.cert} + /> +
- - { - addFileVaultCa(fileName, encodedValue); - cleanValidation("vault_ca"); - }} - accept=".cer,.crt,.cert,.pem" - id="vault_ca" - name="vault_ca" - label="CA" - value={vaultCA.cert} - /> - -
Status
- - ) => { - updateField("vaultPing", e.target.value); - cleanValidation("vault_ping"); - }} - label="Ping (Seconds)" - value={vaultPing} - error={validationErrors["vault_ping"] || ""} - /> + +
+ Status + ) => { + updateField("vaultPing", e.target.value); + cleanValidation("vault_ping"); + }} + label="Ping (Seconds)" + value={vaultPing} + error={validationErrors["vault_ping"] || ""} + /> +
)} {encryptionType === "azure" && ( - + -
Credentials
- ) => { - updateField("azureTenantID", e.target.value); - cleanValidation("azure_tenant_id"); - }} - label="Tenant ID" - value={azureTenantID} - error={validationErrors["azure_tenant_id"] || ""} - /> - - - ) => { - updateField("azureClientID", e.target.value); - cleanValidation("azure_client_id"); - }} - label="Client ID" - value={azureClientID} - error={validationErrors["azure_client_id"] || ""} - /> - - - ) => { - updateField("azureClientSecret", e.target.value); - cleanValidation("azure_client_secret"); - }} - label="Client Secret" - value={azureClientSecret} - error={validationErrors["azure_client_secret"] || ""} - /> +
+ Credentials + + ) => { + updateField("azureTenantID", e.target.value); + cleanValidation("azure_tenant_id"); + }} + label="Tenant ID" + value={azureTenantID} + error={validationErrors["azure_tenant_id"] || ""} + /> + + + ) => { + updateField("azureClientID", e.target.value); + cleanValidation("azure_client_id"); + }} + label="Client ID" + value={azureClientID} + error={validationErrors["azure_client_id"] || ""} + /> + + + ) => { + updateField("azureClientSecret", e.target.value); + cleanValidation("azure_client_secret"); + }} + label="Client Secret" + value={azureClientSecret} + error={validationErrors["azure_client_secret"] || ""} + /> + +
)} {encryptionType === "gcp" && ( - + - + -
Credentials
- ) => { - updateField("gcpClientEmail", e.target.value); - }} - label="Client Email" - value={gcpClientEmail} - /> - - - ) => { - updateField("gcpClientID", e.target.value); - }} - label="Client ID" - value={gcpClientID} - /> - - - ) => { - updateField("gcpPrivateKeyID", e.target.value); - }} - label="Private Key ID" - value={gcpPrivateKeyID} - /> - - - ) => { - updateField("gcpPrivateKey", e.target.value); - }} - label="Private Key" - value={gcpPrivateKey} - /> +
+ Credentials + + ) => { + updateField("gcpClientEmail", e.target.value); + }} + label="Client Email" + value={gcpClientEmail} + /> + + + ) => { + updateField("gcpClientID", e.target.value); + }} + label="Client ID" + value={gcpClientID} + /> + + + ) => { + updateField("gcpPrivateKeyID", e.target.value); + }} + label="Private Key ID" + value={gcpPrivateKeyID} + /> + + + ) => { + updateField("gcpPrivateKey", e.target.value); + }} + label="Private Key" + value={gcpPrivateKey} + /> + +
)} {encryptionType === "aws" && ( - + - + - + -
Credentials
- ) => { - updateField("awsAccessKey", e.target.value); - cleanValidation("aws_accessKey"); - }} - label="Access Key" - value={awsAccessKey} - error={validationErrors["aws_accessKey"] || ""} - required - /> - - - ) => { - updateField("awsSecretKey", e.target.value); - cleanValidation("aws_secretKey"); - }} - label="Secret Key" - value={awsSecretKey} - error={validationErrors["aws_secretKey"] || ""} - required - /> - - - ) => { - updateField("awsToken", e.target.value); - }} - label="Token" - value={awsToken} - /> +
+ Credentials + + ) => { + updateField("awsAccessKey", e.target.value); + cleanValidation("aws_accessKey"); + }} + label="Access Key" + value={awsAccessKey} + error={validationErrors["aws_accessKey"] || ""} + required + /> + + + ) => { + updateField("awsSecretKey", e.target.value); + cleanValidation("aws_secretKey"); + }} + label="Secret Key" + value={awsSecretKey} + error={validationErrors["aws_secretKey"] || ""} + required + /> + + + ) => { + updateField("awsToken", e.target.value); + }} + label="Token" + value={awsToken} + /> + +
)} {encryptionType === "gemalto" && ( - + -
Credentials
- - ) => { - updateField("gemaltoToken", e.target.value); - cleanValidation("gemalto_token"); - }} - label="Token" - value={gemaltoToken} - error={validationErrors["gemalto_token"] || ""} - required - /> + +
+ Credentials + + ) => { + updateField("gemaltoToken", e.target.value); + cleanValidation("gemalto_token"); + }} + label="Token" + value={gemaltoToken} + error={validationErrors["gemalto_token"] || ""} + required + /> + + + ) => { + updateField("gemaltoDomain", e.target.value); + cleanValidation("gemalto_domain"); + }} + label="Domain" + value={gemaltoDomain} + error={validationErrors["gemalto_domain"] || ""} + required + /> + + + ) => { + updateField("gemaltoRetry", e.target.value); + cleanValidation("gemalto_retry"); + }} + label="Retry (seconds)" + value={gemaltoRetry} + error={validationErrors["gemalto_retry"] || ""} + /> + +
- - ) => { - updateField("gemaltoDomain", e.target.value); - cleanValidation("gemalto_domain"); - }} - label="Domain" - value={gemaltoDomain} - error={validationErrors["gemalto_domain"] || ""} - required - /> - - - ) => { - updateField("gemaltoRetry", e.target.value); - cleanValidation("gemalto_retry"); - }} - label="Retry (seconds)" - value={gemaltoRetry} - error={validationErrors["gemalto_retry"] || ""} - /> - -
Custom CA Root certificate verification
- - { - addFileGemaltoCa(fileName, encodedValue); - cleanValidation("gemalto_ca"); - }} - accept=".cer,.crt,.cert,.pem" - id="gemalto_ca" - name="gemalto_ca" - label="CA" - value={gemaltoCA.cert} - /> + +
+ Custom CA Root certificate verification + + { + addFileGemaltoCa(fileName, encodedValue); + cleanValidation("gemalto_ca"); + }} + accept=".cer,.crt,.cert,.pem" + id="gemalto_ca" + name="gemalto_ca" + label="CA" + value={gemaltoCA.cert} + /> +
)}
-

Additional Configurations

+

Additional Configurations

- - - ) => { - updateField("replicas", e.target.value); - cleanValidation("replicas"); - }} - label="Replicas" - value={replicas} - required - error={validationErrors["replicas"] || ""} - /> - - - - SecurityContext for KES pods - - -
- -
-
+ + ) => { + updateField("replicas", e.target.value); + cleanValidation("replicas"); + }} + label="Replicas" + value={replicas} + required + error={validationErrors["replicas"] || ""} + /> + + +
+ SecurityContext for KES pods + +
+
-
+
-
+
- +
)} diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx index 96d95de60..37ad8ea77 100644 --- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx +++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx @@ -23,6 +23,8 @@ import { Grid, IconButton, Paper, Tooltip, Typography } from "@mui/material"; import CasinoIcon from "@mui/icons-material/Casino"; import DeleteIcon from "@mui/icons-material/Delete"; import { + createTenantCommon, + formFieldStyles, modalBasic, wizardCommon, } from "../../../Common/FormComponents/common/styleLibrary"; @@ -37,6 +39,7 @@ import RadioGroupSelector from "../../../Common/FormComponents/RadioGroupSelecto import InputBoxWrapper from "../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper"; import FormSwitchWrapper from "../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper"; import AddIcon from "@mui/icons-material/Add"; +import RemoveIcon from "../../../../../icons/RemoveIcon"; interface IIdentityProviderProps { classes: any; @@ -75,15 +78,54 @@ const styles = (theme: Theme) => shortened: { gridTemplateColumns: "auto auto 50px 50px", display: "grid", - gridGap: 20, + gridGap: 15, + marginBottom: 10, + "& input": { + fontWeight: 400, + }, }, + buttonTray: { - gridTemplateColumns: "auto auto 10px 10px", - display: "grid", - gridGap: 0, - height: 16, - marginTop: 12, + marginLeft: 10, + display: "flex", + height: 38, + "& button": { + background: "#EAEAEA", + }, }, + overlayAction: { + marginLeft: 10, + "& svg": { + maxWidth: 15, + maxHeight: 15, + }, + "& button": { + background: "#EAEAEA", + }, + }, + protocolRadioOptions: { + display: "flex", + flexFlow: "column", + marginBottom: 10, + + "& label": { + fontSize: 14, + }, + "& div": { + display: "flex", + flexFlow: "column", + alignItems: "baseline", + }, + }, + adUserDnRows: { + display: "flex", + }, + + inputLabel: { + minWidth: 260, + }, + ...createTenantCommon, + ...formFieldStyles, ...modalBasic, ...wizardCommon, }); @@ -270,46 +312,51 @@ const IdentityProvider = ({ />
- { - accessKeys.push(""); - secretKeys.push(""); - updateUserField(accessKeys.length - 1, ""); - updatePwordField(secretKeys.length - 1, ""); - }} - > - - - - - { - updateUserField(index, getRandomString(16)); - updatePwordField(index, getRandomString(32)); - }} - size={"small"} - > - - +
+ { + accessKeys.push(""); + secretKeys.push(""); + updateUserField(accessKeys.length - 1, ""); + updatePwordField(secretKeys.length - 1, ""); + }} + > + + +
- { - if (accessKeys.length > 1) { - accessKeys.splice(index, 1); - secretKeys.splice(index, 1); - updateUserField( - accessKeys.length - 1, - accessKeys[accessKeys.length - 1] - ); - } - }} - > - - +
+ { + if (accessKeys.length > 1) { + accessKeys.splice(index, 1); + secretKeys.splice(index, 1); + updateUserField( + accessKeys.length - 1, + accessKeys[accessKeys.length - 1] + ); + } + }} + > + + +
+ + +
+ { + updateUserField(index, getRandomString(16)); + updatePwordField(index, getRandomString(32)); + }} + size={"small"} + > + + +
@@ -321,11 +368,12 @@ const IdentityProvider = ({ inputs = ADUserDNs.map((_, index) => { return ( -
+
) => { @@ -380,12 +428,13 @@ const IdentityProvider = ({ Manager.
- + + { updateField("idpSelection", e.target.value); }} @@ -404,7 +453,7 @@ const IdentityProvider = ({ )} {idpSelection === "OpenID" && ( - + - + - + - + - + - + - + ) => { updateField("ADURL", e.target.value); cleanValidation("AD_URL"); @@ -506,11 +556,12 @@ const IdentityProvider = ({ required /> - + { const targetD = e.target; @@ -520,11 +571,12 @@ const IdentityProvider = ({ label={"Skip TLS Verification"} /> - + { const targetD = e.target; @@ -547,11 +599,12 @@ const IdentityProvider = ({
) : null} - + { const targetD = e.target; @@ -561,10 +614,11 @@ const IdentityProvider = ({ label={"Start TLS connection to AD/LDAP server"} /> - + ) => { updateField("ADUserNameFormat", e.target.value); }} @@ -573,10 +627,11 @@ const IdentityProvider = ({ placeholder="uid=%s,cn=accounts,dc=myldapserver,dc=com" /> - + ) => { updateField("ADUserNameSearchFilter", e.target.value); }} @@ -585,10 +640,11 @@ const IdentityProvider = ({ placeholder="(|(objectclass=posixAccount)(uid=%s))" /> - + ) => { updateField("ADGroupSearchBaseDN", e.target.value); }} @@ -597,10 +653,11 @@ const IdentityProvider = ({ placeholder="ou=hwengg,dc=min,dc=io;ou=swengg,dc=min,dc=io" /> - + ) => { updateField("ADGroupSearchFilter", e.target.value); }} @@ -609,10 +666,11 @@ const IdentityProvider = ({ placeholder="(&(objectclass=groupOfNames)(member=%s))" /> - + ) => { updateField("ADGroupNameAttribute", e.target.value); }} @@ -621,10 +679,11 @@ const IdentityProvider = ({ placeholder="cn" /> - + ) => { updateField("ADLookupBindDN", e.target.value); }} @@ -633,10 +692,11 @@ const IdentityProvider = ({ placeholder="cn=admin,dc=min,dc=io" /> - + ) => { updateField("ADLookupBindPassword", e.target.value); }} @@ -645,10 +705,11 @@ const IdentityProvider = ({ placeholder="admin" /> - + ) => { updateField("ADUserDNSearchBaseDN", e.target.value); }} @@ -657,10 +718,11 @@ const IdentityProvider = ({ placeholder="dc=min,dc=io" /> - + ) => { updateField("ADUserDNSearchFilter", e.target.value); }} @@ -669,10 +731,14 @@ const IdentityProvider = ({ placeholder="(uid=%s)" /> - - List of user DNs (Distinguished Names) to be Tenant Administrators - {inputs} - +
+ + List of user DNs (Distinguished Names) to be Tenant Administrators + + + {inputs} + +
)} diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx index e7deb65bd..ccfcb9c54 100644 --- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx +++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx @@ -21,6 +21,7 @@ import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; import { Grid, Paper } from "@mui/material"; import { + formFieldStyles, modalBasic, wizardCommon, } from "../../../Common/FormComponents/common/styleLibrary"; @@ -71,6 +72,12 @@ const styles = (theme: Theme) => buttonContainer: { textAlign: "right", }, + inputLabel: { + fontWeight: 300, + fontSize: 14, + minWidth: 200, + }, + ...formFieldStyles, ...modalBasic, ...wizardCommon, }); @@ -317,10 +324,11 @@ const Images = ({
- + ) => { updateField("imageName", e.target.value); cleanValidation("image"); @@ -331,10 +339,11 @@ const Images = ({ placeholder="E.g. minio/minio:RELEASE.2021-08-20T18-32-01Z" /> - + ) => { updateField("logSearchImage", e.target.value); cleanValidation("logSearchImage"); @@ -345,10 +354,11 @@ const Images = ({ placeholder="E.g. minio/logsearchapi:v4.1.1" /> - + ) => { updateField("kesImage", e.target.value); cleanValidation("kesImage"); @@ -359,10 +369,11 @@ const Images = ({ placeholder="E.g. minio/kes:v0.14.0" /> - + ) => { updateField("logSearchPostgresImage", e.target.value); cleanValidation("logSearchPostgresImage"); @@ -373,10 +384,11 @@ const Images = ({ placeholder="E.g. library/postgres:13" /> - + ) => { updateField("logSearchPostgresInitImage", e.target.value); cleanValidation("logSearchPostgresInitImage"); @@ -387,10 +399,11 @@ const Images = ({ placeholder="E.g. library/busybox:1.33.1" /> - + ) => { updateField("prometheusImage", e.target.value); cleanValidation("prometheusImage"); @@ -401,10 +414,11 @@ const Images = ({ placeholder="E.g. quay.io/prometheus/prometheus:latest" /> - + ) => { updateField("prometheusSidecarImage", e.target.value); cleanValidation("prometheusSidecarImage"); @@ -415,10 +429,11 @@ const Images = ({ placeholder="E.g. quay.io/prometheus/prometheus:latest" /> - + ) => { updateField("prometheusInitImage", e.target.value); cleanValidation("prometheusInitImage"); @@ -433,11 +448,12 @@ const Images = ({ {customImage && ( - + { const targetD = e.target; @@ -452,10 +468,11 @@ const Images = ({ )} {customDockerhub && ( - + ) => { updateField("imageRegistry", e.target.value); }} @@ -466,10 +483,11 @@ const Images = ({ required /> - + ) => { updateField("imageRegistryUsername", e.target.value); }} @@ -479,10 +497,11 @@ const Images = ({ required /> - + ) => { updateField("imageRegistryPassword", e.target.value); }} diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/NameTenant.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/NameTenant.tsx index 5212376fa..c9461643b 100644 --- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/NameTenant.tsx +++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/NameTenant.tsx @@ -29,6 +29,7 @@ import get from "lodash/get"; import debounce from "lodash/debounce"; import Grid from "@mui/material/Grid"; import { + formFieldStyles, modalBasic, wizardCommon, } from "../../../Common/FormComponents/common/styleLibrary"; @@ -65,7 +66,21 @@ const styles = (theme: Theme) => }, sizePreview: { position: "fixed", + marginLeft: 10, + background: "#FFFFFF", + border: "1px solid #EAEAEA", + padding: 2, }, + inputLabel: { + minWidth: 200, + }, + errorInField: { + "& .MuiFormControl-root & .MuiOutlinedInput-root & .MuiFormHelperText-root": + { + color: "blue", + }, + }, + ...formFieldStyles, ...modalBasic, ...wizardCommon, }); @@ -267,7 +282,7 @@ const NameTenant = ({ /> )} - + @@ -277,21 +292,25 @@ const NameTenant = ({ How would you like to name this new tenant?
- ) => { - updateField("tenantName", e.target.value); - frmValidationCleanup("tenant-name"); - }} - label="Name" - value={tenantName} - required - error={validationErrors["tenant-name"] || ""} - /> +
+ ) => { + updateField("tenantName", e.target.value); + frmValidationCleanup("tenant-name"); + }} + label="Name" + value={tenantName} + required + error={validationErrors["tenant-name"] || ""} + /> +
- + ) => { @@ -306,8 +325,9 @@ const NameTenant = ({ required /> - + ) => { @@ -326,7 +346,7 @@ const NameTenant = ({ - +
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx index 51b831821..d04d20434 100644 --- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx +++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx @@ -19,8 +19,9 @@ import { connect } from "react-redux"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; -import { Button, Divider, Grid, Paper, Typography } from "@mui/material"; +import { Grid, IconButton, Paper, Typography } from "@mui/material"; import { + createTenantCommon, modalBasic, wizardCommon, } from "../../../Common/FormComponents/common/styleLibrary"; @@ -38,6 +39,7 @@ import { AppState } from "../../../../../store"; import { KeyPair } from "../../ListTenants/utils"; import FormSwitchWrapper from "../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper"; import FileSelector from "../../../Common/FormComponents/FileSelector/FileSelector"; +import { AddIcon, RemoveIcon } from "../../../../../icons"; interface ISecurityProps { classes: any; @@ -61,6 +63,71 @@ const styles = (theme: Theme) => buttonContainer: { textAlign: "right", }, + minioCertificateRows: { + display: "flex", + alignItems: "center", + justifyContent: "flex-start", + borderBottom: "1px solid #EAEAEA", + "&:last-child": { + borderBottom: 0, + }, + "@media (max-width: 900px)": { + flex: 1, + }, + }, + fileItem: { + marginRight: 10, + display: "flex", + "& div label": { + minWidth: 50, + }, + + "@media (max-width: 900px)": { + flexFlow: "column", + }, + }, + fileInputField: { + borderBottom: 0, + }, + minioCertsContainer: { + marginBottom: 15, + }, + minioCACertsRow: { + display: "flex", + alignItems: "center", + justifyContent: "flex-start", + + borderBottom: "1px solid #EAEAEA", + "&:last-child": { + borderBottom: 0, + }, + "@media (max-width: 900px)": { + flex: 1, + + "& div label": { + minWidth: 50, + }, + }, + }, + rowActions: { + display: "flex", + justifyContent: "flex-end", + "@media (max-width: 900px)": { + flex: 1, + }, + }, + overlayAction: { + marginLeft: 10, + "& svg": { + maxWidth: 15, + maxHeight: 15, + }, + "& button": { + background: "#EAEAEA", + }, + }, + + ...createTenantCommon, ...modalBasic, ...wizardCommon, }); @@ -175,113 +242,133 @@ const Security = ({ {enableCustomCerts && ( - - - MinIO Certificates - - - {minioCertificates.map((keyPair: KeyPair) => ( - - - { - addFileToKeyPair( - keyPair.id, - "cert", - fileName, - encodedValue - ); - }} - accept=".cer,.crt,.cert,.pem" - id="tlsCert" - name="tlsCert" - label="Cert" - value={keyPair.cert} - /> - - - { - addFileToKeyPair( - keyPair.id, - "key", - fileName, - encodedValue - ); - }} - accept=".key,.pem" - id="tlsKey" - name="tlsKey" - label="Key" - value={keyPair.key} - /> - - - - - - ))} - - + + { + addFileToKeyPair( + keyPair.id, + "cert", + fileName, + encodedValue + ); + }} + accept=".cer,.crt,.cert,.pem" + id="tlsCert" + name="tlsCert" + label="Cert" + value={keyPair.cert} + /> + { + addFileToKeyPair( + keyPair.id, + "key", + fileName, + encodedValue + ); + }} + accept=".key,.pem" + id="tlsKey" + name="tlsKey" + label="Key" + value={keyPair.key} + /> + + + +
+ + + +
+
+ { + deleteKeyPair(keyPair.id); + }} + > + + +
+ + + ))} + + - -
- -
- - - - - - MinIO CA Certificates - - - {caCertificates.map((keyPair: KeyPair) => ( - - - { - addFileToCaCertificates( - keyPair.id, - "cert", - fileName, - encodedValue - ); - }} - accept=".cer,.crt,.cert,.pem" - id="tlsCert" - name="tlsCert" - label="Cert" - value={keyPair.cert} - /> - - - - - - ))} - - + + { + addFileToCaCertificates( + keyPair.id, + "cert", + fileName, + encodedValue + ); + }} + accept=".cer,.crt,.cert,.pem" + id="tlsCert" + name="tlsCert" + label="Cert" + value={keyPair.cert} + /> + + +
+
+ + + +
+
+ { + deleteCaCertificate(keyPair.id); + }} + > + + +
+
+ + + ))} + diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/SizePreview.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/SizePreview.tsx index 901e36f23..f6031c5dc 100644 --- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/SizePreview.tsx +++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/SizePreview.tsx @@ -361,8 +361,10 @@ const SizePreview = ({ - Server Failures Tolerated - + + Server Failures Tolerated + + {distribution ? Math.floor( usableInformation.maxFailureTolerations / diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantSize.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantSize.tsx index b9dbd41c9..82398167b 100644 --- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantSize.tsx +++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantSize.tsx @@ -22,6 +22,7 @@ import withStyles from "@mui/styles/withStyles"; import { AppState } from "../../../../../store"; import { isPageValid, updateAddField } from "../../actions"; import { + formFieldStyles, modalBasic, wizardCommon, } from "../../../Common/FormComponents/common/styleLibrary"; @@ -74,6 +75,25 @@ const styles = (theme: Theme) => buttonContainer: { textAlign: "right", }, + compositeFieldContainer: { + display: "flex", + alignItems: "center", + }, + compositeAddOn: { + marginLeft: 10, + "& div": { + marginBottom: 0, + }, + "@media (max-width: 900px)": { + "& div": { + marginTop: 5, + }, + }, + }, + inputLabel: { + minWidth: 200, + }, + ...formFieldStyles, ...modalBasic, ...wizardCommon, }); @@ -311,11 +331,12 @@ const TenantSize = ({
{memorySize.error}
 )} - + ) => { updateField("nodes", e.target.value); cleanValidation("nodes"); @@ -328,11 +349,12 @@ const TenantSize = ({ error={validationErrors["nodes"] || ""} /> - + ) => { updateField("drivesPerServer", e.target.value); cleanValidation("drivesps"); @@ -347,45 +369,50 @@ const TenantSize = ({
-
- ) => { - updateField("volumeSize", e.target.value); - cleanValidation("volume_size"); - }} - label="Total Size" - value={volumeSize} - disabled={selectedStorageClass === ""} - required - error={validationErrors["volume_size"] || ""} - min="0" - /> -
-
- ) => { - updateField("sizeFactor", e.target.value as string); - }} - options={k8sfactorForDropdown()} - /> +
+
+ ) => { + updateField("volumeSize", e.target.value); + cleanValidation("volume_size"); + }} + label="Total Size" + value={volumeSize} + disabled={selectedStorageClass === ""} + required + error={validationErrors["volume_size"] || ""} + min="0" + /> +
+ ) => { + updateField("sizeFactor", e.target.value as string); + }} + options={k8sfactorForDropdown()} + /> +
+
- + ) => { updateField("memoryNode", e.target.value); cleanValidation("memory_per_node"); @@ -398,10 +425,11 @@ const TenantSize = ({ min="2" /> - + ) => { updateField("ecParity", e.target.value as string); }} diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/helpers/AddNamespaceModal.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/helpers/AddNamespaceModal.tsx index 95bf3bf3a..3bc8445a5 100644 --- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/helpers/AddNamespaceModal.tsx +++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/helpers/AddNamespaceModal.tsx @@ -28,10 +28,15 @@ import { import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; -import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary"; +import { + deleteDialogStyles, + modalBasic, +} from "../../../../Common/FormComponents/common/styleLibrary"; import { setErrorSnackMessage } from "../../../../../../actions"; import { ErrorResponseHandler } from "../../../../../../common/types"; import api from "../../../../../../common/api"; +import IconButton from "@mui/material/IconButton"; +import CloseIcon from "@mui/icons-material/Close"; const styles = (theme: Theme) => createStyles({ @@ -41,6 +46,7 @@ const styles = (theme: Theme) => wordWrap: "break-word", }, ...modalBasic, + ...deleteDialogStyles, }); interface IAddNamespace { @@ -90,29 +96,47 @@ const AddNamespaceModal = ({ return ( { closeAddNamespaceModalAndRefresh(false); }} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description" > - Create new namespace + +
Create new namespace
+
+ { + closeAddNamespaceModalAndRefresh(false); + }} + disableRipple + size="small" + > + + +
+ + {addNamespaceLoading && } - Are you sure you want to add a namespace called{" "} + Are you sure you want to add a namespace called +
{namespace}? @@ -123,7 +147,7 @@ const AddNamespaceModal = ({ autoFocus disabled={addNamespaceLoading} > - Create Namespace + Create