stackdriver: adds advanced options collapse to query editor with the possibility to select secondary aggregation and alignment

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

@@ -0,0 +1,35 @@
+export const alignOptions = [
+  { text: 'none', value: 'ALIGN_NONE' },
+  { text: 'delta', value: 'ALIGN_DELTA' },
+  { text: 'rate', value: 'ALIGN_RATE' },
+  { text: 'interpolate', value: 'ALIGN_INTERPOLATE' },
+  { text: 'next older', value: 'ALIGN_NEXT_OLDER' },
+  { text: 'min', value: 'ALIGN_MIN' },
+  { text: 'max', value: 'ALIGN_MAX' },
+  { text: 'mean', value: 'ALIGN_MEAN' },
+  { text: 'count', value: 'ALIGN_COUNT' },
+  { text: 'sum', value: 'ALIGN_SUM' },
+  { text: 'stddev', value: 'ALIGN_STDDEV' },
+  { text: 'count true', value: 'ALIGN_COUNT_TRUE' },
+  { text: 'count false', value: 'ALIGN_COUNT_FALSE' },
+  { text: 'fraction true', value: 'ALIGN_FRACTION_TRUE' },
+  { text: 'percentile 99', value: 'ALIGN_PERCENTILE_99' },
+  { text: 'percentile 95', value: 'ALIGN_PERCENTILE_95' },
+  { text: 'percentile 50', value: 'ALIGN_PERCENTILE_50' },
+  { text: 'percentile 05', value: 'ALIGN_PERCENTILE_05' },
+  { text: 'percent change', value: 'ALIGN_PERCENT_CHANGE' },
+];
+
+export const aggOptions = [
+  { text: 'none', value: 'REDUCE_NONE' },
+  { text: 'mean', value: 'REDUCE_MEAN' },
+  { text: 'min', value: 'REDUCE_MIN' },
+  { text: 'max', value: 'REDUCE_MAX' },
+  { text: 'sum', value: 'REDUCE_SUM' },
+  { text: 'std. dev.', value: 'REDUCE_STDDEV' },
+  { text: 'count', value: 'REDUCE_COUNT' },
+  { text: '99th percentile', value: 'REDUCE_PERCENTILE_99' },
+  { text: '95th percentile', value: 'REDUCE_PERCENTILE_95' },
+  { text: '50th percentile', value: 'REDUCE_PERCENTILE_50' },
+  { text: '5th percentile', value: 'REDUCE_PERCENTILE_05' },
+];

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

