@spinnaker/core 2025.0.6 → 2025.1.0

package/dist/utils/feature/FeatureContext.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { IFeatures } from '../../config';
+/**
+ * Type alias for feature flags, extending from IFeatures interface.
+ */
+export type FeatureFlags = IFeatures;
+/**
+ * Creates a React Context for feature flags.
+ * Defaults to `SETTINGS.feature` if no provider is found in the component tree.
+ */
+export declare const FeatureFlagsContext: React.Context<IFeatures>;
+/**
+ * A context provider component that merges the global feature flags
+ * from `SETTINGS.feature` with any feature flags passed in via props.
+ *
+ * @param {Object} props
+ * @param {FeatureFlags} [props.features] - Feature flags to merge with the global flags.
+ * @param {React.ReactNode} props.children - Components that will consume the merged flags.
+ * @returns {JSX.Element} - The provider that holds merged feature flags in context.
+ */
+export declare function FeaturesProvider({ features, children, }: {
+    features?: FeatureFlags;
+    children: React.ReactNode;
+}): JSX.Element;

package/dist/utils/feature/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Feature';
+export * from './FeatureContext';
+export * from './useFeature.hook';

package/dist/utils/feature/useFeature.hook.d.ts

@@ -0,0 +1,15 @@
+import type { FeatureFlags } from './FeatureContext';
+/**
+ * A hook to access the current set of feature flags from the context.
+ * If no provider is found, it will default to `SETTINGS.feature`.
+ *
+ * @returns {FeatureFlags} - The feature flags currently in the context.
+ */
+export declare function useFeatures(): FeatureFlags;
+/**
+ * A hook to determine if a particular feature is enabled.
+ *
+ * @param {keyof FeatureFlags} feature - The name of the feature flag to check.
+ * @returns {boolean} - True if the feature is enabled; otherwise false.
+ */
+export declare function useFeature(feature: keyof FeatureFlags): boolean;

package/dist/utils/index.d.ts

@@ -12,6 +12,7 @@ export * from './json/traverseObject';
 export * from './noop';
 export * from './q';
 export * from './renderIfFeature.component';
+export * from './feature';
 export * from './scrollTo/scrollTo.service';
 export * from './timeFormatters';
 export * from './unicodeBase64';
@@ -19,3 +20,4 @@ export * from './uuid.service';
 export * from './workerPool';
 export * from './json/filterObjectValues';
 export * from './Logger';
+export * from './parseNum';

package/dist/utils/json/traverseObject.d.ts

@@ -10,5 +10,5 @@
  *        i.e., properties that are neither a nested object, nor an array.
  */
 export declare const traverseObject: (object: object, callback: ITraverseCallback, traverseLeafNodesOnly?: boolean) => void;
-declare type ITraverseCallback = (path: string, obj: object) => void;
+type ITraverseCallback = (path: string, obj: object) => void;
 export {};

package/dist/utils/parseNum.d.ts

@@ -0,0 +1 @@
+export declare const parseNum: (numOrStr: number | string) => number;

package/dist/utils/testUtils/index.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+/**
+ * Create a minimal UIRouter environment so components can render RouteLinks, etc.
+ */
+export declare const wrapWithRouter: (node: React.ReactElement) => JSX.Element;
+/** Helper to DRY mounting + async flush + update. */
+export declare function mountAndFlush(element: React.ReactElement): Promise<import("enzyme").ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>>;

package/dist/utils/workerPool.d.ts

@@ -1,4 +1,4 @@
-export declare type Task<T = any> = () => Promise<T>;
+export type Task<T = any> = () => Promise<T>;
 export declare class WorkerPool<T = any> {
     private concurrency;
     private queuedTasks;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spinnaker/core",
   "license": "Apache-2.0",
-  "version": "2025.0.6",
+  "version": "2025.1.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "publishConfig": {
@@ -122,7 +122,7 @@
     "graphql": "^15.5.1",
     "rollup-plugin-copy": "^3.4.0",
     "shx": "0.3.3",
-    "typescript": "4.3.5"
+    "typescript": "5.0.4"
   },
-  "gitHead": "9f1607115a075e95b75864f2304adb6c67157e86"
+  "gitHead": "ed6c0f8929f68fcb6295c4d56c4bfbdec8d21ce6"
 }

package/src/artifact/ArtifactIconService.ts

@@ -57,3 +57,4 @@ ArtifactIconService.registerType(ArtifactTypePatterns.JENKINS_FILE, jenkinsFileI
 ArtifactIconService.registerType(ArtifactTypePatterns.MAVEN_FILE, mavenFileIcon);
 ArtifactIconService.registerType(ArtifactTypePatterns.HTTP_FILE, httpFileIcon);
 ArtifactIconService.registerType(ArtifactTypePatterns.ORACLE_OBJECT, oracleObjectIcon);
+ArtifactIconService.registerType(ArtifactTypePatterns.HELM_IMAGE, helmChartIcon);

package/src/artifact/ArtifactTypes.ts

@@ -22,6 +22,7 @@ export const ArtifactTypePatterns: IArtifactTypePatterns = {
   HTTP_FILE: /http\/file/,
   FRONT50_PIPELINE_TEMPLATE: /front50\/pipelineTemplate/,
   ORACLE_OBJECT: /oracle\/object/,
+  HELM_IMAGE: /helm\/image/,
 };
 
 export const excludeAllTypesExcept = (...types: RegExp[]) =>

package/src/artifact/ExpectedArtifactSelectorViewController.ts

@@ -31,7 +31,7 @@ export class ExpectedArtifactSelectorViewController {
       const artifact = ExpectedArtifactService.artifactFromExpected(expectedArtifact);
       const allAccounts = this.delegate.getExpectedArtifactAccounts();
       this.accountsForArtifact =
-        artifact.type === 'helm/chart'
+        artifact.type === 'helm/chart' || artifact.type === 'helm/image'
           ? allAccounts.filter((a) => a.types.includes(artifact.type) && a.name === artifact.artifactAccount)
           : allAccounts.filter((a) => a.types.includes(artifact.type));
       const selected = this.delegate.getSelectedAccount();

package/src/config/VersionChecker.tsx

@@ -46,7 +46,7 @@ export class VersionChecker {
           content: (
             <div>
               A new version of Spinnaker is available{' '}
-              <a role="button" className="action" onClick={() => document.location.reload(true)}>
+              <a role="button" className="action" onClick={() => document.location.reload()}>
                 Refresh
               </a>
             </div>

package/src/domain/IServerGroup.ts

@@ -16,6 +16,7 @@ export interface IAsg {
 }
 
 export interface IServerGroup extends IManagedResource {
+  [key: string]: any;
   account: string;
   app?: string;
   asg?: IAsg;

package/src/help/help.contents.ts

@@ -303,7 +303,7 @@ const helpContents: { [key: string]: string } = {
     '<p>Explicitly evaluate SpEL expressions in overrides just prior to manifest baking. Can be paired with the "Skip SpEL evaluation" option in the Deploy Manifest stage when baking a third-party manifest artifact with expressions not meant for Spinnaker to evaluate as SpEL.</p>',
   'pipeline.config.bake.manifest.templateRenderer': '<p>This is the engine used for rendering your manifest.</p>',
   'pipeline.config.bake.manifest.helm.chartFilePath': `
-    <p>This is the relative path to the directory containing the Chart.yaml file within your Git repo.</p>
+    <p>This is the relative path to the directory containing the Chart.yaml file within your Git repo (or helm/image artifact).</p>
     <p>e.g.: <b>helm/my-chart</b></p>`,
   'pipeline.config.bake.manifest.helm.rawOverrides':
     'Use <i>--set</i> instead of <i>--set-string</i> when injecting override values. Values injected using <i>--set</i> will be converted to primitive types by Helm.',

package/src/navigation/UrlBuilder.ts

@@ -244,6 +244,21 @@ class ServerGroupsUrlBuilder implements IUrlBuilder {
       { inherit: false },
     );
 
+    if (
+      input.provider === 'ecs' ||
+      (input.provider && input.provider.includes('ecs')) ||
+      input.provider === 'aws' ||
+      (input.provider && input.provider.includes('aws'))
+    ) {
+      const serverGroupParts = input.serverGroup.split('-');
+      let clusterName = input.serverGroup;
+      if (serverGroupParts.length > 1 && serverGroupParts[serverGroupParts.length - 1].match(/^v\d+$/)) {
+        clusterName = serverGroupParts.slice(0, -1).join('-');
+      }
+
+      return UrlBuilderUtils.buildUrl(href, { clusters: `${input.account}:${clusterName}` });
+    }
+
     return UrlBuilderUtils.buildUrl(href, { q: input.serverGroup, acct: input.account, reg: input.region });
   }
 }

package/src/notification/NotificationsList.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { capitalize, filter, flatten, get, isEmpty } from 'lodash';
+import { capitalize, get, isEmpty } from 'lodash';
 import React from 'react';
 import { from as observableFrom, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -154,15 +154,19 @@ export class NotificationsList extends React.Component<INotificationsListProps,
     observableFrom(AppNotificationsService.getNotificationsForApplication(application.name))
       .pipe(takeUntil(this.destroy$))
       .subscribe((notifications) => {
-        const results = filter(
-          flatten(
-            supportedNotificationTypes.map((type) => {
-              return get(notifications, type) || [];
-            }),
-          ),
+        const newNotifications = supportedNotificationTypes.reduce<INotification[]>((acc, type) => {
+          const typeNotifications = notifications[type];
+          if (typeNotifications && typeof typeNotifications !== 'string') {
+            acc.push(...typeNotifications);
+          }
+          return acc;
+        }, []);
+
+        const applicationNotifications = newNotifications.filter(
           (allow) => allow !== undefined && allow.level === 'application',
         );
-        updateNotifications(results);
+
+        updateNotifications(applicationNotifications);
       });
     this.setState({ isNotificationsDirty: false });
   };

package/src/pipeline/config/stages/bakeManifest/helm/BakeHelmConfigForm.tsx

@@ -17,12 +17,13 @@ import { CheckboxInput, TextInput } from '../../../../../presentation';
 
 export interface IBakeHelmConfigFormState {
   gitRepoArtifactAccountNames: string[];
+  helmImageArtifactAccountNames: string[];
 }
 
 export class BakeHelmConfigForm extends React.Component<IFormikStageConfigInjectedProps, IBakeHelmConfigFormState> {
   constructor(props: IFormikStageConfigInjectedProps) {
     super(props);
-    this.state = { gitRepoArtifactAccountNames: [] };
+    this.state = { gitRepoArtifactAccountNames: [], helmImageArtifactAccountNames: [] };
   }
 
   private static readonly excludedArtifactTypes = excludeAllTypesExcept(
@@ -37,6 +38,7 @@ export class BakeHelmConfigForm extends React.Component<IFormikStageConfigInject
     ArtifactTypePatterns.HELM_CHART,
     ArtifactTypePatterns.HTTP_FILE,
     ArtifactTypePatterns.ORACLE_OBJECT,
+    ArtifactTypePatterns.HELM_IMAGE,
   );
 
   public componentDidMount() {
@@ -73,6 +75,9 @@ export class BakeHelmConfigForm extends React.Component<IFormikStageConfigInject
         gitRepoArtifactAccountNames: artifactAccounts
           .filter((account) => account.types.some((type) => ArtifactTypePatterns.GIT_REPO.test(type)))
           .map((account) => account.name),
+        helmImageArtifactAccountNames: artifactAccounts
+          .filter((account) => account.types.some((type) => ArtifactTypePatterns.HELM_IMAGE.test(type)))
+          .map((account) => account.name),
       });
     });
   }
@@ -208,7 +213,8 @@ export class BakeHelmConfigForm extends React.Component<IFormikStageConfigInject
           pipeline={this.props.pipeline}
           stage={stage}
         />
-        {this.state.gitRepoArtifactAccountNames.includes(this.getInputArtifact(stage, 0).account) && (
+        {(this.state.gitRepoArtifactAccountNames.includes(this.getInputArtifact(stage, 0).account) ||
+          this.state.helmImageArtifactAccountNames.includes(this.getInputArtifact(stage, 0).account)) && (
           <StageConfigField label="Helm Chart File Path" helpKey="pipeline.config.bake.manifest.helm.chartFilePath">
             <TextInput
               onChange={(e: React.ChangeEvent<any>) => {

package/src/pipeline/config/triggers/artifacts/helm-image/HelmImageArtifactEditor.tsx

@@ -0,0 +1,169 @@
+import { cloneDeep } from 'lodash';
+import React from 'react';
+import type { Option } from 'react-select';
+
+import { ArtifactService } from '../ArtifactService';
+import { ArtifactTypePatterns } from '../../../../../artifact/ArtifactTypes';
+import type { IArtifact, IArtifactEditorProps, IArtifactKindConfig } from '../../../../../domain';
+import { TetheredCreatable, TetheredSelect } from '../../../../../presentation';
+import { StageConfigField } from '../../../stages/common';
+import { Spinner } from '../../../../../widgets/spinners/Spinner';
+
+const TYPE = 'helm/image';
+
+interface IHelmImageArtifactEditorState {
+  names: string[];
+  versions: Array<Option<string>>;
+  versionsLoading: boolean;
+  namesLoading: boolean;
+}
+
+class HelmImageEditor extends React.Component<IArtifactEditorProps, IHelmImageArtifactEditorState> {
+  public state: IHelmImageArtifactEditorState = {
+    names: [],
+    versions: [],
+    versionsLoading: true,
+    namesLoading: true,
+  };
+
+  // taken from https://github.com/semver/semver/issues/232
+  private SEMVER = new RegExp(
+    /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(-(0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(\.(0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*)?(\+[0-9a-zA-Z-]+(\.[0-9a-zA-Z-]+)*)?$/,
+  );
+
+  constructor(props: IArtifactEditorProps) {
+    super(props);
+    const { artifact } = this.props;
+    if (artifact.type !== TYPE) {
+      const clonedArtifact = cloneDeep(artifact);
+      clonedArtifact.type = TYPE;
+      props.onChange(clonedArtifact);
+    }
+
+    ArtifactService.getArtifactNames(TYPE, this.props.account.name).then(
+      (names) => {
+        this.setState({
+          names,
+          namesLoading: false,
+        });
+      },
+      () => {
+        this.setState({
+          names: [],
+          namesLoading: false,
+          versionsLoading: false,
+          versions: [],
+        });
+      },
+    );
+  }
+
+  public componentDidMount() {
+    const { artifact } = this.props;
+    if (artifact.name) {
+      this.getChartVersionOptions(artifact.name);
+    }
+  }
+
+  public componentDidUpdate(prevProps: IArtifactEditorProps) {
+    if (this.props.account.name !== prevProps.account.name) {
+      ArtifactService.getArtifactNames(TYPE, this.props.account.name).then(
+        (names) => {
+          this.setState({
+            names,
+            namesLoading: false,
+            versions: [],
+          });
+        },
+        () => {
+          this.setState({
+            names: [],
+            namesLoading: false,
+            versions: [],
+          });
+        },
+      );
+    }
+  }
+
+  public render() {
+    const { artifact } = this.props;
+    const nameOptions = this.state.names.map((name) => ({ value: name, label: name }));
+
+    return (
+      <>
+        <StageConfigField label="Name">
+          {!this.state.namesLoading && (
+            <TetheredSelect
+              options={nameOptions}
+              value={artifact.name || ''}
+              onChange={(e: Option) => {
+                this.onChange(e, 'name');
+                this.getChartVersionOptions(e.value.toString());
+              }}
+              clearable={false}
+            />
+          )}
+          {this.state.namesLoading && <Spinner />}
+        </StageConfigField>
+        <StageConfigField label="Version">
+          {!this.state.versionsLoading && (
+            <TetheredCreatable
+              options={this.state.versions}
+              value={artifact.version || ''}
+              onChange={(e: Option) => {
+                this.onChange(e, 'version');
+              }}
+              clearable={false}
+            />
+          )}
+          {this.state.versionsLoading && <Spinner />}
+        </StageConfigField>
+      </>
+    );
+  }
+
+  private onChange = (e: Option, field: keyof IArtifact) => {
+    const clone = cloneDeep(this.props.artifact);
+    (clone[field] as any) = e.value.toString();
+    this.props.onChange(clone);
+  };
+
+  private getChartVersionOptions(chartName: string) {
+    const { artifact, account } = this.props;
+    this.setState({ versionsLoading: true });
+    ArtifactService.getArtifactVersions(TYPE, account.name, chartName).then((versions: string[]) => {
+      // if the version doesn't match SEMVER we assume that it's a regular expression or SpEL expression
+      // and add it to the list of valid versions
+      if (artifact.version && !this.SEMVER.test(artifact.version)) {
+        versions = versions.concat(artifact.version);
+      }
+      this.setState({
+        versions: versions.map((v) => ({ label: v, value: v })),
+        versionsLoading: false,
+      });
+    });
+  }
+}
+
+export const HelmImageMatch: IArtifactKindConfig = {
+  label: 'Helm',
+  typePattern: ArtifactTypePatterns.HELM_IMAGE,
+  type: TYPE,
+  isDefault: false,
+  isMatch: true,
+  description: 'A helm chart to be deployed',
+  key: 'helm',
+  editCmp: HelmImageEditor,
+};
+
+export const HelmImageDefault: IArtifactKindConfig = {
+  label: 'Helm',
+  typePattern: ArtifactTypePatterns.HELM_IMAGE,
+  type: TYPE,
+  isDefault: true,
+  isMatch: false,
+  description: 'A helm chart to be deployed',
+  key: 'default.helm',
+  editCmp: HelmImageEditor,
+};

package/src/pipeline/config/triggers/artifacts/index.ts

@@ -7,6 +7,7 @@ import { GcsDefault, GcsMatch } from './gcs/GcsArtifactEditor';
 import { GithubDefault, GithubMatch } from './github/GithubArtifactEditor';
 import { GitlabDefault, GitlabMatch } from './gitlab/GitlabArtifactEditor';
 import { GitRepoDefault, GitRepoMatch } from './gitrepo/GitRepoArtifactEditor';
+import { HelmImageDefault, HelmImageMatch } from './helm-image/HelmImageArtifactEditor';
 import { HelmDefault, HelmMatch } from './helm/HelmArtifactEditor';
 import { HttpDefault, HttpMatch } from './http/HttpArtifactEditor';
 import { IvyDefault, IvyMatch } from './ivy/IvyArtifactEditor';
@@ -35,6 +36,8 @@ export const artifactKindConfigs: IArtifactKindConfig[] = [
   GitlabDefault,
   HelmMatch,
   HelmDefault,
+  HelmImageMatch,
+  HelmImageDefault,
   HttpMatch,
   HttpDefault,
   IvyMatch,

package/src/pipeline/config/validation/PipelineConfigValidator.ts

@@ -1,5 +1,5 @@
 import type { FormikErrors } from 'formik';
-import { flatten, isNumber, values } from 'lodash';
+import { flatten, isEmpty, isNumber, values } from 'lodash';
 import { $log, $q } from 'ngimport';
 import type { Subscription } from 'rxjs';
 import { Subject } from 'rxjs';
@@ -195,7 +195,7 @@ export class PipelineConfigValidator {
     if (pipeline.strategy && !pipeline.stages.some((stage) => stage.type === 'deploy')) {
       messages.push('To be able to create new server groups, a custom strategy should contain a Deploy stage.');
     }
-    if ((pipeline.expectedArtifacts || []).some((a) => !a.matchArtifact || (a.matchArtifact as any) === {})) {
+    if ((pipeline.expectedArtifacts || []).some((a) => !a.matchArtifact || isEmpty(a.matchArtifact))) {
       messages.push('Every expected artifact must specify an artifact to match against.');
     }
     return messages;

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

@@ -89,9 +89,44 @@ export class ExecutionGroups extends React.Component<IExecutionGroupsProps, IExe
     const { groups = [], container, showingDetails } = this.state;
     const hasGroups = groups.length > 0;
     const className = `row pipelines executions ${showingDetails ? 'showing-details' : ''}`;
-    const allGroups = (groups || [])
+
+    // Check if there are any duplicate execution IDs before applying deduplication
+    const allExecutionIds = groups.flatMap((group) => group.executions.map((e) => e.id));
+    const uniqueIds = new Set(allExecutionIds);
+    const hasDuplicates = allExecutionIds.length !== uniqueIds.size;
+
+    let processedGroups;
+
+    if (hasDuplicates) {
+      // Only apply deduplication if there are actually duplicate executions
+      const processedExecutionIds = new Set<string>();
+      const deduplicatedGroups = groups.map((group) => ({
+        ...group,
+        executions: [...group.executions],
+        runningExecutions: [...group.runningExecutions],
+      }));
+
+      deduplicatedGroups.forEach((group) => {
+        group.executions = group.executions.filter((execution) => {
+          if (processedExecutionIds.has(execution.id)) return false;
+          processedExecutionIds.add(execution.id);
+          return true;
+        });
+
+        group.runningExecutions = group.runningExecutions.filter((execution) =>
+          group.executions.some((e) => e.id === execution.id),
+        );
+      });
+
+      processedGroups = deduplicatedGroups.filter((group) => group.executions.length > 0);
+    } else {
+      // No duplicates, use the original groups
+      processedGroups = groups;
+    }
+
+    const allGroups = (processedGroups || [])
       .filter((g: IExecutionGroup) => g?.config?.migrationStatus === 'Started')
-      .concat(groups.filter((g) => g?.config?.migrationStatus !== 'Started'));
+      .concat(processedGroups.filter((g) => g?.config?.migrationStatus !== 'Started'));
 
     const executionGroups = allGroups.map((group: IExecutionGroup) => (
       <ExecutionGroup parent={container} key={group.heading} group={group} application={this.props.application} />

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

@@ -255,9 +255,27 @@ export class ExecutionFilterService {
   private static groupExecutions(filteredExecutions: IExecution[], application: Application): IExecutionGroup[] {
     const groups: IExecutionGroup[] = [];
     let executions: IExecution[] = [];
-    forOwn(groupBy(filteredExecutions, 'name'), (groupedExecutions) => {
-      executions = executions.concat(groupedExecutions.sort((a, b) => this.executionSorter(a, b)));
-    });
+
+    // Check if there are any duplicate execution IDs before applying deduplication
+    const executionIds = filteredExecutions.map((e) => e.id);
+    const uniqueIds = new Set(executionIds);
+    const hasDuplicates = executionIds.length !== uniqueIds.size;
+
+    if (hasDuplicates) {
+      // Only apply deduplication if there are actually duplicate executions
+      const processedExecutionIds = new Set<string>();
+
+      forOwn(groupBy(filteredExecutions, 'name'), (groupedExecutions) => {
+        const uniqueExecutions = groupedExecutions.filter((execution) => !processedExecutionIds.has(execution.id));
+        uniqueExecutions.forEach((execution) => processedExecutionIds.add(execution.id));
+        executions = executions.concat(uniqueExecutions.sort((a, b) => this.executionSorter(a, b)));
+      });
+    } else {
+      // No duplicates, use the original logic
+      forOwn(groupBy(filteredExecutions, 'name'), (groupedExecutions) => {
+        executions = executions.concat(groupedExecutions.sort((a, b) => this.executionSorter(a, b)));
+      });
+    }
 
     executions.forEach((execution: IExecution) => {
       const config: IPipeline = application.pipelineConfigs.data.find(
@@ -273,6 +291,11 @@ export class ExecutionFilterService {
     if (sortFilter.groupBy === 'name') {
       const executionGroups = groupBy(executions, 'name');
       forOwn(executionGroups, (groupExecutions, key) => {
+        // Skip empty groups
+        if (groupExecutions.length === 0) {
+          return;
+        }
+
         const matchId = (pipelineConfig: IPipeline) => pipelineConfig.id === groupExecutions[0].pipelineConfigId;
         const config = application.pipelineConfigs.data.concat(application.strategyConfigs?.data ?? []).find(matchId);
         groupExecutions.sort((a, b) => this.executionSorter(a, b));
@@ -291,6 +314,11 @@ export class ExecutionFilterService {
     if (sortFilter.groupBy === 'timeBoundary') {
       const grouped = this.groupByTimeBoundary(executions);
       forOwn(grouped, (groupExecutions: IExecution[], key) => {
+        // Skip empty groups
+        if (groupExecutions.length === 0) {
+          return;
+        }
+
         groupExecutions.sort((a, b) => this.executionSorter(a, b));
         groups.push({
           heading: key,
@@ -333,6 +361,19 @@ export class ExecutionFilterService {
 
   private static executionsAreDifferent(oldGroup: IExecutionGroup, newGroup: IExecutionGroup): boolean {
     let changeDetected = false;
+
+    const uniqueOldExecutions: IExecution[] = [];
+    const oldExecutionIds = new Set<string>();
+
+    oldGroup.executions.forEach((execution) => {
+      if (!oldExecutionIds.has(execution.id)) {
+        uniqueOldExecutions.push(execution);
+        oldExecutionIds.add(execution.id);
+      }
+    });
+
+    oldGroup.executions = uniqueOldExecutions;
+
     oldGroup.executions.forEach((execution) => {
       const newExecution = newGroup.executions.find((g) => g.id === execution.id);
       if (!newExecution) {
@@ -345,14 +386,18 @@ export class ExecutionFilterService {
         }
       }
     });
+
+    const existingExecutionIds = new Set(oldGroup.executions.map((e) => e.id));
+
     newGroup.executions.forEach((execution) => {
-      const oldExecution = oldGroup.executions.find((g) => g.id === execution.id);
-      if (!oldExecution) {
+      if (!existingExecutionIds.has(execution.id)) {
         changeDetected = true;
         $log.debug('new execution found, adding', execution.id);
         oldGroup.executions.push(execution);
+        existingExecutionIds.add(execution.id);
       }
     });
+
     return changeDetected;
   }
 

package/src/presentation/details/Details.tsx

@@ -10,10 +10,18 @@ interface IDetailsProps {
 interface IDetailsHeaderProps {
   icon: React.ReactNode;
   name: string;
+  notifications?: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+interface IDetailsContentProps {
+  loading: boolean;
+  children: React.ReactNode;
 }
 
 interface IDetailsSFCWithExtras extends React.SFC<IDetailsProps> {
   Header: React.SFC<IDetailsHeaderProps>;
+  Content: React.FunctionComponent<IDetailsContentProps>;
 }
 
 const CloseButton = (
@@ -31,8 +39,12 @@ const DetailsHeader: React.SFC<IDetailsHeaderProps> = (props) => (
     {CloseButton}
     <div className="header-text horizontal middle">
       {props.icon}
-      <h3 className="horizontal middle space-between flex-1">{props.name}</h3>
+      <h3 className="horizontal middle space-between flex-1">
+        {props.name}
+        {props.notifications && props.notifications}
+      </h3>
     </div>
+    {props.actions && <div className="actions">{props.actions}</div>}
     <div>{props.children}</div>
   </div>
 );
@@ -49,6 +61,11 @@ const Details: IDetailsSFCWithExtras = (props) => (
   <div className="details-panel">{props.loading ? loading : props.children}</div>
 );
 
+const DetailsContent = ({ loading, children }: IDetailsContentProps) => (
+  <div className="content">{loading ? loading : children}</div>
+);
+
 Details.Header = DetailsHeader;
+Details.Content = DetailsContent;
 
 export { Details };

package/src/presentation/forms/FormikForm.tsx

@@ -27,5 +27,5 @@ interface IFormikFormImplProps<T> extends IFormikFormProps<T> {
  * }} />
  * ```
  */
-const FormikFormImpl = <T extends any>({ render, formik }: IFormikFormImplProps<T>) => render(formik);
+const FormikFormImpl = <T,>({ render, formik }: IFormikFormImplProps<T>) => render(formik);
 export const FormikForm: React.ComponentType<IFormikFormProps<any>> = connect(FormikFormImpl);