@spinnaker/amazon 0.0.0-2025.1-0

package/src/pipeline/stages/deployCloudFormation/CloudFormationChangeSetInfo.tsx

@@ -0,0 +1,80 @@
+import { module } from 'angular';
+import React, { useState } from 'react';
+import { react2angular } from 'react2angular';
+
+import type { IStage, IStageConfigProps } from '@spinnaker/core';
+import { CheckboxInput, ReactSelectInput, StageConfigField, TextInput, withErrorBoundary } from '@spinnaker/core';
+
+export interface ICloudFormationChangeSetInfoProps {
+  stage: IStage[];
+  stageconfig: IStageConfigProps;
+}
+
+export const CloudFormationChangeSetInfo = (props: ICloudFormationChangeSetInfoProps) => {
+  const { stage, stageconfig } = props;
+  const [changeSetName, setChangeSetName] = useState(
+    (stage as any).changeSetName ? (stage as any).changeSetName : "ChangeSet-${execution['id']}",
+  );
+  const [executeChangeSet, setExecuteChangeSet] = useState((stage as any).executeChangeSet);
+  const [actionOnReplacement, setActionOnReplacement] = useState((stage as any).actionOnReplacement);
+
+  const modifyChangeSetName = (value: string) => {
+    setChangeSetName(value);
+    stageconfig.updateStageField({ changeSetName: value });
+  };
+
+  const toggleExecuteChangeSet = (checked: boolean) => {
+    setExecuteChangeSet(checked);
+    stageconfig.updateStageField({ executeChangeSet: checked });
+  };
+
+  const modifyActionOnReplacement = (value: string) => {
+    setActionOnReplacement(value);
+    stageconfig.updateStageField({ actionOnReplacement: value });
+  };
+
+  const actionOnReplacementOptions = [
+    { value: 'ask', label: 'ask' },
+    { value: 'skip', label: 'skip it' },
+    { value: 'execute', label: 'execute it' },
+    { value: 'fail', label: 'fail stage' },
+  ];
+
+  return (
+    <div>
+      <hr />
+      <h4>ChangeSet Configuration</h4>
+      <StageConfigField label="ChangeSet Name">
+        <TextInput
+          className="form-control"
+          type="text"
+          value={changeSetName}
+          onChange={(e) => modifyChangeSetName(e.target.value)}
+        />
+      </StageConfigField>
+      <StageConfigField label="Execute ChangeSet">
+        <CheckboxInput checked={executeChangeSet} onChange={(e) => toggleExecuteChangeSet(e.target.checked)} />
+      </StageConfigField>
+      {executeChangeSet && (
+        <StageConfigField label="If ChangeSet contains a replacement" help-key="aws.cloudformation.changeSet.options">
+          <ReactSelectInput
+            clearable={false}
+            value={actionOnReplacement}
+            options={actionOnReplacementOptions}
+            onChange={(e) => modifyActionOnReplacement(e.target.value)}
+          />
+        </StageConfigField>
+      )}
+    </div>
+  );
+};
+
+export const CLOUD_FORMATION_CHANGE_SET_INFO = 'spinnaker.amazon.cloudformation.changetset.info.component';
+
+module(CLOUD_FORMATION_CHANGE_SET_INFO, []).component(
+  'cloudFormationChangeSetInfo',
+  react2angular(withErrorBoundary(CloudFormationChangeSetInfo, 'cloudFormationChangeSetInfo'), [
+    'stage',
+    'stageconfig',
+  ]),
+);

package/src/pipeline/stages/deployCloudFormation/cloudFormationTemplateEntry.component.ts

