mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
table: refactoring table options, now column styles are in a seperate tab
This commit is contained in:
Torkel Ödegaard
parent
e218052a90
commit
8bbff2c44e
99
public/app/plugins/panel/table/column_options.html
Normal file
99
public/app/plugins/panel/table/column_options.html
Normal file
@ -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> 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>
|
||||
120
public/app/plugins/panel/table/column_options.ts
Normal file
120
public/app/plugins/panel/table/column_options.ts
Normal file
@ -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,
|
||||
};
|
||||
}
|
||||
@ -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> 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>
|
||||
|
||||
@ -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 */
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -10,7 +10,8 @@
|
||||
}
|
||||
|
||||
.edit-sidemenu-aside {
|
||||
min-width: 15rem;
|
||||
min-width: 6rem;
|
||||
margin-right: $spacer*2;
|
||||
}
|
||||
|
||||
.edit-sidemenu {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user