Skip to content

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

fixed issue with connected lines (null values) from graphite

parent c5902ab8
Showing with 27 additions and 58 deletions
src/app/panels/graphite/module.js
...@@ -64,21 +64,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -64,21 +64,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
// Set and populate defaults // Set and populate defaults
var _d = { var _d = {
/** @scratch /panels/histogram/3 /** @scratch /panels/histogram/3
* === Parameters
* ==== Axis options
* mode:: Value to use for the y-axis. For all modes other than count, +value_field+ must be
* defined. Possible values: count, mean, max, min, total.
*/
mode : 'count',
/** @scratch /panels/histogram/3
* time_field:: x-axis field. This must be defined as a date type in Elasticsearch.
*/
time_field : '@timestamp',
/** @scratch /panels/histogram/3
* value_field:: y-axis field if +mode+ is set to mean, max, min or total. Must be numeric.
*/
value_field : null,
/** @scratch /panels/histogram/3
* x-axis:: Show the x-axis * x-axis:: Show the x-axis
*/ */
'x-axis' : true, 'x-axis' : true,
...@@ -103,16 +88,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -103,16 +88,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
max: null, max: null,
min: 0 min: 0
}, },
/** @scratch /panels/histogram/5
* ==== Queries
* queries object:: This object describes the queries to use on this panel.
* queries.mode::: Of the queries available, which to use. Options: +all, pinned, unpinned, selected+
* queries.ids::: In +selected+ mode, which query ids are selected.
*/
queries : {
mode : 'all',
ids : []
},
/** @scratch /panels/histogram/3 /** @scratch /panels/histogram/3
* ==== Annotations * ==== Annotations
* annotate object:: A query can be specified, the results of which will be displayed as markers on * annotate object:: A query can be specified, the results of which will be displayed as markers on
...@@ -151,7 +126,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -151,7 +126,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
* ==== Drawing options * ==== Drawing options
* lines:: Show line chart * lines:: Show line chart
*/ */
lines : false, lines : true,
/** @scratch /panels/histogram/3 /** @scratch /panels/histogram/3
* fill:: Area fill factor for line charts, 1-10 * fill:: Area fill factor for line charts, 1-10
*/ */
...@@ -159,7 +134,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -159,7 +134,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
/** @scratch /panels/histogram/3 /** @scratch /panels/histogram/3
* linewidth:: Weight of lines in pixels * linewidth:: Weight of lines in pixels
*/ */
linewidth : 3, linewidth : 1,
/** @scratch /panels/histogram/3 /** @scratch /panels/histogram/3
* points:: Show points on chart * points:: Show points on chart
*/ */
...@@ -171,7 +146,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -171,7 +146,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
/** @scratch /panels/histogram/3 /** @scratch /panels/histogram/3
* bars:: Show bars on chart * bars:: Show bars on chart
*/ */
bars : true, bars : false,
/** @scratch /panels/histogram/3 /** @scratch /panels/histogram/3
* stack:: Stack multiple series * stack:: Stack multiple series
*/ */
...@@ -302,7 +277,8 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -302,7 +277,8 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
{ {
name: 'series 1', name: 'series 1',
color: '#CC6699', color: '#CC6699',
target: "summarize(groupByNode(prod.apps.tradera_site.*.counters.global.request_status.code_{301,302,404}.count, 7, 'sum'), '1min')", target: "summarize(sum(prod.apps.tradera_site.*.counters.global.request_status.code_404.count), '30s')",
//target: 'integral(prod.apps.touchweb.snake.counters.login.success.count)',
//target: "randomWalk('random1')", //target: "randomWalk('random1')",
} }
], ],
...@@ -351,8 +327,9 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -351,8 +327,9 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
var range = $scope.get_time_range(); var range = $scope.get_time_range();
var interval = $scope.get_interval(range); var interval = $scope.get_interval(range);
console.log('range: ', range); console.log('interval: ' + interval);
console.log('interval: ', interval);
graphOptions.from = $.plot.formatDate(range.from, '%H%:%M_%Y%m%d');
$scope.panelMeta.loading = true; $scope.panelMeta.loading = true;
...@@ -374,7 +351,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -374,7 +351,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
interval: "30s", interval: "30s",
start_date: range && range.from, start_date: range && range.from,
end_date: range && range.to, end_date: range && range.to,
fill_style: 'null' fill_style: 'connect'
}; };
var hits = 0; var hits = 0;
...@@ -383,10 +360,15 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -383,10 +360,15 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
var time_series = new timeSeries.ZeroFilled(tsOpts); var time_series = new timeSeries.ZeroFilled(tsOpts);
_.each(targetData.datapoints, function(valueArray) { _.each(targetData.datapoints, function(valueArray) {
time_series.addValue(valueArray[1] * 1000, valueArray[0]); var value = valueArray[0];
if (value) {
time_series.addValue(valueArray[1] * 1000, value);
}
hits += +1; hits += +1;
}); });
console.log('graphite timeseries: ', time_series);
$scope.data.push({ $scope.data.push({
info: { info: {
alias: targetData.target, alias: targetData.target,
...@@ -531,7 +513,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -531,7 +513,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
// 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: true
}, },
bars: { bars: {
show: scope.panel.bars, show: scope.panel.bars,
...@@ -617,20 +599,11 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -617,20 +599,11 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
}), true); }), true);
} }
for (var i = 0; i < scope.data.length; i++) { for (var i = 0; i < scope.data.length; i++) {
var _d = scope.data[i].time_series.getFlotPairs(required_times); var _d = scope.data[i].time_series.getFlotPairs(required_times);
if(scope.panel.derivative) {
_d = derivative(_d);
}
if(scope.panel.scale !== 1) {
_d = scale(_d,scope.panel.scale);
}
if(scope.panel.scaleSeconds) {
_d = scaleSeconds(_d,scope.panel.interval);
}
scope.data[i].data = _d; scope.data[i].data = _d;
} }
console.log('Sent to plot', scope.data);
scope.plot = $.plot(elem, scope.data, options); scope.plot = $.plot(elem, scope.data, options);
...@@ -701,3 +674,4 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -701,3 +674,4 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
}); });
}); });
src/app/panels/graphite/timeSeries.js
...@@ -101,7 +101,10 @@ function (_, Interval) { ...@@ -101,7 +101,10 @@ function (_, Interval) {
strategy = this._getAllFlotPairs; strategy = this._getAllFlotPairs;
} else if(this.opts.fill_style === 'null') { } else if(this.opts.fill_style === 'null') {
strategy = this._getNullFlotPairs; strategy = this._getNullFlotPairs;
} else { } else if (this.opts.fill_style === 'connect') {
strategy = this._getFlotPairsConnect;
}
else {
strategy = this._getMinFlotPairs; strategy = this._getMinFlotPairs;
} }
...@@ -112,21 +115,14 @@ function (_, Interval) { ...@@ -112,21 +115,14 @@ function (_, Interval) {
this // context this // context
); );
// if the first or last pair is inside either the start or end time,
// add those times to the series with null values so the graph will stretch to contain them.
// Removing, flot 0.8.1's max/min params satisfy this
/*
if (this.start_time && (pairs.length === 0 || pairs[0][0] > this.start_time)) {
pairs.unshift([this.start_time, null]);
}
if (this.end_time && (pairs.length === 0 || pairs[pairs.length - 1][0] < this.end_time)) {
pairs.push([this.end_time, null]);
}
*/
return pairs; return pairs;
}; };
ts.ZeroFilled.prototype._getFlotPairsConnect = function (result, time, i, times) {
result.push([times[i], this._data[times[i]] || 0 ]);
return result;
}
/** /**
* ** called as a reduce stragegy in getFlotPairs() ** * ** called as a reduce stragegy in getFlotPairs() **
* Fill zero's on either side of the current time, unless there is already a measurement there or * Fill zero's on either side of the current time, unless there is already a measurement there or
...@@ -168,7 +164,6 @@ function (_, Interval) { ...@@ -168,7 +164,6 @@ function (_, Interval) {
*/ */
ts.ZeroFilled.prototype._getAllFlotPairs = function (result, time, i, times) { ts.ZeroFilled.prototype._getAllFlotPairs = function (result, time, i, times) {
var next, expected_next; var next, expected_next;
result.push([ times[i], this._data[times[i]] || 0 ]); result.push([ times[i], this._data[times[i]] || 0 ]);
next = times[i + 1]; next = times[i + 1];
expected_next = this.interval.after(time); expected_next = this.interval.after(time);
......
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