Began work on experimental new stats panel

src/app/components/settings.js

@@ -15,7 +15,7 @@ function (_, crypto) {
     var defaults = {
     var defaults = {
       datasources                   : {},
       datasources                   : {},
       window_title_prefix           : 'Grafana - ',
       window_title_prefix           : 'Grafana - ',
-      panels                        : ['graph', 'text'],
+      panels                        : ['graph', 'text', 'stats'],
       plugins                       : {},
       plugins                       : {},
       default_route                 : '/dashboard/file/default.json',
       default_route                 : '/dashboard/file/default.json',
       playlist_timespan             : "1m",
       playlist_timespan             : "1m",

src/app/directives/panelMenu.js

@@ -122,6 +122,11 @@ function (angular, $, _) {
             dismiss(2500);
             dismiss(2500);
           };
           };
 
 
+          if ($scope.panelMeta.titlePos) {
+            elem.css('text-align', 'left');
+            $link.css('padding-left', '10px');
+          }
+
           elem.click(showMenu);
           elem.click(showMenu);
           $compile(elem.contents())($scope);
           $compile(elem.contents())($scope);
         }
         }

src/app/panels/graph/module.html

-<div  ng-controller='GraphCtrl'>
+<div ng-controller='GraphCtrl'>
 
 
   <div class="graph-wrapper" ng-class="{'graph-legend-rightside': panel.legend.rightSide}">
   <div class="graph-wrapper" ng-class="{'graph-legend-rightside': panel.legend.rightSide}">
       <div class="graph-canvas-wrapper">
       <div class="graph-canvas-wrapper">

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) {
   module.controller('GraphCtrl', function($scope, $rootScope, panelSrv, annotationsSrv, timeSrv) {
 
 
     $scope.panelMeta = {
     $scope.panelMeta = {
-      modals : [],
       editorTabs: [],
       editorTabs: [],
       fullEditorTabs : [
       fullEditorTabs : [
         {
         {

src/app/panels/stats/module.html

+<div ng-controller='StatsCtrl'>
+
+	<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="clearfix"></div>
+
+	<div style="margin-top: 30px" ng-if="editMode">
+		<div class="dashboard-editor-header">
+			<div class="dashboard-editor-title">
+				<i class="icon icon-bar-chart"></i>
+			  Panel settings
+			</div>
+
+			<div ng-model="editor.index" bs-tabs>
+				<div ng-repeat="tab in editorTabs" data-title="{{tab}}">
+				</div>
+			</div>
+		</div>
+
+		<div class="dashboard-editor-body">
+			<div ng-repeat="tab in panelMeta.fullEditorTabs" ng-if="editorTabs[editor.index] == tab.title">
+				<div ng-include src="tab.src"></div>
+			</div>
+		</div>
+	</div>
+</div>

src/app/panels/stats/module.js

+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();
+  });
+});

src/app/panels/text/module.js

@@ -29,7 +29,7 @@ function (angular, app, _, require) {
     _.defaults($scope.panel, _d);
     _.defaults($scope.panel, _d);
 
 
     $scope.init = function() {
     $scope.init = function() {
-      panelSrv.init(this);
+      panelSrv.init($scope);
       $scope.ready = false;
       $scope.ready = false;
       $scope.$on('refresh', $scope.render);
       $scope.$on('refresh', $scope.render);
       $scope.render();
       $scope.render();

src/css/less/grafana.less

@@ -6,6 +6,7 @@
 @import "search.less";
 @import "search.less";
 @import "panel.less";
 @import "panel.less";
 @import "forms.less";
 @import "forms.less";
+@import "stats-panel.less";
 
 
 .row-control-inner {
 .row-control-inner {
   padding:0px;
   padding:0px;

src/css/less/stats-panel.less

+.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;
+  }
+}
+
+