fix(clusters/lbs/secgrps): fix delayed apply of filters

spinnaker · May 9, 2017 · 8bcb582 · 8bcb582
1 parent 6897043
commit 8bcb582
Show file tree

Hide file tree

Showing 11 changed files with 201 additions and 147 deletions.
diff --git a/app/scripts/modules/core/cluster/allClusters.controller.js b/app/scripts/modules/core/cluster/allClusters.controller.js
@@ -31,29 +31,49 @@ module.exports = angular.module('spinnaker.core.cluster.allClusters.controller',
 ])
   .controller('AllClustersCtrl', function($scope, app, $uibModal, $timeout, providerSelectionService, clusterFilterService, $state,
                                           ClusterFilterModel, MultiselectModel, InsightFilterStateModel, serverGroupCommandBuilder, cloudProviderRegistry) {
-    this.application = app;
-    ClusterFilterModel.activate();
-    this.initialized = false;
-    this.dataSource = app.getDataSource('serverGroups');
-    this.application = app;
 
-    $scope.sortFilter = ClusterFilterModel.sortFilter;
+    this.$onInit = () => {
+      const groupsUpdatedSubscription = clusterFilterService.groupsUpdatedStream.subscribe(() => clusterGroupsUpdated());
+      this.application = app;
+      ClusterFilterModel.activate();
+      this.initialized = false;
+      this.dataSource = app.getDataSource('serverGroups');
+      this.application = app;
 
-    this.createLabel = 'Create Server Group';
+      $scope.sortFilter = ClusterFilterModel.sortFilter;
+
+      this.createLabel = 'Create Server Group';
+
+      app.getDataSource('serverGroups').ready().then(
+        () => updateClusterGroups(),
+        () => this.clustersLoadError()
+      );
+
+      app.activeState = app.serverGroups;
+      app.serverGroups.onRefresh($scope, updateClusterGroups);
+      $scope.$on('$destroy', () => {
+        app.activeState = app;
+        MultiselectModel.clearAll();
+        InsightFilterStateModel.filtersHidden = false;
+        groupsUpdatedSubscription.unsubscribe();
+      });
+    };
 
     let updateClusterGroups = () => {
       if (app.getDataSource('serverGroups').fetchOnDemand) {
         InsightFilterStateModel.filtersHidden = true;
       }
-      ClusterFilterModel.applyParamsToUrl();
-      $scope.$evalAsync(() => {
-          clusterFilterService.updateClusterGroups(app);
-          $scope.groups = ClusterFilterModel.groups;
-          $scope.tags = ClusterFilterModel.tags;
-          // Timeout because the updateClusterGroups method is debounced by 25ms
-          $timeout(() => { this.initialized = true; }, 50);
-        }
-      );
+      clusterFilterService.updateClusterGroups(app);
+      clusterGroupsUpdated();
+      // Timeout because the updateClusterGroups method is debounced by 25ms
+      $timeout(() => { this.initialized = true; }, 50);
+    };
+
+    let clusterGroupsUpdated = () => {
+      $scope.$applyAsync(() => {
+        $scope.groups = ClusterFilterModel.groups;
+        $scope.tags = ClusterFilterModel.tags;
+      });
     };
 
     this.toggleMultiselect = () => {
@@ -92,17 +112,4 @@ module.exports = angular.module('spinnaker.core.cluster.allClusters.controller',
       this.initialized = true;
     };
 
-    app.getDataSource('serverGroups').ready().then(
-      () => updateClusterGroups(),
-      () => this.clustersLoadError()
-    );
-
-    app.activeState = app.serverGroups;
-    app.serverGroups.onRefresh($scope, updateClusterGroups);
-    $scope.$on('$destroy', () => {
-      app.activeState = app;
-      MultiselectModel.clearAll();
-      InsightFilterStateModel.filtersHidden = false;
-    });
-
   });
diff --git a/app/scripts/modules/core/cluster/filter/clusterFilter.service.ts b/app/scripts/modules/core/cluster/filter/clusterFilter.service.ts
@@ -1,6 +1,7 @@
 import { ILogService, module } from 'angular';
 import { debounce, each, forOwn, groupBy, sortBy } from 'lodash';
 import { StateParams } from 'angular-ui-router';
+import { Subject } from 'rxjs/Subject';
 
 import { Application } from 'core/application/application.model';
 import { ServerGroup } from 'core/domain/serverGroup';
@@ -43,6 +44,8 @@ type Grouping = IClusterGroup | IClusterSubgroup | IServerGroupSubgroup;
 
 export class ClusterFilterService {
 
+  public groupsUpdatedStream: Subject<IClusterGroup[]> = new Subject<IClusterGroup[]>();
+
   public updateClusterGroups = debounce((application?: Application) => {
     if (!application) {
       application = this.lastApplication;
@@ -104,6 +107,7 @@ export class ClusterFilterService {
     this.ClusterFilterModel.addTags();
     this.lastApplication = application;
     this.addHealthFlags();
+    this.groupsUpdatedStream.next(groups);
     return groups;
   }, 25);
 

diff --git a/app/scripts/modules/core/delivery/executions/executions.controller.js b/app/scripts/modules/core/delivery/executions/executions.controller.js
@@ -23,25 +23,73 @@ module.exports = angular.module('spinnaker.core.delivery.executions.controller',
                                          executionService, executionFilterModel, executionFilterService,
                                          InsightFilterStateModel) {
 
-    if (executionFilterModel.mostRecentApplication !== $scope.application.name) {
-      executionFilterModel.groups = [];
-      executionFilterModel.mostRecentApplication = $scope.application.name;
-    }
-
-    let scrollIntoView = (delay = 200) => scrollToService.scrollTo('#execution-' + $stateParams.executionId, '.all-execution-groups', 225, delay);
-
-    let application = $scope.application;
-    this.application = application;
-    if ($scope.application.notFound) {
-      return;
-    }
-
-    application.activeState = application.executions;
-    $scope.$on('$destroy', () => {
-      application.activeState = application;
-      application.executions.deactivate();
-      application.pipelineConfigs.deactivate();
-    });
+    this.$onInit = () => {
+      const groupsUpdatedSubscription = executionFilterModel.groupsUpdated.subscribe(() => this.groupsUpdated());
+      if (executionFilterModel.mostRecentApplication !== $scope.application.name) {
+        executionFilterModel.groups = [];
+        executionFilterModel.mostRecentApplication = $scope.application.name;
+      }
+
+      let scrollIntoView = (delay = 200) => scrollToService.scrollTo('#execution-' + $stateParams.executionId, '.all-execution-groups', 225, delay);
+
+      let application = $scope.application;
+      this.application = application;
+      if ($scope.application.notFound) {
+        return;
+      }
+
+      application.activeState = application.executions;
+      $scope.$on('$destroy', () => {
+        application.activeState = application;
+        application.executions.deactivate();
+        application.pipelineConfigs.deactivate();
+        groupsUpdatedSubscription.unsubscribe();
+      });
+
+      this.viewState = {
+        loading: true,
+        triggeringExecution: false,
+      };
+
+      application.executions.activate();
+      application.pipelineConfigs.activate();
+
+      application.executions.onRefresh($scope, () => {
+        // if an execution was selected but is no longer present, navigate up
+        if ($state.params.executionId) {
+          if (application.getDataSource('executions').data.every(e => e.id !== $state.params.executionId)) {
+            $state.go('.^');
+          }
+        }
+      });
+
+      $q.all([application.executions.ready(), application.pipelineConfigs.ready()]).then(() => {
+        this.updateExecutionGroups();
+        if ($stateParams.executionId) {
+          scrollIntoView();
+        }
+      });
+
+      this.application.executions.onRefresh($scope, normalizeExecutionNames, dataInitializationFailure);
+
+      $scope.$on('$stateChangeSuccess', (event, toState, toParams, fromState, fromParams) => {
+        // if we're navigating to a different execution on the same page, scroll the new execution into view
+        // or, if we are navigating back to the same execution after scrolling down the page, scroll it into view
+        // but don't scroll it into view if we're navigating to a different stage in the same execution
+        let shouldScroll = false;
+        if (toState.name.indexOf(fromState.name) === 0 && toParams.application === fromParams.application && toParams.executionId) {
+          shouldScroll = true;
+          if (toParams.executionId === fromParams.executionId && toParams.details) {
+            if (toParams.stage !== fromParams.stage || toParams.step !== fromParams.step || toParams.details !== fromParams.details) {
+              shouldScroll = false;
+            }
+          }
+        }
+        if (shouldScroll) {
+          scrollIntoView(0);
+        }
+      });
+    };
 
     this.InsightFilterStateModel = InsightFilterStateModel;
 
@@ -55,55 +103,36 @@ module.exports = angular.module('spinnaker.core.delivery.executions.controller',
 
     this.updateExecutionGroups = (reload) => {
       normalizeExecutionNames();
-      executionFilterModel.applyParamsToUrl();
       if (reload) {
         this.application.executions.refresh(true);
         this.application.executions.reloadingForFilters = true;
       } else {
         executionFilterService.updateExecutionGroups(this.application);
-        this.tags = executionFilterModel.tags;
+        this.groupsUpdated();
         // updateExecutionGroups is debounced by 25ms, so we need to delay setting the loading flag a bit
         $timeout(() => { this.viewState.loading = false; }, 50);
       }
     };
 
-    this.viewState = {
-      loading: true,
-      triggeringExecution: false,
+    this.groupsUpdated = () => {
+      $scope.$applyAsync(() => {
+        this.tags = executionFilterModel.tags;
+      });
     };
 
-    application.executions.activate();
-    application.pipelineConfigs.activate();
-
-    application.executions.onRefresh($scope, () => {
-      // if an execution was selected but is no longer present, navigate up
-      if ($state.params.executionId) {
-        if (application.getDataSource('executions').data.every(e => e.id !== $state.params.executionId)) {
-          $state.go('.^');
-        }
-      }
-    });
-
-    $q.all([application.executions.ready(), application.pipelineConfigs.ready()]).then(() => {
-      this.updateExecutionGroups();
-      if ($stateParams.executionId) {
-        scrollIntoView();
-      }
-    });
-
     $scope.filterCountOptions = [1, 2, 5, 10, 20, 30, 40, 50];
 
     let dataInitializationFailure = () => {
       this.viewState.loading = false;
       this.viewState.initializationError = true;
     };
 
-    function normalizeExecutionNames() {
-      if (application.executions.loadFailure) {
+    let normalizeExecutionNames = () => {
+      if (this.application.executions.loadFailure) {
         dataInitializationFailure();
       }
-      let executions = application.executions.data || [];
-      var configurations = application.pipelineConfigs.data || [];
+      const executions = this.application.executions.data || [];
+      const configurations = this.application.pipelineConfigs.data || [];
       executions.forEach(function(execution) {
         if (execution.pipelineConfigId) {
           var configMatches = configurations.filter(function(configuration) {
@@ -114,9 +143,7 @@ module.exports = angular.module('spinnaker.core.delivery.executions.controller',
           }
         }
       });
-    }
-
-    this.application.executions.onRefresh($scope, normalizeExecutionNames, dataInitializationFailure);
+    };
 
     this.toggleExpansion = (expand) => {
       this.executionFilterModel.expandSubject.next(expand);
@@ -148,22 +175,4 @@ module.exports = angular.module('spinnaker.core.delivery.executions.controller',
         }
       }).result.then(startPipeline);
     };
-
-    $scope.$on('$stateChangeSuccess', (event, toState, toParams, fromState, fromParams) => {
-      // if we're navigating to a different execution on the same page, scroll the new execution into view
-      // or, if we are navigating back to the same execution after scrolling down the page, scroll it into view
-      // but don't scroll it into view if we're navigating to a different stage in the same execution
-      let shouldScroll = false;
-      if (toState.name.indexOf(fromState.name) === 0 && toParams.application === fromParams.application && toParams.executionId) {
-        shouldScroll = true;
-        if (toParams.executionId === fromParams.executionId && toParams.details) {
-          if (toParams.stage !== fromParams.stage || toParams.step !== fromParams.step || toParams.details !== fromParams.details) {
-            shouldScroll = false;
-          }
-        }
-      }
-      if (shouldScroll) {
-        scrollIntoView(0);
-      }
-    });
   });
diff --git a/app/scripts/modules/core/delivery/executions/executions.controller.spec.js b/app/scripts/modules/core/delivery/executions/executions.controller.spec.js
@@ -46,6 +46,7 @@ describe('Controller: pipelineExecutions', function () {
           $stateParams: $stateParams,
           scrollToService: _scrollToService_,
         });
+        controller.$onInit();
       };
     })
   );

diff --git a/app/scripts/modules/core/filterModel/filter.tags.html b/app/scripts/modules/core/filterModel/filter.tags.html
diff --git a/app/scripts/modules/core/filterModel/filterTags.component.ts b/app/scripts/modules/core/filterModel/filterTags.component.ts
@@ -17,7 +17,7 @@ export const filterTagsComponent: IComponentOptions = {
       <a href
          class="clear-filters"
          analytics-on="click" analytics-category="Filter Tags" analytics-event="Clear All clicked"
-         ng-click="$ctrl.clearFilters()" ng-if="tags.length > 1">Clear All</a>
+         ng-click="$ctrl.clearFilters()" ng-if="$ctrl.tags.length > 1">Clear All</a>
     </div>
 `
 };

diff --git a/app/scripts/modules/core/loadBalancer/AllLoadBalancersCtrl.js b/app/scripts/modules/core/loadBalancer/AllLoadBalancersCtrl.js
@@ -19,21 +19,41 @@ module.exports = angular.module('spinnaker.core.loadBalancer.controller', [
                                                providerSelectionService, cloudProviderRegistry,
                                                LoadBalancerFilterModel, loadBalancerFilterService, app ) {
 
-    LoadBalancerFilterModel.activate();
-    this.initialized = false;
+    this.$onInit = () => {
+      const groupsUpdatedSubscription = loadBalancerFilterService.groupsUpdatedStream.subscribe(() => groupsUpdated());
 
-    $scope.application = app;
+      LoadBalancerFilterModel.activate();
 
-    $scope.sortFilter = LoadBalancerFilterModel.sortFilter;
+      this.initialized = false;
+
+      $scope.application = app;
+
+      $scope.sortFilter = LoadBalancerFilterModel.sortFilter;
+
+      app.loadBalancers.ready().then(() => updateLoadBalancerGroups());
+
+      app.activeState = app.loadBalancers;
+      $scope.$on('$destroy', () => {
+        app.activeState = app;
+        groupsUpdatedSubscription.unsubscribe();
+      });
+
+      app.loadBalancers.onRefresh($scope, updateLoadBalancerGroups);
+    };
+
+    let groupsUpdated = () => {
+      $scope.$applyAsync(() => {
+        $scope.groups = LoadBalancerFilterModel.groups;
+        $scope.tags = LoadBalancerFilterModel.tags;
+      });
+    };
 
     this.groupingsTemplate = require('./groupings.html');
 
     let updateLoadBalancerGroups = () => {
-      LoadBalancerFilterModel.applyParamsToUrl();
       $scope.$evalAsync(() => {
         loadBalancerFilterService.updateLoadBalancerGroups(app);
-        $scope.groups = LoadBalancerFilterModel.groups;
-        $scope.tags = LoadBalancerFilterModel.tags;
+        groupsUpdated();
         // Timeout because the updateLoadBalancerGroups method is debounced by 25ms
         $timeout(() => { this.initialized = true; }, 50);
       });
@@ -63,13 +83,5 @@ module.exports = angular.module('spinnaker.core.loadBalancer.controller', [
 
     this.updateLoadBalancerGroups = _.debounce(updateLoadBalancerGroups, 200);
 
-    if (app.loadBalancers.loaded) {
-      updateLoadBalancerGroups();
-    }
-
-    app.activeState = app.loadBalancers;
-    $scope.$on('$destroy', () => app.activeState = app);
-
-    app.loadBalancers.onRefresh($scope, updateLoadBalancerGroups);
   }
 );