@spinnaker/core 2026.2.2 → 2026.3.0

package/src/pipeline/config/stages/pipeline/pipelineStage.spec.ts

@@ -0,0 +1,30 @@
+import '../../../../bootstrap/runtimeInitializers';
+import { ExecutionDetailsTasks } from '../common/ExecutionDetailsTasks';
+import { Registry } from '../../../../registry';
+import { PipelineParametersExecutionDetails } from './PipelineParametersExecutionDetails';
+import { PipelineStageConfig } from './PipelineStageConfig';
+import { PipelineStageExecutionDetails } from './PipelineStageExecutionDetails';
+import { pipelineStage } from './pipelineStage';
+
+const registeredPipelineStage = Registry.pipeline.getStageConfig({ type: 'pipeline' } as any) as any;
+
+describe('pipelineStage', () => {
+  it('registers the Pipeline stage as a React stage config', () => {
+    expect(registeredPipelineStage).toEqual(
+      jasmine.objectContaining({
+        label: 'Pipeline',
+        description: 'Runs a pipeline',
+        key: 'pipeline',
+        restartable: true,
+        component: PipelineStageConfig,
+        executionDetailsSections: [
+          PipelineStageExecutionDetails,
+          PipelineParametersExecutionDetails,
+          ExecutionDetailsTasks,
+        ],
+        supportsCustomTimeout: true,
+        validators: [{ type: 'requiredField', fieldName: 'pipeline' }],
+      }),
+    );
+  });
+});

package/src/pipeline/config/stages/preconfiguredJob/preconfiguredJob.reader.ts

@@ -20,7 +20,7 @@ export interface IPreconfiguredJob {
 }
 
 export const PreconfiguredJobReader = {
-  list(): PromiseLike<IPreconfiguredJob[]> {
+  list(): Promise<IPreconfiguredJob[]> {
     return REST('/jobs/preconfigured').useCache().get();
   },
 };

package/src/pipeline/config/stages/preconfiguredJob/preconfiguredJobStage.spec.ts

@@ -0,0 +1,49 @@
+import { Registry } from '../../../../registry/Registry';
+import { ExecutionDetailsTasks } from '../common';
+import { PreconfiguredJobExecutionDetails } from './PreconfiguredJobExecutionDetails';
+import { PreconfiguredJobStageConfig } from './PreconfiguredJobStageConfig';
+import { PreconfiguredJobReader } from './preconfiguredJob.reader';
+import { makePreconfiguredJobStage, registerPreconfiguredJobStages } from './preconfiguredJobStage';
+
+describe('Preconfigured Job stage registration', () => {
+  it('builds the preconfigured job stage skeleton', () => {
+    const stage = makePreconfiguredJobStage('myJob');
+
+    expect(stage).toEqual(
+      jasmine.objectContaining({
+        label: '',
+        description: '',
+        key: 'myJob',
+        alias: 'preconfiguredJob',
+        addAliasToConfig: true,
+        restartable: true,
+        defaults: { parameters: {} },
+        component: PreconfiguredJobStageConfig,
+        executionDetailsSections: [PreconfiguredJobExecutionDetails, ExecutionDetailsTasks],
+        configuration: {
+          waitForCompletion: true,
+          parameters: [],
+        },
+        producesArtifacts: false,
+      }),
+    );
+    expect((stage as any).executionDetailsSections).toBeDefined();
+  });
+
+  it('registers only non-custom preconfigured jobs', async () => {
+    spyOn(PreconfiguredJobReader, 'list').and.returnValue(
+      Promise.resolve([
+        { type: 'basicJob', uiType: 'BASIC', label: 'Basic', producesArtifacts: false },
+        { type: 'customJob', uiType: 'CUSTOM', label: 'Custom', producesArtifacts: false },
+      ]),
+    );
+    const registerSpy = spyOn(Registry.pipeline, 'registerPreconfiguredJobStage').and.returnValue(
+      Promise.resolve(undefined),
+    );
+
+    await registerPreconfiguredJobStages();
+
+    expect(registerSpy).toHaveBeenCalledTimes(1);
+    expect(registerSpy.calls.mostRecent().args[0]).toEqual(jasmine.objectContaining({ key: 'basicJob' }));
+  });
+});

package/src/pipeline/config/stages/preconfiguredJob/preconfiguredJobStage.ts

@@ -1,5 +1,3 @@
-import { module } from 'angular';
-
 import { PreconfiguredJobExecutionDetails } from './PreconfiguredJobExecutionDetails';
 import { PreconfiguredJobStageConfig } from './PreconfiguredJobStageConfig';
 import { ExecutionDetailsTasks } from '../common';
@@ -35,10 +33,8 @@ export function makePreconfiguredJobStage(preconfiguredJobType: string): IStageT
   };
 }
 