@@ -0,0 +1,46 @@
+import type { IComponentOptions, IController, IScope } from 'angular';
+import { module } from 'angular';
+import { yamlDocumentsToString } from '@spinnaker/core';
+
+class CloudFormationTemplateController implements IController {
+  public command: any;
+  public templateBody: any;
+  public rawTemplateBody: string;
+
+  public static $inject = ['$scope'];
+  constructor(private $scope: IScope) {
+    'ngInject';
+  }
+
+  public $onInit = (): void => {
+    if (typeof this.command.templateBody === 'string') {
+      this.rawTemplateBody = this.command.templateBody;
+    } else {
+      this.rawTemplateBody = yamlDocumentsToString(this.command.templateBody);
+    }
+  };
+
+  public handleChange = (rawTemplateBody: string, templateBody: any): void => {
+    this.command.templateBody = templateBody || rawTemplateBody;
+    this.templateBody = templateBody || rawTemplateBody;
+    this.rawTemplateBody = rawTemplateBody;
+    this.$scope.$applyAsync();
+  };
+}
+
+const cloudFormationTemplateEntryComponent: IComponentOptions = {
+  bindings: { command: '<', templateBody: '<' },
+  controller: CloudFormationTemplateController,
+  controllerAs: 'ctrl',
+  template: `
+    <yaml-editor
+      value="ctrl.rawTemplateBody"
+      on-change="ctrl.handleChange"
+    ></yaml-editor>`,
+};
+
+export const CLOUDFORMATION_TEMPLATE_ENTRY = 'spinnaker.amazon.cloudformation.entry.component';
+module(CLOUDFORMATION_TEMPLATE_ENTRY, []).component(
+  'cloudFormationTemplateEntry',
+  cloudFormationTemplateEntryComponent,
+);

package/src/pipeline/stages/deployCloudFormation/deployCloudFormationExecutionDetails.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import type { IExecutionDetailsSectionProps } from '@spinnaker/core';
+import { ExecutionDetailsSection, ExecutionStepDetails, StageFailureMessage } from '@spinnaker/core';
+
+export class DeployExecutionDetails extends React.Component<IExecutionDetailsSectionProps> {
+  public static title = 'Task Status';
+
+  constructor(props: IExecutionDetailsSectionProps) {
+    super(props);
+  }
+
+  public render() {
+    const { stage, current, name } = this.props;
+
+    return (
+      <ExecutionDetailsSection name={name} current={current}>
+        <ExecutionStepDetails item={stage} />
+        <StageFailureMessage stage={stage} message={stage.failureMessage} />
+      </ExecutionDetailsSection>
+    );
+  }
+}

package/src/pipeline/stages/deployCloudFormation/deployCloudFormationStackConfig.controller.ts

@@ -0,0 +1,84 @@
+import type { IController, IScope } from 'angular';
+import { extend } from 'lodash';
+import { $q } from 'ngimport';
+
+import type { IAccountDetails, IArtifact, IExpectedArtifact } from '@spinnaker/core';
+import { AccountService, ExpectedArtifactSelectorViewController, NgGenericArtifactDelegate } from '@spinnaker/core';
+
+export class DeployCloudFormationStackConfigController implements IController {
+  public state = {
+    loaded: false,
+  };
+
+  public textSource = 'text';
+  public artifactSource = 'artifact';
+  public sources = [this.textSource, this.artifactSource];
+  public showClusterSelect = false;
+  public accounts: IAccountDetails[];
+
+  public cloudFormationStackArtifactDelegate: NgGenericArtifactDelegate;
+  public cloudFormationStackArtifactController: ExpectedArtifactSelectorViewController;
+
+  public static $inject = ['$scope'];
+  constructor(private $scope: IScope) {
+    const dataToFetch = {
+      accounts: AccountService.getAllAccountDetailsForProvider('aws'),
+      artifactAccounts: AccountService.getArtifactAccounts(),
+    };
+    $q.all(dataToFetch).then((backingData) => {
+      const { accounts, artifactAccounts } = backingData;
+      this.accounts = accounts;
+      this.state.loaded = true;
+      this.cloudFormationStackArtifactDelegate.setAccounts(artifactAccounts);
+      this.cloudFormationStackArtifactController.updateAccounts(
+        this.cloudFormationStackArtifactDelegate.getSelectedExpectedArtifact(),
+      );
+    });
+    this.cloudFormationStackArtifactDelegate = new NgGenericArtifactDelegate($scope, 'stack');
+    this.cloudFormationStackArtifactController = new ExpectedArtifactSelectorViewController(
+      this.cloudFormationStackArtifactDelegate,
+    );
+  }
+
+  public canShowAccountSelect() {
+    return (
+      this.$scope.stage.source === this.artifactSource &&
+      !this.$scope.showCreateArtifactForm &&
+      this.cloudFormationStackArtifactController.accountsForArtifact.length > 1
+    );
+  }
+
+  public toggleChangeSet() {
+    this.$scope.stage.isChangeSet = !this.$scope.stage.isChangeSet;
+  }
+
+  public onStackArtifactEdited = (artifact: IArtifact) => {
+    this.$scope.$applyAsync(() => {
+      this.$scope.stage.stackArtifactId = null;
+      this.$scope.stage.stackArtifact = artifact;
+    });
+  };
+
+  public onStackArtifactSelected = (expectedArtifact: IExpectedArtifact) => {
+    this.onChangeStackArtifactId(expectedArtifact.id);
+  };
+
+  public onChangeStackArtifactId = (artifactId: string) => {
+    this.$scope.$applyAsync(() => {
+      this.$scope.stage.stackArtifactId = artifactId;
+      this.$scope.stage.stackArtifact = null;
+    });
+  };
+
+  public onStackArtifactAccountSelected = (stackArtifactAccount: string) => {
+    this.$scope.$applyAsync(() => {
+      this.$scope.stage.stackArtifactAccount = stackArtifactAccount;
+    });
+  };
+
+  public updatePipeline = (changes: any) => {
+    this.$scope.$applyAsync(() => {
+      extend(this.$scope.pipeline, changes);
+    });
+  };
+}

