stackdriver: add metric labels query

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

@@ -1,23 +1,37 @@
 import React, { PureComponent } from 'react';
-// import StackdriverDatasource from '../datasource';
 import ServiceSelector from './ServiceSelector';
 import MetricTypeSelector from './MetricTypeSelector';
+import MetricLabelKeySelector from './MetricLabelKeySelector';
 import { TemplateQueryProps } from 'app/types/plugins';
 import defaultsDeep from 'lodash/defaultsDeep';
+import has from 'lodash/has';
 
 export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQueryProps, any> {
   queryTypes: Array<{ value: string; name: string }> = [
     { value: 'services', name: 'Services' },
     { value: 'metricTypes', name: 'Metric Types' },
-    { value: 'metricLabels', name: 'Metric labels For Metric Type' },
+    { value: 'metricLabels', name: 'Metric Labels' },
+    { value: 'resourceLabels', name: 'Resource Labels' },
+    { value: 'resourceTypes', name: 'Resource Types' },
+    { value: 'aggregations', name: 'Aggregations' },
+    { value: 'alignerns', name: 'Aligners' },
+    { value: 'alignmentPeriods', name: 'Alignment Periods' },
   ];
-  defaults = { type: undefined, metricDescriptors: [], service: undefined, metricType: undefined };
+  defaults = {
+    type: undefined,
+    metricDescriptors: [],
+    service: undefined,
+    metricType: undefined,
+    metricLabels: [],
+    metricLabelKey: undefined,
+  };
 
   constructor(props: TemplateQueryProps) {
     super(props);
     this.handleQueryTypeChange = this.handleQueryTypeChange.bind(this);
     this.onServiceChange = this.onServiceChange.bind(this);
     this.onMetricTypeChange = this.onMetricTypeChange.bind(this);
+    this.onMetricLabelKeyChange = this.onMetricLabelKeyChange.bind(this);
     this.state = defaultsDeep(this.props.query, this.defaults);
   }
 
@@ -26,6 +40,14 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
     this.setState({ metricDescriptors });
   }
 
+  async loadTimeSeriesData() {
+    const refId = 'StackdriverTemplateQueryComponent';
+    const response = await this.props.datasource.getLabels(this.state.metricType, refId);
+    if (has(response, 'meta.metricLabels')) {
+      this.setState({ metricLabels: Object.keys(response.meta.metricLabels) });
+    }
+  }
+
   handleQueryTypeChange(event) {
     this.setState({ type: event.target.value });
   }
@@ -36,10 +58,15 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
 
   onMetricTypeChange(event) {
     this.setState({ metricType: event.target.value });
+    this.loadTimeSeriesData();
+  }
+
+  onMetricLabelKeyChange(event) {
+    this.setState({ metricLabelKey: event.target.value });
   }
 
   componentDidUpdate() {
-    const { metricDescriptors, ...queryModel } = this.state;
+    const { metricDescriptors, metricLabels, ...queryModel } = this.state;
     this.props.onChange(queryModel);
   }
 
@@ -58,6 +85,11 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
               metricDescriptors={this.state.metricDescriptors}
               onMetricTypeChange={this.onMetricTypeChange}
             />
+            <MetricLabelKeySelector
+              metricLabelKey={this.state.metricLabelKey}
+              metricLabels={this.state.metricLabels}
+              onMetricLabelKeyChange={this.onMetricLabelKeyChange}
+            />
           </React.Fragment>
         );
       default: