INFRA-3185 | Harinder | Structuring deployment strategy into individual component and adding BlueGreenConfigurationProps

src/coreform/deployment/DeploymentForm.tsx

@@ -9,7 +9,7 @@ import DeploymentBasicTab from './DeploymentBasicTab';
 import { tabA11yProps, TabPanel } from '../FormUtil';
 import { Environment } from '../../constants/Environment';
 import LoadBalancerForm from './LoadBalancerForm';
-import DeploymentStrategyForm from './DeploymentStrategyForm';
+import DeploymentStrategyForm from './strategy/DeploymentStrategyForm';
 import EfsVolumeForm from './EfsVolumeForm';
 import { efsFileNames, fsxListByClusters } from './constants';
 import FsxMountForm from './FsxMountForm';

src/coreform/deployment/strategy/BlueGreenConfiguration.tsx

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import { Button } from '@material-ui/core';
+import { FormikTextField } from '../../../components/common/FormikTextField';
+import * as _m from '../../../models/Manifest';
+import { styled } from '@material-ui/core';
+import DynamicCardLayout from '../../../components/common/DynamicCardLayout';
+import CardLayout from '../../../components/common/CardLayout';
+import WarningDialog from '@src/components/common/WarningDialog';
+import { toast } from 'react-toastify';
+import { API_TO_MANAGE_ARGO_ROLLOUT } from '@src/constants/Endpoints';
+import { post } from '@src/helper/api-client';
+import { BlueGreenConfigurationProps } from '@src/types/Manifest';
+
+const MarginedTextField = styled(FormikTextField)({
+  marginBottom: 10,
+});
+
+const BlueGreenConfiguration: React.FC<BlueGreenConfigurationProps> = (
+  props: BlueGreenConfigurationProps,
+) => {
+  const { manifestId, disabled } = props;
+  const [rolloutPromote, setRolloutPromote] = React.useState(false);
+  const [rolloutUndo, setRolloutUndo] = React.useState(false);
+
+  const handleRolloutPromotionOpen = () => {
+    setRolloutPromote(true);
+  };
+
+  const handleRolloutPromotionAgree = () => {
+    handleRolloutPromotion();
+    setRolloutPromote(false);
+  };
+
+  const handleRolloutPromotionDisagreeAndClose = () => {
+    setRolloutPromote(false);
+  };
+
+  const handleRolloutUndoOpen = () => {
+    setRolloutUndo(true);
+  };
+
+  const handleRolloutUndoAgree = () => {
+    handleRolloutUndo();
+    setRolloutUndo(false);
+  };
+
+  const handleRolloutUndoDisagreeAndClose = () => {
+    setRolloutUndo(false);
+  };
+
+  const handleRolloutPromotion = async (): Promise<void> => {
+    const toastId = toast.info('In Progress ...', {
+      autoClose: 50000,
+    });
+    await post(null, API_TO_MANAGE_ARGO_ROLLOUT(manifestId, 'promote')).then(response => {
+      if (response.ok) {
+        toast.update(toastId, {
+          render: 'Updated',
+          type: 'success',
+          autoClose: 3000,
+        });
+      } else {
+        toast.update(toastId, {
+          render: `Error: ${response.status}. Could not process the request. Inspect the argo bluegreen rollout`,
+          type: 'error',
+          autoClose: 10000,
+        });
+      }
+    });
+    toast.dismiss(toastId);
+  };
+  const handleRolloutUndo = async (): Promise<void> => {
+    const toastId = toast.info('In Progress ...', {
+      autoClose: 50000,
+    });
+    await post(null, API_TO_MANAGE_ARGO_ROLLOUT(manifestId, 'undo')).then(response => {
+      if (response.ok) {
+        toast.update(toastId, {
+          render: 'Updated',
+          type: 'success',
+          autoClose: 3000,
+        });
+      } else {
+        toast.update(toastId, {
+          render: `Error: ${response.status}. Could not process the request. Inspect the argo bluegreen rollout`,
+          type: 'error',
+          autoClose: 10000,
+        });
+      }
+    });
+    toast.dismiss(toastId);
+  };
+
+  return disabled ? null : (
+    <div>
+      <CardLayout heading="Blue Green Configuration">
+        <MarginedTextField
+          type="number"
+          label="Delay Scale Down Duration(s)"
+          name={`deployment.strategyConfig.blueGreenConfig.delayScaleDownSeconds`}
+          fullWidth
+        />
+      </CardLayout>
+      <DynamicCardLayout heading="Blue Green Rollout Manager">
+        <Button
+          color="primary"
+          variant="outlined"
+          className={`secondary-confirmation-button`}
+          onClick={handleRolloutPromotionOpen}
+          style={{ marginLeft: 60, marginTop: 10 }}
+        >
+          Promote Rollout
+        </Button>
+        <WarningDialog
+          open={rolloutPromote}
+          handleClose={handleRolloutPromotionDisagreeAndClose}
+          handleAgree={handleRolloutPromotionAgree}
+          handleDisagree={handleRolloutPromotionDisagreeAndClose}
+          dialogTitle={'Promote Blue Green Rollout'}
+          dialogContentText={
+            'This will promote the blue green rollout. Are you sure you want to promote the rollout?'
+          }
+        />
+
+        <Button
+          color="secondary"
+          variant="outlined"
+          className={`secondary-confirmation-button`}
+          onClick={handleRolloutUndoOpen}
+          style={{ marginLeft: 40, marginTop: 10 }}
+        >
+          Undo Rollout
+        </Button>
+        <WarningDialog
+          open={rolloutUndo}
+          handleClose={handleRolloutUndoDisagreeAndClose}
+          handleAgree={handleRolloutUndoAgree}
+          handleDisagree={handleRolloutUndoDisagreeAndClose}
+          dialogTitle={'Undo Blue Green Rollout'}
+          dialogContentText={
+            'This will rollback the blue green rollout to previous version. Are you sure you want to rollback the rollout?'
+          }
+        />
+      </DynamicCardLayout>
+    </div>
+  );
+};
+
+export default BlueGreenConfiguration;

src/coreform/deployment/strategy/DeploymentStrategyForm.tsx

@@ -4,33 +4,22 @@
 //     {name: "all-error", clusterScope: true}
 // ]
 import * as React from 'react';
-import { Button, Radio, Table, TableRow, FormLabel, Typography, Checkbox } from '@material-ui/core';
-import { FormikTextField } from '../../components/common/FormikTextField';
-import { FormikRadioGroup } from '../../components/common/FormikRadioGroup';
-import { toMenuItems } from '../FormUtil';
-import * as _m from '../../models/Manifest';
-import {
-  Grid,
-  FormControlLabel,
-  styled,
-  makeStyles,
-  TableCell,
-  TextField,
-} from '@material-ui/core';
-import { cardStyles } from '../Styles';
+import { Radio, Table, TableRow, FormLabel, Typography, Checkbox } from '@material-ui/core';
+import { FormikTextField } from '../../../components/common/FormikTextField';
+import { FormikRadioGroup } from '../../../components/common/FormikRadioGroup';
+import { toMenuItems } from '../../FormUtil';
+import * as _m from '../../../models/Manifest';
+import { Grid, FormControlLabel, styled, makeStyles, TableCell } from '@material-ui/core';
+import { cardStyles } from '../../Styles';
 import { getIn, useField, useFormikContext } from 'formik';
