From 02a35fb8d1c81bfeb841fe4a44ca05d614dcc8ce Mon Sep 17 00:00:00 2001 From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> Date: Wed, 6 Apr 2022 19:08:24 -0700 Subject: [PATCH] Operator UI Adjustments (#1805) Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> --- .../FormSwitchWrapper/FormSwitchWrapper.tsx | 9 +- .../Console/Tenants/AddTenant/AddTenant.tsx | 18 +- .../Tenants/ListTenants/InformationItem.tsx | 18 +- .../Tenants/ListTenants/ListTenants.tsx | 1 - .../Tenants/ListTenants/TenantListItem.tsx | 149 +- .../Pools/Details/PoolsListing.tsx | 4 - .../Tenants/TenantDetails/TenantDetails.tsx | 26 +- .../TenantDetails/TenantEncryption.tsx | 2047 +++++++++-------- .../Tenants/TenantDetails/TenantLogging.tsx | 71 +- .../TenantDetails/TenantMonitoring.tsx | 61 +- .../Tenants/TenantDetails/TenantSummary.tsx | 20 +- 11 files changed, 1275 insertions(+), 1149 deletions(-) diff --git a/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx index b1a54c069..f5629b8c2 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx +++ b/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx @@ -44,9 +44,6 @@ interface IFormSwitch { const styles = (theme: Theme) => createStyles({ - divContainer: { - marginBottom: 20, - }, indicatorLabelOn: { fontWeight: "bold", color: "#081C42 !important", @@ -172,7 +169,7 @@ const FormSwitchWrapper = ({ } return ( -
+
{label !== "" && ( @@ -193,8 +190,8 @@ const FormSwitchWrapper = ({ )} - + + } + /> {addSending && ( @@ -811,14 +819,6 @@ const AddTenant = ({ )} - - - - diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/InformationItem.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/InformationItem.tsx index 94bfcaed0..dd2fa43a6 100644 --- a/portal-ui/src/screens/Console/Tenants/ListTenants/InformationItem.tsx +++ b/portal-ui/src/screens/Console/Tenants/ListTenants/InformationItem.tsx @@ -20,13 +20,25 @@ interface IInformationItemProps { label: string; value: string; unit?: string; + variant?: "normal" | "faded"; } -const InformationItem = ({ label, value, unit }: IInformationItemProps) => { +const InformationItem = ({ + label, + value, + unit, + variant = "normal", +}: IInformationItemProps) => { return (
- + {value} {unit && ( @@ -43,7 +55,7 @@ const InformationItem = ({ label, value, unit }: IInformationItemProps) => {
marginBottom: 8, }, tenantsList: { - marginTop: 25, height: "calc(100vh - 195px)", }, }); diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx index e13137d49..a6d682115 100644 --- a/portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx +++ b/portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx @@ -24,10 +24,9 @@ import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; import { niceBytes, niceBytesInt } from "../../../../common/utils"; -import { tenantIsOnline } from "./utils"; -import { Button } from "@mui/material"; import InformationItem from "./InformationItem"; import TenantCapacity from "./TenantCapacity"; +import { DrivesIcon } from "../../../../icons"; const styles = (theme: Theme) => createStyles({ @@ -76,9 +75,8 @@ const styles = (theme: Theme) => height: 10, }, tenantItem: { - border: "1px solid #EAEDEE", - borderRadius: 3, - marginBottom: 20, + border: "1px solid #EAEAEA", + marginBottom: 16, padding: "15px 30px", "&:hover": { backgroundColor: "#FAFAFA", @@ -154,6 +152,8 @@ const TenantListItem = ({ tenant, classes }: ITenantListItem) => { let raw: ValueUnit = { value: "n/a", unit: "" }; let capacity: ValueUnit = { value: "n/a", unit: "" }; let used: ValueUnit = { value: "n/a", unit: "" }; + let localUse: ValueUnit = { value: "n/a", unit: "" }; + let tieredUse: ValueUnit = { value: "n/a", unit: "" }; if (tenant.capacity_raw) { const b = niceBytes(`${tenant.capacity_raw}`, true); @@ -175,7 +175,6 @@ const TenantListItem = ({ tenant, classes }: ITenantListItem) => { } let spaceVariants: CapacityValues[] = []; - if (!tenant.tiers || tenant.tiers.length === 0) { spaceVariants = [ { value: tenant.capacity_usage || 0, variant: "STANDARD" }, @@ -184,6 +183,26 @@ const TenantListItem = ({ tenant, classes }: ITenantListItem) => { spaceVariants = tenant.tiers.map((itemTenant) => { return { value: itemTenant.size, variant: itemTenant.name }; }); + let internalUsage = tenant.tiers + .filter((itemTenant) => { + return itemTenant.type === "internal"; + }) + .reduce((sum, itemTenant) => sum + itemTenant.size, 0); + let tieredUsage = tenant.tiers + .filter((itemTenant) => { + return itemTenant.type !== "internal"; + }) + .reduce((sum, itemTenant) => sum + itemTenant.size, 0); + + const t = niceBytesInt(tieredUsage, true); + const parts = t.split(" "); + tieredUse.value = parts[0]; + tieredUse.unit = parts[1]; + + const is = niceBytesInt(internalUsage, true); + const partsInternal = is.split(" "); + localUse.value = partsInternal[0]; + localUse.unit = partsInternal[1]; } const openTenantDetails = () => { @@ -238,14 +257,10 @@ const TenantListItem = ({ tenant, classes }: ITenantListItem) => { value={capacity.value} unit={capacity.unit} /> - { - - + {tenant.tiers && tenant.tiers.length > 0 && ( + +
+ + Internal:{" "} + {" "} + {`${localUse.value} ${localUse.unit}`} +
+
+ + Tiered:{" "} + {" "} + {`${tieredUse.value} ${tieredUse.unit}`} +
+ + )} + + + diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolsListing.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolsListing.tsx index 99c15a740..a47d3ce96 100644 --- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolsListing.tsx +++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolsListing.tsx @@ -128,10 +128,6 @@ const PoolsListing = ({ variant={"contained"} /> - -
- - import("./TenantYAML"))); const TenantSummary = withSuspense(React.lazy(() => import("./TenantSummary"))); @@ -377,7 +378,7 @@ const TenantDetails = ({ }} size="large" > - Delete Tenant + Delete - Edit Tenant + YAML + { + history.push( + `/namespaces/${tenantNamespace}/tenants/${tenantName}/hop` + ); + }} + disabled={!tenantInfo || !tenantIsOnline(tenantInfo)} + variant={"outlined"} + color="primary" + > + Console{" "} + + - Reload + Refresh
} diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantEncryption.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantEncryption.tsx index a5f7382d7..117cb8a1a 100644 --- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantEncryption.tsx +++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantEncryption.tsx @@ -17,8 +17,8 @@ import { ITenant } from "../ListTenants/types"; import { ICertificateInfo, - ITenantEncryptionResponse, ISecurityContext, + ITenantEncryptionResponse, } from "../types"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; @@ -32,7 +32,6 @@ import { tenantDetailsStyles, wizardCommon, } from "../../Common/FormComponents/common/styleLibrary"; -import Paper from "@mui/material/Paper"; import React, { Fragment, useEffect, useState } from "react"; import { setErrorSnackMessage } from "../../../../actions"; import { connect } from "react-redux"; @@ -46,7 +45,7 @@ import Grid from "@mui/material/Grid"; import FileSelector from "../../Common/FormComponents/FileSelector/FileSelector"; import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper"; import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector"; -import { Button, DialogContentText } from "@mui/material"; +import { Button, DialogContentText, Stack } from "@mui/material"; import VisibilityOffIcon from "@mui/icons-material/VisibilityOff"; import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye"; import { KeyPair } from "../ListTenants/utils"; @@ -57,6 +56,7 @@ import { } from "../../../../utils/validationFunctions"; import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog"; import TLSCertificate from "../../Common/TLSCertificate/TLSCertificate"; +import StackRow from "../../Common/UsageBarWrapper/StackRow"; interface ITenantEncryption { classes: any; @@ -100,13 +100,13 @@ const styles = (theme: Theme) => display: "flex", alignItems: "center", borderBottom: "1px solid #eaeaea", - marginBottom: 10, + marginBottom: 8, }, caCertsRow: { borderBottom: "1px solid #eaeaea", display: "flex", alignItems: "center", - marginBottom: 10, + marginBottom: 8, }, ...containerForHeader(theme.spacing(4)), ...createTenantCommon, @@ -705,109 +705,124 @@ const TenantEncryption = ({ } /> )} -

Encryption

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

Encryption

+ + + { + setEncryptionEnabled(!encryptionEnabled); + }} + description="" + /> + + {encryptionEnabled && ( - - - - { - setEncryptionType(e.target.value); - }} - selectorOptions={[ - { label: "Vault", value: "vault" }, - { label: "AWS", value: "aws" }, - { label: "Gemalto", value: "gemalto" }, - { label: "GCP", value: "gcp" }, - { label: "Azure", value: "azure" }, - ]} - /> - - {encryptionType === "vault" && ( - - - ) => - setVaultConfiguration({ - ...vaultConfiguration, - endpoint: e.target.value, - }) - } - label="Endpoint" - value={vaultConfiguration?.endpoint || ""} - error={validationErrors["vault_ping"] || ""} - required - /> - - - ) => - setVaultConfiguration({ - ...vaultConfiguration, - engine: e.target.value, - }) - } - label="Engine" - value={vaultConfiguration?.engine || ""} - /> - - - ) => - setVaultConfiguration({ - ...vaultConfiguration, - namespace: e.target.value, - }) - } - label="Namespace" - value={vaultConfiguration?.namespace || ""} - /> - - - ) => - setVaultConfiguration({ - ...vaultConfiguration, - prefix: e.target.value, - }) - } - label="Prefix" - value={vaultConfiguration?.prefix || ""} - /> - - - -
- + + + { + setEncryptionType(e.target.value); + }} + selectorOptions={[ + { label: "Vault", value: "vault" }, + { label: "AWS", value: "aws" }, + { label: "Gemalto", value: "gemalto" }, + { label: "GCP", value: "gcp" }, + { label: "Azure", value: "azure" }, + ]} + /> + + {encryptionType === "vault" && ( + + + ) => + setVaultConfiguration({ + ...vaultConfiguration, + endpoint: e.target.value, + }) + } + label="Endpoint" + value={vaultConfiguration?.endpoint || ""} + error={validationErrors["vault_ping"] || ""} + required + /> + + + ) => + setVaultConfiguration({ + ...vaultConfiguration, + engine: e.target.value, + }) + } + label="Engine" + value={vaultConfiguration?.engine || ""} + /> + + + ) => + setVaultConfiguration({ + ...vaultConfiguration, + namespace: e.target.value, + }) + } + label="Namespace" + value={vaultConfiguration?.namespace || ""} + /> + + + ) => + setVaultConfiguration({ + ...vaultConfiguration, + prefix: e.target.value, + }) + } + label="Prefix" + value={vaultConfiguration?.prefix || ""} + /> + + + + +

App Role - - +

+ + + - + - + - + -
- - -
- + + + + + + +

Mutual TLS authentication with KMS (optional) - - {vaultClientCertificateSecret ? ( - - removeCertificate(vaultClientCertificateSecret) - } - /> - ) : ( - - - setVaultClientCertificate({ - encoded_key: encodedValue || "", - id: vaultClientCertificate?.id || "", - key: fileName || "", - cert: vaultClientCertificate?.cert || "", - encoded_cert: - vaultClientCertificate?.encoded_cert || "", - }) - } - accept=".key,.pem" - id="vault_key" - name="vault_key" - label="Key" - value={vaultClientCertificate?.key || ""} - /> - - setVaultClientCertificate({ - encoded_key: - vaultClientCertificate?.encoded_key || "", - id: vaultClientCertificate?.id || "", - key: vaultClientCertificate?.key || "", - cert: fileName || "", - encoded_cert: encodedValue || "", - }) - } - accept=".cer,.crt,.cert,.pem" - id="vault_cert" - name="vault_cert" - label="Cert" - value={vaultClientCertificate?.cert || ""} - /> - - )} -

-
- - KMS CA certificate (optional) - - {vaultCACertificateSecret ? ( - - removeCertificate(vaultCACertificateSecret) - } - /> - ) : ( + + + {vaultClientCertificateSecret ? ( + + removeCertificate(vaultClientCertificateSecret) + } + /> + ) : ( + - setVaultCACertificate({ + setVaultClientCertificate({ + encoded_key: encodedValue || "", + id: vaultClientCertificate?.id || "", + key: fileName || "", + cert: vaultClientCertificate?.cert || "", + encoded_cert: + vaultClientCertificate?.encoded_cert || "", + }) + } + accept=".key,.pem" + id="vault_key" + name="vault_key" + label="Key" + value={vaultClientCertificate?.key || ""} + /> + + setVaultClientCertificate({ encoded_key: - vaultCACertificate?.encoded_key || "", - id: vaultCACertificate?.id || "", - key: vaultCACertificate?.key || "", + vaultClientCertificate?.encoded_key || "", + id: vaultClientCertificate?.id || "", + key: vaultClientCertificate?.key || "", cert: fileName || "", encoded_cert: encodedValue || "", }) } accept=".cer,.crt,.cert,.pem" - id="vault_ca" - name="vault_ca" - label="CA" - value={vaultCACertificate?.cert || ""} + id="vault_cert" + name="vault_cert" + label="Cert" + value={vaultClientCertificate?.cert || ""} /> - )} -
- - -
- + + )} + +
+ + KMS CA certificate (optional) + + {vaultCACertificateSecret ? ( + + removeCertificate(vaultCACertificateSecret) + } + /> + ) : ( + + setVaultCACertificate({ + encoded_key: vaultCACertificate?.encoded_key || "", + id: vaultCACertificate?.id || "", + key: vaultCACertificate?.key || "", + cert: fileName || "", + encoded_cert: encodedValue || "", + }) + } + accept=".cer,.crt,.cert,.pem" + id="vault_ca" + name="vault_ca" + label="CA" + value={vaultCACertificate?.cert || ""} + /> + )} +
+ + + + +

Status - +

+ + ) => + setVaultConfiguration({ + ...vaultConfiguration, + status: { + ...vaultConfiguration?.status, + ping: e.target.value, + }, + }) + } + label="Ping (Seconds)" + error={validationErrors["vault_ping"] || ""} + value={vaultConfiguration?.status?.ping || ""} + /> + + + + )} + {encryptionType === "azure" && ( + + + ) => + setAzureConfiguration({ + ...azureConfiguration, + keyvault: { + ...azureConfiguration?.keyvault, + endpoint: e.target.value, + }, + }) + } + label="Endpoint" + error={validationErrors["azure_endpoint"] || ""} + value={azureConfiguration?.keyvault?.endpoint || ""} + /> + + +
+ + Credentials + + ) => - setVaultConfiguration({ - ...vaultConfiguration, - status: { - ...vaultConfiguration?.status, - ping: e.target.value, + setAzureConfiguration({ + ...azureConfiguration, + keyvault: { + ...azureConfiguration?.keyvault, + credentials: { + ...azureConfiguration?.keyvault?.credentials, + tenant_id: e.target.value, + }, }, }) } - label="Ping (Seconds)" - error={validationErrors["vault_ping"] || ""} - value={vaultConfiguration?.status?.ping || ""} + label="Tenant ID" + value={ + azureConfiguration?.keyvault?.credentials + ?.tenant_id || "" + } + error={validationErrors["azure_tenant_id"] || ""} /> -
- - - )} - {encryptionType === "azure" && ( - - - ) => - setAzureConfiguration({ - ...azureConfiguration, - keyvault: { - ...azureConfiguration?.keyvault, - endpoint: e.target.value, - }, - }) - } - label="Endpoint" - error={validationErrors["azure_endpoint"] || ""} - value={azureConfiguration?.keyvault?.endpoint || ""} + + + ) => + setAzureConfiguration({ + ...azureConfiguration, + keyvault: { + ...azureConfiguration?.keyvault, + credentials: { + ...azureConfiguration?.keyvault?.credentials, + client_id: e.target.value, + }, + }, + }) + } + label="Client ID" + value={ + azureConfiguration?.keyvault?.credentials + ?.client_id || "" + } + error={validationErrors["azure_client_id"] || ""} + /> + + + ) => + setAzureConfiguration({ + ...azureConfiguration, + keyvault: { + ...azureConfiguration?.keyvault, + credentials: { + ...azureConfiguration?.keyvault?.credentials, + client_secret: e.target.value, + }, + }, + }) + } + label="Client Secret" + value={ + azureConfiguration?.keyvault?.credentials + ?.client_secret || "" + } + error={validationErrors["azure_client_secret"] || ""} + /> + +
+ + + )} + {encryptionType === "gcp" && ( + + + ) => + setGCPConfiguration({ + ...gcpConfiguration, + secretmanager: { + ...gcpConfiguration?.secretmanager, + project_id: e.target.value, + }, + }) + } + label="Project ID" + value={gcpConfiguration?.secretmanager.project_id || ""} + /> + + + ) => + setGCPConfiguration({ + ...gcpConfiguration, + secretmanager: { + ...gcpConfiguration?.secretmanager, + endpoint: e.target.value, + }, + }) + } + label="Endpoint" + value={gcpConfiguration?.secretmanager.endpoint || ""} + /> + + +
+ + Credentials + + + ) => + setGCPConfiguration({ + ...gcpConfiguration, + secretmanager: { + ...gcpConfiguration?.secretmanager, + credentials: { + ...gcpConfiguration?.secretmanager.credentials, + client_email: e.target.value, + }, + }, + }) + } + label="Client Email" + value={ + gcpConfiguration?.secretmanager.credentials + ?.client_email || "" + } + /> + + + ) => + setGCPConfiguration({ + ...gcpConfiguration, + secretmanager: { + ...gcpConfiguration?.secretmanager, + credentials: { + ...gcpConfiguration?.secretmanager.credentials, + client_id: e.target.value, + }, + }, + }) + } + label="Client ID" + value={ + gcpConfiguration?.secretmanager.credentials + ?.client_id || "" + } + /> + + + ) => + setGCPConfiguration({ + ...gcpConfiguration, + secretmanager: { + ...gcpConfiguration?.secretmanager, + credentials: { + ...gcpConfiguration?.secretmanager.credentials, + private_key_id: e.target.value, + }, + }, + }) + } + label="Private Key ID" + value={ + gcpConfiguration?.secretmanager.credentials + ?.private_key_id || "" + } + /> + + + ) => + setGCPConfiguration({ + ...gcpConfiguration, + secretmanager: { + ...gcpConfiguration?.secretmanager, + credentials: { + ...gcpConfiguration?.secretmanager.credentials, + private_key: e.target.value, + }, + }, + }) + } + label="Private Key" + value={ + gcpConfiguration?.secretmanager.credentials + ?.private_key || "" + } + /> + +
+ + + )} + {encryptionType === "aws" && ( + + + ) => + setAWSConfiguration({ + ...awsConfiguration, + secretsmanager: { + ...awsConfiguration?.secretsmanager, + endpoint: e.target.value, + }, + }) + } + label="Endpoint" + value={awsConfiguration?.secretsmanager?.endpoint || ""} + required + error={validationErrors["aws_endpoint"] || ""} + /> + + + ) => + setAWSConfiguration({ + ...awsConfiguration, + secretsmanager: { + ...awsConfiguration?.secretsmanager, + region: e.target.value, + }, + }) + } + label="Region" + value={awsConfiguration?.secretsmanager?.region || ""} + error={validationErrors["aws_region"] || ""} + required + /> + + + ) => + setAWSConfiguration({ + ...awsConfiguration, + secretsmanager: { + ...awsConfiguration?.secretsmanager, + kmskey: e.target.value, + }, + }) + } + label="KMS Key" + value={awsConfiguration?.secretsmanager?.kmskey || ""} + /> + + +
+ + Credentials + + + ) => + setAWSConfiguration({ + ...awsConfiguration, + secretsmanager: { + ...awsConfiguration?.secretsmanager, + credentials: { + ...awsConfiguration?.secretsmanager + ?.credentials, + accesskey: e.target.value, + }, + }, + }) + } + label="Access Key" + value={ + awsConfiguration?.secretsmanager?.credentials + ?.accesskey || "" + } + error={validationErrors["aws_accessKey"] || ""} + required + /> + + + ) => + setAWSConfiguration({ + ...awsConfiguration, + secretsmanager: { + ...awsConfiguration?.secretsmanager, + credentials: { + ...awsConfiguration?.secretsmanager + ?.credentials, + secretkey: e.target.value, + }, + }, + }) + } + label="Secret Key" + value={ + awsConfiguration?.secretsmanager?.credentials + ?.secretkey || "" + } + error={validationErrors["aws_secretKey"] || ""} + required + /> + + + ) => + setAWSConfiguration({ + ...awsConfiguration, + secretsmanager: { + ...awsConfiguration?.secretsmanager, + credentials: { + ...awsConfiguration?.secretsmanager + ?.credentials, + token: e.target.value, + }, + }, + }) + } + label="Token" + value={ + awsConfiguration?.secretsmanager?.credentials + ?.token || "" + } + /> + +
+ + + )} + {encryptionType === "gemalto" && ( + + + ) => + setGemaltoConfiguration({ + ...gemaltoConfiguration, + keysecure: { + ...gemaltoConfiguration?.keysecure, + endpoint: e.target.value, + }, + }) + } + label="Endpoint" + value={gemaltoConfiguration?.keysecure?.endpoint || ""} + error={validationErrors["gemalto_endpoint"] || ""} + required + /> + + +
+ + Credentials + + + ) => + setGemaltoConfiguration({ + ...gemaltoConfiguration, + keysecure: { + ...gemaltoConfiguration?.keysecure, + credentials: { + ...gemaltoConfiguration?.keysecure?.credentials, + token: e.target.value, + }, + }, + }) + } + label="Token" + value={ + gemaltoConfiguration?.keysecure?.credentials?.token || + "" + } + error={validationErrors["gemalto_token"] || ""} + required + /> + + + ) => + setGemaltoConfiguration({ + ...gemaltoConfiguration, + keysecure: { + ...gemaltoConfiguration?.keysecure, + credentials: { + ...gemaltoConfiguration?.keysecure?.credentials, + domain: e.target.value, + }, + }, + }) + } + label="Domain" + value={ + gemaltoConfiguration?.keysecure?.credentials + ?.domain || "" + } + error={validationErrors["gemalto_domain"] || ""} + required + /> + + + ) => + setGemaltoConfiguration({ + ...gemaltoConfiguration, + keysecure: { + ...gemaltoConfiguration?.keysecure, + credentials: { + ...gemaltoConfiguration?.keysecure?.credentials, + retry: e.target.value, + }, + }, + }) + } + label="Retry (seconds)" + value={ + gemaltoConfiguration?.keysecure?.credentials?.retry || + "" + } + error={validationErrors["gemalto_retry"] || ""} + /> + +
+ + +
+ + Custom CA Root certificate verification + + {}} + accept=".cer,.crt,.cert,.pem" + id="gemalto_ca" + name="gemalto_ca" + label="CA" + value={""} /> - - -
- - Credentials - - - ) => - setAzureConfiguration({ - ...azureConfiguration, - keyvault: { - ...azureConfiguration?.keyvault, - credentials: { - ...azureConfiguration?.keyvault?.credentials, - tenant_id: e.target.value, - }, - }, - }) - } - label="Tenant ID" - value={ - azureConfiguration?.keyvault?.credentials - ?.tenant_id || "" - } - error={validationErrors["azure_tenant_id"] || ""} - /> - - - ) => - setAzureConfiguration({ - ...azureConfiguration, - keyvault: { - ...azureConfiguration?.keyvault, - credentials: { - ...azureConfiguration?.keyvault?.credentials, - client_id: e.target.value, - }, - }, - }) - } - label="Client ID" - value={ - azureConfiguration?.keyvault?.credentials - ?.client_id || "" - } - error={validationErrors["azure_client_id"] || ""} - /> - - - ) => - setAzureConfiguration({ - ...azureConfiguration, - keyvault: { - ...azureConfiguration?.keyvault, - credentials: { - ...azureConfiguration?.keyvault?.credentials, - client_secret: e.target.value, - }, - }, - }) - } - label="Client Secret" - value={ - azureConfiguration?.keyvault?.credentials - ?.client_secret || "" - } - error={validationErrors["azure_client_secret"] || ""} - /> - -
- - - )} - {encryptionType === "gcp" && ( - - - ) => - setGCPConfiguration({ - ...gcpConfiguration, - secretmanager: { - ...gcpConfiguration?.secretmanager, - project_id: e.target.value, - }, - }) - } - label="Project ID" - value={gcpConfiguration?.secretmanager.project_id || ""} - /> - - - ) => - setGCPConfiguration({ - ...gcpConfiguration, - secretmanager: { - ...gcpConfiguration?.secretmanager, - endpoint: e.target.value, - }, - }) - } - label="Endpoint" - value={gcpConfiguration?.secretmanager.endpoint || ""} - /> - - -
- - Credentials - - - ) => - setGCPConfiguration({ - ...gcpConfiguration, - secretmanager: { - ...gcpConfiguration?.secretmanager, - credentials: { - ...gcpConfiguration?.secretmanager - .credentials, - client_email: e.target.value, - }, - }, - }) - } - label="Client Email" - value={ - gcpConfiguration?.secretmanager.credentials - ?.client_email || "" - } - /> - - - ) => - setGCPConfiguration({ - ...gcpConfiguration, - secretmanager: { - ...gcpConfiguration?.secretmanager, - credentials: { - ...gcpConfiguration?.secretmanager - .credentials, - client_id: e.target.value, - }, - }, - }) - } - label="Client ID" - value={ - gcpConfiguration?.secretmanager.credentials - ?.client_id || "" - } - /> - - - ) => - setGCPConfiguration({ - ...gcpConfiguration, - secretmanager: { - ...gcpConfiguration?.secretmanager, - credentials: { - ...gcpConfiguration?.secretmanager - .credentials, - private_key_id: e.target.value, - }, - }, - }) - } - label="Private Key ID" - value={ - gcpConfiguration?.secretmanager.credentials - ?.private_key_id || "" - } - /> - - - ) => - setGCPConfiguration({ - ...gcpConfiguration, - secretmanager: { - ...gcpConfiguration?.secretmanager, - credentials: { - ...gcpConfiguration?.secretmanager - .credentials, - private_key: e.target.value, - }, - }, - }) - } - label="Private Key" - value={ - gcpConfiguration?.secretmanager.credentials - ?.private_key || "" - } - /> - -
- - - )} - {encryptionType === "aws" && ( - - - ) => - setAWSConfiguration({ - ...awsConfiguration, - secretsmanager: { - ...awsConfiguration?.secretsmanager, - endpoint: e.target.value, - }, - }) - } - label="Endpoint" - value={awsConfiguration?.secretsmanager?.endpoint || ""} - required - error={validationErrors["aws_endpoint"] || ""} - /> - - - ) => - setAWSConfiguration({ - ...awsConfiguration, - secretsmanager: { - ...awsConfiguration?.secretsmanager, - region: e.target.value, - }, - }) - } - label="Region" - value={awsConfiguration?.secretsmanager?.region || ""} - error={validationErrors["aws_region"] || ""} - required - /> - - - ) => - setAWSConfiguration({ - ...awsConfiguration, - secretsmanager: { - ...awsConfiguration?.secretsmanager, - kmskey: e.target.value, - }, - }) - } - label="KMS Key" - value={awsConfiguration?.secretsmanager?.kmskey || ""} - /> - - -
- - Credentials - - - ) => - setAWSConfiguration({ - ...awsConfiguration, - secretsmanager: { - ...awsConfiguration?.secretsmanager, - credentials: { - ...awsConfiguration?.secretsmanager - ?.credentials, - accesskey: e.target.value, - }, - }, - }) - } - label="Access Key" - value={ - awsConfiguration?.secretsmanager?.credentials - ?.accesskey || "" - } - error={validationErrors["aws_accessKey"] || ""} - required - /> - - - ) => - setAWSConfiguration({ - ...awsConfiguration, - secretsmanager: { - ...awsConfiguration?.secretsmanager, - credentials: { - ...awsConfiguration?.secretsmanager - ?.credentials, - secretkey: e.target.value, - }, - }, - }) - } - label="Secret Key" - value={ - awsConfiguration?.secretsmanager?.credentials - ?.secretkey || "" - } - error={validationErrors["aws_secretKey"] || ""} - required - /> - - - ) => - setAWSConfiguration({ - ...awsConfiguration, - secretsmanager: { - ...awsConfiguration?.secretsmanager, - credentials: { - ...awsConfiguration?.secretsmanager - ?.credentials, - token: e.target.value, - }, - }, - }) - } - label="Token" - value={ - awsConfiguration?.secretsmanager?.credentials - ?.token || "" - } - /> - -
- - - )} - {encryptionType === "gemalto" && ( - - - ) => - setGemaltoConfiguration({ - ...gemaltoConfiguration, - keysecure: { - ...gemaltoConfiguration?.keysecure, - endpoint: e.target.value, - }, - }) - } - label="Endpoint" - value={gemaltoConfiguration?.keysecure?.endpoint || ""} - error={validationErrors["gemalto_endpoint"] || ""} - required - /> - - -
- - Credentials - - - ) => - setGemaltoConfiguration({ - ...gemaltoConfiguration, - keysecure: { - ...gemaltoConfiguration?.keysecure, - credentials: { - ...gemaltoConfiguration?.keysecure - ?.credentials, - token: e.target.value, - }, - }, - }) - } - label="Token" - value={ - gemaltoConfiguration?.keysecure?.credentials - ?.token || "" - } - error={validationErrors["gemalto_token"] || ""} - required - /> - - - ) => - setGemaltoConfiguration({ - ...gemaltoConfiguration, - keysecure: { - ...gemaltoConfiguration?.keysecure, - credentials: { - ...gemaltoConfiguration?.keysecure - ?.credentials, - domain: e.target.value, - }, - }, - }) - } - label="Domain" - value={ - gemaltoConfiguration?.keysecure?.credentials - ?.domain || "" - } - error={validationErrors["gemalto_domain"] || ""} - required - /> - - - ) => - setGemaltoConfiguration({ - ...gemaltoConfiguration, - keysecure: { - ...gemaltoConfiguration?.keysecure, - credentials: { - ...gemaltoConfiguration?.keysecure - ?.credentials, - retry: e.target.value, - }, - }, - }) - } - label="Retry (seconds)" - value={ - gemaltoConfiguration?.keysecure?.credentials - ?.retry || "" - } - error={validationErrors["gemalto_retry"] || ""} - /> - -
- - -
- - Custom CA Root certificate verification - + {gemaltoCACertificateSecret ? ( + + removeCertificate(gemaltoCACertificateSecret) + } + /> + ) : ( {}} + onChange={(encodedValue, fileName) => + setGemaltotCACertificate({ + encoded_key: + gemaltoCACertificate?.encoded_key || "", + id: gemaltoCACertificate?.id || "", + key: gemaltoCACertificate?.key || "", + cert: fileName || "", + encoded_cert: encodedValue || "", + }) + } accept=".cer,.crt,.cert,.pem" id="gemalto_ca" name="gemalto_ca" label="CA" - value={""} + value={gemaltoCACertificate?.cert || ""} /> - {gemaltoCACertificateSecret ? ( - - removeCertificate(gemaltoCACertificateSecret) - } - /> - ) : ( - - setGemaltotCACertificate({ - encoded_key: - gemaltoCACertificate?.encoded_key || "", - id: gemaltoCACertificate?.id || "", - key: gemaltoCACertificate?.key || "", - cert: fileName || "", - encoded_cert: encodedValue || "", - }) - } - accept=".cer,.crt,.cert,.pem" - id="gemalto_ca" - name="gemalto_ca" - label="CA" - value={gemaltoCACertificate?.cert || ""} - /> - )} -
- - - )} -
-

