diff --git a/public/app/panels/table/module.ts b/public/app/panels/table/module.ts index 00610ca0e72..beb6273fd62 100644 --- a/public/app/panels/table/module.ts +++ b/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 = $(''); - for (var i = 0; i < data.columns.length; i++) { - var colValue = formatColumnValue(i, row[i]); - let colElem = $(' ' + colValue + ''); - 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) { diff --git a/public/app/panels/table/renderer.ts b/public/app/panels/table/renderer.ts index c3b09ee45da..8672629a23b 100644 --- a/public/app/panels/table/renderer.ts +++ b/public/app/panels/table/renderer.ts @@ -1,10 +1,67 @@ +/// + +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(', '); + } + + 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) { diff --git a/public/app/panels/table/specs/renderer_specs.ts b/public/app/panels/table/specs/renderer_specs.ts index c4c5ff5d3c3..8bf6dd308d0 100644 --- a/public/app/panels/table/specs/renderer_specs.ts +++ b/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('value'); + var renderer = new TableRenderer(panel, table, 'utc'); + + it('time column should be formated', () => { + var html = renderer.renderCell(0, 1388556366666); + expect(html).to.be('2014-01-01T06:06:06+00:00'); }); }); diff --git a/public/app/plugins/datasource/influxdb/partials/config.html b/public/app/plugins/datasource/influxdb/partials/config.html index 66c39fe7b69..4d51a33e6b2 100644 --- a/public/app/plugins/datasource/influxdb/partials/config.html +++ b/public/app/plugins/datasource/influxdb/partials/config.html @@ -1,4 +1,3 @@ -