Fixed Node Selector reset in Pod placement (#1512)

2022-02-03 09:41:35 -07:00
parent 4718380bd2
commit 4091b11f99
6 changed files with 71 additions and 28 deletions
--- a/portal-ui/src/common/BackLink.tsx
+++ b/portal-ui/src/common/BackLink.tsx
@@ -51,11 +51,20 @@ interface IBackLink {
  to: string;
  label: string;
  className?: any;
+  executeOnClick?: () => void;
 }

-const BackLink = ({ to, label, classes, className }: IBackLink) => {
+const BackLink = ({ to, label, classes, className, executeOnClick }: IBackLink) => {
  return (
-    <Link to={to} className={`${classes.link} ${className ? className : ""}`}>
+    <Link
+      to={to}
+      className={`${classes.link} ${className ? className : ""}`}
+      onClick={() => {
+        if (executeOnClick) {
+          executeOnClick();
+        }
+      }}
+    >
      <div className={classes.icon}>
        <BackSettingsIcon />
      </div>
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
@@ -682,6 +682,7 @@ const AddTenant = ({
    type: "other",
    enabled: true,
    action: () => {
+      resetAddTenantForm();
      history.push("/tenants");
    },
  };
@@ -770,7 +771,11 @@ const AddTenant = ({
        />
      )}
      <PageHeader label={"Create New Tenant"} />
-      <BackLink to={"/tenants"} label={"Return to Tenant List"} />
+      <BackLink
+        to={"/tenants"}
+        label={"Return to Tenant List"}
+        executeOnClick={resetAddTenantForm}
+      />
      <PageLayout>
        {addSending && (
          <Grid item xs={12}>
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx
@@ -21,7 +21,7 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Grid, IconButton, Paper, SelectChangeEvent } from "@mui/material";
 import { AppState } from "../../../../../store";
-import { isPageValid, updateAddField } from "../../actions";
+import { isPageValid, setKeyValuePairs, updateAddField } from "../../actions";
 import { setModalErrorSnackMessage } from "../../../../../actions";
 import {
  modalBasic,
@@ -32,6 +32,7 @@ import {
  IValidation,
 } from "../../../../../utils/validationFunctions";
 import { ErrorResponseHandler } from "../../../../../common/types";
+import { LabelKeyPair } from "../../types";
 import RadioGroupSelector from "../../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import FormSwitchWrapper from "../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import api from "../../../../../common/api";
@@ -45,9 +46,11 @@ interface IAffinityProps {
  podAffinity: string;
  nodeSelectorLabels: string;
  withPodAntiAffinity: boolean;
+  keyValuePairs: LabelKeyPair[];
  setModalErrorSnackMessage: typeof setModalErrorSnackMessage;
  updateAddField: typeof updateAddField;
  isPageValid: typeof isPageValid;
+  setKeyValuePairs: typeof setKeyValuePairs;
 }

 const styles = (theme: Theme) =>
@@ -107,11 +110,6 @@ const styles = (theme: Theme) =>
    ...wizardCommon,
  });

-interface LabelKeyPair {
-  key: string;
-  value: string;
-}
-
 interface OptionPair {
  label: string;
  value: string;
@@ -124,6 +122,8 @@ const Affinity = ({
  withPodAntiAffinity,
  setModalErrorSnackMessage,
  updateAddField,
+  keyValuePairs,
+  setKeyValuePairs,
  isPageValid,
 }: IAffinityProps) => {
  const [validationErrors, setValidationErrors] = useState<any>({});
@@ -131,10 +131,6 @@ const Affinity = ({
  const [keyValueMap, setKeyValueMap] = useState<{ [key: string]: string[] }>(
    {}
  );
-  const [keyValuePairs, setKeyValuePairs] = useState<LabelKeyPair[]>([
-    { key: "", value: "" },
-  ]);
-
  const [keyOptions, setKeyOptions] = useState<OptionPair[]>([]);

  // Common
@@ -160,7 +156,6 @@ const Affinity = ({
            });
          }
          setKeyOptions(keys);
-          setKeyValuePairs([{ key: keys[0].value, value: keys[0].value }]);
        })
        .catch((err: ErrorResponseHandler) => {
          setLoading(false);
@@ -236,7 +231,7 @@ const Affinity = ({
          Configure how pods will be assigned to nodes
        </span>
      </div>
-      <Grid xs={12} className={classes.affinityConfigField}>
+      <Grid item xs={12} className={classes.affinityConfigField}>
        <Grid item className={classes.affinityFieldLabel}>
          <div className={classes.label}>Type</div>
          <div
@@ -287,7 +282,7 @@ const Affinity = ({
              {keyValuePairs &&
                keyValuePairs.map((kvp, i) => {
                  return (
-                    <Grid item xs={12} className={classes.affinityRow}>
+                    <Grid item xs={12} className={classes.affinityRow} key={`affinity-keyVal-${i.toString()}`}>
                      <Grid item xs={5} className={classes.affinityLabelKey}>
                        {keyOptions.length > 0 && (
                          <SelectWrapper
@@ -307,7 +302,6 @@ const Affinity = ({
                            label={""}
                            value={kvp.key}
                            options={keyOptions}
-                            classes={classes.fieldContainer}
                          />
                        )}
                        {keyOptions.length === 0 && (
@@ -326,7 +320,6 @@ const Affinity = ({
                            }}
                            index={i}
                            placeholder={"Key"}
-                            classes={classes.fieldContainer}
                          />
                        )}
                      </Grid>
@@ -352,7 +345,6 @@ const Affinity = ({
                                  })
                                : []
                            }
-                            classes={classes.fieldContainer}
                          />
                        )}
                        {keyOptions.length === 0 && (
@@ -371,7 +363,6 @@ const Affinity = ({
                            }}
                            index={i}
                            placeholder={"value"}
-                            classes={classes.fieldContainer}
                          />
                        )}
                      </Grid>
@@ -423,18 +414,22 @@ const Affinity = ({
  );
 };

-const mapState = (state: AppState) => ({
-  podAffinity: state.tenants.createTenant.fields.affinity.podAffinity,
-  nodeSelectorLabels:
-    state.tenants.createTenant.fields.affinity.nodeSelectorLabels,
-  withPodAntiAffinity:
-    state.tenants.createTenant.fields.affinity.withPodAntiAffinity,
-});
+const mapState = (state: AppState) => {
+  const createTenant = state.tenants.createTenant;
+
+  return {
+    podAffinity: createTenant.fields.affinity.podAffinity,
+    nodeSelectorLabels: createTenant.fields.affinity.nodeSelectorLabels,
+    withPodAntiAffinity: createTenant.fields.affinity.withPodAntiAffinity,
+    keyValuePairs: createTenant.nodeSelectorPairs,
+  };
+};

 const connector = connect(mapState, {
  setModalErrorSnackMessage,
  updateAddField,
  isPageValid,
+  setKeyValuePairs,
 });

 export default withStyles(styles)(connector(Affinity));
--- a/portal-ui/src/screens/Console/Tenants/actions.ts
+++ b/portal-ui/src/screens/Console/Tenants/actions.ts
@@ -42,6 +42,8 @@ import {
  TENANT_DETAILS_SET_LOADING,
  TENANT_DETAILS_SET_TAB,
  TENANT_DETAILS_SET_TENANT,
+  ADD_TENANT_SET_KEY_PAIR_VALUE,
+  LabelKeyPair,
 } from "./types";

 // Basic actions
@@ -277,3 +279,10 @@ export const setTenantTab = (tab: string) => {
    tab,
  };
 };
+
+export const setKeyValuePairs = (newArray: LabelKeyPair[]) => {
+  return {
+    type: ADD_TENANT_SET_KEY_PAIR_VALUE,
+    newArray,
+  };
+};
--- a/portal-ui/src/screens/Console/Tenants/reducer.ts
+++ b/portal-ui/src/screens/Console/Tenants/reducer.ts
@@ -33,6 +33,7 @@ import {
  ADD_TENANT_ENCRYPTION_VAULT_CERT,
  ADD_TENANT_RESET_FORM,
  ADD_TENANT_SET_CURRENT_PAGE,
+  ADD_TENANT_SET_KEY_PAIR_VALUE,
  ADD_TENANT_SET_LIMIT_SIZE,
  ADD_TENANT_SET_PAGE_VALID,
  ADD_TENANT_SET_STORAGE_CLASSES_LIST,
@@ -332,6 +333,7 @@ const initialState: ITenantState = {
        encoded_cert: "",
      },
    },
+    nodeSelectorPairs: [{ key: "", value: "" }],
  },
  tenantDetails: {
    currentTenant: "",
@@ -883,6 +885,15 @@ export function tenantsReducer(
              encoded_cert: "",
            },
          },
+          nodeSelectorPairs: [{ key: "", value: "" }],
+        },
+      };
+    case ADD_TENANT_SET_KEY_PAIR_VALUE:
+      return {
+        ...state,
+        createTenant: {
+          ...state.createTenant,
+          nodeSelectorPairs: action.newArray,
        },
      };
    case TENANT_DETAILS_SET_LOADING:
--- a/portal-ui/src/screens/Console/Tenants/types.ts
+++ b/portal-ui/src/screens/Console/Tenants/types.ts
@@ -20,7 +20,6 @@ import { KeyPair, Opts } from "./ListTenants/utils";
 import { IntegrationConfiguration } from "./AddTenant/Steps/TenantResources/utils";

 export const ADD_TENANT_SET_CURRENT_PAGE = "ADD_TENANT/SET_CURRENT_PAGE";
-export const ADD_TENANT_SET_ADVANCED_MODE = "ADD_TENANT/SET_ADVANCED_MODE";
 export const ADD_TENANT_UPDATE_FIELD = "ADD_TENANT/UPDATE_FIELD";
 export const ADD_TENANT_SET_PAGE_VALID = "ADD_TENANT/SET_PAGE_VALID";
 export const ADD_TENANT_RESET_FORM = "ADD_TENANT/RESET_FORM";
@@ -59,6 +58,9 @@ export const ADD_TENANT_ENCRYPTION_VAULT_CA = "ADD_TENANT/ENCRYPTION_VAULT_CA";
 export const ADD_TENANT_ENCRYPTION_GEMALTO_CA =
  "ADD_TENANT/ENCRYPTION_GEMALTO_CA";

+// Affinity Node Selector KeyPairs
+export const ADD_TENANT_SET_KEY_PAIR_VALUE = "ADD_TENANT/SET_KEY_PAIR_VALUE";
+
 // Tenant Details
 export const TENANT_DETAILS_SET_LOADING = "TENANT_DETAILS/SET_LOADING";
 export const TENANT_DETAILS_SET_CURRENT_TENANT =
@@ -92,6 +94,7 @@ export interface ICreateTenant {
  limitSize: any;
  fields: IFieldStore;
  certificates: ICertificatesItems;
+  nodeSelectorPairs: LabelKeyPair[];
 }

 export interface ICertificatesItems {
@@ -123,6 +126,11 @@ export interface INameTenantFields {
  selectedStorageType: string;
 }

+export interface LabelKeyPair {
+  key: string;
+  value: string;
+}
+
 export interface ISecurityContext {
  runAsUser: string;
  runAsGroup: string;
@@ -422,6 +430,11 @@ interface ResetForm {
  type: typeof ADD_TENANT_RESET_FORM;
 }

+interface SetNodeSelectorKeyPairValueArray {
+  type: typeof ADD_TENANT_SET_KEY_PAIR_VALUE;
+  newArray: LabelKeyPair[];
+}
+
 interface SetLoadingTenant {
  type: typeof TENANT_DETAILS_SET_LOADING;
  state: boolean;
@@ -467,6 +480,7 @@ export type TenantsManagementTypes =
  | AddFileVaultCa
  | AddFileGemaltoCa
  | ResetForm
+  | SetNodeSelectorKeyPairValueArray
  | SetLoadingTenant
  | SetTenantName
  | SetTenantDetails