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

* 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

public/app/plugins/panel/table/column_options.html

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

public/app/plugins/panel/table/renderer.ts

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

public/sass/components/_panel_table.scss

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