Skip to content

N
nexpie-grafana-theme
Commit 6cd1bc32 by Torkel Ödegaard
Options

StatsPanel: more work on stats panel

parent 123faa6f
Showing with 138 additions and 41 deletions
src/app/panels/stats/module.html
<div ng-controller='StatsCtrl'> <div ng-controller='StatsCtrl'>
<div stats-panel></div>
<div class="stats-panel-value-container"> <!-- <div class="stats&#45;panel&#45;value&#45;container"> -->
<span class="stats-panel-value">{{mainstat.value}}</span> <!-- <span class="stats&#45;panel&#45;value">{{mainstat.value}}</span> -->
<span class="stats-panel-func">({{mainstat.func}})</span> <!-- <span class="stats&#45;panel&#45;func">({{mainstat.func}})</span> -->
</div> <!-- </div> -->
<!-- -->
<table class="stats-panel-table"> <!-- <table class="stats&#45;panel&#45;table"> -->
<tr> <!-- <tr> -->
<th></th> <!-- <th></th> -->
<th>avg</th> <!-- <th>avg</th> -->
<th>min</th> <!-- <th>min</th> -->
<th>max</th> <!-- <th>max</th> -->
<th>current</th> <!-- <th>current</th> -->
<th>total</th> <!-- <th>total</th> -->
</tr> <!-- </tr> -->
<tr class="stats-series-item" ng-repeat="series in series"> <!-- <tr class="stats&#45;series&#45;item" ng&#45;repeat="series in series"> -->
<td> <!-- <td> -->
<i class='icon-minus pointer' ng-style="{color: series.color}"></i> <!-- <i class='icon&#45;minus pointer' ng&#45;style="{color: series.color}"></i> -->
{{series.info.alias}} <!-- {{series.info.alias}} -->
</td> <!-- </td> -->
<td>{{series.info.avg}}</td> <!-- <td>{{series.info.avg}}</td> -->
<td>{{series.info.min}}</td> <!-- <td>{{series.info.min}}</td> -->
<td>{{series.info.max}}</td> <!-- <td>{{series.info.max}}</td> -->
<td>{{series.info.current}}</td> <!-- <td>{{series.info.current}}</td> -->
<td>{{series.info.total}}</td> <!-- <td>{{series.info.total}}</td> -->
</tr> <!-- </tr> -->
</table> <!-- </table> -->
<div class="clearfix"></div> <div class="clearfix"></div>
......
src/app/panels/stats/module.js
...@@ -25,6 +25,10 @@ function (angular, app, _, TimeSeries, kbn) { ...@@ -25,6 +25,10 @@ function (angular, app, _, TimeSeries, kbn) {
{ {
title: 'Metrics', title: 'Metrics',
src:'app/partials/metrics.html' src:'app/partials/metrics.html'
},
{
title: 'Display Styles',
src:'app/panels/stats/statsEditor.html'
} }
], ],
fullscreenEdit: true, fullscreenEdit: true,
...@@ -32,28 +36,35 @@ function (angular, app, _, TimeSeries, kbn) { ...@@ -32,28 +36,35 @@ function (angular, app, _, TimeSeries, kbn) {
// Set and populate defaults // Set and populate defaults
var _d = { var _d = {
targets: [{}] targets: [{}],
cacheTimeout: null,
}; };
_.defaults($scope.panel, _d); _.defaults($scope.panel, _d);
$scope.init = function() { $scope.init = function() {
panelSrv.init($scope); panelSrv.init($scope);
$scope.$on('refresh', $scope.get_data);
}; };
$scope.formatValue = function(value) { $scope.formatValue = function(value) {
return kbn.valueFormats.bytes(value, 0, -7); return kbn.valueFormats.bytes(value, 0, -7);
}; };
$scope.get_data = function() { $scope.updateTimeRange = function () {
console.log("stats get data"); $scope.range = timeSrv.timeRange();
$scope.rangeUnparsed = timeSrv.timeRange(false); $scope.rangeUnparsed = timeSrv.timeRange(false);
};
$scope.get_data = function() {
$scope.updateTimeRange();
var metricsQuery = { var metricsQuery = {
range: $scope.rangeUnparsed, range: $scope.rangeUnparsed,
interval: '1min', interval: '1min',
targets: $scope.panel.targets, targets: $scope.panel.targets,
maxDataPoints: 100, maxDataPoints: 100,
cacheTimeout: $scope.panel.cacheTimeout
}; };
return $scope.datasource.query(metricsQuery) return $scope.datasource.query(metricsQuery)
...@@ -63,20 +74,26 @@ function (angular, app, _, TimeSeries, kbn) { ...@@ -63,20 +74,26 @@ function (angular, app, _, TimeSeries, kbn) {
$scope.panelMeta.loading = false; $scope.panelMeta.loading = false;
$scope.panelMeta.error = err.message || "Timeseries data request error"; $scope.panelMeta.error = err.message || "Timeseries data request error";
$scope.inspector.error = err; $scope.inspector.error = err;
$scope.render([]); $scope.render();
}); });
}; };
$scope.dataHandler = function(results) { $scope.dataHandler = function(results) {
$scope.panelMeta.loading = false; $scope.panelMeta.loading = false;
$scope.series = _.map(results.data, $scope.seriesHandler); var data= {};
data.series = _.map(results.data, $scope.seriesHandler);
if ($scope.series.length > 0) { data.stats = [];
var mainstat = $scope.series[0];
$scope.mainstat = {}; if (data.series.length > 0) {
$scope.mainstat.value = $scope.formatValue(mainstat.stats.avg); var stat = {};
$scope.mainstat.func = 'avg'; var firstSeries = data.series[0];
stat.value = $scope.formatValue(firstSeries.stats.avg);
stat.func = 'avg';
data.stats.push(stat);
} }
$scope.data = data;
$scope.render();
}; };
$scope.seriesHandler = function(seriesData, index) { $scope.seriesHandler = function(seriesData, index) {
...@@ -102,11 +119,64 @@ function (angular, app, _, TimeSeries, kbn) { ...@@ -102,11 +119,64 @@ function (angular, app, _, TimeSeries, kbn) {
}; };
$scope.render = function() { $scope.render = function() {
}; $scope.$emit('render');
$scope.openEditor = function() {
}; };
$scope.init(); $scope.init();
}); });
module.directive('statsPanel', function() {
return {
link: function(scope, elem) {
var data;
console.log('asd');
scope.$on('render', function() {
data = scope.data;
if (!data || data.series.length === 0) {
elem.html('no data');
return;
}
render();
});
function render() {
var body = '';
var i, series;
if (scope.panel.stats) {
body += '<div class="stats-panel-value-container">';
body += '<span class="stats-panel-value">' + data.stats[0].value + '</span>';
body += ' <span class="stats-panel-func">(' + data.stats[0].func + ')</span>';
body += '</div>';
}
if (scope.panel.table) {
body += '<table class="stats-panel-table">';
body += '<tr>';
body += '<th></th><th>avg</th><th>min</th><th>max</th><th>current</th><th>total</th>';
body += '</tr>';
for (i = 0; i < data.series.length; i++) {
series = data.series[i];
body += '<tr>';
body += '<td><i class="icon-minus pointer" style="color:' + series.color + '"></i> ';
body += series.info.alias + ' </td>';
body += '<td>' + series.info.avg + '</td>';
body += '<td>' + series.info.min + '</td>';
body += '<td>' + series.info.max + '</td>';
body += '<td>' + series.info.total + '</td>';
body += '<td>' + series.info.current + '</td>';
}
body += '</table>';
}
elem.html(body);
}
}
};
});
}); });
src/app/panels/stats/statsEditor.html 0 → 100644
<div class="editor-row">
<div class="section">
<h5>Main options</h5>
<editor-opt-bool text="Show table" model="panel.table" change="render()"></editor-opt-bool>
<editor-opt-bool text="Show values" model="panel.stats" change="render()"></editor-opt-bool>
</div>
</div>
<div class="editor-row">
<div class="section">
<h5>Series options</h5>
<div class="grafana-target" ng-repeat="series in data.series">
<div class="grafana-target-inner">
<ul class="grafana-segment-list">
<li class="grafana-target-segment">
{{series.info.alias}}
</li>
<li class="grafana-target-segment">
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
src/css/less/panel.less
...@@ -40,7 +40,6 @@ ...@@ -40,7 +40,6 @@
text-align: center; text-align: center;
} }
.panel-error { .panel-error {
color: @white; color: @white;
position: absolute; position: absolute;
......
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