@spinnaker/ecs 2026.2.2 → 2026.3.0

package/src/serverGroup/configure/wizard/networking/Networking.tsx

@@ -1,19 +1,17 @@
-import { module } from 'angular';
-import { isEqual, uniqWith } from 'lodash';
+import { isEqual, uniq, uniqWith } from 'lodash';
 import * as React from 'react';
 import { Alert } from 'react-bootstrap';
 import type { Option } from 'react-select';
-import { react2angular } from 'react2angular';
 
 import type { ISubnet } from '@spinnaker/core';
-import { HelpField, TetheredSelect, withErrorBoundary } from '@spinnaker/core';
+import { HelpField, TetheredSelect } from '@spinnaker/core';
 
 import type { IEcsServerGroupCommand } from '../../serverGroupConfiguration.service';
 
 export interface IEcsNetworkingProps {
   command: IEcsServerGroupCommand;
-  notifyAngular: (key: string, value: any) => void;
-  configureCommand: (query: string) => PromiseLike<void>;
+  onFieldChange: (key: string, value: any) => void;
+  configureCommand: (query: string) => Promise<void>;
 }
 
 interface IEcsNetworkingState {
@@ -43,20 +41,22 @@ export class EcsNetworking extends React.Component<IEcsNetworkingProps, IEcsNetw
 
     cmd.subnetTypes = uniqWith(defaultSubnetTypes, isEqual);
 
+    const availableSubnetTypes = cmd.backingData?.filtered?.subnetTypes || [];
+    const persistedSubnetTypes = cmd.subnetTypes
+      .filter((purpose) => !availableSubnetTypes.some((subnet) => subnet.purpose === purpose))
+      .map((purpose) => ({ purpose, vpcId: cmd.vpcId || 'unavailable' } as ISubnet));
+
     this.state = {
       associatePublicIpAddress: cmd.associatePublicIpAddress,
       networkMode: cmd.networkMode,
-      networkModesAvailable: cmd.backingData && cmd.backingData.networkModes ? cmd.backingData.networkModes : [],
+      networkModesAvailable: uniq([...(cmd.backingData?.networkModes || []), cmd.networkMode]).filter(Boolean),
       securityGroupNames: cmd.securityGroupNames,
-      securityGroupsAvailable:
-        cmd.backingData && cmd.backingData.filtered && cmd.backingData.filtered.securityGroupNames
-          ? cmd.backingData.filtered.securityGroupNames
-          : [],
+      securityGroupsAvailable: uniq([
+        ...(cmd.backingData?.filtered?.securityGroupNames || []),
+        ...(cmd.securityGroupNames || []),
+      ]),
       subnetTypes: cmd.subnetTypes,
-      subnetTypesAvailable:
-        cmd.backingData && cmd.backingData.filtered && cmd.backingData.filtered.subnetTypes
-          ? cmd.backingData.filtered.subnetTypes
-          : [],
+      subnetTypesAvailable: [...availableSubnetTypes, ...persistedSubnetTypes],
     };
   }
 
@@ -65,23 +65,52 @@ export class EcsNetworking extends React.Component<IEcsNetworkingProps, IEcsNetw
 
     this.props.configureCommand('1').then(() => {
       this.setState({
-        networkModesAvailable: cmd.backingData && cmd.backingData.networkModes ? cmd.backingData.networkModes : [],
-        securityGroupsAvailable:
-          cmd.backingData && cmd.backingData.filtered && cmd.backingData.filtered.securityGroupNames
-            ? cmd.backingData.filtered.securityGroupNames
-            : [],
-        subnetTypesAvailable:
-          cmd.backingData && cmd.backingData.filtered && cmd.backingData.filtered.subnetTypes
-            ? cmd.backingData.filtered.subnetTypes
-            : [],
+        networkModesAvailable: uniq([...(cmd.backingData?.networkModes || []), cmd.networkMode]).filter(Boolean),
+        securityGroupsAvailable: uniq([
+          ...(cmd.backingData?.filtered?.securityGroupNames || []),
+          ...(cmd.securityGroupNames || []),
+        ]),
+        subnetTypesAvailable: [
+          ...(cmd.backingData?.filtered?.subnetTypes || []),
+          ...(cmd.subnetTypes || [])
+            .filter(
+              (purpose) => !(cmd.backingData?.filtered?.subnetTypes || []).some((subnet) => subnet.purpose === purpose),
+            )
+            .map((purpose) => ({ purpose, vpcId: cmd.vpcId || 'unavailable' } as ISubnet)),
+        ],
       });
     });
   }
 
