stackdriver: reimplementing service variable query type

public/app/features/templating/query_variable.ts

@@ -23,6 +23,7 @@ export class QueryVariable implements Variable {
   tagValuesQuery: string;
   tags: any[];
   skipUrlSync: boolean;
+  definition: string;
 
   defaults = {
     type: 'query',

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

@@ -5,6 +5,7 @@ import {
   getMetricTypesByService,
   getAlignmentOptionsByMetric,
   getAggregationOptionsByMetric,
+  extractServicesFromMetricDescriptors,
   getLabelKeys,
 } from './functions';
 
@@ -14,6 +15,8 @@ export default class StackdriverMetricFindQuery {
   async execute(query: any) {
     try {
       switch (query.selectedQueryType) {
+        case MetricFindQueryTypes.Services:
+          return this.handleServiceQuery();
         case MetricFindQueryTypes.MetricTypes:
           return this.handleMetricTypesQuery(query);
         case MetricFindQueryTypes.LabelKeys:
@@ -37,6 +40,16 @@ export default class StackdriverMetricFindQuery {
     }
   }
 
+  async handleServiceQuery() {
+    const metricDescriptors = await this.datasource.getMetricTypes(this.datasource.projectName);
+    const services = extractServicesFromMetricDescriptors(metricDescriptors);
+    return services.map(s => ({
+      text: s.serviceShortName,
+      value: s.service,
+      expandable: true,
+    }));
+  }
+
   async handleMetricTypesQuery({ selectedService }) {
     if (!selectedService) {
       return [];

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

@@ -12,7 +12,7 @@ const SimpleSelect: SFC<Props> = props => {
   return (
     <div className="gf-form max-width-21">
       <span className="gf-form-label width-10">{label}</span>
-      <div className="gf-form-select-wrapper max-width-10">
+      <div className="gf-form-select-wrapper max-width-12">
         <select className="gf-form-input" required onChange={onValueChange} value={value}>
           {options.map(({ value, name }, i) => (
             <option key={i} value={value}>

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

 import React, { PureComponent } from 'react';
-import uniqBy from 'lodash/uniqBy';
 import { VariableQueryProps } from 'app/types/plugins';
 import SimpleSelect from './SimpleSelect';
-import { getMetricTypes, getLabelKeys } from '../functions';
+import { getMetricTypes, getLabelKeys, extractServicesFromMetricDescriptors } from '../functions';
 import { MetricFindQueryTypes, VariableQueryData } from '../types';
 
 export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryProps, VariableQueryData> {
   queryTypes: Array<{ value: string; name: string }> = [
+    { value: MetricFindQueryTypes.Services, name: 'Services' },
     { value: MetricFindQueryTypes.MetricTypes, name: 'Metric Types' },
     { value: MetricFindQueryTypes.LabelKeys, name: 'Label Keys' },
     { value: MetricFindQueryTypes.LabelValues, name: 'Label Values' },
@@ -34,7 +34,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
 
   async componentDidMount() {
     const metricDescriptors = await this.props.datasource.getMetricTypes(this.props.datasource.projectName);
-    const services = uniqBy(metricDescriptors, 'service').map(m => ({
+    const services = extractServicesFromMetricDescriptors(metricDescriptors).map(m => ({
       value: m.service,
       name: m.serviceShortName,
     }));
@@ -50,7 +50,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
       metricDescriptors,
       this.state.selectedMetricType,
       this.props.templateSrv.replace(this.state.selectedMetricType),
-      selectedService
+      this.props.templateSrv.replace(selectedService)
     );
     const state: any = {
       services,
@@ -76,7 +76,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
       this.state.metricDescriptors,
       this.state.selectedMetricType,
       this.props.templateSrv.replace(this.state.selectedMetricType),
-      event.target.value
+      this.props.templateSrv.replace(event.target.value)
     );
     const state: any = {
       selectedService: event.target.value,
@@ -125,7 +125,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
         return (
           <SimpleSelect
             value={this.state.selectedService}
-            options={this.state.services}
+            options={this.insertTemplateVariables(this.state.services)}
             onValueChange={e => this.onServiceChange(e)}
             label="Services"
           />
@@ -137,7 +137,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
           <React.Fragment>
             <SimpleSelect
               value={this.state.selectedService}
-              options={this.state.services}
+              options={this.insertTemplateVariables(this.state.services)}
               onValueChange={e => this.onServiceChange(e)}
               label="Services"
             />
@@ -163,7 +163,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
           <React.Fragment>
             <SimpleSelect
               value={this.state.selectedService}
-              options={this.state.services}
+              options={this.insertTemplateVariables(this.state.services)}
               onValueChange={e => this.onServiceChange(e)}
               label="Services"
             />

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

+import uniqBy from 'lodash/uniqBy';
 import { alignOptions, aggOptions } from './constants';
 
+export const extractServicesFromMetricDescriptors = metricDescriptors => uniqBy(metricDescriptors, 'service');
+
 export const getMetricTypesByService = (metricDescriptors, service) =>
   metricDescriptors.filter(m => m.service === service);
 

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

 export enum MetricFindQueryTypes {
+  Services = 'services',
   MetricTypes = 'metricTypes',
   LabelKeys = 'labelKeys',
   LabelValues = 'labelValues',