use new generic picker

public/app/plugins/datasource/stackdriver/components/OptionGroupPicker.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import Select from 'react-select';
-import _ from 'lodash';
-
-import GroupHeading from 'app/core/components/Picker/GroupHeading';
-import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
-import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
-import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
-
-export interface Props {
-  onChange: (value: string) => void;
-  groups: any[];
-  searchable: boolean;
-  selected: string;
-  placeholder?: string;
-  className?: string;
-}
-
-export class OptionGroupPicker extends React.Component<Props, any> {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { onChange, groups, selected, placeholder, className, searchable } = this.props;
-    const options = _.flatten(groups.map(o => o.options));
-    const selectedOption = options.find(option => option.value === selected);
-
-    return (
-      <Select
-        placeholder={placeholder}
-        classNamePrefix={`gf-form-select-box`}
-        className={className}
-        options={groups}
-        components={{
-          GroupHeading,
-          Option: DescriptionOption,
-          IndicatorsContainer,
-          NoOptionsMessage,
-        }}
-        styles={ResetStyles}
-        isSearchable={searchable}
-        onChange={option => onChange(option.value)}
-        getOptionValue={i => i.value}
-        getOptionLabel={i => i.label}
-        value={selectedOption}
-        noOptionsMessage={() => 'No metrics found'}
-      />
-    );
-  }
-}

public/app/plugins/datasource/stackdriver/components/OptionPicker.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import Select from 'react-select';
-import _ from 'lodash';
-
-import DescriptionOption from 'app/core/components/Picker/DescriptionOption';
-import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
-import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
-
-export interface Props {
-  onChange: (value: string) => void;
-  options: any[];
-  searchable: boolean;
-  selected: string;
-  placeholder?: string;
-  className?: string;
-  groups?: boolean;
-}
-
-export class OptionPicker extends React.Component<Props, any> {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { onChange, options, selected, placeholder, className, searchable } = this.props;
-    const selectedOption = options.find(option => option.value === selected);
-
-    return (
-      <Select
-        placeholder={placeholder}
-        classNamePrefix={`gf-form-select-box`}
-        className={className}
-        options={options}
-        components={{
-          Option: DescriptionOption,
-          IndicatorsContainer,
-          NoOptionsMessage,
-        }}
-        styles={ResetStyles}
-        isSearchable={searchable}
-        onChange={option => onChange(option.value)}
-        getOptionValue={i => i.value}
-        getOptionLabel={i => i.label}
-        value={selectedOption}
-        noOptionsMessage={() => 'No metrics found'}
-      />
-    );
-  }
-}

public/app/plugins/datasource/stackdriver/components/StackdriverPicker.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import _ from 'lodash';
+import Select from 'app/core/components/Select/Select';
+
+export interface Props {
+  onChange: (value: string) => void;
+  options: any[];
+  searchable: boolean;
+  selected: string;
+  placeholder?: string;
+  className?: string;
+  groups?: boolean;
+}
+
+export class StackdriverPicker extends React.Component<Props, any> {
+  constructor(props) {
+    super(props);
+  }
+
+  extractOptions(options) {
+    return options.length > 0 && options.every(o => o.options) ? _.flatten(options.map(o => o.options)) : options;
+  }
+
+  onChange = item => {
+    const extractedOptions = this.extractOptions(this.props.options);
+    const option = extractedOptions.find(option => option.value === item.value);
+    this.props.onChange(option.value);
+  };
+
+  render() {
+    const { options, selected, placeholder, className, searchable } = this.props;
+    const extractedOptions = this.extractOptions(options);
+    const selectedOption = extractedOptions.find(option => option.value === selected);
+
+    return (
+      <Select
+        className={className}
+        isMulti={false}
+        isClearable={false}
+        backspaceRemovesValue={false}
+        onChange={this.onChange}
+        options={options}
+        autoFocus={false}
+        isSearchable={searchable}
+        openMenuOnFocus={true}
+        maxMenuHeight={500}
+        placeholder={placeholder}
+        noOptionsMessage={() => 'No options found'}
+        value={selectedOption}
+      />
+    );
+  }
+}

public/app/plugins/datasource/stackdriver/partials/query.aggregation.html

@@ -2,10 +2,10 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-group-picker
+      <option-picker
         onChange="ctrl.handleAggregationChange"
         selected="ctrl.target.aggregation.crossSeriesReducer"
-        groups="ctrl.aggOptions"
+        options="ctrl.aggOptions"
         searchable="true"
         placeholder="'Select Aggregation'"
         className="'width-15'"
@@ -25,14 +25,14 @@
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-12">Aligner</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-group-picker
+      <option-picker
         onChange="ctrl.handleAlignmentChange"
         selected="ctrl.target.aggregation.perSeriesAligner"
-        groups="ctrl.alignOptions"
+        options="ctrl.alignOptions"
         searchable="true"
         placeholder="'Select Alignment'"
         className="'width-15'"
-      ></option-group-picker>
+      ></option-picker>
     </div>
 
     <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
@@ -42,14 +42,14 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <option-group-picker
+      <option-picker
         onChange="ctrl.handleAlignmentPeriodChange"
         selected="ctrl.target.aggregation.alignmentPeriod"
-        groups="ctrl.alignmentPeriods"
+        options="ctrl.alignmentPeriods"
         searchable="true"
         placeholder="'Select Alignment'"
         className="'width-15'"
-      ></option-group-picker>
+      ></option-picker>
     </div>
   </div>
 

public/app/plugins/datasource/stackdriver/partials/query.filter.html

@@ -15,14 +15,14 @@
 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <option-group-picker
+    <option-picker
       onChange="ctrl.handleMetricTypeChange"
       selected="ctrl.target.metricType"
-      groups="ctrl.getMetricGroups()"
+      options="ctrl.getMetricGroups()"
       searchable="true"
       placeholder="'Select Metric'"
       className="'width-15'"
-    ></option-group-picker>
+    ></option-picker>
   </div>
   <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
 </div>

public/app/plugins/datasource/stackdriver/query_ctrl.ts

@@ -2,8 +2,7 @@ import _ from 'lodash';
 import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
-import { OptionPicker } from './components/OptionPicker';
+import { StackdriverPicker } from './components/StackdriverPicker';
-import { OptionGroupPicker } from './components/OptionGroupPicker';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface QueryMeta {
@@ -64,7 +63,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     _.defaultsDeep(this.target, this.defaults);
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
-    react2AngularDirective('optionPicker', OptionPicker, [
+    react2AngularDirective('optionPicker', StackdriverPicker, [
       'options',
       'onChange',
       'selected',
@@ -72,14 +71,6 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       'className',
       'placeholder',
     ]);
-    react2AngularDirective('optionGroupPicker', OptionGroupPicker, [
-      'groups',
-      'onChange',
-      'selected',
-      'searchable',
-      'className',
-      'placeholder',
-    ]);
   }
 
   onDataReceived(dataList) {