fix(core): correctly compute pipeline graph scroll position (#7198)

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

@@ -96,7 +96,7 @@ export class PipelineGraph extends React.Component<IPipelineGraphProps, IPipelin
     // track and save the graph scroll position for executions so it doesn't get reset to
     // zero every second due to repaint.
     if (this.props.execution) {
-      PipelineGraphService.xScrollOffset[this.props.execution.id] = e.deltaX;
+      PipelineGraphService.xScrollOffset[this.props.execution.id] = (e.target as HTMLElement).parentElement.scrollLeft;
     }
   };
 

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

@@ -14,6 +14,7 @@ import { ReactInjector, IStateChange } from 'core/reactShims';
 import { Tooltip } from 'core/presentation';
 import { ISortFilter } from 'core/filterModel';
 import { ExecutionState } from 'core/state';
+import { ExecutionsTransformer } from '../service/ExecutionsTransformer';
 
 import './singleExecutionDetails.less';
 
@@ -65,7 +66,7 @@ export class SingleExecutionDetails extends React.Component<
 
     executionService.getExecution($state.params.executionId).then(
       execution => {
-        executionService.transformExecution(app, execution);
+        ExecutionsTransformer.transformExecution(app, execution);
         if (execution.isActive && !this.executionScheduler) {
           this.executionScheduler = SchedulerFactory.createScheduler(5000);
           this.executionLoader = this.executionScheduler.subscribe(() => this.getExecution());

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

@@ -322,6 +322,19 @@ export class ExecutionsTransformer {
 
     OrchestratedItemTransformer.defineProperties(execution);
     this.processStageSummaries(execution);
+    execution.graphStatusHash = ExecutionsTransformer.calculateGraphStatusHash(execution);
+  }
+
+  private static calculateGraphStatusHash(execution: IExecution): string {
+    return (execution.stageSummaries || [])
+      .map(stage => {
+        const stageConfig = Registry.pipeline.getStageConfig(stage);
+        if (stageConfig && stageConfig.extraLabelLines) {
+          return [stageConfig.extraLabelLines(stage), stage.status].join('-');
+        }
+        return stage.status;
+      })
+      .join(':');
   }
 
   private static calculateRunningTime(stage: IExecutionStageSummary): () => number {

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

@@ -6,7 +6,6 @@ import { API } from 'core/api/ApiService';
 import { Application } from 'core/application/application.model';
 import { ExecutionsTransformer } from 'core/pipeline/service/ExecutionsTransformer';
 import { IExecution, IExecutionStage, IExecutionStageSummary } from 'core/domain';
-import { Registry } from 'core/registry';
 import { JsonUtils } from 'core/utils';
 import { SETTINGS } from 'core/config/settings';
 import { ApplicationDataSource } from 'core/application/service/applicationDataSource';
@@ -119,10 +118,6 @@ export class ExecutionService {
       });
   }
 
-  public transformExecution(application: Application, execution: IExecution): void {
-    ExecutionsTransformer.transformExecution(application, execution);
-  }
-
   public transformExecutions(application: Application, executions: IExecution[], currentData: IExecution[] = []): void {
     if (!executions || !executions.length) {
       return;
@@ -438,18 +433,6 @@ export class ExecutionService {
     application.runningExecutions.dataUpdated();
   }
 
-  private calculateGraphStatusHash(execution: IExecution): string {
-    return (execution.stageSummaries || [])
-      .map(stage => {
-        const stageConfig = Registry.pipeline.getStageConfig(stage);
-        if (stageConfig && stageConfig.extraLabelLines) {
-          return [stageConfig.extraLabelLines(stage), stage.status].join('-');
-        }
-        return stage.status;
-      })
-      .join(':');
-  }
-
   public updateExecution(
     application: Application,
     updatedExecution: IExecution,
@@ -463,8 +446,7 @@ export class ExecutionService {
             updatedExecution.status !== currentExecution.status ||
             currentExecution.stringVal !== updatedExecution.stringVal
           ) {
-            this.transformExecution(application, updatedExecution);
-            updatedExecution.graphStatusHash = this.calculateGraphStatusHash(updatedExecution);
+            ExecutionsTransformer.transformExecution(application, updatedExecution);
             dataSource.data[idx] = updatedExecution;
             dataSource.dataUpdated();
           }
@@ -494,7 +476,7 @@ export class ExecutionService {
       return Promise.resolve(unhydrated);
     }
     const executionHydrator = this.getExecution(unhydrated.id).then(hydrated => {
-      this.transformExecution(application, hydrated);
+      ExecutionsTransformer.transformExecution(application, hydrated);
       unhydrated.stages.forEach((s, i) => {
         // stages *should* be in the same order, so getting the hydrated one by index should be fine.
         // worth verifying, though, and, if not, find the stage by id (which makes this an O(n^2) operation instead of O(n))
@@ -509,7 +491,7 @@ export class ExecutionService {
         }
       });
       unhydrated.hydrated = true;
-      unhydrated.graphStatusHash = this.calculateGraphStatusHash(unhydrated);
+      unhydrated.graphStatusHash = hydrated.graphStatusHash;
       return unhydrated;
     });
     unhydrated.hydrator = Promise.resolve(executionHydrator);
@@ -548,7 +530,7 @@ export class ExecutionService {
       .then((data: IExecution[]) => {
         if (data) {
           if (transform && application) {
-            data.forEach((execution: IExecution) => this.transformExecution(application, execution));
+            data.forEach((execution: IExecution) => ExecutionsTransformer.transformExecution(application, execution));
           }
           return data.sort((a, b) => (b.buildTime || 0) - (a.buildTime || 0));
         }