stackdriver: refactor dropdown component

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

@@ -8,31 +8,15 @@ interface Props {
 }
 
 const SimpleDropdown: SFC<Props> = props => {
+  const { label, onValueChange, value, options } = props;
   return (
     <div className="gf-form max-width-21">
-      <span className="gf-form-label width-7">{props.label}</span>
+      <span className="gf-form-label width-7">{label}</span>
       <div className="gf-form-select-wrapper max-width-14">
-        <select className="gf-form-input" required onChange={props.onValueChange} value={props.value}>
-          {props.options.map((qt, i) => (
-            <option key={i} value={qt}>
-              {qt}
-            </option>
-          ))}
-        </select>
-      </div>
-    </div>
-  );
-};
-
-export const KeyValueDropdown: SFC<Props> = props => {
-  return (
-    <div className="gf-form max-width-21">
-      <span className="gf-form-label width-7">{props.label}</span>
-      <div className="gf-form-select-wrapper max-width-14">
-        <select className="gf-form-input" required onChange={props.onValueChange} value={props.value}>
-          {props.options.map((qt, i) => (
-            <option key={i} value={qt.value}>
-              {qt.name}
+        <select className="gf-form-input" required onChange={onValueChange} value={value}>
+          {options.map(({ value, name }, i) => (
+            <option key={i} value={value}>
+              {name}
             </option>
           ))}
         </select>

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

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import SimpleDropdown, { KeyValueDropdown } from './SimpleDropdown';
+import SimpleDropdown from './SimpleDropdown';
 import { TemplateQueryProps } from 'app/types/plugins';
 import { getMetricTypesByService, extractServicesFromMetricDescriptors } from '../functions';
 import defaultsDeep from 'lodash/defaultsDeep';
@@ -113,7 +113,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
         return (
           <SimpleDropdown
             value={this.state.labelKey}
-            options={this.state.labels}
+            options={this.state.labels.map(l => ({ value: l, name: l }))}
             onValueChange={this.onLabelKeyChange}
             label="Resource Labels"
           />
@@ -122,7 +122,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
         return (
           <SimpleDropdown
             value={this.state.labelKey}
-            options={this.state.labels}
+            options={this.state.labels.map(l => ({ value: l, name: l }))}
             onValueChange={this.onLabelKeyChange}
             label="Metric Labels"
           />
@@ -136,7 +136,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
     switch (queryType) {
       case MetricFindQueryTypes.MetricTypes:
         return (
-          <KeyValueDropdown
+          <SimpleDropdown
             value={this.state.service}
             options={this.state.services}
             onValueChange={this.onServiceChange}
@@ -150,13 +150,13 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
         return (
           <React.Fragment>
             {this.state.labels.join(',')}
-            <KeyValueDropdown
+            <SimpleDropdown
               value={this.state.service}
               options={this.state.services}
               onValueChange={this.onServiceChange}
               label="Services"
             />
-            <KeyValueDropdown
+            <SimpleDropdown
               value={this.state.metricType}
               options={this.state.metricTypes}
               onValueChange={this.onMetricTypeChange}
@@ -169,13 +169,13 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
       case MetricFindQueryTypes.Aggregations:
         return (
           <React.Fragment>
-            <KeyValueDropdown
+            <SimpleDropdown
               value={this.state.service}
               options={this.state.services}
               onValueChange={this.onServiceChange}
               label="Services"
             />
-            <KeyValueDropdown
+            <SimpleDropdown
               value={this.state.metricType}
               options={this.state.metricTypes}
               onValueChange={this.onMetricTypeChange}
@@ -191,7 +191,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
   render() {
     return (
       <React.Fragment>
-        <KeyValueDropdown
+        <SimpleDropdown
           value={this.state.type}
           options={this.queryTypes}
           onValueChange={this.handleQueryTypeChange}