package/src/pipeline/stages/deployCloudFormation/deployCloudFormationStackConfig.html

@@ -0,0 +1,84 @@
+<div ng-if="ctrl.state.loaded" class="clearfix">
+  <div class="container-fluid form-horizontal">
+    <h4>Basic Settings</h4>
+    <div ng-if="!pipeline.strategy">
+      <account-region-cluster-selector
+        application="application"
+        component="stage"
+        accounts="ctrl.accounts"
+        show-cluster-select="ctrl.showClusterSelect"
+      >
+      </account-region-cluster-selector>
+    </div>
+    <h4>Template Configuration</h4>
+    <ng-form name="amazonCloudFormationTemplateSource">
+      <stage-config-field label="Stack name">
+        <label class="sm-label-right">
+          <input type="text" class="form-control input-sm" required ng-model="stage.stackName" />
+        </label>
+        <br />
+        <label>
+          <input type="checkbox" ng-checked="stage.isChangeSet" ng-click="ctrl.toggleChangeSet()" />
+          <strong>Create CloudFormation ChangeSet</strong>
+        </label>
+      </stage-config-field>
+
+      <stage-config-field label="IAM role ARN">
+        <label class="sm-label-right">
+          <input type="text" class="form-control input-sm" ng-model="stage.roleARN" />
+        </label>
+      </stage-config-field>
+      <stage-config-field label="Source" help-key="aws.cloudformation.source">
+        <label class="sm-label-right">
+          <input type="radio" ng-model="ctrl.$scope.stage.source" value="{{ctrl.textSource}}" />
+          {{ ctrl.textSource | robotToHuman }}
+          <span ng-if="stage.source === ctrl.textSource"> </span> </label
+        ><br />
+        <label class="sm-label-right">
+          <input type="radio" ng-model="ctrl.$scope.stage.source" value="{{ctrl.artifactSource}}" />
+          {{ ctrl.artifactSource | robotToHuman }}
+        </label>
+      </stage-config-field>
+    </ng-form>
+    <cloud-formation-template-entry
+      ng-if="stage.source === ctrl.textSource"
+      templateBody="stage.templateBody"
+      command="stage"
+    >
+    </cloud-formation-template-entry>
+    <stage-artifact-selector-delegate
+      ng-if="ctrl.$scope.stage.source === ctrl.artifactSource"
+      artifact="stage.stackArtifact"
+      excluded-artifact-type-patterns="[]"
+      expected-artifact-id="stage.stackArtifactId"
+      field-columns="8"
+      help-key="'aws.cloudformation.expectedArtifact'"
+      label="'Expected Artifact'"
+      on-artifact-edited="ctrl.onStackArtifactEdited"
+      on-expected-artifact-selected="ctrl.onStackArtifactSelected"
+      pipeline="pipeline"
+      stage="stage"
+    >
+    </stage-artifact-selector-delegate>
+    <div ng-if="stage.isChangeSet">
+      <cloud-formation-change-set-info stage="stage" stageconfig="stageConfigCtrl"> </cloud-formation-change-set-info>
+    </div>
+    <hr />
+    <stage-config-field label="Parameters" field-columns="6">
+      <map-editor model="ctrl.$scope.stage.parameters" add-button-label="Add parameter"></map-editor>
+    </stage-config-field>
+    <hr />
+    <stage-config-field label="Tags" field-columns="6">
+      <map-editor model="ctrl.$scope.stage.tags" add-button-label="Add tag"></map-editor>
+    </stage-config-field>
+    <hr />
+    <stage-config-field label="Capabilities" field-columns="6">
+      <ui-select multiple ng-model="stage.capabilities" class="form-control input-sm">
+        <ui-select-match>{{$item}}</ui-select-match>
+        <ui-select-choices repeat="capability in ['CAPABILITY_IAM', 'CAPABILITY_NAMED_IAM', 'CAPABILITY_AUTO_EXPAND']">
+          <span>{{ capability }}</span>
+        </ui-select-choices>
+      </ui-select>
+    </stage-config-field>
+  </div>
+</div>

