stackdriver: improve query editor to handle no data better

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

@@ -12,23 +12,27 @@ export default class StackdriverDatasource {
   }
 
   async getTimeSeries(options) {
-    const queries = options.targets.filter(target => !target.hide).map(t => {
-      if (!t.hasOwnProperty('aggregation')) {
-        t.aggregation = {
-          crossSeriesReducer: 'REDUCE_MEAN',
-          groupBys: [],
+    const queries = options.targets
+      .filter(target => {
+        return !target.hide && target.metricType;
+      })
+      .map(t => {
+        if (!t.hasOwnProperty('aggregation')) {
+          t.aggregation = {
+            crossSeriesReducer: 'REDUCE_MEAN',
+            groupBys: [],
+          };
+        }
+        return {
+          refId: t.refId,
+          datasourceId: this.id,
+          metricType: t.metricType,
+          primaryAggregation: t.aggregation.crossSeriesReducer,
+          groupBys: t.aggregation.groupBys,
+          view: t.view || 'FULL',
+          filters: t.filters,
         };
-      }
-      return {
-        refId: t.refId,
-        datasourceId: this.id,
-        metricType: t.metricType,
-        primaryAggregation: t.aggregation.crossSeriesReducer,
-        groupBys: t.aggregation.groupBys,
-        view: t.view || 'FULL',
-        filters: t.filters,
-      };
-    });
+      });
 
     const { data } = await this.backendSrv.datasourceRequest({
       url: '/api/tsdb/query',

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

@@ -84,7 +84,10 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       this.getCurrentProject()
         .then(this.getMetricTypes.bind(this))
         .then(this.getLabels.bind(this))
-        .then(resolve);
+        .then(resolve)
+        .catch(err => {
+          console.log(err);
+        });
     });
 
     this.initSegments();
@@ -149,7 +152,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     if (this.target.project.id !== 'default') {
       const metricTypes = await this.datasource.getMetricTypes(this.target.project.id);
       if (this.target.metricType === this.defaultDropdownValue && metricTypes.length > 0) {
-        this.$scope.$apply(() => (this.target.metricType = metricTypes[0].name));
+        this.$scope.$apply(() => (this.target.metricType = metricTypes[0].id));
       }
       return metricTypes.map(mt => ({ value: mt.id, text: mt.id }));
     } else {
@@ -183,7 +186,9 @@ export class StackdriverQueryCtrl extends QueryCtrl {
   }
 
   async getGroupBys(segment, index, removeText?: string, removeUsed = true) {
-    await this.initPromise;
+    if (!this.metricLabels || Object.keys(this.metricLabels).length === 0) {
+      await this.initPromise;
+    }
     const metricLabels = Object.keys(this.metricLabels)
       .filter(ml => {
         if (!removeUsed) {
@@ -213,6 +218,11 @@ export class StackdriverQueryCtrl extends QueryCtrl {
         });
       });
 
+    const noValueOrPlusButton = !segment || segment.type === 'plus-button';
+    if (noValueOrPlusButton && metricLabels.length === 0 && resourceLabels.length === 0) {
+      return Promise.resolve([]);
+    }
+
     this.removeSegment.value = removeText || this.defaultRemoveGroupByValue;
     return Promise.resolve([...metricLabels, ...resourceLabels, this.removeSegment]);
   }