feat(ecs): Determine invalid capacity providers for the ECS provider (#…

…8878)

Co-authored-by: Parag Bhingre <pbhingre@gmail.com>

app/scripts/modules/ecs/src/serverGroup/configure/serverGroupConfiguration.service.ts

@@ -46,6 +46,7 @@ import { IServiceDiscoveryRegistryDescriptor } from '../../serviceDiscovery/ISer
 
 export interface IEcsServerGroupCommandDirty extends IServerGroupCommandDirty {
   targetGroups?: string[];
+  capacityProviders?: string[];
 }
 
 export interface IEcsServerGroupCommandResult extends IServerGroupCommandResult {
@@ -304,6 +305,7 @@ export class EcsServerGroupConfigurationService {
       command.backingData.filtered.availableCapacityProviders = [];
       command.backingData.filtered.defaultCapacityProviderStrategy = [];
     }
+    this.checkDirtyCapacityProviders(command);
   }
 
   public configureAvailableCapacityProviders(command: IEcsServerGroupCommand): void {
@@ -625,6 +627,21 @@ export class EcsServerGroupConfigurationService {
     return result;
   }
 
+  public checkDirtyCapacityProviders(command: IEcsServerGroupCommand): void {
+    if(command.capacityProviderStrategy){
+      const availableCapacityProviders = command.backingData.filtered.availableCapacityProviders;
+      const currentCapacityProviders = command.capacityProviderStrategy.map(cp => cp.capacityProvider);
+      const matched = intersection(availableCapacityProviders, currentCapacityProviders);
+      const removedCapacityProviders = xor(matched, currentCapacityProviders);
+
+      if (removedCapacityProviders && removedCapacityProviders.length > 0) {
+        command.viewState.dirty.capacityProviders = removedCapacityProviders;
+      } else if(command.viewState.dirty && command.viewState.dirty.capacityProviders) {
+        command.viewState.dirty.capacityProviders = [];
+      }
+    }
+  }
+
   public attachEventHandlers(cmd: IEcsServerGroupCommand): void {
     cmd.subnetChanged = (command: IEcsServerGroupCommand): IServerGroupCommandResult => {
       const result = this.configureVpcId(command);

app/scripts/modules/ecs/src/serverGroup/configure/wizard/capacityProvider/CapacityProvider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { module } from 'angular';
 import { react2angular } from 'react2angular';
-import {IEcsCapacityProviderStrategyItem, IEcsServerGroupCommand} from '../../serverGroupConfiguration.service';
+import { IEcsCapacityProviderStrategyItem, IEcsServerGroupCommand } from '../../serverGroupConfiguration.service';
 import { HelpField, withErrorBoundary, TetheredSelect } from  '@spinnaker/core';
 import { Option } from "react-select";
 import  { Alert } from "react-bootstrap";
@@ -83,6 +83,7 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
     targetCapacityProviderStrategy.capacityProvider = targetCapacityProviderName;
     this.props.notifyAngular('capacityProviderStrategy', capacityProviderStrategy);
     this.setState({ capacityProviderStrategy: capacityProviderStrategy });
+    this.props.command.viewState.dirty.capacityProviders = [];
   };
 
   private updateCapacityProviderBase = (index: number, targetCapacityProviderBase: number) => {
@@ -104,6 +105,7 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
   private updateCapacityProviderType = (targetCapacityProviderType: boolean) => {
     this.setState({useDefaultCapacityProviders : targetCapacityProviderType});
     this.props.notifyAngular("useDefaultCapacityProviders", targetCapacityProviderType);
+    this.props.command.viewState.dirty.capacityProviders = [];
 
     const capacityProviderStrategy = targetCapacityProviderType && this.state.defaultCapacityProviderStrategy.length > 0 ? this.state.defaultCapacityProviderStrategy : [];
     this.setState({ capacityProviderStrategy : capacityProviderStrategy });
@@ -121,12 +123,34 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
     const capacityProviderStrategy = this.state.capacityProviderStrategy;
     const useDefaultCapacityProviders = this.state.useDefaultCapacityProviders;
     const capacityProviderLoadedFlag = this.state.capacityProviderLoadedFlag;
-
+    const dirtyCapacityProviders = this.props.command.viewState.dirty && this.props.command.viewState.dirty.capacityProviders ? this.props.command.viewState.dirty.capacityProviders : [];
 
     const capacityProviderNames = this.state.availableCapacityProviders &&  this.state.availableCapacityProviders.length > 0 ?  this.state.availableCapacityProviders.map((capacityProviderNames) => {
       return { label: `${capacityProviderNames}`, value: capacityProviderNames };
     }) : [];
 
+    const dirtyCapacityProviderList = dirtyCapacityProviders ? dirtyCapacityProviders.map(function (capacityProvider, index){
+      return (
+        <li key={index}>{capacityProvider}</li>
+      );
+    }) : '';
+
+    const dirtyCapacityProviderSection = (
+      <div className="alert alert-warning">
+        <p>
+          <i className="fa fa-exclamation-triangle"></i>
+          The following capacity providers could not be found in the selected account/region/cluster and were removed:
+        </p>
+        <ul>
+          {dirtyCapacityProviderList}
+        </ul>
+        <br/>
+        <p className="text-left">
+          Please select the capacity provider(s) from the dropdown to resolve this error.
+        </p>
+      </div>
+    );
+
     const capacityProviderInputs = capacityProviderStrategy.length > 0 ? capacityProviderStrategy.map(function (mapping, index) {
       return (
         <tr key={index}>
@@ -204,6 +228,7 @@ class EcsCapacityProvider extends React.Component<IEcsCapacityProviderProps, IEc
 
     return (
       <div>
+        {dirtyCapacityProviders.length > 0 ? ( <div>{dirtyCapacityProviderSection}</div>) : ''}
         <div className="sm-label-left">
           <b>Capacity Provider Strategy</b><HelpField id="ecs.capacityProviderStrategy" /> <br/>
           <span>({this.state.ecsClusterName})</span>