stackdriver: make sure service and metric display name is used instead of value when loading a saved query editor

public/app/plugins/datasource/stackdriver/partials/query.editor.html

@@ -1,19 +1,9 @@
 <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-  <!-- <div class="gf-form-inline">
-    <div class="gf-form">
-      <span class="gf-form-label width-9">Metric Type</span>
-      <gf-form-dropdown model="ctrl.target.metricType" get-options="ctrl.getMetricTypes($query)" class="min-width-20"
-        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="ctrl.onMetricTypeChange()"></gf-form-dropdown>
-    </div>
-    <div class="gf-form gf-form--grow">
-      <div class="gf-form-label gf-form-label--grow"></div>
-    </div>
-  </div> -->
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-9">Service</span>
-      <gf-form-dropdown model="ctrl.target.service" get-options="ctrl.getServices()" class="min-width-20" disabled type="text"
+      <gf-form-dropdown model="ctrl.service" get-options="ctrl.services" class="min-width-20" disabled type="text"
-        allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="ctrl.onServiceChange(ctrl.target.metricService)"></gf-form-dropdown>
+        allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="ctrl.onServiceChange(ctrl.service)"></gf-form-dropdown>
     </div>
     <div class="gf-form gf-form--grow">
       <div class="gf-form-label gf-form-label--grow"></div>
@@ -22,7 +12,7 @@
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-9">Metric</span>
-      <gf-form-dropdown model="ctrl.target.metricType" get-options="ctrl.metrics" class="min-width-20" disabled type="text"
+      <gf-form-dropdown model="ctrl.metricType" get-options="ctrl.metrics" class="min-width-20" disabled type="text"
         allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="ctrl.onMetricTypeChange()"></gf-form-dropdown>
     </div>
     <div class="gf-form gf-form--grow">

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

@@ -32,8 +32,8 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     metricKind: any;
     valueType: any;
   };
-  defaultDropdownValue = 'select metric';
+  defaultDropdownValue = 'Select Metric';
-  defaultServiceValue = 'all';
+  defaultServiceValue = 'All Services';
   defaultRemoveGroupByValue = '-- remove group by --';
   loadLabelsPromise: Promise<any>;
   stackdriverConstants;
@@ -59,8 +59,11 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     valueType: '',
   };
 
+  service: string;
+  metricType: string;
   metricDescriptors: any[];
   metrics: any[];
+  services: any[];
   groupBySegments: any[];
   removeSegment: any;
   showHelp: boolean;
@@ -77,6 +80,9 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     _.defaultsDeep(this.target, this.defaults);
     this.metricDescriptors = [];
     this.metrics = [];
+    this.services = [];
+    this.metricType = this.defaultDropdownValue;
+    this.service = this.defaultServiceValue;
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
     this.getCurrentProject()
@@ -126,14 +132,15 @@ export class StackdriverQueryCtrl extends QueryCtrl {
   async loadMetricDescriptors() {
     if (this.target.project.id !== 'default') {
       this.metricDescriptors = await this.datasource.getMetricTypes(this.target.project.id);
-      this.metrics = this.getMetrics();
+      this.services = this.getServicesList();
+      this.metrics = this.getMetricsList();
       return this.metricDescriptors;
     } else {
       return [];
     }
   }
 
-  getServices() {
+  getServicesList() {
     const defaultValue = { value: this.defaultServiceValue, text: this.defaultServiceValue };
     const services = this.metricDescriptors.map(m => {
       const [service] = m.type.split('/');
@@ -143,10 +150,15 @@ export class StackdriverQueryCtrl extends QueryCtrl {
         text: serviceShortName,
       };
     });
+
+    if (services.find(m => m.value === this.target.service)) {
+      this.service = this.target.service;
+    }
+
     return services.length > 0 ? [defaultValue, ..._.uniqBy(services, 'value')] : [];
   }
 
-  getMetrics() {
+  getMetricsList() {
     const metrics = this.metricDescriptors.map(m => {
       const [service] = m.type.split('/');
       const [serviceShortName] = service.split('.');
@@ -159,20 +171,19 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       };
     });
 
+    let result;
     if (this.target.service === this.defaultServiceValue) {
-      return metrics.map(m => ({ ...m, text: `${m.service} - ${m.text}` }));
+      result = metrics.map(m => ({ ...m, text: `${m.service} - ${m.text}` }));
     } else {
-      return metrics.filter(m => m.service === this.target.service);
+      result = metrics.filter(m => m.service === this.target.service);
     }
-  }
 
-  onServiceChange() {
+    if (result.find(m => m.value === this.target.metricType)) {
-    this.metrics = this.getMetrics();
+      this.metricType = this.target.metricType;
-    if (!this.metrics.find(m => m.value === this.target.metricType)) {
+    } else if (result.length > 0) {
-      this.target.metricType = this.defaultDropdownValue;
+      this.metricType = this.target.metricType = result[0].value;
-    } else {
-      this.refresh();
     }
+    return result;
   }
 
   async getLabels() {
@@ -190,13 +201,29 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     });
   }
 
+  onServiceChange() {
+    this.target.service = this.service;
+    this.metrics = this.getMetricsList();
+    this.setMetricType();
+    if (!this.metrics.find(m => m.value === this.target.metricType)) {
+      this.target.metricType = this.defaultDropdownValue;
+    } else {
+      this.refresh();
+    }
+  }
+
   async onMetricTypeChange() {
+    this.setMetricType();
+    this.refresh();
+    this.getLabels();
+  }
+
+  setMetricType() {
+    this.target.metricType = this.metricType;
     const { valueType, metricKind } = this.metricDescriptors.find(m => m.type === this.target.metricType);
     this.target.valueType = valueType;
     this.target.metricKind = metricKind;
     this.$scope.$broadcast('metricTypeChanged');
-    this.refresh();
-    this.getLabels();
   }
 
   async getGroupBys(segment, index, removeText?: string, removeUsed = true) {