diff --git a/src/app/controllers/graphiteTarget.js b/src/app/controllers/graphiteTarget.js index 07ae8bec5dd..90378f5325c 100644 --- a/src/app/controllers/graphiteTarget.js +++ b/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)); diff --git a/src/app/directives/all.js b/src/app/directives/all.js index f9befcf40d1..cff5e81bf31 100644 --- a/src/app/directives/all.js +++ b/src/app/directives/all.js @@ -13,5 +13,6 @@ define([ './grafanaGraph', './bootstrap-tagsinput', './bodyClass', - './addGraphiteFunc' + './addGraphiteFunc', + './graphiteFuncEditor' ], function () {}); \ No newline at end of file diff --git a/src/app/directives/graphiteFuncEditor.js b/src/app/directives/graphiteFuncEditor.js new file mode 100644 index 00000000000..3084c9c7a2f --- /dev/null +++ b/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 = '{{func.def.name}}('; + var paramTemplate = ''; + + 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 = $('' + $scope.func.params[index] + ''); + 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) { + $(', ').appendTo(elem); + } + + if ($scope.func.def.params[index].options) { + addTypeahead($input, $scope, $scope.func, index); + } + + }); + + $(')').appendTo(elem); + + $compile(elem.contents())($scope); + } + }; + + }); + + +}); \ No newline at end of file diff --git a/src/app/directives/ngBlur.js b/src/app/directives/ngBlur.js index f8b2dd01b8a..663d33f9eff 100644 --- a/src/app/directives/ngBlur.js +++ b/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'; - }); - } - }; - }); - - }); \ No newline at end of file diff --git a/src/app/partials/graphite/editor.html b/src/app/partials/graphite/editor.html index 92f513f8154..8a0e6ce2777 100644 --- a/src/app/partials/graphite/editor.html +++ b/src/app/partials/graphite/editor.html @@ -76,19 +76,21 @@
  • + + - +