feat(tablepanel): minor progress on table panel

public/app/panels/table/module.html

-<grafana-panel>
-	<div class="table-panel-container">
-	</div>
-</grafana-panel>
+<div class="table-panel-wrapper">
+	<grafana-panel>
+		<div class="table-panel-container">
+		</div>
+	</grafana-panel>
+</div>

public/app/panels/table/module.ts

@@ -6,6 +6,7 @@ import _ = require('lodash');
 import moment = require('moment');
 import PanelMeta = require('app/features/panel/panel_meta');
 import TimeSeries = require('app/core/time_series');
+import {TableModel} from './table_model';
 
 var panelDefaults = {
   targets: [{}],
@@ -29,54 +30,19 @@ export class TablePanelCtrl {
     _.defaults($scope.panel, panelDefaults);
 
     $scope.refreshData = function(datasource) {
-      var data = {
-        columns: [],
-        rows: [],
-      };
-
-      data.columns.push({text: 'Time'});
-      data.columns.push({text: 'Value'});
-      data.columns.push({text: 'Value2'});
-      data.rows.push([
-        moment().format('LLL'), 17.2, 15.12
-      ]);
-      data.rows.push([
-        moment().format('LLL'), 12.2, 122.3244
-      ]);
-      data.rows.push([
-        moment().format('LLL'), 111.2, 2312.22
-      ]);
-
-      panelHelper.broadcastRender($scope, data);
-
-      // panelHelper.updateTimeRange($scope);
-      //
-      // return panelHelper.issueMetricQuery($scope, datasource)
-      //   .then($scope.dataHandler, function(err) {
-      //     $scope.seriesList = [];
-      //     $scope.render([]);
-      //     throw err;
-      //   });
+      panelHelper.updateTimeRange($scope);
+
+      return panelHelper.issueMetricQuery($scope, datasource)
+        .then($scope.dataHandler, function(err) {
+          $scope.seriesList = [];
+          $scope.render([]);
+          throw err;
+        });
     };
 
     $scope.dataHandler = function(results) {
-      $scope.seriesList = _.map(results.data, $scope.seriesHandler);
-      panelHelper.broadcastRender($scope, $scope.seriesList);
-    };
-
-    $scope.seriesHandler = function(seriesData, index) {
-      var datapoints = seriesData.datapoints;
-      var alias = seriesData.target;
-      var colorIndex = index % $rootScope.colors.length;
-      var color = $scope.panel.aliasColors[alias] || $rootScope.colors[colorIndex];
-
-      var series = new TimeSeries({
-        datapoints: datapoints,
-        alias: alias,
-        color: color,
-      });
-
-      return series;
+      $scope.tableModel = TableModel.transform(results.data, $scope.panel);
+      panelHelper.broadcastRender($scope, $scope.tableModel);
     };
 
     panelSrv.init($scope);
@@ -94,13 +60,13 @@ export function tablePanelDirective() {
 
       function renderPanel() {
         var rootDiv = elem.find('.table-panel-container');
-        var tableDiv = $('<table class="table-panel"></table>');
+        var tableDiv = $('<table class="gf-table-panel"></table>');
         var i, y, rowElem, colElem, column, row;
 
         rowElem = $('<tr></tr>');
         for (i = 0; i < data.columns.length; i++) {
           column = data.columns[i];
-          colElem = $('<td>' + column.text + '</td>');
+          colElem = $('<th>' + column.text + '</th>');
           rowElem.append(colElem);
         }
 
@@ -108,7 +74,7 @@ export function tablePanelDirective() {
 
         for (y = 0; y < data.rows.length; y++) {
           row = data.rows[y];
-          rowElem = $('<tr></tr>')
+          rowElem = $('<tr></tr>');
           for (i = 0; i < data.columns.length; i++) {
             colElem = $('<td>' + row[i] + '</td>');
             rowElem.append(colElem);

public/app/panels/table/specs/table_model_specs.ts

+import {describe, beforeEach, it, sinon, expect} from 'test/lib/common';
+
+import {TableModel} from '../table_model';
+
+describe('when getting tableData', () => {
+
+  describe('simple time series', () => {
+    var panel = {
+    };
+
+    it ('should return 2 columns', () => {
+      var data = TableModel.transform([
+        {
+          target: 'test',
+          datapoints: [[12.12, new Date().getTime()]],
+        }
+      ], panel);
+
+      expect(data.columns.length).to.be(2);
+      expect(data.rows.length).to.be(1);
+
+      expect(data.columns[0].text).to.be('Time');
+      expect(data.columns[1].text).to.be('Value');
+    });
+
+  });
+
+});

public/app/panels/table/table_model.ts

+///<reference path="../../headers/common.d.ts" />
+
+import moment = require('moment');
+import _ = require('lodash');
+
+export class TableModel {
+  columns: any[];
+  rows: any[];
+
+  static transform(data, panel) {
+    var model = new TableModel();
+
+    if (!data || data.length === 0) {
+      return model;
+    }
+
+    model.columns = [
+      {text: 'Time'},
+      {text: 'Value'},
+    ];
+    model.rows = [];
+
+    for (var i = 0; i < data.length; i++) {
+      var series = data[i];
+      for (var y = 0; y < series.datapoints.length; y++) {
+        var dp = series.datapoints[y];
+        var time = moment(dp[1]).format('LLL');
+        var value = dp[0];
+        if (value === null) {
+          value = 'null';
+        } else if (_.isNumber(value)) {
+          value = value.toFixed(2);
+        }
+
+        model.rows.push([time, value]);
+      }
+    }
+
+    return model;
+  }
+}
+
+

public/less/grafana.less

 @import "type.less";
 @import "login.less";
 @import "submenu.less";
-@import "graph.less";
+@import "panel_graph.less";
+@import "panel_dashlist.less";
+@import "panel_singlestat.less";
+@import "panel_table.less";
 @import "bootstrap-tagsinput.less";
 @import "tables_lists.less";
 @import "search.less";
 @import "panel.less";
 @import "forms.less";
-@import "singlestat.less";
 @import "tightform.less";
 @import "sidemenu.less";
 @import "navbar.less";
 @import "gfbox.less";
-@import "dashlist.less";
 @import "admin.less";
 @import "validation.less";
 @import "fonts.less";

public/less/panel_table.less

+.table-panel-wrapper {
+  .panel-content {
+    padding: 0;
+  }
+  .panel-title-container {
+    padding-bottom: 4px;
+  }
+}
+
+.gf-table-panel* {
+  box-sizing: border-box;
+}
+
+.gf-table-panel {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+
+.gf-table-panel tr {
+  border-bottom: 2px solid @bodyBackground;
+}
+
+.gf-table-panel th {
+  background: @grafanaTargetFuncBackground;
+  padding: 5px 0 5px 15px;
+  text-align: left;
+  border-top: 2px solid @bodyBackground;
+
+  &:first-child {
+    padding-left: 15px;
+  }
+}
+
+.gf-table-panel td {
+  padding: 15px 0 15px 15px;
+
+  &:first-child {
+    padding-left: 15px;
+  }
+}
+
+.gf-table-panel .ellipsis {
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}