table: refactoring table options, now column styles are in a seperate tab

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

@@ -0,0 +1,99 @@
+
+<div class="edit-tab-with-sidemenu">
+	<aside class="edit-sidemenu-aside">
+		<ul class="edit-sidemenu">
+      <li ng-repeat="style in editor.panel.styles" ng-class="{active: editor.activeStyleIndex === $index}">
+        <a ng-click="editor.activeStyleIndex = $index" >{{style.pattern || 'New rule'}}</a>
+      </li>
+      <li>
+        <a class="pointer" ng-click="editor.addColumnStyle()">
+          <i class="fa fa-plus"></i>&nbsp;Add
+        </a>
+      </li>
+		</ul>
+	</aside>
+
+  <div class="edit-tab-content" ng-repeat="style in editor.panel.styles" ng-if="editor.activeStyleIndex === $index">
+
+    <div class="section gf-form-group">
+      <h5 class="section-heading">Options</h5>
+      <div class="gf-form-inline">
+        <div class="gf-form">
+          <label class="gf-form-label width-13">Apply to columns named</label>
+          <input type="text" placeholder="Name or regex" class="gf-form-input width-13" ng-model="style.pattern" bs-tooltip="'Specify regex using /my.*regex/ syntax'" bs-typeahead="editor.getColumnNames" ng-blur="editor.render()" data-min-length=0 data-items=100 ng-model-onblur data-placement="right">
+        </div>
+      </div>
+      <div class="gf-form" ng-if="style.type !== 'hidden'">
+        <label class="gf-form-label width-13">Column Header</label>
+        <input type="text" class="gf-form-input width-13" ng-model="style.alias" ng-change="editor.render()" ng-model-onblur placeholder="Override header label">
+      </div>
+    </div>
+
+    <div class="section gf-form-group">
+      <h5 class="section-heading">Type</h5>
+
+      <div class="gf-form">
+        <label class="gf-form-label width-8">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>
+        <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>
+      </div>
+
+      <div ng-if="style.type === 'number'">
+        <div class="gf-form">
+          <label class="gf-form-label width-8">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>
+          <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>
+    </div>
+
+    <div class="section gf-form-group"  ng-if="style.type === 'number'">
+      <h5 class="section-heading">Thresholds</h5>
+      <div class="gf-form">
+        <label class="gf-form-label width-8">Thresholds<tip>Comma separated values</tip></label>
+        <input type="text" class="gf-form-input width-10" ng-model="style.thresholds" placeholder="50,80" ng-blur="editor.render()" array-join ng-model-onblur>
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label width-8">Color Mode</label>
+        <div class="gf-form-select-wrapper width-10">
+          <select class="gf-form-input" ng-model="style.colorMode" ng-options="c.value as c.text for c in editor.colorModes" ng-change="editor.render()"></select>
+        </div>
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label width-8">Colors</label>
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="style.colors[0]" ng-change="editor.render()"></spectrum-picker>
+        </span>
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="style.colors[1]" ng-change="editor.render()"></spectrum-picker>
+        </span>
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="style.colors[2]" ng-change="editor.render()"></spectrum-picker>
+        </span>
+        <div class="gf-form-label">
+          <a class="pointer" ng-click="editor.invertColorOrder($index)">Invert</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="clearfix"></div>
+
+    <button class="btn btn-danger btn-small" ng-click="editor.removeColumnStyle(style)">
+      <i class="fa fa-trash"></i> Remove Rule
+    </button>
+    <br />
+    <br />
+
+  </div>

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

@@ -0,0 +1,120 @@
+///<reference path="../../../headers/common.d.ts" />
+
+
+import _ from 'lodash';
+import $ from 'jquery';
+import moment from 'moment';
+import angular from 'angular';
+
+import kbn from 'app/core/utils/kbn';
+
+export class ColumnOptionsCtrl {
+  panel: any;
+  panelCtrl: any;
+  colorModes: any;
+  columnStyles: any;
+  columnTypes: any;
+  fontSizes: any;
+  dateFormats: any;
+  addColumnSegment: any;
+  unitFormats: any;
+  getColumnNames: any;
+  activeStyleIndex: number;
+
+  /** @ngInject */
+  constructor($scope, private $q, private uiSegmentSrv) {
+    $scope.editor = this;
+    this.activeStyleIndex = 0;
+    this.panelCtrl = $scope.ctrl;
+    this.panel = this.panelCtrl.panel;
+    this.unitFormats = kbn.getUnitFormats();
+    this.colorModes = [
+      {text: 'Disabled', value: null},
+      {text: 'Cell', value: 'cell'},
+      {text: 'Value', value: 'value'},
+      {text: 'Row', value: 'row'},
+    ];
+    this.columnTypes = [
+      {text: 'Number', value: 'number'},
+      {text: 'String', value: 'string'},
+      {text: 'Date', value: 'date'},
+      {text: 'Hidden', value: 'hidden'}
+    ];
+    this.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%'];
+    this.dateFormats = [
+      {text: 'YYYY-MM-DD HH:mm:ss', value: 'YYYY-MM-DD HH:mm:ss'},
+      {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.getColumnNames = () => {
+      if (!this.panelCtrl.table) {
+        return [];
+      }
+      return _.map(this.panelCtrl.table.columns, function(col: any) {
+        return col.text;
+      });
+    };
+  }
+
+  render() {
+    this.panelCtrl.render();
+  }
+
+  setUnitFormat(column, subItem) {
+    column.unit = subItem.value;
+    this.panelCtrl.render();
+  }
+
+  addColumnStyle() {
+    var newStyleRule = {
+      unit: 'short',
+      type: 'number',
+      alias: '',
+      decimals: 2,
+      colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
+      colorMode: null,
+      pattern: '',
+      dateFormat: 'YYYY-MM-DD HH:mm:ss',
+      thresholds: [],
+    };
+
+    var styles = this.panel.styles;
+    var stylesCount = styles.length;
+    var indexToInsert = stylesCount;
+
+    // check if last is a catch all rule, then add it before that one
+    if (stylesCount > 0) {
+      var last = styles[stylesCount-1];
+      if (last.pattern === '/.*/') {
+        indexToInsert = stylesCount-1;
+      }
+    }
+
+    styles.splice(indexToInsert, 0, newStyleRule);
+    this.activeStyleIndex = indexToInsert;
+  }
+
+  removeColumnStyle(style) {
+    this.panel.styles = _.without(this.panel.styles, style);
+  }
+
+  invertColorOrder(index) {
+    var ref = this.panel.styles[index].colors;
+    var copy = ref[0];
+    ref[0] = ref[2];
+    ref[2] = copy;
+    this.panelCtrl.render();
+  }
+}
+
+/** @ngInject */
+export function columnOptionsTab($q, uiSegmentSrv) {
+  'use strict';
+  return {
+    restrict: 'E',
+    scope: true,
+    templateUrl: 'public/app/plugins/panel/table/column_options.html',
+    controller: ColumnOptionsCtrl,
+  };
+}

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

@@ -24,7 +24,7 @@
 	</div>
 
 	<div class="section gf-form-group">
-		<h5 class="section-heading">Table Display</h5>
+		<h5 class="section-heading">Paging</h5>
     <div class="gf-form">
       <label class="gf-form-label width-8">Rows per page</label>
       <input type="number" class="gf-form-input width-6"
@@ -45,102 +45,3 @@
     </div>
   </div>
 </div>
-
-<h5 class="section-heading">
-  <span style="padding-right: 10px;">Column Style Rules</span>
-  <button class="btn btn-secondary btn-small" ng-click="editor.addColumnStyle()">
-    <i class="fa fa-plus"></i>&nbsp;Add
-  </button>
-</h5>
-
-<div class="form-tabs-wrapper">
-  <ul class="gf-tabs">
-    <li class="gf-tabs-item" ng-repeat="style in editor.panel.styles">
-      <a class="gf-tabs-link" ng-click="editor.activeStyleIndex = $index" ng-class="{active: editor.activeStyleIndex === $index}">{{style.pattern || 'New rule'}}</a>
-    </li>
-  </ul>
-</div>
-
-<div class="form-tabs-content" ng-repeat="style in editor.panel.styles" ng-if="editor.activeStyleIndex === $index">
-
-  <div class="section gf-form-group">
-    <h5 class="section-heading">Options</h5>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <label class="gf-form-label width-13">Apply to columns named</label>
-        <input type="text" placeholder="Name or regex" class="gf-form-input width-13" ng-model="style.pattern" bs-tooltip="'Specify regex using /my.*regex/ syntax'" bs-typeahead="editor.getColumnNames" ng-blur="editor.render()" data-min-length=0 data-items=100 ng-model-onblur data-placement="right">
-      </div>
-    </div>
-    <div class="gf-form" ng-if="style.type !== 'hidden'">
-      <label class="gf-form-label width-13">Column Header</label>
-      <input type="text" class="gf-form-input width-13" ng-model="style.alias" ng-change="editor.render()" ng-model-onblur placeholder="Override header label">
-    </div>
-  </div>
-
-  <div class="section gf-form-group">
-    <h5 class="section-heading">Type</h5>
-
-    <div class="gf-form">
-      <label class="gf-form-label width-8">Type</label>
-      <div class="gf-form-select-wrapper width-12">
-        <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>
-      <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>
-    </div>
-
-    <div ng-if="style.type === 'number'">
-      <div class="gf-form">
-        <label class="gf-form-label width-8">Unit</label>
-        <div class="gf-form-dropdown-typeahead width-12" 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>
-        <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>
-  </div>
-
-  <div class="section gf-form-group"  ng-if="style.type === 'number'">
-    <h5 class="section-heading">Thresholds</h5>
-    <div class="gf-form">
-      <label class="gf-form-label width-8">Thresholds<tip>Comma separated values</tip></label>
-      <input type="text" class="gf-form-input width-10" ng-model="style.thresholds" placeholder="50,80" ng-blur="editor.render()" array-join ng-model-onblur>
-    </div>
-    <div class="gf-form">
-      <label class="gf-form-label width-8">Color Mode</label>
-      <div class="gf-form-select-wrapper width-10">
-        <select class="gf-form-input" ng-model="style.colorMode" ng-options="c.value as c.text for c in editor.colorModes" ng-change="editor.render()"></select>
-      </div>
-    </div>
-    <div class="gf-form">
-      <label class="gf-form-label width-8">Colors</label>
-      <span class="gf-form-label">
-        <spectrum-picker ng-model="style.colors[0]" ng-change="editor.render()"></spectrum-picker>
-      </span>
-      <span class="gf-form-label">
-				<spectrum-picker ng-model="style.colors[1]" ng-change="editor.render()"></spectrum-picker>
-			</span>
-			<span class="gf-form-label">
-				<spectrum-picker ng-model="style.colors[2]" ng-change="editor.render()"></spectrum-picker>
-			</span>
-			<div class="gf-form-label">
-				<a class="pointer" ng-click="editor.invertColorOrder($index)">Invert</a>
-			</div>
-		</div>
-	</div>
-
-	<div class="clearfix"></div>
-
-	<button class="btn btn-danger btn-small" ng-click="editor.removeColumnStyle(style)">
-		<i class="fa fa-trash"></i> Remove Rule
-	</button>
-	<br />
-	<br />
-</div>

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

@@ -13,54 +13,19 @@ export class TablePanelEditorCtrl {
   panel: any;
   panelCtrl: any;
   transformers: any;
-  colorModes: any;
-  columnStyles: any;
-  columnTypes: any;
   fontSizes: any;
-  dateFormats: any;
   addColumnSegment: any;
-  unitFormats: any;
   getColumnNames: any;
-  activeStyleIndex: number;
 
   /** @ngInject */
   constructor($scope, private $q, private uiSegmentSrv) {
     $scope.editor = this;
-    this.activeStyleIndex = 0;
     this.panelCtrl = $scope.ctrl;
     this.panel = this.panelCtrl.panel;
     this.transformers = transformers;
-    this.unitFormats = kbn.getUnitFormats();
-    this.colorModes = [
-      {text: 'Disabled', value: null},
-      {text: 'Cell', value: 'cell'},
-      {text: 'Value', value: 'value'},
-      {text: 'Row', value: 'row'},
-    ];
-    this.columnTypes = [
-      {text: 'Number', value: 'number'},
-      {text: 'String', value: 'string'},
-      {text: 'Date', value: 'date'},
-      {text: 'Hidden', value: 'hidden'}
-    ];
     this.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%'];
-    this.dateFormats = [
-      {text: 'YYYY-MM-DD HH:mm:ss', value: 'YYYY-MM-DD HH:mm:ss'},
-      {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.addColumnSegment = uiSegmentSrv.newPlusButton();
-
-    // this is used from bs-typeahead and needs to be instance bound
-    this.getColumnNames = () => {
-      if (!this.panelCtrl.table) {
-        return [];
-      }
-      return _.map(this.panelCtrl.table.columns, function(col: any) {
-        return col.text;
-      });
-    };
   }
 
   getColumnOptions() {
@@ -99,52 +64,6 @@ export class TablePanelEditorCtrl {
     this.panel.columns = _.without(this.panel.columns, column);
     this.panelCtrl.render();
   }
-
-  setUnitFormat(column, subItem) {
-    column.unit = subItem.value;
-    this.panelCtrl.render();
-  }
-
-  addColumnStyle() {
-    var newStyleRule = {
-      unit: 'short',
-      type: 'number',
-      alias: '',
-      decimals: 2,
-      colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
-      colorMode: null,
-      pattern: '',
-      dateFormat: 'YYYY-MM-DD HH:mm:ss',
-      thresholds: [],
-    };
-
-    var styles = this.panel.styles;
-    var stylesCount = styles.length;
-    var indexToInsert = stylesCount;
-
-    // check if last is a catch all rule, then add it before that one
-    if (stylesCount > 0) {
-      var last = styles[stylesCount-1];
-      if (last.pattern === '/.*/') {
-        indexToInsert = stylesCount-1;
-      }
-    }
-
-    styles.splice(indexToInsert, 0, newStyleRule);
-    this.activeStyleIndex = indexToInsert;
-  }
-
-  removeColumnStyle(style) {
-    this.panel.styles = _.without(this.panel.styles, style);
-  }
-
-  invertColorOrder(index) {
-    var ref = this.panel.styles[index].colors;
-    var copy = ref[0];
-    ref[0] = ref[2];
-    ref[2] = copy;
-    this.panelCtrl.render();
-  }
 }
 
 /** @ngInject */

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

@@ -8,6 +8,7 @@ import * as FileExport from 'app/core/utils/file_export';
 import {MetricsPanelCtrl} from 'app/plugins/sdk';
 import {transformDataToTable} from './transformers';
 import {tablePanelEditor} from './editor';
+import {columnOptionsTab} from './column_options';
 import {TableRenderer} from './renderer';
 
 class TablePanelCtrl extends MetricsPanelCtrl {
@@ -70,6 +71,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
 
   onInitEditMode() {
     this.addEditorTab('Options', tablePanelEditor, 2);
+    this.addEditorTab('Column Styles', columnOptionsTab, 3);
   }
 
   onInitPanelActions(actions) {

public/sass/components/edit_sidemenu.scss

@@ -10,7 +10,8 @@
 }
 
 .edit-sidemenu-aside {
-  min-width: 15rem;
+  min-width: 6rem;
+  margin-right: $spacer*2;
 }
 
 .edit-sidemenu {