Additional Configurations

-
- + )} +
+ + + )} + + + +

+ Additional Configurations +

+ + - - {enabledCustomCertificates && ( - - - -
- - Encryption Service Certificates - - {serverTLSCertificateSecret ? ( - - removeCertificate(serverTLSCertificateSecret) - } - /> - ) : ( - - { - setServerCertificate({ - encoded_key: encodedValue || "", - id: serverCertificate?.id || "", - key: fileName || "", - cert: serverCertificate?.cert || "", - encoded_cert: - serverCertificate?.encoded_cert || "", - }); - cleanValidation("serverKey"); - }} - accept=".key,.pem" - id="serverKey" - name="serverKey" - label="Key" - value={serverCertificate?.key} - /> - { - setServerCertificate({ - encoded_key: - serverCertificate?.encoded_key || "", - id: serverCertificate?.id || "", - key: serverCertificate?.key || "", - cert: fileName || "", - encoded_cert: encodedValue || "", - }); - cleanValidation("serverCert"); - }} - accept=".cer,.crt,.cert,.pem" - id="serverCert" - name="serverCert" - label="Cert" - value={serverCertificate?.cert} - /> - - )} -
- - - - -
- - Mutual TLS authentication with MinIO - - {mTLSCertificateSecret ? ( - - removeCertificate(mTLSCertificateSecret) - } - /> - ) : ( - - { - setMTLSCertificate({ - encoded_key: encodedValue || "", - id: mTLSCertificate?.id || "", - key: fileName || "", - cert: mTLSCertificate?.cert || "", - encoded_cert: - mTLSCertificate?.encoded_cert || "", - }); - cleanValidation("clientKey"); - }} - accept=".key,.pem" - id="clientKey" - name="clientKey" - label="Key" - value={mTLSCertificate?.key} - /> - { - setMTLSCertificate({ - encoded_key: - mTLSCertificate?.encoded_key || "", - id: mTLSCertificate?.id || "", - key: mTLSCertificate?.key || "", - cert: fileName || "", - encoded_cert: encodedValue || "", - }); - cleanValidation("clientCert"); - }} - accept=".cer,.crt,.cert,.pem" - id="clientCert" - name="clientCert" - label="Cert" - value={mTLSCertificate?.cert} - /> - - )} -
- - - - )} - - - ) => - setImage(e.target.value) - } - label="Image" - placeholder="minio/kes:v0.17.6" - value={image} - /> + + + {enabledCustomCertificates && ( + + +
+ + Encryption Service Certificates + + {serverTLSCertificateSecret ? ( + + removeCertificate(serverTLSCertificateSecret) + } + /> + ) : ( + + { + setServerCertificate({ + encoded_key: encodedValue || "", + id: serverCertificate?.id || "", + key: fileName || "", + cert: serverCertificate?.cert || "", + encoded_cert: + serverCertificate?.encoded_cert || "", + }); + cleanValidation("serverKey"); + }} + accept=".key,.pem" + id="serverKey" + name="serverKey" + label="Key" + value={serverCertificate?.key} + /> + { + setServerCertificate({ + encoded_key: serverCertificate?.encoded_key || "", + id: serverCertificate?.id || "", + key: serverCertificate?.key || "", + cert: fileName || "", + encoded_cert: encodedValue || "", + }); + cleanValidation("serverCert"); + }} + accept=".cer,.crt,.cert,.pem" + id="serverCert" + name="serverCert" + label="Cert" + value={serverCertificate?.cert} + /> + + )} +
- - ) => - setReplicas(e.target.value) - } - label="Replicas" - value={replicas} - required - error={validationErrors["replicas"] || ""} - /> - - -
- - SecurityContext for KES pods - - -
-
- - ) => { - 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; + + + Mutual TLS authentication with MinIO + + {mTLSCertificateSecret ? ( + + removeCertificate(mTLSCertificateSecret) + } + /> + ) : ( + + { + setMTLSCertificate({ + encoded_key: encodedValue || "", + id: mTLSCertificate?.id || "", + key: fileName || "", + cert: mTLSCertificate?.cert || "", + encoded_cert: + mTLSCertificate?.encoded_cert || "", + }); + cleanValidation("clientKey"); + }} + accept=".key,.pem" + id="clientKey" + name="clientKey" + label="Key" + value={mTLSCertificate?.key} + /> + { + setMTLSCertificate({ + encoded_key: mTLSCertificate?.encoded_key || "", + id: mTLSCertificate?.id || "", + key: mTLSCertificate?.key || "", + cert: fileName || "", + encoded_cert: encodedValue || "", + }); + cleanValidation("clientCert"); + }} + accept=".cer,.crt,.cert,.pem" + id="clientCert" + name="clientCert" + label="Cert" + value={mTLSCertificate?.cert} + /> + + )} + + + + + )} + + ) => + setImage(e.target.value) + } + label="Image" + placeholder="minio/kes:v0.17.6" + value={image} + /> + + + ) => + setReplicas(e.target.value) + } + label="Replicas" + value={replicas} + required + error={validationErrors["replicas"] || ""} + /> + + + + +

+ SecurityContext for KES pods +

+ + +
+
+ ) => { 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"} + /> + + - + )}