feat(tablepanel) more refactoring

public/app/panels/table/module.ts

@@ -7,6 +7,7 @@ import kbn = require('app/core/utils/kbn');
 import moment = require('moment');
 
 import {TablePanelCtrl} from './controller';
+import {TableRenderer} from './renderer';
 import {tablePanelEditor} from './editor';
 
 export function tablePanel() {
@@ -29,76 +30,10 @@ export function tablePanel() {
         return (panelHeight - 40) + 'px';
       }
 
-      function createColumnFormater(style) {
-        return function(v) {
-          if (v === null || v === void 0) {
-            return '-';
-          }
-          if (_.isString(v) || !style) {
-            return v;
-          }
-
-          if (style.type === 'date') {
-            if (_.isArray(v)) { v = v[0]; }
-            var date = moment(v);
-            return date.format(style.dateFormat);
-          }
-
-          if (_.isNumber(v) && style.type === 'number') {
-            let valueFormater = kbn.valueFormats[style.unit];
-            return valueFormater(v, style.decimals);
-          }
-
-          if (_.isArray(v)) {
-            v = v.join(', ');
-          }
-
-          return v;
-        };
-      }
-
-      function formatColumnValue(colIndex, value) {
-        if (formaters[colIndex]) {
-          return formaters[colIndex](value);
-        }
-
-        for (let i = 0; i < panel.columns.length; i++) {
-          let style = panel.columns[i];
-          let column = data.columns[colIndex];
-          var regex = kbn.stringToJsRegex(style.pattern);
-          if (column.text.match(regex)) {
-            formaters[colIndex] = createColumnFormater(style);
-            return formaters[colIndex](value);
-          }
-        }
-
-        formaters[colIndex] = function(v) {
-          return v;
-        };
-
-        return formaters[colIndex](value);
-      }
-
       function appendTableRows(tbodyElem) {
-        let rowElements = $(document.createDocumentFragment());
-        let rowEnd = Math.min(panel.pageSize, data.rows.length);
-        let rowStart = 0;
-        // reset formater cache
-        formaters = [];
-
-        for (var y = rowStart; y < rowEnd; y++) {
-          let row = data.rows[y];
-          let rowElem = $('<tr></tr>');
-          for (var i = 0; i < data.columns.length; i++) {
-            var colValue = formatColumnValue(i, row[i]);
-            let colElem = $('<td> ' + colValue +  '</td>');
-            rowElem.append(colElem);
-          }
-          rowElements.append(rowElem);
-        }
-
+        var renderer = new TableRenderer(panel, data, scope.dashboard.timezone);
         tbodyElem.empty();
-        tbodyElem.append(rowElements);
+        tbodyElem.html(renderer.render(0));
       }
 
       function appendPaginationControls(footerElem) {

public/app/panels/table/renderer.ts

+///<reference path="../../headers/common.d.ts" />
+
+import _ = require('lodash');
+import kbn = require('app/core/utils/kbn');
+import moment = require('moment');
 
 export class TableRenderer {
-  constructor(private panel, private table) {
+  formaters: any[];
+
+  constructor(private panel, private table, private timezone) {
+    this.formaters = [];
   }
 
-  formatColumnValue(columnIndex, value) {
-    return "value";
+  createColumnFormater(style) {
+    return (v) => {
+      if (v === null || v === void 0) {
+        return '-';
+      }
+      if (_.isString(v) || !style) {
+        return v;
+      }
+
+      if (style.type === 'date') {
+        if (_.isArray(v)) { v = v[0]; }
+        var date = moment(v);
+        if (this.timezone === 'utc') {
+          date = date.utc();
+        }
+        return date.format(style.dateFormat);
+      }
+
+      if (_.isNumber(v) && style.type === 'number') {
+        let valueFormater = kbn.valueFormats[style.unit];
+        return valueFormater(v, style.decimals);
+      }
+
+      if (_.isArray(v)) {
+        v = v.join(',&nbsp;');
+      }
+
+      return v;
+    };
+  }
+
+  formatColumnValue(colIndex, value) {
+    if (this.formaters[colIndex]) {
+      return this.formaters[colIndex](value);
+    }
+
+    for (let i = 0; i < this.panel.columns.length; i++) {
+      let style = this.panel.columns[i];
+      let column = this.table.columns[colIndex];
+      var regex = kbn.stringToJsRegex(style.pattern);
+      if (column.text.match(regex)) {
+        this.formaters[colIndex] = this.createColumnFormater(style);
+        return this.formaters[colIndex](value);
+      }
+    }
+
+    this.formaters[colIndex] = function(v) {
+      return v;
+    };
+
+    return this.formaters[colIndex](value);
   }
 
   renderCell(columnIndex, value) {

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

@@ -7,16 +7,23 @@ describe('when rendering table', () => {
   describe('given 2 columns', () => {
     var table = new TableModel();
     table.columns = [{text: 'Time'}, {text: 'Value'}];
-    table.rows.push([1446733230253, 12.4]);
-    table.rows.push([1446733231253, 10.4]);
 
     var panel = {
-      pageSize: 10
+      pageSize: 10,
+      columns: [
+        {
+          pattern: 'Time',
+          type: 'date',
+          format: 'LLL'
+        }
+      ]
     };
 
-    it('render should return html', () => {
-      var html = new TableRenderer(panel, table).render(0);
-      expect(html).to.be('<tr><td>value</td></tr>');
+    var renderer = new TableRenderer(panel, table, 'utc');
+
+    it('time column should be formated', () => {
+      var html = renderer.renderCell(0, 1388556366666);
+      expect(html).to.be('<td>2014-01-01T06:06:06+00:00</td>');
     });
 
   });

public/app/plugins/datasource/influxdb/partials/config.html

-
 <div ng-include="httpConfigPartialSrc"></div>
 <br>