graphite: tags and values autocomplete based on @DanCech PR to graphite-web

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

@@ -247,7 +247,7 @@ export function GraphiteDatasource(instanceSettings, $q, backendSrv, templateSrv
   this.getTagValues = function(tag, optionalOptions) {
   this.getTagValues = function(tag, optionalOptions) {
     let options = optionalOptions || {};
     let options = optionalOptions || {};
 
 
-    let httpOptions: any =  {
+    let httpOptions: any = {
       method: 'GET',
       method: 'GET',
       url: '/tags/' + tag,
       url: '/tags/' + tag,
       // for cancellations
       // for cancellations
@@ -273,6 +273,57 @@ export function GraphiteDatasource(instanceSettings, $q, backendSrv, templateSrv
     });
     });
   };
   };
 
 
+  this.getTagsAutoComplete = (expression, tagPrefix) => {
+    let httpOptions: any = {
+      method: 'GET',
+      url: '/tags/autoComplete/tags',
+      params: {
+        expr: expression
+      }
+    };
+
+    if (tagPrefix) {
+      httpOptions.params.tagPrefix = tagPrefix;
+    }
+
+    return this.doGraphiteRequest(httpOptions).then(results => {
+      if (results.data) {
+        return _.map(results.data, (tag) => {
+          return { text: tag };
+        });
+      } else {
+        return [];
+      }
+    });
+  };
+
+  this.getTagValuesAutoComplete = (expression, tag, valuePrefix) => {
+    let httpOptions: any = {
+      method: 'GET',
+      url: '/tags/autoComplete/values',
+      params: {
+        expr: expression
+      }
+    };
+
+    if (tag) {
+      httpOptions.params.tag = tag;
+    }
+    if (valuePrefix) {
+      httpOptions.params.valuePrefix = valuePrefix;
+    }
+
+    return this.doGraphiteRequest(httpOptions).then(results => {
+      if (results.data) {
+        return _.map(results.data, (value) => {
+          return { text: value };
+        });
+      } else {
+        return [];
+      }
+    });
+  };
+
   this.getVersion = function() {
   this.getVersion = function() {
     let httpOptions = {
     let httpOptions = {
       method: 'GET',
       method: 'GET',

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

@@ -263,6 +263,15 @@ export default class GraphiteQuery {
     this.getSeriesByTagFunc().params[tagIndex] = newTagParam;
     this.getSeriesByTagFunc().params[tagIndex] = newTagParam;
     this.tags[tagIndex] = tag;
     this.tags[tagIndex] = tag;
   }
   }
+
+  renderTagExpressions(excludeIndex = -1) {
+    return _.compact(_.map(this.tags, (tagExpr, index) => {
+      // Don't render tag that we want to lookup
+      if (index !== excludeIndex) {
+        return tagExpr.key + tagExpr.operator + tagExpr.value;
+      }
+    }));
+  }
 }
 }
 
 
 function wrapFunction(target, func) {
 function wrapFunction(target, func) {

public/app/plugins/datasource/graphite/partials/query.editor.html

@@ -12,7 +12,7 @@
 
 
       <div ng-repeat="tag in ctrl.queryModel.tags" class="gf-form">
       <div ng-repeat="tag in ctrl.queryModel.tags" class="gf-form">
         <gf-form-dropdown model="tag.key" lookup-text="false" allow-custom="false" label-mode="true" css-class="query-segment-key"
         <gf-form-dropdown model="tag.key" lookup-text="false" allow-custom="false" label-mode="true" css-class="query-segment-key"
-          get-options="ctrl.getTags()"
+          get-options="ctrl.getTags($index, $query)"
           on-change="ctrl.tagChanged(tag, $index)">
           on-change="ctrl.tagChanged(tag, $index)">
         </gf-form-dropdown>
         </gf-form-dropdown>
         <gf-form-dropdown model="tag.operator" lookup-text="false" allow-custom="false" label-mode="true" css-class="query-segment-operator"
         <gf-form-dropdown model="tag.operator" lookup-text="false" allow-custom="false" label-mode="true" css-class="query-segment-operator"
@@ -20,7 +20,7 @@
           on-change="ctrl.tagChanged(tag, $index)">
           on-change="ctrl.tagChanged(tag, $index)">
         </gf-form-dropdown>
         </gf-form-dropdown>
         <gf-form-dropdown model="tag.value" lookup-text="false" allow-custom="false" label-mode="true" css-class="query-segment-value"
         <gf-form-dropdown model="tag.value" lookup-text="false" allow-custom="false" label-mode="true" css-class="query-segment-value"
-          get-options="ctrl.getTagValues(tag)"
+          get-options="ctrl.getTagValues(tag, $index, $query)"
           on-change="ctrl.tagChanged(tag, $index)">
           on-change="ctrl.tagChanged(tag, $index)">
         </gf-form-dropdown>
         </gf-form-dropdown>
         <label class="gf-form-label query-keyword" ng-if="ctrl.showDelimiter($index)">,</label>
         <label class="gf-form-label query-keyword" ng-if="ctrl.showDelimiter($index)">,</label>

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

@@ -258,7 +258,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
     }
     }
   }
   }
 
 
-  getTags() {
+  getAllTags() {
     return this.datasource.getTags().then((values) => {
     return this.datasource.getTags().then((values) => {
       let altTags = _.map(values, 'text');
       let altTags = _.map(values, 'text');
       altTags.splice(0, 0, this.removeTagValue);
       altTags.splice(0, 0, this.removeTagValue);
@@ -266,8 +266,20 @@ export class GraphiteQueryCtrl extends QueryCtrl {
     });
     });
   }
   }
 
 
+  getTags(index, tagPrefix) {
+    let tagExpressions = this.queryModel.renderTagExpressions(index);
+    return this.datasource.getTagsAutoComplete(tagExpressions, tagPrefix)
+    .then((values) => {
+      let altTags = _.map(values, 'text');
+      altTags.splice(0, 0, this.removeTagValue);
+      return mapToDropdownOptions(altTags);
+    });
+  }
+
   getTagsAsSegments() {
   getTagsAsSegments() {
-    return this.datasource.getTags().then((values) => {
+    let tagExpressions = this.queryModel.renderTagExpressions();
+    return this.datasource.getTagsAutoComplete(tagExpressions)
+    .then((values) => {
       return _.map(values, (val) => {
       return _.map(values, (val) => {
         return this.uiSegmentSrv.newSegment({value: val.text, type: 'tag', expandable: false});
         return this.uiSegmentSrv.newSegment({value: val.text, type: 'tag', expandable: false});
       });
       });
@@ -278,7 +290,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
     return mapToDropdownOptions(GRAPHITE_TAG_OPERATORS);
     return mapToDropdownOptions(GRAPHITE_TAG_OPERATORS);
   }
   }
 
 
-  getTagValues(tag) {
+  getAllTagValues(tag) {
     let tagKey = tag.key;
     let tagKey = tag.key;
     return this.datasource.getTagValues(tagKey).then((values) => {
     return this.datasource.getTagValues(tagKey).then((values) => {
       let altValues = _.map(values, 'text');
       let altValues = _.map(values, 'text');
@@ -286,6 +298,15 @@ export class GraphiteQueryCtrl extends QueryCtrl {
     });
     });
   }
   }
 
 
+  getTagValues(tag, index, valuePrefix) {
+    let tagExpressions = this.queryModel.renderTagExpressions(index);
+    let tagKey = tag.key;
+    return this.datasource.getTagValuesAutoComplete(tagExpressions, tagKey, valuePrefix).then((values) => {
+      let altValues = _.map(values, 'text');
+      return mapToDropdownOptions(altValues);
+    });
+  }
+
   tagChanged(tag, tagIndex) {
   tagChanged(tag, tagIndex) {
     this.queryModel.updateTag(tag, tagIndex);
     this.queryModel.updateTag(tag, tagIndex);
     this.targetChanged();
     this.targetChanged();