graphite: add tags to dropdown and switch to tag editor if selected

public/app/core/directives/metric_segment.js

@@ -46,6 +46,7 @@ function (_, $, coreModule) {
               segment.html = selected.html || selected.value;
               segment.html = selected.html || selected.value;
               segment.fake = false;
               segment.fake = false;
               segment.expandable = selected.expandable;
               segment.expandable = selected.expandable;
+              segment.type = selected.type;
             }
             }
             else if (segment.custom !== 'false') {
             else if (segment.custom !== 'false') {
               segment.value = value;
               segment.value = value;

public/app/plugins/datasource/graphite/datasource.ts

@@ -9,6 +9,7 @@ export function GraphiteDatasource(instanceSettings, $q, backendSrv, templateSrv
   this.url = instanceSettings.url;
   this.url = instanceSettings.url;
   this.name = instanceSettings.name;
   this.name = instanceSettings.name;
   this.graphiteVersion = instanceSettings.jsonData.graphiteVersion || '0.9';
   this.graphiteVersion = instanceSettings.jsonData.graphiteVersion || '0.9';
+  this.supportsTags = supportsTags(this.graphiteVersion);
   this.cacheTimeout = instanceSettings.cacheTimeout;
   this.cacheTimeout = instanceSettings.cacheTimeout;
   this.withCredentials = instanceSettings.withCredentials;
   this.withCredentials = instanceSettings.withCredentials;
   this.render_method = instanceSettings.render_method || 'POST';
   this.render_method = instanceSettings.render_method || 'POST';
@@ -357,3 +358,7 @@ export function GraphiteDatasource(instanceSettings, $q, backendSrv, templateSrv
     return clean_options;
     return clean_options;
   };
   };
 }
 }
+
+function supportsTags(version: string): boolean {
+  return version >= '1.1';
+}

public/app/plugins/datasource/graphite/query_ctrl.ts

@@ -8,6 +8,7 @@ import {QueryCtrl} from 'app/plugins/sdk';
 import appEvents from 'app/core/app_events';
 import appEvents from 'app/core/app_events';
 
 
 const GRAPHITE_TAG_OPERATORS = ['=', '!=', '=~', '!=~'];
 const GRAPHITE_TAG_OPERATORS = ['=', '!=', '=~', '!=~'];
