Skip to content

N
nexpie-grafana-theme
Commit 9df5476f by Marcus Efraimsson Committed by GitHub
Options

Merge pull request #11312 from grafana/func_editor_js_to_ts 

convert func_editor.js to typescript
parents de396b27 47215098
Showing with 50 additions and 42 deletions
public/app/plugins/datasource/graphite/func_editor.js → public/app/plugins/datasource/graphite/func_editor.ts
define([ import angular from 'angular';
'angular', import _ from 'lodash';
'lodash', import $ from 'jquery';
'jquery', import rst2html from 'rst2html';
'rst2html',
], export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
function (angular, _, $, rst2html) { const funcSpanTemplate = '<a ng-click="">{{func.def.name}}</a><span>(</span>';
'use strict'; const paramTemplate =
'<input type="text" style="display:none"' + ' class="input-small tight-form-func-param"></input>';
angular
.module('grafana.directives') const funcControlsTemplate = `
.directive('graphiteFuncEditor', function($compile, templateSrv, popoverSrv) { <div class="tight-form-func-controls">
<span class="pointer fa fa-arrow-left"></span>
var funcSpanTemplate = '<a ng-click="">{{func.def.name}}</a><span>(</span>'; <span class="pointer fa fa-question-circle"></span>
var paramTemplate = '<input type="text" style="display:none"' + <span class="pointer fa fa-remove" ></span>
' class="input-small tight-form-func-param"></input>'; <span class="pointer fa fa-arrow-right"></span>
</div>`;
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>';
return { return {
restrict: 'A', restrict: 'A',
...@@ -75,7 +68,7 @@ function (angular, _, $, rst2html) { ...@@ -75,7 +68,7 @@ function (angular, _, $, rst2html) {
return func.def.params[index]; return func.def.params[index];
} }
if (_.last(func.def.params).multiple) { if (_.last(func.def.params).multiple) {
return _.assign({}, _.last(func.def.params), {optional: true}); return _.assign({}, _.last(func.def.params), { optional: true });
} }
return {}; return {};
} }
...@@ -126,7 +119,7 @@ function (angular, _, $, rst2html) { ...@@ -126,7 +119,7 @@ function (angular, _, $, rst2html) {
function inputKeyPress(paramIndex, e) { function inputKeyPress(paramIndex, e) {
/*jshint validthis:true */ /*jshint validthis:true */
if(e.which === 13) { if (e.which === 13) {
$(this).blur(); $(this).blur();
} }
} }
...@@ -141,22 +134,24 @@ function (angular, _, $, rst2html) { ...@@ -141,22 +134,24 @@ function (angular, _, $, rst2html) {
var options = paramDef(paramIndex).options; var options = paramDef(paramIndex).options;
if (paramDef(paramIndex).type === 'int') { if (paramDef(paramIndex).type === 'int') {
options = _.map(options, function(val) { return val.toString(); }); options = _.map(options, function(val) {
return val.toString();
});
} }
$input.typeahead({ $input.typeahead({
source: options, source: options,
minLength: 0, minLength: 0,
items: 20, items: 20,
updater: function (value) { updater: function(value) {
$input.val(value); $input.val(value);
switchToLink($input[0], paramIndex); switchToLink($input[0], paramIndex);
return value; return value;
} },
}); });
var typeahead = $input.data('typeahead'); var typeahead = $input.data('typeahead');
typeahead.lookup = function () { typeahead.lookup = function() {
this.query = this.$element.val() || ''; this.query = this.$element.val() || '';
return this.process(this.source); return this.process(this.source);
}; };
...@@ -186,7 +181,7 @@ function (angular, _, $, rst2html) { ...@@ -186,7 +181,7 @@ function (angular, _, $, rst2html) {
var lastParam = _.last(func.def.params); var lastParam = _.last(func.def.params);
while (func.params.length >= defParams.length && lastParam && lastParam.multiple) { 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) { _.each(defParams, function(param, index) {
...@@ -196,7 +191,7 @@ function (angular, _, $, rst2html) { ...@@ -196,7 +191,7 @@ function (angular, _, $, rst2html) {
var paramValue = templateSrv.highlightVariablesAsHtml(func.params[index]); 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) { if (last && param.multiple) {
paramValue = '+'; paramValue = '+';
} }
...@@ -206,8 +201,12 @@ function (angular, _, $, rst2html) { ...@@ -206,8 +201,12 @@ function (angular, _, $, rst2html) {
} }
var $paramLink = $( var $paramLink = $(
'<a ng-click="" class="graphite-func-param-link' + (last ? ' query-part__last' : '') + '">' '<a ng-click="" class="graphite-func-param-link' +
+ (paramValue || '&nbsp;') + '</a>'); (last ? ' query-part__last' : '') +
'">' +
(paramValue || '&nbsp;') +
'</a>'
);
var $input = $(paramTemplate); var $input = $(paramTemplate);
$input.attr('placeholder', param.name); $input.attr('placeholder', param.name);
...@@ -224,6 +223,8 @@ function (angular, _, $, rst2html) { ...@@ -224,6 +223,8 @@ function (angular, _, $, rst2html) {
if (param.options) { if (param.options) {
addTypeahead($input, index); addTypeahead($input, index);
} }
return true;
}); });
$('<span>)</span>').appendTo(elem); $('<span>)</span>').appendTo(elem);
...@@ -235,7 +236,10 @@ function (angular, _, $, rst2html) { ...@@ -235,7 +236,10 @@ function (angular, _, $, rst2html) {
if ($scope.func.added) { if ($scope.func.added) {
$scope.func.added = false; $scope.func.added = false;
setTimeout(function() { setTimeout(function() {
elem.find('.graphite-func-param-link').first().click(); elem
.find('.graphite-func-param-link')
.first()
.click();
}, 10); }, 10);
} }
} }
...@@ -278,13 +282,18 @@ function (angular, _, $, rst2html) { ...@@ -278,13 +282,18 @@ function (angular, _, $, rst2html) {
element: e.target, element: e.target,
position: 'bottom left', position: 'bottom left',
classNames: 'drop-popover drop-function-def', classNames: 'drop-popover drop-function-def',
template: '<div style="overflow:auto;max-height:30rem;">' template: `
+ '<h4>' + funcDef.name + '</h4>' + rst2html(funcDef.description) + '</div>', <div style="overflow:auto;max-height:30rem;">
<h4> ${funcDef.name} </h4>
${rst2html(funcDef.description)}
</div>`,
openOn: 'click', openOn: 'click',
}); });
} else { } else {
window.open( 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; return;
} }
...@@ -301,9 +310,8 @@ function (angular, _, $, rst2html) { ...@@ -301,9 +310,8 @@ function (angular, _, $, rst2html) {
} }
relink(); relink();
} },
}; };
}
}); angular.module('grafana.directives').directive('graphiteFuncEditor', graphiteFuncEditor);
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment