@spinnaker/core 0.11.4 → 0.12.0

package/src/managed/externals/toggleResourceManagement.tsx

@@ -5,29 +5,10 @@ import { ManagedWriter } from '../ManagedWriter';
 import { Application } from '../../application';
 import { ConfirmationModalService } from '../../confirmationModal';
 import { IManagedResource, IManagedResourceSummary, ManagedResourceStatus } from '../../domain';
+import { ActuationWarning, MultiRegionWarning, ToggleResourceManagement } from '../resources/ToggleResourceManagement';
 
 import './ManagedResourceStatusIndicator.less';
 
-interface IToggleConfiguration {
-  pauseWarning?: JSX.Element;
-}
-
-const viewConfigurationByStatus: { [status in ManagedResourceStatus]?: IToggleConfiguration } = {
-  ACTUATING: {
-    pauseWarning: (
-      <p>
-        <div className="horizontal top sp-padding-m alert alert-warning">
-          <i className="fa fa-exclamation-triangle sp-margin-m-right sp-margin-xs-top" />
-          <span>
-            Pausing management will not interrupt the action Spinnaker is currently performing to resolve the difference
-            from desired state.
-          </span>
-        </div>
-      </p>
-    ),
-  },
-};
-
 /***
  * If the resource is not managed, or management is paused, this will return an immediate promise with a true value.
  * If the resource is managed, an interstitial modal will prompt the user to pause resource management. The promise will
@@ -71,49 +52,21 @@ export const toggleResourcePause = (
 
   return ConfirmationModalService.confirm({
     header: `Really ${isPaused ? 'resume' : 'pause'} resource management?`,
-    bodyContent: <PopoverToggleBodyText resourceSummary={resourceSummary} />,
+    bodyContent: (
+      <ToggleResourceManagement
+        isActuating={resourceSummary.status === ManagedResourceStatus.ACTUATING}
+        isPaused={isPaused}
+        regions={getRegions(resourceSummary)}
+      />
+    ),
     account: resourceSummary.locations.account,
     buttonText: `${isPaused ? 'Resume' : 'Pause'} management`,
     submitMethod,
   });
 };
 
-const PopoverToggleBodyText = ({ resourceSummary }: { resourceSummary: IManagedResourceSummary }) => {
-  const { isPaused, status } = resourceSummary;
-  if (isPaused) {
-    return (
-      <>
-        <p>Spinnaker will resume taking action to correct differences from the desired state.</p>
-        <MultiRegionWarning resourceSummary={resourceSummary} />
-      </>
-    );
-  } else {
-    return (
-      <>
-        <p>While a resource is paused, Spinnaker will not take action to correct differences from the desired state.</p>
-        {viewConfigurationByStatus[status]?.pauseWarning}
-        <MultiRegionWarning resourceSummary={resourceSummary} />
-      </>
-    );
-  }
-};
-
-const MultiRegionWarning = ({ resourceSummary }: { resourceSummary: IManagedResourceSummary }) => {
-  const { isPaused, locations } = resourceSummary;
-  const regions = locations.regions.map((r) => r.name).sort();
-  if (regions.length < 2) {
-    return null;
-  }
-  return (
-    <div className="horizontal top sp-padding-m alert alert-warning">
-      <i className="fa fa-exclamation-triangle sp-margin-m-right sp-margin-xs-top" />
-      <span>
-        {isPaused ? 'Resuming' : 'Pausing'} management of this resource will affect the following regions:{' '}
-        <b>{regions.join(', ')}</b>.
-      </span>
-    </div>
-  );
-};
+const getRegions = (resourceSummary: IManagedResourceSummary) =>
+  resourceSummary.locations.regions.map((r) => r.name).sort();
 
 const BodyText = ({ resourceSummary }: { resourceSummary: IManagedResourceSummary }) => {
   const { status } = resourceSummary;
@@ -126,8 +79,8 @@ const BodyText = ({ resourceSummary }: { resourceSummary: IManagedResourceSummar
         If you need to temporarily stop Spinnaker from managing this resource — for example, if something is wrong and
         manual intervention is required — you can pause management and resume it later.
       </p>
-      {viewConfigurationByStatus[status]?.pauseWarning}
-      <MultiRegionWarning resourceSummary={resourceSummary} />
+      {status === ManagedResourceStatus.ACTUATING && <ActuationWarning />}
+      <MultiRegionWarning isPaused regions={getRegions(resourceSummary)} />
     </>
   );
 };

package/src/managed/graphql/graphql-sdk.ts

@@ -120,6 +120,7 @@ export interface MdConfig {
   updatedAt?: Maybe<Scalars['InstantTime']>;
   rawConfig?: Maybe<Scalars['String']>;
   processedConfig?: Maybe<Scalars['String']>;
+  previewEnvironmentsConfigured?: Maybe<Scalars['Boolean']>;
 }
 
 export interface MdConstraint {
@@ -545,6 +546,7 @@ export type FetchApplicationQueryVariables = Exact<{
 export type FetchApplicationQuery = { __typename?: 'Query' } & {
   application?: Maybe<
     { __typename?: 'MdApplication' } & Pick<MdApplication, 'id' | 'name' | 'account'> & {
+        config?: Maybe<{ __typename?: 'MdConfig' } & Pick<MdConfig, 'id' | 'previewEnvironmentsConfigured'>>;
         environments: Array<
           { __typename?: 'MdEnvironment' } & Pick<MdEnvironment, 'isDeleting'> & {
               state: { __typename?: 'MdEnvironmentState' } & Pick<MdEnvironmentState, 'id'> & {
@@ -828,6 +830,12 @@ export type ImportDeliveryConfigMutationVariables = Exact<{
 
 export type ImportDeliveryConfigMutation = { __typename?: 'Mutation' } & Pick<Mutation, 'importDeliveryConfig'>;
 
+export type ToggleResourceManagementMutationVariables = Exact<{
+  payload?: Maybe<MdToggleResourceManagementPayload>;
+}>;
+
+export type ToggleResourceManagementMutation = { __typename?: 'Mutation' } & Pick<Mutation, 'toggleResourceManagement'>;
+
 export const ActionDetailsFragmentDoc = gql`
   fragment actionDetails on MdAction {
     id
@@ -931,6 +939,10 @@ export const FetchApplicationDocument = gql`
       id
       name
       account
+      config {
+        id
+        previewEnvironmentsConfigured
+      }
       environments {
         ...baseEnvironmentFields
         isDeleting
@@ -1888,3 +1900,45 @@ export type ImportDeliveryConfigMutationOptions = Apollo.BaseMutationOptions<
   ImportDeliveryConfigMutation,
   ImportDeliveryConfigMutationVariables
 >;
+export const ToggleResourceManagementDocument = gql`
+  mutation ToggleResourceManagement($payload: MdToggleResourceManagementPayload) {
+    toggleResourceManagement(payload: $payload)
+  }
+`;
+export type ToggleResourceManagementMutationFn = Apollo.MutationFunction<
+  ToggleResourceManagementMutation,
+  ToggleResourceManagementMutationVariables
+>;
+
+/**
+ * __useToggleResourceManagementMutation__
+ *
+ * To run a mutation, you first call `useToggleResourceManagementMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useToggleResourceManagementMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [toggleResourceManagementMutation, { data, loading, error }] = useToggleResourceManagementMutation({
+ *   variables: {
+ *      payload: // value for 'payload'
+ *   },
+ * });
+ */
+export function useToggleResourceManagementMutation(
+  baseOptions?: Apollo.MutationHookOptions<ToggleResourceManagementMutation, ToggleResourceManagementMutationVariables>,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useMutation<ToggleResourceManagementMutation, ToggleResourceManagementMutationVariables>(
+    ToggleResourceManagementDocument,
+    options,
+  );
+}
+export type ToggleResourceManagementMutationHookResult = ReturnType<typeof useToggleResourceManagementMutation>;
+export type ToggleResourceManagementMutationResult = Apollo.MutationResult<ToggleResourceManagementMutation>;
+export type ToggleResourceManagementMutationOptions = Apollo.BaseMutationOptions<
+  ToggleResourceManagementMutation,
+  ToggleResourceManagementMutationVariables
+>;

package/src/managed/graphql/schema.graphql

@@ -31,6 +31,7 @@ type MdConfig {
   updatedAt: InstantTime
   rawConfig: String
   processedConfig: String
+  previewEnvironmentsConfigured: Boolean
 }
 
 type MdEnvironment {

package/src/managed/overview/EnvironmentsOverview.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { ApplicationQueryError } from '../ApplicationQueryError';
 import { EnvironmentOverview } from './EnvironmentOverview';
+import { PreviewEnvironments } from './PreviewEnvironments';
 import { EnvironmentsRender, useOrderedEnvironment } from '../environmentBaseElements/EnvironmentsRender';
 import { useFetchApplicationQuery } from '../graphql/graphql-sdk';
 import { Messages } from '../messages/Messages';
@@ -25,11 +26,13 @@ export const EnvironmentsOverview = () => {
     environments.filter((env) => !env.isPreview),
   );
 
-  const { environments: previewEnvironments, ...previewEnvironmentsProps } = useOrderedEnvironment(
+  const previewEnvironments = useOrderedEnvironment(
     wrapperRef,
     environments.filter((env) => env.isPreview),
   );
 
+  const previewEnvironmentsConfigured = data?.application?.config?.previewEnvironmentsConfigured;
+
   let content;
   if (loading && !data) {
     content = <Spinner {...spinnerProps} message="Loading environments..." />;
@@ -46,16 +49,10 @@ export const EnvironmentsOverview = () => {
                 <EnvironmentOverview key={env.name} environment={env} />
               ))}
             </EnvironmentsRender>
-            {Boolean(previewEnvironments.length) && (
-              <h4 className="sp-margin-2xl-top sp-margin-m-bottom self-left">
-                <b>Preview Environments</b>
-              </h4>
-            )}
-            <EnvironmentsRender {...previewEnvironmentsProps}>
-              {previewEnvironments.map((env) => (
-                <EnvironmentOverview key={env.name} environment={env} />
-              ))}
-            </EnvironmentsRender>
+            <PreviewEnvironments
+              orderedEnvironments={previewEnvironments}
+              isConfigured={previewEnvironmentsConfigured}
+            />
           </>
         ) : (
           <div className="error-message">No environments found</div>

package/src/managed/overview/PreviewEnvironments.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { EnvironmentOverview } from './EnvironmentOverview';
+import { EnvironmentsRender, OrderedEnvironments } from '../environmentBaseElements/EnvironmentsRender';
+import { QueryEnvironment } from './types';
+import { getDocsUrl } from '../utils/defaults';
+import { useLogEvent } from '../utils/logging';
+
+interface IPreviewEnvironmentsProps {
+  orderedEnvironments: OrderedEnvironments<QueryEnvironment>;
+  isConfigured?: boolean;
+}
+
+export const PreviewEnvironments = ({ orderedEnvironments, isConfigured }: IPreviewEnvironmentsProps) => {
+  const { environments: previewEnvironments, ...previewEnvironmentsProps } = orderedEnvironments;
+  const logClick = useLogEvent('PreviewEnvironments');
+  const docsLink = getDocsUrl('previewEnvironments');
+  const hasActivePreviewEnvironments = previewEnvironments.length > 0;
+
+  return (
+    <>
+      {(isConfigured || hasActivePreviewEnvironments) && (
+        <h4 className="sp-margin-2xl-top sp-margin-m-bottom self-left">
+          <b>Preview Environments</b>
+        </h4>
+      )}
+      {isConfigured && !hasActivePreviewEnvironments && (
+        <div className="self-left">
+          No PRs matching your branch filter were found.
+          <br />
+          Your preview environments will automatically appear here once you create a PR from a branch matching your
+          config definition.{' '}
+          {docsLink && (
+            <a target="_blank" onClick={() => logClick({ action: 'Learn More' })} href={docsLink}>
+              Learn More
+            </a>
+          )}
+        </div>
+      )}
+      <EnvironmentsRender {...previewEnvironmentsProps}>
+        {previewEnvironments.map((env) => (
+          <EnvironmentOverview key={env.name} environment={env} />
+        ))}
+      </EnvironmentsRender>
+    </>
+  );
+};

package/src/managed/overview/Resource.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
 
 import { ResourceTask } from './ResourceTask';
+import { ConfirmationModalService } from '../../confirmationModal/confirmationModal.service';
 import { EnvironmentItem } from '../environmentBaseElements/EnvironmentItem';
-import { MdResourceActuationState, useFetchResourceStatusQuery } from '../graphql/graphql-sdk';
+import {
+  FetchResourceStatusDocument,
+  MdResourceActuationState,
+  useFetchResourceStatusQuery,
+  useToggleResourceManagementMutation,
+} from '../graphql/graphql-sdk';
 import { Icon, Markdown, useApplicationContextSafe } from '../../presentation';
 import { showManagedResourceHistoryModal } from '../resourceHistory/ManagedResourceHistoryModal';
 import { showResourceDefinitionModal } from '../resources/ResourceDefinitionModal';
 import { ResourceTitle } from '../resources/ResourceTitle';
+import { ToggleResourceManagement } from '../resources/ToggleResourceManagement';
 import { IResourceLinkProps, resourceManager } from '../resources/resourceRegistry';
 import { QueryResource } from './types';
 import { getIsDebugMode } from '../utils/debugMode';
@@ -23,22 +30,30 @@ const statusUtils: {
   };
 } = {
   ERROR: { color: 'var(--color-status-error)', icon: 'fas fa-times', defaultReason: 'Failed to update resource' },
-  NOT_MANAGED: { color: 'var(--color-status-warning)', icon: 'fas fa-pause', defaultReason: 'Resource is not managed' },
+  NOT_MANAGED: {
+    color: 'var(--color-status-warning)',
+    icon: 'fas fa-pause',
+    defaultReason: 'Resource management is paused',
+  },
   WAITING: { icon: 'far fa-hourglass', defaultReason: 'Resource is currently locked and can not be updated' },
   PROCESSING: { icon: 'far fa-hourglass', defaultReason: 'Resource is being updated' },
   DELETING: { icon: 'far fa-trash-alt', defaultReason: 'Resource is being deleted' },
 };
 
