move alignment population code to parent component. make alignment a stateless component instead.

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

@@ -1,16 +1,12 @@
-import React from 'react';
+import React, { SFC } 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;
+  alignOptions: any[];
   metricDescriptor: {
     valueType: string;
     metricKind: string;
@@ -18,66 +14,24 @@ export interface Props {
   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>
+export const Alignments: SFC<Props> = ({ perSeriesAligner, templateSrv, onChange, alignOptions }) => {
+  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>
-      </React.Fragment>
-    );
-  }
-}
+      </div>
+    </React.Fragment>
+  );
+};

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

@@ -6,6 +6,7 @@ import { Filter } from './Filter';
 import { Aggregations } from './Aggregations';
 import { Alignments } from './Alignments';
 import { Target } from '../types';
+import { getAlignmentPickerData } from '../functions';
 
 export interface Props {
   onQueryChange: (target: Target) => void;
@@ -16,7 +17,11 @@ export interface Props {
   uiSegmentSrv: any;
 }
 
-const DefaultTarget: Target = {
+interface State extends Target {
+  alignOptions: any[];
+}
+
+const DefaultTarget: State = {
   defaultProject: 'loading project...',
   metricType: '',
   metricKind: '',
@@ -30,18 +35,30 @@ const DefaultTarget: Target = {
   groupBys: [],
   filters: [],
   aliasBy: '',
+  alignOptions: [],
 };
 
-export class QueryEditor extends React.Component<Props, Target> {
-  state: Target = DefaultTarget;
+export class QueryEditor extends React.Component<Props, State> {
+  state: State = DefaultTarget;
 
   componentDidMount() {
-    this.setState(this.props.target);
+    const { perSeriesAligner, alignOptions } = getAlignmentPickerData(this.props.target, this.props.templateSrv);
+    this.setState({
+      ...this.props.target,
+      alignOptions,
+      perSeriesAligner,
+    });
   }
 
   handleMetricTypeChange({ valueType, metricKind, type, unit }) {
+    const { perSeriesAligner, alignOptions } = getAlignmentPickerData(
+      { valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner },
+      this.props.templateSrv
+    );
     this.setState(
       {
+        alignOptions,
+        perSeriesAligner,
         metricType: type,
         unit,
         valueType,
@@ -97,7 +114,7 @@ export class QueryEditor extends React.Component<Props, Target> {
   }
 
   render() {
-    const { defaultProject, metricType, crossSeriesReducer, groupBys, perSeriesAligner } = this.state;
+    const { defaultProject, metricType, crossSeriesReducer, groupBys, perSeriesAligner, alignOptions } = this.state;
     const { templateSrv, datasource, uiSegmentSrv } = this.props;
 
     return (
@@ -127,15 +144,17 @@ export class QueryEditor extends React.Component<Props, Target> {
                 groupBys={groupBys}
                 onChange={value => this.handleAggregationChange(value)}
               >
-                {displayAdvancedOptions => (
-                  <Alignments
-                    display={displayAdvancedOptions}
-                    metricDescriptor={metric}
-                    templateSrv={templateSrv}
-                    perSeriesAligner={perSeriesAligner}
-                    onChange={value => this.handleAlignmentChange(value)}
-                  />
-                )}
+                {displayAdvancedOptions =>
+                  displayAdvancedOptions && (
+                    <Alignments
+                      alignOptions={alignOptions}
+                      metricDescriptor={metric}
+                      templateSrv={templateSrv}
+                      perSeriesAligner={perSeriesAligner}
+                      onChange={value => this.handleAlignmentChange(value)}
+                    />
+                  )
+                }
               </Aggregations>
             </React.Fragment>
           )}

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

@@ -46,3 +46,14 @@ export const getLabelKeys = async (datasource, selectedMetricType) => {
     : [];
   return labelKeys;
 };
+
+export const getAlignmentPickerData = ({ valueType, metricKind, perSeriesAligner }, templateSrv) => {
+  const alignOptions = getAlignmentOptionsByMetric(valueType, metricKind).map(option => ({
+    ...option,
+    label: option.text,
+  }));
+  if (!alignOptions.some(o => o.value === templateSrv.replace(perSeriesAligner))) {
+    perSeriesAligner = alignOptions.length > 0 ? alignOptions[0].value : '';
+  }
+  return { alignOptions, perSeriesAligner };
+};