refactor and add column alias tests

public/app/core/utils/file_export.ts

@@ -53,7 +53,7 @@ export function exportTableDataToCsv(table) {
     var text = 'sep=;\n';
     // add header
     _.each(table.columns, function(column) {
-        text += column.text + ';';
+        text += (column.title || column.text) + ';';
     });
     text += '\n';
     // process data

public/app/plugins/panel/table/module.html

@@ -7,7 +7,7 @@
 				<tr>
 					<th ng-repeat="col in ctrl.table.columns" ng-hide="col.hidden">
 						<div class="table-panel-table-header-inner pointer" ng-click="ctrl.toggleColumnSort(col, $index)">
-							{{col.title || col.text}}
+							{{col.title}}
 							<span class="table-panel-table-header-controls" ng-if="col.sort">
 								<i class="fa fa-caret-down" ng-show="col.desc"></i>
 								<i class="fa fa-caret-up" ng-hide="col.desc"></i>

public/app/plugins/panel/table/module.ts

@@ -17,6 +17,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
   pageIndex: number;
   dataRaw: any;
   table: any;
+  renderer: any;
 
   panelDefaults = {
     targets: [{}],
@@ -122,22 +123,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
     this.table = transformDataToTable(this.dataRaw, this.panel);
     this.table.sort(this.panel.sort);
 
-    for (let colIndex = 0; colIndex < this.table.columns.length; colIndex++) {
+    this.renderer = new TableRenderer(this.panel, this.table, this.dashboard.isTimezoneUtc(), this.$sanitize);
-      let column = this.table.columns[colIndex];
-
-      for (let i = 0; i < this.panel.styles.length; i++) {
-        let style = this.panel.styles[i];
-        var regex = kbn.stringToJsRegex(style.pattern);
-        const matches = column.text.match(regex);
-        if (matches) {
-          column.style = style;
-          if (style.alias) {
-            column.title = column.text.replace(regex, style.alias);
-          }
-          break;
-        }
-      }
-    }
 
     return super.render(this.table);
   }
@@ -162,8 +148,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
   }
 
   exportCsv() {
-    var renderer = new TableRenderer(this.panel, this.table, this.dashboard.isTimezoneUtc(), this.$sanitize);
+    FileExport.exportTableDataToCsv(this.renderer.render_values());
-    FileExport.exportTableDataToCsv(renderer.render_values());
   }
 
   link(scope, elem, attrs, ctrl) {
@@ -183,9 +168,9 @@ class TablePanelCtrl extends MetricsPanelCtrl {
     }
 
     function appendTableRows(tbodyElem) {
-      var renderer = new TableRenderer(panel, data, ctrl.dashboard.isTimezoneUtc(), ctrl.$sanitize);
+      ctrl.renderer.setTable(data);
       tbodyElem.empty();
-      tbodyElem.html(renderer.render(ctrl.pageIndex));
+      tbodyElem.html(ctrl.renderer.render(ctrl.pageIndex));
     }
 
     function switchPage(e) {

public/app/plugins/panel/table/renderer.ts

@@ -5,12 +5,44 @@ import moment from 'moment';
 import kbn from 'app/core/utils/kbn';
 
 export class TableRenderer {
-  formaters: any[];
+  formatters: any[];
   colorState: any;
 
   constructor(private panel, private table, private isUtc, private sanitize) {
-    this.formaters = [];
+    this.initColumns();
+  }
+
+  setTable(table) {
+    this.table = table;
+
+    this.initColumns();
+  }
+
+  initColumns() {
+    this.formatters = [];
     this.colorState = {};
+
+    for (let colIndex = 0; colIndex < this.table.columns.length; colIndex++) {
+      let column = this.table.columns[colIndex];
+      column.title = column.text;
+
+      for (let i = 0; i < this.panel.styles.length; i++) {
+        let style = this.panel.styles[i];
+
+        var regex = kbn.stringToJsRegex(style.pattern);
+        if (column.text.match(regex)) {
+          column.style = style;
+
+          if (style.alias) {
+            column.title = column.text.replace(regex, style.alias);
+          }
+
+          break;
+        }
+      }
+
+      this.formatters[colIndex] = this.createColumnFormatter(column);
+    }
   }
 
   getColorForValue(value, style) {
@@ -92,28 +124,7 @@ export class TableRenderer {
   }
 
   formatColumnValue(colIndex, value) {
-    if (!this.formaters[colIndex]) {
+    return this.formatters[colIndex] ? this.formatters[colIndex](value) : value;
-      let column = this.table.columns[colIndex];
-
-      if (!column.style) {
-        for (let i = 0; i < this.panel.styles.length; i++) {
-          let style = this.panel.styles[i];
-          var regex = kbn.stringToJsRegex(style.pattern);
-          const matches = column.text.match(regex);
-          if (matches) {
-            column.style = style;
-            if (style.alias) {
-              column.title = column.text.replace(regex, style.alias);
-            }
-            break;
-          }
-        }
-      }
-
-      this.formaters[colIndex] = this.createColumnFormatter(column);
-    }
-
-    return this.formaters[colIndex](value);
   }
 
   renderCell(columnIndex, value, addWidthHack = false) {
@@ -132,7 +143,7 @@ export class TableRenderer {
     // this hack adds header content to cell (not visible)
     var widthHack = '';
     if (addWidthHack) {
-      widthHack = '<div class="table-panel-width-hack">' + this.table.columns[columnIndex].text + '</div>';
+      widthHack = '<div class="table-panel-width-hack">' + this.table.columns[columnIndex].title + '</div>';
     }
 
     if (value === undefined) {

public/app/plugins/panel/table/specs/renderer_specs.ts

@@ -22,13 +22,15 @@ describe('when rendering table', () => {
         {
           pattern: 'Time',
           type: 'date',
-          format: 'LLL'
+          format: 'LLL',
+          alias: 'Timestamp'
         },
         {
-          pattern: 'Value',
+          pattern: '/(Val)ue/',
           type: 'number',
           unit: 'ms',
           decimals: 3,
+          alias: '$1'
         },
         {
           pattern: 'Colored',
@@ -132,6 +134,18 @@ describe('when rendering table', () => {
       var html = renderer.renderCell(6, 'text <a href="http://google.com">link</a>');
       expect(html).to.be('<td>sanitized</td>');
     });
+
+    it('Time column title should be Timestamp', () => {
+      expect(table.columns[0].title).to.be('Timestamp');
+    });
+
+    it('Value column title should be Val', () => {
+      expect(table.columns[1].title).to.be('Val');
+    });
+
+    it('Colored column title should be Colored', () => {
+      expect(table.columns[2].title).to.be('Colored');
+    });
   });
 });
 

public/app/plugins/panel/table/transformers.ts

@@ -229,7 +229,7 @@ function transformDataToTable(data, panel) {
 
   var transformer = transformers[panel.transform];
   if (!transformer) {
-    throw {message: 'Transformer ' + panel.transformer + ' not found'};
+    throw {message: 'Transformer ' + panel.transform + ' not found'};
   }
 
   if (panel.filterNull) {
@@ -239,6 +239,7 @@ function transformDataToTable(data, panel) {
   }
 
   transformer.transform(copyData, panel, model);
+
   return model;
 }