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

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);

public/app/panels/table/controller.ts

@@ -60,7 +60,6 @@ export class TablePanelCtrl {
       }
 
       _.defaults($scope.panel, panelDefaults);
-
       panelSrv.init($scope);
     };
 

public/app/panels/table/editor.html

@@ -16,7 +16,7 @@
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-			<div class="tight-form" ng-if="showColumnOptions">
+			<div class="tight-form">
 				<ul class="tight-form-list">
 					<li class="tight-form-item" style="width: 140px">
 						Columns
@@ -27,7 +27,8 @@
 							{{column.text}}
 						</span>
 					</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>
 				</ul>
 				<div class="clearfix"></div>

public/app/panels/table/editor.ts

@@ -1,6 +1,6 @@
-
 ///<reference path="../../headers/common.d.ts" />
 
+
 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() {
-  '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();
+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.transformChanged = function() {
-        scope.panel.columns = [];
-        scope.updateColumnsMenu();
-        scope.render();
-      };
+      $scope.panel.styles.push(angular.copy(columnStyleDefaults));
+    };
 
-      scope.removeColumn = function(column) {
-        scope.panel.columns = _.without(scope.panel.columns, column);
-        scope.render();
-      };
+    $scope.removeColumnStyle = function(style) {
+      $scope.panel.styles = _.without($scope.panel.styles, style);
+    };
 
-      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.getColumnNames = function() {
+      if (!$scope.table) {
+        return [];
+      }
+      return _.map($scope.table.columns, function(col: any) {
+        return col.text;
+      });
+    };
 
-      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,
   };
 }