Added console & minio domains selector to add tenant wizard (#1863)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
2022-04-20 11:29:06 -06:00
parent 9b7fdfd286
commit af76280f1d
7 changed files with 277 additions and 8 deletions
--- a/portal-ui/src/common/types.ts
+++ b/portal-ui/src/common/types.ts
@@ -79,6 +79,7 @@ export interface ITenantCreator {
  logSearchConfiguration?: LogSearchConfiguration;
  prometheusConfiguration?: PrometheusConfiguration;
  affinity?: AffinityConfiguration;
+  domains?: IDomainsRequest;
 }

 export interface ImageRegistry {
--- a/portal-ui/src/screens/Console/Common/UsageBarWrapper/SummaryUsageBar.tsx
+++ b/portal-ui/src/screens/Console/Common/UsageBarWrapper/SummaryUsageBar.tsx
@@ -66,7 +66,6 @@ const SummaryUsageBar = ({
  loading,
  error,
 }: ISummaryUsageBar) => {
-  console.log("TENANT", tenant);
  let raw: ValueUnit = { value: "n/a", unit: "" };
  let capacity: ValueUnit = { value: "n/a", unit: "" };
  let used: ValueUnit = { value: "n/a", unit: "" };
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
@@ -236,6 +236,9 @@ const AddTenant = ({
      fields.configure.prometheusSecurityContext;
    const kesSecurityContext = fields.encryption.kesSecurityContext;
    const kesReplicas = fields.encryption.replicas;
+    const setDomains = fields.configure.setDomains;
+    const minioDomains = fields.configure.minioDomains;
+    const consoleDomain = fields.configure.consoleDomain;

    if (addSending) {
      const tolerationValues = tolerations.filter(
@@ -649,8 +652,28 @@ const AddTenant = ({
          break;
      }

+      let domains: any = {};
+      let sendDomain: any = {};
+
+      if (setDomains) {
+        if (consoleDomain !== "") {
+          domains.console = consoleDomain;
+        }
+
+        const filteredDomains = minioDomains.filter((dom) => dom.trim() !== "");
+
+        if (filteredDomains.length > 0) {
+          domains.minio = filteredDomains;
+        }
+
+        if (Object.keys(domains).length > 0) {
+          sendDomain.domains = domains;
+        }
+      }
+
      dataSend = {
        ...dataSend,
+        ...sendDomain,
        idp: { ...dataIDP },
      };
      api
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
@@ -19,13 +19,18 @@ 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 } from "@mui/material";
+import { Grid, IconButton, Paper } from "@mui/material";
 import {
  createTenantCommon,
  modalBasic,
  wizardCommon,
 } from "../../../Common/FormComponents/common/styleLibrary";
-import { isPageValid, updateAddField } from "../../actions";
+import {
+  addNewMinIODomain,
+  isPageValid,
+  removeMinIODomain,
+  updateAddField,
+} from "../../actions";
 import { AppState } from "../../../../../store";
 import { clearValidationError } from "../../utils";
 import {
@@ -35,14 +40,21 @@ import {
 import FormSwitchWrapper from "../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import InputBoxWrapper from "../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { ISecurityContext } from "../../types";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "../../../../../icons/RemoveIcon";

 interface IConfigureProps {
  updateAddField: typeof updateAddField;
  isPageValid: typeof isPageValid;
+  addNewMinIODomain: typeof addNewMinIODomain;
+  removeMinIODomain: typeof removeMinIODomain;
  classes: any;
  exposeMinIO: boolean;
  exposeConsole: boolean;
  tenantCustom: boolean;
+  setDomains: boolean;
+  consoleDomain: string;
+  minioDomains: string[];
  tenantSecurityContext: ISecurityContext;
 }

@@ -50,6 +62,7 @@ const styles = (theme: Theme) =>
  createStyles({
    configSectionItem: {
      marginRight: 15,
+      marginBottom: 15,

      "& .multiContainer": {
        border: "1px solid red",
@@ -79,11 +92,25 @@ const styles = (theme: Theme) =>
        },
      },
    },
-
    fieldSpaceTop: {
      marginTop: 15,
    },
-
+    wrapperContainer: {
+      display: "flex",
+      marginBottom: 15,
+    },
+    overlayAction: {
+      marginLeft: 10,
+      display: "flex",
+      alignItems: "center",
+      "& svg": {
+        width: 15,
+        height: 15,
+      },
+      "& button": {
+        background: "#EAEAEA",
+      },
+    },
    ...modalBasic,
    ...wizardCommon,
  });
@@ -94,8 +121,13 @@ const Configure = ({
  exposeConsole,
  tenantCustom,
  updateAddField,
+  setDomains,
+  consoleDomain,
+  minioDomains,
  isPageValid,
  tenantSecurityContext,
+  addNewMinIODomain,
+  removeMinIODomain,
 }: IConfigureProps) => {
  const [validationErrors, setValidationErrors] = useState<any>({});

@@ -143,17 +175,59 @@ const Configure = ({
      ];
    }

+    if (setDomains) {
+      const minioExtraValidations = minioDomains.map((validation, index) => {
+        return {
+          fieldKey: `minio-domain-${index.toString()}`,
+          required: false,
+          value: validation,
+          pattern:
+            /((http|https):\/\/)+[a-zA-Z0-9\-.]{3,}\.[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/,
+          customPatternMessage:
+            "MinIO domain is not in the form of http|https://subdomain.domain",
+        };
+      });
+
+      customAccountValidation = [
+        ...customAccountValidation,
+        ...minioExtraValidations,
+        {
+          fieldKey: "console_domain",
+          required: false,
+          value: consoleDomain,
+          pattern:
+            /((http|https):\/\/)+[a-zA-Z0-9\-.]{3,}\.[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?(:[1-9]{1}([0-9]{1,4})?)?(\/[a-zA-Z0-9]{1,})*?$/,
+          customPatternMessage:
+            "Console domain is not in the form of http|https://subdomain.domain:port/subpath1/subpath2",
+        },
+      ];
+    }
+
    const commonVal = commonFormValidation(customAccountValidation);

    isPageValid("configure", Object.keys(commonVal).length === 0);

    setValidationErrors(commonVal);
-  }, [isPageValid, tenantCustom, tenantSecurityContext]);
+  }, [
+    isPageValid,
+    tenantCustom,
+    tenantSecurityContext,
+    setDomains,
+    consoleDomain,
+    minioDomains,
+  ]);

  const cleanValidation = (fieldName: string) => {
    setValidationErrors(clearValidationError(validationErrors, fieldName));
  };

+  const updateMinIODomain = (value: string, index: number) => {
+    const copyDomains = [...minioDomains];
+    copyDomains[index] = value;
+
+    updateField("minioDomains", copyDomains);
+  };
+
  return (
    <Paper className={classes.paperWrapper}>
      <div className={classes.headerElement}>
@@ -199,6 +273,96 @@ const Configure = ({
          label={"Expose Console Service"}
        />
      </Grid>
+      <Grid item xs={12} className={classes.configSectionItem}>
+        <FormSwitchWrapper
+          value="custom_domains"
+          id="custom_domains"
+          name="custom_domains"
+          checked={setDomains}
+          onChange={(e) => {
+            const targetD = e.target;
+            const checked = targetD.checked;
+
+            updateField("setDomains", checked);
+          }}
+          label={"Set Custom Domains"}
+        />
+      </Grid>
+      {setDomains && (
+        <Grid item xs={12} className={classes.tenantCustomizationFields}>
+          <fieldset className={classes.fieldGroup}>
+            <legend className={classes.descriptionText}>
+              Custom Domains for MinIO
+            </legend>
+            <Grid item xs={12} className={`${classes.configSectionItem}`}>
+              <div className={classes.containerItem}>
+                <InputBoxWrapper
+                  id="console_domain"
+                  name="console_domain"
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    updateField("consoleDomain", e.target.value);
+                    cleanValidation("tenant_securityContext_runAsUser");
+                  }}
+                  label="Console Domain"
+                  value={consoleDomain}
+                  placeholder={"Eg. http://subdomain.domain:port/subpath1/subpath2"}
+                  error={validationErrors["console_domain"] || ""}
+                />
+              </div>
+              <div>
+                <h4>MinIO Domains</h4>
+                <div className={`${classes.responsiveSectionItem}`}>
+                  {minioDomains.map((domain, index) => {
+                    return (
+                      <div
+                        className={`${classes.containerItem} ${classes.wrapperContainer}`}
+                        key={`minio-domain-key-${index.toString()}`}
+                      >
+                        <InputBoxWrapper
+                          id={`minio-domain-${index.toString()}`}
+                          name={`minio-domain-${index.toString()}`}
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>
+                          ) => {
+                            updateMinIODomain(e.target.value, index);
+                          }}
+                          label={`MinIO Domain ${index + 1}`}
+                          value={domain}
+                          placeholder={"Eg. http://subdomain.domain"}
+                          error={
+                            validationErrors[
+                              `minio-domain-${index.toString()}`
+                            ] || ""
+                          }
+                        />
+                        <div className={classes.overlayAction}>
+                          <IconButton
+                            size={"small"}
+                            onClick={addNewMinIODomain}
+                            disabled={index !== minioDomains.length - 1}
+                          >
+                            <AddIcon />
+                          </IconButton>
+                        </div>
+
+                        <div className={classes.overlayAction}>
+                          <IconButton
+                            size={"small"}
+                            onClick={() => removeMinIODomain(index)}
+                            disabled={minioDomains.length <= 1}
+                          >
+                            <RemoveIcon />
+                          </IconButton>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </Grid>
+          </fieldset>
+        </Grid>
+      )}

      <Grid item xs={12} className={classes.configSectionItem}>
        <FormSwitchWrapper
@@ -321,6 +485,9 @@ const Configure = ({
 const mapState = (state: AppState) => ({
  exposeMinIO: state.tenants.createTenant.fields.configure.exposeMinIO,
  exposeConsole: state.tenants.createTenant.fields.configure.exposeConsole,
+  setDomains: state.tenants.createTenant.fields.configure.setDomains,
+  consoleDomain: state.tenants.createTenant.fields.configure.consoleDomain,
+  minioDomains: state.tenants.createTenant.fields.configure.minioDomains,
  tenantCustom: state.tenants.createTenant.fields.configure.tenantCustom,
  tenantSecurityContext:
    state.tenants.createTenant.fields.configure.tenantSecurityContext,
@@ -329,6 +496,8 @@ const mapState = (state: AppState) => ({
 const connector = connect(mapState, {
  updateAddField,
  isPageValid,
+  addNewMinIODomain,
+  removeMinIODomain,
 });

 export default withStyles(styles)(connector(Configure));
--- a/portal-ui/src/screens/Console/Tenants/actions.ts
+++ b/portal-ui/src/screens/Console/Tenants/actions.ts
@@ -69,7 +69,7 @@ import {
  EDIT_POOL_SET_TOLERATION_VALUE,
  EDIT_POOL_ADD_NEW_TOLERATION,
  EDIT_POOL_REMOVE_TOLERATION_ROW,
-  EDIT_POOL_SET_KEY_PAIR_VALUE,
+  EDIT_POOL_SET_KEY_PAIR_VALUE, ADD_TENANT_ADD_MINIO_DOMAIN, ADD_TENANT_DELETE_MINIO_DOMAIN,
 } from "./types";
 import { ITolerationModel } from "../../../common/types";

@@ -339,6 +339,19 @@ export const removeToleration = (index: number) => {
  };
 };

+export const addNewMinIODomain = () => {
+  return {
+    type: ADD_TENANT_ADD_MINIO_DOMAIN,
+  };
+};
+
+export const removeMinIODomain = (index: number) => {
+  return {
+    type: ADD_TENANT_DELETE_MINIO_DOMAIN,
+    removeID: index,
+  };
+};
+
 // Add Pool

 export const setPoolLoading = (state: boolean) => {
--- a/portal-ui/src/screens/Console/Tenants/reducer.ts
+++ b/portal-ui/src/screens/Console/Tenants/reducer.ts
@@ -31,10 +31,12 @@ import {
  ADD_TENANT_ADD_FILE_TO_CA_KEYPAIR,
  ADD_TENANT_ADD_FILE_TO_CONSOLE_CA_KEYPAIR,
  ADD_TENANT_ADD_FILE_TO_MINIO_KEYPAIR,
+  ADD_TENANT_ADD_MINIO_DOMAIN,
  ADD_TENANT_ADD_MINIO_KEYPAIR,
  ADD_TENANT_ADD_NEW_TOLERATION,
  ADD_TENANT_DELETE_CA_KEYPAIR,
  ADD_TENANT_DELETE_CONSOLE_CA_KEYPAIR,
+  ADD_TENANT_DELETE_MINIO_DOMAIN,
  ADD_TENANT_DELETE_MINIO_KEYPAIR,
  ADD_TENANT_ENCRYPTION_CLIENT_CERT,
  ADD_TENANT_ENCRYPTION_GEMALTO_CA,
@@ -128,6 +130,9 @@ const initialState: ITenantState = {
        prometheusImage: "",
        prometheusSidecarImage: "",
        prometheusInitImage: "",
+        setDomains: false,
+        consoleDomain: "",
+        minioDomains: [""],
        tenantSecurityContext: {
          runAsUser: "1000",
          runAsGroup: "1000",
@@ -767,6 +772,9 @@ export function tenantsReducer(
              prometheusImage: "",
              prometheusSidecarImage: "",
              prometheusInitImage: "",
+              setDomains: false,
+              consoleDomain: "",
+              minioDomains: [""],
              tenantSecurityContext: {
                runAsUser: "1000",
                runAsGroup: "1000",
@@ -1108,6 +1116,44 @@ export function tenantsReducer(
          tolerations: [...cleanTolerationArray],
        },
      };
+    case ADD_TENANT_ADD_MINIO_DOMAIN:
+      const newDomainsList = [
+        ...state.createTenant.fields.configure.minioDomains,
+      ];
+      newDomainsList.push("");
+      return {
+        ...state,
+        createTenant: {
+          ...state.createTenant,
+          fields: {
+            ...state.createTenant.fields,
+            configure: {
+              ...state.createTenant.fields.configure,
+              minioDomains: newDomainsList,
+            },
+          },
+        },
+      };
+    case ADD_TENANT_DELETE_MINIO_DOMAIN:
+      const filteredDomains =
+        state.createTenant.fields.configure.minioDomains.filter(
+          (_, index) => index !== action.removeID
+        );
+
+      return {
+        ...state,
+        createTenant: {
+          ...state.createTenant,
+          fields: {
+            ...state.createTenant.fields,
+            configure: {
+              ...state.createTenant.fields.configure,
+              minioDomains: filteredDomains,
+            },
+          },
+        },
+      };
+
    case ADD_POOL_SET_LOADING:
      return {
        ...state,
--- a/portal-ui/src/screens/Console/Tenants/types.ts
+++ b/portal-ui/src/screens/Console/Tenants/types.ts
@@ -38,6 +38,10 @@ export const ADD_TENANT_SET_LIMIT_SIZE = "ADD_TENANT/SET_LIMIT_SIZE";
 export const ADD_TENANT_SET_STORAGE_TYPE =
  "ADD_TENANT/ADD_TENANT_SET_STORAGE_TYPE";

+// Configuration
+export const ADD_TENANT_ADD_MINIO_DOMAIN = "ADD_TENANT/ADD_MINIO_DOMAIN";
+export const ADD_TENANT_DELETE_MINIO_DOMAIN = "ADD_TENANT/DELETE_MINIO_DOMAIN";
+
 // Security
 export const ADD_TENANT_ADD_MINIO_KEYPAIR = "ADD_TENANT/ADD_MINIO_KEYPAIR";
 export const ADD_TENANT_ADD_FILE_TO_MINIO_KEYPAIR =
@@ -265,6 +269,9 @@ export interface IConfigureFields {
  prometheusImage: string;
  prometheusSidecarImage: string;
  prometheusInitImage: string;
+  setDomains: boolean;
+  consoleDomain: string;
+  minioDomains: string[];
  tenantSecurityContext: ISecurityContext;
  logSearchSecurityContext: ISecurityContext;
  logSearchPostgresSecurityContext: ISecurityContext;
@@ -576,6 +583,15 @@ interface AddFileConsoleCert {
  value: string;
 }

+interface AddMinIODomain {
+  type: typeof ADD_TENANT_ADD_MINIO_DOMAIN;
+}
+
+interface DeleteMinIODomain {
+  type: typeof ADD_TENANT_DELETE_MINIO_DOMAIN;
+  removeID: number;
+}
+
 // Encryption Certs
 interface AddFileServerCert {
  type: typeof ADD_TENANT_ENCRYPTION_SERVER_CERT;
@@ -817,4 +833,6 @@ export type TenantsManagementTypes =
  | EditPoolToleration
  | EditRemovePoolTolerationRow
  | EditPoolSelectorKeyPairValueArray
-  | EditPoolSetInitialInformation;
+  | EditPoolSetInitialInformation
+  | AddMinIODomain
+  | DeleteMinIODomain;