IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-08 23:23:45 -06:00
Code Issues Packages Projects Releases Wiki Activity

Table panel: add option for preserving text formatting (#8708)

Browse Source 
* table_panel: add option for preserving text formatting

* table_panel: fix undefined style error

* table_panel: fix class adding (add space before 'class')

* table_panel: aligin Type options labels
This commit is contained in:
Alexander Zobnin 2017-06-27 13:38:49 +03:00 committed by Daniel Lee
parent 10127e8ac9
commit 1deeef9e91
3 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/app/plugins/panel/table/column_options.html
View File

@ -33,27 +33,30 @@
<h5 class="section-heading">Type</h5>
<div class="gf-form">
<label class="gf-form-label width-8">Type</label>
<label class="gf-form-label width-11">Type</label>
<div class="gf-form-select-wrapper width-10">
<select class="gf-form-input" ng-model="style.type" ng-options="c.value as c.text for c in editor.columnTypes" ng-change="editor.render()"></select>
</div>
</div>
<div class="gf-form" ng-if="style.type === 'date'">
<label class="gf-form-label width-8">Date Format</label>
<label class="gf-form-label width-11">Date Format</label>
<metric-segment-model property="style.dateFormat" options="editor.dateFormats" on-change="editor.render()" custom="true"></metric-segment-model>
</div>
<div ng-if="style.type === 'string'">
<gf-form-switch class="gf-form" label-class="width-8" ng-if="style.type === 'string'" label="Sanitize HTML" checked="style.sanitize" change="editor.render()"></gf-form-switch>
<gf-form-switch class="gf-form" label-class="width-11" ng-if="style.type === 'string'" label="Sanitize HTML" checked="style.sanitize" change="editor.render()"></gf-form-switch>
</div>
<div ng-if="style.type === 'string'">
<gf-form-switch class="gf-form" label-class="width-11" ng-if="style.type === 'string'" label="Preserve Formatting" checked="style.preserveFormat" change="editor.render()"></gf-form-switch>
</div>
<div ng-if="style.type === 'number'">
<div class="gf-form">
<label class="gf-form-label width-8">Unit</label>
<label class="gf-form-label width-11">Unit</label>
<div class="gf-form-dropdown-typeahead width-10" ng-model="style.unit" dropdown-typeahead2="editor.unitFormats" dropdown-typeahead-on-select="editor.setUnitFormat(style, $subItem)"></div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Decimals</label>
<label class="gf-form-label width-11">Decimals</label>
<input type="number" class="gf-form-input width-4" data-placement="right" ng-model="style.decimals" ng-change="editor.render()" ng-model-onblur>
</div>
</div>

8
public/app/plugins/panel/table/renderer.ts
View File

@ -130,6 +130,7 @@ export class TableRenderer {
renderCell(columnIndex, value, addWidthHack = false) {
value = this.formatColumnValue(columnIndex, value);
var style = '';
var cellClass = '';
if (this.colorState.cell) {
style = ' style="background-color:' + this.colorState.cell + ';color: white"';
this.colorState.cell = null;
@ -153,7 +154,12 @@ export class TableRenderer {
this.table.columns[columnIndex].hidden = false;
}
return '<td' + style + '>' + value + widthHack + '</td>';
var columnStyle = this.table.columns[columnIndex].style;
if (columnStyle && columnStyle.preserveFormat) {
cellClass = ' class="table-panel-cell-pre" ';
}
return '<td' + cellClass + style + '>' + value + widthHack + '</td>';
}
render(page) {

4
public/sass/components/_panel_table.scss
View File

@ -72,6 +72,10 @@
&:last-child {
border-right: none;
}
&.table-panel-cell-pre {
white-space: pre;
}
}
}