fix(pipelines): prevent re-render of running executions every second

spinnaker · May 4, 2017 · 08b6d94 · 08b6d94
1 parent 0c79d4c
commit 08b6d94
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/app/scripts/modules/core/delivery/details/executionDetails.controller.js b/app/scripts/modules/core/delivery/details/executionDetails.controller.js
@@ -93,7 +93,7 @@ module.exports = angular.module('spinnaker.executionDetails.controller', [
       $state.go('.', { step: null });
     };
 
-    controller.getDetailsSourceUrl = function() {
+    const getDetailsSourceUrl = function() {
       if ($stateParams.step !== undefined) {
         let stages = controller.execution.stageSummaries || [];
         var stageSummary = stages[getCurrentStage()];
@@ -111,7 +111,7 @@ module.exports = angular.module('spinnaker.executionDetails.controller', [
       return null;
     };
 
-    controller.getSummarySourceUrl = function() {
+    const getSummarySourceUrl = function() {
       if ($stateParams.stage !== undefined) {
         let currentStage = getCurrentStage();
         let stages = controller.execution.stageSummaries || [];
@@ -128,9 +128,19 @@ module.exports = angular.module('spinnaker.executionDetails.controller', [
         }
       }
       return require('../../pipeline/config/stages/core/executionSummary.html');
+    };
+
+    this.setSourceUrls = () => {
+      this.summarySourceUrl = getSummarySourceUrl();
+      this.detailsSourceUrl = getDetailsSourceUrl();
+    };
 
+    this.$onInit = () => {
+      this.setSourceUrls();
     };
 
+    $scope.$on('$stateChangeSuccess', () => this.setSourceUrls());
+
     controller.getStepLabel = function(stage) {
       var stageConfig = pipelineConfig.getStageConfig(stage);
       if (stageConfig && stageConfig.executionStepLabelUrl) {

diff --git a/app/scripts/modules/core/delivery/details/executionDetails.html b/app/scripts/modules/core/delivery/details/executionDetails.html
@@ -1,13 +1,13 @@
 <div class="execution-details">
   <a scroll-on-render offset="120"></a>
-  <div class="stage-summary" ng-include="ctrl.getSummarySourceUrl()"></div>
-  <div class="stage-details" ng-if="ctrl.getDetailsSourceUrl()">
+  <div class="stage-summary" ng-include="ctrl.summarySourceUrl"></div>
+  <div class="stage-details" ng-if="ctrl.detailsSourceUrl">
     <div class="stage-details-heading">
       <h5>
         <status-glyph item="stage"></status-glyph>
         {{stage.name || stage.type | robotToHuman }}
       </h5>
     </div>
-    <div ng-include="ctrl.getDetailsSourceUrl()"></div>
+    <div ng-include="ctrl.detailsSourceUrl"></div>
   </div>
 </div>
diff --git a/app/scripts/modules/core/delivery/executionGroup/ExecutionGroup.tsx b/app/scripts/modules/core/delivery/executionGroup/ExecutionGroup.tsx
@@ -174,7 +174,7 @@ export class ExecutionGroup extends React.Component<IProps, IState> {
     const deploymentAccountLabels = (this.state.deploymentAccounts || []).map((account: string) => <AccountLabelColor key={account} account={account}/>);
     const groupTargetAccountLabels = (group.targetAccounts || []).map((account: string) => <AccountLabelColor key={account} account={account}/>);
     // Adding running time to the key is a hack until we can figure out the redux story for executions
-    const executions = (group.executions || []).map((execution: IExecution) => <Execution key={execution.id + execution.runningTimeInMs} execution={execution} application={this.props.application}/>)
+    const executions = (group.executions || []).map((execution: IExecution) => <Execution key={execution.stringVal} execution={execution} application={this.props.application}/>)
 
     return (
       <div className={`execution-group ${this.isShowingDetails() ? 'showing-details' : 'details-hidden'}`}>