stackdriver: add metric labels query

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

@@ -1,4 +1,5 @@
 import { extractServicesFromMetricDescriptors, getMetricTypesByService } from './functions';
+import has from 'lodash/has';
 
 export default class StackdriverMetricFindQuery {
   constructor(private datasource) {}
@@ -9,6 +10,8 @@ export default class StackdriverMetricFindQuery {
         return this.handleServiceQueryType();
       case 'metricTypes':
         return this.handleMetricTypesQueryType(query);
+      case 'metricLabels':
+        return this.handleMetricLabelsQueryType(query);
       default:
         return [];
     }
@@ -33,4 +36,18 @@ export default class StackdriverMetricFindQuery {
       expandable: true,
     }));
   }
+
+  async handleMetricLabelsQueryType({ metricType, metricLabelKey }) {
+    if (!metricType || !metricLabelKey) {
+      return [];
+    }
+    const refId = 'handleMetricLabelsQueryType';
+    const response = await this.datasource.getLabels(metricType, refId);
+    return has(response, `meta.metricLabels.${metricLabelKey}`)
+      ? response.meta.metricLabels[metricLabelKey].map(s => ({
+          text: s,
+          expandable: true,
+        }))
+      : [];
+  }
 }

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

@@ -0,0 +1,26 @@
+import React, { SFC } from 'react';
+
+interface Props {
+  onMetricLabelKeyChange: any;
+  metricLabels: any;
+  metricLabelKey: string;
+}
+
+const MetricLabelKeySelector: SFC<Props> = props => {
+  return (
+    <div className="gf-form max-width-21">
+      <span className="gf-form-label width-7">Metric Labels</span>
+      <div className="gf-form-select-wrapper max-width-14">
+        <select className="gf-form-input" required onChange={props.onMetricLabelKeyChange}>
+          {props.metricLabels.map((qt, i) => (
+            <option key={i} value={qt} ng-if="false">
+              {qt}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+};
+
+export default MetricLabelKeySelector;

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

@@ -14,7 +14,7 @@ const MetricTypeSelector: SFC<Props> = props => {
     }
 
     return getMetricTypesByService(props.metricDescriptors, props.selectedService).map(m => ({
-      value: m.service,
+      value: m.type,
       name: m.displayName,
     }));
   };

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: