stackdriver: add selector components for service and metric type

public/app/plugins/datasource/stackdriver/metricTypes.tsx

@@ -0,0 +1,43 @@
+import React, { SFC } from 'react';
+import uniqBy from 'lodash/uniqBy';
+
+interface Props {
+  onMetricTypeChanged: any;
+  selectedService: string;
+  metricDescriptors: any[];
+}
+
+const MetricTypes: SFC<Props> = props => {
+  const extractMetricTypes = () => {
+    if (!props.selectedService) {
+      return [];
+    }
+
+    return props.metricDescriptors.filter(m => m.service === props.selectedService).map(m => ({
+      value: m.service,
+      name: m.displayName,
+    }));
+  };
+
+  uniqBy(props.metricDescriptors, 'service').map(m => ({
+    value: m.service,
+    name: m.serviceShortName,
+  }));
+
+  return (
+    <div className="gf-form max-width-21">
+      <span className="gf-form-label width-7">Metric Types</span>
+      <div className="gf-form-select-wrapper max-width-14">
+        <select className="gf-form-input" required onChange={props.onMetricTypeChanged}>
+          {extractMetricTypes().map((qt, i) => (
+            <option key={i} value={qt.value} ng-if="false">
+              {qt.name}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+};
+
+export default MetricTypes;

public/app/plugins/datasource/stackdriver/services.tsx

@@ -0,0 +1,32 @@
+import React, { SFC } from 'react';
+import uniqBy from 'lodash/uniqBy';
+
+interface Props {
+  onServiceChange: any;
+  metricDescriptors: any[];
+}
+
+const Services: SFC<Props> = props => {
+  const extractServices = () =>
+    uniqBy(props.metricDescriptors, 'service').map(m => ({
+      value: m.service,
+      name: m.serviceShortName,
+    }));
+
+  return (
+    <div className="gf-form max-width-21">
+      <span className="gf-form-label width-7">Service</span>
+      <div className="gf-form-select-wrapper max-width-14">
+        <select className="gf-form-input" required onChange={props.onServiceChange}>
+          {extractServices().map((qt, i) => (
+            <option key={i} value={qt.value} ng-if="false">
+              {qt.name}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+};
+
+export default Services;

public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx

@@ -1,5 +1,7 @@
 import React, { PureComponent } from 'react';
 import StackdriverDatasource from './datasource';
+import Services from './services';
+import MetricTypes from './metricTypes';
 
 interface Props {
   datasource: StackdriverDatasource;
@@ -8,29 +10,74 @@ interface Props {
 }
 
 export class StackdriverTemplateQueryCtrl extends PureComponent<Props, any> {
+  queryTypes: Array<{ value: string; name: string }> = [
+    { value: 'services', name: 'Services' },
+    { value: 'metricTypes', name: 'Metric Types' },
+    { value: 'metricLabels', name: 'Metric labels For Metric Type' },
+  ];
+
   constructor(props) {
     super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.onServiceChange = this.onServiceChange.bind(this);
+    this.onMetricTypeChanged = this.onMetricTypeChanged.bind(this);
+    this.state = { queryType: undefined, metricDescriptors: [], service: undefined, metricType: undefined };
   }
 
   async componentDidMount() {
     const metricDescriptors = await this.props.datasource.getMetricTypes(this.props.datasource.projectName);
-    console.log(metricDescriptors);
+    this.setState({ metricDescriptors });
+  }
+
+  handleChange(event) {
+    this.setState({ queryType: event.target.value });
+  }
+
+  onServiceChange(event) {
+    this.setState({ service: event.target.value });
+  }
+
+  onMetricTypeChanged(event) {
+    this.setState({ metricType: event.target.value });
+  }
+
+  renderSwitch(queryType) {
+    switch (queryType) {
+      case 'metricTypes':
+        return <Services metricDescriptors={this.state.metricDescriptors} onServiceChange={this.onServiceChange} />;
+      case 'metricLabels':
+        return (
+          <React.Fragment>
+            <Services metricDescriptors={this.state.metricDescriptors} onServiceChange={this.onServiceChange} />
+            <MetricTypes
+              selectedService={this.state.service}
+              metricDescriptors={this.state.metricDescriptors}
+              onMetricTypeChanged={this.onMetricTypeChanged}
+            />
+          </React.Fragment>
+        );
+      default:
+        return '';
+    }
   }
 
   render() {
     return (
-      <div className="gf-form">
-        <span className="gf-form-label width-7">Query</span>
-        <input
-          type="text"
-          className="gf-form-input"
-          // value={this.state.value}
-          // onChange={this.handleChange}
-          // onBlur={this.handleBlur}
-          placeholder="metric name or tags query"
-          required
-        />
-      </div>
+      <React.Fragment>
+        <div className="gf-form max-width-21">
+          <span className="gf-form-label width-7">Query Type</span>
+          <div className="gf-form-select-wrapper max-width-14">
+            <select className="gf-form-input" required onChange={this.handleChange}>
+              {this.queryTypes.map((qt, i) => (
+                <option key={i} value={qt.value} ng-if="false">
+                  {qt.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        {this.renderSwitch(this.state.queryType)}
+      </React.Fragment>
     );
   }
 }