Merge pull request #11309 from grafana/add_graphite_func_js_to_ts

convert add_graphite_func.js to typescript

public/app/plugins/datasource/graphite/add_graphite_func.js

@@ -1,155 +0,0 @@
-define(['angular', 'lodash', 'jquery', 'rst2html', 'tether-drop'], function(angular, _, $, rst2html, Drop) {
-  'use strict';
-
-  angular.module('grafana.directives').directive('graphiteAddFunc', function($compile) {
-    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"' +
-      ' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown">' +
-      '<i class="fa fa-plus"></i></a>';
-
-    return {
-      link: function($scope, elem) {
-        var ctrl = $scope.ctrl;
-
-        var $input = $(inputTemplate);
-        var $button = $(buttonTemplate);
-
-        $input.appendTo(elem);
-        $button.appendTo(elem);
-
-        ctrl.datasource.getFuncDefs().then(function(funcDefs) {
-          var allFunctions = _.map(funcDefs, 'name').sort();
-
-          $scope.functionMenu = createFunctionDropDownMenu(funcDefs);
-
-          $input.attr('data-provide', 'typeahead');
-          $input.typeahead({
-            source: allFunctions,
-            minLength: 1,
-            items: 10,
-            updater: function(value) {
-              var funcDef = ctrl.datasource.getFuncDef(value);
-              if (!funcDef) {
-                // try find close match
-                value = value.toLowerCase();
-                funcDef = _.find(allFunctions, function(funcName) {
-                  return funcName.toLowerCase().indexOf(value) === 0;
-                });
-
-                if (!funcDef) {
-                  return;
-                }
-              }
-
-              $scope.$apply(function() {
-                ctrl.addFunction(funcDef);
-              });
-
-              $input.trigger('blur');
-              return '';
-            },
-          });
-
-          $button.click(function() {
-            $button.hide();
-            $input.show();
-            $input.focus();
-          });
-
-          $input.keyup(function() {
-            elem.toggleClass('open', $input.val() === '');
-          });
-
-          $input.blur(function() {
-            // clicking the function dropdown menu wont
-            // work if you remove class at once
-            setTimeout(function() {
-              $input.val('');
-              $input.hide();
-              $button.show();
-              elem.removeClass('open');
-            }, 200);
-          });
-
-          $compile(elem.contents())($scope);
-        });
-
-        var drop;
-        var cleanUpDrop = function() {
-          if (drop) {
-            drop.destroy();
-            drop = null;
-          }
-        };
-
-        $(elem)
-          .on('mouseenter', 'ul.dropdown-menu li', function() {
-            cleanUpDrop();
-
-            var funcDef;
-            try {
-              funcDef = ctrl.datasource.getFuncDef($('a', this).text());
-            } catch (e) {
-              // ignore
-            }
-
-            if (funcDef && funcDef.description) {
-              var shortDesc = funcDef.description;
-              if (shortDesc.length > 500) {
-                shortDesc = shortDesc.substring(0, 497) + '...';
-              }
-
-              var contentElement = document.createElement('div');
-              contentElement.innerHTML = '<h4>' + funcDef.name + '</h4>' + rst2html(shortDesc);
-
-              drop = new Drop({
-                target: this,
-                content: contentElement,
-                classes: 'drop-popover',
-                openOn: 'always',
-                tetherOptions: {
-                  attachment: 'bottom left',
-                  targetAttachment: 'bottom right',
-                },
-              });
-            }
-          })
-          .on('mouseout', 'ul.dropdown-menu li', function() {
-            cleanUpDrop();
-          });
-
-        $scope.$on('$destroy', cleanUpDrop);
-      },
-    };
-  });
-
-  function createFunctionDropDownMenu(funcDefs) {
-    var categories = {};
-
-    _.forEach(funcDefs, function(funcDef) {
-      if (!funcDef.category) {
-        return;
-      }
-      if (!categories[funcDef.category]) {
-        categories[funcDef.category] = [];
-      }
-      categories[funcDef.category].push({
-        text: funcDef.name,
-        click: "ctrl.addFunction('" + funcDef.name + "')",
-      });
-    });
-
-    return _.sortBy(
-      _.map(categories, function(submenu, category) {
-        return {
-          text: category,
-          submenu: _.sortBy(submenu, 'text'),
-        };
-      }),
-      'text'
-    );
-  }
-});

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

