feat(tablepanel): began refactorin out table row html generation to write unit tests for it

public/app/panels/table/editor.html

@@ -60,10 +60,13 @@
 	<div class="tight-form-container">
 		<div ng-repeat="column in panel.columns">
 			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item">
+				<ul class="tight-form-list pull-right">
+					<li class="tight-form-item last">
 						<i class="fa fa-remove pointer" ng-click="removeColumnStyle(column)"></i>
 					</li>
+				</ul>
+
+				<ul class="tight-form-list">
 					<li class="tight-form-item">
 						Name or regex
 					</li>
@@ -86,9 +89,6 @@
 			</div>
 			<div class="tight-form" ng-if="column.type === 'date'">
 				<ul class="tight-form-list">
-					<li class="tight-form-item">
-						<i class="fa fa-remove pointer invisible"></i>
-					</li>
 					<li class="tight-form-item text-right" style="width: 93px">
 						Format
 					</li>
@@ -100,9 +100,6 @@
 			</div>
 			<div class="tight-form" ng-if="column.type === 'number'">
 				<ul class="tight-form-list">
-					<li class="tight-form-item">
-						<i class="fa fa-remove pointer invisible"></i>
-					</li>
 					<li class="tight-form-item text-right" style="width: 93px">
 						Coloring
 					</li>
@@ -136,9 +133,6 @@
 			</div>
 			<div class="tight-form" ng-if="column.type === 'number'">
 				<ul class="tight-form-list">
-					<li class="tight-form-item">
-						<i class="fa fa-remove pointer invisible"></i>
-					</li>
 					<li class="tight-form-item text-right" style="width: 93px">
 						Unit
 					</li>

public/app/panels/table/editor.ts

@@ -63,10 +63,12 @@ export function tablePanelEditor() {
 
       scope.addJsonField = function(menuItem) {
         scope.panel.fields.push({name: menuItem.text});
+        scope.render();
       };
 
       scope.removeJsonField = function(field) {
         scope.panel.fields = _.without(scope.panel.fields, field);
+        scope.render();
       };
 
       scope.setUnitFormat = function(column, subItem) {

public/app/panels/table/module.ts

@@ -29,19 +29,6 @@ export function tablePanel() {
         return (panelHeight - 40) + 'px';
       }
 
-      function appendTableHeader(tableElem) {
-        var rowElem = $('<tr></tr>');
-        for (var i = 0; i < data.columns.length; i++) {
-          var column = data.columns[i];
-          var colElem = $('<th>' + column.text + '</th>');
-          rowElem.append(colElem);
-        }
-
-        var headElem = $('<thead></thead>');
-        headElem.append(rowElem);
-        headElem.appendTo(tableElem);
-      }
-
       function createColumnFormater(style) {
         return function(v) {
           if (v === null || v === void 0) {
@@ -50,12 +37,23 @@ export function tablePanel() {
           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(',&nbsp;');
+          }
+
+          return v;
         };
       }
 

public/app/panels/table/renderer.ts

+
+export class TableRenderer {
+  constructor(private panel, private table) {
+  }
+
+  formatColumnValue(columnIndex, value) {
+    return "value";
+  }
+
+  renderCell(columnIndex, value) {
+    var colValue = this.formatColumnValue(columnIndex, value);
+    return '<td>' + colValue + '</td>';
+  }
+
+  render(page) {
+    let endPos = Math.min(this.panel.pageSize, this.table.rows.length);
+    let startPos = 0;
+    var html = "";
+
+    for (var y = startPos; y < endPos; y++) {
+      let row = this.table.rows[y];
+      html += '<tr>';
+      for (var i = 0; i < this.table.columns.length; i++) {
+        html += this.renderCell(i, row[i]);
+      }
+      html += '</tr>';
+    }
+
+    return html;
+  }
+}

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

+import {describe, beforeEach, it, sinon, expect} from 'test/lib/common';
+
+import {TableModel} from '../table_model';
+import {TableRenderer} from '../renderer';
+
+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
+    };
+
+    it('render should return html', () => {
+      var html = new TableRenderer(panel, table).render(0);
+      expect(html).to.be('<tr><td>value</td></tr>');
+    });
+
+  });
+});
+
+

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

@@ -96,7 +96,7 @@ describe('when transforming time series table', () => {
       });
 
       it ('should return 2 rows', () => {
-        expect(table.rows.length).to.be(2);
+        expect(table.rows.length).to.be(1);
         expect(table.rows[0][0]).to.be('time');
         expect(table.rows[0][1]).to.be('message');
       });

public/app/panels/table/transformers.ts

@@ -91,7 +91,7 @@ transformers['json'] = {
         }
 
         if (values.length === 0) {
-          values.push([JSON.stringify(dp)]);
+          values.push(JSON.stringify(dp));
         }
         model.rows.push(values);
       }