stackdriver: add alignment period to query controller

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

@@ -33,3 +33,15 @@ export const aggOptions = [
   { text: '50th percentile', value: 'REDUCE_PERCENTILE_50' },
   { text: '5th percentile', value: 'REDUCE_PERCENTILE_05' },
 ];
+
+export const alignmentPeriods = [
+  { text: 'auto', value: 'auto' },
+  { text: '1m', value: '+60s' },
+  { text: '5m', value: '+300s' },
+  { text: '30m', value: '+1800s' },
+  { text: '1h', value: '+3600s' },
+  { text: '6h', value: '+21600s' },
+  { text: '1d', value: '+86400s' },
+  { text: '1w', value: '+604800s' },
+  { text: '1m', value: '+18748800s' },
+];

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

@@ -31,6 +31,7 @@ export default class StackdriverDatasource {
           primaryAggregation: t.aggregation.crossSeriesReducer,
           secondaryAggregation: t.aggregation.secondaryCrossSeriesReducer,
           perSeriesAligner: t.aggregation.perSeriesAligner,
+          alignmentPeriod: t.aggregation.alignmentPeriod,
           groupBys: t.aggregation.groupBys,
           view: t.view || 'FULL',
           filters: t.filters,

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

@@ -53,16 +53,21 @@
     <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"
+        <select class="gf-form-input width-14" ng-model="ctrl.target.aggregation.secondaryCrossSeriesReducer" ng-options="f.value as f.text for f in ctrl.stackdriverConstants.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"
+        <select class="gf-form-input width-14" ng-model="ctrl.target.aggregation.perSeriesAligner" ng-options="f.value as f.text for f in ctrl.stackdriverConstants.alignOptions"
+          ng-change="ctrl.refresh()"></select>
+      </div>
+    </div>
+    <div class="gf-form offset-width-9">
+      <label class="gf-form-label query-keyword width-12">Alignment Period</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.alignmentPeriod" ng-options="f.value as f.text for f in ctrl.stackdriverConstants.alignmentPeriods"
           ng-change="ctrl.refresh()"></select>
       </div>
     </div>

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

@@ -1,7 +1,8 @@
 import _ from 'lodash';
 import { QueryCtrl } from 'app/plugins/sdk';
 import appEvents from 'app/core/app_events';
-import { aggOptions, alignOptions } from './constants';
+import * as options from './constants';
+// mport BaseComponent, * as extras from './A';
 
 export interface QueryMeta {
   rawQuery: string;
@@ -33,6 +34,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
   defaultRemoveGroupByValue = '-- remove group by --';
   defaultRemoveFilterValue = '-- remove filter --';
   loadLabelsPromise: Promise<any>;
+  stackdriverConstants;
 
   defaults = {
     project: {
@@ -43,7 +45,7 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     aggregation: {
       crossSeriesReducer: 'REDUCE_MEAN',
       secondaryCrossSeriesReducer: 'REDUCE_NONE',
-      alignmentPeriod: '',
+      alignmentPeriod: 'auto',
       perSeriesAligner: 'ALIGN_MEAN',
       groupBys: [],
     },
@@ -54,10 +56,6 @@ export class StackdriverQueryCtrl extends QueryCtrl {
   groupBySegments: any[];
   filterSegments: any[];
   removeSegment: any;
-
-  aggOptions = [];
-  alignOptions = [];
-
   showHelp: boolean;
   showLastQuery: boolean;
   lastQueryMeta: QueryMeta;
@@ -72,8 +70,7 @@ 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.stackdriverConstants = options;
 
     this.getCurrentProject()
       .then(this.getMetricTypes.bind(this))