Skip to content

N
nexpie-grafana-theme
Commit fb9e8d21 by Torkel Ödegaard
Options

feat(table panel): fixed issue with column selection for new table panel

parent 3668cb6d
Showing with 94 additions and 85 deletions
public/app/core/directives/metric_segment.js
...@@ -20,7 +20,6 @@ function (_, $, coreModule) { ...@@ -20,7 +20,6 @@ function (_, $, coreModule) {
getOptions: "&", getOptions: "&",
onChange: "&", onChange: "&",
}, },
link: function($scope, elem) { link: function($scope, elem) {
var $input = $(inputTemplate); var $input = $(inputTemplate);
var $button = $(buttonTemplate); var $button = $(buttonTemplate);
......
public/app/panels/table/controller.ts
...@@ -60,7 +60,6 @@ export class TablePanelCtrl { ...@@ -60,7 +60,6 @@ export class TablePanelCtrl {
} }
_.defaults($scope.panel, panelDefaults); _.defaults($scope.panel, panelDefaults);
panelSrv.init($scope); panelSrv.init($scope);
}; };
......
public/app/panels/table/editor.html
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form" ng-if="showColumnOptions"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 140px"> <li class="tight-form-item" style="width: 140px">
Columns Columns
...@@ -27,7 +27,8 @@ ...@@ -27,7 +27,8 @@
{{column.text}} {{column.text}}
</span> </span>
</li> </li>
<li class="dropdown" dropdown-typeahead="columnsMenu" dropdown-typeahead-on-select="addColumn($item, $subItem)"> <li>
<metric-segment segment="addColumnSegment" get-options="getColumnOptions()" on-change="addColumn()"></metric-segment>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
......
public/app/panels/table/editor.ts
///<reference path="../../headers/common.d.ts" /> ///<reference path="../../headers/common.d.ts" />
import angular = require('angular'); import angular = require('angular');
import $ = require('jquery'); import $ = require('jquery');
import _ = require('lodash'); import _ = require('lodash');
...@@ -9,93 +9,103 @@ import moment = require('moment'); ...@@ -9,93 +9,103 @@ import moment = require('moment');
import {transformers} from './transformers'; import {transformers} from './transformers';
export function tablePanelEditor() { export class TablePanelEditorCtrl {
'use strict';
return { /** @ngInject */
restrict: 'E', constructor($scope, $q, uiSegmentSrv) {
scope: true, $scope.transformers = transformers;
templateUrl: 'app/panels/table/editor.html', $scope.unitFormats = kbn.getUnitFormats();
link: function(scope, elem) { $scope.colorModes = [
scope.transformers = transformers; {text: 'Disabled', value: null},
scope.unitFormats = kbn.getUnitFormats(); {text: 'Cell', value: 'cell'},
scope.colorModes = [ {text: 'Value', value: 'value'},
{text: 'Disabled', value: null}, {text: 'Row', value: 'row'},
{text: 'Cell', value: 'cell'}, ];
{text: 'Value', value: 'value'}, $scope.columnTypes = [
{text: 'Row', value: 'row'}, {text: 'Number', value: 'number'},
]; {text: 'String', value: 'string'},
scope.columnTypes = [ {text: 'Date', value: 'date'},
{text: 'Number', value: 'number'}, ];
{text: 'String', value: 'string'}, $scope.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%'];
{text: 'Date', value: 'date'}, $scope.dateFormats = [
]; {text: 'YYYY-MM-DD HH:mm:ss', value: 'YYYY-MM-DD HH:mm:ss'},
scope.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%']; {text: 'MM/DD/YY h:mm:ss a', value: 'MM/DD/YY h:mm:ss a'},
scope.dateFormats = [ {text: 'MMMM D, YYYY LT', value: 'MMMM D, YYYY LT'},
{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'}, $scope.addColumnSegment = uiSegmentSrv.newPlusButton();
];
$scope.getColumnOptions = function() {
scope.updateColumnsMenu = function(data) { if (!$scope.dataRaw) {
scope.columnsMenu = transformers[scope.panel.transform].getColumns(data); return $q.when([]);
scope.showColumnOptions = true; }
}; var columns = transformers[$scope.panel.transform].getColumns($scope.dataRaw);
var segments = _.map(columns, (c: any) => uiSegmentSrv.newSegment({value: c.text}));
scope.$on('render', function(event, table, rawData) { return $q.when(segments);
scope.updateColumnsMenu(rawData); };
});
$scope.addColumn = function() {
scope.addColumn = function(menuItem) { $scope.panel.columns.push({text: $scope.addColumnSegment.value, value: $scope.addColumnSegment.value});
scope.panel.columns.push({text: menuItem.text, value: menuItem.value}); $scope.render();
scope.render();
var plusButton = uiSegmentSrv.newPlusButton();
$scope.addColumnSegment.html = plusButton.html;
};
$scope.transformChanged = function() {
$scope.panel.columns = [];
$scope.render();
};
$scope.removeColumn = function(column) {
$scope.panel.columns = _.without($scope.panel.columns, column);
$scope.render();
};
$scope.setUnitFormat = function(column, subItem) {
column.unit = subItem.value;
$scope.render();
};
$scope.addColumnStyle = function() {
var columnStyleDefaults = {
unit: 'short',
type: 'number',
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: [],
}; };
scope.transformChanged = function() { $scope.panel.styles.push(angular.copy(columnStyleDefaults));
scope.panel.columns = []; };
scope.updateColumnsMenu();
scope.render();
};
scope.removeColumn = function(column) { $scope.removeColumnStyle = function(style) {
scope.panel.columns = _.without(scope.panel.columns, column); $scope.panel.styles = _.without($scope.panel.styles, style);
scope.render(); };
};
scope.setUnitFormat = function(column, subItem) { $scope.getColumnNames = function() {
column.unit = subItem.value; if (!$scope.table) {
scope.render(); return [];
}; }
return _.map($scope.table.columns, function(col: any) {
scope.addColumnStyle = function() { return col.text;
var columnStyleDefaults = { });
unit: 'short', };
type: 'number',
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: [],
};
scope.panel.styles.push(angular.copy(columnStyleDefaults));
};
scope.removeColumnStyle = function(style) { }
scope.panel.styles = _.without(scope.panel.styles, style); }
};
scope.getColumnNames = function() {
if (!scope.table) {
return [];
}
return _.map(scope.table.columns, function(col: any) {
return col.text;
});
};
scope.updateColumnsMenu(scope.dataRaw); export function tablePanelEditor($q, uiSegmentSrv) {
} 'use strict';
return {
restrict: 'E',
scope: true,
templateUrl: 'app/panels/table/editor.html',
controller: TablePanelEditorCtrl,
}; };
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment