@spinnaker/ecs 2026.2.4 → 2026.3.1

package/src/serverGroup/details/rollback/EcsRollbackServerGroupModal.tsx

@@ -0,0 +1,285 @@
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+
+import type {
+  Application,
+  DeckRuntimeServices,
+  IModalComponentProps,
+  IServerGroup,
+  IServerGroupJob,
+} from '@spinnaker/core';
+import {
+  DeckRuntimeContext,
+  FormikFormField,
+  ModalClose,
+  noop,
+  PlatformHealthOverride,
+  ReactModal,
+  ReactSelectInput,
+  SpinFormik,
+  TaskMonitor,
+  TaskMonitorWrapper,
+  TaskReason,
+  UserVerification,
+  ValidationMessage,
+} from '@spinnaker/core';
+
+export interface IEcsRollbackServerGroupModalProps extends IModalComponentProps {
+  application: Application;
+  serverGroup: IServerGroup;
+}
+
+export interface IEcsRollbackServerGroupValues {
+  interestingHealthProviderNames?: string[];
+  reason?: string;
+  restoreServerGroupName?: string;
+  targetHealthyRollbackPercentage: number;
+}
+
+export interface IEcsRollbackServerGroupJob extends IServerGroupJob {
+  interestingHealthProviderNames?: string[];
+  platformHealthOnlyShowOverride?: boolean;
+  reason?: string;
+  rollbackContext: {
+    restoreServerGroupName: string;
+    rollbackServerGroupName: string;
+    targetHealthyRollbackPercentage: number;
+  };
+  rollbackType: 'EXPLICIT';
+}
+
+export interface IEcsRollbackServerGroupErrors {
+  restoreServerGroupName?: string;
+  targetHealthyRollbackPercentage?: string;
+}
+
+interface IEcsRollbackServerGroupModalState {
+  initialValues: IEcsRollbackServerGroupValues;
+  taskMonitor: TaskMonitor;
+  verified: boolean;
+}
+
+function coordinate(serverGroup: any, key: 'account' | 'cluster'): string | undefined {
+  if (key === 'account') {
+    return serverGroup.account || serverGroup.accountId;
+  }
+  return serverGroup.cluster || serverGroup.moniker?.cluster;
+}
+
+export function getEcsRollbackTargets(application: Application, serverGroup: IServerGroup): IServerGroup[] {
+  const app = application as any;
+  const appName = (serverGroup as any).moniker?.app || app.name;
+  const candidates: IServerGroup[] = app.serverGroups?.data || app.getDataSource?.('serverGroups')?.data || [];
+
+  return candidates
+    .filter((candidate: any) => {
+      const candidateApp = candidate.moniker?.app || candidate.application || appName;
+      return (
+        candidate.isDisabled &&
+        candidateApp === appName &&
+        coordinate(candidate, 'cluster') === coordinate(serverGroup, 'cluster') &&
+        coordinate(candidate, 'account') === coordinate(serverGroup, 'account') &&
+        candidate.region === serverGroup.region
+      );
+    })
+    .sort((a, b) => b.name.localeCompare(a.name));
+}
+
+export function validateEcsRollbackValues(
+  values: IEcsRollbackServerGroupValues,
+  eligibleTargetNames?: string[],
+): IEcsRollbackServerGroupErrors {
+  const errors: IEcsRollbackServerGroupErrors = {};
+  if (!values.restoreServerGroupName) {
+    errors.restoreServerGroupName = 'Select a server group to restore';
+  } else if (eligibleTargetNames && !eligibleTargetNames.includes(values.restoreServerGroupName)) {
+    errors.restoreServerGroupName = 'Select an eligible server group to restore';
+  }
+  if (
+    !Number.isFinite(values.targetHealthyRollbackPercentage) ||
+    values.targetHealthyRollbackPercentage < 0 ||
+    values.targetHealthyRollbackPercentage > 100
+  ) {
+    errors.targetHealthyRollbackPercentage = 'Healthy threshold must be between 0 and 100';
+  }
+  return errors;
+}
+
+export class EcsRollbackServerGroupModal extends React.Component<
+  IEcsRollbackServerGroupModalProps,
+  IEcsRollbackServerGroupModalState
+> {
+  public static contextType = DeckRuntimeContext;
+  public declare context: React.ContextType<typeof DeckRuntimeContext>;
+
+  public static defaultProps: Partial<IEcsRollbackServerGroupModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  public static show(
+    props: IEcsRollbackServerGroupModalProps,
+    runtimeServices: DeckRuntimeServices,
+  ): Promise<IEcsRollbackServerGroupJob> {
+    return ReactModal.show(EcsRollbackServerGroupModal, props, undefined, runtimeServices);
+  }
+
+  public constructor(props: IEcsRollbackServerGroupModalProps) {
+    super(props);
+    const { application, serverGroup } = props;
+    const attributes = application.attributes || {};
+    this.state = {
+      initialValues: {
+        interestingHealthProviderNames:
+          attributes.platformHealthOnlyShowOverride && attributes.platformHealthOnly ? ['Ecs'] : undefined,
+        targetHealthyRollbackPercentage: 100,
+      },
+      taskMonitor: new TaskMonitor({
+        application,
+        title: `Rollback ${serverGroup.name}`,
+        onDismiss: () => this.props.dismissModal(),
+        onTaskComplete: () => application.serverGroups.refresh(),
+      }),
+      verified: false,
+    };
+  }
+
+  private close = (): void => this.props.dismissModal();
+
+  private submit = (values: IEcsRollbackServerGroupValues): void => {
+    const eligibleTargetNames = getEcsRollbackTargets(this.props.application, this.props.serverGroup).map(
+      ({ name }) => name,
+    );
+    if (!this.state.verified || Object.keys(validateEcsRollbackValues(values, eligibleTargetNames)).length > 0) {
+      return;
+    }
+
+    const { application, serverGroup } = this.props;
+    const command: IEcsRollbackServerGroupJob = {
+      interestingHealthProviderNames: values.interestingHealthProviderNames,
+      platformHealthOnlyShowOverride: application.attributes?.platformHealthOnlyShowOverride,
+      reason: values.reason,
+      rollbackContext: {
+        restoreServerGroupName: values.restoreServerGroupName,
+        rollbackServerGroupName: serverGroup.name,
+        targetHealthyRollbackPercentage: values.targetHealthyRollbackPercentage,
+      },
+      rollbackType: 'EXPLICIT',
+    };
+
+    this.state.taskMonitor.submit(() =>
+      this.context.services.serverGroupWriter.rollbackServerGroup(serverGroup, application, command),
+    );
+  };
+
+  public render(): JSX.Element {
+    const { application, serverGroup } = this.props;
+    const targets = getEcsRollbackTargets(application, serverGroup);
+
+    return (
+      <>
+        <TaskMonitorWrapper monitor={this.state.taskMonitor} />
+        <SpinFormik<IEcsRollbackServerGroupValues>
+          initialValues={this.state.initialValues}
+          onSubmit={this.submit}
+          validate={(values) =>
+            validateEcsRollbackValues(
+              values,
+              targets.map(({ name }) => name),
+            )
+          }
+          render={(formik) => (
+            <>
+              <ModalClose dismiss={this.close} />
+              <Modal.Header>
+                <Modal.Title>Rollback {serverGroup.name}</Modal.Title>
+              </Modal.Header>
+              <Modal.Body>
+                <form className="form-horizontal">
+                  <div className="form-group">
+                    <div className="col-sm-3 sm-label-right">Restore to</div>
+                    <div className="col-sm-7">
+                      <FormikFormField
+                        name="restoreServerGroupName"
+                        fastField={true}
+                        input={(props) => (
+                          <ReactSelectInput
+                            {...props}
+                            clearable={false}
+                            stringOptions={targets.map(({ name }) => name)}
+                          />
+                        )}
+                        required={true}
+                      />
+                    </div>
+                  </div>
+
+                  {application.attributes?.platformHealthOnlyShowOverride && (
+                    <div className="form-group">
+                      <div className="col-sm-10 col-sm-offset-1">
+                        <PlatformHealthOverride
+                          interestingHealthProviderNames={formik.values.interestingHealthProviderNames}
+                          onChange={(names) => formik.setFieldValue('interestingHealthProviderNames', names)}
+                          platformHealthType="Ecs"
+                          showHelpDetails={true}
+                        />
+                      </div>
+                    </div>
+                  )}
+
+                  <TaskReason
+                    reason={formik.values.reason}
+                    onChange={(reason) => formik.setFieldValue('reason', reason)}
+                  />
+
+                  <div className="form-group">
+                    <div className="col-sm-3 sm-label-right">Healthy threshold</div>
+                    <div className="col-sm-3">
+                      <input
+                        className="form-control input-sm"
+                        max={100}
+                        min={0}
+                        name="targetHealthyRollbackPercentage"
+                        onChange={(event) =>
+                          formik.setFieldValue('targetHealthyRollbackPercentage', Number(event.target.value))
+                        }
+                        type="number"
+                        value={formik.values.targetHealthyRollbackPercentage}
+                      />
+                    </div>
+                    <div className="col-sm-2 sm-control-field">percent</div>
+                  </div>
+                  {formik.errors.targetHealthyRollbackPercentage && (
+                    <div className="col-sm-7 col-sm-offset-3">
+                      <ValidationMessage
+                        message={formik.errors.targetHealthyRollbackPercentage as string}
+                        type="error"
+                      />
+                    </div>
+                  )}
+                </form>
+              </Modal.Body>
+              <Modal.Footer>
+                <UserVerification
+                  account={serverGroup.account}
+                  onValidChange={(verified) => this.setState({ verified })}
+                />
+                <button className="btn btn-default" onClick={this.close} type="button">
+                  Cancel
+                </button>
+                <button
+                  className="btn btn-primary"
+                  disabled={!this.state.verified || !formik.isValid}
+                  onClick={() => this.submit(formik.values)}
+                  type="submit"
+                >
+                  Submit
+                </button>
+              </Modal.Footer>
+            </>
+          )}
+        />
+      </>
+    );
+  }
+}

