From 7fb048f4237e66ee1baecf5aa89ea1a98ee74651 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 8 Oct 2014 11:43:51 -0400 Subject: [PATCH] Began work on experimental new stats panel --- src/app/components/settings.js | 2 +- src/app/directives/panelMenu.js | 5 ++ src/app/panels/graph/module.html | 2 +- src/app/panels/graph/module.js | 1 - src/app/panels/stats/module.html | 51 ++++++++++++++ src/app/panels/stats/module.js | 112 +++++++++++++++++++++++++++++++ src/app/panels/text/module.js | 2 +- src/css/less/grafana.less | 1 + src/css/less/stats-panel.less | 44 ++++++++++++ 9 files changed, 216 insertions(+), 4 deletions(-) create mode 100644 src/app/panels/stats/module.html create mode 100644 src/app/panels/stats/module.js create mode 100644 src/css/less/stats-panel.less diff --git a/src/app/components/settings.js b/src/app/components/settings.js index 825712f619f..291879e7404 100644 --- a/src/app/components/settings.js +++ b/src/app/components/settings.js @@ -15,7 +15,7 @@ function (_, crypto) { var defaults = { datasources : {}, window_title_prefix : 'Grafana - ', - panels : ['graph', 'text'], + panels : ['graph', 'text', 'stats'], plugins : {}, default_route : '/dashboard/file/default.json', playlist_timespan : "1m", diff --git a/src/app/directives/panelMenu.js b/src/app/directives/panelMenu.js index aac7e04f989..99c67516d99 100644 --- a/src/app/directives/panelMenu.js +++ b/src/app/directives/panelMenu.js @@ -122,6 +122,11 @@ function (angular, $, _) { dismiss(2500); }; + if ($scope.panelMeta.titlePos) { + elem.css('text-align', 'left'); + $link.css('padding-left', '10px'); + } + elem.click(showMenu); $compile(elem.contents())($scope); } diff --git a/src/app/panels/graph/module.html b/src/app/panels/graph/module.html index 3a6e0c8a0d1..1f185049800 100644 --- a/src/app/panels/graph/module.html +++ b/src/app/panels/graph/module.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js index 6f5a174056f..f97a3489a27 100644 --- a/src/app/panels/graph/module.js +++ b/src/app/panels/graph/module.js @@ -27,7 +27,6 @@ function (angular, app, $, _, kbn, moment, TimeSeries) { module.controller('GraphCtrl', function($scope, $rootScope, panelSrv, annotationsSrv, timeSrv) { $scope.panelMeta = { - modals : [], editorTabs: [], fullEditorTabs : [ { diff --git a/src/app/panels/stats/module.html b/src/app/panels/stats/module.html new file mode 100644 index 00000000000..8f57380c7c0 --- /dev/null +++ b/src/app/panels/stats/module.html @@ -0,0 +1,51 @@ +
+ +
+ {{mainstat.value}} + ({{mainstat.func}}) +
+ + + + + + + + + + + + + + + + + + +
avgminmaxcurrenttotal
+ + {{series.info.alias}} + {{series.info.avg}}{{series.info.min}}{{series.info.max}}{{series.info.current}}{{series.info.total}}
+ +
+ +
+
+
+ + Panel settings +
+ +
+
+
+
+
+ +
+
+
+
+
+
+
diff --git a/src/app/panels/stats/module.js b/src/app/panels/stats/module.js new file mode 100644 index 00000000000..08a078f27b5 --- /dev/null +++ b/src/app/panels/stats/module.js @@ -0,0 +1,112 @@ +define([ + 'angular', + 'app', + 'lodash', + 'components/timeSeries', + 'kbn', + 'services/panelSrv', +], +function (angular, app, _, TimeSeries, kbn) { + 'use strict'; + + var module = angular.module('grafana.panels.stats', []); + app.useModule(module); + + module.controller('StatsCtrl', function($scope, panelSrv, timeSrv, $rootScope) { + + $scope.panelMeta = { + titlePos: 'left', + description : "A stats values panel", + fullEditorTabs : [ + { + title: 'General', + src:'app/partials/panelgeneral.html' + }, + { + title: 'Metrics', + src:'app/partials/metrics.html' + } + ], + fullscreenEdit: true, + }; + + // Set and populate defaults + var _d = { + targets: [{}] + }; + + _.defaults($scope.panel, _d); + + $scope.init = function() { + panelSrv.init($scope); + }; + + $scope.formatValue = function(value) { + return kbn.valueFormats.bytes(value, 0, -7); + }; + + $scope.get_data = function() { + console.log("stats get data"); + $scope.rangeUnparsed = timeSrv.timeRange(false); + + var metricsQuery = { + range: $scope.rangeUnparsed, + interval: '1min', + targets: $scope.panel.targets, + maxDataPoints: 100, + }; + + return $scope.datasource.query(metricsQuery) + .then($scope.dataHandler) + .then(null, function(err) { + console.log("err"); + $scope.panelMeta.loading = false; + $scope.panelMeta.error = err.message || "Timeseries data request error"; + $scope.inspector.error = err; + $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'; + } + }; + + $scope.seriesHandler = function(seriesData, index) { + var datapoints = seriesData.datapoints; + var alias = seriesData.target; + var color = $rootScope.colors[index]; + + var seriesInfo = { + alias: alias, + enable: true, + color: color + }; + + var series = new TimeSeries({ + datapoints: datapoints, + info: seriesInfo, + }); + + series.points = series.getFlotPairs('connected'); + series.updateLegendValues(kbn.valueFormats.bytes, 2, -7); + + return series; + }; + + $scope.render = function() { + }; + + $scope.openEditor = function() { + }; + + $scope.init(); + }); +}); diff --git a/src/app/panels/text/module.js b/src/app/panels/text/module.js index d778e877031..1401cff50b2 100644 --- a/src/app/panels/text/module.js +++ b/src/app/panels/text/module.js @@ -29,7 +29,7 @@ function (angular, app, _, require) { _.defaults($scope.panel, _d); $scope.init = function() { - panelSrv.init(this); + panelSrv.init($scope); $scope.ready = false; $scope.$on('refresh', $scope.render); $scope.render(); diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index edc5605ee6b..c5e6e1db3aa 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -6,6 +6,7 @@ @import "search.less"; @import "panel.less"; @import "forms.less"; +@import "stats-panel.less"; .row-control-inner { padding:0px; diff --git a/src/css/less/stats-panel.less b/src/css/less/stats-panel.less new file mode 100644 index 00000000000..2a9276d42fe --- /dev/null +++ b/src/css/less/stats-panel.less @@ -0,0 +1,44 @@ +.stats-panel-value-container { + padding: 20px; + text-align: center; +} + +.stats-panel-value { + font-size: 3em; + font-weight: bold; +} + +.stats-panel-func { + font-size: 1.5em; +} + +.stats-panel-table { + width: 100%; + td { + padding: 5px 10px; + white-space: nowrap; + text-align: right; + border-bottom: 1px solid @grafanaListBorderBottom; + } + + th { + text-align: right; + padding: 5px 10px; + font-weight: bold; + color: @blue + } + + td:first-child { + text-align: left; + } + + tr:nth-child(odd) td { + background-color: @grafanaListAccent; + } + + tr:last-child td { + border: none; + } +} + +