Skip to content

N
nexpie-grafana-theme
Commit 67f03822 by aandrew Committed by Marcus Efraimsson
Options

add value to text mapping

parent a40e209a
Showing with 196 additions and 3 deletions
public/app/plugins/panel/table/column_options.html
......@@ -69,7 +69,60 @@
</div>
</div>
<div class="section gf-form-group" ng-if="style.type === 'number'">
<div class="section gf-form-group" ng-if="style.type === 'string'">
<h5 class="section-heading">Mapping</h5>
<div class="editor-row">
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label">
Type
</span>
<div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="style.mappingType"
ng-options="c.value as c.text for c in editor.mappingTypes" ng-change="editor.render()"></select>
</div>
</div>
<div class="gf-form-group" ng-if="style.mappingType==1">
<div class="gf-form" ng-repeat="mapping in style.valueMappings">
<input type="text" class="gf-form-input width-8" ng-model="mapping.value" placeholder="Value" ng-blur="editor.render()" array-join>
<label class="gf-form-label width-3">=></label>
<input type="text" class="gf-form-input width-9" ng-model="mapping.text" placeholder="Text" ng-blur="editor.render()" array-join>
<label class="gf-form-label">
<a class="pointer" tabindex="1" ng-click="editor.removeValueMapping(style, $index)">
<i class="fa fa-trash"></i>
</a>
</label>
</div>
<div class="gf-form">
<label class="gf-form-label">
<a class="pointer" ng-click="editor.addValueMapping(style)"><i class="fa fa-plus"></i></a>
</label>
</div>
</div>
<div class="gf-form-group" ng-if="style.mappingType==2">
<div class="gf-form" ng-repeat="mapping in style.rangeMappings">
<input type="text" class="gf-form-input width-5" ng-model="mapping.from" placeholder="From" ng-blur="editor.render()" array-join>
<label class="gf-form-label width-2">-</label>
<input type="text" class="gf-form-input width-5" ng-model="mapping.to" placeholder="To" ng-blur="editor.render()" array-join>
<label class="gf-form-label width-3">=></label>
<input type="text" class="gf-form-input width-5" ng-model="mapping.text" placeholder="Text" ng-blur="editor.render()" array-join>
<label class="gf-form-label">
<a class="pointer" tabindex="1" ng-click="editor.removeRangeMapping(style, $index)">
<i class="fa fa-trash"></i>
</a>
</label>
</div>
<div class="gf-form">
<label class="gf-form-label">
<a class="pointer" ng-click="editor.addRangeMapping(style)"><i class="fa fa-plus"></i></a>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="section gf-form-group" ng-if="['number', 'string'].indexOf(style.type) !== -1">
<h5 class="section-heading">Thresholds</h5>
<div class="gf-form">
<label class="gf-form-label width-8">Thresholds
......
public/app/plugins/panel/table/column_options.ts
......@@ -13,6 +13,7 @@ export class ColumnOptionsCtrl {
unitFormats: any;
getColumnNames: any;
activeStyleIndex: number;
mappingTypes: any;
/** @ngInject */
constructor($scope) {
......@@ -41,6 +42,7 @@ export class ColumnOptionsCtrl {
{ text: 'MM/DD/YY h:mm:ss a', value: 'MM/DD/YY h:mm:ss a' },
{ text: 'MMMM D, YYYY LT', value: 'MMMM D, YYYY LT' },
];
this.mappingTypes = [{ text: 'Value to text', value: 1 }, { text: 'Range to text', value: 2 }];
this.getColumnNames = () => {
if (!this.panelCtrl.table) {
......@@ -74,6 +76,7 @@ export class ColumnOptionsCtrl {
pattern: '',
dateFormat: 'YYYY-MM-DD HH:mm:ss',
thresholds: [],
mappingType: 1,
};
var styles = this.panel.styles;
......@@ -110,6 +113,31 @@ export class ColumnOptionsCtrl {
this.render();
};
}
addValueMapping(style) {
if (!style.valueMappings) {
style.valueMappings = [];
}
style.valueMappings.push({ value: '', text: '' });
this.panelCtrl.render();
}
removeValueMapping(style, index) {
style.valueMappings.splice(index, 1);
this.panelCtrl.render();
}
removeRangeMapping(style, index) {
style.rangeMappings.splice(index, 1);
this.panelCtrl.render();
}
addRangeMapping(style) {
if (!style.rangeMappings) {
style.rangeMappings = [];
}
style.rangeMappings.push({ from: '', to: '', text: '' });
this.panelCtrl.render();
}
}
/** @ngInject */
......
public/app/plugins/panel/table/renderer.ts
......@@ -47,7 +47,7 @@ export class TableRenderer {
if (!style.thresholds) {
return null;
}
value = Number(value);
for (var i = style.thresholds.length; i > 0; i--) {
if (value >= style.thresholds[i - 1]) {
return style.colors[i];
......@@ -100,6 +100,60 @@ export class TableRenderer {
};
}
if (column.style.type === 'string') {
return v => {
if (column.style.valueMappings && column.style.mappingType && column.style.mappingType === 1) {
for (let i = 0; i < column.style.valueMappings.length; i++) {
let mapping = column.style.valueMappings[i];
var value = Number(mapping.value);
if (v === null && mapping.value[0] === 'null') {
return mapping.text;
}
if (v !== null && !_.isArray(v)) {
if (Number(v) === value) {
if (!_.isString(v) && !_.isArray(v)) {
this.colorState[column.style.colorMode] = this.getColorForValue(v, column.style);
}
return this.defaultCellFormatter(mapping.text, column.style);
}
}
}
if (v !== null && v !== void 0 && !_.isString(v) && !_.isArray(v)) {
this.colorState[column.style.colorMode] = this.getColorForValue(v, column.style);
}
}
if (column.style.rangeMappings && column.style.mappingType && column.style.mappingType === 2) {
for (let i = 0; i < column.style.rangeMappings.length; i++) {
let mapping = column.style.rangeMappings[i];
var from = mapping.from;
var to = mapping.to;
if (v === null && mapping.from[0] === 'null' && mapping.to[0] === 'null') {
return mapping.text;
}
if (
v !== null &&
!_.isString(v) &&
!_.isArray(v) &&
from !== '' &&
to !== '' &&
Number(from[0]) <= v &&
Number(to[0]) >= v
) {
this.colorState[column.style.colorMode] = this.getColorForValue(v, column.style);
return this.defaultCellFormatter(mapping.text, column.style);
}
}
if (v !== null && v !== void 0 && !_.isString(v) && !_.isArray(v)) {
this.colorState[column.style.colorMode] = this.getColorForValue(v, column.style);
}
}
if (v === null) {
return '-';
}
return this.defaultCellFormatter(v, column.style);
};
}
if (column.style.type === 'number') {
let valueFormatter = kbn.valueFormats[column.unit || column.style.unit];
......
public/app/plugins/panel/table/specs/renderer.jest.ts
......@@ -15,8 +15,10 @@ describe('when rendering table', () => {
{ text: 'Sanitized' },
{ text: 'Link' },
{ text: 'Array' },
{ text: 'Mapping' },
{ text: 'RangeMapping' },
];
table.rows = [[1388556366666, 1230, 40, undefined, '', '', 'my.host.com', 'host1', ['value1', 'value2']]];
table.rows = [[1388556366666, 1230, 40, undefined, '', '', 'my.host.com', 'host1', ['value1', 'value2'], 1, 2]];
var panel = {
pageSize: 10,
......@@ -48,6 +50,10 @@ describe('when rendering table', () => {
type: 'string',
},
{
pattern: 'String',
type: 'string',
},
{
pattern: 'United',
type: 'number',
unit: 'ms',
......@@ -72,6 +78,38 @@ describe('when rendering table', () => {
unit: 'ms',
decimals: 3,
},
{
pattern: 'Mapping',
type: 'string',
mappingType: 1,
valueMappings: [
{
value: '1',
text: 'on',
},
{
value: '0',
text: 'off',
},
],
},
{
pattern: 'RangeMapping',
type: 'string',
mappingType: 2,
rangeMappings: [
{
from: '1',
to: '3',
text: 'on',
},
{
from: '3',
to: '6',
text: 'off',
},
],
},
],
};
......@@ -192,6 +230,26 @@ describe('when rendering table', () => {
var html = renderer.renderCell(8, 0, ['value1', 'value2']);
expect(html).toBe('<td>value1, value2</td>');
});
it('value should be mapped to text', () => {
var html = renderer.renderCell(9, 0, 1);
expect(html).toBe('<td>on</td>');
});
it('value should be mapped to text', () => {
var html = renderer.renderCell(9, 0, 0);
expect(html).toBe('<td>off</td>');
});
it('value should be mapped to text(range)', () => {
var html = renderer.renderCell(10, 0, 2);
expect(html).toBe('<td>on</td>');
});
it('value should be mapped to text(range)', () => {
var html = renderer.renderCell(10, 0, 5);
expect(html).toBe('<td>off</td>');
});
});
});
......
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