INFRA-3185 | Harinder | Adding Blue Green deployment strategy

src/constants/Endpoints.tsx

@@ -2,3 +2,5 @@ export const API_TO_POST_MANIFEST = '/api/manifest';
 export const API_CREATE_REQUEST = '/api/changeRequest';
 export const API_TO_EXPORT_MANIFEST = (manifestId: number): string =>
   `/api/manifest/${manifestId}/export`;
+export const API_TO_MANAGE_ARGO_ROLLOUT = (manifestId: number, operation: string): string =>
+  `/api/kube/manifest/${manifestId}/rollout/${operation}`;

src/coreform/deployment/DeploymentStrategyForm.tsx

@@ -4,7 +4,7 @@
 //     {name: "all-error", clusterScope: true}
 // ]
 import * as React from 'react';
-import { Radio, Table, TableRow, FormLabel, Typography, Checkbox } from '@material-ui/core';
+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';
@@ -27,6 +27,10 @@ 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';
 
 const useStyles = makeStyles({
   ...cardStyles,
@@ -48,7 +52,7 @@ const useStyles = makeStyles({
   },
 });
 
-const strategyType = ['rollingUpdate', 'canary', 'rollingUpdateWithCanaryMixIn'];
+const strategyType = ['rollingUpdate', 'canary', 'rollingUpdateWithCanaryMixIn', 'blueGreen'];
 const deploymentController = ['default', 'argo'];
 
 const MarginedTextField = styled(FormikTextField)({
@@ -183,6 +187,135 @@ 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">
@@ -220,6 +353,10 @@ const DeplomentStrategyForm = () => {
             <Grid item>
               <DeploymentStrategyConfiguration />
               <CanaryConfiguration disable={values.deployment.strategy != 'canary'} />
+              <BlueGreenConfiguration
+                values={values}
+                disable={values.deployment.strategy != 'blueGreen'}
+              />
               <RollingUpdateWithCanaryMixIn
                 values={values}
                 disable={values.deployment.strategy != 'rollingUpdateWithCanaryMixIn'}