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([
'angular',
'underscore',
'config'
'config',
'/app/services/graphite/functions.js'
],
function (angular, _, config) {
function (angular, _, config, graphiteFunctions) {
'use strict';
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) {
......@@ -43,7 +19,7 @@ function (angular, _, config) {
};
});
$scope.funcDefs = funcDefs;
$scope.funcDefs = graphiteFunctions;
$scope.functions = [];
};
......@@ -100,6 +76,19 @@ function (angular, _, config) {
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.altSegments = [];
......@@ -135,16 +124,21 @@ function (angular, _, config) {
};
$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.removeFunction = function(func) {
$scope.functions = _.without($scope.functions, func);
$scope.targetChanged();
};
$scope.functionParamsChanged = function(func) {
func.text = getFuncText(func.def, func.params);
$scope.targetChanged();
};
$scope.addFunction = function(funcDef) {
......@@ -153,6 +147,7 @@ function (angular, _, config) {
params: funcDef.defaultParams,
text: getFuncText(funcDef, funcDef.defaultParams)
});
$scope.targetChanged();
};
});
......
src/app/panels/graphite/funcEditor.html
......@@ -23,7 +23,7 @@
<div class="editor-option" ng-repeat="param in func.def.params">
<label class="small">{{param.name}}</label>
<input ng-if="param.type === 'int'"
type="text"
type="number"
placeholder="seconds"
focus-me="true"
class="input-mini"
......
src/app/panels/graphite/module.js
......@@ -459,6 +459,9 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
// Function for rendering panel
function render_panel(data) {
if (!data) {
return;
}
// IE doesn't work without this
elem.css({height:scope.panel.height || scope.row.height});
......@@ -476,129 +479,124 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
var stack = scope.panel.stack ? true : null;
// Populate element
try {
var options = {
legend: { show: false },
series: {
stackpercent: scope.panel.stack ? scope.panel.percentage : false,
stack: scope.panel.percentage ? null : stack,
lines: {
show: scope.panel.lines,
// Silly, but fixes bug in stacked percentages
fill: scope.panel.fill === 0 ? 0.001 : scope.panel.fill/10,
lineWidth: scope.panel.linewidth,
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
var options = {
legend: { show: false },
series: {
stackpercent: scope.panel.stack ? scope.panel.percentage : false,
stack: scope.panel.percentage ? null : stack,
lines: {
show: scope.panel.lines,
// Silly, but fixes bug in stacked percentages
fill: scope.panel.fill === 0 ? 0.001 : scope.panel.fill/10,
lineWidth: scope.panel.linewidth,
steps: false
},
yaxis: {
show: scope.panel['y-axis'],
min: scope.panel.grid.min,
max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max
bars: {
show: scope.panel.bars,
fill: 1,
barWidth: barwidth/1.5,
zero: false,
lineWidth: 0
},
xaxis: {
timezone: scope.panel.timezone,
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
points: {
show: scope.panel.points,
fill: 1,
fillColor: false,
radius: scope.panel.pointradius
},
grid: {
backgroundColor: null,
borderWidth: 0,
hoverable: true,
color: '#c8c8c8'
}
};
if(scope.panel.y_format === 'bytes') {
options.yaxis.mode = "byte";
shadowSize: 1
},
yaxis: {
show: scope.panel['y-axis'],
min: scope.panel.grid.min,
max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max
},
xaxis: {
timezone: scope.panel.timezone,
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') {
options.yaxis.tickFormatter = function(val) {
return kbn.shortFormat(val,0);
};
}
if(scope.panel.y_format === 'bytes') {
options.yaxis.mode = "byte";
}
if(scope.panel.y_format === 'short') {
options.yaxis.tickFormatter = function(val) {
return kbn.shortFormat(val,0);
};
}
if(scope.panel.annotate.enable) {
options.events = {
levels: 1,
data: scope.annotations,
types: {
'annotation': {
level: 1,
icon: {
icon: "icon-tag icon-flip-vertical",
size: 20,
color: "#222",
outline: "#bbb"
}
if(scope.panel.annotate.enable) {
options.events = {
levels: 1,
data: scope.annotations,
types: {
'annotation': {
level: 1,
icon: {
icon: "icon-tag icon-flip-vertical",
size: 20,
color: "#222",
outline: "#bbb"
}
}
//xaxis: int // the x axis to attach events to
};
}
if(scope.panel.interactive) {
options.selection = { mode: "x", color: '#666' };
}
}
//xaxis: int // the x axis to attach events to
};
}
// when rendering stacked bars, we need to ensure each point that has data is zero-filled
// so that the stacking happens in the proper order
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);
}
if(scope.panel.interactive) {
options.selection = { mode: "x", color: '#666' };
}
for (var i = 0; i < data.length; i++) {
var _d = data[i].time_series.getFlotPairs(required_times);
data[i].data = _d;
}
// when rendering stacked bars, we need to ensure each point that has data is zero-filled
// so that the stacking happens in the proper order
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);
console.log('Datapoints[0] count:', data[0].data.length);
console.log('Datapoints.Total count:', totalDataPoints);*/
for (var i = 0; i < data.length; i++) {
var _d = data[i].time_series.getFlotPairs(required_times);
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) {
elem.css('margin-left', '10px');
var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>")
.text(scope.panel.leftYAxisLabel)
.appendTo(elem);
plot = $.plot(elem, data, options);
yaxisLabel.css("margin-top", yaxisLabel.width() / 2 - 20);
} else if (elem.css('margin-left')) {
elem.css('margin-left', '');
}
if (scope.panel.leftYAxisLabel) {
elem.css('margin-left', '10px');
var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>")
.text(scope.panel.leftYAxisLabel)
.appendTo(elem);
} catch(e) {
console.log(e);
// Nothing to do here
yaxisLabel.css("margin-top", yaxisLabel.width() / 2 - 20);
} else if (elem.css('margin-left')) {
elem.css('margin-left', '');
}
}
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