@@ -0,0 +1,159 @@
+import angular from 'angular';
+import _ from 'lodash';
+import $ from 'jquery';
+import rst2html from 'rst2html';
+import Drop from 'tether-drop';
+
+export function graphiteAddFunc($compile) {
+  const inputTemplate =
+    '<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>';
+
+  const 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>';
+
+  return {
+    link: function($scope, elem) {
+      var ctrl = $scope.ctrl;
+
+      var $input = $(inputTemplate);
+      var $button = $(buttonTemplate);
+
+      $input.appendTo(elem);
+      $button.appendTo(elem);
+
+      ctrl.datasource.getFuncDefs().then(function(funcDefs) {
+        var allFunctions = _.map(funcDefs, 'name').sort();
+
+        $scope.functionMenu = createFunctionDropDownMenu(funcDefs);
+
+        $input.attr('data-provide', 'typeahead');
+        $input.typeahead({
+          source: allFunctions,
+          minLength: 1,
+          items: 10,
+          updater: function(value) {
+            var funcDef = ctrl.datasource.getFuncDef(value);
+            if (!funcDef) {
+              // try find close match
+              value = value.toLowerCase();
+              funcDef = _.find(allFunctions, function(funcName) {
+                return funcName.toLowerCase().indexOf(value) === 0;
+              });
+
+              if (!funcDef) {
+                return '';
+              }
+            }
+
+            $scope.$apply(function() {
+              ctrl.addFunction(funcDef);
+            });
+
+            $input.trigger('blur');
+            return '';
+          },
+        });
+
+        $button.click(function() {
+          $button.hide();
+          $input.show();
+          $input.focus();
+        });
+
+        $input.keyup(function() {
+          elem.toggleClass('open', $input.val() === '');
+        });
+
+        $input.blur(function() {
+          // clicking the function dropdown menu wont
+          // work if you remove class at once
+          setTimeout(function() {
+            $input.val('');
+            $input.hide();
+            $button.show();
+            elem.removeClass('open');
+          }, 200);
+        });
+
+        $compile(elem.contents())($scope);
+      });
+
+      var drop;
+      var cleanUpDrop = function() {
+        if (drop) {
+          drop.destroy();
+          drop = null;
+        }
+      };
+
+      $(elem)
+        .on('mouseenter', 'ul.dropdown-menu li', function() {
+          cleanUpDrop();
+
+          var funcDef;
+          try {
+            funcDef = ctrl.datasource.getFuncDef($('a', this).text());
+          } catch (e) {
+            // ignore
+          }
+
+          if (funcDef && funcDef.description) {
+            var shortDesc = funcDef.description;
+            if (shortDesc.length > 500) {
+              shortDesc = shortDesc.substring(0, 497) + '...';
+            }
+
+            var contentElement = document.createElement('div');
+            contentElement.innerHTML = '<h4>' + funcDef.name + '</h4>' + rst2html(shortDesc);
+
+            drop = new Drop({
+              target: this,
+              content: contentElement,
+              classes: 'drop-popover',
+              openOn: 'always',
+              tetherOptions: {
+                attachment: 'bottom left',
+                targetAttachment: 'bottom right',
+              },
+            });
+          }
+        })
+        .on('mouseout', 'ul.dropdown-menu li', function() {
+          cleanUpDrop();
+        });
+
+      $scope.$on('$destroy', cleanUpDrop);
+    },
+  };
+}
+
+angular.module('grafana.directives').directive('graphiteAddFunc', graphiteAddFunc);
+
+function createFunctionDropDownMenu(funcDefs) {
+  var categories = {};
+
+  _.forEach(funcDefs, function(funcDef) {
+    if (!funcDef.category) {
+      return;
+    }
+    if (!categories[funcDef.category]) {
+      categories[funcDef.category] = [];
+    }
+    categories[funcDef.category].push({
+      text: funcDef.name,
+      click: "ctrl.addFunction('" + funcDef.name + "')",
+    });
+  });
+
+  return _.sortBy(
+    _.map(categories, function(submenu, category) {
+      return {
+        text: category,
+        submenu: _.sortBy(submenu, 'text'),
+      };
+    }),
+    'text'
+  );
+}