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 stats-panel></div>
<div class="stats-panel-value-container">
<span class="stats-panel-value">{{mainstat.value}}</span>
<span class="stats-panel-func">({{mainstat.func}})</span>
</div>
<table class="stats-panel-table">
<tr>
<th></th>
<th>avg</th>
<th>min</th>
<th>max</th>
<th>current</th>
<th>total</th>
</tr>
<tr class="stats-series-item" ng-repeat="series in series">
<td>
<i class='icon-minus pointer' ng-style="{color: series.color}"></i>
{{series.info.alias}}
</td>
<td>{{series.info.avg}}</td>
<td>{{series.info.min}}</td>
<td>{{series.info.max}}</td>
<td>{{series.info.current}}</td>
<td>{{series.info.total}}</td>
</tr>
</table>
<!-- <div class="stats&#45;panel&#45;value&#45;container"> -->
<!-- <span class="stats&#45;panel&#45;value">{{mainstat.value}}</span> -->
<!-- <span class="stats&#45;panel&#45;func">({{mainstat.func}})</span> -->
<!-- </div> -->
<!-- -->
<!-- <table class="stats&#45;panel&#45;table"> -->
<!-- <tr> -->
<!-- <th></th> -->
<!-- <th>avg</th> -->
<!-- <th>min</th> -->
<!-- <th>max</th> -->
<!-- <th>current</th> -->
<!-- <th>total</th> -->
<!-- </tr> -->
<!-- <tr class="stats&#45;series&#45;item" ng&#45;repeat="series in series"> -->
<!-- <td> -->
<!-- <i class='icon&#45;minus pointer' ng&#45;style="{color: series.color}"></i> -->
<!-- {{series.info.alias}} -->
<!-- </td> -->
<!-- <td>{{series.info.avg}}</td> -->
<!-- <td>{{series.info.min}}</td> -->
<!-- <td>{{series.info.max}}</td> -->
<!-- <td>{{series.info.current}}</td> -->
<!-- <td>{{series.info.total}}</td> -->
<!-- </tr> -->
<!-- </table> -->
<div class="clearfix"></div>
......
src/app/panels/stats/module.js
......@@ -25,6 +25,10 @@ function (angular, app, _, TimeSeries, kbn) {
{
title: 'Metrics',
src:'app/partials/metrics.html'
},
{
title: 'Display Styles',
src:'app/panels/stats/statsEditor.html'
}
],
fullscreenEdit: true,
......@@ -32,28 +36,35 @@ function (angular, app, _, TimeSeries, kbn) {
// Set and populate defaults
var _d = {
targets: [{}]
targets: [{}],
cacheTimeout: null,
};
_.defaults($scope.panel, _d);
$scope.init = function() {
panelSrv.init($scope);
$scope.$on('refresh', $scope.get_data);
};
$scope.formatValue = function(value) {
return kbn.valueFormats.bytes(value, 0, -7);
};
$scope.get_data = function() {
console.log("stats get data");
$scope.updateTimeRange = function () {
$scope.range = timeSrv.timeRange();
$scope.rangeUnparsed = timeSrv.timeRange(false);
};
$scope.get_data = function() {
$scope.updateTimeRange();
var metricsQuery = {
range: $scope.rangeUnparsed,
interval: '1min',
targets: $scope.panel.targets,
maxDataPoints: 100,
cacheTimeout: $scope.panel.cacheTimeout
};
return $scope.datasource.query(metricsQuery)
......@@ -63,20 +74,26 @@ function (angular, app, _, TimeSeries, kbn) {
$scope.panelMeta.loading = false;
$scope.panelMeta.error = err.message || "Timeseries data request error";
$scope.inspector.error = err;
$scope.render([]);
$scope.render();
});
};
$scope.dataHandler = function(results) {
$scope.panelMeta.loading = false;
$scope.series = _.map(results.data, $scope.seriesHandler);
if ($scope.series.length > 0) {
var mainstat = $scope.series[0];
$scope.mainstat = {};
$scope.mainstat.value = $scope.formatValue(mainstat.stats.avg);
$scope.mainstat.func = 'avg';
var data= {};
data.series = _.map(results.data, $scope.seriesHandler);
data.stats = [];
if (data.series.length > 0) {
var stat = {};
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) {
......@@ -102,11 +119,64 @@ function (angular, app, _, TimeSeries, kbn) {
};
$scope.render = function() {
};
$scope.openEditor = function() {
$scope.$emit('render');
};
$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 @@
text-align: center;
}
.panel-error {
color: @white;
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