apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add value to text mapping

Browse Source
pull/11405/head
aandrew 7 years ago committed by Marcus Efraimsson
parent a40e209a91
commit 67f0382222
4 changed files with 196 additions and 3 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 55
      public/app/plugins/panel/table/column_options.html
  2. 28
      public/app/plugins/panel/table/column_options.ts
  3. 56
      public/app/plugins/panel/table/renderer.ts
  4. 60
      public/app/plugins/panel/table/specs/renderer.jest.ts

55
public/app/plugins/panel/table/column_options.html
Unescape View File

@ -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

28
public/app/plugins/panel/table/column_options.ts
Unescape View File

@ -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 */

56
public/app/plugins/panel/table/renderer.ts
Unescape View File

@ -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];

60
public/app/plugins/panel/table/specs/renderer.jest.ts
Unescape View File

@ -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,
@ -47,6 +49,10 @@ describe('when rendering table', () => {
pattern: 'String',
type: 'string',
},
{
pattern: 'String',
type: 'string',
},
{
pattern: 'United',
type: 'number',
@ -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>');
});
});
});

Write Preview
Loading…
Cancel
Save