IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix: graphite func editor fixes, this component is messy and ugly as hell

Browse Source
This commit is contained in:
Torkel Ödegaard
2018-01-12 14:20:15 +01:00
committed by Dan Cech
parent 1a6bf692c6
commit e9d33750cb
2 changed files with 152 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
public/app/plugins/datasource/graphite/add_graphite_func.js
View File

@@ -1,137 +1,130 @@
define([ define(['angular', 'lodash', 'jquery', 'rst2html', 'tether-drop'], function(angular, _, $, rst2html, Drop) {
'angular',
'lodash',
'jquery',
'rst2html',
'tether-drop',
],
function (angular, _, $, rst2html, Drop) {
'use strict'; 'use strict';
angular angular.module('grafana.directives').directive('graphiteAddFunc', function($compile) {
.module('grafana.directives') var inputTemplate =
.directive('graphiteAddFunc', function($compile) { '<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>';
var inputTemplate = '<input type="text"'+
' class="gf-form-input"' +
' spellcheck="false" style="display:none"></input>';
var buttonTemplate = '<a class="gf-form-label query-part dropdown-toggle"' + var buttonTemplate =
' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown">' + '<a class="gf-form-label query-part dropdown-toggle"' +
'<i class="fa fa-plus"></i></a>'; ' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown">' +
'<i class="fa fa-plus"></i></a>';
return { return {
link: function($scope, elem) { link: function($scope, elem) {
var ctrl = $scope.ctrl; var ctrl = $scope.ctrl;
var $input = $(inputTemplate); var $input = $(inputTemplate);
var $button = $(buttonTemplate); var $button = $(buttonTemplate);
$input.appendTo(elem); $input.appendTo(elem);
$button.appendTo(elem); $button.appendTo(elem);
ctrl.datasource.getFuncDefs().then(function(funcDefs) { ctrl.datasource.getFuncDefs().then(function(funcDefs) {
var allFunctions = _.map(funcDefs, 'name').sort(); var allFunctions = _.map(funcDefs, 'name').sort();
$scope.functionMenu = createFunctionDropDownMenu(funcDefs); $scope.functionMenu = createFunctionDropDownMenu(funcDefs);
$input.attr('data-provide', 'typeahead'); $input.attr('data-provide', 'typeahead');
$input.typeahead({ $input.typeahead({
source: allFunctions, source: allFunctions,
minLength: 1, minLength: 1,
items: 10, items: 10,
updater: function (value) { updater: function(value) {
var funcDef = ctrl.datasource.getFuncDef(value); var funcDef = ctrl.datasource.getFuncDef(value);
if (!funcDef) { if (!funcDef) {
// try find close match // try find close match
value = value.toLowerCase(); value = value.toLowerCase();
funcDef = _.find(allFunctions, function(funcName) { funcDef = _.find(allFunctions, function(funcName) {
return funcName.toLowerCase().indexOf(value) === 0; return funcName.toLowerCase().indexOf(value) === 0;
});
if (!funcDef) { return; }
}
$scope.$apply(function() {
ctrl.addFunction(funcDef);
}); });
$input.trigger('blur'); if (!funcDef) {
return ''; return;
}
} }
});
$button.click(function() { $scope.$apply(function() {
$button.hide(); ctrl.addFunction(funcDef);
$input.show(); });
$input.focus();
});
$input.keyup(function() { $input.trigger('blur');
elem.toggleClass('open', $input.val() === ''); return '';
}); },
$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 drops = []; $button.click(function() {
$button.hide();
$input.show();
$input.focus();
});
$(elem) $input.keyup(function() {
.on('mouseenter', 'ul.dropdown-menu li', function () { elem.toggleClass('open', $input.val() === '');
while (drops.length > 0) { });
drops.pop().remove();
$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;
var cleanUpDrop = function() {
if (drop) {
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
}
if (funcDef && funcDef.description) {
var shortDesc = funcDef.description;
if (shortDesc.length > 500) {
shortDesc = shortDesc.substring(0, 497) + '...';
} }
var funcDef; var contentElement = document.createElement('div');
try { contentElement.innerHTML = '<h4>' + funcDef.name + '</h4>' + rst2html(shortDesc);
funcDef = ctrl.datasource.getFuncDef($('a', this).text());
} catch (e) {
// ignore
}
if (funcDef && funcDef.description) { drop = new Drop({
var shortDesc = funcDef.description; target: this,
if (shortDesc.length > 500) { content: contentElement,
shortDesc = shortDesc.substring(0, 497) + '...'; classes: 'drop-popover',
} openOn: 'always',
tetherOptions: {
attachment: 'bottom left',
targetAttachment: 'bottom right',
},
});
}
})
.on('mouseout', 'ul.dropdown-menu li', function() {
cleanUpDrop();
});
var contentElement = document.createElement('div'); $scope.$on('$destroy', cleanUpDrop);
contentElement.innerHTML = '<h4>' + funcDef.name + '</h4>' + rst2html(shortDesc); },
};
var drop = new Drop({ });
target: this,
content: contentElement,
classes: 'drop-popover',
openOn: 'always',
tetherOptions: {
attachment: 'bottom left',
targetAttachment: 'bottom right',
},
});
drops.push(drop);
drop.open();
}
})
.on('mouseout', 'ul.dropdown-menu li', function() {
while (drops.length > 0) {
drops.pop().remove();
}
});
}
};
});
function createFunctionDropDownMenu(funcDefs) { function createFunctionDropDownMenu(funcDefs) {
var categories = {}; var categories = {};
@@ -149,11 +142,14 @@ function (angular, _, $, rst2html, Drop) {
}); });
}); });
return _.sortBy(_.map(categories, function(submenu, category) { return _.sortBy(
return { _.map(categories, function(submenu, category) {
text: category, return {
submenu: _.sortBy(submenu, 'text') text: category,
}; submenu: _.sortBy(submenu, 'text'),
}), 'text'); };
}),
'text'
);
} }
}); });

