@spinnaker/core 2026.2.2 → 2026.3.0

package/src/pipeline/config/preconditions/PreconditionSelector.tsx

@@ -0,0 +1,350 @@
+import React from 'react';
+
+import type { IAccount } from '../../../account/AccountService';
+import { AccountService } from '../../../account/AccountService';
+import type { Application } from '../../../application';
+import { AppListExtractor } from '../../../application/listExtractor/AppListExtractor';
+import type { IStage } from '../../../domain';
+import { HelpField } from '../../../help';
+import type { IPrecondition } from './preconditionTypes';
+import { listPreconditionTypes } from './preconditionTypes';
+import { StageStatusPreconditionConfig } from './types/stageStatus/StageStatusPreconditionConfig';
+import { ScopeClusterSelector } from '../../../widgets/ScopeClusterSelector';
+
+export interface IPreconditionSelectorProps {
+  application: Application;
+  onChange: (precondition: IPrecondition) => void;
+  precondition: IPrecondition;
+  strategy: boolean;
+  upstreamStages: IStage[];
+}
+
+export interface IPreconditionSelectorState {
+  accounts: IAccount[];
+}
+
+export class PreconditionSelector extends React.Component<IPreconditionSelectorProps, IPreconditionSelectorState> {
+  private mounted = false;
+
+  public state: IPreconditionSelectorState = {
+    accounts: [],
+  };
+
+  public componentDidMount() {
+    this.mounted = true;
+    const normalized = this.normalizePrecondition(this.props.precondition);
+    if (normalized !== this.props.precondition) {
+      this.props.onChange(normalized);
+    }
+
+    AccountService.listAccounts('aws').then((accounts) => {
+      if (this.mounted) {
+        this.setState({ accounts });
+      }
+    });
+  }
+
+  public componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  private normalizePrecondition(precondition: IPrecondition): IPrecondition {
+    if (precondition.type && precondition.context && precondition.failPipeline !== undefined) {
+      return precondition;
+    }
+
+    return {
+      ...precondition,
+      context: precondition.context || {},
+      failPipeline: precondition.failPipeline === undefined ? true : precondition.failPipeline,
+      type: precondition.type || listPreconditionTypes()[0]?.key,
+    };
+  }
+
+  private updateType = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    this.props.onChange({
+      ...this.props.precondition,
+      context: null,
+      type: event.target.value,
+    });
+  };
+
+  private updateContextField = (field: string, value: any) => {
+    this.props.onChange({
+      ...this.props.precondition,
+      context: {
+        ...(this.props.precondition.context || {}),
+        [field]: value,
+      },
+    });
+  };
+
+  private updateContext = (context: any) => {
+    this.props.onChange({
+      ...this.props.precondition,
+      context,
+    });
+  };
+
+  private updatePreconditionField = (field: keyof IPrecondition, value: any) => {
+    this.props.onChange({
+      ...this.props.precondition,
+      [field]: value,
+    });
+  };
+
+  private updateClusterSizeAccount = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const credentials = event.target.value;
+    const account = this.state.accounts.find((candidate) => candidate.name === credentials);
+
+    this.props.onChange({
+      ...this.props.precondition,
+      cloudProvider: account?.type || this.props.precondition.cloudProvider,
+      context: {
+        ...(this.props.precondition.context || {}),
+        cluster: undefined,
+        credentials,
+        moniker: undefined,
+      },
+    });
+  };
+
+  private updateClusterSizeRegion = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const context = this.props.precondition.context || {};
+    const currentRegions = context.regions || [];
+    const region = event.target.value;
+    const regions = event.target.checked
+      ? currentRegions.concat(region)
+      : currentRegions.filter((current: string) => current !== region);
+
+    this.props.onChange({
+      ...this.props.precondition,
+      context: {
+        ...context,
+        cluster: undefined,
+        moniker: undefined,
+        regions,
+      },
+    });
+  };
+
+  private updateClusterSizeCluster = ({ clusterName: cluster }: { clusterName: string }) => {
+    const context = this.props.precondition.context || {};
+    const clusterFilter = AppListExtractor.monikerClusterNameFilter(cluster);
+    const moniker = AppListExtractor.getMonikers([this.props.application], clusterFilter)[0];
+
+    this.props.onChange({
+      ...this.props.precondition,
+      context: {
+        ...context,
+        cluster,
+        moniker: moniker ? { ...moniker, sequence: undefined } : undefined,
+      },
+    });
+  };
+
+  private getClusterSizeRegions() {
+    const context = this.props.precondition.context || {};
+    const accountFilter = (cluster: any) =>
+      context.credentials && cluster ? cluster.account === context.credentials : true;
+    return AppListExtractor.getRegions([this.props.application], accountFilter);
+  }
+
+  private getClusterSizeClusters() {
+    const context = this.props.precondition.context || {};
+    const clusterFilter = AppListExtractor.clusterFilterForCredentialsAndRegion(context.credentials, context.regions);
+    return AppListExtractor.getClusters([this.props.application], clusterFilter);
+  }
+
+  private renderClusterSizeFields() {
+    const context = this.props.precondition.context || {};
+    const accounts = this.state.accounts.filter((account) => account.type === 'aws');
+
+    return (
+      <>
+        {!this.props.strategy && (
+          <>
+            <div className="form-group row">
+              <div className="col-sm-3 sm-label-right">Account</div>
+              <div className="col-sm-9">
+                <select
+                  className="form-control input-sm"
+                  name="credentials"
+                  value={context.credentials || ''}
+                  onChange={this.updateClusterSizeAccount}
+                  required={true}
+                >
+                  <option value="">Select...</option>
+                  {accounts.map((account) => (
+                    <option key={account.name} value={account.name}>
+                      {account.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+            <div className="form-group row">
+              <div className="col-sm-3 sm-label-right">Regions</div>
+              <div className="col-sm-9">
+                {!context.credentials && <p className="form-control-static">(Select an Account)</p>}
+                {context.credentials &&
+                  this.getClusterSizeRegions().map((region) => (
+                    <label key={region} className="checkbox-inline">
+                      <input
+                        type="checkbox"
+                        name="regions"
+                        value={region}
+                        checked={(context.regions || []).includes(region)}
+                        onChange={this.updateClusterSizeRegion}
+                      />{' '}
+                      {region}
+                    </label>
+                  ))}
+              </div>
+            </div>
+            <div className="form-group row">
+              <div className="col-sm-3 sm-label-right">Cluster</div>
+              <div className="col-sm-9">
+                <ScopeClusterSelector
+                  clusters={this.getClusterSizeClusters()}
+                  model={context.cluster || ''}
+                  onChange={this.updateClusterSizeCluster}
+                />
+              </div>
+            </div>
+          </>
+        )}
+        <div className="form-group row">
+          <div className="col-sm-3 sm-label-right">
+            Expected Size <HelpField id="pipeline.config.checkPreconditions.expectedSize" />
+          </div>
+          <div className="col-sm-1">
+            <select
+              className="input-sm"
+              name="comparison"
+              value={context.comparison || ''}
+              onChange={(event) => this.updateContextField('comparison', event.target.value)}
+            >
+              {['==', '<', '<=', '>=', '>'].map((comparison) => (
+                <option key={comparison} value={comparison}>
+                  {comparison}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="col-sm-3">
+            <input
+              className="form-control input-sm"
+              min={0}
+              name="expected"
+              required={true}
+              type="number"
+              value={context.expected === undefined ? '' : context.expected}
+              onChange={(event) =>
+                this.updateContextField('expected', event.target.value === '' ? undefined : Number(event.target.value))
+              }
+            />
+          </div>
+        </div>
+        <div className="form-group row">
+          <div className="col-sm-3 sm-label-right">
+            Fail Pipeline <HelpField id="pipeline.config.checkPreconditions.failPipeline" />
+          </div>
+          <div className="col-sm-9">
+            <input
+              type="checkbox"
+              name="failPipeline"
+              checked={!!this.props.precondition.failPipeline}
+              onChange={(event) => this.updatePreconditionField('failPipeline', event.target.checked)}
+            />
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  private renderContextFields() {
+    if (this.props.precondition.type !== 'expression') {
+      if (this.props.precondition.type === 'clusterSize') {
+        return this.renderClusterSizeFields();
+      }
+
+      if (this.props.precondition.type === 'stageStatus') {
+        return (
+          <StageStatusPreconditionConfig
+            preconditionContext={this.props.precondition.context || {}}
+            upstreamStages={this.props.upstreamStages}
+            updatePreconditionContext={this.updateContext}
+          />
+        );
+      }
+
+      return null;
+    }
+
+    return (
+      <>
+        <div className="form-group row">
+          <div className="col-sm-3 sm-label-right">Expression</div>
+          <div className="col-sm-9">
+            <textarea
+              className="form-control input-sm"
+              name="expression"
+              rows={4}
+              value={this.props.precondition.context?.expression || ''}
+              onChange={(event) => this.updateContextField('expression', event.target.value)}
+            />
+          </div>
+        </div>
+        <div className="form-group row">
+          <div className="col-sm-3 sm-label-right">Fail Pipeline</div>
+          <div className="col-sm-9">
+            <input
+              type="checkbox"
+              name="failPipeline"
+              checked={!!this.props.precondition.failPipeline}
+              onChange={(event) => this.updatePreconditionField('failPipeline', event.target.checked)}
+            />
+          </div>
+        </div>
+        <div className="form-group row">
+          <div className="col-sm-3 sm-label-right">Failure Message</div>
+          <div className="col-sm-9">
+            <textarea
+              className="form-control input-sm"
+              name="failureMessage"
+              rows={4}
+              value={this.props.precondition.context?.failureMessage || ''}
+              onChange={(event) => this.updateContextField('failureMessage', event.target.value)}
+            />
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  public render() {
+    const preconditionTypes = listPreconditionTypes();
+    const selectedType = this.props.precondition.type || preconditionTypes[0]?.key;
+
+    return (
+      <div className="precondition-selector">
+        <div className="form-group row">
+          <div className="col-sm-3 sm-label-right" id="type">
+            Check
+          </div>
+          <div className="col-sm-9">
+            <select className="input-sm" name="preconditionType" value={selectedType} onChange={this.updateType}>
+              {preconditionTypes.map((type) => (
+                <option key={type.key} value={type.key}>
+                  {type.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        {this.renderContextFields()}
+      </div>
+    );
+  }
+}

package/src/pipeline/config/preconditions/preconditionTypes.spec.ts

@@ -0,0 +1,21 @@
+import { getPreconditionType, getPreconditionTypeLabel, listPreconditionTypes } from './preconditionTypes';
+
+describe('preconditionTypes', () => {
+  it('lists the built-in precondition types in the legacy selector order', () => {
+    expect(listPreconditionTypes()).toEqual([
+      jasmine.objectContaining({ key: 'clusterSize', label: 'Cluster Size' }),
+      jasmine.objectContaining({ key: 'expression', label: 'Expression' }),
+      jasmine.objectContaining({ key: 'stageStatus', label: 'Stage Status' }),
+    ]);
+  });
+
+  it('returns registered precondition types by key', () => {
+    expect(getPreconditionType('expression')).toEqual(jasmine.objectContaining({ label: 'Expression' }));
+    expect(getPreconditionType('missing')).toBeUndefined();
+  });
+
+  it('uses registered labels and falls back to the legacy capitalized key label', () => {
+    expect(getPreconditionTypeLabel('stageStatus')).toBe('Stage Status');
+    expect(getPreconditionTypeLabel('custom')).toBe('Custom');
+  });
+});

package/src/pipeline/config/preconditions/preconditionTypes.ts

@@ -0,0 +1,31 @@
+import { cloneDeep, find, upperFirst } from 'lodash';
+
+export interface IPreconditionTypeConfig {
+  key: string;
+  label: string;
+}
+
+export interface IPrecondition {
+  cloudProvider?: string;
+  context?: any;
+  failPipeline?: boolean;
+  type?: string;
+}
+
+const PRECONDITION_TYPES: IPreconditionTypeConfig[] = [
+  { label: 'Cluster Size', key: 'clusterSize' },
+  { label: 'Expression', key: 'expression' },
+  { label: 'Stage Status', key: 'stageStatus' },
+];
+
+export function listPreconditionTypes(): IPreconditionTypeConfig[] {
+  return cloneDeep(PRECONDITION_TYPES);
+}
+
+export function getPreconditionType(key?: string): IPreconditionTypeConfig | undefined {
+  return find(PRECONDITION_TYPES, { key });
+}
+
+export function getPreconditionTypeLabel(key?: string): string {
+  return getPreconditionType(key)?.label || upperFirst(key || '');
+}

package/src/pipeline/config/preconditions/types/stageStatus/StageStatusPreconditionConfig.tsx

@@ -1,10 +1,8 @@
-import { module } from 'angular';
 import { get } from 'lodash';
 import React from 'react';
-import { react2angular } from 'react2angular';
 
 import type { IStage } from '../../../../../domain';
-import { FormField, ReactSelectInput, withErrorBoundary } from '../../../../../presentation';
+import { FormField, ReactSelectInput } from '../../../../../presentation';
 import { STATUS_OPTIONS } from './stageStatusOptions';
 
 interface IStageStatusPreconditionConfigProps {
@@ -63,13 +61,3 @@ export function StageStatusPreconditionConfig({
     </div>
   );
 }
-
-export const STAGE_STATUS_PRECONDITION_CONFIG = 'spinnaker.core.stageStatusPreconditionSelector';
-module(STAGE_STATUS_PRECONDITION_CONFIG, []).component(
-  'stageStatusPreconditionConfig',
-  react2angular(withErrorBoundary(StageStatusPreconditionConfig, 'stageStatusPreconditionConfig'), [
-    'preconditionContext',
-    'upstreamStages',
-    'updatePreconditionContext',
-  ]),
-);

package/src/pipeline/config/services/PipelineConfigService.spec.ts

@@ -1,13 +1,9 @@
-import { mock } from 'angular';
-
 import { PipelineConfigService } from './PipelineConfigService';
 import { mockHttpClient } from '../../../api/mock/jasmine';
 import type { IPipeline } from '../../../domain/IPipeline';
 import type { IStage } from '../../../domain/IStage';
 
 describe('PipelineConfigService', () => {
-  let $scope: ng.IScope;
-
   const buildStage = (base: any): IStage => {
     const stageDefaults: IStage = {
       name: 'a',
@@ -45,12 +41,6 @@ describe('PipelineConfigService', () => {
     return defaults;
   };
 
-  beforeEach(
-    mock.inject(($rootScope: ng.IRootScopeService) => {
-      $scope = $rootScope.$new();
-    }),
-  );
-
   describe('savePipeline', () => {
     it('clears isNew flags, stage name if not present', async () => {
       const http = mockHttpClient();
@@ -88,10 +78,9 @@ describe('PipelineConfigService', () => {
 
       http.expectDELETE('/pipelines/foo/bar%5Bbaz%5D').respond(200, '');
 
-      PipelineConfigService.deletePipeline('foo', pipeline, 'bar[baz]');
-
-      $scope.$digest();
+      const deletion = PipelineConfigService.deletePipeline('foo', pipeline, 'bar[baz]');
       await http.flush();
+      await deletion;
     });
   });
 
@@ -107,11 +96,9 @@ describe('PipelineConfigService', () => {
       ];
       http.expectGET('/applications/app/pipelineConfigs').respond(200, fromServer);
 
-      PipelineConfigService.getPipelinesForApplication('app').then((pipelines: IPipeline[]) => {
-        result = pipelines;
-      });
-      $scope.$digest();
+      const pipelinesPromise = PipelineConfigService.getPipelinesForApplication('app');
       await http.flush();
+      result = await pipelinesPromise;
 
       expect(result.map((r) => r.name)).toEqual(['first', 'second', 'third', 'last']);
     });
@@ -132,8 +119,9 @@ describe('PipelineConfigService', () => {
         return Promise.resolve(undefined);
       });
 
-      PipelineConfigService.getPipelinesForApplication('app');
+      const pipelinesPromise = PipelineConfigService.getPipelinesForApplication('app');
       await http.flush();
+      await pipelinesPromise;
 
       expect(posted.length).toEqual(3);
       expect(posted[0]).toEqual(jasmine.objectContaining({ name: 'first', index: 0 }));
@@ -150,12 +138,9 @@ describe('PipelineConfigService', () => {
       let result: IPipeline = null;
       http.expectGET('/applications/foo/pipelineConfigs/bar%20name').respond(200, pipeline);
 
-      PipelineConfigService.getPipelineForApplication('foo', 'bar name').then((pipelines: IPipeline) => {
-        result = pipelines;
-      });
-
-      $scope.$digest();
+      const pipelinePromise = PipelineConfigService.getPipelineForApplication('foo', 'bar name');
       await http.flush();
+      result = await pipelinePromise;
       expect(result).toEqual(pipeline);
     });
   });

package/src/pipeline/config/services/PipelineConfigService.ts

@@ -1,5 +1,4 @@
 import { cloneDeep, sortBy, uniq } from 'lodash';
-import { $q } from 'ngimport';
 
 import { REST } from '../../../api/ApiService';
 import { AuthenticationService } from '../../../authentication/AuthenticationService';
@@ -9,6 +8,14 @@ import type { IStage } from '../../../domain/IStage';
 
 import { PipelineTemplateV2Service } from '../templates/v2/pipelineTemplateV2.service';
 
+function allPromises<T>(promises: Array<PromiseLike<T>>): Promise<T[]> {
+  return Promise.all(promises);
+}
+
+function resolvePromise<T>(value: T): Promise<T> {
+  return Promise.resolve(value);
+}
+
 export interface ITriggerPipelineResponse {
   eventId: string;
   ref: string;
@@ -20,7 +27,7 @@ export class PipelineConfigService {
     return `${applicationName}:${pipelineName}`;
   }
 
-  public static getPipelinesForApplication(applicationName: string): PromiseLike<IPipeline[]> {
+  public static getPipelinesForApplication(applicationName: string): Promise<IPipeline[]> {
     return REST('/applications')
       .path(applicationName, 'pipelineConfigs')
       .get()
@@ -30,11 +37,11 @@ export class PipelineConfigService {
       });
   }
 
-  public static getPipelineForApplication(applicationName: string, pipelineName: string): PromiseLike<IPipeline> {
+  public static getPipelineForApplication(applicationName: string, pipelineName: string): Promise<IPipeline> {
     return REST('/applications').path(applicationName, 'pipelineConfigs', pipelineName).get();
   }
 
-  public static getStrategiesForApplication(applicationName: string): PromiseLike<IPipeline[]> {
+  public static getStrategiesForApplication(applicationName: string): Promise<IPipeline[]> {
     return REST('/applications')
       .path(applicationName, 'strategyConfigs')
       .get()
@@ -44,17 +51,17 @@ export class PipelineConfigService {
       });
   }
 
-  public static getHistory(id: string, isStrategy: boolean, count = 20): PromiseLike<IPipeline[]> {
+  public static getHistory(id: string, isStrategy: boolean, count = 20): Promise<IPipeline[]> {
     const endpoint = isStrategy ? 'strategyConfigs' : 'pipelineConfigs';
     return REST(endpoint).path(id, 'history').query({ limit: count }).get();
   }
 
-  public static deletePipeline(applicationName: string, pipeline: IPipeline, pipelineName: string): PromiseLike<void> {
+  public static deletePipeline(applicationName: string, pipeline: IPipeline, pipelineName: string): Promise<void> {
     const endpoint = pipeline.strategy ? 'strategies' : 'pipelines';
     return REST(endpoint).path(applicationName, pipelineName.trim()).delete();
   }
 
-  public static savePipeline(toSave: IPipeline): PromiseLike<void> {
+  public static savePipeline(toSave: IPipeline): Promise<void> {
     let pipeline = cloneDeep(toSave);
     delete pipeline.isNew;
     pipeline.name = pipeline.name.trim();
@@ -78,7 +85,7 @@ export class PipelineConfigService {
     application: string,
     idsToIndices: { [key: string]: number },
     isStrategy = false,
-  ): PromiseLike<void> {
+  ): Promise<void> {
     const type = isStrategy ? 'strategies' : 'pipelines';
     return REST('/actions').path(type, 'reorder').post({
       application,
@@ -91,14 +98,14 @@ export class PipelineConfigService {
     pipeline: IPipeline,
     currentName: string,
     newName: string,
-  ): PromiseLike<void> {
+  ): Promise<void> {
     this.configViewStateCache.remove(this.buildViewStateCacheKey(applicationName, currentName));
     pipeline.name = newName.trim();
     const endpoint = pipeline.strategy ? 'strategies' : 'pipelines';
     return REST(endpoint).path(pipeline.id).put(pipeline);
   }
 
-  public static triggerPipeline(applicationName: string, pipelineName: string, body: any = {}): PromiseLike<string> {
+  public static triggerPipeline(applicationName: string, pipelineName: string, body: any = {}): Promise<string> {
     body.user = AuthenticationService.getAuthenticatedUser().name;
     return REST('/pipelines/v2')
       .path(applicationName, pipelineName)
@@ -177,11 +184,11 @@ export class PipelineConfigService {
     return uniq(upstreamStages);
   }
 
-  private static sortPipelines(pipelines: IPipeline[]): PromiseLike<IPipeline[]> {
+  private static sortPipelines(pipelines: IPipeline[]): Promise<IPipeline[]> {
     const sorted = sortBy(pipelines, ['index', 'name']);
 
     // if there are pipelines with a bad index, fix that
-    const toReindex: Array<PromiseLike<void>> = [];
+    const toReindex: Array<Promise<void>> = [];
     if (sorted && sorted.length) {
       sorted.forEach((pipeline, index) => {
         if (pipeline.index !== index) {
@@ -190,9 +197,9 @@ export class PipelineConfigService {
         }
       });
       if (toReindex.length) {
-        return $q.all(toReindex).then(() => sorted);
+        return allPromises(toReindex).then(() => sorted);
       }
     }
-    return $q.resolve(sorted);
+    return resolvePromise(sorted);
   }
 }

package/src/pipeline/config/stages/StageConfigWrapper.tsx

@@ -6,11 +6,8 @@ export interface IStageConfigWrapperProps extends IStageConfigProps {
   component: React.ComponentType<any>;
 }
 
-/* This wrapper component exists so that StageConfig components don't have to manually
- * call this.forceUpdate() after updating a stage field. The only reason it is currently
- * needed is because the stage config object is managed in angular, above the render root.
- * When it is eventually migrated to react, it will simply be part of the state of some
- * parent component and this wrapper can be removed.
+/* This wrapper refreshes stage config components after updateStageField mutates the
+ * shared stage object.
  */
 
 export class StageConfigWrapper extends React.Component<IStageConfigWrapperProps> {

package/src/pipeline/config/stages/StageName.tsx

@@ -1,4 +1,3 @@
-import { module } from 'angular';
 /*
  * Copyright 2018 Schibsted ASA.
  *
@@ -16,10 +15,8 @@ import { module } from 'angular';
  * limitations under the License.
  */
 import React from 'react';
-import { react2angular } from 'react2angular';
 
 import type { IStage } from '../../../domain';
-import { withErrorBoundary } from '../../../presentation/SpinErrorBoundary';
 
 export interface IStageNameProps {
   stages: IStage[];
@@ -37,10 +34,3 @@ const nameFromRefId = (stages: IStage[], refId: string | number) => {
 export const StageName: React.SFC<IStageNameProps> = (props) => {
   return <span>{nameFromRefId(props.stages, props.refId)}</span>;
 };
-
-export const STAGE_NAME = 'spinnaker.core.artifact.stageName.component';
-
-module(STAGE_NAME, []).component(
-  'stageName',
-  react2angular(withErrorBoundary(StageName, 'stageName'), ['stages', 'refId']),
-);