Fixes for graphite tags editor (#10861)

* graphite: don't fetch tags on editor init

* add debounce option to query editor directives

* graphite: debounce tag queries

public/app/core/components/form_dropdown/form_dropdown.ts

@@ -34,6 +34,7 @@ export class FormDropdownCtrl {
   lookupText: boolean;
   lookupText: boolean;
   placeholder: any;
   placeholder: any;
   startOpen: any;
   startOpen: any;
+  debounce: number;
 
 
   /** @ngInject **/
   /** @ngInject **/
   constructor(private $scope, $element, private $sce, private templateSrv, private $q) {
   constructor(private $scope, $element, private $sce, private templateSrv, private $q) {
@@ -72,6 +73,10 @@ export class FormDropdownCtrl {
       this.source(this.query, this.process.bind(this));
       this.source(this.query, this.process.bind(this));
     };
     };
 
 
+    if (this.debounce) {
+      typeahead.lookup = _.debounce(typeahead.lookup, 500, { leading: true });
+    }
+
     this.linkElement.keydown(evt => {
     this.linkElement.keydown(evt => {
       // trigger typeahead on down arrow or enter key
       // trigger typeahead on down arrow or enter key
       if (evt.keyCode === 40 || evt.keyCode === 13) {
       if (evt.keyCode === 40 || evt.keyCode === 13) {
@@ -263,6 +268,7 @@ export function formDropdownDirective() {
       lookupText: '@',
       lookupText: '@',
       placeholder: '@',
       placeholder: '@',
       startOpen: '@',
       startOpen: '@',
+      debounce: '@',
     },
     },
   };
   };
 }
 }

public/app/core/components/query_part/query_part_editor.ts

@@ -23,11 +23,13 @@ export function queryPartEditorDirective($compile, templateSrv) {
     scope: {
     scope: {
       part: '=',
       part: '=',
       handleEvent: '&',
       handleEvent: '&',
+      debounce: '@',
     },
     },
     link: function postLink($scope, elem) {
     link: function postLink($scope, elem) {
       var part = $scope.part;
       var part = $scope.part;
       var partDef = part.def;
       var partDef = part.def;
       var $paramsContainer = elem.find('.query-part-parameters');
       var $paramsContainer = elem.find('.query-part-parameters');
+      var debounceLookup = $scope.debounce;
 
 
       $scope.partActions = [];
       $scope.partActions = [];
 
 
@@ -128,6 +130,10 @@ export function queryPartEditorDirective($compile, templateSrv) {
           var items = this.source(this.query, $.proxy(this.process, this));
           var items = this.source(this.query, $.proxy(this.process, this));
           return items ? this.process(items) : items;
           return items ? this.process(items) : items;
         };
         };
+
+        if (debounceLookup) {
+          typeahead.lookup = _.debounce(typeahead.lookup, 500, { leading: true });
+        }
       }
       }
 
 
       $scope.showActionsMenu = function() {
       $scope.showActionsMenu = function() {

public/app/core/directives/metric_segment.js

@@ -22,6 +22,7 @@ function (_, $, coreModule) {
         segment: "=",
         segment: "=",
         getOptions: "&",
         getOptions: "&",
         onChange: "&",
         onChange: "&",
+        debounce: "@",
       },
       },
       link: function($scope, elem) {
       link: function($scope, elem) {
         var $input = $(inputTemplate);
         var $input = $(inputTemplate);
@@ -30,6 +31,7 @@ function (_, $, coreModule) {
         var options = null;
         var options = null;
         var cancelBlur = null;
         var cancelBlur = null;
         var linkMode = true;
         var linkMode = true;
+        var debounceLookup = $scope.debounce;
 
 
         $input.appendTo(elem);
         $input.appendTo(elem);
         $button.appendTo(elem);
         $button.appendTo(elem);
@@ -135,6 +137,10 @@ function (_, $, coreModule) {
           return items ? this.process(items) : items;
           return items ? this.process(items) : items;
         };
         };
 
 
+        if (debounceLookup) {
+          typeahead.lookup = _.debounce(typeahead.lookup, 500, {leading: true});
+        }
+
         $button.keydown(function(evt) {
         $button.keydown(function(evt) {
           // trigger typeahead on down arrow or enter key
           // trigger typeahead on down arrow or enter key
           if (evt.keyCode === 40 || evt.keyCode === 13) {
           if (evt.keyCode === 40 || evt.keyCode === 13) {

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

@@ -13,9 +13,9 @@
       <div ng-if="ctrl.queryModel.seriesByTagUsed" ng-repeat="tag in ctrl.queryModel.tags" class="gf-form">
       <div ng-if="ctrl.queryModel.seriesByTagUsed" ng-repeat="tag in ctrl.queryModel.tags" class="gf-form">
         <gf-form-dropdown
         <gf-form-dropdown
           model="tag.key"
           model="tag.key"
-          lookup-text="false"
           allow-custom="true"
           allow-custom="true"
           label-mode="true"
           label-mode="true"
+          debounce="true"
           placeholder="Tag key"
           placeholder="Tag key"
           css-class="query-segment-key"
           css-class="query-segment-key"
           get-options="ctrl.getTags($index, $query)"
           get-options="ctrl.getTags($index, $query)"
@@ -23,8 +23,6 @@
         />
         />
         <gf-form-dropdown
         <gf-form-dropdown
           model="tag.operator"
           model="tag.operator"
-          lookup-text="false"
-          allow-custom="false"
           label-mode="true"
           label-mode="true"
           css-class="query-segment-operator"
           css-class="query-segment-operator"
           get-options="ctrl.getTagOperators()"
           get-options="ctrl.getTagOperators()"
@@ -33,9 +31,9 @@
         />
         />
         <gf-form-dropdown
         <gf-form-dropdown
           model="tag.value"
           model="tag.value"
-          lookup-text="false"
           allow-custom="true"
           allow-custom="true"
           label-mode="true"
           label-mode="true"
+          debounce="true"
           css-class="query-segment-value"
           css-class="query-segment-value"
           placeholder="Tag value"
           placeholder="Tag value"
           get-options="ctrl.getTagValues(tag, $index, $query)"
           get-options="ctrl.getTagValues(tag, $index, $query)"
@@ -45,7 +43,7 @@
       </div>
       </div>
 
 
       <div ng-if="ctrl.queryModel.seriesByTagUsed" ng-repeat="segment in ctrl.addTagSegments" role="menuitem" class="gf-form">
       <div ng-if="ctrl.queryModel.seriesByTagUsed" ng-repeat="segment in ctrl.addTagSegments" role="menuitem" class="gf-form">
-        <metric-segment segment="segment" get-options="ctrl.getTagsAsSegments($query)" on-change="ctrl.addNewTag(segment)" />
+        <metric-segment segment="segment" get-options="ctrl.getTagsAsSegments($query)" on-change="ctrl.addNewTag(segment)" debounce="true" />
       </div>
       </div>
 
 
       <div ng-if="!ctrl.queryModel.seriesByTagUsed" ng-repeat="segment in ctrl.segments" role="menuitem" class="gf-form">
       <div ng-if="!ctrl.queryModel.seriesByTagUsed" ng-repeat="segment in ctrl.segments" role="menuitem" class="gf-form">