package/src/pipeline/stages/deployCloudFormation/deployCloudFormationStackStage.ts

@@ -0,0 +1,37 @@
+import { module } from 'angular';
+
+import type { IStage } from '@spinnaker/core';
+import { ArtifactReferenceService, ExpectedArtifactService, Registry } from '@spinnaker/core';
+
+import { DeployExecutionDetails } from './deployCloudFormationExecutionDetails';
+import { DeployCloudFormationStackConfigController } from './deployCloudFormationStackConfig.controller';
+import { EvaluateCloudFormationChangeSetExecutionDetails } from './evaluateCloudFormationChangeSetExecutionDetails';
+import { EvaluateCloudFormationChangeSetExecutionLabel } from './evaluateCloudFormationChangeSetExecutionLabel';
+import { EvaluateCloudFormationChangeSetExecutionMarkerIcon } from './evaluateCloudFormationChangeSetExecutionMarkerIcon';
+
+export const DEPLOY_CLOUDFORMATION_STACK_STAGE = 'spinnaker.amazon.pipeline.stages.deployCloudFormationStage';
+
+module(DEPLOY_CLOUDFORMATION_STACK_STAGE, [])
+  .config(() => {
+    Registry.pipeline.registerStage({
+      label: 'Deploy (CloudFormation Stack)',
+      description: 'Deploy a CloudFormation Stack',
+      key: 'deployCloudFormation',
+      cloudProvider: 'aws',
+      templateUrl: require('./deployCloudFormationStackConfig.html'),
+      controller: 'DeployCloudFormationStackConfigController',
+      controllerAs: 'ctrl',
+      useCustomTooltip: true,
+      executionDetailsSections: [DeployExecutionDetails, EvaluateCloudFormationChangeSetExecutionDetails],
+      executionLabelComponent: EvaluateCloudFormationChangeSetExecutionLabel,
+      producesArtifacts: true,
+      supportsCustomTimeout: true,
+      validators: [],
+      markerIcon: EvaluateCloudFormationChangeSetExecutionMarkerIcon,
+      accountExtractor: (stage: IStage): string[] => (stage.account ? [stage.account] : []),
+      configAccountExtractor: (stage: any): string[] => (stage.account ? [stage.account] : []),
+      artifactExtractor: ExpectedArtifactService.accumulateArtifacts(['stackArtifactId', 'requiredArtifactIds']),
+      artifactRemover: ArtifactReferenceService.removeArtifactFromFields(['stackArtifactId', 'requiredArtifactIds']),
+    });
+  })
+  .controller('DeployCloudFormationStackConfigController', DeployCloudFormationStackConfigController);

package/src/pipeline/stages/deployCloudFormation/evaluateCloudFormationChangeSetExecution.service.ts

