diff --git a/app/scripts/modules/ecs/src/serverGroup/configure/serverGroupConfiguration.service.ts b/app/scripts/modules/ecs/src/serverGroup/configure/serverGroupConfiguration.service.ts index 1f2eff00e64..8bb0f98cfa6 100644 --- 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 index f71b24dfe20..bdf39d99b27 100644 --- 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 targetMapping.targetGroup = newTargetGroup.value; this.props.notifyAngular('targetGroupMappings', currentMappings); this.setState({ targetGroupMappings: currentMappings }); + this.updateDirtyTargetGroups(); }; private updateTargetGroupMappingPort = (index: number, targetPort: number) => { @@ -152,6 +153,10 @@ export class Container extends React.Component this.setState({ targetGroupMappings: currentMappings }); }; + private updateDirtyTargetGroups = () => { + this.props.command.viewState.dirty.targetGroups = []; + }; + public render(): React.ReactElement { const removeTargetGroupMapping = this.removeTargetGroupMapping; const updateContainerMappingImage = this.updateContainerMappingImage; @@ -159,6 +164,7 @@ export class Container extends React.Component 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 return { label: `${msg} (${image.imageId})`, value: image.imageId }; }); + const dirtyTargetGroupList = dirtyTagetGroups ? dirtyTagetGroups.map(function (targetGroup, index){ + return ( +
  • {targetGroup}
  • + ); + }) : ''; + + const dirtyTargetGroupSection = ( +
    +

    + + The following target groups could not be found in the selected account/region/VPC and were removed: +

    +
      + {dirtyTargetGroupList} +
    +
    +

    + Please select the target group(s) from the dropdown to resolve this error. +

    +
    + ); + const newTargetGroupMapping = this.state.targetGroupsAvailable.length ? (