diff --git a/public/app/panels/table/controller.ts b/public/app/panels/table/controller.ts index 4cca50ff337..bd7c0acc140 100644 --- a/public/app/panels/table/controller.ts +++ b/public/app/panels/table/controller.ts @@ -28,11 +28,26 @@ export class TablePanelCtrl { transform: 'timeseries_to_rows', pageSize: 50, showHeader: true, - columns: [], + columns: [ + { + type: 'date', + pattern: 'Time', + dateFormat: 'YYYY-MM-DD HH:mm:ss', + }, + { + unit: 'short', + type: 'number', + decimals: 2, + colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], + colorMode: null, + pattern: '/.*/', + thresholds: [], + } + ], fields: [], scroll: true, fontSize: '100%', - sort: {col: null, desc: true}, + sort: {col: 0, desc: true}, }; $scope.init = function() { diff --git a/public/app/panels/table/editor.html b/public/app/panels/table/editor.html index 64bc0c997e5..a1cc25b52fc 100644 --- a/public/app/panels/table/editor.html +++ b/public/app/panels/table/editor.html @@ -11,7 +11,7 @@ + ng-change="transformChanged()">
@@ -131,9 +131,6 @@ -
  • - invert order -
  • diff --git a/public/app/panels/table/editor.ts b/public/app/panels/table/editor.ts index 06fbea3167f..e2f07cf8bd2 100644 --- a/public/app/panels/table/editor.ts +++ b/public/app/panels/table/editor.ts @@ -73,6 +73,10 @@ export function tablePanelEditor() { scope.render(); }; + scope.transformChanged = function() { + scope.render(); + }; + scope.removeJsonField = function(field) { scope.panel.fields = _.without(scope.panel.fields, field); scope.render(); diff --git a/public/app/panels/table/module.ts b/public/app/panels/table/module.ts index beb62127c2d..f09a7389a59 100644 --- a/public/app/panels/table/module.ts +++ b/public/app/panels/table/module.ts @@ -55,8 +55,8 @@ export function tablePanel() { var paginationList = $(''); - var prevLink = $('
  • «
  • '); - paginationList.append(prevLink); + // var prevLink = $('
  • «
  • '); + // paginationList.append(prevLink); for (var i = startPage; i < endPage; i++) { var activeClass = i === scope.pageIndex ? 'active' : ''; @@ -64,8 +64,8 @@ export function tablePanel() { paginationList.append(pageLinkElem); } - var nextLink = $('
  • »
  • '); - paginationList.append(nextLink); + // var nextLink = $('
  • »
  • '); + // paginationList.append(nextLink); footerElem.append(paginationList); } diff --git a/public/app/panels/table/renderer.ts b/public/app/panels/table/renderer.ts index dd5eb9ed0e1..983852111c8 100644 --- a/public/app/panels/table/renderer.ts +++ b/public/app/panels/table/renderer.ts @@ -95,7 +95,7 @@ export class TableRenderer { return this.formaters[colIndex](value); } - renderCell(columnIndex, value) { + renderCell(columnIndex, value, addWidthHack = false) { var value = this.formatColumnValue(columnIndex, value); var style = ''; if (this.colorState.cell) { @@ -107,7 +107,15 @@ export class TableRenderer { this.colorState.value = null; } - return '' + value + ''; + // because of the fixed table headers css only solution + // there is an issue if header cell is wider the cell + // this hack adds header content to cell (not visible) + var widthHack = ''; + if (addWidthHack) { + widthHack = '
    ' + this.table.columns[columnIndex].text + '
    '; + } + + return '' + value + widthHack + ''; } render(page) { @@ -117,11 +125,18 @@ export class TableRenderer { for (var y = startPos; y < endPos; y++) { let row = this.table.rows[y]; - html += ''; + let cellHtml = ''; + let rowStyle = ''; for (var i = 0; i < this.table.columns.length; i++) { - html += this.renderCell(i, row[i]); + cellHtml += this.renderCell(i, row[i], y === 0); } - html += ''; + + if (this.colorState.row) { + rowStyle = ' style="background-color:' + this.colorState.row + ';color: white"'; + this.colorState.row = null; + } + + html += '' + cellHtml + ''; } return html; diff --git a/public/app/panels/table/table_model.ts b/public/app/panels/table/table_model.ts index c881dd82d8f..1fa4007e6e3 100644 --- a/public/app/panels/table/table_model.ts +++ b/public/app/panels/table/table_model.ts @@ -10,7 +10,7 @@ export class TableModel { } sort(options) { - if (options.col === null || this.columns.length < options.col) { + if (options.col === null || this.columns.length <= options.col) { return; } diff --git a/public/less/panel_table.less b/public/less/panel_table.less index 23a17cd0976..51b7449c7a8 100644 --- a/public/less/panel_table.less +++ b/public/less/panel_table.less @@ -12,7 +12,7 @@ } .table-panel-container { - padding-top: 2em; + padding-top: 2.2em; position: relative; } @@ -94,3 +94,8 @@ top: 0; } +.table-panel-width-hack { + visibility: hidden; + height: 0px; + line-height: 0px; +}