stackdriver: wip - group bys

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

@@ -16,7 +16,8 @@ export default class StackdriverDatasource {
       refId: t.refId,
       datasourceId: this.id,
       metricType: t.metricType,
-      primaryAggregation: t.aggregation,
+      primaryAggregation: t.aggregation.crossSeriesReducer,
+      groupBys: t.aggregation.groupBys,
     }));
 
     const result = [];

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

@@ -10,13 +10,18 @@
     </div>
   </div>
   <div class="gf-form-inline">
-    <div class="gf-form gf-form--grow">
+    <div class="gf-form">
       <label class="gf-form-label query-keyword width-9">Aggregation</label>
       <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-        <select class="gf-form-input width-11" ng-model="ctrl.target.aggregation" ng-options="f.value as f.text for f in ctrl.aggOptions"
+        <select class="gf-form-input width-11" ng-model="ctrl.target.aggregation.crossSeriesReducer" ng-options="f.value as f.text for f in ctrl.aggOptions"
           ng-change="ctrl.refresh()"></select>
       </div>
-      <div class="gf-form-label gf-form-label--grow"></div>
+    </div>
+    <div class="gf-form">
+      <span class="gf-form-label query-keyword  width-9">Group By</span>
+      <div class="gf-form" ng-repeat="segment in ctrl.groupBySegments">
+        <metric-segment segment="segment" get-options="ctrl.getGroupBys(segment, $index)" on-change="ctrl.groupByChanged(segment, $index)"></metric-segment>
+      </div>
     </div>
     <div class="gf-form gf-form--grow">
       <div class="gf-form-label gf-form-label--grow"></div>

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

@@ -5,6 +5,7 @@ import appEvents from 'app/core/app_events';
 export interface QueryMeta {
   rawQuery: string;
   rawQueryString: string;
+  metricLabels: any;
 }
 export class StackdriverQueryCtrl extends QueryCtrl {
   static templateUrl = 'partials/query.editor.html';
@@ -15,6 +16,12 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     };
     metricType: string;
     refId: string;
+    aggregation: {
+      crossSeriesReducer: string;
+      alignmentPeriod: string;
+      perSeriesAligner: string;
+      groupBys: string[];
+    };
   };
   defaultDropdownValue = 'Select metric';
 
@@ -24,9 +31,16 @@ export class StackdriverQueryCtrl extends QueryCtrl {
       name: 'loading project...',
     },
     metricType: this.defaultDropdownValue,
-    aggregation: 'REDUCE_MEAN',
+    aggregation: {
+      crossSeriesReducer: 'REDUCE_MEAN',
+      alignmentPeriod: '',
+      perSeriesAligner: '',
+      groupBys: [],
+    },
   };
 
+  groupBySegments: any[];
+
   aggOptions = [
     { text: 'none', value: 'REDUCE_NONE' },
     { text: 'mean', value: 'REDUCE_MEAN' },
@@ -47,7 +61,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
   lastQueryError?: string;
 
   /** @ngInject */
-  constructor($scope, $injector) {
+  constructor($scope, $injector, private uiSegmentSrv) {
     super($scope, $injector);
     _.defaultsDeep(this.target, this.defaults);
 
@@ -55,6 +69,11 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
 
     this.getCurrentProject().then(this.getMetricTypes.bind(this));
+
+    this.groupBySegments = _.map(this.target.aggregation.groupBys, groupBy => {
+      return uiSegmentSrv.getSegmentForValue(groupBy);
+    });
+    this.ensurePlusButton(this.groupBySegments);
   }
 
   async getCurrentProject() {
@@ -97,6 +116,37 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     }
   }
 
+  getGroupBys() {
+    const segments = _.map(Object.keys(this.lastQueryMeta.metricLabels), (label: string) => {
+      return this.uiSegmentSrv.newSegment({ value: label, expandable: false });
+    });
+
+    return Promise.resolve(segments);
+  }
+
+  groupByChanged(segment, index) {
+    this.target.aggregation.groupBys = _.reduce(
+      this.groupBySegments,
+      function(memo, seg) {
+        if (!seg.fake) {
+          memo.push(seg.value);
+        }
+        return memo;
+      },
+      []
+    );
+    this.ensurePlusButton(this.groupBySegments);
+  }
+
+  ensurePlusButton(segments) {
+    const count = segments.length;
+    const lastSegment = segments[Math.max(count - 1, 0)];
+
+    if (!lastSegment || lastSegment.type !== 'plus-button') {
+      segments.push(this.uiSegmentSrv.newPlusButton());
+    }
+  }
+
   onDataReceived(dataList) {
     this.lastQueryError = null;
     this.lastQueryMeta = null;