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 {
transform: 'timeseries_to_rows',
pageSize: 50,
showHeader: true,
columns: [
styles: [
{
type: 'date',
pattern: 'Time',
......@@ -45,13 +45,20 @@ export class TablePanelCtrl {
thresholds: [],
}
],
fields: [],
columns: [],
scroll: true,
fontSize: '100%',
sort: {col: 0, desc: true},
};
$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);
panelSrv.init($scope);
......
public/app/panels/table/editor.html
......@@ -19,15 +19,15 @@
<div class="tight-form" ng-if="panel.transform === 'json'">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 140px">
Fields
Columns
</li>
<li class="tight-form-item" ng-repeat="field in panel.fields">
<i class="pointer fa fa-remove" ng-click="removeJsonField(field)"></i>
<li class="tight-form-item" ng-repeat="column in panel.columns">
<i class="pointer fa fa-remove" ng-click="removeColumn(column)"></i>
<span>
{{field.name}}
{{column.name}}
</span>
</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>
</ul>
<div class="clearfix"></div>
......@@ -67,11 +67,11 @@
<h5>Column Styles</h5>
<div class="tight-form-container">
<div ng-repeat="column in panel.columns">
<div ng-repeat="style in panel.styles">
<div class="tight-form">
<ul class="tight-form-list pull-right">
<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>
</ul>
......@@ -80,38 +80,38 @@
Name or regex
</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 class="tight-form-item" style="width: 86px">
Type
</li>
<li>
<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-change="render()"
style="width: 150px"
></select>
</li>
</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">
Format
</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>
</ul>
<div class="clearfix"></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">
<li class="tight-form-item text-right" style="width: 93px">
Coloring
</li>
<li>
<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-change="render()"
style="width: 150px"
......@@ -121,34 +121,34 @@
Thresholds<tip>Comma seperated values</tip>
</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 class="tight-form-item" style="width: 60px">
Colors
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="column.colors[0]" ng-change="render()" ></spectrum-picker>
<spectrum-picker ng-model="column.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[0]" ng-change="render()" ></spectrum-picker>
<spectrum-picker ng-model="style.colors[1]" ng-change="render()" ></spectrum-picker>
<spectrum-picker ng-model="style.colors[2]" ng-change="render()" ></spectrum-picker>
</li>
</ul>
<div class="clearfix"></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">
<li class="tight-form-item text-right" style="width: 93px">
Unit
</li>
<li class="dropdown" style="width: 150px"
ng-model="column.unit"
ng-model="style.unit"
dropdown-typeahead="unitFormats"
dropdown-typeahead-on-select="setUnitFormat(column, $subItem)">
dropdown-typeahead-on-select="setUnitFormat(style, $subItem)">
</li>
<li class="tight-form-item" style="width: 86px">
Decimals
</li>
<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>
</ul>
<div class="clearfix"></div>
......@@ -158,7 +158,7 @@
</div>
<button class="btn btn-inverse" style="margin-top: 20px" ng-click="addColumnStyle()">
Add column display rule
Add style display rule
</button>
</div>
public/app/panels/table/editor.ts
......@@ -36,8 +36,8 @@ export function tablePanelEditor() {
{text: 'MMMM D, YYYY LT', value: 'MMMM D, YYYY LT'},
];
scope.updateJsonFieldsMenu = function(data) {
scope.jsonFieldsMenu = [];
scope.updateColumnsMenu = function(data) {
scope.columnsMenu = [];
if (!data || data.length === 0) {
return;
}
......@@ -58,18 +58,18 @@ export function tablePanelEditor() {
}
_.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.updateJsonFieldsMenu(rawData);
scope.updateColumnsMenu(rawData);
});
scope.addJsonField = function(menuItem) {
scope.panel.fields.push({name: menuItem.text});
scope.addColumn = function(menuItem) {
scope.panel.columns.push({name: menuItem.text});
scope.render();
};
......@@ -77,8 +77,8 @@ export function tablePanelEditor() {
scope.render();
};
scope.removeJsonField = function(field) {
scope.panel.fields = _.without(scope.panel.fields, field);
scope.removeColumn = function(column) {
scope.panel.column = _.without(scope.panel.column, column);
scope.render();
};
......@@ -99,11 +99,11 @@ export function tablePanelEditor() {
thresholds: [],
};
scope.panel.columns.push(angular.copy(columnStyleDefaults));
scope.panel.styles.push(angular.copy(columnStyleDefaults));
};
scope.removeColumnStyle = function(col) {
scope.panel.columns = _.without(scope.panel.columns, col);
scope.removeColumnStyle = function(style) {
scope.panel.styles = _.without(scope.panel.styles, style);
};
scope.getColumnNames = function() {
......
public/app/panels/table/renderer.ts
......@@ -81,8 +81,8 @@ export class TableRenderer {
return this.formaters[colIndex](value);
}
for (let i = 0; i < this.panel.columns.length; i++) {
let style = this.panel.columns[i];
for (let i = 0; i < this.panel.styles.length; i++) {
let style = this.panel.styles[i];
let column = this.table.columns[colIndex];
var regex = kbn.stringToJsRegex(style.pattern);
if (column.text.match(regex)) {
......
public/app/panels/table/specs/renderer_specs.ts
......@@ -15,7 +15,7 @@ describe('when rendering table', () => {
var panel = {
pageSize: 10,
columns: [
styles: [
{
pattern: 'Time',
type: 'date',
......
public/app/panels/table/specs/transformers_specs.ts
......@@ -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', () => {
var panel = {
transform: 'json',
fields: [{name: 'timestamp'}, {name: 'message'}]
columns: [{name: 'timestamp'}, {name: 'message'}]
};
var rawData = [
{
......
public/app/panels/table/transformers.ts
......@@ -87,8 +87,8 @@ transformers['json'] = {
description: 'JSON Data',
transform: function(data, panel, model) {
var i, y, z;
for (i = 0; i < panel.fields.length; i++) {
model.columns.push({text: panel.fields[i].name});
for (i = 0; i < panel.columns.length; i++) {
model.columns.push({text: panel.columns[i].name});
}
if (model.columns.length === 0) {
......@@ -101,8 +101,8 @@ transformers['json'] = {
for (y = 0; y < series.datapoints.length; y++) {
var dp = series.datapoints[y];
var values = [];
for (z = 0; z < panel.fields.length; z++) {
values.push(dp[panel.fields[z].name]);
for (z = 0; z < panel.columns.length; z++) {
values.push(dp[panel.columns[z].name]);
}
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