package/src/serverGroup/details/rollback/index.ts

@@ -0,0 +1 @@
+export * from './EcsRollbackServerGroupModal';

package/src/serverGroup/details/sections/EcsServerGroupDetailsSections.spec.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { CollapsibleSection, HealthCounts } from '@spinnaker/core';
+
+import {
+  EcsBuildInfoSection,
+  EcsCapacitySection,
+  EcsEnvironmentVariablesSection,
+  EcsFirewallsSection,
+  EcsHealthSection,
+  EcsScalingPoliciesSection,
+  EcsTaskDefinitionSection,
+} from './EcsServerGroupDetailsSections';
+import { EcsServerGroupInformationSection } from './EcsServerGroupInformationSection';
+import { EventsLink } from '../../events/EventsLink';
+import { EcsServerGroupEventsSection } from './EcsServerGroupEventsSection';
+
+describe('ECS server group details sections', () => {
+  const serverGroup = {
+    account: 'test',
+    region: 'us-east-1',
+    createdTime: 1710000000000,
+    ecsCluster: 'production',
+    vpcId: 'vpc-123',
+    taskDefinition: {
+      taskName: 'fnord:42',
+      containerImage: 'example/fnord:1.2.3',
+      iamRole: 'fnord-task-role',
+      containerPort: 8080,
+      cpuUnits: 512,
+      memoryReservation: 1024,
+      memoryLimit: 2048,
+      environmentVariables: [
+        { name: 'ENVIRONMENT', value: 'production' },
+        { name: 'REGION', value: 'eu' },
+      ],
+    },
+    instanceCounts: { total: 2, up: 2, down: 0, unknown: 0, outOfService: 0, starting: 0 },
+    securityGroups: ['sg-web', 'sg-admin'],
+    instances: [{ id: 'one' }, { id: 'two' }],
+    capacity: { desired: 3, min: 1, max: 5 },
+    metricAlarms: ['cpu-high', 'memory-high'],
+    buildInfo: {
+      jenkins: { host: 'https://jenkins.example/', name: 'fnord', number: 123 },
+      package_name: 'fnord-package',
+      commit: '1234567890abcdef',
+      version: '1.2.3',
+    },
+  } as any;
+  const props = { app: {} as any, serverGroup };
+
+  const sectionContent = (wrapper: any) => shallow(<div>{wrapper.find(CollapsibleSection).prop('children')}</div>);
+
+  it('renders general ECS location information', () => {
+    const wrapper = shallow(<EcsServerGroupInformationSection {...props} />);
+
+    expect(sectionContent(wrapper).text()).toContain('production');
+    expect(sectionContent(wrapper).text()).toContain('vpc-123');
+  });
+
+  it('renders task definition and container resources', () => {
+    const wrapper = shallow(<EcsTaskDefinitionSection {...props} />);
+    const text = sectionContent(wrapper).text();
+
+    expect(text).toContain('fnord:42');
+    expect(text).toContain('example/fnord:1.2.3');
+    expect(text).toContain('fnord-task-role');
+    expect(text).toContain('8080');
+    expect(text).toContain('512');
+    expect(text).toContain('1024 MB');
+    expect(text).toContain('2048 MB');
+  });
+
+  it('renders environment variables and its empty state', () => {
+    const populated = shallow(<EcsEnvironmentVariablesSection {...props} />);
+    const empty = shallow(
+      <EcsEnvironmentVariablesSection
+        {...props}
+        serverGroup={{ ...serverGroup, taskDefinition: { ...serverGroup.taskDefinition, environmentVariables: [] } }}
+      />,
+    );
+
+    expect(sectionContent(populated).text()).toContain('ENVIRONMENT');
+    expect(sectionContent(populated).text()).toContain('production');
+    expect(sectionContent(empty).text()).toContain('This server group has no environment variables');
+  });
+
+  it('renders health, firewalls, capacity, and scaling alarms', () => {
+    const health = shallow(<EcsHealthSection {...props} />);
+    const firewalls = shallow(<EcsFirewallsSection {...props} />);
+    const capacity = shallow(<EcsCapacitySection {...props} />);
+    const alarms = shallow(<EcsScalingPoliciesSection {...props} />);
+
+    expect(health.find(HealthCounts).prop('container')).toBe(serverGroup.instanceCounts);
+    expect(sectionContent(firewalls).text()).toContain('sg-web');
+    expect(sectionContent(firewalls).text()).toContain('sg-admin');
+    expect(sectionContent(capacity).text()).toContain('Current2');
+    expect(sectionContent(capacity).text()).toContain('Desired3');
+    expect(sectionContent(capacity).text()).toContain('Min1');
+    expect(sectionContent(capacity).text()).toContain('Max5');
+    expect(sectionContent(alarms).text()).toContain('cpu-high');
+    expect(sectionContent(alarms).text()).toContain('memory-high');
+  });
+
+  it('renders the scaling alarms empty state', () => {
+    const wrapper = shallow(
+      <EcsScalingPoliciesSection {...props} serverGroup={{ ...serverGroup, metricAlarms: [] }} />,
+    );
+
+    expect(sectionContent(wrapper).text()).toContain('There are no scaling policies assigned.');
+  });
+
+  it('renders build metadata and a Jenkins link', () => {
+    const wrapper = shallow(<EcsBuildInfoSection {...props} />);
+    const content = sectionContent(wrapper);
+    const text = content.text();
+
+    expect(text).toContain('fnord-package');
+    expect(text).toContain('12345678');
+    expect(text).toContain('1.2.3');
+    expect(content.find('a').prop('href')).toBe('https://jenkins.example/job/fnord/123');
+  });
+
+  it('renders the ECS events link', () => {
+    const wrapper = shallow(<EcsServerGroupEventsSection {...props} />);
+
+    expect(wrapper.find(EventsLink).prop('serverGroup')).toBe(serverGroup);
+  });
+});

package/src/serverGroup/details/sections/EcsServerGroupDetailsSections.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+
+import type { IServerGroupDetailsSectionProps } from '@spinnaker/core';
+import { CollapsibleSection, FirewallLabels, HealthCounts } from '@spinnaker/core';
+
+export function EcsTaskDefinitionSection({ serverGroup }: IServerGroupDetailsSectionProps) {
+  const taskDefinition = (serverGroup as any).taskDefinition || {};
+  return (
+    <CollapsibleSection heading="Task Definition" defaultExpanded={true}>
+      <dl className="dl-horizontal dl-narrow">
+        <dt>Task Name</dt>
+        <dd>{taskDefinition.taskName}</dd>
+        <dt>Container URL</dt>
+        <dd>{taskDefinition.containerImage}</dd>
+        <dt>Container IAM Profile</dt>
+        <dd>{taskDefinition.iamRole}</dd>
+        {taskDefinition.containerPort != null && (
+          <>
+            <dt>Container Port</dt>
+            <dd>{taskDefinition.containerPort}</dd>
+          </>
+        )}
+        <dt>Container CPU Units</dt>
+        <dd>{taskDefinition.cpuUnits}</dd>
+        {taskDefinition.memoryReservation != null && (
+          <>
+            <dt>Container Reserved Memory</dt>
+            <dd>{taskDefinition.memoryReservation} MB</dd>
+          </>
+        )}
+        {taskDefinition.memoryLimit != null && (
+          <>
+            <dt>Container Memory Limit</dt>
+            <dd>{taskDefinition.memoryLimit} MB</dd>
+          </>
+        )}
+      </dl>
+    </CollapsibleSection>
+  );
+}
+
+export function EcsEnvironmentVariablesSection({ serverGroup }: IServerGroupDetailsSectionProps) {
+  const environmentVariables = (serverGroup as any).taskDefinition?.environmentVariables || [];
+  return (
+    <CollapsibleSection heading="Environment Variables">
+      {environmentVariables.length === 0 ? (
+        <div>This server group has no environment variables</div>
+      ) : (
+        <dl className="dl-horizontal dl-narrow">
+          {environmentVariables.map((variable: any) => (
+            <React.Fragment key={variable.name}>
+              <dt>{variable.name}</dt>
+              <dd>{variable.value}</dd>
+            </React.Fragment>
+          ))}
+        </dl>
+      )}
+    </CollapsibleSection>
+  );
+}
+
+export function EcsHealthSection({ serverGroup }: IServerGroupDetailsSectionProps) {
+  if (!serverGroup.instanceCounts || serverGroup.instanceCounts.total <= 0) {
+    return null;
+  }
+  return (
+    <CollapsibleSection heading="Health" defaultExpanded={true}>
+      <dl className="dl-horizontal dl-narrow">
+        <dt>Instances</dt>
+        <dd>
+          <HealthCounts container={serverGroup.instanceCounts} className="pull-left" />
+        </dd>
+      </dl>
+    </CollapsibleSection>
+  );
+}
+
+export function EcsFirewallsSection({ serverGroup }: IServerGroupDetailsSectionProps) {
+  const securityGroups = (serverGroup as any).securityGroups || [];
+  return (
+    <CollapsibleSection heading={FirewallLabels.get('Firewalls')}>
+      <ul>
+        {securityGroups.map((securityGroup: string) => (
+          <li key={securityGroup}>{securityGroup}</li>
+        ))}
+      </ul>
+    </CollapsibleSection>
+  );
+}
+
+export function EcsCapacitySection({ serverGroup }: IServerGroupDetailsSectionProps) {
+  const capacity = (serverGroup as any).capacity || {};
+  return (
+    <CollapsibleSection heading="Capacity">
+      <dl className="dl-horizontal dl-narrow">
+        <dt>Current</dt>
+        <dd>{serverGroup.instances?.length || 0}</dd>
+        <dt>Desired</dt>
+        <dd>{capacity.desired}</dd>
+        <dt>Min</dt>
+        <dd>{capacity.min}</dd>
+        <dt>Max</dt>
+        <dd>{capacity.max}</dd>
+      </dl>
+    </CollapsibleSection>
+  );
+}
+
+export function EcsScalingPoliciesSection({ serverGroup }: IServerGroupDetailsSectionProps) {
+  const metricAlarms = (serverGroup as any).metricAlarms || [];
+  return (
+    <CollapsibleSection heading="Scaling Policies">
+      {metricAlarms.length ? (
+        <ul>
+          {metricAlarms.map((alarm: string) => (
+            <li key={alarm}>{alarm}</li>
+          ))}
+        </ul>
+      ) : (
+        <i>There are no scaling policies assigned.</i>
+      )}
+    </CollapsibleSection>
+  );
+}
+
+function getBuildLink(buildInfo: any): string {
+  if (buildInfo.buildInfoUrl) {
+    return buildInfo.buildInfoUrl;
+  }
+  if (buildInfo.jenkins) {
+    return `${buildInfo.jenkins.host.replace(/\/?$/, '/')}job/${buildInfo.jenkins.name}/${buildInfo.jenkins.number}`;
+  }
+  return null;
+}
+
+export function EcsBuildInfoSection({ serverGroup }: IServerGroupDetailsSectionProps) {
+  const buildInfo = (serverGroup as any).buildInfo;
+  if (!buildInfo) {
+    return null;
+  }
+  const buildLink = getBuildLink(buildInfo);
+  return (
+    <CollapsibleSection heading="Build Data">
+      <dl className="dl-horizontal dl-narrow">
+        {buildInfo.jenkins && (
+          <>
+            <dt>Job</dt>
+            <dd>{buildInfo.jenkins.name}</dd>
+            <dt>Build</dt>
+            <dd>{buildInfo.jenkins.number}</dd>
+          </>
+        )}
+        <dt>Package</dt>
+        <dd>{buildInfo.package_name}</dd>
+        <dt>Commit</dt>
+        <dd>{buildInfo.commit?.substring(0, 8)}</dd>
+        <dt>Version</dt>
+        <dd>{buildInfo.version}</dd>
+        {buildLink && (
+          <>
+            <dt>Build Link</dt>
+            <dd>
+              <a target="_blank" rel="noopener noreferrer" href={buildLink}>
+                {buildLink}
+              </a>
+            </dd>
+          </>
+        )}
+      </dl>
+    </CollapsibleSection>
+  );
+}