-import NotConfigured from '../NotConfiguredPanel';
-import { FormikTable } from '../../components/common/FormikTable';
-import DynamicCardLayout from '../../components/common/DynamicCardLayout';
-import { Environment } from '../../constants/Environment';
-import CardLayout from '../../components/common/CardLayout';
-import { FormikCheckbox } from '../../components/common/FormikCheckbox';
-import { FormikSelect } from '../../components/common/FormikSelect';
-import AddRemoveButton from '../../components/common/AddRemoveButton';
-import WarningDialog from '@src/components/common/WarningDialog';
-import { toast } from 'react-toastify';
-import { API_TO_MANAGE_ARGO_ROLLOUT } from '@src/constants/Endpoints';
-import { post } from '@src/helper/api-client';
+import NotConfigured from '../../NotConfiguredPanel';
+import { FormikTable } from '../../../components/common/FormikTable';
+import DynamicCardLayout from '../../../components/common/DynamicCardLayout';
+import { Environment } from '../../../constants/Environment';
+import CardLayout from '../../../components/common/CardLayout';
+import { FormikSelect } from '../../../components/common/FormikSelect';
+import AddRemoveButton from '../../../components/common/AddRemoveButton';
+import BlueGreenConfiguration from './BlueGreenConfiguration';
 
 const useStyles = makeStyles({
   ...cardStyles,
@@ -59,11 +48,6 @@ const MarginedTextField = styled(FormikTextField)({
   marginBottom: 10,
 });
 
-const MarginedFormControlLabel = styled(FormControlLabel)({
-  marginBottom: 10,
-  width: 400,
-});
-
 const parameters = {
   manualPromotion: null,
   pause: 'string',
@@ -187,135 +171,6 @@ const CanaryConfiguration = (props: { disable: boolean }) => {
   );
 };
 
-const BlueGreenConfiguration = (props: { values?: any; disable?: boolean }) => {
-  const { values, disable } = props;
-  const [rolloutPromote, setRolloutPromote] = React.useState(false);
-  const [rolloutUndo, setRolloutUndo] = React.useState(false);
-
-  const handleRolloutPromotionOpen = () => {
-    setRolloutPromote(true);
-  };
-
-  const handleRolloutPromotionAgree = () => {
-    handleRolloutPromotion();
-    setRolloutPromote(false);
-  };
-
-  const handleRolloutPromotionDisagreeAndClose = () => {
-    setRolloutPromote(false);
-  };
-
-  const handleRolloutUndoOpen = () => {
-    setRolloutUndo(true);
-  };
-
-  const handleRolloutUndoAgree = () => {
-    handleRolloutUndo();
-    setRolloutUndo(false);
-  };
-
-  const handleRolloutUndoDisagreeAndClose = () => {
-    setRolloutUndo(false);
-  };
-
-  const handleRolloutPromotion = async (): Promise<void> => {
-    const toastId = toast.info('In Progress ...', {
-      autoClose: 50000,
-    });
-    await post(null, API_TO_MANAGE_ARGO_ROLLOUT(values?.id, 'promote')).then(response => {
-      if (response.ok) {
-        toast.update(toastId, {
-          render: 'Updated',
-          type: 'success',
-          autoClose: 3000,
-        });
-      } else {
-        toast.update(toastId, {
-          render: `Error: ${response.status}. Could not process the request. Inspect the argo bluegreen rollout`,
-          type: 'error',
-          autoClose: 10000,
-        });
-      }
-    });
-    toast.dismiss(toastId);
-  };
-  const handleRolloutUndo = async (): Promise<void> => {
-    const toastId = toast.info('In Progress ...', {
-      autoClose: 50000,
-    });
-    await post(null, API_TO_MANAGE_ARGO_ROLLOUT(values?.id, 'undo')).then(response => {
-      if (response.ok) {
-        toast.update(toastId, {
-          render: 'Updated',
-          type: 'success',
-          autoClose: 3000,
-        });
-      } else {
-        toast.update(toastId, {
-          render: `Error: ${response.status}. Could not process the request. Inspect the argo bluegreen rollout`,
-          type: 'error',
-          autoClose: 10000,
-        });
-      }
-    });
-    toast.dismiss(toastId);
-  };
-
-  return disable ? null : (
-    <div>
-      <CardLayout heading="Blue Green Configuration">
-        <MarginedTextField
-          type="number"
-          label="Delay Scale Down Duration(s)"
-          name={`deployment.strategyConfig.blueGreenConfig.delayScaleDownSeconds`}
-          fullWidth
-        />
-      </CardLayout>
-      <DynamicCardLayout heading="Blue Green Rollout Manager">
-        <Button
-          color="primary"
-          variant="outlined"
-          className={`secondary-confirmation-button`}
-          onClick={handleRolloutPromotionOpen}
-          style={{ marginLeft: 60, marginTop: 10 }}
-        >
-          Promote Rollout
-        </Button>
-        <WarningDialog
-          open={rolloutPromote}
-          handleClose={handleRolloutPromotionDisagreeAndClose}
-          handleAgree={handleRolloutPromotionAgree}
-          handleDisagree={handleRolloutPromotionDisagreeAndClose}
-          dialogTitle={'Promote Blue Green Rollout'}
-          dialogContentText={
-            'This will promote the blue green rollout. Are you sure you want to promote the rollout?'
-          }
-        />
-
-        <Button
-          color="secondary"
-          variant="outlined"
-          className={`secondary-confirmation-button`}
-          onClick={handleRolloutUndoOpen}
-          style={{ marginLeft: 40, marginTop: 10 }}
-        >
-          Undo Rollout
-        </Button>
-        <WarningDialog
-          open={rolloutUndo}
-          handleClose={handleRolloutUndoDisagreeAndClose}
-          handleAgree={handleRolloutUndoAgree}
-          handleDisagree={handleRolloutUndoDisagreeAndClose}
-          dialogTitle={'Undo Blue Green Rollout'}
-          dialogContentText={
-            'This will rollback the blue green rollout to previous version. Are you sure you want to rollback the rollout?'
-          }
-        />
-      </DynamicCardLayout>
-    </div>
-  );
-};
-
 const DeploymentStrategyConfiguration = () => {
   return (
     <DynamicCardLayout heading="Configuration">
@@ -354,8 +209,8 @@ const DeplomentStrategyForm = () => {
               <DeploymentStrategyConfiguration />
               <CanaryConfiguration disable={values.deployment.strategy != 'canary'} />
               <BlueGreenConfiguration
-                values={values}
-                disable={values.deployment.strategy != 'blueGreen'}
+                manifestId={values?.id}
+                disabled={values.deployment.strategy != 'blueGreen'}
               />
               <RollingUpdateWithCanaryMixIn
                 values={values}

src/types/Manifest.d.ts

@@ -123,3 +123,10 @@ export interface Manifest {
   extraResources?: ExtraResources;
   type: FormType;
 }
+
+export interface BlueGreenConfigurationProps {
+  isDeployed?: boolean;
+  version?: number;
+  manifestId: number;
+  disabled: boolean;
+}