fix(ecs): determine dirty target groups for the ECS provider (#8863)

Co-authored-by: Parag Bhingre <pbhingre@gmail.com> Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
spinnaker · Jan 28, 2021 · 2d913a3 · 2d913a3
1 parent fa632a0
commit 2d913a3
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/app/scripts/modules/ecs/src/serverGroup/configure/serverGroupConfiguration.service.ts b/app/scripts/modules/ecs/src/serverGroup/configure/serverGroupConfiguration.service.ts
@@ -44,7 +44,7 @@ import { ServiceDiscoveryReader } from '../../serviceDiscovery/serviceDiscovery.
 import { IServiceDiscoveryRegistryDescriptor } from '../../serviceDiscovery/IServiceDiscovery';
 
 export interface IEcsServerGroupCommandDirty extends IServerGroupCommandDirty {
-  targetGroup?: string;
+  targetGroups?: string[];
 }
 
 export interface IEcsServerGroupCommandResult extends IServerGroupCommandResult {
@@ -64,6 +64,7 @@ export interface IEcsServerGroupCommandViewState extends IServerGroupCommandView
   contextImages: IEcsDockerImage[];
   pipeline: IPipeline;
   currentStage: IStage;
+  dirty: IEcsServerGroupCommandDirty;
 }
 
 export interface IEcsServerGroupCommandBackingDataFiltered extends IServerGroupCommandBackingDataFiltered {
@@ -507,7 +508,7 @@ export class EcsServerGroupConfigurationService {
     const newLoadBalancers = this.getLoadBalancerNames(command);
     const vpcLoadBalancers = this.getVpcLoadBalancerNames(command);
     const allTargetGroups = this.getTargetGroupNames(command);
-
+    const currentTargetGroups = command.targetGroupMappings.map(tg => tg.targetGroup)
     if (currentLoadBalancers && command.loadBalancers) {
       const valid = command.vpcId ? newLoadBalancers : newLoadBalancers.concat(vpcLoadBalancers);
       const matched = intersection(valid, currentLoadBalancers);
@@ -523,6 +524,16 @@ export class EcsServerGroupConfigurationService {
       }
     }
 
+    if (currentTargetGroups) {
+      const matched = intersection(allTargetGroups, currentTargetGroups);
+      const removedTargetGroups = xor(matched, currentTargetGroups);
+      if (removedTargetGroups && removedTargetGroups.length > 0) {
+        command.viewState.dirty.targetGroups = removedTargetGroups;
+      } else if(command.viewState.dirty && command.viewState.dirty.targetGroups) {
+        command.viewState.dirty.targetGroups = [];
+      }
+    }
+
     command.backingData.filtered.loadBalancers = newLoadBalancers;
     command.backingData.filtered.vpcLoadBalancers = vpcLoadBalancers;
     command.backingData.filtered.targetGroups = allTargetGroups;

diff --git a/app/scripts/modules/ecs/src/serverGroup/configure/wizard/container/Container.tsx b/app/scripts/modules/ecs/src/serverGroup/configure/wizard/container/Container.tsx
@@ -135,6 +135,7 @@ export class Container extends React.Component<IContainerProps, IContainerState>
     targetMapping.targetGroup = newTargetGroup.value;
     this.props.notifyAngular('targetGroupMappings', currentMappings);
     this.setState({ targetGroupMappings: currentMappings });
+    this.updateDirtyTargetGroups();
   };
 
   private updateTargetGroupMappingPort = (index: number, targetPort: number) => {
@@ -152,13 +153,18 @@ export class Container extends React.Component<IContainerProps, IContainerState>
     this.setState({ targetGroupMappings: currentMappings });
   };
 
+  private updateDirtyTargetGroups = () => {
+    this.props.command.viewState.dirty.targetGroups = [];
+  };
+
   public render(): React.ReactElement<Container> {
     const removeTargetGroupMapping = this.removeTargetGroupMapping;
     const updateContainerMappingImage = this.updateContainerMappingImage;
     const updateTargetGroupMappingTargetGroup = this.updateTargetGroupMappingTargetGroup;
     const updateTargetGroupMappingPort = this.updateTargetGroupMappingPort;
     const updateComputeUnits = this.updateComputeUnits;
     const updateReservedMemory = this.updateReservedMemory;
+    const dirtyTagetGroups = this.props.command.viewState.dirty && this.props.command.viewState.dirty.targetGroups ? this.props.command.viewState.dirty.targetGroups : [];
 
     const dockerImageOptions = this.state.dockerImages.map(function (image) {
       let msg = '';
@@ -168,6 +174,28 @@ export class Container extends React.Component<IContainerProps, IContainerState>
       return { label: `${msg} (${image.imageId})`, value: image.imageId };
     });
 
+    const dirtyTargetGroupList = dirtyTagetGroups ? dirtyTagetGroups.map(function (targetGroup, index){
+        return (
+          <li key={index}>{targetGroup}</li>
+        );
+      }) : '';
+
+    const dirtyTargetGroupSection = (
+       <div className="alert alert-warning">
+         <p>
+           <i className="fa fa-exclamation-triangle"></i>
+           The following target groups could not be found in the selected account/region/VPC and were removed:
+         </p>
+         <ul>
+           {dirtyTargetGroupList}
+         </ul>
+         <br/>
+         <p className="text-left">
+           Please select the target group(s) from the dropdown to resolve this error.
+         </p>
+       </div>
+       );
+
     const newTargetGroupMapping = this.state.targetGroupsAvailable.length ? (
       <button
         className="btn btn-block btn-sm add-new"
@@ -227,6 +255,7 @@ export class Container extends React.Component<IContainerProps, IContainerState>
 
     return (
       <div className="container-fluid form-horizontal">
+        {dirtyTagetGroups.length > 0 ? ( <div>{dirtyTargetGroupSection}</div>) : ''}
         <div className="form-group">
           <div className="col-md-3 sm-label-right">
             <b>Container Image</b>