[UI] EVEREST-1616 Set affinity rules in DB creation wizard and Components page

ui/apps/everest/src/components/cluster-form/advanced-configuration/advanced-configuration-schema.ts

@@ -17,6 +17,7 @@ import { z } from 'zod';
 import { AdvancedConfigurationFields } from './advanced-configuration.types';
 import { IP_REGEX } from 'consts';
 import { Messages } from './messages';
+import { AffinityRule } from 'shared-types/affinity.types';
 
 export const advancedConfigurationsSchema = () =>
   z
@@ -27,6 +28,7 @@ export const advancedConfigurationsSchema = () =>
       ),
       [AdvancedConfigurationFields.engineParametersEnabled]: z.boolean(),
       [AdvancedConfigurationFields.engineParameters]: z.string().optional(),
+      [AdvancedConfigurationFields.affinityRules]: z.custom<AffinityRule[]>(),
     })
     .passthrough()
     .superRefine(({ sourceRanges }, ctx) => {

ui/apps/everest/src/components/cluster-form/advanced-configuration/advanced-configuration.tsx

@@ -13,67 +13,104 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { Stack } from '@mui/material';
+import { DbType } from '@percona/types';
 import { SwitchInput, TextArray, TextInput } from '@percona/ui-lib';
-import { Messages } from './messages';
-import { AdvancedConfigurationFields } from './advanced-configuration.types';
+import { AffinityListView } from 'components/cluster-form/affinity/affinity-list-view/affinity-list.view';
 import { useFormContext } from 'react-hook-form';
-import { DbType } from '@percona/types';
+import { AdvancedConfigurationFields } from './advanced-configuration.types';
 import { getParamsPlaceholderFromDbType } from './advanced-configuration.utils';
-import { Stack } from '@mui/material';
+import { Messages } from './messages';
+import { DbWizardForm } from 'consts';
+import { AffinityRule } from 'shared-types/affinity.types';
+import { useCallback } from 'react';
+import RoundedBox from 'components/rounded-box';
 
 interface AdvancedConfigurationFormProps {
   dbType: DbType;
+  showAffinity?: boolean;
 }
 
 export const AdvancedConfigurationForm = ({
   dbType,
+  showAffinity = false,
 }: AdvancedConfigurationFormProps) => {
-  const { watch } = useFormContext();
-  const [externalAccess, engineParametersEnabled] = watch([
+  const { watch, setValue } = useFormContext();
+
+  const [
+    externalAccess,
+    engineParametersEnabled,
+    formAffinityRules,
+    isShardingEnabled,
+  ] = watch([
     AdvancedConfigurationFields.externalAccess,
     AdvancedConfigurationFields.engineParametersEnabled,
+    AdvancedConfigurationFields.affinityRules,
+    DbWizardForm.sharding,
   ]);
 
+  const onRulesChange = useCallback(
+    (newRules: AffinityRule[]) => {
+      setValue(AdvancedConfigurationFields.affinityRules, newRules, {
+        shouldTouch: true,
+        shouldDirty: true,
+      });
+    },
+    [setValue]
+  );
+
   return (
     <>
-      <SwitchInput
-        label={Messages.enableExternalAccess.title}
-        labelCaption={Messages.enableExternalAccess.caption}
-        name={AdvancedConfigurationFields.externalAccess}
-      />
-      {externalAccess && (
-        <Stack sx={{ ml: 6 }}>
-          <TextArray
-            placeholder={Messages.sourceRangePlaceholder}
-            fieldName={AdvancedConfigurationFields.sourceRanges}
-            fieldKey="sourceRange"
-            label={Messages.sourceRange}
-          />
-        </Stack>
+      {showAffinity && (
+        <AffinityListView
+          initialRules={formAffinityRules}
+          onRulesChange={onRulesChange}
+          dbType={dbType}
+          isShardingEnabled={isShardingEnabled}
+        />
       )}
-      <SwitchInput
-        label={Messages.engineParameters.title}
-        labelCaption={Messages.engineParameters.caption}
-        name={AdvancedConfigurationFields.engineParametersEnabled}
-        formControlLabelProps={{
-          sx: {
-            mt: 1,
-          },
-        }}
-      />
-      {engineParametersEnabled && (
-        <TextInput
-          name={AdvancedConfigurationFields.engineParameters}
-          textFieldProps={{
-            placeholder: getParamsPlaceholderFromDbType(dbType),
-            multiline: true,
-            minRows: 3,
+      <RoundedBox>
+        <SwitchInput
+          label={Messages.enableExternalAccess.title}
+          labelCaption={Messages.enableExternalAccess.caption}
+          name={AdvancedConfigurationFields.externalAccess}
+        />
+        {externalAccess && (
+          <Stack sx={{ ml: 6 }}>
+            <TextArray
+              placeholder={Messages.sourceRangePlaceholder}
+              fieldName={AdvancedConfigurationFields.sourceRanges}
+              fieldKey="sourceRange"
+              label={Messages.sourceRange}
+            />
+          </Stack>
+        )}
+      </RoundedBox>
+      <RoundedBox>
+        <SwitchInput
+          label={Messages.engineParameters.title}
+          labelCaption={Messages.engineParameters.caption}
+          name={AdvancedConfigurationFields.engineParametersEnabled}
+          formControlLabelProps={{
             sx: {
-              ml: 6,
+              mt: 1,
             },
           }}
         />
-      )}
+        {engineParametersEnabled && (
+          <TextInput
+            name={AdvancedConfigurationFields.engineParameters}
+            textFieldProps={{
+              placeholder: getParamsPlaceholderFromDbType(dbType),
+              multiline: true,
+              minRows: 3,
+              sx: {
+                ml: 6,
+              },
+            }}
+          />
+        )}
+      </RoundedBox>
     </>
   );
 };

ui/apps/everest/src/components/cluster-form/advanced-configuration/advanced-configuration.types.ts

@@ -18,4 +18,5 @@ export enum AdvancedConfigurationFields {
   sourceRanges = 'sourceRanges',
   engineParametersEnabled = 'engineParametersEnabled',
   engineParameters = 'engineParameters',
+  affinityRules = 'affinityRules',
 }

ui/apps/everest/src/components/cluster-form/advanced-configuration/advanced-configuration.utils.ts

@@ -60,5 +60,7 @@ export const advancedConfigurationModalDefaultValues = (
     [AdvancedConfigurationFields.sourceRanges]: sourceRangesSource
       ? sourceRangesSource.map((sourceRange) => ({ sourceRange }))
       : [{ sourceRange: '' }],
+    [AdvancedConfigurationFields.affinityRules]: [],
+    // TODO: for now empty list, has to be loaded from dbCluster when edit from Components page is implemented
   };
 };

ui/apps/everest/src/components/cluster-form/advanced-configuration/affinity/affinity-form.messages.ts

@@ -0,0 +1,5 @@
+export const Messages = {
+  description:
+    'Create a new affinity rule to control how your database workloads are allocated across your system. Use this rule to enhance performance, improve resource management, or ensure high availability based on your deployment needs.',
+  learnMore: 'Learn more',
+};

ui/apps/everest/src/components/cluster-form/affinity/affinity-form-dialog/affinity-form-dialog-context/affinity-form-context.tsx

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+import { AffinityFormDialogContextType } from './affinity-form-dialog-context.types';
+import { DbType } from '@percona/types';
+
+export const AffinityFormDialogContext =
+  createContext<AffinityFormDialogContextType>({
+    handleSubmit: () => {},
+    handleClose: () => {},
+    selectedAffinityUid: null,
+    setOpenAffinityModal: () => {},
+    openAffinityModal: false,
+    affinityRules: [],
+    dbType: DbType.Mongo,
+    isShardingEnabled: false,
+  });

ui/apps/everest/src/components/cluster-form/affinity/affinity-form-dialog/affinity-form-dialog-context/affinity-form-dialog-context.types.ts

@@ -0,0 +1,14 @@
+import { AffinityRule } from 'shared-types/affinity.types';
+import { AffinityFormData } from '../affinity-form/affinity-form.types';
+import { DbType } from '@percona/types';
+
+export type AffinityFormDialogContextType = {
+  handleSubmit: (data: AffinityFormData) => void;
+  handleClose: () => void;
+  selectedAffinityUid: string | null;
+  setOpenAffinityModal: React.Dispatch<React.SetStateAction<boolean>>;
+  openAffinityModal: boolean;
+  affinityRules: AffinityRule[];
+  dbType: DbType;
+  isShardingEnabled: boolean;
+};

ui/apps/everest/src/components/cluster-form/affinity/affinity-form-dialog/affinity-form-dialog.messages.ts

@@ -0,0 +1 @@
+export const Messages = { addRule: 'Add rule', editRule: 'Edit rule' };

ui/apps/everest/src/components/cluster-form/affinity/affinity-form-dialog/affinity-form-dialog.tsx

@@ -0,0 +1,46 @@
+import { FormDialog } from 'components/form-dialog';
+import { Messages } from './affinity-form-dialog.messages';
+import { AffinityFormDialogContext } from './affinity-form-dialog-context/affinity-form-context';
+import { affinityFormSchema } from './affinity-form/affinity-form.types';
+import { affinityModalDefaultValues } from './affinity-form-dialog.utils';
+import { AffinityForm } from './affinity-form/affinity-form';
+import { useContext, useMemo } from 'react';
+
+export const AffinityFormDialog = () => {
+  const {
+    openAffinityModal,
+    handleClose,
+    handleSubmit,
+    affinityRules,
+    selectedAffinityUid,
+  } = useContext(AffinityFormDialogContext);
+
+  const isEditing = selectedAffinityUid !== null;
+
+  const selectedAffinityRule = useMemo(() => {
+    if (isEditing) {
+      return affinityRules.find(({ uid }) => uid === selectedAffinityUid);
+    }
+  }, [affinityRules, isEditing, selectedAffinityUid]);
+
+  const values = useMemo(() => {
+    return affinityModalDefaultValues(selectedAffinityRule);
+  }, [selectedAffinityRule]);
+
+  return (
+    <FormDialog
+      schema={affinityFormSchema}
+      isOpen={!!openAffinityModal}
+      closeModal={handleClose}
+      headerMessage={isEditing ? Messages.editRule : Messages.addRule}
+      onSubmit={handleSubmit}
+      submitMessage={isEditing ? Messages.editRule : Messages.addRule}
+      {...(isEditing && { values })}
+      defaultValues={values}
+      size="XXL"
+      dataTestId={`affinity-form`}
+    >
+      <AffinityForm />
+    </FormDialog>
+  );
+};

ui/apps/everest/src/components/cluster-form/affinity/affinity-form-dialog/affinity-form-dialog.utils.ts

@@ -0,0 +1,47 @@
+import {
+  AffinityComponent,
+  AffinityPriority,
+  AffinityRule,
+  AffinityType,
+} from 'shared-types/affinity.types';
+import {
+  AffinityFormData,
+  AffinityFormFields,
+} from 'components/cluster-form/affinity/affinity-form-dialog/affinity-form/affinity-form.types';
+
+export const affinityModalDefaultValues = (
+  selectedRule?: AffinityRule
+): AffinityFormData => {
+  if (selectedRule) {
+    const {
+      component,
+      type,
+      priority,
+      weight,
+      topologyKey,
+      key,
+      operator,
+      values,
+    } = selectedRule;
+    return {
+      [AffinityFormFields.component]: component,
+      [AffinityFormFields.type]: type,
+      [AffinityFormFields.priority]: priority,
+      [AffinityFormFields.weight]: parseInt(weight?.toString() || '1', 10),
+      [AffinityFormFields.topologyKey]: topologyKey || '',
+      [AffinityFormFields.key]: key || '',
+      [AffinityFormFields.operator]: operator || '',
+      [AffinityFormFields.values]: values,
+    };
+  }
+  return {
+    [AffinityFormFields.component]: AffinityComponent.DbNode,
+    [AffinityFormFields.type]: AffinityType.PodAntiAffinity,
+    [AffinityFormFields.priority]: AffinityPriority.Preferred,
+    [AffinityFormFields.weight]: 1,
+    [AffinityFormFields.topologyKey]: 'kubernetes.io/hostname',
+    [AffinityFormFields.key]: '',
+    [AffinityFormFields.operator]: '',
+    [AffinityFormFields.values]: '',
+  };
+};

ui/apps/everest/src/components/cluster-form/affinity/affinity-form-dialog/affinity-form/affinity-form.tsx

@@ -0,0 +1,83 @@
+// everest
+// Copyright (C) 2023 Percona LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { ArrowOutward } from '@mui/icons-material';
+import { Box, Button, Typography } from '@mui/material';
+import { useContext, useEffect } from 'react';
+import { AffinityPriority } from 'shared-types/affinity.types';
+import { Messages } from '../../../advanced-configuration/affinity/affinity-form.messages';
+import { AffinityFormDialogContext } from '../affinity-form-dialog-context/affinity-form-context';
+import { AffinityFormFields } from './affinity-form.types';
+import { useFormContext } from 'react-hook-form';
+import { RuleDetailsSection, RuleTypeSection } from './sections';
+
+export const AffinityForm = () => {
+  const { dbType, isShardingEnabled, selectedAffinityUid } = useContext(
+    AffinityFormDialogContext
+  );
+  const { watch, resetField, trigger } = useFormContext();
+  const [operator, key, priority, type] = watch([
+    AffinityFormFields.operator,
+    AffinityFormFields.key,
+    AffinityFormFields.priority,
+    AffinityFormFields.type,
+  ]);
+
+  useEffect(() => {
+    resetField(AffinityFormFields.weight, {
+      keepError: false,
+    });
+  }, [priority, resetField]);
+
+  useEffect(() => {
+    trigger();
+  }, [type, trigger]);
+
+  return (
+    <>
+      <Box sx={{ display: 'flex' }}>
+        <Typography variant="body2">
+          {Messages.description}
+          <Button
+            data-testid="learn-more-button"
+            size="small"
+            sx={{ fontWeight: '600', paddingTop: 0 }}
+            onClick={() => {
+              window.open(
+                'https://kubernetes.io/docs/concepts/scheduling-eviction/assign-pod-node/#affinity-and-anti-affinity',
+                '_blank',
+                'noopener'
+              );
+            }}
+            endIcon={<ArrowOutward />}
+          >
+            {Messages.learnMore}
+          </Button>
+        </Typography>
+      </Box>
+      <RuleTypeSection
+        dbType={dbType}
+        isShardingEnabled={isShardingEnabled}
+        disableComponent={selectedAffinityUid !== null}
+        showWeight={priority === AffinityPriority.Preferred}
+      />
+      <RuleDetailsSection
+        operator={operator}
+        disableOperator={!key}
+        disableValue={!key}
+      />
+    </>
+  );
+};