mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
refactor and add column alias tests
This commit is contained in:
parent
2361e2ddd9
commit
29653d2bec
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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++) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.renderer = new TableRenderer(this.panel, this.table, this.dashboard.isTimezoneUtc(), this.$sanitize);
|
||||
|
||||
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(renderer.render_values());
|
||||
FileExport.exportTableDataToCsv(this.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) {
|
||||
|
@ -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]) {
|
||||
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);
|
||||
return this.formatters[colIndex] ? this.formatters[colIndex](value) : 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) {
|
||||
|
@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user