fix: graphite func editor fixes, this component is messy and ugly as hell

e9d33750 · Torkel Ödegaard · Dan Cech · 1a6bf692 · e9d33750 · e9d33750
Commit e9d33750 authored Jan 12, 2018 by Torkel Ödegaard Committed by Dan Cech Jan 16, 2018
Show whitespace changes
Inline Side-by-side

Showing with 55 additions and 46 deletions

public/app/plugins/datasource/graphite/add_graphite_func.js
+31 -35

public/app/plugins/datasource/graphite/func_editor.js
+24 -11

No files found.
--- a/public/app/plugins/datasource/graphite/add_graphite_func.js
+++ b/public/app/plugins/datasource/graphite/add_graphite_func.js
-define([
+define(['angular', 'lodash', 'jquery', 'rst2html', 'tether-drop'], function(angular, _, $, rst2html, Drop) {
-  'angular',
-  'lodash',
-  'jquery',
-  'rst2html',
-  'tether-drop',
-],
-function (angular, _, $, rst2html, Drop) {
  'use strict';
-  angular
+  angular.module('grafana.directives').directive('graphiteAddFunc', function($compile) {
-    .module('grafana.directives')
+    var inputTemplate =
-  .directive('graphiteAddFunc', function($compile) {
+      '<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>';
-      var inputTemplate = '<input type="text"'+
-                            ' class="gf-form-input"' +
-                            ' spellcheck="false" style="display:none"></input>';
-      var buttonTemplate = '<a class="gf-form-label query-part dropdown-toggle"' +
+    var buttonTemplate =
+      '<a class="gf-form-label query-part dropdown-toggle"' +
      ' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown">' +
      '<i class="fa fa-plus"></i></a>';
@@ -39,7 +30,7 @@ function (angular, _, $, rst2html, Drop) {
            source: allFunctions,
            minLength: 1,
            items: 10,
-              updater: function (value) {
+            updater: function(value) {
              var funcDef = ctrl.datasource.getFuncDef(value);
              if (!funcDef) {
                // try find close match
@@ -48,7 +39,9 @@ function (angular, _, $, rst2html, Drop) {
                  return funcName.toLowerCase().indexOf(value) === 0;
                });
-                  if (!funcDef) { return; }
+                if (!funcDef) {
+                  return;
+                }
              }
              $scope.$apply(function() {
@@ -57,7 +50,7 @@ function (angular, _, $, rst2html, Drop) {
              $input.trigger('blur');
              return '';
-              }
+            },
          });
          $button.click(function() {
@@ -84,13 +77,17 @@ function (angular, _, $, rst2html, Drop) {
          $compile(elem.contents())($scope);
        });
-          var drops = [];
+        var drop;
+        var cleanUpDrop = function() {
+          if (drop) {
+            drop.destroy();
+            drop = null;
+          }
+        };
        $(elem)
-            .on('mouseenter', 'ul.dropdown-menu li', function () {
+          .on('mouseenter', 'ul.dropdown-menu li', function() {
-              while (drops.length > 0) {
+            cleanUpDrop();
-                drops.pop().remove();
-              }
            var funcDef;
            try {
@@ -108,7 +105,7 @@ function (angular, _, $, rst2html, Drop) {
              var contentElement = document.createElement('div');
              contentElement.innerHTML = '<h4>' + funcDef.name + '</h4>' + rst2html(shortDesc);
-                var drop = new Drop({
+              drop = new Drop({
                target: this,
                content: contentElement,
                classes: 'drop-popover',
@@ -118,18 +115,14 @@ function (angular, _, $, rst2html, Drop) {
                  targetAttachment: 'bottom right',
                },
              });
-                drops.push(drop);
-                drop.open();
            }
          })
          .on('mouseout', 'ul.dropdown-menu li', function() {
-              while (drops.length > 0) {
+            cleanUpDrop();
-                drops.pop().remove();
-              }
          });
-        }
+        $scope.$on('$destroy', cleanUpDrop);
+      },
    };
  });
@@ -149,11 +142,14 @@ function (angular, _, $, rst2html, Drop) {
      });
    });
-    return _.sortBy(_.map(categories, function(submenu, category) {
+    return _.sortBy(
+      _.map(categories, function(submenu, category) {
        return {
          text: category,
-        submenu: _.sortBy(submenu, 'text')
+          submenu: _.sortBy(submenu, 'text'),
        };
-    }), 'text');
+      }),
+      'text'
+    );
  }
 });
--- a/public/app/plugins/datasource/graphite/func_editor.js
+++ b/public/app/plugins/datasource/graphite/func_editor.js
@@ -32,6 +32,7 @@ function (angular, _, $, rst2html) {
          var func = $scope.func;
          var scheduledRelink = false;
          var paramCountAtLink = 0;
+          var cancelBlur = null;
          function clickFuncParam(paramIndex) {
            /*jshint validthis:true */
@@ -79,21 +80,23 @@ function (angular, _, $, rst2html) {
            return {};
          }
-          function inputBlur(paramIndex) {
+          function switchToLink(inputElem, paramIndex) {
            /*jshint validthis:true */
-            var $input = $(this);
+            var $input = $(inputElem);
-            if ($input.data('typeahead') && $input.data('typeahead').shown) {
-              return;
+            clearTimeout(cancelBlur);
-            }
+            cancelBlur = null;
            var $link = $input.prev();
            var $comma = $link.prev('.comma');
            var newValue = $input.val();
+            // remove optional empty params
            if (newValue !== '' || paramDef(paramIndex).optional) {
-              $link.html(templateSrv.highlightVariablesAsHtml(newValue));
              func.updateParam(newValue, paramIndex);
+            }
+            $link.html(templateSrv.highlightVariablesAsHtml(newValue));
            scheduledRelinkIfNeeded();
            $scope.$apply(function() {
@@ -105,15 +108,26 @@ function (angular, _, $, rst2html) {
            } else {
              $link.removeClass('last');
            }
            $input.hide();
            $link.show();
          }
+          // this = input element
+          function inputBlur(paramIndex) {
+            /*jshint validthis:true */
+            var inputElem = this;
+            // happens long before the click event on the typeahead options
+            // need to have long delay because the blur
+            cancelBlur = setTimeout(function() {
+              switchToLink(inputElem, paramIndex);
+            }, 200);
          }
          function inputKeyPress(paramIndex, e) {
            /*jshint validthis:true */
            if(e.which === 13) {
-              inputBlur.call(this, paramIndex);
+              $(this).blur();
            }
          }
@@ -135,9 +149,8 @@ function (angular, _, $, rst2html) {
              minLength: 0,
              items: 20,
              updater: function (value) {
-                setTimeout(function() {
+                $input.val(value);
-                  inputBlur.call($input[0], paramIndex);
+                switchToLink($input[0], paramIndex);
-                }, 0);
                return value;
              }
            });