@spinnaker/core 2026.2.2 → 2026.3.0

package/src/pipeline/executions/executionGroup/ExecutionGroup.spec.tsx

@@ -0,0 +1,122 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Subject } from 'rxjs';
+
+import { ExecutionGroupComponent } from './ExecutionGroup';
+import { CollapsibleSectionStateCache } from '../../../cache';
+import { ExecutionState } from '../../../state';
+
+describe('ExecutionGroup', () => {
+  const deckRuntimeServices = {
+    executionService: { getSectionCacheKey: () => 'section-key' },
+  } as any;
+  const application = {
+    name: 'test-app',
+    pipelineConfigs: { data: [] },
+    pipelineLocks: { data: [], onRefresh: jasmine.createSpy('onRefresh').and.returnValue(() => undefined) },
+    strategyConfigs: { data: [] },
+  } as any;
+  const group = { executions: [], heading: 'Pipeline', runningExecutions: [] } as any;
+  let previousFilterModel: any;
+
+  beforeEach(() => {
+    previousFilterModel = ExecutionState.filterModel;
+    ExecutionState.filterModel = {
+      asFilterModel: { sortFilter: { groupBy: 'name' } },
+      expandSubject: new Subject<boolean>(),
+    } as any;
+    spyOn(CollapsibleSectionStateCache, 'isSet').and.returnValue(false);
+  });
+
+  afterEach(() => {
+    ExecutionState.filterModel = previousFilterModel;
+  });
+
+  it('configures the pipeline through the injected state service', () => {
+    const injectedGo = jasmine.createSpy('injectedGo');
+    const stateName = 'home.applications.application.pipelines.executions';
+    const component = shallow(
+      <ExecutionGroupComponent
+        deckRuntimeServices={deckRuntimeServices}
+        {...({
+          router: {},
+          stateParams: {},
+          stateService: { current: { name: stateName }, go: injectedGo, includes: () => false },
+        } as any)}
+        application={application}
+        group={group}
+        parent={null}
+      />,
+      { disableLifecycleMethods: true },
+    );
+
+    (component.instance() as any).configure('pipeline-id');
+
+    expect(injectedGo).toHaveBeenCalledWith('^.pipelineConfig', { pipelineId: 'pipeline-id' });
+  });
+
+  it('observes route changes through the injected router', () => {
+    const injectedUnsubscribe = jasmine.createSpy('injectedUnsubscribe');
+    const injectedOnSuccess = jasmine.createSpy('injectedOnSuccess').and.returnValue(injectedUnsubscribe);
+    const component = shallow(
+      <ExecutionGroupComponent
+        deckRuntimeServices={deckRuntimeServices}
+        {...({
+          router: { transitionService: { onSuccess: injectedOnSuccess } },
+          stateParams: {},
+          stateService: { includes: () => false },
+        } as any)}
+        application={application}
+        group={group}
+        parent={null}
+      />,
+      { disableLifecycleMethods: true },
+    );
+    const instance = component.instance() as ExecutionGroupComponent;
+
+    instance.componentDidMount();
+    instance.componentWillUnmount();
+
+    expect(injectedOnSuccess).toHaveBeenCalledWith({}, jasmine.any(Function));
+    expect(injectedUnsubscribe).toHaveBeenCalled();
+  });
+
+  it('expands and marks the group from transition target params', () => {
+    let transitionSuccess: (transition: any) => void;
+    const injectedOnSuccess = jasmine
+      .createSpy('injectedOnSuccess')
+      .and.callFake((_criteria: any, callback: (transition: any) => void) => {
+        transitionSuccess = callback;
+        return () => undefined;
+      });
+    (CollapsibleSectionStateCache.isSet as jasmine.Spy).and.returnValue(true);
+    spyOn(CollapsibleSectionStateCache, 'isExpanded').and.returnValue(false);
+    const component = shallow(
+      <ExecutionGroupComponent
+        deckRuntimeServices={deckRuntimeServices}
+        {...({
+          router: { transitionService: { onSuccess: injectedOnSuccess } },
+          stateParams: {},
+          stateService: { includes: () => true },
+        } as any)}
+        application={application}
+        group={{ ...group, executions: [{ id: 'execution-id', deploymentTargets: [] }] }}
+        parent={null}
+      />,
+      { disableLifecycleMethods: true },
+    );
+    const instance = component.instance() as ExecutionGroupComponent;
+    instance.componentDidMount();
+
+    transitionSuccess({
+      from: () => ({}),
+      params: () => ({ executionId: 'execution-id' }),
+      to: () => ({}),
+    });
+
+    expect(component.state('open')).toBe(true);
+    expect(component.state('showingDetails')).toBe(true);
+    expect(component.find('.execution-group').hasClass('showing-details')).toBe(true);
+    instance.componentWillUnmount();
+  });
+});

package/src/pipeline/executions/executionGroup/ExecutionGroup.tsx

@@ -8,6 +8,8 @@ import { takeUntil } from 'rxjs/operators';
 import { MigrationTag } from './MigrationTag';
 import { AccountTag } from '../../../account';
 import type { Application } from '../../../application/application.model';
+import type { IDeckRuntimeServicesInjectedProps } from '../../../bootstrap/DeckRuntimeContext';
+import { withDeckRuntimeServices } from '../../../bootstrap/DeckRuntimeContext';
 import { CollapsibleSectionStateCache } from '../../../cache';
 import { PipelineConfigService } from '../../config/services/PipelineConfigService';
 import { SETTINGS } from '../../../config/settings';
@@ -24,10 +26,12 @@ import { EntityNotifications } from '../../../entityTag/notifications/EntityNoti
 import { Execution } from '../execution/Execution';
 import { ExecutionAction } from '../executionAction/ExecutionAction';
 import { ManualExecutionModal } from '../../manualExecution';
-import { Overridable } from '../../../overrideRegistry';
+import type { IRouterInjectedProps } from '../../../navigation/routerContext';
+import { stateChangeSuccess$, withRouter } from '../../../navigation/routerContext';
+import type { IOverridableProps } from '../../../overrideRegistry';
+import { overridableComponent } from '../../../overrideRegistry';
 import type { Placement } from '../../../presentation/Placement';
 import { Popover } from '../../../presentation/Popover';
-import { ReactInjector } from '../../../reactShims';
 import { ExecutionState } from '../../../state';
 import { NextRunTag } from '../../triggers/NextRunTag';
 import { TriggersTag } from '../../triggers/TriggersTag';
@@ -40,7 +44,7 @@ import './executionGroup.less';
 
 const ACCOUNT_TAG_OVERFLOW_LIMIT = SETTINGS.accountTagLimit ?? 1;
 
