INFRA-4076 | Let user select AWS AZ for deployment (#737)

* INFRA-4076 | Let user select AWS AZ for deployment

* INFRA-4076 | Ashvin | Move style to CSS file

src/coreform/deployment/DeploymentBasicTab.css

@@ -0,0 +1,3 @@
+.multi-select-margin-top {
+  margin-top: 10px !important;
+}

src/coreform/deployment/DeploymentBasicTab.tsx

@@ -1,17 +1,16 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import Grid from '@material-ui/core/Grid';
 import * as _m from '../../models/Manifest';
 import { FormikTextField } from '../../components/common/FormikTextField';
 import { FormikAutocomplete } from '../../components/common/FormikAutocomplete';
 import { populateServiceEntriesOptions, toMenuItems } from '../FormUtil';
-import { useFormikContext, Field, setIn, useField } from 'formik';
-import { makeStyles, TableCell, styled, FormControlLabel, Tooltip } from '@material-ui/core';
+import { Field, useField, useFormikContext } from 'formik';
+import { FormControlLabel, makeStyles, styled, TableCell, Tooltip } from '@material-ui/core';
 import { FormikTable } from '../../components/common/FormikTable';
 import HealthCheckCard from './HealthCheckCard';
 import { cardStyles } from '../Styles';
 import AutoscalingCard from './AutoscalingCard';
 import CardLayout from '../../components/common/CardLayout';
-import { useEffect, useState } from 'react';
 import { httpClient } from '../../helper/api-client';
 import { FormikCheckbox } from '../../components/common/FormikCheckbox';
 import { Cluster } from '../../constants/Cluster';
@@ -20,10 +19,12 @@ import { Environment } from '../../constants/Environment';
 import { InfoOutlined } from '@material-ui/icons';
 import WarningDialog from '../../components/common/WarningDialog';
 import { Manifest } from '@src/types/Manifest';
-import { ciliumEnabledCluster } from '@src/coreform/deployment/constants';
+import { ALL_AWS_MUMBAI_AZ, ciliumEnabledCluster } from '@src/coreform/deployment/constants';
 import { CiliumServiceEntry } from '@src/types/Deployment';
 import { useSelector } from 'react-redux';
 import { RootState } from '@src/store';
+import FormikMultiSelect from '@components/common/FormikMultiSelect';
+import './DeploymentBasicTab.css';
 
 const useStyles = makeStyles({
   ...cardStyles,
@@ -232,17 +233,21 @@ function renderGpu(team: string) {
 }
 
 function renderSpotNodeCard(environment: string) {
-  if (spotNodeEnabledEnvironments.has(environment)) {
-    return <SpotNodeCard />;
-  } else {
-    return <></>;
-  }
+  return <AdvancedDeploymentConfigurationCard environment={environment} />;
 }
 
 const disablegRPCCheckbox = (values: any, i: number) => {
   return values.deployment.exposedPorts[i].name === 'metrics';
 };
-const SpotNodeCard = () => {
+
+interface AdvancedDeploymentConfigurationProps {
+  environment: string;
+}
+
+const AdvancedDeploymentConfigurationCard = (
+  props: AdvancedDeploymentConfigurationProps,
+): React.JSX.Element => {
+  const classes = useStyles();
   const { values, setFieldValue }: { values: any; setFieldValue: any } = useFormikContext();
   const [isSpotNodeEnabled, setIsSpotNodeEnabled] = React.useState(
     values.deployment.scheduleOnSpotNodes,
@@ -262,20 +267,34 @@ const SpotNodeCard = () => {
   }, [isSpotNodeEnabled, gpu.value]);
 
   return (
-    <CardLayout heading={'Spot Node Configuration'}>
-      <FormControlLabel
-        control={
-          <Tooltip title="Spot instances are short lived nodes but are 90% cheaper than on-demand nodes. Useful in saving cost.">
-            <FormikCheckbox
-              name={`deployment.scheduleOnSpotNodes`}
-              onClick={handleSpotNodeToggle}
-              checked={isSpotNodeEnabled}
-            />
-          </Tooltip>
-        }
-        label={'Schedule workload on spot nodes'}
-      />
-    </CardLayout>
+    <>
+      <CardLayout heading={'Advanced Deployment Configuration'}>
+        <FormikMultiSelect
+          fullWidth
+          name={`deployment.zoneAffinity`}
+          label={'Availability Zones'}
+          className={'multi-select-margin-top'}
+        >
+          {toMenuItems(ALL_AWS_MUMBAI_AZ)}
+        </FormikMultiSelect>
+        {spotNodeEnabledEnvironments.has(props.environment) ? (
+          <FormControlLabel
+            control={
+              <Tooltip title="Spot instances are short lived nodes but are 90% cheaper than on-demand nodes. Useful in saving cost.">
+                <FormikCheckbox
+                  name={`deployment.scheduleOnSpotNodes`}
+                  onClick={handleSpotNodeToggle}
+                  checked={isSpotNodeEnabled}
+                />
+              </Tooltip>
+            }
+            label={'Schedule workload on spot nodes'}
+          />
+        ) : (
+          <></>
+        )}
+      </CardLayout>
+    </>
   );
 };
 

src/coreform/deployment/constants.tsx

@@ -98,3 +98,8 @@ export const ciliumEnabledCluster = new Set([
   Cluster.LENDING_PROD,
   Cluster.IAPL_PROD,
 ]);
+
+export const AP_SOUTH_1A = 'ap-south-1a';
+export const AP_SOUTH_1B = 'ap-south-1b';
+export const AP_SOUTH_1C = 'ap-south-1c';
+export const ALL_AWS_MUMBAI_AZ = [AP_SOUTH_1A, AP_SOUTH_1B, AP_SOUTH_1C];

src/models/Manifest.ts

@@ -12,6 +12,7 @@ import { DEFAULT_ELASTIC_SEARCH_VERSION } from '../constants/ElasticSearchConsta
 import { LATEST_EC_VERSION } from '@src/coreform/elasticcache/constant';
 import { FormType } from '@components/manifest/ShowSelectedForm';
 import { DefaultFlinkAlerts } from '@src/coreform/flink/DefaultAlerts';
+import { ALL_AWS_MUMBAI_AZ } from '@src/coreform/deployment/constants';
 
 // lodash like path for resources in the manifest object
 export const path = {
@@ -332,6 +333,7 @@ export const addDeployment = (manifest: any) => {
     },
     isDeployed: false,
     isVpaEnabled: true,
+    zoneAffinity: ALL_AWS_MUMBAI_AZ,
     perfUtility: {
       mockServer: false,
       postgresServer: false,

src/models/ManifestValidationSchema.ts

@@ -806,6 +806,7 @@ const deploymentValidationSchema = yup.object({
   efs: efsValidationSchema.default(undefined),
   fsx: fsxValidationSchema.default(undefined),
   perfUtility: perfValidationSchema.default(undefined),
+  zoneAffinity: yup.array().of(yup.string().required('is Required')).min(1),
 });
 
 const docdbValidationScheme = yup.object({