fix(influxdb): fixes and refactorings of influxdb 0.9 editor, no longer shows…

fix(influxdb): fixes and refactorings of influxdb 0.9 editor, no longer shows template vars in keys dropdown and group by dropdownm, fixes #2636

CHANGELOG.md

@@ -24,6 +24,7 @@ it allows you to add queries of differnet data source types & instances to the s
 - [Issue #2563](https://github.com/grafana/grafana/issues/2563). Annotations: Fixed issue when html sanitizer failes for title to annotation body, now fallbacks to html escaping title and text
 - [Issue #2563](https://github.com/grafana/grafana/issues/2563). Annotations: Fixed issue when html sanitizer failes for title to annotation body, now fallbacks to html escaping title and text
 - [Issue #2564](https://github.com/grafana/grafana/issues/2564). Templating: Another atempt at fixing #2534 (Init multi value template var used in repeat panel from url)
 - [Issue #2564](https://github.com/grafana/grafana/issues/2564). Templating: Another atempt at fixing #2534 (Init multi value template var used in repeat panel from url)
 - [Issue #2620](https://github.com/grafana/grafana/issues/2620). Graph: multi series tooltip did no highlight correct point when stacking was enabled and series were of different resolution
 - [Issue #2620](https://github.com/grafana/grafana/issues/2620). Graph: multi series tooltip did no highlight correct point when stacking was enabled and series were of different resolution
+- [Issue #2636](https://github.com/grafana/grafana/issues/2636). InfluxDB: Do no show template vars in dropdown for tag keys and group by keys
 
 
 **Breaking Changes**
 **Breaking Changes**
 - Notice to makers/users of custom data sources, there is a minor breaking change in 2.2 that
 - Notice to makers/users of custom data sources, there is a minor breaking change in 2.2 that

public/app/plugins/datasource/influxdb/queryCtrl.js

@@ -119,8 +119,7 @@ function (angular, _, InfluxQueryBuilder) {
     $scope.getMeasurements = function () {
     $scope.getMeasurements = function () {
       var query = $scope.queryBuilder.buildExploreQuery('MEASUREMENTS');
       var query = $scope.queryBuilder.buildExploreQuery('MEASUREMENTS');
       return $scope.datasource.metricFindQuery(query)
       return $scope.datasource.metricFindQuery(query)
-      .then($scope.transformToSegments)
-      .then($scope.addTemplateVariableSegments)
+      .then($scope.transformToSegments(true))
       .then(null, $scope.handleQueryError);
       .then(null, $scope.handleQueryError);
     };
     };
 
 
@@ -129,42 +128,46 @@ function (angular, _, InfluxQueryBuilder) {
       return [];
       return [];
     };
     };
 
 
-    $scope.transformToSegments = function(results) {
-      return _.map(results, function(segment) {
-        return new MetricSegment({ value: segment.text, expandable: segment.expandable });
-      });
-    };
+    $scope.transformToSegments = function(addTemplateVars) {
+      return function(results) {
+        var segments = _.map(results, function(segment) {
+          return new MetricSegment({ value: segment.text, expandable: segment.expandable });
+        });
 
 
-    $scope.addTemplateVariableSegments = function(segments) {
-      _.each(templateSrv.variables, function(variable) {
-        segments.unshift(new MetricSegment({ type: 'template', value: '/$' + variable.name + '/', expandable: true }));
-      });
-      return segments;
+        if (addTemplateVars) {
+          _.each(templateSrv.variables, function(variable) {
+            segments.unshift(new MetricSegment({ type: 'template', value: '/$' + variable.name + '/', expandable: true }));
+          });
+        }
+
+        return segments;
+      };
     };
     };
 
 
     $scope.getTagsOrValues = function(segment, index) {
     $scope.getTagsOrValues = function(segment, index) {
-      var query;
+      if (segment.type === 'condition') {
+        return $q.when([new MetricSegment('AND'), new MetricSegment('OR')]);
+      }
+      if (segment.type === 'operator') {
+        var nextValue = $scope.tagSegments[index+1].value;
+        if (/^\/.*\/$/.test(nextValue)) {
+          return $q.when(MetricSegment.newOperators(['=~', '!~']));
+        } else {
+          return $q.when(MetricSegment.newOperators(['=', '<>', '<', '>']));
+        }
+      }
 
 
+      var query, addTemplateVars;
       if (segment.type === 'key' || segment.type === 'plus-button') {
       if (segment.type === 'key' || segment.type === 'plus-button') {
         query = $scope.queryBuilder.buildExploreQuery('TAG_KEYS');
         query = $scope.queryBuilder.buildExploreQuery('TAG_KEYS');
+        addTemplateVars = false;
       } else if (segment.type === 'value')  {
       } else if (segment.type === 'value')  {
         query = $scope.queryBuilder.buildExploreQuery('TAG_VALUES', $scope.tagSegments[index-2].value);
         query = $scope.queryBuilder.buildExploreQuery('TAG_VALUES', $scope.tagSegments[index-2].value);
-      } else if (segment.type === 'condition') {
-        return $q.when([new MetricSegment('AND'), new MetricSegment('OR')]);
-      } else if (segment.type === 'operator' && /^(?!\/.*\/$)/.test($scope.tagSegments[index+1].value)) {
-        return $q.when([MetricSegment.newOperator('='), MetricSegment.newOperator('<>'),
-                        MetricSegment.newOperator('<'), MetricSegment.newOperator('>')]);
-
-      } else if (segment.type === 'operator' && /^\/.*\/$/.test($scope.tagSegments[index+1].value)) {
-        return $q.when([MetricSegment.newOperator('=~'), MetricSegment.newOperator('!~')]);
-      }
-      else  {
-        return $q.when([]);
+        addTemplateVars = true;
       }
       }
 
 
       return $scope.datasource.metricFindQuery(query)
       return $scope.datasource.metricFindQuery(query)
-      .then($scope.transformToSegments)
-      .then($scope.addTemplateVariableSegments)
+      .then($scope.transformToSegments(addTemplateVars))
       .then(function(results) {
       .then(function(results) {
         if (segment.type === 'key') {
         if (segment.type === 'key') {
           results.splice(0, 0, angular.copy($scope.removeTagFilterSegment));
           results.splice(0, 0, angular.copy($scope.removeTagFilterSegment));
@@ -177,8 +180,8 @@ function (angular, _, InfluxQueryBuilder) {
     $scope.getFieldSegments = function() {
     $scope.getFieldSegments = function() {
       var fieldsQuery = $scope.queryBuilder.buildExploreQuery('FIELDS');
       var fieldsQuery = $scope.queryBuilder.buildExploreQuery('FIELDS');
       return $scope.datasource.metricFindQuery(fieldsQuery)
       return $scope.datasource.metricFindQuery(fieldsQuery)
-        .then($scope.transformToSegments)
-        .then(null, $scope.handleQueryError);
+      .then($scope.transformToSegments)
+      .then(null, $scope.handleQueryError);
     };
     };
 
 
     $scope.addField = function() {
     $scope.addField = function() {
@@ -197,8 +200,7 @@ function (angular, _, InfluxQueryBuilder) {
       var query = $scope.queryBuilder.buildExploreQuery('TAG_KEYS');
       var query = $scope.queryBuilder.buildExploreQuery('TAG_KEYS');
 
 
       return $scope.datasource.metricFindQuery(query)
       return $scope.datasource.metricFindQuery(query)
-      .then($scope.transformToSegments)
-      .then($scope.addTemplateVariableSegments)
+      .then($scope.transformToSegments(false))
       .then(function(results) {
       .then(function(results) {
         if (segment.type !== 'plus-button') {
         if (segment.type !== 'plus-button') {
           results.splice(0, 0, angular.copy($scope.removeGroupBySegment));
           results.splice(0, 0, angular.copy($scope.removeGroupBySegment));
@@ -322,6 +324,12 @@ function (angular, _, InfluxQueryBuilder) {
       return new MetricSegment({value: op, type: 'operator', cssClass: 'query-segment-operator' });
       return new MetricSegment({value: op, type: 'operator', cssClass: 'query-segment-operator' });
     };
     };
 
 
+    MetricSegment.newOperators = function(ops) {
+      return _.map(ops, function(op) {
+        return new MetricSegment({value: op, type: 'operator', cssClass: 'query-segment-operator' });
+      });
+    };
+
     MetricSegment.newPlusButton = function() {
     MetricSegment.newPlusButton = function() {
       return new MetricSegment({fake: true, html: '<i class="fa fa-plus "></i>', type: 'plus-button' });
       return new MetricSegment({fake: true, html: '<i class="fa fa-plus "></i>', type: 'plus-button' });
     };
     };