fix(core): fix execution rendering on lazy executions (#5164)

app/scripts/modules/core/src/pipeline/config/graph/PipelineGraph.tsx

@@ -6,7 +6,6 @@ import { BindAll, Debounce, Throttle } from 'lodash-decorators';
 import { clone, find, flatten, forOwn, groupBy, max, maxBy, sortBy, sum, sumBy, uniq } from 'lodash';
 import { Subscription } from 'rxjs';
 
-import { Application } from 'core/application';
 import { IExecution, IPipeline } from 'core/domain';
 import { IPipelineValidationResults } from 'core/pipeline/config/validation/pipelineConfig.validator';
 import { ReactInjector } from 'core/reactShims';
@@ -25,7 +24,6 @@ import './pipelineGraph.less';
 
 export interface IPipelineGraphProps {
   execution?: IExecution;
-  application?: Application;
   onNodeClick: (node: IPipelineGraphNode, subIndex?: number) => void;
   pipeline?: IPipeline;
   shouldValidate?: boolean;
@@ -42,7 +40,6 @@ export interface IPipelineGraphState {
   nodeRadius: number;
   phaseCount: number;
   rowHeights: number[];
-  hydrated: boolean;
 }
 
 @BindAll()
@@ -58,7 +55,6 @@ export class PipelineGraph extends React.Component<IPipelineGraphProps, IPipelin
     nodeRadius: this.defaultNodeRadius,
     phaseCount: 0,
     rowHeights: [],
-    hydrated: false,
   };
   private element: JQuery;
   private graphStatusHash: string;
@@ -69,12 +65,11 @@ export class PipelineGraph extends React.Component<IPipelineGraphProps, IPipelin
   private rowPadding = 20;
   private validationSubscription: Subscription;
   private windowResize = this.handleWindowResize.bind(this);
-  private mounted = false;
 
   constructor(props: IPipelineGraphProps) {
     super(props);
     const { execution } = props;
-    this.state = { ...this.defaultState, ...{ hydrated: execution && execution.hydrated } };
+    this.state = this.defaultState;
 
     // HACK: This is needed to update the node states in the graph based on the stage states.
     //       Once the execution itself changes based on stage status, this can be removed.
@@ -402,14 +397,6 @@ export class PipelineGraph extends React.Component<IPipelineGraphProps, IPipelin
 
   public componentDidMount() {
     window.addEventListener('resize', this.windowResize);
-    this.mounted = true;
-    if (!this.state.hydrated && this.props.execution) {
-      ReactInjector.executionService.hydrate(this.props.application, this.props.execution).then(() => {
-        if (this.mounted) {
-          this.setState({ hydrated: true });
-        }
-      });
-    }
     this.validationSubscription = ReactInjector.pipelineConfigValidator.subscribe(validations => {
       this.pipelineValidations = validations;
       this.updateGraph(this.props);
@@ -459,7 +446,6 @@ export class PipelineGraph extends React.Component<IPipelineGraphProps, IPipelin
   }
 
   public componentWillUnmount() {
-    this.mounted = false;
     this.validationSubscription.unsubscribe();
     window.removeEventListener('resize', this.windowResize);
   }

app/scripts/modules/core/src/pipeline/details/StageExecutionDetails.tsx

@@ -141,7 +141,7 @@ export class StageExecutionDetails extends React.Component<IStageExecutionDetail
     }
 
     const stateStage = parseInt($stateParams.stage, 10);
-    const stateSubStage = parseInt($stateParams.subStage, 10);
+    const stateSubStage = $stateParams.subStage !== undefined ? parseInt($stateParams.subStage, 10) : undefined;
     const { stage, subStage } = this.validateStageExists(summaries, stateStage, stateSubStage);
     if (stage !== stateStage || subStage !== stateSubStage) {
       $state.go('.', { stage, subStage }, { location: 'replace' });

app/scripts/modules/core/src/pipeline/executions/execution/Execution.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactGA from 'react-ga';
-import { clone } from 'lodash';
+import { clone, isEqual } from 'lodash';
 import { $location } from 'ngimport';
 import { Subscription } from 'rxjs';
 import { BindAll } from 'lodash-decorators';
@@ -78,7 +78,7 @@ export class Execution extends React.Component<IExecutionProps, IExecutionState>
     const restartedStage = execution.stages.find(stage => stage.context.restartDetails !== undefined);
 
     this.state = {
-      showingDetails: this.invalidateShowingDetails(),
+      showingDetails: this.invalidateShowingDetails(props),
       pipelinesUrl: [SETTINGS.gateUrl, 'pipelines/'].join('/'),
       viewState: initialViewState,
       sortFilter: executionFilterModel.asFilterModel.sortFilter,
@@ -89,22 +89,31 @@ export class Execution extends React.Component<IExecutionProps, IExecutionState>
 
   private updateViewStateDetails(): void {
     const { $stateParams } = ReactInjector;
-    const newViewState = clone(this.state.viewState);
+    const { viewState } = this.state;
+    const newViewState = clone(viewState);
     newViewState.activeStageId = Number($stateParams.stage);
     newViewState.activeSubStageId = Number($stateParams.subStage);
     newViewState.executionId = $stateParams.executionId;
-    this.setState({
-      viewState: newViewState,
-      showingDetails: this.invalidateShowingDetails(),
-    });
+    if (!isEqual(viewState, newViewState)) {
+      this.setState({
+        viewState: newViewState,
+        showingDetails: this.invalidateShowingDetails(),
+      });
+    }
   }
 
-  private invalidateShowingDetails(): boolean {
-    const { $state, $stateParams } = ReactInjector;
-    return (
-      this.props.standalone === true ||
-      (this.props.execution.id === $stateParams.executionId && $state.includes('**.execution.**'))
-    );
+  private invalidateShowingDetails(props = this.props): boolean {
+    const { $state, $stateParams, executionService } = ReactInjector;
+    const { execution, application, standalone } = props;
+    const showing =
+      standalone === true || (execution.id === $stateParams.executionId && $state.includes('**.execution.**'));
+    if (showing && !execution.hydrated) {
+      executionService.hydrate(application, execution).then(() => {
+        this.setState({ showingDetails: true });
+      });
+      return false;
+    }
+    return showing;
   }
 
   public isActive(stageIndex: number): boolean {
@@ -232,7 +241,7 @@ export class Execution extends React.Component<IExecutionProps, IExecutionState>
       this.configureActiveRefresh();
       this.runningTime.checkStatus(nextProps.execution);
       this.setState({
-        showingDetails: this.invalidateShowingDetails(),
+        showingDetails: this.invalidateShowingDetails(nextProps),
       });
     }
   }
@@ -423,12 +432,7 @@ export class Execution extends React.Component<IExecutionProps, IExecutionState>
         </div>
         {showingDetails && (
           <div className="execution-graph">
-            <PipelineGraph
-              execution={execution}
-              application={application}
-              onNodeClick={this.handleNodeClick}
-              viewState={viewState}
-            />
+            <PipelineGraph execution={execution} onNodeClick={this.handleNodeClick} viewState={viewState} />
           </div>
         )}
         {showingDetails && (

app/scripts/modules/core/src/pipeline/service/execution.service.ts

@@ -502,9 +502,13 @@ export class ExecutionService {
       hydrated.stages.forEach(s => {
         const toHydrate = unhydrated.stages.find(s2 => s2.id === s.id);
         if (toHydrate) {
-          toHydrate.context = s.context;
-          toHydrate.outputs = s.outputs;
-          toHydrate.tasks = s.tasks;
+          Object.assign(toHydrate, s);
+        }
+      });
+      hydrated.stageSummaries.forEach(s => {
+        const toHydrate = unhydrated.stageSummaries.find(s2 => s2.id === s.id);
+        if (toHydrate) {
+          Object.assign(toHydrate, s);
         }
       });
       unhydrated.hydrated = true;