add alignment component

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

@@ -13,24 +13,18 @@ export interface Props {
   };
   aggregation: {
     crossSeriesReducer: string;
-    alignmentPeriod: string;
-    perSeriesAligner: string;
     groupBys: string[];
   };
   children?: (renderProps: any) => JSX.Element;
 }
 
 interface State {
-  alignmentPeriods: any[];
-  alignOptions: any[];
   aggOptions: any[];
   displayAdvancedOptions: boolean;
 }
 
 export class Aggregations extends React.Component<Props, State> {
   state: State = {
-    alignmentPeriods: [],
-    alignOptions: [],
     aggOptions: [],
     displayAdvancedOptions: false,
   };
@@ -80,11 +74,7 @@ export class Aggregations extends React.Component<Props, State> {
       this.props.metricDescriptor.metricKind
     );
     const newValue = aggregations.find(o => o.value !== notValidOptionValue);
-    this.handleAggregationChange(newValue ? newValue.value : '');
+    this.props.onChange(newValue ? newValue.value : '');
-  }
-
-  handleAggregationChange(value) {
-    this.props.onChange(value);
   }
 
   handleToggleDisplayAdvanced() {
@@ -95,7 +85,7 @@ export class Aggregations extends React.Component<Props, State> {
 
   render() {
     const { aggOptions, displayAdvancedOptions } = this.state;
-    const { aggregation, templateSrv } = this.props;
+    const { aggregation, templateSrv, onChange } = this.props;
 
     return (
       <React.Fragment>
@@ -103,7 +93,7 @@ export class Aggregations extends React.Component<Props, State> {
           <div className="gf-form">
             <label className="gf-form-label query-keyword width-9">Aggregation</label>
             <StackdriverPicker
-              onChange={value => this.handleAggregationChange(value)}
+              onChange={value => onChange(value)}
               selected={aggregation.crossSeriesReducer}
               templateVariables={templateSrv.variables}
               options={aggOptions}

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import _ from 'lodash';
+
+// import { OptionPicker } from './OptionPicker';
+// import { alignmentPeriods } from '../constants';
+// import { getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from '../functions';
+import { getAlignmentOptionsByMetric } from '../functions';
+import { StackdriverPicker } from './StackdriverPicker';
+// import kbn from 'app/core/utils/kbn';
+
+export interface Props {
+  onChange: (metricDescriptor) => void;
+  templateSrv: any;
+  metricDescriptor: {
+    valueType: string;
+    metricKind: string;
+  };
+  perSeriesAligner: string;
+}
+
+interface State {
+  alignOptions: any[];
+}
+
+export class Alignments extends React.Component<Props, State> {
+  state: State = {
+    alignOptions: [],
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    if (this.props.metricDescriptor !== null) {
+      this.setAlignOptions(this.props);
+    }
+  }
+
+  componentWillReceiveProps(nextProps: Props) {
+    if (nextProps.metricDescriptor !== null) {
+      this.setAlignOptions(nextProps);
+    }
+  }
+
+  setAlignOptions({ metricDescriptor, perSeriesAligner, templateSrv, onChange }) {
+    const alignOptions = getAlignmentOptionsByMetric(metricDescriptor.valueType, metricDescriptor.metricKind).map(
+      option => ({
+        ...option,
+        label: option.text,
+      })
+    );
+    if (!alignOptions.some(o => o.value === templateSrv.replace(perSeriesAligner))) {
+      onChange(alignOptions.length > 0 ? alignOptions[0].value : '');
+    }
+    this.setState({ alignOptions });
+  }
+
+  render() {
+    const { alignOptions } = this.state;
+    const { perSeriesAligner, templateSrv, onChange } = this.props;
+
+    return (
+      <React.Fragment>
+        <div className="gf-form-group">
+          <div className="gf-form offset-width-9">
+            <label className="gf-form-label query-keyword width-15">Aligner</label>
+            <StackdriverPicker
+              onChange={value => onChange(value)}
+              selected={perSeriesAligner}
+              templateVariables={templateSrv.variables}
+              options={alignOptions}
+              searchable={true}
+              placeholder="Select Alignment"
+              className="width-15"
+              groupName="Alignment Options"
+            />
+          </div>
+        </div>
+      </React.Fragment>
+    );
+  }
+}

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

@@ -4,6 +4,7 @@ import _ from 'lodash';
 import { Metrics } from './Metrics';
 import { Filter } from './Filter';
 import { Aggregations } from './Aggregations';
+import { Alignments } from './Alignments';
 import { Target } from '../types';
 
 export interface Props {
@@ -58,7 +59,7 @@ export class QueryEditor extends React.Component<Props, State> {
         },
       },
       () => {
-        this.props.onQueryChange(this.state.target);
+        // this.props.onQueryChange(this.state.target);
         this.props.onExecuteQuery();
       }
     );
@@ -84,9 +85,12 @@ export class QueryEditor extends React.Component<Props, State> {
       {
         target: {
           ...this.state.target,
+          aggregation: {
+            ...this.state.target.aggregation,
             groupBys: value,
           },
         },
+      },
       () => {
         this.props.onQueryChange(this.state.target);
         this.props.onExecuteQuery();
@@ -108,6 +112,20 @@ export class QueryEditor extends React.Component<Props, State> {
     });
   }
 
+  handleAlignmentChange(value) {
+    const target = {
+      ...this.state.target,
+      aggregation: {
+        ...this.state.target.aggregation,
+        perSeriesAligner: value,
+      },
+    };
+    this.setState({ target }, () => {
+      this.props.onQueryChange(target);
+      this.props.onExecuteQuery();
+    });
+  }
+
   render() {
     const { target } = this.state;
     const { defaultProject, metricType, aggregation } = target;
@@ -139,7 +157,16 @@ export class QueryEditor extends React.Component<Props, State> {
                 aggregation={aggregation}
                 onChange={value => this.handleAggregationChange(value)}
               >
-                {displayAdvancedOptions => displayAdvancedOptions && <p>RÖV</p>}
+                {displayAdvancedOptions =>
+                  displayAdvancedOptions && (
+                    <Alignments
+                      metricDescriptor={metric}
+                      templateSrv={templateSrv}
+                      perSeriesAligner={aggregation.perSeriesAligner}
+                      onChange={value => this.handleAlignmentChange(value)}
+                    />
+                  )
+                }
               </Aggregations>
             </React.Fragment>
           )}