+  public componentDidUpdate() {
+    const cmd = this.props.command;
+    const availableSubnetTypes = cmd.backingData?.filtered?.subnetTypes || [];
+    const nextState: IEcsNetworkingState = {
+      associatePublicIpAddress: cmd.associatePublicIpAddress,
+      networkMode: cmd.networkMode,
+      networkModesAvailable: uniq([...(cmd.backingData?.networkModes || []), cmd.networkMode]).filter(Boolean),
+      securityGroupNames: cmd.securityGroupNames || [],
+      securityGroupsAvailable: uniq([
+        ...(cmd.backingData?.filtered?.securityGroupNames || []),
+        ...(cmd.securityGroupNames || []),
+      ]),
+      subnetTypes: cmd.subnetTypes || [],
+      subnetTypesAvailable: [
+        ...availableSubnetTypes,
+        ...(cmd.subnetTypes || [])
+          .filter((purpose) => !availableSubnetTypes.some((subnet) => subnet.purpose === purpose))
+          .map((purpose) => ({ purpose, vpcId: cmd.vpcId || 'unavailable' } as ISubnet)),
+      ],
+    };
+    if (!isEqual(this.state, nextState)) {
+      this.setState(nextState);
+    }
+  }
+
   private updateNetworkMode = (newNetworkMode: Option<string>) => {
     const updatedNetworkMode = newNetworkMode.value;
     const cmd = this.props.command;
-    this.props.notifyAngular('networkMode', updatedNetworkMode);
+    this.props.onFieldChange('networkMode', updatedNetworkMode);
     this.setState({
       networkMode: updatedNetworkMode,
       subnetTypesAvailable:
@@ -95,7 +124,7 @@ export class EcsNetworking extends React.Component<IEcsNetworkingProps, IEcsNetw
     const updatedSecurityGroups = Array.isArray(newSecurityGroups)
       ? newSecurityGroups.map((securityGroups) => securityGroups.value)
       : [];
-    this.props.notifyAngular('securityGroupNames', updatedSecurityGroups);
+    this.props.onFieldChange('securityGroupNames', updatedSecurityGroups);
     this.setState({ securityGroupNames: updatedSecurityGroups });
   };
 
@@ -104,7 +133,7 @@ export class EcsNetworking extends React.Component<IEcsNetworkingProps, IEcsNetw
     const updatedSubnetTypes = Array.isArray(newSubnetTypes)
       ? newSubnetTypes.map((subnetType) => subnetType.value)
       : [];
-    this.props.notifyAngular('subnetTypes', updatedSubnetTypes);
+    this.props.onFieldChange('subnetTypes', updatedSubnetTypes);
     cmd.subnetTypeChanged(cmd);
     this.setState({
       subnetTypes: updatedSubnetTypes,
@@ -116,7 +145,7 @@ export class EcsNetworking extends React.Component<IEcsNetworkingProps, IEcsNetw
   };
 
   private updateAssociatePublicIpAddress = (usePublicIp: boolean) => {
-    this.props.notifyAngular('associatePublicIpAddress', usePublicIp);
+    this.props.onFieldChange('associatePublicIpAddress', usePublicIp);
     this.setState({ associatePublicIpAddress: usePublicIp });
   };
 
@@ -140,6 +169,7 @@ export class EcsNetworking extends React.Component<IEcsNetworkingProps, IEcsNetw
 
     const subnetTypeOptions = this.state.subnetTypesAvailable.length ? (
       <TetheredSelect
+        inputProps={{ 'aria-label': 'VPC subnet' }}
         multi={true}
         options={subnetTypesAvailable}
         value={this.state.subnetTypes}
@@ -153,6 +183,7 @@ export class EcsNetworking extends React.Component<IEcsNetworkingProps, IEcsNetw
 
     const securityGroupsOptions = this.state.securityGroupsAvailable.length ? (
       <TetheredSelect
+        inputProps={{ 'aria-label': 'Security groups' }}
         multi={true}
         options={securityGroupsAvailable}
         value={this.state.securityGroupNames}
@@ -234,6 +265,7 @@ export class EcsNetworking extends React.Component<IEcsNetworkingProps, IEcsNetw
             </div>
             <div className="col-md-9" data-test-id="Networking.networkMode">
               <TetheredSelect
+                inputProps={{ 'aria-label': 'Network mode' }}
                 placeholder="Select a network mode to use ..."
                 options={networkModesAvailable}
                 value={this.state.networkMode}
@@ -249,13 +281,3 @@ export class EcsNetworking extends React.Component<IEcsNetworkingProps, IEcsNetw
     );
   }
 }
-
-export const ECS_NETWORKING_REACT = 'spinnaker.ecs.serverGroup.configure.wizard.networking.react';
-module(ECS_NETWORKING_REACT, []).component(
-  'ecsNetworkingReact',
-  react2angular(withErrorBoundary(EcsNetworking, 'ecsNetworkingReact'), [
-    'command',
-    'notifyAngular',
-    'configureCommand',
-  ]),
-);

package/src/serverGroup/configure/wizard/pages/AdvancedSettings.tsx

@@ -0,0 +1,290 @@
+import React from 'react';
+
+import { HelpField, MapEditor } from '@spinnaker/core';
+
+import type { IEcsWizardPageProps } from './common';
+
+const placementStrategies = [
+  'AZ Balanced Spread',
+  'AZ Balanced BinPack CPU',
+  'AZ Balanced BinPack Memory',
+  'BinPack CPU',
+  'BinPack Memory',
+  'One Task Per Host',
+  'None',
+];
+
+export const AdvancedSettings = ({ command, onFieldChange }: IEcsWizardPageProps) => {
+  const placementConstraints = command.placementConstraints || [];
+  const iamRoles = Array.from(new Set([...(command.backingData.filtered.iamRoles || []), command.iamRole])).filter(
+    Boolean,
+  );
+  const secrets = Array.from(
+    new Set([...(command.backingData.filtered.secrets || []), command.dockerImageCredentialsSecret]),
+  ).filter(Boolean);
+  const updateConstraint = (index: number, field: string, value: string) => {
+    const constraints = placementConstraints.map((constraint: any, constraintIndex: number) =>
+      constraintIndex === index ? { ...constraint, [field]: value } : constraint,
+    );
+    onFieldChange('placementConstraints', constraints);
+  };
+
+  return (
+    <div className="container-fluid form-horizontal" data-test-id="EcsServerGroupWizard.advancedSettings">
+      <div className="form-group">
+        <div className="col-md-5 sm-label-right">
+          Health Check Grace Period <HelpField id="ecs.healthgraceperiod" />
+        </div>
+        <div className="col-md-2">
+          <input
+            aria-label="Health check grace period"
+            className="form-control input-sm no-spel"
+            data-test-id="Advanced.healthCheckGracePeriodSeconds"
+            onChange={(event) =>
+              onFieldChange(
+                'healthCheckGracePeriodSeconds',
+                event.target.value === '' ? '' : Number(event.target.value),
+              )
+            }
+            type="number"
+            value={command.healthCheckGracePeriodSeconds ?? ''}
+          />
+        </div>
+      </div>
+
+      <div className="form-group">
+        <div className="col-md-5 sm-label-right">
+          <b>ECS IAM Instance Profile</b> <HelpField id="ecs.iamrole" />
+        </div>
+        <div className="col-md-7">
+          {iamRoles.length ? (
+            <select
+              aria-label="ECS IAM instance profile"
+              className="form-control input-sm"
+              data-test-id="Advanced.iamRole"
+              onChange={(event) => onFieldChange('iamRole', event.target.value)}
+              value={command.iamRole || ''}
+            >
+              {iamRoles.map((iamRole) => (
+                <option key={iamRole} value={iamRole}>
+                  {iamRole}
+                </option>
+              ))}
+            </select>
+          ) : (
+            'No account was selected, or no IAM roles are available for ECS tasks in this account.'
+          )}
+        </div>
+      </div>
+
+      {!command.useTaskDefinitionArtifact && (
+        <div className="form-group">
+          <div className="col-md-5 sm-label-right">
+            <b>Docker Image Credentials</b> <HelpField id="ecs.dockerimagecredentials" />
+          </div>
+          <div className="col-md-7">
+            {secrets.length ? (
+              <select
+                aria-label="Docker image credentials"
+                className="form-control input-sm"
+                data-test-id="Advanced.dockerImageCredentialsSecret"
+                onChange={(event) => onFieldChange('dockerImageCredentialsSecret', event.target.value)}
+                value={command.dockerImageCredentialsSecret || ''}
+              >
+                {secrets.map((secret) => (
+                  <option key={secret} value={secret}>
+                    {secret}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              'No account or region was selected, or no AWS Secrets Manager secrets are available in this account and region.'
+            )}
+          </div>
+        </div>
+      )}
+
+      <div className="form-group">
+        <div className="col-md-5 sm-label-right">
+          Fargate platform version <HelpField id="ecs.platformVersion" />
+        </div>
+        <div className="col-md-3">
+          <input
+            aria-label="Fargate platform version"
+            className="form-control input-sm"
+            data-test-id="Advanced.platformVersion"
+            onChange={(event) => onFieldChange('platformVersion', event.target.value)}
+            type="text"
+            value={command.platformVersion || ''}
+          />
+        </div>
+      </div>
+
+      <div className="form-group">
+        <div className="col-md-5 sm-label-right">
+          Enable Deployment Circuit Breaker <HelpField id="ecs.enableDeploymentCircuitBreaker" />
+        </div>
+        <div className="col-md-3">
+          <input
+            aria-label="Enable deployment circuit breaker"
+            checked={!!command.enableDeploymentCircuitBreaker}
+            data-test-id="Advanced.enableDeploymentCircuitBreaker"
+            onChange={(event) => onFieldChange('enableDeploymentCircuitBreaker', event.target.checked)}
+            type="checkbox"
+          />
+        </div>
+      </div>
+
+      <div className="form-group">
+        <div className="col-md-5 sm-label-right">
+          <b>Placement Strategy</b> <HelpField id="ecs.placementStrategy" />
+        </div>
+        <div className="col-md-7">
+          <select
+            aria-label="Placement strategy"
+            className="form-control input-sm"
+            data-test-id="Advanced.placementStrategyName"
+            onChange={(event) => onFieldChange('placementStrategyName', event.target.value)}
+            value={command.placementStrategyName || ''}
+          >
+            <option value="">Select...</option>
+            {placementStrategies.map((strategy) => (
+              <option key={strategy} value={strategy}>
+                {strategy}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div className="form-group">
+        <div className="sm-label-left">
+          <b>Placement Constraints</b> <HelpField id="ecs.placementConstraints" />
+        </div>
+        <table className="table table-condensed packed tags">
+          <thead>
+            <tr>
+              <th style={{ width: '25%' }}>Type</th>
+              <th style={{ width: '68%' }}>Expression</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {placementConstraints.map((constraint: any, index: number) => (
+              <tr key={index}>
+                <td>
+                  <select
+                    aria-label={`Placement constraint type ${index + 1}`}
+                    className="form-control input-sm"
+                    data-test-id={`Advanced.placementConstraint.type.${index}`}
+                    onChange={(event) => updateConstraint(index, 'type', event.target.value)}
+                    value={constraint.type || ''}
+                  >
+                    <option value="">Select...</option>
+                    <option value="distinctInstance">distinctInstance</option>
+                    <option value="memberOf">memberOf</option>
+                  </select>
+                </td>
+                <td>
+                  <input
+                    aria-label={`Placement constraint expression ${index + 1}`}
+                    className="form-control input-sm no-spel"
+                    data-test-id={`Advanced.placementConstraint.expression.${index}`}
+                    onChange={(event) => updateConstraint(index, 'expression', event.target.value)}
+                    type="text"
+                    value={constraint.expression || ''}
+                  />
+                </td>
+                <td>
+                  <button
+                    aria-label={`Remove placement constraint ${index + 1}`}
+                    className="btn btn-link sm-label"
+                    onClick={() =>
+                      onFieldChange(
+                        'placementConstraints',
+                        placementConstraints.filter(
+                          (_constraint: any, constraintIndex: number) => constraintIndex !== index,
+                        ),
+                      )
+                    }
+                    type="button"
+                  >
+                    <span className="glyphicon glyphicon-trash" /> <span className="sr-only">Remove</span>
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+          <tfoot>
+            <tr>
+              <td colSpan={3}>
+                <button
+                  className="btn btn-block btn-sm add-new"
+                  onClick={() => onFieldChange('placementConstraints', [...placementConstraints, {}])}
+                  type="button"
+                >
+                  <span className="glyphicon glyphicon-plus-sign" /> Add New Placement Constraint
+                </button>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+
+      {!command.useTaskDefinitionArtifact && (
+        <>
+          <div className="form-group" data-test-id="Advanced.dockerLabels">
+            <div className="sm-label-left">
+              <b>Docker labels (optional)</b> <HelpField id="ecs.dockerLabels" />
+            </div>
+            <MapEditor
+              allowEmpty={true}
+              keyLabel="Docker label name"
+              model={command.dockerLabels || {}}
+              onChange={(dockerLabels) => onFieldChange('dockerLabels', dockerLabels)}
+              valueLabel="Docker label value"
+            />
+          </div>
+          <div className="form-group" data-test-id="Advanced.environmentVariables">
+            <div className="sm-label-left">
+              <b>Environment Variables (optional)</b> <HelpField id="ecs.environmentVariables" />
+            </div>
+            <MapEditor
+              allowEmpty={true}
+              keyLabel="Environment variable name"
+              model={command.environmentVariables || {}}
+              onChange={(environmentVariables) => onFieldChange('environmentVariables', environmentVariables)}
+              valueLabel="Environment variable value"
+            />
+          </div>
+        </>
+      )}
+
+      <div className="form-group" data-test-id="Advanced.tags">
+        <div className="sm-label-left">
+          <b>Tags (optional)</b> <HelpField id="ecs.tags" />
+        </div>
+        <MapEditor
+          allowEmpty={true}
+          keyLabel="Tag name"
+          model={command.tags || {}}
+          onChange={(tags) => onFieldChange('tags', tags)}
+          valueLabel="Tag value"
+        />
+      </div>
+
+      {command.useTaskDefinitionArtifact && (
+        <div style={{ color: '#666' }}>
+          <hr />
+          <p>
+            <em>
+              <strong>Docker Image Credentials, Docker labels</strong>, and <strong>Environment Variables</strong>{' '}
+              cannot be individually set when using a Task Definition artifact. Please include them in their respective
+              container definition in that file.
+            </em>
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/serverGroup/configure/wizard/pages/BasicSettings.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+
+import { AccountSelectInput, DeploymentStrategySelector, NameUtils, RegionSelectInput } from '@spinnaker/core';
+
+import type { IEcsWizardPageProps } from './common';
+
+const fieldValue = (value: any) => value?.target?.value ?? value;
+
+export const BasicSettings = ({ application, command, onFieldChange }: IEcsWizardPageProps) => {
+  const accounts = command.backingData.accounts || Object.keys(command.backingData.credentialsKeyedByAccount || {});
+  const regions = command.backingData.filtered.regions || [];
+  const clusters = command.backingData.filtered.ecsClusters || [];
+
+  return (
+    <div className="container-fluid form-horizontal" data-test-id="EcsServerGroupWizard.basicSettings">
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">Account</div>
+        <div className="col-md-7">
+          <AccountSelectInput
+            aria-label="Account"
+            accounts={accounts}
+            onChange={(value) => onFieldChange('credentials', fieldValue(value))}
+            provider="ecs"
+            readOnly={command.viewState.readOnlyFields?.credentials}
+            value={command.credentials || ''}
+          />
+        </div>
+      </div>
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">Region</div>
+        <div className="col-md-7">
+          <RegionSelectInput
+            aria-label="Region"
+            account={command.credentials}
+            onChange={(value) => onFieldChange('region', fieldValue(value))}
+            readOnly={command.viewState.readOnlyFields?.region}
+            regions={regions}
+            value={command.region || ''}
+          />
+        </div>
+      </div>
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">ECS Cluster name</div>
+        <div className="col-md-7">
+          <select
+            aria-label="ECS Cluster name"
+            className="form-control input-sm"
+            data-test-id="ServerGroup.clusterName"
+            onChange={(event) => onFieldChange('ecsClusterName', event.target.value)}
+            required
+            value={command.ecsClusterName || ''}
+          >
+            <option value="">Select...</option>
+            {clusters.map((cluster) => (
+              <option key={cluster} value={cluster}>
+                {cluster}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">Stack</div>
+        <div className="col-md-7">
+          <input
+            aria-label="Stack"
+            className="form-control input-sm no-spel"
+            data-test-id="ServerGroup.stack"
+            onChange={(event) => onFieldChange('stack', event.target.value)}
+            value={command.stack || ''}
+          />
+        </div>
+      </div>
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">Detail</div>
+        <div className="col-md-7">
+          <input
+            aria-label="Detail"
+            className="form-control input-sm no-spel"
+            data-test-id="ServerGroup.details"
+            onChange={(event) => onFieldChange('freeFormDetails', event.target.value)}
+            value={command.freeFormDetails || ''}
+          />
+        </div>
+      </div>
+      {!command.viewState.disableStrategySelection && command.selectedProvider && (
+        <DeploymentStrategySelector
+          command={command as any}
+          onFieldChange={onFieldChange}
+          onStrategyChange={(_updatedCommand, strategy) => onFieldChange('strategy', strategy.key)}
+        />
+      )}
+      {!command.viewState.hideClusterNamePreview && (
+        <div className="well-compact well text-center">
+          Your server group will be in the cluster:{' '}
+          <strong>{NameUtils.getClusterName(application.name, command.stack, command.freeFormDetails)}</strong>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/serverGroup/configure/wizard/pages/ContainerSettings.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import type { IEcsWizardPageProps } from './common';
+import { Container } from '../container/Container';
+
+export const ContainerSettings = ({ command, configureCommand, onFieldChange }: IEcsWizardPageProps) => (
+  <div data-test-id="EcsServerGroupWizard.container">
+    <Container command={command} configureCommand={configureCommand} onFieldChange={onFieldChange} />
+  </div>
+);