+const TAG_PREFIX = 'tag: ';
 
 
 export class GraphiteQueryCtrl extends QueryCtrl {
 export class GraphiteQueryCtrl extends QueryCtrl {
   static templateUrl = 'partials/query.editor.html';
   static templateUrl = 'partials/query.editor.html';
@@ -16,10 +17,12 @@ export class GraphiteQueryCtrl extends QueryCtrl {
   segments: any[];
   segments: any[];
   addTagSegments: any[];
   addTagSegments: any[];
   removeTagValue: string;
   removeTagValue: string;
+  supportsTags: boolean;
 
 
   /** @ngInject **/
   /** @ngInject **/
   constructor($scope, $injector, private uiSegmentSrv, private templateSrv) {
   constructor($scope, $injector, private uiSegmentSrv, private templateSrv) {
     super($scope, $injector);
     super($scope, $injector);
+    this.supportsTags = this.datasource.supportsTags;
 
 
     if (this.target) {
     if (this.target) {
       this.target.target = this.target.target || '';
       this.target.target = this.target.target || '';
@@ -94,7 +97,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
   }
   }
 
 
   getAltSegments(index) {
   getAltSegments(index) {
-    var query = index === 0 ?  '*' : this.queryModel.getSegmentPathUpTo(index) + '.*';
+    var query = index === 0 ? '*' : this.queryModel.getSegmentPathUpTo(index) + '.*';
     var options = {range: this.panelCtrl.range, requestId: "get-alt-segments"};
     var options = {range: this.panelCtrl.range, requestId: "get-alt-segments"};
 
 
     return this.datasource.metricFindQuery(query, options).then(segments => {
     return this.datasource.metricFindQuery(query, options).then(segments => {
@@ -115,12 +118,32 @@ export class GraphiteQueryCtrl extends QueryCtrl {
 
 
       // add wildcard option
       // add wildcard option
       altSegments.unshift(this.uiSegmentSrv.newSegment('*'));
       altSegments.unshift(this.uiSegmentSrv.newSegment('*'));
-      return altSegments;
+
+      if (this.supportsTags && index === 0) {
+        this.removeTaggedEntry(altSegments);
+        return this.addAltTagSegments(index, altSegments);
+      } else {
+        return altSegments;
+      }
     }).catch(err => {
     }).catch(err => {
       return [];
       return [];
     });
     });
   }
   }
 
 
+  addAltTagSegments(index, altSegments) {
+    return this.getTagsAsSegments().then((tagSegments) => {
+      tagSegments = _.map(tagSegments, (segment) => {
+        segment.value = TAG_PREFIX + segment.value;
+        return segment;
+      });
+      return altSegments.concat(...tagSegments);
+    });
+  }
+
+  removeTaggedEntry(altSegments) {
+    altSegments = _.remove(altSegments, (s) => s.value === '_tagged');
+  }
+
   segmentValueChanged(segment, segmentIndex) {
   segmentValueChanged(segment, segmentIndex) {
     this.error = null;
     this.error = null;
     this.queryModel.updateSegmentValue(segment, segmentIndex);
     this.queryModel.updateSegmentValue(segment, segmentIndex);
@@ -129,6 +152,12 @@ export class GraphiteQueryCtrl extends QueryCtrl {
       this.queryModel.functions = [];
       this.queryModel.functions = [];
     }
     }
 
 
+    if (segment.type === 'tag') {
+      let tag = removeTagPrefix(segment.value);
+      this.addSeriesByTagFunc(tag);
+      return;
+    }
+
     if (segment.expandable) {
     if (segment.expandable) {
       return this.checkOtherSegments(segmentIndex + 1).then(() => {
       return this.checkOtherSegments(segmentIndex + 1).then(() => {
         this.setSegmentFocus(segmentIndex + 1);
         this.setSegmentFocus(segmentIndex + 1);
@@ -201,6 +230,19 @@ export class GraphiteQueryCtrl extends QueryCtrl {
     this.targetChanged();
     this.targetChanged();
   }
   }
 
 
+  addSeriesByTagFunc(tag) {
+    let funcDef = gfunc.getFuncDef('seriesByTag');
+    let newFunc = gfunc.createFuncInstance(funcDef, { withDefaultParams: false });
+    let tagParam = `${tag}=select tag value`;
+    newFunc.params = [tagParam];
+    this.queryModel.addFunction(newFunc);
+    newFunc.added = true;
+
+    this.emptySegments();
+    this.targetChanged();
+    this.parseTarget();
+  }
+
   smartlyHandleNewAliasByNode(func) {
   smartlyHandleNewAliasByNode(func) {
     if (func.def.name !== 'aliasByNode') {
     if (func.def.name !== 'aliasByNode') {
       return;
       return;
@@ -227,7 +269,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
   getTagsAsSegments() {
   getTagsAsSegments() {
     return this.datasource.getTags().then((values) => {
     return this.datasource.getTags().then((values) => {
       return _.map(values, (val) => {
       return _.map(values, (val) => {
-        return this.uiSegmentSrv.newSegment(val.text);
+        return this.uiSegmentSrv.newSegment({value: val.text, type: 'tag', expandable: false});
       });
       });
     });
     });
   }
   }
@@ -277,3 +319,7 @@ function mapToDropdownOptions(results) {
     return {text: value, value: value};
     return {text: value, value: value};
   });
   });
 }
 }
+
+function removeTagPrefix(value: string): string {
+  return value.replace(TAG_PREFIX, '');
+}