stackdriver: add support for resource label queries

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

@@ -11,7 +11,8 @@ export default class StackdriverMetricFindQuery {
       case 'metricTypes':
         return this.handleMetricTypesQueryType(query);
       case 'metricLabels':
-        return this.handleMetricLabelsQueryType(query);
+      case 'resourceLabels':
+        return this.handleLabelQueryType(query);
       default:
         return [];
     }
@@ -39,17 +40,19 @@ export default class StackdriverMetricFindQuery {
     }));
   }
 
-  async handleMetricLabelsQueryType({ metricType, metricLabelKey }) {
+  async handleLabelQueryType({ type, metricType, metricLabelKey, resourceLabelKey }) {
-    if (!metricType || !metricLabelKey) {
+    if (!metricType) {
       return [];
     }
-    const refId = 'handleMetricLabelsQueryType';
+    const key = type === 'metricLabels' ? metricLabelKey : resourceLabelKey;
+    const refId = 'handleLabelsQueryType';
     const response = await this.datasource.getLabels(metricType, refId);
-    return has(response, `meta.metricLabels.${metricLabelKey}`)
+    if (!has(response, `meta.${type}.${key}`)) {
-      ? response.meta.metricLabels[metricLabelKey].map(s => ({
+      return [];
-          text: s,
+    }
-          expandable: true,
+    return response.meta[type][key].map(s => ({
-        }))
+      text: s,
-      : [];
+      expandable: true,
+    }));
   }
 }

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

@@ -1,18 +1,19 @@
 import React, { SFC } from 'react';
 
 interface Props {
-  onMetricLabelKeyChange: any;
+  onValueChange: any;
-  metricLabels: any;
+  options: any;
-  metricLabelKey: string;
+  value: string;
+  label: string;
 }
 
-const MetricLabelKeySelector: SFC<Props> = props => {
+const SimpleDropdown: SFC<Props> = props => {
   return (
     <div className="gf-form max-width-21">
-      <span className="gf-form-label width-7">Metric Labels</span>
+      <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.onMetricLabelKeyChange}>
+        <select className="gf-form-input" required onChange={props.onValueChange}>
-          {props.metricLabels.map((qt, i) => (
+          {props.options.map((qt, i) => (
             <option key={i} value={qt} ng-if="false">
               {qt}
             </option>
@@ -23,4 +24,4 @@ const MetricLabelKeySelector: SFC<Props> = props => {
   );
 };
 
-export default MetricLabelKeySelector;
+export default SimpleDropdown;

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

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import ServiceSelector from './ServiceSelector';
 import MetricTypeSelector from './MetricTypeSelector';
-import MetricLabelKeySelector from './MetricLabelKeySelector';
+import SimpleDropdown from './SimpleDropdown';
 import { TemplateQueryProps } from 'app/types/plugins';
 import defaultsDeep from 'lodash/defaultsDeep';
 import has from 'lodash/has';
@@ -17,13 +17,16 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
     { value: 'alignerns', name: 'Aligners' },
     { value: 'alignmentPeriods', name: 'Alignment Periods' },
   ];
+
   defaults = {
     type: undefined,
     metricDescriptors: [],
     service: undefined,
     metricType: undefined,
     metricLabels: [],
+    resourceLabels: [],
     metricLabelKey: undefined,
+    resourceLabelKey: undefined,
   };
 
   constructor(props: TemplateQueryProps) {
@@ -32,6 +35,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
     this.onServiceChange = this.onServiceChange.bind(this);
     this.onMetricTypeChange = this.onMetricTypeChange.bind(this);
     this.onMetricLabelKeyChange = this.onMetricLabelKeyChange.bind(this);
+    this.onResourceLabelKeyChange = this.onResourceLabelKeyChange.bind(this);
     this.state = defaultsDeep(this.props.query, this.defaults);
   }
 
@@ -43,13 +47,20 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
   async loadTimeSeriesData() {
     const refId = 'StackdriverTemplateQueryComponent';
     const response = await this.props.datasource.getLabels(this.state.metricType, refId);
-    if (has(response, 'meta.metricLabels')) {
+    if (this.isLabelQuery(this.state.type) && has(response, `meta.${this.state.type}`)) {
-      this.setState({ metricLabels: Object.keys(response.meta.metricLabels) });
+      this.setState({ [this.state.type]: Object.keys(response.meta[this.state.type]) });
     }
   }
 
+  isLabelQuery(queryType) {
+    return ['metricLabels', 'resourceLabels'].indexOf(queryType) !== -1;
+  }
+
   handleQueryTypeChange(event) {
     this.setState({ type: event.target.value });
+    if (this.isLabelQuery(event.target.value)) {
+      this.loadTimeSeriesData();
+    }
   }
 
   onServiceChange(event) {
@@ -58,15 +69,21 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
 
   onMetricTypeChange(event) {
     this.setState({ metricType: event.target.value });
-    this.loadTimeSeriesData();
+    if (this.isLabelQuery(this.state.type)) {
+      this.loadTimeSeriesData();
+    }
   }
 
   onMetricLabelKeyChange(event) {
     this.setState({ metricLabelKey: event.target.value });
   }
 
+  onResourceLabelKeyChange(event) {
+    this.setState({ resourceLabelKey: event.target.value });
+  }
+
   componentDidUpdate() {
-    const { metricDescriptors, metricLabels, ...queryModel } = this.state;
+    const { metricDescriptors, metricLabels, resourceLabels, ...queryModel } = this.state;
     this.props.onChange(queryModel);
   }
 
@@ -77,6 +94,23 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
           <ServiceSelector metricDescriptors={this.state.metricDescriptors} onServiceChange={this.onServiceChange} />
         );
       case 'metricLabels':
+      case 'resourceLabels':
+        const dropdown =
+          queryType === 'resourceLabels' ? (
+            <SimpleDropdown
+              value={this.state.resourceLabelKey}
+              options={this.state.resourceLabels}
+              onValueChange={this.onResourceLabelKeyChange}
+              label="Resource Labels"
+            />
+          ) : (
+            <SimpleDropdown
+              value={this.state.metricLabelKey}
+              options={this.state.metricLabels}
+              onValueChange={this.onMetricLabelKeyChange}
+              label="Metric Labels"
+            />
+          );
         return (
           <React.Fragment>
             <ServiceSelector metricDescriptors={this.state.metricDescriptors} onServiceChange={this.onServiceChange} />
@@ -85,11 +119,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
               metricDescriptors={this.state.metricDescriptors}
               onMetricTypeChange={this.onMetricTypeChange}
             />
-            <MetricLabelKeySelector
+            {dropdown}
-              metricLabelKey={this.state.metricLabelKey}
-              metricLabels={this.state.metricLabels}
-              onMetricLabelKeyChange={this.onMetricLabelKeyChange}
-            />
           </React.Fragment>
         );
       default: