Skip to content

N
nexpie-grafana-theme
Commit 00a479de by Torkel Ödegaard
Options

feat(tablepanel): renamed some table panel schema things

parent 32f9f8fc
Showing with 77 additions and 44 deletions
public/app/panels/table/controller.ts
...@@ -29,7 +29,7 @@ export class TablePanelCtrl { ...@@ -29,7 +29,7 @@ export class TablePanelCtrl {
transform: 'timeseries_to_rows', transform: 'timeseries_to_rows',
pageSize: 50, pageSize: 50,
showHeader: true, showHeader: true,
columns: [ styles: [
{ {
type: 'date', type: 'date',
pattern: 'Time', pattern: 'Time',
...@@ -45,13 +45,20 @@ export class TablePanelCtrl { ...@@ -45,13 +45,20 @@ export class TablePanelCtrl {
thresholds: [], thresholds: [],
} }
], ],
fields: [], columns: [],
scroll: true, scroll: true,
fontSize: '100%', fontSize: '100%',
sort: {col: 0, desc: true}, sort: {col: 0, desc: true},
}; };
$scope.init = function() { $scope.init = function() {
if ($scope.panel.styles === void 0) {
$scope.panel.styles = $scope.panel.columns;
$scope.panel.columns = $scope.panel.fields;
delete $scope.panel.columns;
delete $scope.panel.fields;
}
_.defaults($scope.panel, panelDefaults); _.defaults($scope.panel, panelDefaults);
panelSrv.init($scope); panelSrv.init($scope);
......
public/app/panels/table/editor.html
...@@ -19,15 +19,15 @@ ...@@ -19,15 +19,15 @@
<div class="tight-form" ng-if="panel.transform === 'json'"> <div class="tight-form" ng-if="panel.transform === 'json'">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 140px"> <li class="tight-form-item" style="width: 140px">
Fields Columns
</li> </li>
<li class="tight-form-item" ng-repeat="field in panel.fields"> <li class="tight-form-item" ng-repeat="column in panel.columns">
<i class="pointer fa fa-remove" ng-click="removeJsonField(field)"></i> <i class="pointer fa fa-remove" ng-click="removeColumn(column)"></i>
<span> <span>
{{field.name}} {{column.name}}
</span> </span>
</li> </li>
<li class="dropdown" dropdown-typeahead="jsonFieldsMenu" dropdown-typeahead-on-select="addJsonField($item, $subItem)"> <li class="dropdown" dropdown-typeahead="columnsMenu" dropdown-typeahead-on-select="addColumn($item, $subItem)">
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
...@@ -67,11 +67,11 @@ ...@@ -67,11 +67,11 @@
<h5>Column Styles</h5> <h5>Column Styles</h5>
<div class="tight-form-container"> <div class="tight-form-container">
<div ng-repeat="column in panel.columns"> <div ng-repeat="style in panel.styles">
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list pull-right"> <ul class="tight-form-list pull-right">
<li class="tight-form-item last"> <li class="tight-form-item last">
<i class="fa fa-remove pointer" ng-click="removeColumnStyle(column)"></i> <i class="fa fa-remove pointer" ng-click="removeColumnStyle(style)"></i>
</li> </li>
</ul> </ul>
...@@ -80,38 +80,38 @@ ...@@ -80,38 +80,38 @@
Name or regex Name or regex
</li> </li>
<li> <li>
<input type="text" ng-model="column.pattern" bs-typeahead="getColumnNames" ng-blur="render()" data-min-length=0 data-items=100 class="input-medium tight-form-input"> <input type="text" ng-model="style.pattern" bs-typeahead="getColumnNames" ng-blur="render()" data-min-length=0 data-items=100 class="input-medium tight-form-input">
</li> </li>
<li class="tight-form-item" style="width: 86px"> <li class="tight-form-item" style="width: 86px">
Type Type
</li> </li>
<li> <li>
<select class="input-small tight-form-input" <select class="input-small tight-form-input"
ng-model="column.type" ng-model="style.type"
ng-options="c.value as c.text for c in columnTypes" ng-options="c.value as c.text for c in columnTypes"
ng-change="render()" ng-change="render()"
style="width: 150px" style="width: 150px"
></select> ></select>
</li> </li>
</ul> </ul>
<ul class="tight-form-list" ng-if="column.type === 'date'"> <ul class="tight-form-list" ng-if="style.type === 'date'">
<li class="tight-form-item"> <li class="tight-form-item">
Format Format
</li> </li>
<li> <li>
<metric-segment-model property="column.dateFormat" options="dateFormats" on-change="render()" custom="true"></metric-segment-model> <metric-segment-model property="style.dateFormat" options="dateFormats" on-change="render()" custom="true"></metric-segment-model>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form" ng-if="column.type === 'number'"> <div class="tight-form" ng-if="style.type === 'number'">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item text-right" style="width: 93px"> <li class="tight-form-item text-right" style="width: 93px">
Coloring Coloring
</li> </li>
<li> <li>
<select class="input-small tight-form-input" <select class="input-small tight-form-input"
ng-model="column.colorMode" ng-model="style.colorMode"
ng-options="c.value as c.text for c in colorModes" ng-options="c.value as c.text for c in colorModes"
ng-change="render()" ng-change="render()"
style="width: 150px" style="width: 150px"
...@@ -121,34 +121,34 @@ ...@@ -121,34 +121,34 @@
Thresholds<tip>Comma seperated values</tip> Thresholds<tip>Comma seperated values</tip>
</li> </li>
<li> <li>
<input type="text" class="input-small tight-form-input" style="width: 150px" ng-model="column.thresholds" ng-blur="render()" placeholder="0,50,80" array-join></input> <input type="text" class="input-small tight-form-input" style="width: 150px" ng-model="style.thresholds" ng-blur="render()" placeholder="0,50,80" array-join></input>
</li> </li>
<li class="tight-form-item" style="width: 60px"> <li class="tight-form-item" style="width: 60px">
Colors Colors
</li> </li>
<li class="tight-form-item"> <li class="tight-form-item">
<spectrum-picker ng-model="column.colors[0]" ng-change="render()" ></spectrum-picker> <spectrum-picker ng-model="style.colors[0]" ng-change="render()" ></spectrum-picker>
<spectrum-picker ng-model="column.colors[1]" ng-change="render()" ></spectrum-picker> <spectrum-picker ng-model="style.colors[1]" ng-change="render()" ></spectrum-picker>
<spectrum-picker ng-model="column.colors[2]" ng-change="render()" ></spectrum-picker> <spectrum-picker ng-model="style.colors[2]" ng-change="render()" ></spectrum-picker>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form" ng-if="column.type === 'number'"> <div class="tight-form" ng-if="style.type === 'number'">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item text-right" style="width: 93px"> <li class="tight-form-item text-right" style="width: 93px">
Unit Unit
</li> </li>
<li class="dropdown" style="width: 150px" <li class="dropdown" style="width: 150px"
ng-model="column.unit" ng-model="style.unit"
dropdown-typeahead="unitFormats" dropdown-typeahead="unitFormats"
dropdown-typeahead-on-select="setUnitFormat(column, $subItem)"> dropdown-typeahead-on-select="setUnitFormat(style, $subItem)">
</li> </li>
<li class="tight-form-item" style="width: 86px"> <li class="tight-form-item" style="width: 86px">
Decimals Decimals
</li> </li>
<li style="width: 105px"> <li style="width: 105px">
<input type="number" class="input-mini tight-form-input" ng-model="column.decimals" ng-change="render()" ng-model-onblur> <input type="number" class="input-mini tight-form-input" ng-model="style.decimals" ng-change="render()" ng-model-onblur>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
...@@ -158,7 +158,7 @@ ...@@ -158,7 +158,7 @@
</div> </div>
<button class="btn btn-inverse" style="margin-top: 20px" ng-click="addColumnStyle()"> <button class="btn btn-inverse" style="margin-top: 20px" ng-click="addColumnStyle()">
Add column display rule Add style display rule
</button> </button>
</div> </div>
public/app/panels/table/editor.ts
...@@ -36,8 +36,8 @@ export function tablePanelEditor() { ...@@ -36,8 +36,8 @@ export function tablePanelEditor() {
{text: 'MMMM D, YYYY LT', value: 'MMMM D, YYYY LT'}, {text: 'MMMM D, YYYY LT', value: 'MMMM D, YYYY LT'},
]; ];
scope.updateJsonFieldsMenu = function(data) { scope.updateColumnsMenu = function(data) {
scope.jsonFieldsMenu = []; scope.columnsMenu = [];
if (!data || data.length === 0) { if (!data || data.length === 0) {
return; return;
} }
...@@ -58,18 +58,18 @@ export function tablePanelEditor() { ...@@ -58,18 +58,18 @@ export function tablePanelEditor() {
} }
_.each(names, function(value, key) { _.each(names, function(value, key) {
scope.jsonFieldsMenu.push({text: key}); scope.columnsMenu.push({text: key});
}); });
}; };
scope.updateJsonFieldsMenu(scope.dataRaw); scope.updateColumnsMenu(scope.dataRaw);
scope.$on('render', function(event, table, rawData) { scope.$on('render', function(event, table, rawData) {
scope.updateJsonFieldsMenu(rawData); scope.updateColumnsMenu(rawData);
}); });
scope.addJsonField = function(menuItem) { scope.addColumn = function(menuItem) {
scope.panel.fields.push({name: menuItem.text}); scope.panel.columns.push({name: menuItem.text});
scope.render(); scope.render();
}; };
...@@ -77,8 +77,8 @@ export function tablePanelEditor() { ...@@ -77,8 +77,8 @@ export function tablePanelEditor() {
scope.render(); scope.render();
}; };
scope.removeJsonField = function(field) { scope.removeColumn = function(column) {
scope.panel.fields = _.without(scope.panel.fields, field); scope.panel.column = _.without(scope.panel.column, column);
scope.render(); scope.render();
}; };
...@@ -99,11 +99,11 @@ export function tablePanelEditor() { ...@@ -99,11 +99,11 @@ export function tablePanelEditor() {
thresholds: [], thresholds: [],
}; };
scope.panel.columns.push(angular.copy(columnStyleDefaults)); scope.panel.styles.push(angular.copy(columnStyleDefaults));
}; };
scope.removeColumnStyle = function(col) { scope.removeColumnStyle = function(style) {
scope.panel.columns = _.without(scope.panel.columns, col); scope.panel.styles = _.without(scope.panel.styles, style);
}; };
scope.getColumnNames = function() { scope.getColumnNames = function() {
......
public/app/panels/table/renderer.ts
...@@ -81,8 +81,8 @@ export class TableRenderer { ...@@ -81,8 +81,8 @@ export class TableRenderer {
return this.formaters[colIndex](value); return this.formaters[colIndex](value);
} }
for (let i = 0; i < this.panel.columns.length; i++) { for (let i = 0; i < this.panel.styles.length; i++) {
let style = this.panel.columns[i]; let style = this.panel.styles[i];
let column = this.table.columns[colIndex]; let column = this.table.columns[colIndex];
var regex = kbn.stringToJsRegex(style.pattern); var regex = kbn.stringToJsRegex(style.pattern);
if (column.text.match(regex)) { if (column.text.match(regex)) {
......
public/app/panels/table/specs/renderer_specs.ts
...@@ -15,7 +15,7 @@ describe('when rendering table', () => { ...@@ -15,7 +15,7 @@ describe('when rendering table', () => {
var panel = { var panel = {
pageSize: 10, pageSize: 10,
columns: [ styles: [
{ {
pattern: 'Time', pattern: 'Time',
type: 'date', type: 'date',
......
public/app/panels/table/specs/transformers_specs.ts
...@@ -71,10 +71,36 @@ describe('when transforming time series table', () => { ...@@ -71,10 +71,36 @@ describe('when transforming time series table', () => {
}); });
}); });
describe('timeseries_to_summaries', () => {
var panel = {
transform: 'timeseries_to_summaries',
sort: {col: 0, desc: true},
};
beforeEach(() => {
table = TableModel.transform(timeSeries, panel);
});
// it('should return 2 rows', () => {
// expect(table.rows.length).to.be(2);
// expect(table.rows[0][0]).to.be('series1');
// expect(table.rows[0][1]).to.be('Min');
// expect(table.rows[1][0]).to.be('series2');
// });
//
// it('should return 2 columns', () => {
// expect(table.columns.length).to.be(3);
// expect(table.columns[0].text).to.be('Series');
// expect(table.columns[1].text).to.be('Min');
// expect(table.columns[2].text).to.be('Value');
// });
});
describe('JSON Data', () => { describe('JSON Data', () => {
var panel = { var panel = {
transform: 'json', transform: 'json',
fields: [{name: 'timestamp'}, {name: 'message'}] columns: [{name: 'timestamp'}, {name: 'message'}]
}; };
var rawData = [ var rawData = [
{ {
......
public/app/panels/table/transformers.ts
...@@ -87,8 +87,8 @@ transformers['json'] = { ...@@ -87,8 +87,8 @@ transformers['json'] = {
description: 'JSON Data', description: 'JSON Data',
transform: function(data, panel, model) { transform: function(data, panel, model) {
var i, y, z; var i, y, z;
for (i = 0; i < panel.fields.length; i++) { for (i = 0; i < panel.columns.length; i++) {
model.columns.push({text: panel.fields[i].name}); model.columns.push({text: panel.columns[i].name});
} }
if (model.columns.length === 0) { if (model.columns.length === 0) {
...@@ -101,8 +101,8 @@ transformers['json'] = { ...@@ -101,8 +101,8 @@ transformers['json'] = {
for (y = 0; y < series.datapoints.length; y++) { for (y = 0; y < series.datapoints.length; y++) {
var dp = series.datapoints[y]; var dp = series.datapoints[y];
var values = []; var values = [];
for (z = 0; z < panel.fields.length; z++) { for (z = 0; z < panel.columns.length; z++) {
values.push(dp[panel.fields[z].name]); values.push(dp[panel.columns[z].name]);
} }
if (values.length === 0) { if (values.length === 0) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment