Skip to content

N
nexpie-grafana-theme
Commit 21ef0cdc by Torkel Ödegaard
Options

refactoring graphite target editor

parent 76fa88cf
Showing with 183 additions and 137 deletions
src/app/controllers/graphiteTarget.js
define([ define([
'angular', 'angular',
'underscore', 'underscore',
'config' 'config',
'/app/services/graphite/functions.js'
], ],
function (angular, _, config) { function (angular, _, config, graphiteFunctions) {
'use strict'; 'use strict';
var module = angular.module('kibana.controllers'); var module = angular.module('kibana.controllers');
var funcDefs = [
{
name: "scaleToSeconds",
params: [ { name: "seconds", type: "int" } ],
defaultParams: [1]
},
{
name: "sumSeries",
params: [],
},
{
name: "groupByNode",
params: [
{
name: "node",
type: "node",
},
{
name: "function",
type: "function",
}
],
defaultParams: [3, "sumSeries"]
}
];
module.controller('GraphiteTargetCtrl', function($scope, $http) { module.controller('GraphiteTargetCtrl', function($scope, $http) {
...@@ -43,7 +19,7 @@ function (angular, _, config) { ...@@ -43,7 +19,7 @@ function (angular, _, config) {
}; };
}); });
$scope.funcDefs = funcDefs; $scope.funcDefs = graphiteFunctions;
$scope.functions = []; $scope.functions = [];
}; };
...@@ -100,6 +76,19 @@ function (angular, _, config) { ...@@ -100,6 +76,19 @@ function (angular, _, config) {
return text; return text;
} }
function wrapFunction(target, func) {
var targetWrapped = func.def.name + '(' + target;
_.each(func.params, function(param) {
if (_.isString(param)) {
targetWrapped += ",'" + param + "'";
}
else {
targetWrapped += "," + param;
}
});
return targetWrapped + ')';
}
$scope.getAltSegments = function (index) { $scope.getAltSegments = function (index) {
$scope.altSegments = []; $scope.altSegments = [];
...@@ -135,16 +124,21 @@ function (angular, _, config) { ...@@ -135,16 +124,21 @@ function (angular, _, config) {
}; };
$scope.targetChanged = function() { $scope.targetChanged = function() {
$scope.target.target = getSegmentPathUpTo($scope.segments.length); var target = getSegmentPathUpTo($scope.segments.length);
target = _.reduce($scope.functions, wrapFunction, target);
console.log('target: ', target);
$scope.target.target = target;
$scope.$parent.get_data(); $scope.$parent.get_data();
}; };
$scope.removeFunction = function(func) { $scope.removeFunction = function(func) {
$scope.functions = _.without($scope.functions, func); $scope.functions = _.without($scope.functions, func);
$scope.targetChanged();
}; };
$scope.functionParamsChanged = function(func) { $scope.functionParamsChanged = function(func) {
func.text = getFuncText(func.def, func.params); func.text = getFuncText(func.def, func.params);
$scope.targetChanged();
}; };
$scope.addFunction = function(funcDef) { $scope.addFunction = function(funcDef) {
...@@ -153,6 +147,7 @@ function (angular, _, config) { ...@@ -153,6 +147,7 @@ function (angular, _, config) {
params: funcDef.defaultParams, params: funcDef.defaultParams,
text: getFuncText(funcDef, funcDef.defaultParams) text: getFuncText(funcDef, funcDef.defaultParams)
}); });
$scope.targetChanged();
}; };
}); });
......
src/app/panels/graphite/funcEditor.html
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<div class="editor-option" ng-repeat="param in func.def.params"> <div class="editor-option" ng-repeat="param in func.def.params">
<label class="small">{{param.name}}</label> <label class="small">{{param.name}}</label>
<input ng-if="param.type === 'int'" <input ng-if="param.type === 'int'"
type="text" type="number"
placeholder="seconds" placeholder="seconds"
focus-me="true" focus-me="true"
class="input-mini" class="input-mini"
......
src/app/panels/graphite/module.js
...@@ -459,6 +459,9 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) { ...@@ -459,6 +459,9 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
// Function for rendering panel // Function for rendering panel
function render_panel(data) { function render_panel(data) {
if (!data) {
return;
}
// IE doesn't work without this // IE doesn't work without this
elem.css({height:scope.panel.height || scope.row.height}); elem.css({height:scope.panel.height || scope.row.height});
...@@ -476,129 +479,124 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) { ...@@ -476,129 +479,124 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
var stack = scope.panel.stack ? true : null; var stack = scope.panel.stack ? true : null;
// Populate element // Populate element
try { var options = {
var options = { legend: { show: false },
legend: { show: false }, series: {
series: { stackpercent: scope.panel.stack ? scope.panel.percentage : false,
stackpercent: scope.panel.stack ? scope.panel.percentage : false, stack: scope.panel.percentage ? null : stack,
stack: scope.panel.percentage ? null : stack, lines: {
lines: { show: scope.panel.lines,
show: scope.panel.lines, // Silly, but fixes bug in stacked percentages
// Silly, but fixes bug in stacked percentages fill: scope.panel.fill === 0 ? 0.001 : scope.panel.fill/10,
fill: scope.panel.fill === 0 ? 0.001 : scope.panel.fill/10, lineWidth: scope.panel.linewidth,
lineWidth: scope.panel.linewidth, steps: false
steps: false
},
bars: {
show: scope.panel.bars,
fill: 1,
barWidth: barwidth/1.5,
zero: false,
lineWidth: 0
},
points: {
show: scope.panel.points,
fill: 1,
fillColor: false,
radius: scope.panel.pointradius
},
shadowSize: 1
}, },
yaxis: { bars: {
show: scope.panel['y-axis'], show: scope.panel.bars,
min: scope.panel.grid.min, fill: 1,
max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max barWidth: barwidth/1.5,
zero: false,
lineWidth: 0
}, },
xaxis: { points: {
timezone: scope.panel.timezone, show: scope.panel.points,
show: scope.panel['x-axis'], fill: 1,
mode: "time", fillColor: false,
min: _.isUndefined(scope.range.from) ? null : scope.range.from.getTime(), radius: scope.panel.pointradius
max: _.isUndefined(scope.range.to) ? null : scope.range.to.getTime(),
timeformat: time_format(scope.panel.interval),
label: "Datetime",
ticks: elem.width()/100
}, },
grid: { shadowSize: 1
backgroundColor: null, },
borderWidth: 0, yaxis: {
hoverable: true, show: scope.panel['y-axis'],
color: '#c8c8c8' min: scope.panel.grid.min,
} max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max
}; },
xaxis: {
if(scope.panel.y_format === 'bytes') { timezone: scope.panel.timezone,
options.yaxis.mode = "byte"; show: scope.panel['x-axis'],
mode: "time",
min: _.isUndefined(scope.range.from) ? null : scope.range.from.getTime(),
max: _.isUndefined(scope.range.to) ? null : scope.range.to.getTime(),
timeformat: time_format(scope.panel.interval),
label: "Datetime",
ticks: elem.width()/100
},
grid: {
backgroundColor: null,
borderWidth: 0,
hoverable: true,
color: '#c8c8c8'
} }
};
if(scope.panel.y_format === 'short') { if(scope.panel.y_format === 'bytes') {
options.yaxis.tickFormatter = function(val) { options.yaxis.mode = "byte";
return kbn.shortFormat(val,0); }
};
} if(scope.panel.y_format === 'short') {
options.yaxis.tickFormatter = function(val) {
return kbn.shortFormat(val,0);
};
}
if(scope.panel.annotate.enable) { if(scope.panel.annotate.enable) {
options.events = { options.events = {
levels: 1, levels: 1,
data: scope.annotations, data: scope.annotations,
types: { types: {
'annotation': { 'annotation': {
level: 1, level: 1,
icon: { icon: {
icon: "icon-tag icon-flip-vertical", icon: "icon-tag icon-flip-vertical",
size: 20, size: 20,
color: "#222", color: "#222",
outline: "#bbb" outline: "#bbb"
}
} }
} }
//xaxis: int // the x axis to attach events to }
}; //xaxis: int // the x axis to attach events to
} };
}
if(scope.panel.interactive) {
options.selection = { mode: "x", color: '#666' };
}
// when rendering stacked bars, we need to ensure each point that has data is zero-filled if(scope.panel.interactive) {
// so that the stacking happens in the proper order options.selection = { mode: "x", color: '#666' };
var required_times = []; }
if (data.length > 1) {
required_times = Array.prototype.concat.apply([], _.map(data, function (query) {
return query.time_series.getOrderedTimes();
}));
required_times = _.uniq(required_times.sort(function (a, b) {
// decending numeric sort
return a-b;
}), true);
}
for (var i = 0; i < data.length; i++) { // when rendering stacked bars, we need to ensure each point that has data is zero-filled
var _d = data[i].time_series.getFlotPairs(required_times); // so that the stacking happens in the proper order
data[i].data = _d; var required_times = [];
} if (data.length > 1) {
required_times = Array.prototype.concat.apply([], _.map(data, function (query) {
return query.time_series.getOrderedTimes();
}));
required_times = _.uniq(required_times.sort(function (a, b) {
// decending numeric sort
return a-b;
}), true);
}
/* var totalDataPoints = _.reduce(data, function(num, series) { return series.data.length + num; }, 0); for (var i = 0; i < data.length; i++) {
console.log('Datapoints[0] count:', data[0].data.length); var _d = data[i].time_series.getFlotPairs(required_times);
console.log('Datapoints.Total count:', totalDataPoints);*/ data[i].data = _d;
}
plot = $.plot(elem, data, options); /* var totalDataPoints = _.reduce(data, function(num, series) { return series.data.length + num; }, 0);
console.log('Datapoints[0] count:', data[0].data.length);
console.log('Datapoints.Total count:', totalDataPoints);*/
if (scope.panel.leftYAxisLabel) { plot = $.plot(elem, data, options);
elem.css('margin-left', '10px');
var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>")
.text(scope.panel.leftYAxisLabel)
.appendTo(elem);
yaxisLabel.css("margin-top", yaxisLabel.width() / 2 - 20); if (scope.panel.leftYAxisLabel) {
} else if (elem.css('margin-left')) { elem.css('margin-left', '10px');
elem.css('margin-left', ''); var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>")
} .text(scope.panel.leftYAxisLabel)
.appendTo(elem);
} catch(e) { yaxisLabel.css("margin-top", yaxisLabel.width() / 2 - 20);
console.log(e); } else if (elem.css('margin-left')) {
// Nothing to do here elem.css('margin-left', '');
} }
} }
function time_format(interval) { function time_format(interval) {
......
src/app/services/graphite/functions.js 0 → 100644
define([
],
function () {
'use strict';
return [
{
name: "scaleToSeconds",
params: [ { name: "seconds", type: "int" } ],
defaultParams: [1]
},
{
name: "sumSeries",
params: [],
},
{
name: "groupByNode",
params: [
{
name: "node",
type: "node",
},
{
name: "function",
type: "function",
}
],
defaultParams: [3, "sumSeries"]
},
{
name: "alias",
params: [
{ name: "alias", type: 'string' }
],
defaultParams: ['alias']
},
{
name: 'aliasByNode',
params: [ { name: "node", type: "node", } ],
defaultParams: [3]
}
];
});
\ No newline at end of file
src/app/services/graphite/graphiteSrv.js 0 → 100644
define([
],
function () {
});
\ No newline at end of file
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