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/test/specs/templateSrv-specs.js → public/app/features/templating/specs/template_srv_specs.ts

-define([
-  '../mocks/dashboard-mock',
-  'lodash',
-  'app/features/templating/templateSrv'
-], function(dashboardMock) {
-  'use strict';
-
-  describe('templateSrv', function() {
-    var _templateSrv;
-    var _dashboard;
-
-    beforeEach(module('grafana.services'));
-    beforeEach(module(function() {
-      _dashboard = dashboardMock.create();
-    }));
+import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common';
+
+import '../all';
+import {Emitter} from 'app/core/core';
+
+describe('templateSrv', function() {
+  var _templateSrv, _variableSrv;
 
-    beforeEach(inject(function(templateSrv) {
+  beforeEach(angularMocks.module('grafana.core'));
+  beforeEach(angularMocks.module('grafana.services'));
+
+  beforeEach(angularMocks.inject(function(variableSrv, templateSrv) {
     _templateSrv = templateSrv;
+    _variableSrv = variableSrv;
   }));
 
+  function initTemplateSrv(variables) {
+    _variableSrv.init({
+      templating: {list: variables},
+      events: new Emitter(),
+    });
+  }
+
   describe('init', function() {
     beforeEach(function() {
-        _templateSrv.init([{ name: 'test', current: { value: 'oogle' } }]);
+      initTemplateSrv([{type: 'query', name: 'test', current: {value: 'oogle'}}]);
     });
 
     it('should initialize template data', function() {
@@ -31,7 +34,7 @@ define([
 
   describe('replace can pass scoped vars', function() {
     beforeEach(function() {
-        _templateSrv.init([{ name: 'test', current: { value: 'oogle' } }]);
+      initTemplateSrv([{type: 'query', name: 'test', current: {value: 'oogle' }}]);
     });
 
     it('should replace $test with scoped value', function() {
@@ -47,7 +50,7 @@ define([
 
   describe('replace can pass multi / all format', function() {
     beforeEach(function() {
-        _templateSrv.init([{name: 'test', current: {value: ['value1', 'value2'] }}]);
+      initTemplateSrv([{type: 'query', name: 'test', current: {value: ['value1', 'value2'] }}]);
     });
 
     it('should replace $test with globbed value', function() {
@@ -68,7 +71,8 @@ define([
 
   describe('variable with all option', function() {
     beforeEach(function() {
-        _templateSrv.init([{
+      initTemplateSrv([{
+        type: 'query',
         name: 'test',
         current: {value: '$__all' },
         options: [
@@ -85,7 +89,8 @@ define([
 
   describe('variable with all option and custom value', function() {
     beforeEach(function() {
-        _templateSrv.init([{
+      initTemplateSrv([{
+        type: 'query',
         name: 'test',
         current: {value: '$__all' },
         allValue: '*',
@@ -108,7 +113,7 @@ define([
 
   describe('lucene format', function() {
     it('should properly escape $test with lucene escape sequences', function() {
-        _templateSrv.init([{name: 'test', current: {value: 'value/4' }}]);
+      initTemplateSrv([{type: 'query', name: 'test', current: {value: 'value/4' }}]);
       var target = _templateSrv.replace('this:$test', {}, 'lucene');
       expect(target).to.be("this:value\\\/4");
     });
@@ -149,7 +154,7 @@ define([
 
   describe('can check if variable exists', function() {
     beforeEach(function() {
-        _templateSrv.init([{ name: 'test', current: { value: 'oogle' } }]);
+      initTemplateSrv([{type: 'query', name: 'test', current: { value: 'oogle' } }]);
     });
 
     it('should return true if exists', function() {
@@ -160,7 +165,7 @@ define([
 
   describe('can hightlight variables in string', function() {
     beforeEach(function() {
-        _templateSrv.init([{ name: 'test', current: { value: 'oogle' } }]);
+      initTemplateSrv([{type: 'query', name: 'test', current: { value: 'oogle' } }]);
     });
 
     it('should insert html', function() {
@@ -181,7 +186,7 @@ define([
 
   describe('updateTemplateData with simple value', function() {
     beforeEach(function() {
-        _templateSrv.init([{ name: 'test', current: { value: 'muuuu' } }]);
+      initTemplateSrv([{type: 'query', name: 'test', current: { value: 'muuuu' } }]);
     });
 
     it('should set current value and update template data', function() {
@@ -192,7 +197,7 @@ define([
 
   describe('fillVariableValuesForUrl with multi value', function() {
     beforeEach(function() {
-        _templateSrv.init([{ name: 'test', current: { value: ['val1', 'val2'] }}]);
+      initTemplateSrv([{type: 'query', name: 'test', current: { value: ['val1', 'val2'] }}]);
     });
 
     it('should set multiple url params', function() {
@@ -204,10 +209,10 @@ define([
 
   describe('fillVariableValuesForUrl with multi value and scopedVars', function() {
     beforeEach(function() {
-        _templateSrv.init([{ name: 'test', current: { value: ['val1', 'val2'] }}]);
+      initTemplateSrv([{type: 'query', name: 'test', current: { value: ['val1', 'val2'] }}]);
     });
 
-      it('should set multiple url params', function() {
+    it('should set scoped value as url params', function() {
       var params = {};
       _templateSrv.fillVariableValuesForUrl(params, {'test': {value: 'val1'}});
       expect(params['var-test']).to.eql('val1');
@@ -216,9 +221,9 @@ define([
 
   describe('replaceWithText', function() {
     beforeEach(function() {
-        _templateSrv.init([
-          { name: 'server', current: { value: '{asd,asd2}', text: 'All' } },
-          { name: 'period', current: { value: '$__auto_interval', text: 'auto' } }
+      initTemplateSrv([
+        {type: 'query', name: 'server', current: { value: '{asd,asd2}', text: 'All' } },
+        {type: 'interval', name: 'period', current: { value: '$__auto_interval', text: 'auto' } }
       ]);
       _templateSrv.setGrafanaVariable('$__auto_interval', '13m');
       _templateSrv.updateTemplateData();
@@ -229,7 +234,4 @@ define([
       expect(target).to.be('Server: All, period: 13m');
     });
   });
-
-  });
-
 });

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});
               }
             }
           }