-export const PRECONFIGUREDJOB_STAGE = 'spinnaker.core.pipeline.stage.preconfiguredJobStage';
-
-module(PRECONFIGUREDJOB_STAGE, []).run(() => {
-  PreconfiguredJobReader.list().then((preconfiguredJobs) => {
+export function registerPreconfiguredJobStages(): Promise<unknown[]> {
+  return PreconfiguredJobReader.list().then((preconfiguredJobs) => {
     const basicPreconfiguredJobs = preconfiguredJobs.filter((job) => job.uiType !== 'CUSTOM');
     return Promise.all(
       basicPreconfiguredJobs.map((job) => {
@@ -47,4 +43,4 @@ module(PRECONFIGUREDJOB_STAGE, []).run(() => {
       }),
     );
   });
-});
+}

package/src/pipeline/config/stages/producesArtifacts/ProducesArtifacts.tsx

@@ -1,10 +1,7 @@
-import { module } from 'angular';
 import React from 'react';
-import { react2angular } from 'react2angular';
 
 import { ArtifactTypePatterns, ExpectedArtifactModal } from '../../../../artifact';
 import type { IExpectedArtifact, IPipeline, IStage } from '../../../../domain';
-import { withErrorBoundary } from '../../../../presentation/SpinErrorBoundary';
 
 export interface IProducesArtifactsProps {
   pipeline: IPipeline;
@@ -79,13 +76,3 @@ export const ProducesArtifacts: React.SFC<IProducesArtifactsProps> = (props) =>
     </>
   );
 };
-
-export const PRODUCES_ARTIFACTS_REACT = 'spinnaker.core.pipeline.stages.produces.artifacts.react';
-module(PRODUCES_ARTIFACTS_REACT, []).component(
-  'producesArtifactsReact',
-  react2angular(withErrorBoundary(ProducesArtifacts, 'producesArtifactsReact'), [
-    'pipeline',
-    'stage',
-    'onProducesChanged',
-  ]),
-);

package/src/pipeline/config/stages/resizeAsg/ResizeAsgExecutionDetails.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { AccountTag } from '../../../../account';
+import type { IExecutionDetailsSectionProps } from '../common';
+import { ExecutionDetailsSection } from '../common';
+import { StageFailureMessage } from '../../../details';
+
+function isHttpUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+  } catch (_e) {
+    return false;
+  }
+}
+
+export function ResizeAsgExecutionDetails(props: IExecutionDetailsSectionProps) {
+  const { stage } = props;
+  const capacity = stage.context?.capacity || {};
+  const logsUrl = stage.context?.execution?.logs;
+  return (
+    <ExecutionDetailsSection name={props.name} current={props.current}>
+      <div className="row">
+        <div className="col-md-9">
+          <dl className="dl-narrow dl-horizontal">
+            <dt>Account</dt>
+            <dd>
+              <AccountTag account={stage.context?.credentials} />
+            </dd>
+            <dt>Region</dt>
+            <dd>{stage.context?.region}</dd>
+            <dt>Server Group</dt>
+            <dd>{stage.context?.serverGroupName}</dd>
+            <dt>Capacity</dt>
+            <dd>
+              Min: {capacity.min} / Desired: {capacity.desired} / Max: {capacity.max}
+            </dd>
+          </dl>
+        </div>
+      </div>
+      <StageFailureMessage stage={stage} message={stage.failureMessage} />
+      {logsUrl && isHttpUrl(logsUrl) && (
+        <div className="row">
+          <div className="col-md-12">
+            <div className="well alert alert-info">
+              <a target="_blank" href={logsUrl} rel="noopener noreferrer">
+                View Execution Logs
+              </a>
+            </div>
+          </div>
+        </div>
+      )}
+    </ExecutionDetailsSection>
+  );
+}
+
+ResizeAsgExecutionDetails.title = 'resizeServerGroupConfig';

package/src/pipeline/config/stages/resizeAsg/resizeAsgStage.ts

@@ -1,17 +1,16 @@
-import { module } from 'angular';
-
+import { ResizeAsgExecutionDetails } from './ResizeAsgExecutionDetails';
+import { ExecutionDetailsTasks, NoConfigurationStageConfig } from '../common';
+import type { IStageTypeConfig } from '../../../../domain';
 import { Registry } from '../../../../registry';
 
-export const RESIZE_ASG_STAGE = 'spinnaker.core.pipeline.stage.resizeAsgStage';
+export const resizeAsgStage: IStageTypeConfig = {
+  executionDetailsSections: [ResizeAsgExecutionDetails, ExecutionDetailsTasks],
+  useBaseProvider: true,
+  key: 'resizeServerGroup',
+  label: 'Resize Server Group',
+  description: 'Resizes a server group',
+  component: NoConfigurationStageConfig,
+  strategy: true,
+};
 
-module(RESIZE_ASG_STAGE, []).config(() => {
-  Registry.pipeline.registerStage({
-    executionConfigSections: ['resizeServerGroupConfig', 'taskStatus'],
-    executionDetailsUrl: require('./resizeAsgExecutionDetails.html'),
-    useBaseProvider: true,
-    key: 'resizeServerGroup',
-    label: 'Resize Server Group',
-    description: 'Resizes a server group',
-    strategy: true,
-  });
-});
+Registry.pipeline.registerStage(resizeAsgStage);

package/src/pipeline/config/stages/rollbackCluster/rollbackClusterStage.ts

@@ -1,16 +1,15 @@
-import { module } from 'angular';
-
 import { RollbackClusterExecutionDetails } from './RollbackClusterExecutionDetails';
-import { ExecutionDetailsTasks } from '../common/ExecutionDetailsTasks';
+import { ExecutionDetailsTasks, NoConfigurationStageConfig } from '../common';
+import type { IStageTypeConfig } from '../../../../domain';
 import { Registry } from '../../../../registry';
 
-export const ROLLBACK_CLUSTER_STAGE = 'spinnaker.core.pipeline.stage.rollbackClusterStage';
-module(ROLLBACK_CLUSTER_STAGE, []).config(function () {
-  Registry.pipeline.registerStage({
-    useBaseProvider: true,
-    key: 'rollbackCluster',
-    label: 'Rollback Cluster',
-    description: 'Rollback one or more regions in a cluster',
-    executionDetailsSections: [RollbackClusterExecutionDetails, ExecutionDetailsTasks],
-  });
-});
+export const rollbackClusterStage: IStageTypeConfig = {
+  useBaseProvider: true,
+  key: 'rollbackCluster',
+  label: 'Rollback Cluster',
+  description: 'Rollback one or more regions in a cluster',
+  component: NoConfigurationStageConfig,
+  executionDetailsSections: [RollbackClusterExecutionDetails, ExecutionDetailsTasks],
+};
+
+Registry.pipeline.registerStage(rollbackClusterStage);

package/src/pipeline/config/stages/runJob/runJobStage.js

@@ -1,16 +1,13 @@
-'use strict';
-
-import { module } from 'angular';
+import { NoConfigurationStageConfig } from '../common';
 import { Registry } from '../../../../registry';
 
-export const CORE_PIPELINE_CONFIG_STAGES_RUNJOB_RUNJOBSTAGE = 'spinnaker.core.pipeline.stage.runJobStage';
-export const name = CORE_PIPELINE_CONFIG_STAGES_RUNJOB_RUNJOBSTAGE; // for backwards compatibility
-module(CORE_PIPELINE_CONFIG_STAGES_RUNJOB_RUNJOBSTAGE, []).config(function () {
-  Registry.pipeline.registerStage({
-    useBaseProvider: true,
-    key: 'runJob',
-    label: 'Run Job',
-    description: 'Runs a container',
-    restartable: true,
-  });
-});
+export const runJobStage = {
+  useBaseProvider: true,
+  key: 'runJob',
+  label: 'Run Job',
+  description: 'Runs a container',
+  component: NoConfigurationStageConfig,
+  restartable: true,
+};
+
+Registry.pipeline.registerStage(runJobStage);

package/src/pipeline/config/stages/runJob/runJobStage.spec.ts

@@ -0,0 +1,15 @@
+import { runJobStage } from './runJobStage';
+import { NoConfigurationStageConfig } from '../common';
+
+describe('Run Job stage registration', () => {
+  it('exports the Run Job stage config', () => {
+    expect(runJobStage).toEqual({
+      useBaseProvider: true,
+      key: 'runJob',
+      label: 'Run Job',
+      description: 'Runs a container',
+      component: NoConfigurationStageConfig,
+      restartable: true,
+    });
+  });
+});

package/src/pipeline/config/stages/runMultiplePipelines/InputYamlForm.tsx

@@ -0,0 +1,33 @@
+import { get, isEmpty } from 'lodash';
+import React from 'react';
+
+import type { IFormikStageConfigInjectedProps } from '../FormikStageConfig';
+import { yamlDocumentsToString, YamlEditor } from '../../../../yamlEditor';
+
+interface IInputYamlForm {
+  inputYaml: string;
+}
+
+export class InputYamlForm extends React.Component<IFormikStageConfigInjectedProps, IInputYamlForm> {
+  constructor(props: IFormikStageConfigInjectedProps) {
+    super(props);
+    const yamlConfig: any[] = get(props.formik.values, 'yamlConfig');
+    this.state = {
+      inputYaml: !isEmpty(yamlConfig) ? yamlDocumentsToString(yamlConfig) : '',
+    };
+  }
+
+  private handleRawManifestChange = (inputYaml: string, yamlConfig: any): void => {
+    this.setState({ inputYaml });
+    this.props.formik.setFieldValue('yamlConfig', yamlConfig);
+  };
+
+  public render() {
+    return (
+      <div className="form-horizontal">
+        <h4>Yaml Configuration</h4>
+        <YamlEditor value={this.state.inputYaml} onChange={this.handleRawManifestChange} />
+      </div>
+    );
+  }
+}

package/src/pipeline/config/stages/runMultiplePipelines/RunMultiplePipelinesStageConfig.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { FormikStageConfig } from '../FormikStageConfig';
+import { InputYamlForm } from './InputYamlForm';
+import type { IStageConfigProps } from '../common';
+
+export function RunMultiplePipelinesStageConfig(props: IStageConfigProps) {
+  return (
+    <div className="RunMultiplePipelinesStageConfig">
+      <FormikStageConfig {...props} onChange={props.updateStage} render={(props) => <InputYamlForm {...props} />} />
+    </div>
+  );
+}

package/src/pipeline/config/stages/runMultiplePipelines/RunMultiplePipelinesStageExecutionDetails.tsx

@@ -0,0 +1,230 @@
+import { UISref } from '@uirouter/react';
+import React, { useState } from 'react';
+
+import type { IExecutionDetailsSectionProps } from '../common';
+import { ExecutionDetailsSection } from '../common';
+import { StageFailureMessage } from '../../../details';
+import CancelAllModal from './modals/CancelAllModal';
+import CancelModal from './modals/CancelModal';
+import RollbackAllAppsModal from './modals/RollbackAllAppsModal';
+import RollbackModal from './modals/RollbackModal';
+import { Tooltip } from '../../../../presentation';
+import { duration, timestamp } from '../../../../utils';
+
+/*
+ * You can use this component to provide information to users about
+ * how the stage was configured and the results of its execution.
+ */
+export function RunMultiplePipelinesStageExecutionDetails(props: IExecutionDetailsSectionProps) {
+  let runningExecutions: any[] = [];
+  const executionsSet = new Set();
+
+  const [executionData, setExecutionData] = useState({});
+  const [modalOpen, setModalOpen] = useState(false);
+  const [rollbackModalOpen, setRollbackModalOpen] = useState(false);
+  const [rollbackAllAppsModalOpen, setRollbackAllAppsModalOpen] = useState(false);
+  const [cancelAllModalOpen, setCancelAllModalOpen] = useState(false);
+
+  if (props.stage.outputs.executionsList == undefined) {
+    props.stage.outputs.executionsList = [];
+  }
+
+  const { application, stage } = props;
+
+  const runningExecutionsDataSource = application.getDataSource('runningExecutions');
+  if (runningExecutionsDataSource != undefined) {
+    runningExecutions = runningExecutionsDataSource.data;
+  }
+
+  const handleCancelClick = (execution: any) => async () => {
+    setExecutionData({
+      ...execution,
+    });
+    await new Promise((f) => setTimeout(f, 200));
+    setModalOpen(true);
+  };
+
+  const handleRollbackClick = (execution: any) => async () => {
+    setExecutionData({
+      ...execution,
+    });
+    await new Promise((f) => setTimeout(f, 200));
+    setRollbackModalOpen(true);
+  };
+
+  const handleAllRollbacksClick = () => {
+    setRollbackAllAppsModalOpen(true);
+  };
+
+  const handleCancelAllClick = () => {
+    setCancelAllModalOpen(true);
+  };
+
+  runningExecutions.forEach((execution: any) => {
+    if (execution.trigger.correlationId != undefined) {
+      if (execution.trigger.correlationId.includes(props.stage.id)) {
+        executionsSet.add(execution);
+      }
+    }
+  });
+
+  function findIfExecutionListCreatedArtifacts(executions: any) {
+    for (const execution of executions) {
+      if (execution.artifactCreated != undefined) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  function findIfIndividualExecutionCreatedArtifacts(execution: any) {
+    if (execution.artifactCreated != undefined) {
+      return true;
+    }
+    return false;
+  }
+
+  return (
+    <ExecutionDetailsSection name={props.name} current={props.current}>
+      <StageFailureMessage stage={stage} message={stage.failureMessage} />
+      <table className="table" style={{ marginBottom: '0px' }}>
+        <thead>
+          <tr>
+            <th>App</th>
+            <th>Started</th>
+            <th>Duration</th>
+            <th>Status</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {props.stage.outputs.executionsList.length === 0 && executionsSet.size > 0 && (
+            <>
+              {Array.from(executionsSet).map((execution: any) => {
+                return (
+                  <tr className="ng-scope info" key={execution.id}>
+                    {execution.name != 'rollbackOnFailure' && (
+                      <td>
+                        <UISref
+                          key={execution.id}
+                          to="home.applications.application.pipelines.executionDetails.execution"
+                          params={{
+                            application: execution.application,
+                            executionId: execution.id,
+                            executionParams: {
+                              application: application.name,
+                              executionId: execution.id,
+                            },
+                          }}
+                          options={{
+                            inherit: false,
+                            reload: 'home.applications.application.pipelines.executionDetails',
+                          }}
+                        >
+                          <a>{execution.trigger.parentExecution.trigger.executionIdentifier}</a>
+                        </UISref>{' '}
+                      </td>
+                    )}
+                    <td className="ng-binding">{timestamp(execution.startTime)}</td>
+                    <td className="ng-binding">{duration(execution.runningTimeInMs)}</td>
+                    <td>
+                      <span className={'label label-default label-' + execution.status.toLowerCase()}>
+                        {execution.status}
+                      </span>
+                    </td>
+                    {execution.name != 'rollbackOnFailure' && (
+                      <td>
+                        <Tooltip value="Cancel execution">
+                          <button className="link" onClick={handleCancelClick(execution)} data-testid="cancel-btn">
+                            <i style={{ color: '#bb231e' }} className="far fa-times-circle" />
+                          </button>
+                        </Tooltip>
+                      </td>
+                    )}
+                  </tr>
+                );
+              })}
+            </>
+          )}
+          {props.stage.outputs.executionsList.map((execution: any) => {
+            return (
+              <tr className="ng-scope info" key={execution.id}>
+                <td>
+                  <UISref
+                    key={execution.id}
+                    to="home.applications.application.pipelines.executionDetails.execution"
+                    params={{
+                      application: application.name,
+                      executionId: execution.id,
+                      executionParams: { application: application.name, executionId: execution.id },
+                    }}
+                    options={{
+                      inherit: false,
+                      reload: 'home.applications.application.pipelines.executionDetails',
+                    }}
+                  >
+                    <a>{execution.executionIdentifier}</a>
+                  </UISref>{' '}
+                </td>
+                <td className="ng-binding">{timestamp(execution.startTime)}</td>
+                <td className="ng-binding">{duration(execution.endTime - execution.startTime)}</td>
+                <td>
+                  <span className={'label label-default label-' + execution.status.toLowerCase()}>
+                    {execution.status}
+                  </span>
+                </td>
+                {findIfIndividualExecutionCreatedArtifacts(execution) && (
+                  <td>
+                    <Tooltip value="Rollback deploy">
+                      <button className="link" onClick={handleRollbackClick(execution)} data-testid="rollback-btn">
+                        <i className="glyphicon glyphicon-backward" />
+                      </button>
+                    </Tooltip>
+                  </td>
+                )}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      {props.stage.outputs.executionsList.length === 0 && (
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <button onClick={handleCancelAllClick}>
+            <span className="far fa-times-circle visible-lg-inline"></span>
+            <span className="far fa-times-circle visible-md-inline visible-sm-inline"></span>
+            <span className="visible-lg-inline"> Cancel all executions </span>
+          </button>
+        </div>
+      )}
+      {props.stage.outputs.executionsList.length > 0 &&
+        findIfExecutionListCreatedArtifacts(props.stage.outputs.executionsList) && (
+          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <button onClick={handleAllRollbacksClick}>
+              <span className="glyphicon glyphicon-backward visible-lg-inline"></span>
+              <span className="glyphicon glyphicon-backward visible-md-inline visible-sm-inline"></span>
+              <span className="visible-lg-inline"> Rollback all apps </span>
+            </button>
+          </div>
+        )}
+      {modalOpen && <CancelModal setOpenModal={setModalOpen} executionData={executionData} application={application} />}
+      {rollbackModalOpen && (
+        <RollbackModal setOpenModal={setRollbackModalOpen} executionData={executionData} application={application} />
+      )}
+      {rollbackAllAppsModalOpen && (
+        <RollbackAllAppsModal
+          setOpenModal={setRollbackAllAppsModalOpen}
+          allExecutions={props.stage.outputs.executionsList}
+          application={application}
+        />
+      )}
+      {cancelAllModalOpen && (
+        <CancelAllModal setOpenModal={setCancelAllModalOpen} allRunning={executionsSet} application={application} />
+      )}
+    </ExecutionDetailsSection>
+  );
+}
+
+// eslint-disable-next-line
+export namespace RunMultiplePipelinesStageExecutionDetails {
+  export const title = 'pipelineConfig';
+}

package/src/pipeline/config/stages/runMultiplePipelines/modals/CancelAllModal.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react';
+
+import { useDeckRuntimeServices } from '../../../../../bootstrap/DeckRuntimeContext';
+
+function CancelAllModal(props: any) {
+  const { executionService } = useDeckRuntimeServices();
+  const [loading, setLoading] = useState('none');
+  const [isDisabled, setDisabled] = useState(false);
+  const [autoCloseModal, setAutoCloseModal] = useState(false);
+
+  useEffect(() => {
+    if (autoCloseModal === true) {
+      props.setOpenModal(false);
+    }
+  }, [autoCloseModal]);
+
+  const handleCancel = async () => {
+    setLoading('block');
+    setDisabled(true);
+    for (const execution of props.allRunning) {
+      executionService
+        .cancelExecution(props.application, execution.id)
+        .then((response) => {
+          return response;
+        })
+        .catch((e) => {
+          return e;
+          //it always goes to catch even when cancel its executed correctly
+        });
+    }
+    await new Promise((f) => setTimeout(f, 1000));
+    setAutoCloseModal(true);
+  };
+
+  return (
+    <div role="dialog">
+      <div className="fade modal-backdrop in"></div>
+      <div role="dialog" className="fade in modal" style={{ display: 'block' }}>
+        <div className="modal-dialog">
+          <div className="modal-content" role="document">
+            <form className="form-horizontal">
+              <div className="modal-close close-button pull-right" style={{ marginTop: '4px', marginRight: '4px' }}>
+                <button
+                  onClick={() => {
+                    props.setOpenModal(false);
+                  }}
+                  className="link"
+                  type="button"
+                >
+                  <span className="glyphicon glyphicon-remove"></span>
+                </button>
+              </div>
+              <div className="modal-header">
+                <h4 className="modal-title">Really stop execution of all apps?</h4>
+              </div>
+              <div className="modal-footer">
+                <button
+                  onClick={() => {
+                    props.setOpenModal(false);
+                  }}
+                  className="btn btn-default"
+                  disabled={isDisabled}
+                  type="button"
+                >
+                  Cancel
+                </button>
+                <button onClick={handleCancel} className="btn btn-primary" type="button" disabled={isDisabled}>
+                  <div className="flex-container-h horizontal middle">
+                    {loading != 'none' && <i className="fa fa-spinner fa-spin" />}
+                    {loading == 'none' && <i className="far fa-check-circle"></i>}
+                    <span className="sp-margin-xs-left">Stop all pipelines</span>
+                  </div>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CancelAllModal;