@spinnaker/core 0.15.1 → 0.18.0

package/dist/pipeline/triggers/QuietPeriodBadge.d.ts

@@ -1,8 +1,2 @@
-import React from 'react';
-export interface IQuietPeriodBadgeProps {
-    start: Date;
-    end: Date;
-}
-export declare class QuietPeriodBadge extends React.Component<IQuietPeriodBadgeProps> {
-    render(): JSX.Element;
-}
+/// <reference types="react" />
+export declare function QuietPeriodBadge(): JSX.Element;

package/dist/pipeline/triggers/TriggersTag.d.ts

@@ -1,15 +1,6 @@
-import React from 'react';
+/// <reference types="react" />
 import type { IPipeline } from '../../domain/IPipeline';
 export interface ITriggersTagProps {
     pipeline: IPipeline;
 }
-export interface ITriggersTagState {
-    triggerCount: number;
-    activeTriggerCount: number;
-}
-export declare class TriggersTag extends React.Component<ITriggersTagProps, ITriggersTagState> {
-    private quietPeriodStart;
-    private quietPeriodEnd;
-    constructor(props: ITriggersTagProps);
-    render(): React.ReactElement<TriggersTag>;
-}
+export declare function TriggersTag(props: ITriggersTagProps): JSX.Element;

package/dist/pipeline/triggers/useQuietPeriod.hook.d.ts

@@ -0,0 +1,7 @@
+interface IQuietPeriod {
+    currentStatus: 'UNKNOWN' | 'BEFORE_QUIET_PERIOD' | 'DURING_QUIET_PERIOD' | 'AFTER_QUIET_PERIOD' | 'NO_QUIET_PERIOD';
+    startTime: number;
+    endTime: number;
+}
+export declare function useQuietPeriod(): IQuietPeriod;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spinnaker/core",
   "license": "Apache-2.0",
-  "version": "0.15.1",
+  "version": "0.18.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "scripts": {
@@ -89,7 +89,7 @@
     "@graphql-codegen/typescript-operations": "^1.18.3",
     "@graphql-codegen/typescript-react-apollo": "^2.3.0",
     "@spinnaker/eslint-plugin": "^3.0.1",
-    "@spinnaker/scripts": "^0.2.3",
+    "@spinnaker/scripts": "^0.2.4",
     "@types/angular": "1.6.26",
     "@types/angular-mocks": "1.5.10",
     "@types/angular-ui-bootstrap": "0.13.41",
@@ -120,5 +120,5 @@
     "shx": "0.3.3",
     "typescript": "4.3.5"
   },
-  "gitHead": "187272ef1933753688fb8f7966e250a27104612a"
+  "gitHead": "8f3171b4918a445dc508fb4baf676baf639de0ab"
 }

package/src/application/applications.state.provider.ts

@@ -13,7 +13,7 @@ module(APPLICATIONS_STATE_PROVIDER, [STATE_CONFIG_PROVIDER, APPLICATION_STATE_PR
   (stateConfigProvider: StateConfigProvider, applicationStateProvider: ApplicationStateProvider) => {
     const applicationsState: INestedState = {
       name: 'applications',
-      url: '/applications',
+      url: '/applications?create',
       views: {
         'main@': {
           component: Applications,

package/src/application/modal/createApplication.modal.controller.js

@@ -30,7 +30,8 @@ module(CORE_APPLICATION_MODAL_CREATEAPPLICATION_MODAL_CONTROLLER, [
   '$state',
   '$uibModalInstance',
   '$timeout',
-  function ($scope, $q, $log, $state, $uibModalInstance, $timeout) {
+  'name',
+  function ($scope, $q, $log, $state, $uibModalInstance, $timeout, name) {
     const applicationLoader = ApplicationReader.listApplications();
     applicationLoader.then((applications) => (this.data.appNameList = _.map(applications, 'name')));
 
@@ -59,6 +60,10 @@ module(CORE_APPLICATION_MODAL_CREATEAPPLICATION_MODAL_CONTROLLER, [
       instancePort: SETTINGS.defaultInstancePort || null,
     };
 
+    if (name) {
+      this.application.name = name;
+    }
+
     const submitting = () => {
       this.state.errorMessages = [];
       this.state.submitting = true;
@@ -71,11 +76,7 @@ module(CORE_APPLICATION_MODAL_CREATEAPPLICATION_MODAL_CONTROLLER, [
     let navigateTimeout = null;
 
     const routeToApplication = () => {
-      navigateTimeout = $timeout(() => {
-        $state.go('home.applications.application', {
-          application: this.application.name,
-        });
-      }, 1000);
+      $uibModalInstance.close(this.application);
     };
 
     $scope.$on('$destroy', () => $timeout.cancel(navigateTimeout));

package/src/application/modal/createApplication.modal.controller.spec.js

@@ -14,6 +14,7 @@ describe('Controller: CreateApplicationModalCtrl', function () {
       controller = $controller('CreateApplicationModalCtrl', {
         $scope: scope,
         $uibModalInstance: {},
+        name: 'deck',
       });
     }),
   );

package/src/application/search/Applications.tsx

@@ -8,9 +8,11 @@ import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
 import { ApplicationTable } from './ApplicationsTable';
 import { PaginationControls } from './PaginationControls';
 import type { IAccount } from '../../account';
+import type { Application } from '../../application';
 import type { ICache } from '../../cache';
 import { ViewStateCache } from '../../cache';
 import { InsightMenu } from '../../insight/InsightMenu';
+import { ModalInjector, ReactInjector } from '../../reactShims';
 import type { IApplicationSummary } from '../service/ApplicationReader';
 import { ApplicationReader } from '../service/ApplicationReader';
 import { Spinner } from '../../widgets';
@@ -22,6 +24,10 @@ interface IViewState {
   sort: string;
 }
 
+interface IApplicationsStateParams {
+  create?: string;
+}
+
 export interface IApplicationPagination {
   currentPage: number;
   itemsPerPage: number;
@@ -113,6 +119,48 @@ export class Applications extends React.Component<{}, IApplicationsState> {
           throw error;
         },
       );
+
+    const { $stateParams, $state, $rootScope, overrideRegistry } = ReactInjector;
+    const { create } = $stateParams as IApplicationsStateParams;
+    applicationSummaries$.subscribe((applications: IApplicationSummary[]) => {
+      if (create) {
+        const found = applications.find((app) => app.name === create);
+        if (found) {
+          if (found.email) {
+            // Application already exists - redirect to app
+            $state.go('home.applications.application', { application: create, create: null });
+          } else {
+            // Inferred application - redirect to config
+            $state.go('home.applications.application.config', { application: create, create: null });
+          }
+        } else {
+          // Nonexistant application - open create modal
+          ModalInjector.modalService
+            .open({
+              scope: $rootScope.$new(),
+              templateUrl: overrideRegistry.getTemplate(
+                'createApplicationModal',
+                require('../modal/newapplication.html'),
+              ),
+              resolve: {
+                name: () => create,
+              },
+              controller: overrideRegistry.getController('CreateApplicationModalCtrl'),
+              controllerAs: 'newAppModal',
+            })
+            .result.then(
+              (app: Application) => {
+                $state.go('home.applications.application', { application: app.name, create: null });
+              },
+              () => {
+                // Clear out the query parameter if the dialog is dismissed
+                $state.go('home.applications', { create: null });
+              },
+            )
+            .catch(() => {});
+        }
+      }
+    });
   }
 
   private toggleSort(column: string): void {

package/src/config/settings.ts

@@ -143,7 +143,6 @@ export interface ISpinnakerSettings {
     [key: string]: IProviderSettings; // allows custom providers not typed in here (good for testing too)
   };
   pubsubProviders: string[];
-  quietPeriod: [string | number, string | number];
   resetProvider: (provider: string) => () => void;
   resetToOriginal: () => void;
   searchVersion: 1 | 2;

package/src/domain/IPipeline.ts

@@ -16,6 +16,7 @@ export interface IPipeline {
   locked?: IPipelineLock;
   limitConcurrent: boolean;
   manualStartAlert?: IPipelineManualStartAlert;
+  maxConcurrentExecutions?: number;
   migrationStatus?: string;
   name: string;
   notifications?: INotification[];

package/src/help/help.contents.ts

@@ -364,6 +364,8 @@ const helpContents: { [key: string]: string } = {
   'pipeline.config.dependsOn': 'Declares which stages must be run <em>before</em> this stage begins.',
   'pipeline.config.parallel.cancel.queue':
     '<p>If concurrent pipeline execution is disabled, then the pipelines that are in the waiting queue will get canceled when the next execution starts. <br><br>Check this box if you want to keep them in the queue.</p>',
+  'pipeline.config.parallel.max.concurrent':
+    '<p>If concurrent pipeline execution is enabled, this variable sets the maximum number of concurrent pipelines executing. <br><br>If set to 0, then max is unlimited.</p>',
   'pipeline.config.timeout': `
       <p>Allows you to force the stage to fail if its running time exceeds a specific length.</p>
       <p><b>Note:</b> By default, Spinnaker will use sensible timeouts that depend on the stage type and the operations the stage needs to perform at runtime. These defaults can vary based on chosen configuration and other external factors.

package/src/help/helpContents.registry.spec.ts

@@ -21,4 +21,12 @@ describe('Help contents registry', () => {
       expect(HelpContentsRegistry.getHelpField('a')).toBe('b');
     });
   });
+
+  describe('max concurrent definition', () => {
+    it('provides the expected definition for max concurrent', () => {
+      const definition =
+        '<p>If concurrent pipeline execution is enabled, this variable sets the maximum number of concurrent pipelines executing. <br><br>If set to 0, then max is unlimited.</p>';
+      expect(HelpContentsRegistry.getHelpField('pipeline.config.parallel.max.concurrent')).toEqual(definition);
+    });
+  });
 });

package/src/insight/InsightMenu.tsx

@@ -56,6 +56,9 @@ export class InsightMenu extends React.Component<IInsightMenuProps, IInsightMenu
           'createApplicationModal',
           require('../application/modal/newapplication.html'),
         ),
+        resolve: {
+          name: () => '',
+        },
         controller: this.overrideRegistry.getController('CreateApplicationModalCtrl'),
         controllerAs: 'newAppModal',
       })

package/src/pipeline/config/triggers/ExecutionOptionsPageContent.spec.tsx

@@ -0,0 +1,90 @@
+import { mount } from 'enzyme';
+import React from 'react';
+
+import { ExecutionOptionsPageContent } from './ExecutionOptionsPageContent';
+import type { IPipeline } from '../../../domain';
+
+describe('Execution Options Page Content', () => {
+  describe('Max Concurrent Options', () => {
+    let pipeline: IPipeline;
+    const setPipeline = (overrides: any = {}) => {
+      pipeline = {
+        application: 'test',
+        id: 'test1',
+        keepWaitingPipelines: false,
+        limitConcurrent: false,
+        maxConcurrentExecutions: 0,
+        name: 'test p 1', // @ts-ignore
+        parameterConfig: [], // @ts-ignore
+        stages: [], // @ts-ignore
+        triggers: [],
+        ...overrides,
+      };
+    };
+    const update = (changes: any = {}) => {
+      pipeline = {
+        ...pipeline,
+        ...changes,
+      };
+    };
+    describe('enabling max concurrent', () => {
+      it('sets keepWaitingPipelines to true if limitConcurrent and keepWaitingPipelines are both not truthy', () => {
+        setPipeline();
+        const wrapper = mount(<ExecutionOptionsPageContent pipeline={pipeline} updatePipelineConfig={update} />);
+        expect(pipeline.keepWaitingPipelines).toBeFalsy();
+        const checkbox = wrapper.find('input').at(0);
+        checkbox.simulate('change', { target: { checked: true } });
+        expect(pipeline.keepWaitingPipelines).toBeTruthy();
+      });
+
+      it('does not alter pipeline if limitConcurrent is true', () => {
+        setPipeline({ limitConcurrent: true });
+        const wrapper = mount(<ExecutionOptionsPageContent pipeline={pipeline} updatePipelineConfig={update} />);
+        expect(pipeline.keepWaitingPipelines).toBeFalsy();
+        const checkbox = wrapper.find('input').at(0);
+        checkbox.simulate('change', { target: { checked: true } });
+        expect(pipeline.keepWaitingPipelines).toBeFalsy();
+      });
+
+      it('does not alter pipeline if keepWaitingPipelines is true', () => {
+        setPipeline({ keepWaitingPipelines: true });
+        const wrapper = mount(<ExecutionOptionsPageContent pipeline={pipeline} updatePipelineConfig={update} />);
+        expect(pipeline.keepWaitingPipelines).toBeTruthy();
+        const checkbox = wrapper.find('input').at(0);
+        checkbox.simulate('change', { target: { checked: true } });
+        expect(pipeline.keepWaitingPipelines).toBeTruthy();
+      });
+
+      it('defaults the max concurrent value to 0', () => {
+        setPipeline();
+        const wrapper = mount(<ExecutionOptionsPageContent pipeline={pipeline} updatePipelineConfig={update} />);
+        const checkbox = wrapper.find('input').at(0);
+        checkbox.simulate('change', { target: { checked: true } });
+        const concurrentInput = wrapper.find('input[type="number"]').at(0);
+        expect(concurrentInput.prop('value')).toEqual(0);
+      });
+    });
+
+    it('updates the max concurrent config value when the input is changed', () => {
+      setPipeline();
+      const value = 22;
+      const wrapper = mount(<ExecutionOptionsPageContent pipeline={pipeline} updatePipelineConfig={update} />);
+      const checkbox = wrapper.find('input').at(0);
+      checkbox.simulate('change', { target: { checked: true } });
+      const concurrentInput = wrapper.find('input[type="number"]').at(0);
+      concurrentInput.simulate('change', { target: { value } });
+      expect(pipeline.maxConcurrentExecutions).toEqual(value);
+    });
+
+    it('sets the max concurrent value to a whole number if a float is entered', () => {
+      setPipeline();
+      const value = 3.3;
+      const wrapper = mount(<ExecutionOptionsPageContent pipeline={pipeline} updatePipelineConfig={update} />);
+      const checkbox = wrapper.find('input').at(0);
+      checkbox.simulate('change', { target: { checked: true } });
+      const concurrentInput = wrapper.find('input[type="number"]').at(0);
+      concurrentInput.simulate('change', { target: { value } });
+      expect(pipeline.maxConcurrentExecutions).toEqual(3);
+    });
+  });
+});

package/src/pipeline/config/triggers/ExecutionOptionsPageContent.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import type { IPipeline } from '../../../domain';
 import { HelpField } from '../../../help';
-import { CheckboxInput, FormField } from '../../../presentation';
+import { CheckboxInput, FormField, NumberInput } from '../../../presentation';
 
 export interface IExecutionOptionsPageContentProps {
   pipeline: IPipeline;
@@ -11,6 +11,13 @@ export interface IExecutionOptionsPageContentProps {
 
 export function ExecutionOptionsPageContent(props: IExecutionOptionsPageContentProps) {
   const { pipeline, updatePipelineConfig } = props;
+  const [currentMaxConcurrent, setCurrentMaxConcurrent] = useState(pipeline.maxConcurrentExecutions || 0);
+  const handleMaxConcurrentChange = (changeEvent: any) => {
+    const value = Number.parseInt(changeEvent.target.value);
+    setCurrentMaxConcurrent(value);
+    updatePipelineConfig({ maxConcurrentExecutions: value });
+  };
+
   return (
     <div className="row">
       <div className="col-md-11 col-md-offset-1">
@@ -23,6 +30,10 @@ export function ExecutionOptionsPageContent(props: IExecutionOptionsPageContentP
           )}
           onChange={() => {
             updatePipelineConfig({ limitConcurrent: !pipeline.limitConcurrent });
+            if (!pipeline.limitConcurrent && !pipeline.keepWaitingPipelines) {
+              pipeline.keepWaitingPipelines = true;
+              updatePipelineConfig({ keepWaitingPipelines: true });
+            }
           }}
           value={pipeline.limitConcurrent}
         />
@@ -45,6 +56,20 @@ export function ExecutionOptionsPageContent(props: IExecutionOptionsPageContentP
             value={pipeline.keepWaitingPipelines}
           />
         )}
+        {!pipeline.limitConcurrent && (
+          <div>
+            <label className="col-md-3 sm-label-right">
+              Maximum concurrent pipeline executions <HelpField id={'pipeline.config.parallel.max.concurrent'} />
+            </label>
+            <div className="col-md-8">
+              <FormField
+                input={(inputProps) => <NumberInput {...inputProps} min={0} max={65534} />}
+                onChange={handleMaxConcurrentChange}
+                value={currentMaxConcurrent}
+              />
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/pipeline/details/StageFailureMessage.tsx

@@ -71,18 +71,33 @@ export class StageFailureMessage extends React.Component<IStageFailureMessagePro
   }
 
   public render() {
-    const { message, messages } = this.props;
+    const { message, messages, stage } = this.props;
     const { isFailed, failedTask, failedExecutionId, failedStageName, failedStageId } = this.state;
-    if (isFailed || failedTask || message || messages.length) {
+
+    let stageMessages = message && !messages.length ? [message] : messages;
+    if (stageMessages.length > 0) {
       const exceptionTitle = isFailed ? (messages.length ? 'Exceptions' : 'Exception') : 'Warning';
-      const displayMessages =
-        message || !messages.length ? (
-          <Markdown message={message || StageFailureMessages.NO_REASON_PROVIDED} className="break-word" />
-        ) : (
-          messages.map((m, i) => (
-            <Markdown key={i} message={m || StageFailureMessages.NO_REASON_PROVIDED} className="break-word" />
-          ))
-        );
+
+      // expression evaluation warnings can get really long and hide actual failure messages, source
+      // filter out expression evaluation failure messages if either:
+      // - there was a stage failure (and failed expressions don't fail the stage)
+      // - expression evaluation was explicitly disabled for the stage(as Orca still processes expressions and populates
+      //   warnings when evaluation is disabled disabled)
+      const shouldFilterExpressionFailures =
+        (isFailed && !stage.context?.failOnFailedExpressions) || stage.context?.skipExpressionEvaluation;
+
+      if (shouldFilterExpressionFailures) {
+        stageMessages = stageMessages.filter((m) => !m.startsWith('Failed to evaluate'));
+
+        if (stageMessages.length === 0) {
+          // no messages to be displayed after filtering
+          return null;
+        }
+      }
+
+      const displayMessages = stageMessages.map((m, i) => (
+        <Markdown key={i} message={m || StageFailureMessages.NO_REASON_PROVIDED} className="break-word" />
+      ));
 
       if (displayMessages) {
         return (

package/src/pipeline/triggers/QuietPeriodBadge.tsx

@@ -2,11 +2,7 @@ import type { DateTimeFormatOptions } from 'luxon';
 import React from 'react';
 
 import { Tooltip } from '../../presentation';
-
-export interface IQuietPeriodBadgeProps {
-  start: Date;
-  end: Date;
-}
+import { useQuietPeriod } from './useQuietPeriod.hook';
 
 const locale = 'en-US';
 const dateOptions: DateTimeFormatOptions = {
@@ -18,37 +14,30 @@ const dateOptions: DateTimeFormatOptions = {
   minute: '2-digit',
 };
 
-export class QuietPeriodBadge extends React.Component<IQuietPeriodBadgeProps> {
-  public render() {
-    const { start, end } = this.props;
-
-    if (!start || !end) {
-      return null;
-    }
+export function QuietPeriodBadge() {
+  const quietPeriod = useQuietPeriod();
+  if (quietPeriod.currentStatus === 'NO_QUIET_PERIOD' || quietPeriod.currentStatus === 'UNKNOWN') {
+    return null;
+  }
 
-    const now = new Date();
-    const afterQuietPeriod = now > end;
-    if (afterQuietPeriod) {
-      return null;
-    }
+  const start = new Date(quietPeriod.startTime);
+  const end = new Date(quietPeriod.endTime);
 
-    const inQuietPeriod = start < now && !afterQuietPeriod;
+  const message =
+    quietPeriod.currentStatus === 'DURING_QUIET_PERIOD'
+      ? 'This pipeline will not be automatically triggered until the end of the quiet period. '
+      : 'This pipeline will not be automatically triggered during the quiet period. ';
 
-    const quietPeriodRange = (
+  const template = (
+    <span>
+      {message}
       <span>{`(${start.toLocaleString(locale, dateOptions)} - ${end.toLocaleString(locale, dateOptions)})`}</span>
-    );
-    const tooltipTemplate = inQuietPeriod ? (
-      <span>
-        This pipeline will not be automatically triggered until the end of the quiet period. {quietPeriodRange}
-      </span>
-    ) : (
-      <span>This pipeline will not be automatically triggered during the quiet period. {quietPeriodRange}</span>
-    );
-
-    return (
-      <Tooltip template={tooltipTemplate}>
-        <i className="fa icon-calendar-warning" style={{ color: 'red' }} />
-      </Tooltip>
-    );
-  }
+    </span>
+  );
+
+  return (
+    <Tooltip template={template}>
+      <i className="fa icon-calendar-warning" style={{ color: 'red' }} />
+    </Tooltip>
+  );
 }

package/src/pipeline/triggers/TriggersTag.tsx

@@ -1,79 +1,49 @@
-import { filter } from 'lodash';
-import React from 'react';
+import * as React from 'react';
 
 import { QuietPeriodBadge } from './QuietPeriodBadge';
-import { SETTINGS } from '../../config';
+import type { ITrigger } from '../../domain';
 import type { IPipeline } from '../../domain/IPipeline';
+import { useQuietPeriod } from './useQuietPeriod.hook';
 
 export interface ITriggersTagProps {
   pipeline: IPipeline;
 }
 
-export interface ITriggersTagState {
-  triggerCount: number;
-  activeTriggerCount: number;
-}
-
-export class TriggersTag extends React.Component<ITriggersTagProps, ITriggersTagState> {
-  private quietPeriodStart: Date;
-  private quietPeriodEnd: Date;
-
-  constructor(props: ITriggersTagProps) {
-    super(props);
-
-    let triggerCount = 0;
-    let activeTriggerCount = 0;
-    let quietPeriodEnabled = false;
-
-    const pipeline = this.props.pipeline;
-    if (pipeline && pipeline.triggers && pipeline.triggers.length) {
-      triggerCount = pipeline.triggers.length;
-      activeTriggerCount = filter(pipeline.triggers, { enabled: true }).length;
-      quietPeriodEnabled = Boolean(pipeline.respectQuietPeriod);
-    }
-
-    const hasQuietPeriod = SETTINGS.feature.quietPeriod && SETTINGS.quietPeriod && SETTINGS.quietPeriod.length === 2;
-
-    if (hasQuietPeriod && quietPeriodEnabled) {
-      this.quietPeriodStart = new Date(SETTINGS.quietPeriod[0]);
-      this.quietPeriodEnd = new Date(SETTINGS.quietPeriod[1]);
-    }
-
-    this.state = {
-      triggerCount,
-      activeTriggerCount,
-    };
+function getTriggerLabel(totalTriggers: number, activeTriggers: number) {
+  if (totalTriggers === 1) {
+    return `Trigger: ${activeTriggers ? 'enabled' : 'disabled'}`;
+  } else if (totalTriggers === activeTriggers) {
+    return `All triggers: enabled`;
+  } else if (activeTriggers === 0) {
+    return `All triggers: disabled`;
+  } else {
+    return `Some triggers: enabled`;
   }
+}
 
-  public render(): React.ReactElement<TriggersTag> {
-    const { pipeline } = this.props;
-    const { triggerCount, activeTriggerCount } = this.state;
-
-    if (triggerCount > 0) {
-      const now = new Date();
-      const inQuietPeriod = this.quietPeriodStart < now && now < this.quietPeriodEnd;
+export function TriggersTag(props: ITriggersTagProps) {
+  const quietPeriod = useQuietPeriod();
 
-      const triggers =
-        triggerCount === 1
-          ? 'Trigger'
-          : activeTriggerCount === triggerCount || inQuietPeriod
-          ? 'All triggers'
-          : 'Some triggers';
-      const displayTriggers = `${triggers}: ${activeTriggerCount === 0 || inQuietPeriod ? 'disabled' : 'enabled'}`;
+  const { pipeline } = props;
+  const triggers = pipeline?.triggers ?? [];
+  const isTriggerDisabled = (t: ITrigger) =>
+    !t.enabled ||
+    (pipeline.respectQuietPeriod && quietPeriod.currentStatus === 'DURING_QUIET_PERIOD' && t.type !== 'pipeline');
+  const activeTriggers = triggers.filter((t: ITrigger) => !isTriggerDisabled(t));
 
-      return (
-        <div
-          className={`triggers-toggle ${activeTriggerCount ? '' : 'disabled'}`}
-          style={{ visibility: pipeline.disabled ? 'hidden' : 'visible' }}
-        >
-          <span>
-            <span>
-              <QuietPeriodBadge start={this.quietPeriodStart} end={this.quietPeriodEnd} /> {displayTriggers}
-            </span>
-          </span>
-        </div>
-      );
-    }
+  if (triggers.length === 0) {
     return <div />;
   }
+
+  return (
+    <div
+      className={`triggers-toggle ${activeTriggers.length > 0 ? '' : 'disabled'}`}
+      style={{ visibility: pipeline.disabled ? 'hidden' : 'visible' }}
+    >
+      <span className="flex-container-h margin-between-sm baseline">
+        {pipeline.respectQuietPeriod && <QuietPeriodBadge />}
+        <span>{getTriggerLabel(triggers.length, activeTriggers.length)}</span>
+      </span>
+    </div>
+  );
 }