61
public/app/plugins/datasource/graphite/func_editor.js
View File

@@ -32,6 +32,7 @@ function (angular, _, $, rst2html) {
var func = $scope.func; var func = $scope.func;
var scheduledRelink = false; var scheduledRelink = false;
var paramCountAtLink = 0; var paramCountAtLink = 0;
var cancelBlur = null;
function clickFuncParam(paramIndex) { function clickFuncParam(paramIndex) {
/*jshint validthis:true */ /*jshint validthis:true */
@@ -79,41 +80,54 @@ function (angular, _, $, rst2html) {
return {}; return {};
} }
function inputBlur(paramIndex) { function switchToLink(inputElem, paramIndex) {
/*jshint validthis:true */ /*jshint validthis:true */
var $input = $(this); var $input = $(inputElem);
if ($input.data('typeahead') && $input.data('typeahead').shown) {
return; clearTimeout(cancelBlur);
} cancelBlur = null;
var $link = $input.prev(); var $link = $input.prev();
var $comma = $link.prev('.comma'); var $comma = $link.prev('.comma');
var newValue = $input.val(); var newValue = $input.val();
// remove optional empty params
if (newValue !== '' || paramDef(paramIndex).optional) { if (newValue !== '' || paramDef(paramIndex).optional) {
$link.html(templateSrv.highlightVariablesAsHtml(newValue));
func.updateParam(newValue, paramIndex); func.updateParam(newValue, paramIndex);
scheduledRelinkIfNeeded();
$scope.$apply(function() {
ctrl.targetChanged();
});
if ($link.hasClass('last') && newValue === '') {
$comma.addClass('last');
} else {
$link.removeClass('last');
}
$input.hide();
$link.show();
} }
$link.html(templateSrv.highlightVariablesAsHtml(newValue));
scheduledRelinkIfNeeded();
$scope.$apply(function() {
ctrl.targetChanged();
});
if ($link.hasClass('last') && newValue === '') {
$comma.addClass('last');
} else {
$link.removeClass('last');
}
$input.hide();
$link.show();
}
// this = input element
function inputBlur(paramIndex) {
/*jshint validthis:true */
var inputElem = this;
// happens long before the click event on the typeahead options
// need to have long delay because the blur
cancelBlur = setTimeout(function() {
switchToLink(inputElem, paramIndex);
}, 200);
} }
function inputKeyPress(paramIndex, e) { function inputKeyPress(paramIndex, e) {
/*jshint validthis:true */ /*jshint validthis:true */
if(e.which === 13) { if(e.which === 13) {
inputBlur.call(this, paramIndex); $(this).blur();
} }
} }
@@ -135,9 +149,8 @@ function (angular, _, $, rst2html) {
minLength: 0, minLength: 0,
items: 20, items: 20,
updater: function (value) { updater: function (value) {
setTimeout(function() { $input.val(value);
inputBlur.call($input[0], paramIndex); switchToLink($input[0], paramIndex);
}, 0);
return value; return value;
} }
}); });