diff --git a/public/app/plugins/panel/table/column_options.html b/public/app/plugins/panel/table/column_options.html new file mode 100644 index 00000000000..35fa4ac2d8b --- /dev/null +++ b/public/app/plugins/panel/table/column_options.html @@ -0,0 +1,99 @@ + +
+ + +
+ +
+
Options
+
+
+ + +
+
+
+ + +
+
+ +
+
Type
+ +
+ +
+ +
+
+
+ + +
+ +
+ +
+ +
+
+ +
+
+
+ + +
+
+
+ +
+
Thresholds
+
+ + +
+
+ +
+ +
+
+
+ + + + + + + + + + +
+ Invert +
+
+
+ +
+ + +
+
+ +
diff --git a/public/app/plugins/panel/table/column_options.ts b/public/app/plugins/panel/table/column_options.ts new file mode 100644 index 00000000000..5109f87f86d --- /dev/null +++ b/public/app/plugins/panel/table/column_options.ts @@ -0,0 +1,120 @@ +/// + + +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, + }; +} diff --git a/public/app/plugins/panel/table/editor.html b/public/app/plugins/panel/table/editor.html index 77860266b45..9854ac26dc3 100644 --- a/public/app/plugins/panel/table/editor.html +++ b/public/app/plugins/panel/table/editor.html @@ -24,7 +24,7 @@
-
Table Display
+
Paging
- -
- Column Style Rules - -
- -
- -
- -
- -
-
Options
-
-
- - -
-
-
- - -
-
- -
-
Type
- -
- -
- -
-
-
- - -
- -
- -
- -
-
- -
-
-
- - -
-
-
- -
-
Thresholds
-
- - -
-
- -
- -
-
-
- - - - - - - - - - -
- Invert -
-
-
- -
- - -
-
-
diff --git a/public/app/plugins/panel/table/editor.ts b/public/app/plugins/panel/table/editor.ts index 9379702e7db..ce5d0c1c828 100644 --- a/public/app/plugins/panel/table/editor.ts +++ b/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 */ diff --git a/public/app/plugins/panel/table/module.ts b/public/app/plugins/panel/table/module.ts index 06475caa332..8acf14f56ca 100644 --- a/public/app/plugins/panel/table/module.ts +++ b/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) { diff --git a/public/sass/components/edit_sidemenu.scss b/public/sass/components/edit_sidemenu.scss index 83f845c08e1..d7844ab6f36 100644 --- a/public/sass/components/edit_sidemenu.scss +++ b/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 {