Skip to content

Commit

Permalink
Merge pull request grafana#11094 from infernix:value-to-text-upstream
Browse files Browse the repository at this point in the history
  • Loading branch information
@marefr
marefr committed Mar 27, 2018
2 parents a40e209 + f673ec1 commit 95a4d61
Show file tree
Hide file tree
Showing 4 changed files with 324 additions and 8 deletions.
54 changes: 53 additions & 1 deletion public/app/plugins/panel/table/column_options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,59 @@ <h5 class="section-heading">Type</h5>
</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">Value Mappings</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="map in style.valueMaps">
<span class="gf-form-label">
<i class="fa fa-remove pointer" ng-click="editor.removeValueMap(style, $index)"></i>
</span>
<input type="text" class="gf-form-input max-width-6" ng-model="map.value" placeholder="Value" ng-blur="editor.render()">
<label class="gf-form-label">
<i class="fa fa-arrow-right"></i>
</label>
<input type="text" class="gf-form-input max-width-8" ng-model="map.text" placeholder="Text" ng-blur="editor.render()">
</div>
<div class="gf-form">
<label class="gf-form-label">
<a class="pointer" ng-click="editor.addValueMap(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="rangeMap in style.rangeMaps">
<span class="gf-form-label">
<i class="fa fa-remove pointer" ng-click="editor.removeRangeMap(style, $index)"></i>
</span>
<span class="gf-form-label">From</span>
<input type="text" ng-model="rangeMap.from" class="gf-form-input max-width-6" ng-blur="editor.render()">
<span class="gf-form-label">To</span>
<input type="text" ng-model="rangeMap.to" class="gf-form-input max-width-6" ng-blur="editor.render()">
<span class="gf-form-label">Text</span>
<input type="text" ng-model="rangeMap.text" class="gf-form-input max-width-8" ng-blur="editor.render()">
</div>
<div class="gf-form">
<label class="gf-form-label">
<a class="pointer" ng-click="editor.addRangeMap(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
Expand Down
29 changes: 29 additions & 0 deletions public/app/plugins/panel/table/column_options.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export class ColumnOptionsCtrl {
unitFormats: any;
getColumnNames: any;
activeStyleIndex: number;
mappingTypes: any;

/** @ngInject */
constructor($scope) {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -74,6 +76,7 @@ export class ColumnOptionsCtrl {
pattern: '',
dateFormat: 'YYYY-MM-DD HH:mm:ss',
thresholds: [],
mappingType: 1,
};

var styles = this.panel.styles;
Expand Down Expand Up @@ -110,6 +113,32 @@ export class ColumnOptionsCtrl {
this.render();
};
}

addValueMap(style) {
if (!style.valueMaps) {
style.valueMaps = [];
}
style.valueMaps.push({ value: '', text: '' });
this.panelCtrl.render();
}

removeValueMap(style, index) {
style.valueMaps.splice(index, 1);
this.panelCtrl.render();
}

addRangeMap(style) {
if (!style.rangeMaps) {
style.rangeMaps = [];
}
style.rangeMaps.push({ from: '', to: '', text: '' });
this.panelCtrl.render();
}

removeRangeMap(style, index) {
style.rangeMaps.splice(index, 1);
this.panelCtrl.render();
}
}

/** @ngInject */
Expand Down
77 changes: 72 additions & 5 deletions public/app/plugins/panel/table/renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ export class TableRenderer {
if (!style.thresholds) {
return null;
}

for (var i = style.thresholds.length; i > 0; i--) {
if (value >= style.thresholds[i - 1]) {
return style.colors[i];
Expand Down Expand Up @@ -100,6 +99,60 @@ export class TableRenderer {
};
}

if (column.style.type === 'string') {
return v => {
if (_.isArray(v)) {
v = v.join(', ');
}

const mappingType = column.style.mappingType || 0;

if (mappingType === 1 && column.style.valueMaps) {
for (let i = 0; i < column.style.valueMaps.length; i++) {
const map = column.style.valueMaps[i];

if (v === null) {
if (map.value === 'null') {
return map.text;
}
continue;
}

// Allow both numeric and string values to be mapped
if ((!_.isString(v) && Number(map.value) === Number(v)) || map.value === v) {
this.setColorState(v, column.style);
return this.defaultCellFormatter(map.text, column.style);
}
}
}

if (mappingType === 2 && column.style.rangeMaps) {
for (let i = 0; i < column.style.rangeMaps.length; i++) {
const map = column.style.rangeMaps[i];

if (v === null) {
if (map.from === 'null' && map.to === 'null') {
return map.text;
}
continue;
}

if (Number(map.from) <= Number(v) && Number(map.to) >= Number(v)) {
this.setColorState(v, column.style);
return this.defaultCellFormatter(map.text, column.style);
}
}
}

if (v === null || v === void 0) {
return '-';
}

this.setColorState(v, column.style);
return this.defaultCellFormatter(v, column.style);
};
}

if (column.style.type === 'number') {
let valueFormatter = kbn.valueFormats[column.unit || column.style.unit];

Expand All @@ -112,10 +165,7 @@ export class TableRenderer {
return this.defaultCellFormatter(v, column.style);
}

if (column.style.colorMode) {
this.colorState[column.style.colorMode] = this.getColorForValue(v, column.style);
}

this.setColorState(v, column.style);
return valueFormatter(v, column.style.decimals, null);
};
}
Expand All @@ -125,6 +175,23 @@ export class TableRenderer {
};
}

setColorState(value, style) {
if (!style.colorMode) {
return;
}

if (value === null || value === void 0 || _.isArray(value)) {
return;
}

var numericValue = Number(value);
if (numericValue === NaN) {
return;
}

this.colorState[style.colorMode] = this.getColorForValue(numericValue, style);
}

renderRowVariables(rowIndex) {
let scopedVars = {};
let cell_variable;
Expand Down
Loading

0 comments on commit 95a4d61

Please sign in to comment.