Display graphite function name editor in a tooltip

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

@@ -1,33 +1,42 @@
 import _ from 'lodash';
 import $ from 'jquery';
-import rst2html from 'rst2html';
 import coreModule from 'app/core/core_module';
 
 /** @ngInject */
 export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
-  const funcSpanTemplate = '<a ng-click="">{{func.def.name}}</a><span>(</span>';
+  const funcSpanTemplate = `
+    <function-editor
+      func="func"
+      onRemove="ctrl.handleRemoveFunction"
+      onMoveLeft="ctrl.handleMoveLeft"
+      onMoveRight="ctrl.handleMoveRight"
+    /><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',
     link: function postLink($scope, elem) {
       const $funcLink = $(funcSpanTemplate);
-      const $funcControls = $(funcControlsTemplate);
       const ctrl = $scope.ctrl;
       const func = $scope.func;
       let scheduledRelink = false;
       let paramCountAtLink = 0;
       let cancelBlur = null;
 
+      ctrl.handleRemoveFunction = func => {
+        ctrl.removeFunction(func);
+      };
+
+      ctrl.handleMoveLeft = func => {
+        ctrl.moveFunction(func, -1);
+      };
+
+      ctrl.handleMoveRight = func => {
+        ctrl.moveFunction(func, 1);
+      };
+
       function clickFuncParam(this: any, paramIndex) {
         /*jshint validthis:true */
 
@@ -158,24 +167,7 @@ export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
         };
       }
 
-      function toggleFuncControls() {
-        const targetDiv = elem.closest('.tight-form');
-
-        if (elem.hasClass('show-function-controls')) {
-          elem.removeClass('show-function-controls');
-          targetDiv.removeClass('has-open-function');
-          $funcControls.hide();
-          return;
-        }
-
-        elem.addClass('show-function-controls');
-        targetDiv.addClass('has-open-function');
-
-        $funcControls.show();
-      }
-
       function addElementsAndCompile() {
-        $funcControls.appendTo(elem);
         $funcLink.appendTo(elem);
 
         const defParams = _.clone(func.def.params);
@@ -245,69 +237,10 @@ export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
         }
       }
 
-      function registerFuncControlsToggle() {
-        $funcLink.click(toggleFuncControls);
-      }
-
-      function registerFuncControlsActions() {
-        $funcControls.click(e => {
-          const $target = $(e.target);
-          if ($target.hasClass('fa-remove')) {
-            toggleFuncControls();
-            $scope.$apply(() => {
-              ctrl.removeFunction($scope.func);
-            });
-            return;
-          }
-
-          if ($target.hasClass('fa-arrow-left')) {
-            $scope.$apply(() => {
-              _.move(ctrl.queryModel.functions, $scope.$index, $scope.$index - 1);
-              ctrl.targetChanged();
-            });
-            return;
-          }
-
-          if ($target.hasClass('fa-arrow-right')) {
-            $scope.$apply(() => {
-              _.move(ctrl.queryModel.functions, $scope.$index, $scope.$index + 1);
-              ctrl.targetChanged();
-            });
-            return;
-          }
-
-          if ($target.hasClass('fa-question-circle')) {
-            const funcDef = ctrl.datasource.getFuncDef(func.def.name);
-            if (funcDef && funcDef.description) {
-              popoverSrv.show({
-                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>`,
-                openOn: 'click',
-              });
-            } else {
-              window.open(
-                'http://graphite.readthedocs.org/en/latest/functions.html#graphite.render.functions.' + func.def.name,
-                '_blank'
-              );
-            }
-            return;
-          }
-        });
-      }
-
       function relink() {
         elem.children().remove();
-
         addElementsAndCompile();
         ifJustAddedFocusFirstParam();
-        registerFuncControlsToggle();
-        registerFuncControlsActions();
       }
 
       relink();