mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(tablepanel): began refactorin out table row html generation to write unit tests for it
This commit is contained in:
parent
90cca93951
commit
1b83742e3e
@ -60,10 +60,13 @@
|
||||
<div class="tight-form-container">
|
||||
<div ng-repeat="column in panel.columns">
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item">
|
||||
<ul class="tight-form-list pull-right">
|
||||
<li class="tight-form-item last">
|
||||
<i class="fa fa-remove pointer" ng-click="removeColumnStyle(column)"></i>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item">
|
||||
Name or regex
|
||||
</li>
|
||||
@ -86,9 +89,6 @@
|
||||
</div>
|
||||
<div class="tight-form" ng-if="column.type === 'date'">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item">
|
||||
<i class="fa fa-remove pointer invisible"></i>
|
||||
</li>
|
||||
<li class="tight-form-item text-right" style="width: 93px">
|
||||
Format
|
||||
</li>
|
||||
@ -100,9 +100,6 @@
|
||||
</div>
|
||||
<div class="tight-form" ng-if="column.type === 'number'">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item">
|
||||
<i class="fa fa-remove pointer invisible"></i>
|
||||
</li>
|
||||
<li class="tight-form-item text-right" style="width: 93px">
|
||||
Coloring
|
||||
</li>
|
||||
@ -136,9 +133,6 @@
|
||||
</div>
|
||||
<div class="tight-form" ng-if="column.type === 'number'">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item">
|
||||
<i class="fa fa-remove pointer invisible"></i>
|
||||
</li>
|
||||
<li class="tight-form-item text-right" style="width: 93px">
|
||||
Unit
|
||||
</li>
|
||||
|
@ -63,10 +63,12 @@ export function tablePanelEditor() {
|
||||
|
||||
scope.addJsonField = function(menuItem) {
|
||||
scope.panel.fields.push({name: menuItem.text});
|
||||
scope.render();
|
||||
};
|
||||
|
||||
scope.removeJsonField = function(field) {
|
||||
scope.panel.fields = _.without(scope.panel.fields, field);
|
||||
scope.render();
|
||||
};
|
||||
|
||||
scope.setUnitFormat = function(column, subItem) {
|
||||
|
@ -29,19 +29,6 @@ export function tablePanel() {
|
||||
return (panelHeight - 40) + 'px';
|
||||
}
|
||||
|
||||
function appendTableHeader(tableElem) {
|
||||
var rowElem = $('<tr></tr>');
|
||||
for (var i = 0; i < data.columns.length; i++) {
|
||||
var column = data.columns[i];
|
||||
var colElem = $('<th>' + column.text + '</th>');
|
||||
rowElem.append(colElem);
|
||||
}
|
||||
|
||||
var headElem = $('<thead></thead>');
|
||||
headElem.append(rowElem);
|
||||
headElem.appendTo(tableElem);
|
||||
}
|
||||
|
||||
function createColumnFormater(style) {
|
||||
return function(v) {
|
||||
if (v === null || v === void 0) {
|
||||
@ -50,12 +37,23 @@ export function tablePanel() {
|
||||
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);
|
||||
}
|
||||
let valueFormater = kbn.valueFormats[style.unit];
|
||||
return valueFormater(v, style.decimals);
|
||||
|
||||
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;
|
||||
};
|
||||
}
|
||||
|
||||
|
31
public/app/panels/table/renderer.ts
Normal file
31
public/app/panels/table/renderer.ts
Normal file
@ -0,0 +1,31 @@
|
||||
|
||||
export class TableRenderer {
|
||||
constructor(private panel, private table) {
|
||||
}
|
||||
|
||||
formatColumnValue(columnIndex, value) {
|
||||
return "value";
|
||||
}
|
||||
|
||||
renderCell(columnIndex, value) {
|
||||
var colValue = this.formatColumnValue(columnIndex, value);
|
||||
return '<td>' + colValue + '</td>';
|
||||
}
|
||||
|
||||
render(page) {
|
||||
let endPos = Math.min(this.panel.pageSize, this.table.rows.length);
|
||||
let startPos = 0;
|
||||
var html = "";
|
||||
|
||||
for (var y = startPos; y < endPos; y++) {
|
||||
let row = this.table.rows[y];
|
||||
html += '<tr>';
|
||||
for (var i = 0; i < this.table.columns.length; i++) {
|
||||
html += this.renderCell(i, row[i]);
|
||||
}
|
||||
html += '</tr>';
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
}
|
25
public/app/panels/table/specs/renderer_specs.ts
Normal file
25
public/app/panels/table/specs/renderer_specs.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import {describe, beforeEach, it, sinon, expect} from 'test/lib/common';
|
||||
|
||||
import {TableModel} from '../table_model';
|
||||
import {TableRenderer} from '../renderer';
|
||||
|
||||
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
|
||||
};
|
||||
|
||||
it('render should return html', () => {
|
||||
var html = new TableRenderer(panel, table).render(0);
|
||||
expect(html).to.be('<tr><td>value</td></tr>');
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -96,7 +96,7 @@ describe('when transforming time series table', () => {
|
||||
});
|
||||
|
||||
it ('should return 2 rows', () => {
|
||||
expect(table.rows.length).to.be(2);
|
||||
expect(table.rows.length).to.be(1);
|
||||
expect(table.rows[0][0]).to.be('time');
|
||||
expect(table.rows[0][1]).to.be('message');
|
||||
});
|
||||
|
@ -91,7 +91,7 @@ transformers['json'] = {
|
||||
}
|
||||
|
||||
if (values.length === 0) {
|
||||
values.push([JSON.stringify(dp)]);
|
||||
values.push(JSON.stringify(dp));
|
||||
}
|
||||
model.rows.push(values);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user