@@ -0,0 +1,33 @@
+import { module } from 'angular';
+import type { ExecutionService } from '@spinnaker/core';
+import { EXECUTION_SERVICE } from '@spinnaker/core';
+import type { IExecution, IExecutionStage } from '@spinnaker/core';
+import type { Application } from '@spinnaker/core';
+
+export class EvaluateCloudFormationChangeSetExecutionService {
+  public static $inject = ['executionService'];
+  constructor(private executionService: ExecutionService) {}
+
+  public evaluateExecution(
+    application: Application,
+    execution: IExecution,
+    stage: IExecutionStage,
+    changeSetExecutionChoice: string,
+  ): PromiseLike<void> {
+    const matcher = (result: IExecution) => {
+      const match = result.stages.find((test: { id: any }) => test.id === stage.id);
+      return match && match.status !== 'RUNNING';
+    };
+    return this.executionService
+      .patchExecution(execution.id, stage.id, { changeSetExecutionChoice })
+      .then(() => this.executionService.waitUntilExecutionMatches(execution.id, matcher))
+      .then((updated: any) => this.executionService.updateExecution(application, updated));
+  }
+}
+
+export const AWS_EVALUATE_CLOUD_FORMATION_CHANGE_SET_EXECUTION_SERVICE =
+  'spinnaker.amazon.deployCloudFormation.service';
+module(AWS_EVALUATE_CLOUD_FORMATION_CHANGE_SET_EXECUTION_SERVICE, [EXECUTION_SERVICE]).service(
+  'evaluateCloudFormationChangeSetExecutionService',
+  EvaluateCloudFormationChangeSetExecutionService,
+);

package/src/pipeline/stages/deployCloudFormation/evaluateCloudFormationChangeSetExecutionApproval.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+
+import type { Application, IExecution, IExecutionStage } from '@spinnaker/core';
+import { Spinner } from '@spinnaker/core';
+import { AwsReactInjector } from '../../../reactShims';
+
+export interface IEvaluateCloudFormationChangeSetExecutionApprovalProps {
+  execution: IExecution;
+  stage: IExecutionStage;
+  application: Application;
+}
+
+export interface IEvaluateCloudFormationChangeSetExecutionApprovalState {
+  submitting: boolean;
+  judgmentDecision: string;
+  error: boolean;
+}
+
+export const EvaluateCloudFormationChangeSetExecutionApproval = (
+  props: IEvaluateCloudFormationChangeSetExecutionApprovalProps,
+) => {
+  const { execution, stage, application } = props;
+  const [submitting, setSubmitting] = useState(false);
+  const [judgmentDecision, setJudgmentDecision] = useState('');
+  const [error, setError] = useState(false);
+
+  const provideJudgment = (judgmentDecision: string) => {
+    setSubmitting(true);
+    setJudgmentDecision(judgmentDecision);
+    setError(false);
+    AwsReactInjector.evaluateCloudFormationChangeSetExecutionService.evaluateExecution(
+      application,
+      execution,
+      stage,
+      judgmentDecision,
+    );
+  };
+
+  const isSubmitting = (decision: string): boolean => {
+    return stage.judgmentStatus === decision || (submitting && judgmentDecision === decision);
+  };
+
+  const handleContinueClick = (): void => {
+    provideJudgment('skip');
+  };
+
+  const handleFailClick = (): void => {
+    provideJudgment('fail');
+  };
+
+  const handleExecuteClick = (): void => {
+    provideJudgment('execute');
+  };
+
+  return (
+    <div>
+      <div>
+        <p>
+          This ChangeSet contains a replacement, which means there will be <b>potential data loss</b> when executed.
+        </p>
+        <p>How do you want to proceed?</p>
+        <div className="action-buttons">
+          <button className="btn btn-danger" onClick={handleExecuteClick} disabled={submitting}>
+            {isSubmitting('Execute') && <Spinner mode="circular" />}
+            {stage.context.stopButtonLabel || 'Execute'}
+          </button>
+          <button className="btn btn-primary" disabled={submitting} onClick={handleContinueClick}>
+            {isSubmitting('Skip') && <Spinner mode="circular" />}
+            {stage.context.skipButtonLabel || 'Skip'}
+          </button>
+          <button className="btn btn-primary" disabled={submitting} onClick={handleFailClick}>
+            {isSubmitting('Fail') && <Spinner mode="circular" />}
+            {stage.context.FailButtonLabel || 'Fail'}
+          </button>
+        </div>
+      </div>
+      {error && <div className="error-message">There was an error recording your decision. Please try again.</div>}
+    </div>
+  );
+};

