stackdriver: extract common function

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

 import React, { PureComponent } from 'react';
 import SimpleDropdown from './SimpleDropdown';
 import { TemplateQueryProps } from 'app/types/plugins';
-import { getMetricTypesByService, extractServicesFromMetricDescriptors } from '../functions';
+import { getMetricTypes, extractServicesFromMetricDescriptors } from '../functions';
 import defaultsDeep from 'lodash/defaultsDeep';
 import { MetricFindQueryTypes } from '../types';
 
@@ -43,12 +43,8 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
       value: m.service,
       name: m.serviceShortName,
     }));
-    const service = this.state.service || services[0].value;
-    const metricTypes = getMetricTypesByService(metricDescriptors, service).map(m => ({
-      value: m.type,
-      name: m.displayName,
-    }));
-    const metricType = this.state.metricType || metricTypes[0].value;
+    const service = services.some(s => s.value === this.state.service) ? this.state.service : services[0].value;
+    const { metricTypes, metricType } = getMetricTypes(metricDescriptors, this.state.metricType, service);
     const state: any = {
       services,
       service,
@@ -66,13 +62,17 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
   }
 
   async onServiceChange(event) {
-    const metricTypes = getMetricTypesByService(this.state.metricDescriptors, event.target.value).map(m => ({
-      value: m.type,
-      name: m.displayName,
-    }));
-    const metricTypeExistInArray = metricTypes.find(m => m.value === this.state.metricType);
-    const metricType = metricTypeExistInArray ? metricTypeExistInArray.value : metricTypes[0].value;
-    const state: any = { service: event.target.value, metricTypes, metricType, ...await this.getLabels(metricType) };
+    const { metricTypes, metricType } = getMetricTypes(
+      this.state.metricDescriptors,
+      this.state.metricType,
+      event.target.value
+    );
+    const state: any = {
+      service: event.target.value,
+      metricTypes,
+      metricType,
+      ...await this.getLabels(metricType),
+    };
     this.setState(state);
   }
 
@@ -81,10 +81,17 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
     this.setState(state);
   }
 
-  async getLabelKeys(metricType, type = this.state.type) {
-    const refId = 'StackdriverTemplateQueryComponent';
-    const response = await this.props.datasource.getLabels(metricType, refId);
-    return Object.keys(response.meta[type]);
+  onLabelKeyChange(event) {
+    this.setState({ labelKey: event.target.value });
+  }
+
+  componentDidUpdate() {
+    const { metricDescriptors, metricLabels, resourceLabels, ...queryModel } = this.state;
+    this.props.onChange(queryModel);
+  }
+
+  isLabelQuery(queryType) {
+    return [MetricFindQueryTypes.MetricLabels, MetricFindQueryTypes.ResourceLabels].indexOf(queryType) !== -1;
   }
 
   async getLabels(metricType, type = this.state.type) {
@@ -99,19 +106,6 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
     return result;
   }
 
-  onLabelKeyChange(event) {
-    this.setState({ labelKey: event.target.value });
-  }
-
-  componentDidUpdate() {
-    const { metricDescriptors, metricLabels, resourceLabels, ...queryModel } = this.state;
-    this.props.onChange(queryModel);
-  }
-
-  isLabelQuery(queryType) {
-    return [MetricFindQueryTypes.MetricLabels, MetricFindQueryTypes.ResourceLabels].indexOf(queryType) !== -1;
-  }
-
   renderQueryTypeSwitch(queryType) {
     switch (queryType) {
       case MetricFindQueryTypes.MetricTypes:

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

@@ -6,6 +6,19 @@ export const extractServicesFromMetricDescriptors = metricDescriptors => uniqBy(
 export const getMetricTypesByService = (metricDescriptors, service) =>
   metricDescriptors.filter(m => m.service === service);
 
+export const getMetricTypes = (metricDescriptors, selectedMetricType, service) => {
+  const metricTypes = getMetricTypesByService(metricDescriptors, service).map(m => ({
+    value: m.type,
+    name: m.displayName,
+  }));
+  const metricTypeExistInArray = metricTypes.some(m => m.value === selectedMetricType);
+  const metricType = metricTypeExistInArray ? metricTypeExistInArray.value : metricTypes[0].value;
+  return {
+    metricTypes,
+    metricType,
+  };
+};
+
 export const getAlignmentOptionsByMetric = (metricValueType, metricKind) => {
   return !metricValueType
     ? []