-export interface IExecutionGroupProps {
+export interface IExecutionGroupProps extends IOverridableProps {
   group: IExecutionGroup;
   application: Application;
   parent: HTMLDivElement;
@@ -59,15 +63,17 @@ export interface IExecutionGroupState {
   placement: Placement;
 }
 
-@Overridable('PipelineExecutionGroup')
-export class ExecutionGroup extends React.PureComponent<IExecutionGroupProps, IExecutionGroupState> {
+export class ExecutionGroupComponent extends React.PureComponent<
+  IExecutionGroupProps & IRouterInjectedProps & IDeckRuntimeServicesInjectedProps,
+  IExecutionGroupState
+> {
   public state: IExecutionGroupState;
   private expandUpdatedSubscription: Subscription;
   private stateChangeSuccessSubscription: Subscription;
   private destroy$ = new Subject();
   private headerRef = React.createRef<HTMLDivElement>();
 
-  constructor(props: IExecutionGroupProps) {
+  constructor(props: IExecutionGroupProps & IRouterInjectedProps & IDeckRuntimeServicesInjectedProps) {
     super(props);
     const { group, application } = props;
     const strategyConfig = application.strategyConfigs.data.find((c: IPipeline) => c.name === group.heading);
@@ -94,28 +100,28 @@ export class ExecutionGroup extends React.PureComponent<IExecutionGroupProps, IE
     };
   }
 
-  private isShowingDetails(): boolean {
-    const { $state, $stateParams } = ReactInjector;
+  private isShowingDetails(routeParams = this.props.stateParams): boolean {
+    const { stateService } = this.props;
     return this.props.group.executions.some(
-      (execution: IExecution) => execution.id === $stateParams.executionId && $state.includes('**.execution.**'),
+      (execution: IExecution) => execution.id === routeParams.executionId && stateService.includes('**.execution.**'),
     );
   }
 
   public configure(id: string): void {
-    const { $state } = ReactInjector;
-    if (!$state.current.name.includes('.executions.execution')) {
-      $state.go('^.pipelineConfig', { pipelineId: id });
+    const { stateService } = this.props;
+    if (!stateService.current.name.includes('.executions.execution')) {
+      stateService.go('^.pipelineConfig', { pipelineId: id });
     } else {
-      $state.go('^.^.pipelineConfig', { pipelineId: id });
+      stateService.go('^.^.pipelineConfig', { pipelineId: id });
     }
   }
 
   private hideDetails(): void {
-    ReactInjector.$state.go('.^');
+    this.props.stateService.go('.^');
   }
 
   private getSectionCacheKey(): string {
-    const { executionService } = ReactInjector;
+    const { executionService } = this.props.deckRuntimeServices;
     return executionService.getSectionCacheKey(
       ExecutionState.filterModel.asFilterModel.sortFilter.groupBy,
       this.props.application.name,
@@ -132,8 +138,8 @@ export class ExecutionGroup extends React.PureComponent<IExecutionGroupProps, IE
     this.setState({ open });
   };
 
-  private startPipeline(command: IPipelineCommand): PromiseLike<void> {
-    const { executionService } = ReactInjector;
+  private startPipeline(command: IPipelineCommand): Promise<void> {
+    const { executionService } = this.props.deckRuntimeServices;
     this.setState({ triggeringExecution: true });
     return executionService
       .startAndMonitorPipeline(this.props.application, command.pipelineName, command.trigger)
@@ -162,31 +168,33 @@ export class ExecutionGroup extends React.PureComponent<IExecutionGroupProps, IE
     )
       .pipe(takeUntil(this.destroy$))
       .subscribe((pipeline) =>
-        ManualExecutionModal.show({
-          pipeline,
-          application: this.props.application,
-          trigger: trigger,
-          currentlyRunningExecutions: this.props.group.runningExecutions,
-        })
+        ManualExecutionModal.show(
+          {
+            pipeline,
+            application: this.props.application,
+            trigger: trigger,
+            currentlyRunningExecutions: this.props.group.runningExecutions,
+          },
+          this.props.deckRuntimeServices,
+        )
           .then((command) => this.startPipeline(command))
           .catch(() => {}),
       );
   }
 
   public componentDidMount(): void {
-    const { stateEvents } = ReactInjector;
     this.expandUpdatedSubscription = ExecutionState.filterModel.expandSubject.subscribe((expanded) => {
       if (this.state.open !== expanded) {
         this.toggle();
       }
     });
-    this.stateChangeSuccessSubscription = stateEvents.stateChangeSuccess.subscribe(() => {
+    this.stateChangeSuccessSubscription = stateChangeSuccess$(this.props.router).subscribe(({ toParams }) => {
       // If the heading is collapsed, but we've clicked on a link to an execution in this group, expand the group
-      const showingDetails = this.isShowingDetails();
-      if (this.isShowingDetails() && !this.state.open) {
-        this.toggle();
-      }
-      if (showingDetails !== this.state.showingDetails) {
+      const showingDetails = this.isShowingDetails(toParams);
+      if (showingDetails && !this.state.open) {
+        CollapsibleSectionStateCache.setExpanded(this.getSectionCacheKey(), true);
+        this.setState({ open: true, showingDetails: true });
+      } else if (showingDetails !== this.state.showingDetails) {
         this.setState({ showingDetails });
       }
     });
@@ -272,7 +280,7 @@ export class ExecutionGroup extends React.PureComponent<IExecutionGroupProps, IE
     );
   }
 
-  public render(): React.ReactElement<ExecutionGroup> {
+  public render(): React.ReactElement {
     const { group } = this.props;
     const { displayExecutionActions, pipelineConfig, triggeringExecution, showingDetails, placement } = this.state;
     const pipelineDisabled = pipelineConfig && pipelineConfig.disabled;
@@ -416,3 +424,10 @@ export class ExecutionGroup extends React.PureComponent<IExecutionGroupProps, IE
     );
   }
 }
+
+const OverridableExecutionGroup = overridableComponent(ExecutionGroupComponent, 'PipelineExecutionGroup');
+export const ExecutionGroup = withDeckRuntimeServices(
+  withRouter<IExecutionGroupProps & IRouterInjectedProps & IDeckRuntimeServicesInjectedProps>(
+    OverridableExecutionGroup,
+  ),
+);

package/src/pipeline/executions/executionGroup/ExecutionGroups.spec.tsx

@@ -0,0 +1,88 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { ExecutionGroupsComponent } from './ExecutionGroups';
+import { ExecutionState } from '../../../state';
+
+describe('ExecutionGroups', () => {
+  const group = { executions: [{ id: 'execution-id' }], heading: 'Pipeline', runningExecutions: [] } as any;
+  const application = {
+    executions: { onRefresh: jasmine.createSpy('onRefresh').and.returnValue(() => undefined) },
+  } as any;
+  let previousFilterModel: any;
+
+  beforeEach(() => {
+    previousFilterModel = ExecutionState.filterModel;
+    ExecutionState.filterModel = { asFilterModel: { groups: [group] } } as any;
+  });
+
+  afterEach(() => {
+    ExecutionState.filterModel = previousFilterModel;
+  });
+
+  it('shows details from injected route state when the execution is present', () => {
+    const component = shallow(
+      <ExecutionGroupsComponent
+        {...({
+          router: { transitionService: { onSuccess: () => () => undefined } },
+          stateParams: { executionId: 'execution-id' },
+          stateService: { includes: () => true },
+        } as any)}
+        application={application}
+      />,
+    );
+
+    expect(component.find('.executions').hasClass('showing-details')).toBe(true);
+    component.unmount();
+  });
+
+  it('observes route changes through the injected router', () => {
+    const injectedUnsubscribe = jasmine.createSpy('injectedUnsubscribe');
+    const injectedOnSuccess = jasmine.createSpy('injectedOnSuccess').and.returnValue(injectedUnsubscribe);
+    const component = shallow(
+      <ExecutionGroupsComponent
+        {...({
+          router: { transitionService: { onSuccess: injectedOnSuccess } },
+          stateParams: {},
+          stateService: { includes: () => false },
+        } as any)}
+        application={application}
+      />,
+    );
+
+    component.unmount();
+
+    expect(injectedOnSuccess).toHaveBeenCalledWith({}, jasmine.any(Function));
+    expect(injectedUnsubscribe).toHaveBeenCalled();
+  });
+
+  it('marks details as shown from transition target params', () => {
+    let transitionSuccess: (transition: any) => void;
+    const component = shallow(
+      <ExecutionGroupsComponent
+        {...({
+          router: {
+            transitionService: {
+              onSuccess: (_criteria: any, callback: (transition: any) => void) => {
+                transitionSuccess = callback;
+                return () => undefined;
+              },
+            },
+          },
+          stateParams: {},
+          stateService: { includes: () => true },
+        } as any)}
+        application={application}
+      />,
+    );
+
+    transitionSuccess({
+      from: () => ({}),
+      params: () => ({ executionId: 'execution-id' }),
+      to: () => ({}),
+    });
+
+    expect(component.find('.executions').hasClass('showing-details')).toBe(true);
+    component.unmount();
+  });
+});

package/src/pipeline/executions/executionGroup/ExecutionGroups.tsx

@@ -6,7 +6,8 @@ import type { Application } from '../../../application/application.model';
 import { BannerContainer } from '../../../banner';
 import type { IExecutionGroup } from '../../../domain';
 import { ExecutionFilterService } from '../../filter/executionFilter.service';
-import { ReactInjector } from '../../../reactShims';
+import type { IRouterInjectedProps } from '../../../navigation/routerContext';
+import { stateChangeSuccess$, withRouter } from '../../../navigation/routerContext';
 import { ExecutionState } from '../../../state';
 
 import './executionGroups.less';
@@ -21,20 +22,22 @@ export interface IExecutionGroupsState {
   container?: HTMLDivElement; // need to pass the container down to children to use as root for IntersectionObserver
 }
 
-export class ExecutionGroups extends React.Component<IExecutionGroupsProps, IExecutionGroupsState> {
+export class ExecutionGroupsComponent extends React.Component<
+  IExecutionGroupsProps & IRouterInjectedProps,
+  IExecutionGroupsState
+> {
   private applicationRefreshUnsubscribe: () => void;
   private groupsUpdatedSubscription: Subscription;
   private stateChangeSuccessSubscription: Subscription;
 
-  constructor(props: IExecutionGroupsProps) {
+  constructor(props: IExecutionGroupsProps & IRouterInjectedProps) {
     super(props);
-    const { stateEvents } = ReactInjector;
     this.state = {
       groups: ExecutionState.filterModel.asFilterModel.groups,
-      showingDetails: ReactInjector.$state.includes('**.execution'),
+      showingDetails: props.stateService.includes('**.execution'),
     };
 
-    this.applicationRefreshUnsubscribe = props.application.executions.onRefresh(null, () => {
+    this.applicationRefreshUnsubscribe = props.application.executions.onRefresh(() => {
       ExecutionFilterService.updateExecutionGroups(props.application);
     });
 
@@ -45,16 +48,16 @@ export class ExecutionGroups extends React.Component<IExecutionGroupsProps, IExe
         this.setState({ groups: newGroups });
       }
     });
-    this.stateChangeSuccessSubscription = stateEvents.stateChangeSuccess.subscribe(() => {
-      const detailsShown = this.showingDetails();
+    this.stateChangeSuccessSubscription = stateChangeSuccess$(props.router).subscribe(({ toParams }) => {
+      const detailsShown = this.showingDetails(toParams);
       if (detailsShown !== this.state.showingDetails) {
         this.setState({ showingDetails: detailsShown });
       }
     });
   }
 
-  private showingDetails(): boolean {
-    const { executionId } = ReactInjector.$stateParams;
+  private showingDetails(routeParams = this.props.stateParams): boolean {
+    const { executionId } = routeParams;
     // showingDetails() is just used to set a class ('.showing-details') on the wrapper around the execution groups.
     // the effect of this class is that, when an execution is deep linked, all the other execution groups have a partial
     // opacity (except when hovering over them).
@@ -63,7 +66,7 @@ export class ExecutionGroups extends React.Component<IExecutionGroupsProps, IExe
     if (!executionId || this.state.groups.every((g) => g.executions.every((e) => e.id !== executionId))) {
       return false;
     }
-    return ReactInjector.$state.includes('**.execution');
+    return this.props.stateService.includes('**.execution');
   }
 
   private setContainer = (container: HTMLDivElement) => {
@@ -85,7 +88,7 @@ export class ExecutionGroups extends React.Component<IExecutionGroupsProps, IExe
     }
   }
 
-  public render(): React.ReactElement<ExecutionGroups> {
+  public render(): React.ReactElement {
     const { groups = [], container, showingDetails } = this.state;
     const hasGroups = groups.length > 0;
     const className = `row pipelines executions ${showingDetails ? 'showing-details' : ''}`;
@@ -149,3 +152,5 @@ export class ExecutionGroups extends React.Component<IExecutionGroupsProps, IExe
     );
   }
 }
+
+export const ExecutionGroups = withRouter(ExecutionGroupsComponent);

package/src/pipeline/filter/ExecutionFilterModel.ts

@@ -7,7 +7,7 @@ import { SETTINGS } from '../../config/settings';
 import type { IExecutionGroup } from '../../domain';
 import { FilterModelService } from '../../filterModel';
 import type { IFilterConfig, IFilterModel } from '../../filterModel/IFilterModel';
-import { ReactInjector } from '../../reactShims';
+import { getDirectRouter } from '../../navigation/directRouter';
 
 export const filterModelConfig: IFilterConfig[] = [
   { model: 'awaitingJudgement', type: 'boolean', clearValue: false },
@@ -38,18 +38,20 @@ export class ExecutionFilterModel {
   public expandSubject: Subject<boolean> = new Subject<boolean>();
 
   constructor() {
-    const { transitionService } = ReactInjector.$uiRouter;
+    const transitionService = getDirectRouter()?.transitionService;
 
-    this.configViewStateCache = ViewStateCache.createCache('executionFilters', {
-      version: 2,
-      maxAge: SETTINGS.maxPipelineAgeDays * 24 * 60 * 60 * 1000,
-    });
+    this.configViewStateCache =
+      ViewStateCache.get('executionFilters') ||
+      ViewStateCache.createCache('executionFilters', {
+        version: 2,
+        maxAge: SETTINGS.maxPipelineAgeDays * 24 * 60 * 60 * 1000,
+      });
 
     this.asFilterModel = FilterModelService.configureFilterModel(this as any, filterModelConfig);
     FilterModelService.registerRouterHooks(this.asFilterModel, '**.application.pipelines.executions.**');
     this.asFilterModel.activate();
 
-    transitionService.onBefore(
+    transitionService?.onBefore(
       {
         entering: (state) =>
           !!(

package/src/pipeline/filter/ExecutionFilters.tsx

@@ -13,7 +13,8 @@ import { PipelineConfigService } from '../config/services/PipelineConfigService'
 import type { IExecution, IPipeline, IPipelineTag } from '../../domain';
 import { ExecutionFilterService } from './executionFilter.service';
 import type { IFilterTag } from '../../filterModel';
-import { ReactInjector } from '../../reactShims';
+import type { IRouterInjectedProps } from '../../navigation/routerContext';
+import { withRouter } from '../../navigation/routerContext';
 import { ExecutionState } from '../../state';
 import { logger } from '../../utils';
 
@@ -42,13 +43,16 @@ const DragHandle = SortableHandle(() => (
   <span className="pipeline-drag-handle clickable glyphicon glyphicon-resize-vertical" />
 ));
 
-export class ExecutionFilters extends React.Component<IExecutionFiltersProps, IExecutionFiltersState> {
+class ExecutionFiltersComponent extends React.Component<
+  IExecutionFiltersProps & IRouterInjectedProps,
+  IExecutionFiltersState
+> {
   private executionsRefreshUnsubscribe: () => void;
   private groupsUpdatedSubscription: Subscription;
   private locationChangeUnsubscribe: Function;
   private pipelineConfigsRefreshUnsubscribe: () => void;
 
-  constructor(props: IExecutionFiltersProps) {
+  constructor(props: IExecutionFiltersProps & IRouterInjectedProps) {
     super(props);
 
     const searchString = ExecutionState.filterModel.asFilterModel.sortFilter.filter;
@@ -67,18 +71,18 @@ export class ExecutionFilters extends React.Component<IExecutionFiltersProps, IE
   public componentDidMount(): void {
     const { application } = this.props;
 
-    this.executionsRefreshUnsubscribe = application.executions.onRefresh(null, () => {
+    this.executionsRefreshUnsubscribe = application.executions.onRefresh(() => {
       ExecutionFilterService.updateExecutionGroups(this.props.application);
     });
     this.groupsUpdatedSubscription = ExecutionFilterService.groupsUpdatedStream.subscribe(() =>
       this.setState({ tags: ExecutionState.filterModel.asFilterModel.tags }),
     );
-    this.pipelineConfigsRefreshUnsubscribe = application.pipelineConfigs.onRefresh(null, () => {
+    this.pipelineConfigsRefreshUnsubscribe = application.pipelineConfigs.onRefresh(() => {
       this.refreshPipelines();
     });
 
     this.initialize();
-    this.locationChangeUnsubscribe = ReactInjector.$uiRouter.transitionService.onSuccess({}, () => {
+    this.locationChangeUnsubscribe = this.props.router.transitionService.onSuccess({}, () => {
       ExecutionState.filterModel.asFilterModel.activate();
       ExecutionFilterService.updateExecutionGroups(application);
     });
@@ -204,7 +208,7 @@ export class ExecutionFilters extends React.Component<IExecutionFiltersProps, IE
     this.updateFilterSearch(event.currentTarget.value);
   };
 
-  private updatePipelines(idsToUpdatedIndices: { [key: string]: number }): PromiseLike<void> {
+  private updatePipelines(idsToUpdatedIndices: { [key: string]: number }): Promise<void> {
     return PipelineConfigService.reorderPipelines(this.props.application.name, idsToUpdatedIndices, false);
   }
 
@@ -333,6 +337,9 @@ export class ExecutionFilters extends React.Component<IExecutionFiltersProps, IE
   }
 }
 
+export const ExecutionFilters = withRouter(ExecutionFiltersComponent);
+ExecutionFilters.displayName = 'ExecutionFilters';
+
 const FilterCheckbox = (props: {
   tag: IFilterTag;
   pipeline: string;

package/src/pipeline/filter/executionFilter.service.spec.ts

@@ -1,7 +1,22 @@
-import type { ExecutionFilterModel } from './ExecutionFilterModel';
+import { ExecutionFilterModel } from './ExecutionFilterModel';
+import { ViewStateCache } from '../../cache';
+import type { IPipeline } from '../../domain';
 import { ExecutionFilterService } from './executionFilter.service';
 import { ExecutionState } from '../../state';
 
+describe('ExecutionFilterModel', () => {
+  it('reuses the execution filter cache across model instances', () => {
+    const existingCache =
+      ViewStateCache.get('executionFilters') || ViewStateCache.createCache('executionFilters', { version: 2 });
+    const createCache = spyOn(ViewStateCache, 'createCache').and.callThrough();
+
+    const secondModel = new ExecutionFilterModel();
+
+    expect(createCache).not.toHaveBeenCalled();
+    expect((secondModel as any).configViewStateCache).toBe(existingCache);
+  });
+});
+
 describe('ExecutionFilterService', function () {
   let model: ExecutionFilterModel;
 

package/src/pipeline/filter/executionFilter.service.ts

@@ -1,7 +1,6 @@
 import { chain, compact, forOwn, groupBy, includes, uniq } from 'lodash';
 import { Debounce } from 'lodash-decorators';
 import { DateTime, Duration } from 'luxon';
-import { $log } from 'ngimport';
 import { Subject } from 'rxjs';
 
 import type { Application } from '../../application/application.model';
@@ -10,6 +9,9 @@ import type { ISortFilter } from '../../filterModel';
 import { FilterModelService } from '../../filterModel';
 import { Registry } from '../../registry';
 import { ExecutionState } from '../../state';
+import { diagnosticLogger } from '../../utils/diagnosticLogger';
+
+const debugLog = (...args: any[]) => diagnosticLogger.debug(...args);
 
 const boundaries = [
   {
@@ -378,11 +380,11 @@ export class ExecutionFilterService {
       const newExecution = newGroup.executions.find((g) => g.id === execution.id);
       if (!newExecution) {
         changeDetected = true;
-        $log.debug('execution no longer found, removing:', execution.id);
+        debugLog('execution no longer found, removing:', execution.id);
       } else {
         if (execution.stringVal !== newExecution.stringVal) {
           changeDetected = true;
-          $log.debug('change detected, updating execution:', execution.id);
+          debugLog('change detected, updating execution:', execution.id);
         }
       }
     });
@@ -392,7 +394,7 @@ export class ExecutionFilterService {
     newGroup.executions.forEach((execution) => {
       if (!existingExecutionIds.has(execution.id)) {
         changeDetected = true;
-        $log.debug('new execution found, adding', execution.id);
+        debugLog('new execution found, adding', execution.id);
         oldGroup.executions.push(execution);
         existingExecutionIds.add(execution.id);
       }

package/src/pipeline/filter/executionFilters.less

@@ -1,4 +1,3 @@
-execution-filters,
 .execution-filters {
   display: flex;
   height: 100%;

package/src/pipeline/index.ts

@@ -1,4 +1,5 @@
 export * from './config/PipelineRegistry';
+export * from './config/TargetSelect';
 export * from './config/services/PipelineConfigService';
 export * from './config/stages/FormikStageConfig';
 export * from './config/stages/FormikStageConfig';
@@ -9,6 +10,7 @@ export * from './config/stages/pipeline/PipelineStageExecutionDetails';
 export * from './config/stages/preconfiguredJob';
 export * from './config/stages/stageConstants';
 export * from './config/stages/templates';
+export * from './config/stages/webhook/webhookStage';
 export * from './config/templates';
 export * from './config/triggers/RunAsUser';
 export * from './config/triggers/Triggers';