package/src/pipeline/stages/deployCloudFormation/evaluateCloudFormationChangeSetExecutionDetails.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+import type { IExecutionDetailsSectionProps } from '@spinnaker/core';
+import { ExecutionDetailsSection } from '@spinnaker/core';
+import { EvaluateCloudFormationChangeSetExecutionApproval } from './evaluateCloudFormationChangeSetExecutionApproval';
+
+export class EvaluateCloudFormationChangeSetExecutionDetails extends React.Component<IExecutionDetailsSectionProps> {
+  public static title = 'Change Set Execution';
+
+  constructor(props: IExecutionDetailsSectionProps) {
+    super(props);
+  }
+
+  public render() {
+    const { application, execution, stage, current, name } = this.props;
+    const hasReplacement = stage.context.changeSetContainsReplacement;
+    const askAction = hasReplacement && stage.isRunning && stage.context.actionOnReplacement === 'ask';
+    const isChangeSet = stage.context.isChangeSet;
+
+    return (
+      <ExecutionDetailsSection name={name} current={current}>
+        {askAction ? (
+          <EvaluateCloudFormationChangeSetExecutionApproval
+            key={stage.refId}
+            application={application}
+            execution={execution}
+            stage={stage}
+          />
+        ) : (
+          <div>
+            {isChangeSet ? (
+              <div>
+                <dl className="no-margin">
+                  <dt>ChangeSet Name</dt>
+                  <dd>{stage.context.changeSetName}</dd>
+                  <dt>Replacement</dt>
+                  <dd>{String(hasReplacement)}</dd>
+                  {stage.context.changeSetExecutionChoice && (
+                    <div>
+                      <dt>Judgment</dt>
+                      <dd>{stage.context.changeSetExecutionChoice}</dd>
+                      <dt>Judged By</dt>
+                      <dd>{stage.context.lastModifiedBy}</dd>
+                    </div>
+                  )}
+                </dl>
+              </div>
+            ) : (
+              <div>No changeSets found</div>
+            )}
+          </div>
+        )}
+      </ExecutionDetailsSection>
+    );
+  }
+}

package/src/pipeline/stages/deployCloudFormation/evaluateCloudFormationChangeSetExecutionLabel.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+import type { IExecution, IExecutionStageSummary } from '@spinnaker/core';
+import type { Application } from '@spinnaker/core';
+import { ExecutionBarLabel, HoverablePopover } from '@spinnaker/core';
+
+import { EvaluateCloudFormationChangeSetExecutionApproval } from './evaluateCloudFormationChangeSetExecutionApproval';
+
+export interface IEvaluateCloudFormationChangeSetExecutionProps {
+  stage: IExecutionStageSummary;
+  execution: IExecution;
+  application: Application;
+  executionMarker: boolean;
+}
+
+export class EvaluateCloudFormationChangeSetExecutionLabel extends React.Component<
+  IEvaluateCloudFormationChangeSetExecutionProps
+> {
+  public render() {
+    if (!this.props.executionMarker) {
+      return <ExecutionBarLabel {...this.props} />;
+    }
+
+    const { stage } = this.props;
+    if (
+      stage.isRunning &&
+      stage.stages[0].context.changeSetContainsReplacement &&
+      stage.stages[0].context.actionOnReplacement === 'ask'
+    ) {
+      const template = (
+        <div>
+          <div>
+            <b>{stage.name}</b>
+          </div>
+
+          <EvaluateCloudFormationChangeSetExecutionApproval
+            stage={stage.masterStage}
+            application={this.props.application}
+            execution={this.props.execution}
+          />
+        </div>
+      );
+      return <HoverablePopover template={template}>{this.props.children}</HoverablePopover>;
+    }
+    const tooltip = <Tooltip id={stage.id}>{stage.name}</Tooltip>;
+    return (
+      <OverlayTrigger placement="top" overlay={tooltip}>
+        <span>{this.props.children}</span>
+      </OverlayTrigger>
+    );
+  }
+}

package/src/pipeline/stages/deployCloudFormation/evaluateCloudFormationChangeSetExecutionMarkerIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { IExecutionMarkerIconProps } from '@spinnaker/core';
+
+export class EvaluateCloudFormationChangeSetExecutionMarkerIcon extends React.Component<IExecutionMarkerIconProps> {
+  constructor(props: IExecutionMarkerIconProps) {
+    super(props);
+  }
+
+  public render() {
+    if (
+      this.props.stage.isRunning &&
+      this.props.stage.stages[0].context.changeSetContainsReplacement &&
+      this.props.stage.stages[0].context.actionOnReplacement === 'ask'
+    ) {
+      this.props.stage.requiresAttention = true;
+      return <span className="fa fa-child" />;
+    }
+    return null;
+  }
+}