func editor is almost done

src/app/controllers/graphiteTarget.js

@@ -222,11 +222,6 @@ function (angular, _, config, gfunc, Parser) {
       $scope.targetChanged();
     };
 
-    $scope.functionParamsChanged = function(func) {
-      func.updateText();
-      $scope.targetChanged();
-    };
-
     $scope.addFunction = function(funcDef) {
       $scope.functions.push(gfunc.createFuncInstance(funcDef));
 

src/app/directives/all.js

@@ -13,5 +13,6 @@ define([
   './grafanaGraph',
   './bootstrap-tagsinput',
   './bodyClass',
-  './addGraphiteFunc'
+  './addGraphiteFunc',
+  './graphiteFuncEditor'
 ], function () {});

src/app/directives/graphiteFuncEditor.js

@@ -0,0 +1,130 @@
+define([
+  'angular',
+  'underscore',
+  'jquery',
+],
+function (angular, _, $) {
+  'use strict';
+
+  angular
+    .module('kibana.directives')
+    .directive('graphiteFuncEditor', function($compile) {
+
+      var funcSpanTemplate = '<a ng-click="">{{func.def.name}}</a><span>(</span>';
+      var paramTemplate = '<input type="text" style="display:none"' +
+                          ' class="input-mini grafana-function-param-input"></input>';
+
+      var clickFuncParam = function(func, paramIndex) {
+        var $link = $(this);
+        var $input = $link.next();
+
+        $input.val(func.params[paramIndex]);
+        $input.css('width', ($link.width() + 16) + 'px');
+
+        $link.hide();
+        $input.show();
+        $input.focus();
+        $input.select();
+
+        var typeahead = $input.data('typeahead');
+        if (typeahead) {
+          $input.val('');
+          typeahead.lookup();
+        }
+      };
+
+      var inputBlur = function(scope, func, paramIndex) {
+        var $input = $(this);
+        var $link = $input.prev();
+
+        if ($input.val() !== '') {
+          $link.text($input.val());
+
+          if (func.updateParam($input.val(), paramIndex)) {
+            scope.$apply(function() {
+              scope.targetChanged();
+            });
+          }
+        }
+
+        $input.hide();
+        $link.show();
+      };
+
+      var inputKeyPress = function(scope, func, paramIndex, e) {
+        if(e.which === 13) {
+          inputBlur.call(this, scope, func, paramIndex);
+        }
+      };
+
+      var inputKeyDown = function() {
+        this.style.width = (3 + this.value.length) * 8 + 'px';
+      };
+
+      var addTypeahead = function($input, scope, func, paramIndex) {
+        $input.attr('data-provide', 'typeahead');
+
+        var options = func.def.params[paramIndex].options;
+        if (func.def.params[paramIndex].type === 'int') {
+          options = _.map(options, function(val) { return val.toString(); } );
+        }
+
+        $input.typeahead({
+          source: options,
+          minLength: 0,
+          items: 20,
+          updater: function (value) {
+            setTimeout(function() {
+              inputBlur.call($input[0], scope, func, paramIndex);
+            }, 0);
+            return value;
+          }
+        });
+
+        var typeahead = $input.data('typeahead');
+        typeahead.lookup = function () {
+          this.query = this.$element.val() || '';
+          return this.process(this.source);
+        };
+
+      };
+
+      return {
+        restrict: 'A',
+        link: function postLink($scope, elem) {
+          var $funcLink = $(funcSpanTemplate);
+
+          $funcLink.appendTo(elem);
+
+          _.each($scope.func.def.params, function(param, index) {
+            var $paramLink = $('<a ng-click="">' + $scope.func.params[index] + '</a>');
+            var $input = $(paramTemplate);
+
+            $paramLink.appendTo(elem);
+            $input.appendTo(elem);
+
+            $input.blur(_.partial(inputBlur, $scope, $scope.func, index));
+            $input.keyup(inputKeyDown);
+            $input.keypress(_.partial(inputKeyPress, $scope, $scope.func, index));
+            $paramLink.click(_.partial(clickFuncParam, $scope.func, index));
+
+            if (index !== $scope.func.def.params.length - 1) {
+              $('<span>, </span>').appendTo(elem);
+            }
+
+            if ($scope.func.def.params[index].options) {
+              addTypeahead($input, $scope, $scope.func, index);
+            }
+
+          });
+
+          $('<span>)</span>').appendTo(elem);
+
+          $compile(elem.contents())($scope);
+        }
+      };
+
+    });
+
+
+});

src/app/directives/ngBlur.js

@@ -17,21 +17,4 @@ function (angular) {
       };
     }]);
 
-  angular
-    .module('kibana.directives')
-    .directive('dynamicWidth', function() {
-      return {
-        restrict: 'A',
-        link: function postLink(scope, elem, attrs) {
-          var startVal = scope.$eval(attrs.ngModel);
-          elem[0].style.width = ((startVal.length) * 11) + 'px';
-
-          elem.keyup(function() {
-            elem[0].style.width = ((elem.val().length * 11)) + 'px';
-          });
-        }
-      };
-    });
-
-
 });

src/app/partials/graphite/editor.html

@@ -76,19 +76,21 @@
             </ul>
           </li>
           <li ng-repeat="func in functions">
+            <span graphite-func-editor class="grafana-target-segment grafana-target-function">
+            </span>
             <!-- <a  class="grafana-target-segment grafana-target-function dropdown-toggle"
                 bs-popover="'app/partials/graphite/funcEditor.html'"
                 data-placement="bottom">
               {{func.def.name}}
             </a> -->
-            <span class="grafana-target-segment grafana-target-function">
+            <!-- <span class="grafana-target-segment grafana-target-function">
               <span>{{func.def.name}}(</span><span ng-repeat="param in func.def.params">
                 <input  type="text"
                         class="input-mini grafana-function-param-input"
                         dynamic-width
                         ng-model="func.params[$index]"></input>
               </span><span>)</span>
-            </span>
+            </span> -->
           </li>
           <li class="dropdown" graphite-add-func>
 
@@ -102,3 +104,4 @@
   </div>
 </div>
 
+

src/app/services/graphite/gfunc.js

@@ -89,12 +89,12 @@ function (_) {
     params: [
       {
         name: "node",
-        type: "select",
+        type: "int",
         options: [1,2,3,4,5,6,7,8,9,10,12]
       },
       {
         name: "function",
-        type: "select",
+        type: "string",
         options: ['sum', 'avg']
       }
     ],
@@ -104,7 +104,7 @@ function (_) {
   addFuncDef({
     name: 'aliasByNode',
     category: categories.Special,
-    params: [ { name: "node", type: "select", options: [0,1,2,3,4,5,6,7,8,9,10,12] } ],
+    params: [ { name: "node", type: "int", options: [0,1,2,3,4,5,6,7,8,9,10,12] } ],
     defaultParams: [3]
   });
 
@@ -211,14 +211,14 @@ function (_) {
     category: categories.Filter,
     params: [ { name: "n", type: "int", } ],
     defaultParams: [25]
-  }); 
+  });
 
   addFuncDef({
     name: 'currentBelow',
     category: categories.Filter,
     params: [ { name: "n", type: "int", } ],
     defaultParams: [25]
-  }); 
+  });
 
   addFuncDef({
     name: "exclude",
@@ -279,7 +279,7 @@ function (_) {
     this.updateText();
   }
 
-  FuncInstance.prototype.render = function (metricExp) {
+  FuncInstance.prototype.render = function(metricExp) {
     var str = this.def.name + '(';
     var parameters = _.map(this.params, function(value) {
       return _.isString(value) ? "'" + value + "'" : value;
@@ -292,6 +292,21 @@ function (_) {
     return str + parameters.join(',') + ')';
   };
 
+  FuncInstance.prototype.updateParam = function(strValue, index) {
+    var oldValue = this.params[index];
+
+    if (this.def.params[index].type === 'int') {
+      this.params[index] = parseInt(strValue, 10);
+    }
+    else {
+      this.params[index] = strValue;
+    }
+
+    this.updateText();
+
+    return oldValue !== this.params[index];
+  };
+
   FuncInstance.prototype.updateText = function () {
     if (this.params.length === 0) {
       this.text = this.def.name + '()';

src/css/less/grafana.less

@@ -269,15 +269,18 @@
   &:hover, &:focus {
     text-decoration: none;
   }
-  &:hover {
+  &a:hover {
     background: @grafanaTargetFuncBackground;
   }
 }
 
 .grafana-target-function {
   background: @grafanaTargetFuncBackground;
-  &:hover {
-    background: @grafanaTargetFuncHightlight;
+  > a {
+    color: @grafanaTargetColor;
+  }
+  > a:hover {
+    color: @linkColor;
   }
 }