Skip to content

N
nexpie-grafana-theme
Commit feb20243 by Torkel Ödegaard
Options

added func controls

parent e3e6f511
Showing with 139 additions and 36 deletions
src/app/controllers/graphiteTarget.js
......@@ -10,7 +10,7 @@ function (angular, _, config, gfunc, Parser) {
var module = angular.module('kibana.controllers');
module.controller('GraphiteTargetCtrl', function($scope, $http, filterSrv, $timeout) {
module.controller('GraphiteTargetCtrl', function($scope, $http, filterSrv) {
$scope.init = function() {
parseTarget();
......
src/app/directives/graphiteFuncEditor.js
......@@ -14,7 +14,25 @@ function (angular, _, $) {
var paramTemplate = '<input type="text" style="display:none"' +
' class="input-mini grafana-function-param-input"></input>';
var clickFuncParam = function(func, paramIndex) {
var funcControlsTemplate =
'<span class="graphite-func-controls">' +
'<span class="pointer icon-arrow-left"></span>' +
'<span class="pointer icon-info-sign"></span>' +
'<span class="pointer icon-remove" ></span>' +
'<span class="pointer icon-arrow-right"></span>' +
'</span>';
return {
restrict: 'A',
link: function postLink($scope, elem) {
var $funcLink = $(funcSpanTemplate);
var $funcControls = $(funcControlsTemplate);
var func = $scope.func;
var funcDef = func.def;
function clickFuncParam(paramIndex) {
/*jshint validthis:true */
var $link = $(this);
var $input = $link.next();
......@@ -31,9 +49,11 @@ function (angular, _, $) {
$input.val('');
typeahead.lookup();
}
};
}
function inputBlur(paramIndex) {
/*jshint validthis:true */
var inputBlur = function(scope, func, paramIndex) {
var $input = $(this);
var $link = $input.prev();
......@@ -41,31 +61,34 @@ function (angular, _, $) {
$link.text($input.val());
if (func.updateParam($input.val(), paramIndex)) {
scope.$apply(function() {
scope.targetChanged();
$scope.$apply(function() {
$scope.targetChanged();
});
}
}
$input.hide();
$link.show();
};
}
function inputKeyPress(paramIndex, e) {
/*jshint validthis:true */
var inputKeyPress = function(scope, func, paramIndex, e) {
if(e.which === 13) {
inputBlur.call(this, scope, func, paramIndex);
inputBlur.call(this, paramIndex);
}
}
};
var inputKeyDown = function() {
function inputKeyDown() {
/*jshint validthis:true */
this.style.width = (3 + this.value.length) * 8 + 'px';
};
}
var addTypeahead = function($input, scope, func, paramIndex) {
function addTypeahead($input, paramIndex) {
$input.attr('data-provide', 'typeahead');
var options = func.def.params[paramIndex].options;
if (func.def.params[paramIndex].type === 'int') {
var options = funcDef.params[paramIndex].options;
if (funcDef.params[paramIndex].type === 'int') {
options = _.map(options, function(val) { return val.toString(); } );
}
......@@ -75,7 +98,7 @@ function (angular, _, $) {
items: 20,
updater: function (value) {
setTimeout(function() {
inputBlur.call($input[0], scope, func, paramIndex);
inputBlur.call($input[0], paramIndex);
}, 0);
return value;
}
......@@ -86,49 +109,107 @@ function (angular, _, $) {
this.query = this.$element.val() || '';
return this.process(this.source);
};
}
};
function getPosition() {
var el = elem[0];
var pos = {};
if (typeof el.getBoundingClientRect === 'function') {
pos = el.getBoundingClientRect();
}
else {
pos = { width: el.offsetWidth, height: el.offsetHeight };
}
return {
restrict: 'A',
link: function postLink($scope, elem) {
var $funcLink = $(funcSpanTemplate);
return $.extend(pos, elem.offset());
}
function toggleFuncControls() {
var targetDiv = elem.closest('.grafana-target-inner');
if (elem.hasClass('show-function-controls')) {
elem.removeClass('show-function-controls');
targetDiv.removeClass('has-open-function');
$funcControls.hide();
return;
}
elem.addClass('show-function-controls');
targetDiv.addClass('has-open-function');
setTimeout(function() {
var pos = getPosition();
$funcControls.css('position', 'absolute');
$funcControls.css('top', (pos.top - 78) + 'px');
$funcControls.css('left', pos.left + 'px');
$funcControls.css('width', pos.width + 'px');
console.log(pos);
$funcControls.show();
}, 10);
}
function addElementsAndCompile() {
$funcLink.appendTo(elem);
_.each($scope.func.def.params, function(param, index) {
var $paramLink = $('<a ng-click="">' + $scope.func.params[index] + '</a>');
_.each(funcDef.params, function(param, index) {
var $paramLink = $('<a ng-click="" class="graphite-func-param-link">' + func.params[index] + '</a>');
var $input = $(paramTemplate);
$paramLink.appendTo(elem);
$input.appendTo(elem);
$input.blur(_.partial(inputBlur, $scope, $scope.func, index));
$input.blur(_.partial(inputBlur, index));
$input.keyup(inputKeyDown);
$input.keypress(_.partial(inputKeyPress, $scope, $scope.func, index));
$paramLink.click(_.partial(clickFuncParam, $scope.func, index));
$input.keypress(_.partial(inputKeyPress, index));
$paramLink.click(_.partial(clickFuncParam, index));
if (index !== $scope.func.def.params.length - 1) {
if (index !== funcDef.params.length - 1) {
$('<span>, </span>').appendTo(elem);
}
if ($scope.func.def.params[index].options) {
addTypeahead($input, $scope, $scope.func, index);
if (funcDef.params[index].options) {
addTypeahead($input, index);
}
});
$('<span>)</span>').appendTo(elem);
elem.append($funcControls);
$compile(elem.contents())($scope);
}
function ifJustAddedFocusFistParam() {
if ($scope.func.added) {
$scope.func.added = false;
setTimeout(function() {
elem.find('a').click();
elem.find('.graphite-func-param-link').first().click();
}, 10);
}
}
function registerFuncControlsToggle() {
$funcLink.click(toggleFuncControls);
}
function registerFuncControlsActions() {
$funcControls.click(function(e) {
var $target = $(e.target);
if ($target.hasClass('icon-remove')) {
toggleFuncControls();
$scope.$apply(function() {
$scope.removeFunction($scope.func);
});
}
});
}
addElementsAndCompile();
ifJustAddedFocusFistParam();
registerFuncControlsToggle();
registerFuncControlsActions();
}
};
});
......
src/app/partials/graphite/editor.html
......@@ -7,7 +7,6 @@
ng-controller="GraphiteTargetCtrl"
ng-init="init()">
<div class="grafana-target-inner-wrapper">
<div class="grafana-target-inner">
<ul class="grafana-target-controls">
<li ng-show="parserError">
......@@ -101,7 +100,6 @@
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
src/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/less/grafana.less
......@@ -221,16 +221,16 @@
border-bottom: 1px solid @grafanaTargetBorder;
}
.grafana-target-inner-wrapper {
width: 100%;
}
.grafana-target-inner {
border-top: 1px solid @grafanaTargetBorder;
border-left: 1px solid @grafanaTargetBorder;
border-right: 1px solid @grafanaTargetBorder;
background: @grafanaTargetBackground;
width: 100%;
&.has-open-function {
margin-top: 35px;
}
}
.grafana-target-onoff {
......@@ -282,6 +282,11 @@
> a:hover {
color: @linkColor;
}
&.show-function-controls {
min-width: 100px;
text-align: center;
}
}
input[type=text].grafana-function-param-input {
......@@ -358,6 +363,25 @@ select.grafana-target-segment-input {
padding: 0; margin: 0;
}
.graphite-func-controls {
display: none;
text-align: center;
.icon-arrow-left {
float: left;
position: relative;
top: 2px;
}
.icon-arrow-right {
float: right;
position: relative;
top: 2px;
}
.icon-remove {
margin-left: 10px;
}
}
input[type=text].func-param {
border: none;
background: inherit;
......
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