@spinnaker/ecs 2026.2.2 → 2026.3.0

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

@@ -0,0 +1,137 @@
+import React from 'react';
+
+import { HelpField } from '@spinnaker/core';
+
+import { EcsCapacityProvider } from '../capacityProvider/CapacityProvider';
+import type { IEcsWizardPageProps } from './common';
+
+export const HorizontalScalingSettings = ({ command, configureCommand, onFieldChange }: IEcsWizardPageProps) => {
+  const useCapacityProviders =
+    command.computeOption === 'capacityProviders' ||
+    (!command.computeOption && (command.capacityProviderStrategy || []).length > 0);
+  const capacity = command.capacity || {};
+  const updateCapacity = (field: string, value: number) => onFieldChange('capacity', { ...capacity, [field]: value });
+
+  return (
+    <div className="container-fluid form-horizontal" data-test-id="EcsServerGroupWizard.horizontalScaling">
+      <div className="form-group">
+        <div className="col-md-4 sm-label-right">
+          <b>Compute options</b> <HelpField id="ecs.computeOptions" />
+        </div>
+        <div className="col-md-2 radio">
+          <label>
+            <input
+              checked={!useCapacityProviders}
+              data-test-id="ServerGroup.computeOptionsLaunchType"
+              id="computeOptionsLaunchType"
+              onChange={() => {
+                onFieldChange('computeOption', 'launchType');
+                onFieldChange('capacityProviderStrategy', []);
+              }}
+              type="radio"
+            />{' '}
+            Launch type
+          </label>
+        </div>
+        <div className="col-md-3 radio">
+          <label>
+            <input
+              checked={useCapacityProviders}
+              data-test-id="ServerGroup.computeOptionsCapacityProviders"
+              id="computeOptionsCapacityProviders"
+              onChange={() => {
+                onFieldChange('computeOption', 'capacityProviders');
+                onFieldChange('launchType', '');
+              }}
+              type="radio"
+            />{' '}
+            Capacity Providers
+          </label>
+        </div>
+      </div>
+
+      {useCapacityProviders ? (
+        <div className="form-group">
+          <EcsCapacityProvider command={command} configureCommand={configureCommand} onFieldChange={onFieldChange} />
+        </div>
+      ) : (
+        <div className="form-group">
+          <div className="col-md-5 sm-label-right">
+            Launch Type <HelpField id="ecs.launchtype" />
+          </div>
+          <div className="col-md-3">
+            <select
+              aria-label="Launch type"
+              className="form-control input-sm"
+              data-test-id="ServerGroup.launchType"
+              onChange={(event) => onFieldChange('launchType', event.target.value)}
+              value={command.launchType || ''}
+            >
+              <option value="">Select...</option>
+              {(command.backingData.launchTypes || []).map((launchType) => (
+                <option key={launchType} value={launchType}>
+                  {launchType}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      )}
+
+      <hr />
+      {[
+        ['desired', 'Desired capacity', 'ecs.capacity.desired'],
+        ['min', 'Minimum', 'ecs.capacity.minimum'],
+        ['max', 'Maximum', 'ecs.capacity.maximum'],
+      ].map(([field, label, help]) => (
+        <div className="form-group" key={field}>
+          <div className="col-md-5 sm-label-right">
+            {label} <HelpField id={help} />
+          </div>
+          <div className="col-md-2">
+            <input
+              aria-label={`${label === 'Minimum' || label === 'Maximum' ? `${label} capacity` : label}`}
+              className="form-control input-sm no-spel"
+              data-test-id={`ServerGroup.capacity.${field}`}
+              onChange={(event) => updateCapacity(field, event.target.valueAsNumber)}
+              type="number"
+              value={capacity[field] ?? ''}
+            />
+          </div>
+        </div>
+      ))}
+
+      <div className="form-group">
+        <div className="col-md-12 checkbox">
+          <label>
+            <input
+              checked={!!command.useSourceCapacity}
+              data-test-id="ServerGroup.useSourceCapacity"
+              onChange={(event) => {
+                onFieldChange('useSourceCapacity', event.target.checked);
+                onFieldChange('preferSourceCapacity', event.target.checked);
+              }}
+              type="checkbox"
+            />{' '}
+            <b>If available, use the previous server group's capacity</b>
+          </label>{' '}
+          <HelpField id="ecs.capacity.overwrite" />
+        </div>
+      </div>
+      <div className="form-group">
+        <div className="col-md-12 checkbox">
+          <label>
+            <input
+              checked={!!command.copySourceScalingPoliciesAndActions}
+              data-test-id="ServerGroup.copySourceScalingPoliciesAndActions"
+              onChange={(event) => onFieldChange('copySourceScalingPoliciesAndActions', event.target.checked)}
+              type="checkbox"
+            />{' '}
+            <b>If available, copy the previous server group's autoscaling policies</b>
+          </label>{' '}
+          <HelpField id="ecs.capacity.copySourceScalingPoliciesAndActions" />
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { HelpField, MapEditor } from '@spinnaker/core';
+
+import type { IEcsWizardPageProps } from './common';
+
+const logDrivers = [
+  'None',
+  'awslogs',
+  'fluentd',
+  'gelf',
+  'journald',
+  'json-file',
+  'logentries',
+  'splunk',
+  'sumologic',
+  'syslog',
+];
+
+export const LoggingSettings = ({ command, onFieldChange }: IEcsWizardPageProps) => (
+  <div className="container-fluid form-horizontal" data-test-id="EcsServerGroupWizard.logging">
+    <div className="form-group">
+      <div className="col-md-5 sm-label-right">
+        <b>Log driver (Optional)</b> <HelpField id="ecs.logDriver" />
+      </div>
+      <div className="col-md-7">
+        <select
+          aria-label="Log driver"
+          className="form-control input-sm"
+          data-test-id="Logging.logDriver"
+          onChange={(event) => onFieldChange('logDriver', event.target.value)}
+          value={command.logDriver || ''}
+        >
+          <option value="">Select...</option>
+          {logDrivers.map((driver) => (
+            <option key={driver} value={driver}>
+              {driver}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+    {command.logDriver && command.logDriver !== 'None' ? (
+      <div className="form-group">
+        <div className="sm-label-left">
+          <b>Logging options (optional)</b> <HelpField id="ecs.logOptions" />
+        </div>
+        <MapEditor
+          allowEmpty={true}
+          keyLabel="Logging option"
+          model={command.logOptions || {}}
+          onChange={(logOptions) => onFieldChange('logOptions', logOptions)}
+          valueLabel="Logging option value"
+        />
+      </div>
+    ) : (
+      <div className="form-group">Logging options are not available for your log driver selection.</div>
+    )}
+  </div>
+);

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

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

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

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

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

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { HelpField } from '@spinnaker/core';
+
+import type { IEcsWizardPageProps } from './common';
+import { TaskDefinition } from '../taskDefinition/TaskDefinition';
+
+export const TaskDefinitionSettings = ({ command, configureCommand, onFieldChange }: IEcsWizardPageProps) => (
+  <div className="clearfix" data-test-id="EcsServerGroupWizard.taskDefinition">
+    <div className="row">
+      <div className="col-md-12">
+        <div className="container-fluid form-horizontal">
+          <div className="form-group">
+            <div className="col-md-4 sm-label-right">
+              <b>Task Definition source</b> <HelpField id="ecs.taskDefinition" />
+            </div>
+            <div className="col-md-2 radio">
+              <label>
+                <input
+                  checked={!command.useTaskDefinitionArtifact}
+                  data-test-id="ServerGroup.useInputs"
+                  id="taskDefinitionSourceInputs"
+                  onChange={() => onFieldChange('useTaskDefinitionArtifact', false)}
+                  type="radio"
+                />{' '}
+                Inputs
+              </label>
+            </div>
+            <div className="col-md-2 radio">
+              <label>
+                <input
+                  checked={command.useTaskDefinitionArtifact}
+                  data-test-id="ServerGroup.useArtifacts"
+                  disabled={command.viewState.mode === 'create'}
+                  id="taskDefinitionSourceArtifact"
+                  onChange={() => onFieldChange('useTaskDefinitionArtifact', true)}
+                  type="radio"
+                />{' '}
+                Artifact
+              </label>
+            </div>
+          </div>
+          {command.viewState.mode === 'create' && (
+            <div className="color-text-caption">
+              <hr />
+              <em>Artifacts not supported outside of pipelines.</em>
+            </div>
+          )}
+        </div>
+      </div>
+      {command.useTaskDefinitionArtifact && (
+        <div className="col-md-12">
+          <hr />
+          <TaskDefinition command={command} configureCommand={configureCommand} onFieldChange={onFieldChange} />
+        </div>
+      )}
+    </div>
+  </div>
+);

package/src/serverGroup/configure/wizard/pages/common.ts

@@ -0,0 +1,10 @@
+import type { Application } from '@spinnaker/core';
+
+import type { IEcsServerGroupCommand } from '../../serverGroupConfiguration.service';
+
+export interface IEcsWizardPageProps {
+  application: Application;
+  command: IEcsServerGroupCommand;
+  configureCommand: (query?: string) => Promise<void>;
+  onFieldChange: (field: string, value: any) => void;
+}

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

@@ -0,0 +1,190 @@
+import React from 'react';
+
+import type { IWizardPageComponent } from '@spinnaker/core';
+
+import type { IEcsServerGroupCommand } from '../../serverGroupConfiguration.service';
+
+type ValidationErrors = { [key: string]: any };
+type Validator = (values: IEcsServerGroupCommand) => ValidationErrors;
+
+const required = (value: any): boolean => value !== undefined && value !== null && value !== '';
+const validInteger = (value: any): boolean => Number.isFinite(value) && Number.isInteger(value) && value >= 0;
+const usableCapacityProviderStrategyItem = (item: any): boolean =>
+  required(item?.capacityProvider) && validInteger(item?.base) && validInteger(item?.weight);
+const hasRowErrors = (errors: ValidationErrors[]): boolean => errors.some((error) => Object.keys(error).length > 0);
+const isExpressionLanguage = (value: string): boolean => value?.includes('${');
+const isStackPattern = (value = ''): boolean =>
+  isExpressionLanguage(value) || /^([a-zA-Z_0-9._${}]*(\${.+})*)*$/.test(value);
+const isDetailPattern = (value = ''): boolean =>
+  isExpressionLanguage(value) || /^([a-zA-Z_0-9._${}-]*(\${.+})*)*$/.test(value);
+
+const validateTargetGroupMappings = (values: IEcsServerGroupCommand): ValidationErrors => {
+  const targetGroupMappings = (values.targetGroupMappings || []).map((mapping) => {
+    const errors: ValidationErrors = {};
+    if (values.useTaskDefinitionArtifact && !required(mapping.containerName)) {
+      errors.containerName = 'Container name is required.';
+    }
+    if (!required(mapping.targetGroup)) {
+      errors.targetGroup = 'Target group is required.';
+    }
+    if (!validInteger(mapping.containerPort)) {
+      errors.containerPort = 'Container port must be a non-negative integer.';
+    }
+    return errors;
+  });
+  return hasRowErrors(targetGroupMappings) ? { targetGroupMappings } : {};
+};
+
+export const validateEcsBasicSettings: Validator = (values) => {
+  const errors: ValidationErrors = {};
+  if (!required(values.credentials)) {
+    errors.credentials = 'Account is required.';
+  }
+  if (!required(values.region)) {
+    errors.region = 'Region is required.';
+  }
+  if (!required(values.ecsClusterName)) {
+    errors.ecsClusterName = 'ECS cluster is required.';
+  }
+  if (!isStackPattern(values.stack)) {
+    errors.stack = 'Only dot(.) and underscore(_) special characters are allowed in the Stack field.';
+  }
+  if (!isDetailPattern(values.freeFormDetails)) {
+    errors.freeFormDetails =
+      'Only dot(.), underscore(_), and dash(-) special characters are allowed in the Detail field.';
+  }
+  return errors;
+};
+
+export const validateEcsTaskDefinition: Validator = (values) => {
+  if (!values.useTaskDefinitionArtifact) {
+    return {};
+  }
+  const errors: ValidationErrors = validateTargetGroupMappings(values);
+  if (!values.taskDefinitionArtifact?.artifact && !values.taskDefinitionArtifact?.artifactId) {
+    errors.taskDefinitionArtifact = 'Task definition artifact is required.';
+  }
+  const containerMappings = (values.containerMappings || []).map((mapping) => {
+    const mappingErrors: ValidationErrors = {};
+    if (!required(mapping.containerName)) {
+      mappingErrors.containerName = 'Container name is required.';
+    }
+    if (!required(mapping.imageDescription?.imageId)) {
+      mappingErrors.imageDescription = 'Container image is required.';
+    }
+    return mappingErrors;
+  });
+  if (hasRowErrors(containerMappings)) {
+    errors.containerMappings = containerMappings;
+  }
+  return errors;
+};
+
+export const validateEcsContainer: Validator = (values) => {
+  if (values.useTaskDefinitionArtifact) {
+    return {};
+  }
+  const errors: ValidationErrors = validateTargetGroupMappings(values);
+  if (!required(values.imageDescription?.imageId)) {
+    errors.imageDescription = { imageId: 'Container image is required.' };
+  }
+  return errors;
+};
+
+export const validateEcsServiceDiscovery: Validator = (values) => {
+  const serviceDiscoveryAssociations = (values.serviceDiscoveryAssociations || []).map((association) => {
+    const errors: ValidationErrors = {};
+    if (values.useTaskDefinitionArtifact && !required(association.containerName)) {
+      errors.containerName = 'Container name is required.';
+    }
+    if (!required(association.registry?.id) && !required(association.registry?.displayName)) {
+      errors.registry = 'Service registry is required.';
+    }
+    if (!validInteger(association.containerPort)) {
+      errors.containerPort = 'Container port must be a non-negative integer.';
+    }
+    return errors;
+  });
+  return hasRowErrors(serviceDiscoveryAssociations) ? { serviceDiscoveryAssociations } : {};
+};
+
+export const validateEcsCapacity: Validator = (values) => {
+  const capacity = values.capacity || {};
+  const useCapacityProviders =
+    values.computeOption === 'capacityProviders' ||
+    (!values.computeOption && (values.capacityProviderStrategy || []).length > 0);
+  const validationErrors: ValidationErrors = {};
+  const errors: ValidationErrors = {};
+  ['min', 'desired', 'max'].forEach((field) => {
+    if (!validInteger(capacity[field])) {
+      errors[field] = 'Capacity must be a non-negative integer.';
+    }
+  });
+  if (Object.keys(errors).length === 0) {
+    if (capacity.min > capacity.max) {
+      errors.min = 'Minimum capacity cannot exceed maximum capacity.';
+    }
+    if (capacity.desired < capacity.min || capacity.desired > capacity.max) {
+      errors.desired = 'Desired capacity must be between minimum and maximum capacity.';
+    }
+  }
+  if (!useCapacityProviders && !required(values.launchType)) {
+    validationErrors.launchType = 'Launch type is required.';
+  }
+  if (useCapacityProviders && values.useDefaultCapacityProviders !== false) {
+    const defaultStrategy = values.backingData?.filtered?.defaultCapacityProviderStrategy || [];
+    if (!defaultStrategy.length || !defaultStrategy.every(usableCapacityProviderStrategyItem)) {
+      validationErrors.capacityProviderStrategy = 'A usable default capacity provider strategy is required.';
+    }
+  }
+  if (useCapacityProviders && values.useDefaultCapacityProviders === false) {
+    const strategy = values.capacityProviderStrategy || [];
+    if (!strategy.length) {
+      validationErrors.capacityProviderStrategy = 'At least one capacity provider is required.';
+    } else {
+      const strategyErrors = strategy.map((item) => {
+        const itemErrors: ValidationErrors = {};
+        if (!required(item.capacityProvider)) {
+          itemErrors.capacityProvider = 'Capacity provider is required.';
+        }
+        if (!validInteger(item.base)) {
+          itemErrors.base = 'Base must be a non-negative integer.';
+        }
+        if (!validInteger(item.weight)) {
+          itemErrors.weight = 'Weight must be a non-negative integer.';
+        }
+        return itemErrors;
+      });
+      if (hasRowErrors(strategyErrors)) {
+        validationErrors.capacityProviderStrategy = strategyErrors;
+      }
+    }
+  }
+  if (Object.keys(errors).length) {
+    validationErrors.capacity = errors;
+  }
+  return validationErrors;
+};
+
+export const validateEcsServerGroup: Validator = (values) => ({
+  ...validateEcsBasicSettings(values),
+  ...validateEcsTaskDefinition(values),
+  ...validateEcsContainer(values),
+  ...validateEcsServiceDiscovery(values),
+  ...validateEcsCapacity(values),
+});
+
+interface IEcsWizardPageValidationProps {
+  children: React.ReactElement;
+  validator: Validator;
+}
+
+export class EcsWizardPageValidation
+  extends React.Component<IEcsWizardPageValidationProps>
+  implements IWizardPageComponent<IEcsServerGroupCommand> {
+  public validate = (values: IEcsServerGroupCommand) => this.props.validator(values);
+
+  public render() {
+    return React.Children.only(this.props.children);
+  }
+}