Wrap react select component in angular directive

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

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

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

 <div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Service</span>
-    <select
-      class="gf-form-input width-12"
-      ng-model="ctrl.service"
-      ng-options="f.value as f.text for f in ctrl.services"
-      ng-change="ctrl.onServiceChange(ctrl.service)"
-    ></select>
+    <option-picker
+      onChange="ctrl.handleServiceChange"
+      selected="ctrl.service"
+      options="ctrl.services"
+      placeholder="ctrl.defaultDropdownValue"
+      className="width-12"
+    ></option-picker>
   </div>
+  <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
+</div>
+<div class="gf-form-inline">
   <div class="gf-form">
     <span class="gf-form-label width-9 query-keyword">Metric</span>
-    <gf-form-dropdown
-      model="ctrl.metricType"
-      get-options="ctrl.metrics"
-      class="min-width-20"
-      disabled
-      type="text"
-      allow-custom="true"
-      lookup-text="true"
-      css-class="min-width-12"
-      on-change="ctrl.onMetricTypeChange()"
-    ></gf-form-dropdown>
+    <option-picker
+      onChange="ctrl.handleMetricTypeChange"
+      selected="ctrl.metricType"
+      options="ctrl.metrics"
+      placeholder="ctrl.defaultDropdownValue"
+      className="width-12"
+    ></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,6 +2,8 @@ import _ from 'lodash';
 import { QueryCtrl } from 'app/plugins/sdk';
 import './query_aggregation_ctrl';
 import './query_filter_ctrl';
+import { OptionPicker } from './components/OptionPicker';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface QueryMeta {
   alignmentPeriod: string;
@@ -64,6 +66,13 @@ 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, [
+      'options',
+      'onChange',
+      'selected',
+      'className',
+      'placeholder',
+    ]);
   }
 
   onDataReceived(dataList) {

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

@@ -59,6 +59,13 @@ export class StackdriverFilterCtrl {
       .then(this.getLabels.bind(this));
 
     this.initSegments($scope.hideGroupBys);
+    this.handleMetricTypeChange = this.handleMetricTypeChange.bind(this);
+    this.handleServiceChange = this.handleServiceChange.bind(this);
+  }
+
+  handleMetricTypeChange(value) {
+    this.metricType = value;
+    this.onMetricTypeChange();
   }
 
   initSegments(hideGroupBys: boolean) {
@@ -110,7 +117,7 @@ export class StackdriverFilterCtrl {
     const services = this.metricDescriptors.map(m => {
       return {
         value: m.service,
-        text: m.serviceShortName,
+        label: m.serviceShortName,
       };
     });
 
@@ -128,7 +135,8 @@ export class StackdriverFilterCtrl {
         value: m.type,
         serviceShortName: m.serviceShortName,
         text: m.displayName,
-        title: m.description,
+        label: m.displayName,
+        description: m.description,
       };
     });
 
@@ -167,8 +175,8 @@ export class StackdriverFilterCtrl {
     });
   }
 
-  onServiceChange() {
-    this.target.service = this.service;
+  handleServiceChange(service) {
+    this.target.service = this.service = service;
     this.metrics = this.getMetricsList();
     this.setMetricType();
     this.getLabels();