apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source
pull/3757/merge
Torkel Ödegaard 8 years ago
parent e218052a90
commit 8bbff2c44e
6 changed files with 224 additions and 182 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 99
      public/app/plugins/panel/table/column_options.html
  2. 120
      public/app/plugins/panel/table/column_options.ts
  3. 101
      public/app/plugins/panel/table/editor.html
  4. 81
      public/app/plugins/panel/table/editor.ts
  5. 2
      public/app/plugins/panel/table/module.ts
  6. 3
      public/sass/components/edit_sidemenu.scss

99
public/app/plugins/panel/table/column_options.html
Unescape View 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>&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>

120
public/app/plugins/panel/table/column_options.ts
Unescape View 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,
};
}

101
public/app/plugins/panel/table/editor.html
Unescape View File

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

81
public/app/plugins/panel/table/editor.ts
Unescape View File

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

2
public/app/plugins/panel/table/module.ts
Unescape View File

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

3
public/sass/components/edit_sidemenu.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save