package/src/serverGroup/details/sections/EcsServerGroupEventsSection.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import type { IServerGroupDetailsSectionProps } from '@spinnaker/core';
+import { CollapsibleSection } from '@spinnaker/core';
+
+import { EventsLink } from '../../events/EventsLink';
+
+export function EcsServerGroupEventsSection({ serverGroup }: IServerGroupDetailsSectionProps) {
+  return (
+    <CollapsibleSection heading="ECS Events">
+      <EventsLink serverGroup={serverGroup} />
+    </CollapsibleSection>
+  );
+}

package/src/serverGroup/details/sections/EcsServerGroupInformationSection.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import type { IServerGroupDetailsSectionProps } from '@spinnaker/core';
+import { AccountTag, CollapsibleSection, timestamp } from '@spinnaker/core';
+
+export function EcsServerGroupInformationSection({ serverGroup }: IServerGroupDetailsSectionProps) {
+  return (
+    <CollapsibleSection heading="Server Group Information" defaultExpanded={true}>
+      <dl className="dl-horizontal dl-narrow">
+        <dt>Account</dt>
+        <dd>
+          <AccountTag account={serverGroup.account} />
+        </dd>
+        <dt>Region</dt>
+        <dd>{serverGroup.region}</dd>
+        <dt>Created</dt>
+        <dd>{serverGroup.createdTime ? timestamp(serverGroup.createdTime) : 'Unknown'}</dd>
+        <dt>ECS Cluster</dt>
+        <dd>{(serverGroup as any).ecsCluster}</dd>
+        <dt>VPC ID</dt>
+        <dd>{(serverGroup as any).vpcId}</dd>
+      </dl>
+    </CollapsibleSection>
+  );
+}