Skip to content

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

Merge pull request #11309 from grafana/add_graphite_func_js_to_ts 

convert add_graphite_func.js to typescript
parents 4dcf1b72 3bdd0062
Showing with 144 additions and 140 deletions
public/app/plugins/datasource/graphite/add_graphite_func.js → public/app/plugins/datasource/graphite/add_graphite_func.ts
define(['angular', 'lodash', 'jquery', 'rst2html', 'tether-drop'], function(angular, _, $, rst2html, Drop) { import angular from 'angular';
'use strict'; import _ from 'lodash';
import $ from 'jquery';
angular.module('grafana.directives').directive('graphiteAddFunc', function($compile) { import rst2html from 'rst2html';
var inputTemplate = import Drop from 'tether-drop';
'<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>';
export function graphiteAddFunc($compile) {
var buttonTemplate = const inputTemplate =
'<a class="gf-form-label query-part dropdown-toggle"' + '<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>';
' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown">' +
'<i class="fa fa-plus"></i></a>'; const buttonTemplate =
'<a class="gf-form-label query-part dropdown-toggle"' +
return { ' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown">' +
link: function($scope, elem) { '<i class="fa fa-plus"></i></a>';
var ctrl = $scope.ctrl;
return {
var $input = $(inputTemplate); link: function($scope, elem) {
var $button = $(buttonTemplate); var ctrl = $scope.ctrl;
$input.appendTo(elem); var $input = $(inputTemplate);
$button.appendTo(elem); var $button = $(buttonTemplate);
ctrl.datasource.getFuncDefs().then(function(funcDefs) { $input.appendTo(elem);
var allFunctions = _.map(funcDefs, 'name').sort(); $button.appendTo(elem);
$scope.functionMenu = createFunctionDropDownMenu(funcDefs); ctrl.datasource.getFuncDefs().then(function(funcDefs) {
var allFunctions = _.map(funcDefs, 'name').sort();
$scope.functionMenu = createFunctionDropDownMenu(funcDefs);
$input.attr('data-provide', 'typeahead');
$input.typeahead({
source: allFunctions,
minLength: 1,
items: 10,
updater: function(value) {
var funcDef = ctrl.datasource.getFuncDef(value);
if (!funcDef) {
// try find close match
value = value.toLowerCase();
funcDef = _.find(allFunctions, function(funcName) {
return funcName.toLowerCase().indexOf(value) === 0;
});
$input.attr('data-provide', 'typeahead');
$input.typeahead({
source: allFunctions,
minLength: 1,
items: 10,
updater: function(value) {
var funcDef = ctrl.datasource.getFuncDef(value);
if (!funcDef) { if (!funcDef) {
// try find close match return '';
value = value.toLowerCase();
funcDef = _.find(allFunctions, function(funcName) {
return funcName.toLowerCase().indexOf(value) === 0;
});
if (!funcDef) {
return;
}
} }
}
$scope.$apply(function() { $scope.$apply(function() {
ctrl.addFunction(funcDef); ctrl.addFunction(funcDef);
}); });
$input.trigger('blur'); $input.trigger('blur');
return ''; return '';
}, },
});
$button.click(function() {
$button.hide();
$input.show();
$input.focus();
});
$input.keyup(function() {
elem.toggleClass('open', $input.val() === '');
});
$input.blur(function() {
// clicking the function dropdown menu wont
// work if you remove class at once
setTimeout(function() {
$input.val('');
$input.hide();
$button.show();
elem.removeClass('open');
}, 200);
});
$compile(elem.contents())($scope);
}); });
var drop; $button.click(function() {
var cleanUpDrop = function() { $button.hide();
if (drop) { $input.show();
drop.destroy(); $input.focus();
drop = null; });
}
}; $input.keyup(function() {
elem.toggleClass('open', $input.val() === '');
});
$(elem) $input.blur(function() {
.on('mouseenter', 'ul.dropdown-menu li', function() { // clicking the function dropdown menu wont
cleanUpDrop(); // work if you remove class at once
setTimeout(function() {
$input.val('');
$input.hide();
$button.show();
elem.removeClass('open');
}, 200);
});
var funcDef; $compile(elem.contents())($scope);
try { });
funcDef = ctrl.datasource.getFuncDef($('a', this).text());
} catch (e) {
// ignore
}
if (funcDef && funcDef.description) { var drop;
var shortDesc = funcDef.description; var cleanUpDrop = function() {
if (shortDesc.length > 500) { if (drop) {
shortDesc = shortDesc.substring(0, 497) + '...'; drop.destroy();
} drop = null;
}
};
$(elem)
.on('mouseenter', 'ul.dropdown-menu li', function() {
cleanUpDrop();
var funcDef;
try {
funcDef = ctrl.datasource.getFuncDef($('a', this).text());
} catch (e) {
// ignore
}
var contentElement = document.createElement('div'); if (funcDef && funcDef.description) {
contentElement.innerHTML = '<h4>' + funcDef.name + '</h4>' + rst2html(shortDesc); var shortDesc = funcDef.description;
if (shortDesc.length > 500) {
drop = new Drop({ shortDesc = shortDesc.substring(0, 497) + '...';
target: this,
content: contentElement,
classes: 'drop-popover',
openOn: 'always',
tetherOptions: {
attachment: 'bottom left',
targetAttachment: 'bottom right',
},
});
} }
})
.on('mouseout', 'ul.dropdown-menu li', function() {
cleanUpDrop();
});
$scope.$on('$destroy', cleanUpDrop);
},
};
});
function createFunctionDropDownMenu(funcDefs) { var contentElement = document.createElement('div');
var categories = {}; contentElement.innerHTML = '<h4>' + funcDef.name + '</h4>' + rst2html(shortDesc);
_.forEach(funcDefs, function(funcDef) { drop = new Drop({
if (!funcDef.category) { target: this,
return; content: contentElement,
} classes: 'drop-popover',
if (!categories[funcDef.category]) { openOn: 'always',
categories[funcDef.category] = []; tetherOptions: {
} attachment: 'bottom left',
categories[funcDef.category].push({ targetAttachment: 'bottom right',
text: funcDef.name, },
click: "ctrl.addFunction('" + funcDef.name + "')", });
}); }
})
.on('mouseout', 'ul.dropdown-menu li', function() {
cleanUpDrop();
});
$scope.$on('$destroy', cleanUpDrop);
},
};
}
angular.module('grafana.directives').directive('graphiteAddFunc', graphiteAddFunc);
function createFunctionDropDownMenu(funcDefs) {
var categories = {};
_.forEach(funcDefs, function(funcDef) {
if (!funcDef.category) {
return;
}
if (!categories[funcDef.category]) {
categories[funcDef.category] = [];
}
categories[funcDef.category].push({
text: funcDef.name,
click: "ctrl.addFunction('" + funcDef.name + "')",
}); });
});
return _.sortBy( return _.sortBy(
_.map(categories, function(submenu, category) { _.map(categories, function(submenu, category) {
return { return {
text: category, text: category,
submenu: _.sortBy(submenu, 'text'), submenu: _.sortBy(submenu, 'text'),
}; };
}), }),
'text' 'text'
); );
} }
});
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