feat(adhoc filters): good progress on ad hoc filters and sync from to url, #6038

public/app/features/dashboard/ad_hoc_filters.ts

@@ -21,7 +21,7 @@ export class AdHocFiltersCtrl {
     if (this.variable.value && !_.isArray(this.variable.value)) {
     }
 
-    for (let tag of this.variable.tags) {
+    for (let tag of this.variable.filters) {
       if (this.segments.length > 0) {
         this.segments.push(this.uiSegmentSrv.newCondition('AND'));
       }
@@ -38,7 +38,11 @@ export class AdHocFiltersCtrl {
 
   getOptions(segment, index) {
     if (segment.type === 'operator') {
-      return this.$q.when(this.uiSegmentSrv.newOperators(['=', '!=', '<>', '<', '>', '=~', '!~']));
+      return this.$q.when(this.uiSegmentSrv.newOperators(['=', '!=', '<', '>', '=~', '!~']));
+    }
+
+    if (segment.type === 'condition') {
+      return this.$q.when([this.uiSegmentSrv.newSegment('AND')]);
     }
 
     return this.datasourceSrv.get(this.variable.datasource).then(ds => {
@@ -100,37 +104,45 @@ export class AdHocFiltersCtrl {
   }
 
   updateVariableModel() {
-    var tags = [];
-    var tagIndex = -1;
-    var tagOperator = "";
-
-    this.segments.forEach((segment, index) => {
-      if (segment.fake) {
+    var filters = [];
+    var filterIndex = -1;
+    var operator = "";
+    var hasFakes = false;
+
+    this.segments.forEach(segment => {
+      if (segment.type === 'value' && segment.fake) {
+        hasFakes = true;
         return;
       }
 
       switch (segment.type) {
         case 'key': {
-          tags.push({key: segment.value});
-          tagIndex += 1;
+          filters.push({key: segment.value});
+          filterIndex += 1;
           break;
         }
         case 'value': {
-          tags[tagIndex].value = segment.value;
+          filters[filterIndex].value = segment.value;
           break;
         }
         case 'operator': {
-          tags[tagIndex].operator = segment.value;
+          filters[filterIndex].operator = segment.value;
           break;
         }
         case 'condition': {
+          filters[filterIndex].condition = segment.value;
           break;
         }
       }
     });
 
+    if (hasFakes) {
+      return;
+    }
+
+    this.variable.setFilters(filters);
+    this.$rootScope.$emit('template-variable-value-updated');
     this.$rootScope.$broadcast('refresh');
-    this.variable.tags = tags;
   }
 }
 

public/app/features/dashboard/viewStateSrv.js

@@ -34,10 +34,6 @@ function (angular, _, $) {
         $location.search(urlParams);
       });
 
-      $scope.onAppEvent('template-variable-value-updated', function() {
-        self.updateUrlParamsWithCurrentVariables();
-      });
-
       $scope.onAppEvent('$routeUpdate', function() {
         var urlState = self.getQueryStringState();
         if (self.needsSync(urlState)) {
@@ -57,22 +53,6 @@ function (angular, _, $) {
       this.expandRowForPanel();
     }
 
-    DashboardViewState.prototype.updateUrlParamsWithCurrentVariables = function() {
-      // update url
-      var params = $location.search();
-      // remove variable params
-      _.each(params, function(value, key) {
-        if (key.indexOf('var-') === 0) {
-          delete params[key];
-        }
-      });
-
-      // add new values
-      templateSrv.fillVariableValuesForUrl(params);
-      // update url
-      $location.search(params);
-    };
-
     DashboardViewState.prototype.expandRowForPanel = function() {
       if (!this.state.panelId) { return; }
 

public/app/features/templating/adhoc_variable.ts

@@ -6,6 +6,7 @@ import {Variable, assignModelProperties, variableTypes} from './variable';
 import {VariableSrv} from './variable_srv';
 
 export class AdhocVariable implements Variable {
+  filters: any[];
 
   defaults = {
     type: 'adhoc',
@@ -13,9 +14,7 @@ export class AdhocVariable implements Variable {
     label: '',
     hide: 0,
     datasource: null,
-    options: [],
-    current: {},
-    tags: {},
+    filters: [],
   };
 
   /** @ngInject **/
@@ -41,8 +40,31 @@ export class AdhocVariable implements Variable {
   }
 
   setValueFromUrl(urlValue) {
+    if (!_.isArray(urlValue)) {
+      urlValue = [urlValue];
+    }
+
+    this.filters = urlValue.map(item => {
+      var values = item.split('|');
+      return {
+        key: values[0],
+        operator: values[1],
+        value: values[2],
+      };
+    });
+
     return Promise.resolve();
   }
+
+  getValueForUrl() {
+    return this.filters.map(filter => {
+      return filter.key + '|' + filter.operator + '|' + filter.value;
+    });
+  }
+
+  setFilters(filters: any[]) {
+    this.filters = filters;
+  }
 }
 
 variableTypes['adhoc'] = {

public/app/features/templating/constant_variable.ts

@@ -7,6 +7,7 @@ import {VariableSrv} from './variable_srv';
 export class ConstantVariable implements Variable {
   query: string;
   options: any[];
+  current: any;
 
   defaults = {
     type: 'constant',
@@ -14,6 +15,7 @@ export class ConstantVariable implements Variable {
     hide: 2,
     label: '',
     query: '',
+    current: {},
   };
 
   /** @ngInject */
@@ -43,6 +45,11 @@ export class ConstantVariable implements Variable {
   setValueFromUrl(urlValue) {
     return this.variableSrv.setOptionFromUrl(this, urlValue);
   }
+
+  getValueForUrl() {
+    return this.current.value;
+  }
+
 }
 
 variableTypes['constant'] = {

public/app/features/templating/custom_variable.ts

@@ -10,6 +10,7 @@ export class CustomVariable implements Variable {
   options: any;
   includeAll: boolean;
   multi: boolean;
+  current: any;
 
   defaults = {
     type: 'custom',
@@ -17,10 +18,11 @@ export class CustomVariable implements Variable {
     label: '',
     hide: 0,
     options: [],
-    current: {text: '', value: ''},
+    current: {},
     query: '',
     includeAll: false,
     multi: false,
+    allValue: null,
   };
 
   /** @ngInject **/
@@ -61,6 +63,13 @@ export class CustomVariable implements Variable {
   setValueFromUrl(urlValue) {
     return this.variableSrv.setOptionFromUrl(this, urlValue);
   }
+
+  getValueForUrl() {
+    if (this.current.text === 'All') {
+      return 'All';
+    }
+    return this.current.value;
+  }
 }
 
 variableTypes['custom'] = {

public/app/features/templating/datasource_variable.ts

@@ -9,13 +9,14 @@ export class DatasourceVariable implements Variable {
   regex: any;
   query: string;
   options: any;
+  current: any;
 
  defaults = {
     type: 'datasource',
     name: '',
     hide: 0,
     label: '',
-    current: {text: '', value: ''},
+    current: {},
     regex: '',
     options: [],
     query: '',
@@ -73,6 +74,10 @@ export class DatasourceVariable implements Variable {
   setValueFromUrl(urlValue) {
     return this.variableSrv.setOptionFromUrl(this, urlValue);
   }
+
+  getValueForUrl() {
+    return this.current.value;
+  }
 }
 
 variableTypes['datasource'] = {

public/app/features/templating/interval_variable.ts

@@ -12,6 +12,7 @@ export class IntervalVariable implements Variable {
   auto: boolean;
   query: string;
   refresh: number;
+  current: any;
 
   defaults = {
     type: 'interval',
@@ -20,7 +21,7 @@ export class IntervalVariable implements Variable {
     label: '',
     refresh: 2,
     options: [],
-    current: {text: '', value: ''},
+    current: {},
     query: '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d',
     auto: false,
     auto_min: '10s',
@@ -75,6 +76,10 @@ export class IntervalVariable implements Variable {
     this.updateAutoValue();
     return this.variableSrv.setOptionFromUrl(this, urlValue);
   }
+
+  getValueForUrl() {
+    return this.current.value;
+  }
 }
 
 variableTypes['interval'] = {

public/app/features/templating/query_variable.ts

@@ -33,8 +33,11 @@ export class QueryVariable implements Variable {
     name: '',
     multi: false,
     includeAll: false,
+    allValue: null,
     options: [],
-    current: {text: '', value: ''},
+    current: {},
+    tagsQuery: null,
+    tagValuesQuery: null,
   };
 
   constructor(private model, private datasourceSrv, private templateSrv, private variableSrv, private $q)  {
@@ -56,6 +59,13 @@ export class QueryVariable implements Variable {
     return this.variableSrv.setOptionFromUrl(this, urlValue);
   }
 
+  getValueForUrl() {
+    if (this.current.text === 'All') {
+      return 'All';
+    }
+    return this.current.value;
+  }
+
   updateOptions() {
     return this.datasourceSrv.get(this.datasource)
     .then(this.updateOptionsFromMetricFindQuery.bind(this))

public/app/features/templating/templateSrv.js

@@ -180,18 +180,11 @@ function (angular, _, kbn) {
 
     this.fillVariableValuesForUrl = function(params, scopedVars) {
       _.each(this.variables, function(variable) {
-        var current = variable.current;
-        var value = current.value;
-
-        if (current.text === 'All') {
-          value = 'All';
-        }
-
         if (scopedVars && scopedVars[variable.name] !== void 0) {
-          value = scopedVars[variable.name].value;
+          params['var-' + variable.name] = scopedVars[variable.name].value;
+        } else {
+          params['var-' + variable.name] = variable.getValueForUrl();
         }
-
-        params['var-' + variable.name] = value;
       });
     };
 

public/app/features/templating/variable.ts

@@ -8,6 +8,7 @@ export interface Variable {
   updateOptions();
   dependsOn(variable);
   setValueFromUrl(urlValue);
+  getValueForUrl();
   getModel();
 }
 

public/app/features/templating/variable_srv.ts

@@ -14,6 +14,7 @@ export class VariableSrv {
   constructor(private $rootScope, private $q, private $location, private $injector, private templateSrv) {
     // update time variant variables
     $rootScope.$on('refresh', this.onDashboardRefresh.bind(this), $rootScope);
+    $rootScope.$on('template-variable-value-updated', this.updateUrlParamsWithCurrentVariables.bind(this), $rootScope);
   }
 
   init(dashboard) {
@@ -210,6 +211,23 @@ export class VariableSrv {
     this.selectOptionsForCurrentValue(variable);
     return this.variableUpdated(variable);
   }
+
+  updateUrlParamsWithCurrentVariables() {
+    // update url
+    var params = this.$location.search();
+
+    // remove variable params
+    _.each(params, function(value, key) {
+      if (key.indexOf('var-') === 0) {
+        delete params[key];
+      }
+    });
+
+    // add new values
+    this.templateSrv.fillVariableValuesForUrl(params);
+    // update url
+    this.$location.search(params);
+  }
 }
 
 coreModule.service('variableSrv', VariableSrv);

public/app/plugins/datasource/influxdb/datasource.ts

@@ -56,9 +56,9 @@ export default class InfluxDatasource {
         // apply add hoc filters
         for (let variable of this.templateSrv.variables) {
           if (variable.type === 'adhoc' && variable.datasource === this.name) {
-            for (let tag of variable.tags) {
-              if (tag.key !== undefined && tag.value !== undefined) {
-                target.tags.push({key: tag.key, value: tag.value, condition: 'AND'});
+            for (let filter of variable.filters) {
+              if (filter.key !== undefined && filter.value !== undefined) {
+                target.tags.push({key: filter.key, value: filter.value, condition: filter.condition, operator: filter.operator});
               }
             }
           }