From 426bf93db86f9bf7dcebfe25ba4e32bc155e54d9 Mon Sep 17 00:00:00 2001 From: Harinder Singh Date: Tue, 21 May 2024 01:21:29 +0530 Subject: [PATCH] INFRA-3185 | Harinder | Structuring deployment strategy into individual component and adding BlueGreenConfigurationProps --- src/coreform/deployment/DeploymentForm.tsx | 2 +- .../strategy/BlueGreenConfiguration.tsx | 149 +++++++++++++++ .../{ => strategy}/DeploymentStrategyForm.tsx | 179 ++---------------- src/types/Manifest.d.ts | 7 + 4 files changed, 174 insertions(+), 163 deletions(-) create mode 100644 src/coreform/deployment/strategy/BlueGreenConfiguration.tsx rename src/coreform/deployment/{ => strategy}/DeploymentStrategyForm.tsx (61%) diff --git a/src/coreform/deployment/DeploymentForm.tsx b/src/coreform/deployment/DeploymentForm.tsx index 35cfb6e..203023c 100644 --- a/src/coreform/deployment/DeploymentForm.tsx +++ b/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'; diff --git a/src/coreform/deployment/strategy/BlueGreenConfiguration.tsx b/src/coreform/deployment/strategy/BlueGreenConfiguration.tsx new file mode 100644 index 0000000..7b8d9fd --- /dev/null +++ b/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 = ( + 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 => { + 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 => { + 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 : ( +
+ + + + + + + + + + +
+ ); +}; + +export default BlueGreenConfiguration; diff --git a/src/coreform/deployment/DeploymentStrategyForm.tsx b/src/coreform/deployment/strategy/DeploymentStrategyForm.tsx similarity index 61% rename from src/coreform/deployment/DeploymentStrategyForm.tsx rename to src/coreform/deployment/strategy/DeploymentStrategyForm.tsx index 431e6ac..b810b01 100644 --- a/src/coreform/deployment/DeploymentStrategyForm.tsx +++ b/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 => { - 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 => { - 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 : ( -
- - - - - - - - - - -
- ); -}; - const DeploymentStrategyConfiguration = () => { return ( @@ -354,8 +209,8 @@ const DeplomentStrategyForm = () => {