StatsPanel: more work on stats panel

src/app/panels/stats/module.html

@@ -1,31 +1,32 @@
 <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,0 +1,27 @@
+<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;