-const Status = ({
-  appName,
-  environmentName,
-  resourceId,
-}: {
+interface IStatusProps {
   appName: string;
   environmentName: string;
   resourceId: string;
-}) => {
+  regions: string[];
+  account?: string;
+}
+
+const Status = ({ appName, environmentName, resourceId, regions, account }: IStatusProps) => {
   const { data: resourceStatuses, error, loading } = useFetchResourceStatusQuery({ variables: { appName } });
+  const [enableResourceManagement] = useToggleResourceManagementMutation({
+    variables: { payload: { id: resourceId, isPaused: false } },
+    refetchQueries: [{ query: FetchResourceStatusDocument, variables: { appName } }],
+  });
   const state = resourceStatuses?.application?.environments
     .find((env) => env.name === environmentName)
     ?.state.resources?.find((resource) => resource.id === resourceId)?.state;
@@ -51,32 +66,53 @@ const Status = ({
       </div>
     );
   }
-
-  if (state) {
-    if (state.status === 'UP_TO_DATE') return null;
-
-    return (
-      <div className="resource-status">
-        <i
-          className={statusUtils[state.status].icon}
-          style={{ color: statusUtils[state.status].color || 'var(--color-titanium)' }}
-        />
-        <div>
-          <div>{state.reason || statusUtils[state.status].defaultReason}</div>
-          {state.event && state.event !== state.reason && <Markdown className="event" message={state.event} />}
-          {Boolean(state.tasks?.length) && (
-            <ul className="tasks-list">
-              {state.tasks?.map(({ id, name }) => (
-                <ResourceTask key={id} id={id} name={name} />
-              ))}
-            </ul>
-          )}
-        </div>
+  if (!state) return <Spinner className="sp-margin-xs-top" mode="circular" size="nano" color="var(--color-accent)" />;
+  if (state.status === 'UP_TO_DATE') return null;
+  const isNotManaged = state.status === 'NOT_MANAGED';
+  const reasonElem = (
+    <div>
+      {state.reason || statusUtils[state.status].defaultReason}
+      {isNotManaged ? ' (click to enable...)' : undefined}
+    </div>
+  );
+  return (
+    <div className="resource-status">
+      <i
+        className={statusUtils[state.status].icon}
+        style={{
+          color: statusUtils[state.status].color || 'var(--color-titanium)',
+        }}
+      />
+      <div>
+        {isNotManaged ? (
+          <button
+            className="as-link"
+            onClick={() => {
+              ConfirmationModalService.confirm({
+                header: `Really resume resource management?`,
+                bodyContent: <ToggleResourceManagement isPaused regions={regions} />,
+                account: account,
+                buttonText: `Resume management`,
+                submitMethod: enableResourceManagement,
+              });
+            }}
+          >
+            {reasonElem}
+          </button>
+        ) : (
+          reasonElem
+        )}
+        {state.event && state.event !== state.reason && <Markdown className="event" message={state.event} />}
+        {Boolean(state.tasks?.length) && (
+          <ul className="tasks-list">
+            {state.tasks?.map(({ id, name }) => (
+              <ResourceTask key={id} id={id} name={name} />
+            ))}
+          </ul>
+        )}
       </div>
-    );
-  }
-
-  return <Spinner className="sp-margin-xs-top" mode="circular" size="nano" color="var(--color-accent)" />;
+    </div>
+  );
 };
 
 export const Resource = ({ resource, environment }: { resource: QueryResource; environment: string }) => {
@@ -142,7 +178,13 @@ export const Resource = ({ resource, environment }: { resource: QueryResource; e
         )}
       </div>
       <div>
-        <Status appName={app.name} environmentName={environment} resourceId={resource.id} />
+        <Status
+          appName={app.name}
+          environmentName={environment}
+          resourceId={resource.id}
+          account={account}
+          regions={regions}
+        />
       </div>
     </EnvironmentItem>
   );

package/src/managed/overview/artifact/ArtifactVersionTasks.tsx

@@ -7,7 +7,8 @@ import { Tooltip, useApplicationContextSafe } from '../../../presentation';
 import { QueryArtifactVersionTask, QueryArtifactVersionTaskStatus } from '../types';
 import { TOOLTIP_DELAY_SHOW } from '../../utils/defaults';
 import { useLogEvent } from '../../utils/logging';
-import { NotifierService, Spinner } from '../../../widgets';
+import { useNotifyOnError } from '../../utils/useNotifyOnError.hook';
+import { Spinner } from '../../../widgets';
 
 import './ArtifactVersionTasks.less';
 
@@ -55,15 +56,7 @@ const ArtifactVersionTask = ({ type, artifact, task }: IArtifactVersionTaskProps
     },
   });
 
-  React.useEffect(() => {
-    if (error) {
-      NotifierService.publish({
-        key: task.id,
-        content: `Failed to re-run ${type} - ${error.message}`,
-        options: { type: 'error' },
-      });
-    }
-  }, [error]);
+  useNotifyOnError({ key: task.id, content: `Failed to re-run ${type}`, error });
 
   return (
     <div className="version-task">

package/src/managed/overview/artifact/Constraints.tsx

@@ -10,7 +10,8 @@ import { CollapsibleSection, useApplicationContextSafe } from '../../../presenta
 import { ArtifactVersionProps, QueryConstraint } from '../types';
 import { getConstraintsStatusSummary } from './utils';
 import { useLogEvent } from '../../utils/logging';
-import { NotifierService, Spinner } from '../../../widgets';
+import { useNotifyOnError } from '../../utils/useNotifyOnError.hook';
+import { Spinner } from '../../../widgets';
 
 import './Constraints.less';
 
@@ -31,16 +32,7 @@ const ConstraintContent = ({ constraint, versionProps }: IConstraintContentProps
     ],
   });
 
-  React.useEffect(() => {
-    if (error) {
-      NotifierService.publish({
-        action: 'create',
-        key: 'updateConstraintError',
-        content: `Failed to update constraint - ${error.message}`,
-        options: { type: 'error' },
-      });
-    }
-  }, [error]);
+  useNotifyOnError({ key: 'updateConstraintError', content: `Failed to update constraint`, error });
 
   return (
     <dl className="constraint-content">

package/src/managed/overview/queries.graphql

@@ -95,6 +95,10 @@ query fetchApplication($appName: String!, $statuses: [MdArtifactStatusInEnvironm
     id
     name
     account
+    config {
+      id
+      previewEnvironmentsConfigured
+    }
     environments {
       ...baseEnvironmentFields
       isDeleting
@@ -339,3 +343,7 @@ mutation DismissNotification($payload: MdDismissNotificationPayload!) {
 mutation ImportDeliveryConfig($application: String!) {
   importDeliveryConfig(application: $application)
 }
+
+mutation ToggleResourceManagement($payload: MdToggleResourceManagementPayload) {
+  toggleResourceManagement(payload: $payload)
+}

package/src/managed/resources/ToggleResourceManagement.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+interface IToggleResourceManagementProps {
+  isPaused: boolean;
+  isActuating?: boolean;
+  regions: string[];
+}
+
+export const ActuationWarning = () => (
+  <p>
+    <div className="horizontal top sp-padding-m alert alert-warning">
+      <i className="fa fa-exclamation-triangle sp-margin-m-right sp-margin-xs-top" />
+      <span>
+        Pausing management will not interrupt the action Spinnaker is currently performing to resolve the difference
+        from desired state.
+      </span>
+    </div>
+  </p>
+);
+
+export const ToggleResourceManagement = ({ isPaused, isActuating, regions }: IToggleResourceManagementProps) => {
+  if (isPaused) {
+    return (
+      <>
+        <p>Spinnaker will resume taking action to correct differences from the desired state.</p>
+        <MultiRegionWarning isPaused regions={regions} />
+      </>
+    );
+  } else {
+    return (
+      <>
+        <p>While a resource is paused, Spinnaker will not take action to correct differences from the desired state.</p>
+        {isActuating && <ActuationWarning />}
+        <MultiRegionWarning isPaused regions={regions} />
+      </>
+    );
+  }
+};
+
+export const MultiRegionWarning = ({ isPaused, regions }: Omit<IToggleResourceManagementProps, 'isActuating'>) => {
+  if (regions.length < 2) {
+    return null;
+  }
+  return (
+    <div className="horizontal top sp-padding-m alert alert-warning">
+      <i className="fa fa-exclamation-triangle sp-margin-m-right sp-margin-xs-top" />
+      <span>
+        {isPaused ? 'Resuming' : 'Pausing'} management of this resource will affect the following regions:{' '}
+        <b>{regions.join(', ')}</b>.
+      </span>
+    </div>
+  );
+};

package/src/managed/utils/defaults.ts

@@ -26,6 +26,6 @@ const DOCS_URLS: IManagedDeliveryURLs = {
   resourceStatus: 'https://www.spinnaker.io/guides/user/managed-delivery/resource-status/',
 };
 
-export const getDocsUrl = (doc: keyof IManagedDeliveryURLs): string => {
+export const getDocsUrl = (doc: keyof IManagedDeliveryURLs): string | undefined => {
   return SETTINGS.managedDelivery?.urls?.[doc] || DOCS_URLS[doc];
 };

package/src/managed/utils/useNotifyOnError.hook.ts

@@ -0,0 +1,22 @@
+import { ApolloError } from '@apollo/client';
+import React from 'react';
+import { NotifierService } from '../../widgets';
+
+export const useNotifyOnError = ({
+  key,
+  content,
+  error,
+}: {
+  key: string;
+  content?: string;
+  error: ApolloError | undefined;
+}) => {
+  React.useEffect(() => {
+    if (!error) return;
+    NotifierService.publish({
+      key,
+      content: content ? `${content} - ` : '' + error.message,
+      options: { type: 'error' },
+    });
+  }, [error]);
+};

package/src/modal/modals.less

@@ -222,7 +222,7 @@ html .select2-container-multi {
         display: inline-block;
         border: 1px solid var(--color-alto);
         background-color: var(--color-white);
-        font-family: 'Source Sans Pro', sans-serif;
+        font-family: 'Source Sans 3', sans-serif;
         border-radius: 4px;
       }
       .select2-search-choice-close {

package/src/pipeline/details/SingleExecutionDetails.tsx

@@ -30,7 +30,7 @@ export interface ISingleExecutionRouterStateChange extends IStateChange {
 }
 
 export function getAndTransformExecution(id: string, app: Application) {
-  return ReactInjector.executionService.getExecution(id).then((execution) => {
+  return ReactInjector.executionService.getExecution(id, app.pipelineConfigs?.data).then((execution) => {
     ExecutionsTransformer.transformExecution(app, execution);
     return execution;
   });

package/src/pipeline/service/execution.service.ts

@@ -97,7 +97,7 @@ export class ExecutionService {
     return this.getFilteredExecutions(applicationName, statuses, limit, null, expand);
   }
 
-  public getExecution(executionId: string): PromiseLike<IExecution> {
+  public getExecution(executionId: string, pipelineConfigs: IPipeline[] = []): PromiseLike<IExecution> {
     return REST('/pipelines')
       .path(executionId)
       .get()
@@ -106,6 +106,11 @@ export class ExecutionService {
         execution.hydrated = true;
         this.cleanExecutionForDiffing(execution);
         if (application && name) {
+          const cached = pipelineConfigs.find((config) => config.id === execution.pipelineConfigId);
+          if (cached) {
+            execution.pipelineConfig = cached;
+            return Promise.resolve(execution);
+          }
           return REST('/applications')
             .path(application, 'pipelineConfigs', name)
             .get()
@@ -402,7 +407,7 @@ export class ExecutionService {
     });
     application.executions.data.forEach((execution: IExecution) => {
       if (execution.isActive && application.runningExecutions.data.every((e: IExecution) => e.id !== execution.id)) {
-        this.getExecution(execution.id).then((updatedExecution) => {
+        this.getExecution(execution.id, application.pipelineConfigs?.data).then((updatedExecution) => {
           this.updateExecution(application, updatedExecution);
         });
       }