add alignment periods component

public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx

@@ -0,0 +1,36 @@
+import React, { SFC } from 'react';
+import _ from 'lodash';
+
+import { StackdriverPicker } from './StackdriverPicker';
+import { alignmentPeriods } from '../constants';
+
+export interface Props {
+  onChange: (alignmentPeriod) => void;
+  templateSrv: any;
+  alignmentPeriod: string;
+}
+
+export const AlignmentPeriods: SFC<Props> = ({ alignmentPeriod, templateSrv, onChange }) => {
+  return (
+    <React.Fragment>
+      <div className="gf-form-inline">
+        <div className="gf-form">
+          <label className="gf-form-label query-keyword width-9">Alignment Period</label>
+          <StackdriverPicker
+            onChange={value => onChange(value)}
+            selected={alignmentPeriod}
+            templateVariables={templateSrv.variables}
+            options={alignmentPeriods.map(ap => ({
+              ...ap,
+              label: ap.text,
+            }))}
+            searchable={true}
+            placeholder="Select Alignment"
+            className="width-15"
+            groupName="Alignment Options"
+          />
+        </div>
+      </div>
+    </React.Fragment>
+  );
+};

public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx

@@ -5,6 +5,7 @@ import { Metrics } from './Metrics';
 import { Filter } from './Filter';
 import { Aggregations } from './Aggregations';
 import { Alignments } from './Alignments';
+import { AlignmentPeriods } from './AlignmentPeriods';
 import { Target } from '../types';
 import { getAlignmentPickerData } from '../functions';
 
@@ -109,13 +110,23 @@ export class QueryEditor extends React.Component<Props, State> {
     });
   }
 
-  // componentDidUpdate(prevProps: Props, prevState: Target) {
-  //   this.props.onQueryChange(this.state);
-
-  // }
+  handleAlignmentPeriodChange(value) {
+    this.setState({ alignmentPeriod: value }, () => {
+      this.props.onQueryChange(this.state);
+      this.props.onExecuteQuery();
+    });
+  }
 
   render() {
-    const { defaultProject, metricType, crossSeriesReducer, groupBys, perSeriesAligner, alignOptions } = this.state;
+    const {
+      defaultProject,
+      metricType,
+      crossSeriesReducer,
+      groupBys,
+      perSeriesAligner,
+      alignOptions,
+      alignmentPeriod,
+    } = this.state;
     const { templateSrv, datasource, uiSegmentSrv } = this.props;
 
     return (
@@ -157,6 +168,11 @@ export class QueryEditor extends React.Component<Props, State> {
                   )
                 }
               </Aggregations>
+              <AlignmentPeriods
+                templateSrv={templateSrv}
+                alignmentPeriod={alignmentPeriod}
+                onChange={value => this.handleAlignmentPeriodChange(value)}
+              />
             </React.Fragment>
           )}
         </Metrics>