From fb9e8d21667fb79694ea6b64397ddd277b1db041 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 1 Dec 2015 10:16:11 +0100 Subject: [PATCH] feat(table panel): fixed issue with column selection for new table panel --- public/app/core/directives/metric_segment.js | 1 - public/app/panels/table/controller.ts | 1 - public/app/panels/table/editor.html | 5 +- public/app/panels/table/editor.ts | 176 ++++++++++--------- 4 files changed, 96 insertions(+), 87 deletions(-) diff --git a/public/app/core/directives/metric_segment.js b/public/app/core/directives/metric_segment.js index d8e3fb90c95..1d07544bb2d 100644 --- a/public/app/core/directives/metric_segment.js +++ b/public/app/core/directives/metric_segment.js @@ -20,7 +20,6 @@ function (_, $, coreModule) { getOptions: "&", onChange: "&", }, - link: function($scope, elem) { var $input = $(inputTemplate); var $button = $(buttonTemplate); diff --git a/public/app/panels/table/controller.ts b/public/app/panels/table/controller.ts index 4547a9d7896..09e77108631 100644 --- a/public/app/panels/table/controller.ts +++ b/public/app/panels/table/controller.ts @@ -60,7 +60,6 @@ export class TablePanelCtrl { } _.defaults($scope.panel, panelDefaults); - panelSrv.init($scope); }; diff --git a/public/app/panels/table/editor.html b/public/app/panels/table/editor.html index b3632c96d19..56b49a87567 100644 --- a/public/app/panels/table/editor.html +++ b/public/app/panels/table/editor.html @@ -16,7 +16,7 @@
-
+
  • Columns @@ -27,7 +27,8 @@ {{column.text}}
    • -
  • +
  • +
diff --git a/public/app/panels/table/editor.ts b/public/app/panels/table/editor.ts index 2908023d330..e41ff422800 100644 --- a/public/app/panels/table/editor.ts +++ b/public/app/panels/table/editor.ts @@ -1,6 +1,6 @@ - /// + import angular = require('angular'); import $ = require('jquery'); import _ = require('lodash'); @@ -9,93 +9,103 @@ import moment = require('moment'); import {transformers} from './transformers'; -export function tablePanelEditor() { +export class TablePanelEditorCtrl { + + /** @ngInject */ + constructor($scope, $q, uiSegmentSrv) { + $scope.transformers = transformers; + $scope.unitFormats = kbn.getUnitFormats(); + $scope.colorModes = [ + {text: 'Disabled', value: null}, + {text: 'Cell', value: 'cell'}, + {text: 'Value', value: 'value'}, + {text: 'Row', value: 'row'}, + ]; + $scope.columnTypes = [ + {text: 'Number', value: 'number'}, + {text: 'String', value: 'string'}, + {text: 'Date', value: 'date'}, + ]; + $scope.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%']; + $scope.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'}, + ]; + + $scope.addColumnSegment = uiSegmentSrv.newPlusButton(); + + $scope.getColumnOptions = function() { + if (!$scope.dataRaw) { + return $q.when([]); + } + var columns = transformers[$scope.panel.transform].getColumns($scope.dataRaw); + var segments = _.map(columns, (c: any) => uiSegmentSrv.newSegment({value: c.text})); + return $q.when(segments); + }; + + $scope.addColumn = function() { + $scope.panel.columns.push({text: $scope.addColumnSegment.value, value: $scope.addColumnSegment.value}); + $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.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; + }); + }; + + } +} + + +export function tablePanelEditor($q, uiSegmentSrv) { 'use strict'; return { restrict: 'E', scope: true, templateUrl: 'app/panels/table/editor.html', - link: function(scope, elem) { - scope.transformers = transformers; - scope.unitFormats = kbn.getUnitFormats(); - scope.colorModes = [ - {text: 'Disabled', value: null}, - {text: 'Cell', value: 'cell'}, - {text: 'Value', value: 'value'}, - {text: 'Row', value: 'row'}, - ]; - scope.columnTypes = [ - {text: 'Number', value: 'number'}, - {text: 'String', value: 'string'}, - {text: 'Date', value: 'date'}, - ]; - scope.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%']; - scope.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'}, - ]; - - scope.updateColumnsMenu = function(data) { - scope.columnsMenu = transformers[scope.panel.transform].getColumns(data); - scope.showColumnOptions = true; - }; - - scope.$on('render', function(event, table, rawData) { - scope.updateColumnsMenu(rawData); - }); - - scope.addColumn = function(menuItem) { - scope.panel.columns.push({text: menuItem.text, value: menuItem.value}); - scope.render(); - }; - - scope.transformChanged = function() { - scope.panel.columns = []; - scope.updateColumnsMenu(); - 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.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); - } + controller: TablePanelEditorCtrl, }; }