Fixes for filter option loading and nested filters. Fixes #447, Fixes #412

CHANGELOG.md

@@ -3,6 +3,12 @@ vNext
 - Allow special characters in serie names (influxdb datasource), PR #390 - thx  @majst01
 - Refactoring of filterSrv (Issue #428), thx @Tetha
 
+# Fixes
+- Filter option loading when having muliple nested filters now works better.
+  Options are now reloaded correctly and there are no multiple renders/refresh inbetween (#447),
+  After an option is changed and a nested template param is also reloaded, if the current value
+  exists after the options are reloaded the current selected value is kept (Closes #447, Closes #412)
+
 # 1.5.4 (2014-05-13)
 ### New features and improvements
 - InfluxDB enhancement: support for multiple hosts (with retries) and raw queries (Issue #318, thx @toddboom)

src/app/panels/filtering/module.js

@@ -14,7 +14,7 @@ function (angular, app, _) {
   var module = angular.module('kibana.panels.filtering', []);
   app.useModule(module);
 
-  module.controller('filtering', function($scope, datasourceSrv, $rootScope, $timeout) {
+  module.controller('filtering', function($scope, datasourceSrv, $rootScope, $timeout, $q) {
 
     $scope.panelMeta = {
       status  : "Stable",
@@ -32,51 +32,62 @@ function (angular, app, _) {
 
     $scope.remove = function(templateParameter) {
       $scope.filter.removeTemplateParameter(templateParameter);
-
-        // TODO hkraemer: check if this makes sense like this
-        if(!$rootScope.$$phase) {
-            $rootScope.$apply();
-        }
-        $timeout(function(){
-            $scope.dashboard.refresh();
-        },0);
     };
 
-    $scope.filterOptionSelected = function(templateParameter, option) {
-      $scope.filter.templateOptionSelected(templateParameter, option);
-      $scope.applyFilterToOtherFilters(templateParameter);
+    $scope.filterOptionSelected = function(templateParameter, option, recursive) {
+      templateParameter.current = option;
+
+      $scope.filter.updateTemplateData();
+
+      return $scope.applyFilterToOtherFilters(templateParameter)
+        .then(function() {
+          // only refresh in the outermost call
+          if (!recursive) {
+            $scope.dashboard.refresh();
+          }
+        });
     };
 
-    $scope.applyFilterToOtherFilters = function(updatedFilter) {
-      _.each($scope.filter.templateParameters, function(templateParameter) {
-        if (templateParameter === updatedFilter) {
+    $scope.applyFilterToOtherFilters = function(updatedTemplatedParam) {
+      var promises = _.map($scope.filter.templateParameters, function(templateParam) {
+        if (templateParam === updatedTemplatedParam) {
           return;
         }
-        if (templateParameter.query.indexOf(updatedFilter.name) !== -1) {
-          $scope.applyFilter(templateParameter);
+        if (templateParam.query.indexOf(updatedTemplatedParam.name) !== -1) {
+          return $scope.applyFilter(templateParam);
         }
       });
-    };
 
-    $scope.applyFilter = function(filter) {
+      return $q.all(promises);
+    };
 
-      datasourceSrv.default.metricFindQuery($scope.filter, filter.query)
+    $scope.applyFilter = function(templateParam) {
+      return datasourceSrv.default.metricFindQuery($scope.filter, templateParam.query)
         .then(function (results) {
-          filter.editing=undefined;
-          filter.options = _.map(results, function(node) {
+          templateParam.editing = undefined;
+          templateParam.options = _.map(results, function(node) {
             return { text: node.text, value: node.text };
           });
 
-          if (filter.includeAll) {
+          if (templateParam.includeAll) {
             var allExpr = '{';
-            _.each(filter.options, function(option) {
+            _.each(templateParam.options, function(option) {
               allExpr += option.text + ',';
             });
             allExpr = allExpr.substring(0, allExpr.length - 1) + '}';
-            filter.options.unshift({text: 'All', value: allExpr});
+            templateParam.options.unshift({text: 'All', value: allExpr});
           }
 
-          $scope.filter.templateOptionSelected(filter, filter.options[0]);
+          // if parameter has current value
+          // if it exists in options array keep value
+          if (templateParam.current) {
+            var currentExists = _.findWhere(templateParam.options, { value: templateParam.current.value });
+            if (currentExists) {
+              return $scope.filterOptionSelected(templateParam, templateParam.current, true);
+            }
+          }
+
+          return $scope.filterOptionSelected(templateParam, templateParam.options[0], true);
         });
     };
 
@@ -89,13 +100,5 @@ function (angular, app, _) {
       });
     };
 
-    $scope.refresh = function() {
-      $scope.dashboard.refresh();
-    };
-
-    $scope.render = function() {
-      $rootScope.$broadcast('render');
-    };
-
   });
 });

src/app/services/filterSrv.js

@@ -16,7 +16,8 @@ define([
   };
 
   var result = {
-    _updateTemplateData: function(initial) {
+
+    updateTemplateData: function(initial) {
       var _templateData = {};
       _.each(this.templateParameters, function(templateParameter) {
         if (initial) {
@@ -34,15 +35,9 @@ define([
       this._templateData = _templateData;
     },
 
-    templateOptionSelected: function(templateParameter, option) {
-      templateParameter.current = option;
-      this._updateTemplateData();
-      dashboard.refresh();
-    },
-
     addTemplateParameter: function(templateParameter) {
       this.templateParameters.push(templateParameter);
-      this._updateTemplateData();
+      this.updateTemplateData();
     },
 
     applyTemplateToTarget: function(target) {
@@ -105,7 +100,7 @@ define([
       if(dashboard.services && dashboard.services.filter) {
         this.time = dashboard.services.filter.time;
         this.templateParameters = dashboard.services.filter.list || [];
-        this._updateTemplateData(true);
+        this.updateTemplateData(true);
       }
 
     }