public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

backedported upstream changes from histogram to graphite panel

Browse Source
This commit is contained in:
Torkel Ödegaard
2013-12-10 21:09:43 +01:00
parent d0df36433d
commit 5cdbbfa021
3 changed files with 46 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/panels/graphite/editor.html
+2 -2
View File
@@ -7,11 +7,11 @@
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span12">
<input type="text" ng-model="target.target" class="input-large" style="width:95%" ng-model-onblur ng-change="get_data()" /> <input type="text" ng-model="target.target" class="input-large" style="width:95%" ng-model-onblur ng-change="get_data()" />
<i ng-click="panel.targets = _.without(panel.targets, target)" class="pointer icon-remove" ng-change="get_data()" style="position: relative; top: -5px; left: 5px;"></i> <i ng-click="panel.targets = _.without(panel.targets, target)" class="pointer icon-remove" style="position: relative; top: -5px; left: 5px;"></i>
</div> </div>
</div> </div>
</div> </div>
<button ng-click="add_target(panel.target);" class="btn btn-success" ng-show="editor.index == 1">Add target</button> <button ng-click="add_target(panel.target)" class="btn btn-success" ng-show="editor.index == 1">Add target</button>
</div> </div>
src/app/panels/graphite/module.html
+4 -4
View File
@@ -106,11 +106,11 @@
<div histogram-chart class="pointer histogram-chart" params="{{panel}}"></div> <div histogram-chart class="pointer histogram-chart" params="{{panel}}"></div>
<span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend"> <span ng-show="panel.legend" ng-repeat='series in legend' class="histogram-legend">
<i class='icon-circle' ng-style="{color: series.info.color}"></i> <i class='icon-circle' ng-style="{color: series.color}"></i>
<span class='small histogram-legend-item'> <span class='small histogram-legend-item'>
<span ng-if="panel.show_query">{{series.info.alias || series.info.query}}</span> <span ng-if="panel.show_query">{{series.alias || series.query}}</span>
<span ng-if="!panel.show_query">{{series.info.alias}}</span> <span ng-if="!panel.show_query">{{series.alias}}</span>
</span> </span>
</span> </span>
src/app/panels/graphite/module.js
+40 -35
View File
@@ -204,9 +204,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
$scope.init = function() { $scope.init = function() {
// Hide view options by default // Hide view options by default
$scope.options = false; $scope.options = false;
$scope.$on('refresh',function(){
$scope.get_data();
});
// Always show the query if an alias isn't set. Users can set an alias if the query is too // Always show the query if an alias isn't set. Users can set an alias if the query is too
// long // long
@@ -294,8 +291,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
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('Interval: ' + interval);
var graphiteLoadOptions = { var graphiteLoadOptions = {
range: range, range: range,
targets: $scope.panel.targets, targets: $scope.panel.targets,
@@ -307,7 +302,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
$scope.receiveGraphiteData(range, interval) $scope.receiveGraphiteData(range, interval)
]); ]);
result(function (success, failure) { result(function (data, failure) {
if (failure) { if (failure) {
$scope.panel.error = 'Failed to do fetch graphite data: ' + failure; $scope.panel.error = 'Failed to do fetch graphite data: ' + failure;
return; return;
@@ -317,7 +312,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
$scope.$apply(); $scope.$apply();
// Tell the histogram directive to render. // Tell the histogram directive to render.
$scope.$emit('render'); $scope.$emit('render', data);
}); });
}; };
@@ -325,14 +320,15 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
$scope.receiveGraphiteData = function(range, interval) { $scope.receiveGraphiteData = function(range, interval) {
return function receive_graphite_data_requestor(requestion, results) { return function receive_graphite_data_requestor(requestion, results) {
$scope.legend = [];
var data = [];
$scope.data = [];
if(results.length == 0 ) { if(results.length == 0 ) {
requestion('no data in response from graphite'); requestion('no data in response from graphite');
} }
console.log('Data from graphite:', results); //console.log('Data from graphite:', results);
console.log('nr datapoints from graphite: %d', results[0].datapoints.length); //console.log('nr datapoints from graphite: %d', results[0].datapoints.length);
var tsOpts = { var tsOpts = {
interval: interval, interval: interval,
@@ -350,18 +346,22 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
} }
}); });
$scope.data.push({ var seriesInfo = {
info: { alias: targetData.target,
alias: targetData.target, color: $scope.colors[data.length],
color: $scope.colors[$scope.data.length], enable: true
enable: true };
},
time_series: time_series, $scope.legend.push(seriesInfo);
hits: 0
data.push({
info: seriesInfo,
time_series: time_series
}); });
}); });
requestion('ok'); requestion(data);
}; };
}; };
@@ -443,15 +443,21 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
restrict: 'A', restrict: 'A',
template: '<div></div>', template: '<div></div>',
link: function(scope, elem) { link: function(scope, elem) {
var data = [];
scope.$on('refresh',function() {
scope.get_data();
});
// Receive render events // Receive render events
scope.$on('render',function(){ scope.$on('render',function(event, d) {
render_panel(); data = d || data;
render_panel(data);
}); });
// Re-render if the window is resized // Re-render if the window is resized
angular.element(window).bind('resize', function(){ angular.element(window).bind('resize', function() {
render_panel(); render_panel(data);
}); });
var scale = function(series,factor) { var scale = function(series,factor) {
@@ -479,13 +485,13 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
}; };
// Function for rendering panel // Function for rendering panel
function render_panel() { function render_panel(data) {
// 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});
// Populate from the query service // Populate from the query service
try { try {
_.each(scope.data, function(series) { _.each(data, function(series) {
series.label = series.info.alias; series.label = series.info.alias;
series.color = series.info.color; series.color = series.info.color;
}); });
@@ -584,8 +590,8 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
// when rendering stacked bars, we need to ensure each point that has data is zero-filled // 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 // so that the stacking happens in the proper order
var required_times = []; var required_times = [];
if (scope.data.length > 1) { if (data.length > 1) {
required_times = Array.prototype.concat.apply([], _.map(scope.data, function (query) { required_times = Array.prototype.concat.apply([], _.map(data, function (query) {
return query.time_series.getOrderedTimes(); return query.time_series.getOrderedTimes();
})); }));
required_times = _.uniq(required_times.sort(function (a, b) { required_times = _.uniq(required_times.sort(function (a, b) {
@@ -594,17 +600,16 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv) {
}), true); }), true);
} }
for (var i = 0; i < scope.data.length; i++) { for (var i = 0; i < data.length; i++) {
var _d = scope.data[i].time_series.getFlotPairs(required_times); var _d = data[i].time_series.getFlotPairs(required_times);
scope.data[i].data = _d; data[i].data = _d;
} }
var totalDataPoints = _.reduce(scope.data, function(num, series) { return series.data.length + num; }, 0); /* var totalDataPoints = _.reduce(data, function(num, series) { return series.data.length + num; }, 0);
console.log('Datapoints[0] count:', scope.data[0].data.length); console.log('Datapoints[0] count:', data[0].data.length);
console.log('Datapoints.Total count:', totalDataPoints); console.log('Datapoints.Total count:', totalDataPoints);*/
scope.plot = $.plot(elem, data, options);
scope.plot = $.plot(elem, scope.data, options);
} catch(e) { } catch(e) {
console.log(e); console.log(e);