From b1691f1cd13ccf93bc36199c52fe018c7316ace0 Mon Sep 17 00:00:00 2001 From: Dan Cech Date: Thu, 27 Apr 2017 15:23:49 -0400 Subject: [PATCH] add support for column aliases in table panel --- public/app/plugins/panel/table/editor.html | 102 ++++++++++++--------- public/app/plugins/panel/table/editor.ts | 1 + public/app/plugins/panel/table/module.html | 2 +- public/app/plugins/panel/table/module.ts | 21 +++++ public/app/plugins/panel/table/renderer.ts | 56 ++++++----- 5 files changed, 114 insertions(+), 68 deletions(-) diff --git a/public/app/plugins/panel/table/editor.html b/public/app/plugins/panel/table/editor.html index 448669ca6a9..561645b7118 100644 --- a/public/app/plugins/panel/table/editor.html +++ b/public/app/plugins/panel/table/editor.html @@ -67,20 +67,38 @@ -
- - +
+ +
-
- + +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+ +
+
@@ -94,41 +112,41 @@
-
+
- -
- -
-
-
-
-
- + +
+ +
+ +
+
+
+ -
-
- - -
-
- - - - - - - - - - -
-
-
- Invert -
-
-
+
+
+ + +
+
+ + + + + + + + + + +
+
+
+ Invert +
+
+
diff --git a/public/app/plugins/panel/table/editor.ts b/public/app/plugins/panel/table/editor.ts index 6b803cc0444..9f36c88c986 100644 --- a/public/app/plugins/panel/table/editor.ts +++ b/public/app/plugins/panel/table/editor.ts @@ -107,6 +107,7 @@ export class TablePanelEditorCtrl { var columnStyleDefaults = { unit: 'short', type: 'number', + alias: '', decimals: 2, colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], colorMode: null, diff --git a/public/app/plugins/panel/table/module.html b/public/app/plugins/panel/table/module.html index e405c6c42e3..226fe095ca3 100644 --- a/public/app/plugins/panel/table/module.html +++ b/public/app/plugins/panel/table/module.html @@ -7,7 +7,7 @@
- {{col.text}} + {{col.title || col.text}} diff --git a/public/app/plugins/panel/table/module.ts b/public/app/plugins/panel/table/module.ts index bf872b47d27..155934dc85e 100644 --- a/public/app/plugins/panel/table/module.ts +++ b/public/app/plugins/panel/table/module.ts @@ -9,6 +9,7 @@ import {MetricsPanelCtrl} from 'app/plugins/sdk'; import {transformDataToTable} from './transformers'; import {tablePanelEditor} from './editor'; import {TableRenderer} from './renderer'; +import kbn from 'app/core/utils/kbn'; class TablePanelCtrl extends MetricsPanelCtrl { static templateUrl = 'module.html'; @@ -26,11 +27,13 @@ class TablePanelCtrl extends MetricsPanelCtrl { { type: 'date', pattern: 'Time', + alias: 'Time', dateFormat: 'YYYY-MM-DD HH:mm:ss', }, { unit: 'short', type: 'number', + alias: '', decimals: 2, colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], colorMode: null, @@ -118,6 +121,24 @@ class TablePanelCtrl extends MetricsPanelCtrl { render() { this.table = transformDataToTable(this.dataRaw, this.panel); this.table.sort(this.panel.sort); + + for (let colIndex = 0; colIndex < this.table.columns.length; colIndex++) { + 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); } diff --git a/public/app/plugins/panel/table/renderer.ts b/public/app/plugins/panel/table/renderer.ts index 2f5a51ab111..f51af0a0de4 100644 --- a/public/app/plugins/panel/table/renderer.ts +++ b/public/app/plugins/panel/table/renderer.ts @@ -24,7 +24,7 @@ export class TableRenderer { return _.first(style.colors); } - defaultCellFormater(v, style) { + defaultCellFormatter(v, style) { if (v === null || v === void 0 || v === undefined) { return ''; } @@ -40,18 +40,18 @@ export class TableRenderer { } } - createColumnFormater(style, column) { - if (!style) { - return this.defaultCellFormater; + createColumnFormatter(column) { + if (!column.style) { + return this.defaultCellFormatter; } - if (style.type === 'hidden') { + if (column.style.type === 'hidden') { return v => { return undefined; }; } - if (style.type === 'date') { + if (column.style.type === 'date') { return v => { if (v === undefined || v === null) { return '-'; @@ -62,12 +62,12 @@ export class TableRenderer { if (this.isUtc) { date = date.utc(); } - return date.format(style.dateFormat); + return date.format(column.style.dateFormat); }; } - if (style.type === 'number') { - let valueFormater = kbn.valueFormats[column.unit || style.unit]; + if (column.style.type === 'number') { + let valueFormatter = kbn.valueFormats[column.unit || column.style.unit]; return v => { if (v === null || v === void 0) { @@ -75,38 +75,44 @@ export class TableRenderer { } if (_.isString(v)) { - return this.defaultCellFormater(v, style); + return this.defaultCellFormatter(v, column.style); } - if (style.colorMode) { - this.colorState[style.colorMode] = this.getColorForValue(v, style); + if (column.style.colorMode) { + this.colorState[column.style.colorMode] = this.getColorForValue(v, column.style); } - return valueFormater(v, style.decimals, null); + return valueFormatter(v, column.style.decimals, null); }; } return (value) => { - return this.defaultCellFormater(value, style); + return this.defaultCellFormatter(value, column.style); }; } formatColumnValue(colIndex, value) { - if (this.formaters[colIndex]) { - return this.formaters[colIndex](value); - } - - for (let i = 0; i < this.panel.styles.length; i++) { - let style = this.panel.styles[i]; + if (!this.formaters[colIndex]) { let column = this.table.columns[colIndex]; - var regex = kbn.stringToJsRegex(style.pattern); - if (column.text.match(regex)) { - this.formaters[colIndex] = this.createColumnFormater(style, column); - return this.formaters[colIndex](value); + + 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); } - this.formaters[colIndex] = this.defaultCellFormater; return this.formaters[colIndex](value); }