@@ -20,6 +20,7 @@ export default class StackdriverDatasource {
         if (!t.hasOwnProperty('aggregation')) {
           t.aggregation = {
             crossSeriesReducer: 'REDUCE_MEAN',
+            secondaryCrossSeriesReducer: 'REDUCE_NONE',
             groupBys: [],
           };
         }
@@ -28,6 +29,8 @@ export default class StackdriverDatasource {
           datasourceId: this.id,
           metricType: t.metricType,
           primaryAggregation: t.aggregation.crossSeriesReducer,
+          secondaryAggregation: t.aggregation.secondaryCrossSeriesReducer,
+          perSeriesAligner: t.aggregation.perSeriesAligner,
           groupBys: t.aggregation.groupBys,
           view: t.view || 'FULL',
           filters: t.filters,

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

@@ -2,8 +2,8 @@
   <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>
+      <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>
@@ -16,15 +16,11 @@
         <metric-segment segment="segment" get-options="ctrl.getFilters(segment, $index)" on-change="ctrl.filterSegmentUpdated(segment, $index)"></metric-segment>
       </div>
     </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">
-      <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-14" 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>
     <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">
@@ -35,11 +31,47 @@
       <div class="gf-form-label gf-form-label--grow"></div>
     </div>
   </div>
+  <div class="gf-form-inline">
+    <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-12" 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>
+    <div class="gf-form gf-form--grow">
+      <label class="gf-form-label gf-form-label--grow">
+        <a ng-click="ctrl.target.showAggregationOptions = !ctrl.target.showAggregationOptions">
+          <i class="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions"></i>
+          <i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i>
+          Options
+        </a>
+      </label>
+    </div>
+  </div>
+  <div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions">
+    <div class="gf-form offset-width-9">
+      <label class="gf-form-label query-keyword width-12">Secondary Aggregation</label>
+      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
+        <select class="gf-form-input width-14" ng-model="ctrl.target.aggregation.secondaryCrossSeriesReducer" ng-options="f.value as f.text for f in ctrl.aggOptions"
+          ng-change="ctrl.refresh()"></select>
+      </div>
+    </div>
+    <!-- </div>
+  <div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions"> -->
+    <div class="gf-form offset-width-9">
+      <label class="gf-form-label query-keyword width-12">Aligner</label>
+      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
+        <select class="gf-form-input width-14" ng-model="ctrl.target.aggregation.perSeriesAligner" ng-options="f.value as f.text for f in ctrl.alignOptions"
+          ng-change="ctrl.refresh()"></select>
+      </div>
+    </div>
+  </div>
   <div class="gf-form-inline">
     <div class="gf-form">
       <span class="gf-form-label width-9">Project</span>
-      <input class="gf-form-input" disabled type="text" ng-model='ctrl.target.project.name' get-options="ctrl.getProjects()"
-        css-class="min-width-12" />
+      <input class="gf-form-input" disabled type="text" ng-model='ctrl.target.project.name' get-options="ctrl.getProjects()" css-class="min-width-12"
+      />
     </div>
     <div class="gf-form">
       <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
@@ -71,4 +103,4 @@ Help text for aliasing
   <div class="gf-form" ng-show="ctrl.lastQueryError">
     <pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
   </div>
-</query-editor-row>
+</query-editor-row>

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

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import { QueryCtrl } from 'app/plugins/sdk';
 import appEvents from 'app/core/app_events';
+import { aggOptions, alignOptions } from './constants';
 
 export interface QueryMeta {
   rawQuery: string;
@@ -20,6 +21,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     refId: string;
     aggregation: {
       crossSeriesReducer: string;
+      secondaryCrossSeriesReducer: string;
       alignmentPeriod: string;
       perSeriesAligner: string;
       groupBys: string[];
@@ -40,30 +42,21 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     metricType: this.defaultDropdownValue,
     aggregation: {
       crossSeriesReducer: 'REDUCE_MEAN',
+      secondaryCrossSeriesReducer: 'REDUCE_NONE',
       alignmentPeriod: '',
-      perSeriesAligner: '',
+      perSeriesAligner: 'ALIGN_MEAN',
       groupBys: [],
     },
     filters: [],
+    showAggregationOptions: false,
   };
 
   groupBySegments: any[];
   filterSegments: any[];
   removeSegment: any;
 
-  aggOptions = [
-    { text: 'none', value: 'REDUCE_NONE' },
-    { text: 'mean', value: 'REDUCE_MEAN' },
-    { text: 'min', value: 'REDUCE_MIN' },
-    { text: 'max', value: 'REDUCE_MAX' },
-    { text: 'sum', value: 'REDUCE_SUM' },
-    { text: 'std. dev.', value: 'REDUCE_STDDEV' },
-    { text: 'count', value: 'REDUCE_COUNT' },
-    { text: '99th percentile', value: 'REDUCE_PERCENTILE_99' },
-    { text: '95th percentile', value: 'REDUCE_PERCENTILE_95' },
-    { text: '50th percentile', value: 'REDUCE_PERCENTILE_50' },
-    { text: '5th percentile', value: 'REDUCE_PERCENTILE_05' },
-  ];
+  aggOptions = [];
+  alignOptions = [];
 
   showHelp: boolean;
   showLastQuery: boolean;
@@ -79,6 +72,8 @@ export class StackdriverQueryCtrl extends QueryCtrl {
 
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
+    this.alignOptions = alignOptions;
+    this.aggOptions = aggOptions;
 
     this.getCurrentProject()
       .then(this.getMetricTypes.bind(this))