Merge pull request #11312 from grafana/func_editor_js_to_ts

convert func_editor.js to typescript

public/app/plugins/datasource/graphite/func_editor.js → public/app/plugins/datasource/graphite/func_editor.ts

-define([
-  'angular',
-  'lodash',
-  'jquery',
-  'rst2html',
-],
-function (angular, _, $, rst2html) {
-  'use strict';
-
-  angular
-    .module('grafana.directives')
-    .directive('graphiteFuncEditor', function($compile, templateSrv, popoverSrv) {
-
-      var funcSpanTemplate = '<a ng-click="">{{func.def.name}}</a><span>(</span>';
-      var paramTemplate = '<input type="text" style="display:none"' +
-                          ' class="input-small tight-form-func-param"></input>';
-
-      var funcControlsTemplate =
-         '<div class="tight-form-func-controls">' +
-           '<span class="pointer fa fa-arrow-left"></span>' +
-           '<span class="pointer fa fa-question-circle"></span>' +
-           '<span class="pointer fa fa-remove" ></span>' +
-           '<span class="pointer fa fa-arrow-right"></span>' +
-         '</div>';
+import angular from 'angular';
+import _ from 'lodash';
+import $ from 'jquery';
+import rst2html from 'rst2html';
+
+export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
+  const funcSpanTemplate = '<a ng-click="">{{func.def.name}}</a><span>(</span>';
+  const paramTemplate =
+    '<input type="text" style="display:none"' + ' class="input-small tight-form-func-param"></input>';
+
+  const funcControlsTemplate = `
+    <div class="tight-form-func-controls">
+      <span class="pointer fa fa-arrow-left"></span>
+      <span class="pointer fa fa-question-circle"></span>
+      <span class="pointer fa fa-remove" ></span>
+      <span class="pointer fa fa-arrow-right"></span>
+    </div>`;
 
   return {
     restrict: 'A',
@@ -75,7 +68,7 @@ function (angular, _, $, rst2html) {
           return func.def.params[index];
         }
         if (_.last(func.def.params).multiple) {
-              return _.assign({}, _.last(func.def.params), {optional: true});
+          return _.assign({}, _.last(func.def.params), { optional: true });
         }
         return {};
       }
@@ -126,7 +119,7 @@ function (angular, _, $, rst2html) {
 
       function inputKeyPress(paramIndex, e) {
         /*jshint validthis:true */
-            if(e.which === 13) {
+        if (e.which === 13) {
           $(this).blur();
         }
       }
@@ -141,22 +134,24 @@ function (angular, _, $, rst2html) {
 
         var options = paramDef(paramIndex).options;
         if (paramDef(paramIndex).type === 'int') {
-              options = _.map(options, function(val) { return val.toString(); });
+          options = _.map(options, function(val) {
+            return val.toString();
+          });
         }
 
         $input.typeahead({
           source: options,
           minLength: 0,
           items: 20,
-              updater: function (value) {
+          updater: function(value) {
             $input.val(value);
             switchToLink($input[0], paramIndex);
             return value;
-              }
+          },
         });
 
         var typeahead = $input.data('typeahead');
-            typeahead.lookup = function () {
+        typeahead.lookup = function() {
           this.query = this.$element.val() || '';
           return this.process(this.source);
         };
@@ -186,7 +181,7 @@ function (angular, _, $, rst2html) {
         var lastParam = _.last(func.def.params);
 
         while (func.params.length >= defParams.length && lastParam && lastParam.multiple) {
-              defParams.push(_.assign({}, lastParam, {optional: true}));
+          defParams.push(_.assign({}, lastParam, { optional: true }));
         }
 
         _.each(defParams, function(param, index) {
@@ -196,7 +191,7 @@ function (angular, _, $, rst2html) {
 
           var paramValue = templateSrv.highlightVariablesAsHtml(func.params[index]);
 
-              var last = (index >= func.params.length - 1) && param.optional && !paramValue;
+          var last = index >= func.params.length - 1 && param.optional && !paramValue;
           if (last && param.multiple) {
             paramValue = '+';
           }
@@ -206,8 +201,12 @@ function (angular, _, $, rst2html) {
           }
 
           var $paramLink = $(
-                '<a ng-click="" class="graphite-func-param-link' + (last ? ' query-part__last' : '') + '">'
-                + (paramValue || '&nbsp;') + '</a>');
+            '<a ng-click="" class="graphite-func-param-link' +
+              (last ? ' query-part__last' : '') +
+              '">' +
+              (paramValue || '&nbsp;') +
+              '</a>'
+          );
           var $input = $(paramTemplate);
           $input.attr('placeholder', param.name);
 
@@ -224,6 +223,8 @@ function (angular, _, $, rst2html) {
           if (param.options) {
             addTypeahead($input, index);
           }
+
+          return true;
         });
 
         $('<span>)</span>').appendTo(elem);
@@ -235,7 +236,10 @@ function (angular, _, $, rst2html) {
         if ($scope.func.added) {
           $scope.func.added = false;
           setTimeout(function() {
-                elem.find('.graphite-func-param-link').first().click();
+            elem
+              .find('.graphite-func-param-link')
+              .first()
+              .click();
           }, 10);
         }
       }
@@ -278,13 +282,18 @@ function (angular, _, $, rst2html) {
                 element: e.target,
                 position: 'bottom left',
                 classNames: 'drop-popover drop-function-def',
-                    template: '<div style="overflow:auto;max-height:30rem;">'
-                      + '<h4>' + funcDef.name + '</h4>' + rst2html(funcDef.description) + '</div>',
+                template: `
+                  <div style="overflow:auto;max-height:30rem;">
+                    <h4> ${funcDef.name} </h4>
+                    ${rst2html(funcDef.description)}
+                  </div>`,
                 openOn: 'click',
               });
             } else {
               window.open(
-                    "http://graphite.readthedocs.org/en/latest/functions.html#graphite.render.functions." + func.def.name,'_blank');
+                'http://graphite.readthedocs.org/en/latest/functions.html#graphite.render.functions.' + func.def.name,
+                '_blank'
+              );
             }
             return;
           }
@@ -301,9 +310,8 @@ function (angular, _, $, rst2html) {
       }
 
       relink();
-        }
+    },
   };
+}
 
-    });
-
-});
+angular.module('grafana.directives').directive('graphiteFuncEditor', graphiteFuncEditor);