flatten target obj

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

@@ -11,10 +11,8 @@ export interface Props {
     valueType: string;
     metricKind: string;
   };
-  aggregation: {
-    crossSeriesReducer: string;
-    groupBys: string[];
-  };
+  crossSeriesReducer: string;
+  groupBys: string[];
   children?: (renderProps: any) => JSX.Element;
 }
 
@@ -45,7 +43,7 @@ export class Aggregations extends React.Component<Props, State> {
     }
   }
 
-  setAggOptions({ metricDescriptor, aggregation, templateSrv }) {
+  setAggOptions({ metricDescriptor, crossSeriesReducer, groupBys, templateSrv }) {
     let aggregations = getAggregationOptionsByMetric(metricDescriptor.valueType, metricDescriptor.metricKind).map(
       a => ({
         ...a,
@@ -53,16 +51,13 @@ export class Aggregations extends React.Component<Props, State> {
       })
     );
 
-    if (
-      aggregations.length > 0 &&
-      !aggregations.find(o => o.value === templateSrv.replace(aggregation.crossSeriesReducer))
-    ) {
+    if (aggregations.length > 0 && !aggregations.find(o => o.value === templateSrv.replace(crossSeriesReducer))) {
       this.deselectAggregationOption('REDUCE_NONE');
     }
 
-    if (aggregation.groupBys.length > 0) {
+    if (groupBys.length > 0) {
       aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
-      if (aggregation.crossSeriesReducer === 'REDUCE_NONE') {
+      if (crossSeriesReducer === 'REDUCE_NONE') {
         this.deselectAggregationOption('REDUCE_NONE');
       }
     }
@@ -86,7 +81,7 @@ export class Aggregations extends React.Component<Props, State> {
 
   render() {
     const { aggOptions, displayAdvancedOptions } = this.state;
-    const { aggregation, templateSrv, onChange } = this.props;
+    const { templateSrv, onChange, crossSeriesReducer } = this.props;
 
     return (
       <React.Fragment>
@@ -95,7 +90,7 @@ export class Aggregations extends React.Component<Props, State> {
             <label className="gf-form-label query-keyword width-9">Aggregation</label>
             <StackdriverPicker
               onChange={value => onChange(value)}
-              selected={aggregation.crossSeriesReducer}
+              selected={crossSeriesReducer}
               templateVariables={templateSrv.variables}
               options={aggOptions}
               searchable={true}

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

@@ -16,10 +16,6 @@ export interface Props {
   uiSegmentSrv: any;
 }
 
-interface State {
-  target: Target;
-}
-
 const DefaultTarget: Target = {
   defaultProject: 'loading project...',
   metricType: '',
@@ -28,38 +24,31 @@ const DefaultTarget: Target = {
   refId: '',
   service: '',
   unit: '',
-  aggregation: {
-    crossSeriesReducer: 'REDUCE_MEAN',
-    alignmentPeriod: 'stackdriver-auto',
-    perSeriesAligner: 'ALIGN_MEAN',
-    groupBys: [],
-  },
+  crossSeriesReducer: 'REDUCE_MEAN',
+  alignmentPeriod: 'stackdriver-auto',
+  perSeriesAligner: 'ALIGN_MEAN',
+  groupBys: [],
   filters: [],
   aliasBy: '',
 };
 
-export class QueryEditor extends React.Component<Props, State> {
-  state: State = { target: DefaultTarget };
+export class QueryEditor extends React.Component<Props, Target> {
+  state: Target = DefaultTarget;
 
   componentDidMount() {
-    this.setState({ target: this.props.target });
+    this.setState(this.props.target);
   }
 
   handleMetricTypeChange({ valueType, metricKind, type, unit }) {
     this.setState(
       {
-        target: {
-          ...this.state.target,
-          ...{
-            metricType: type,
-            unit,
-            valueType,
-            metricKind,
-          },
-        },
+        metricType: type,
+        unit,
+        valueType,
+        metricKind,
       },
       () => {
-        // this.props.onQueryChange(this.state.target);
+        // this.props.onQueryChange(this.state);
         this.props.onExecuteQuery();
       }
     );
@@ -68,13 +57,10 @@ export class QueryEditor extends React.Component<Props, State> {
   handleFilterChange(value) {
     this.setState(
       {
-        target: {
-          ...this.state.target,
-          filters: value,
-        },
+        filters: value,
       },
       () => {
-        this.props.onQueryChange(this.state.target);
+        // this.props.onQueryChange(this.state);
         this.props.onExecuteQuery();
       }
     );
@@ -83,52 +69,35 @@ export class QueryEditor extends React.Component<Props, State> {
   handleGroupBysChange(value) {
     this.setState(
       {
-        target: {
-          ...this.state.target,
-          aggregation: {
-            ...this.state.target.aggregation,
-            groupBys: value,
-          },
-        },
+        groupBys: value,
       },
       () => {
-        this.props.onQueryChange(this.state.target);
+        // this.props.onQueryChange(this.state);
         this.props.onExecuteQuery();
       }
     );
   }
 
   handleAggregationChange(value) {
-    const target = {
-      ...this.state.target,
-      aggregation: {
-        ...this.state.target.aggregation,
-        crossSeriesReducer: value,
-      },
-    };
-    this.setState({ target }, () => {
-      this.props.onQueryChange(target);
+    this.setState({ crossSeriesReducer: value }, () => {
+      // this.props.onQueryChange(this.state);
       this.props.onExecuteQuery();
     });
   }
 
   handleAlignmentChange(value) {
-    const target = {
-      ...this.state.target,
-      aggregation: {
-        ...this.state.target.aggregation,
-        perSeriesAligner: value,
-      },
-    };
-    this.setState({ target }, () => {
-      this.props.onQueryChange(target);
+    this.setState({ perSeriesAligner: value }, () => {
+      // this.props.onQueryChange(this.state);
       this.props.onExecuteQuery();
     });
   }
 
+  componentDidUpdate(prevProps: Props, prevState: Target) {
+    this.props.onQueryChange(this.state);
+  }
+
   render() {
-    const { target } = this.state;
-    const { defaultProject, metricType, aggregation } = target;
+    const { defaultProject, metricType, crossSeriesReducer, groupBys, perSeriesAligner } = this.state;
     const { templateSrv, datasource, uiSegmentSrv } = this.props;
 
     return (
@@ -145,7 +114,7 @@ export class QueryEditor extends React.Component<Props, State> {
               <Filter
                 filtersChanged={value => this.handleFilterChange(value)}
                 groupBysChanged={value => this.handleGroupBysChange(value)}
-                target={target}
+                target={this.state}
                 uiSegmentSrv={uiSegmentSrv}
                 templateSrv={templateSrv}
                 datasource={datasource}
@@ -154,19 +123,19 @@ export class QueryEditor extends React.Component<Props, State> {
               <Aggregations
                 metricDescriptor={metric}
                 templateSrv={templateSrv}
-                aggregation={aggregation}
+                crossSeriesReducer={crossSeriesReducer}
+                groupBys={groupBys}
                 onChange={value => this.handleAggregationChange(value)}
               >
-                {displayAdvancedOptions =>
-                  displayAdvancedOptions && (
-                    <Alignments
-                      metricDescriptor={metric}
-                      templateSrv={templateSrv}
-                      perSeriesAligner={aggregation.perSeriesAligner}
-                      onChange={value => this.handleAlignmentChange(value)}
-                    />
-                  )
-                }
+                {displayAdvancedOptions => (
+                  <Alignments
+                    display={displayAdvancedOptions}
+                    metricDescriptor={metric}
+                    templateSrv={templateSrv}
+                    perSeriesAligner={perSeriesAligner}
+                    onChange={value => this.handleAlignmentChange(value)}
+                  />
+                )}
               </Aggregations>
             </React.Fragment>
           )}

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

@@ -29,21 +29,15 @@ export default class StackdriverDatasource {
         return !target.hide && target.metricType;
       })
       .map(t => {
-        if (!t.hasOwnProperty('aggregation')) {
-          t.aggregation = {
-            crossSeriesReducer: 'REDUCE_MEAN',
-            groupBys: [],
-          };
-        }
         return {
           refId: t.refId,
           intervalMs: options.intervalMs,
           datasourceId: this.id,
           metricType: this.templateSrv.replace(t.metricType, options.scopedVars || {}),
-          primaryAggregation: this.templateSrv.replace(t.aggregation.crossSeriesReducer, options.scopedVars || {}),
-          perSeriesAligner: this.templateSrv.replace(t.aggregation.perSeriesAligner, options.scopedVars || {}),
-          alignmentPeriod: this.templateSrv.replace(t.aggregation.alignmentPeriod, options.scopedVars || {}),
-          groupBys: this.interpolateGroupBys(t.aggregation.groupBys, options.scopedVars),
+          primaryAggregation: this.templateSrv.replace(t.crossSeriesReducer || 'REDUCE_MEAN', options.scopedVars || {}),
+          perSeriesAligner: this.templateSrv.replace(t.perSeriesAligner, options.scopedVars || {}),
+          alignmentPeriod: this.templateSrv.replace(t.alignmentPeriod, options.scopedVars || {}),
+          groupBys: this.interpolateGroupBys(t.groupBys, options.scopedVars),
           view: t.view || 'FULL',
           filters: (t.filters || []).map(f => {
             return this.templateSrv.replace(f, options.scopedVars || {});
@@ -76,9 +70,7 @@ export default class StackdriverDatasource {
           refId: refId,
           datasourceId: this.id,
           metricType: this.templateSrv.replace(metricType),
-          aggregation: {
-            crossSeriesReducer: 'REDUCE_NONE',
-          },
+          crossSeriesReducer: 'REDUCE_NONE',
           view: 'HEADERS',
         },
       ],

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

@@ -3,7 +3,7 @@
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
     <stackdriver-picker
       onChange="ctrl.handleAggregationChange"
-      selected="ctrl.target.aggregation.crossSeriesReducer"
+      selected="ctrl.target.crossSeriesReducer"
       options="ctrl.aggOptions"
       searchable="true"
       placeholder="'Select Aggregation'"
@@ -26,7 +26,7 @@
     <label class="gf-form-label query-keyword width-15">Aligner</label>
     <stackdriver-picker
       onChange="ctrl.handleAlignmentChange"
-      selected="ctrl.target.aggregation.perSeriesAligner"
+      selected="ctrl.target.perSeriesAligner"
       options="ctrl.alignOptions"
       searchable="true"
       placeholder="'Select Alignment'"
@@ -43,7 +43,7 @@
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
     <stackdriver-picker
       onChange="ctrl.handleAlignmentPeriodChange"
-      selected="ctrl.target.aggregation.alignmentPeriod"
+      selected="ctrl.target.alignmentPeriod"
       options="ctrl.alignmentPeriods"
       searchable="true"
       placeholder="'Select Alignment'"
@@ -56,4 +56,4 @@
   <div class="gf-form gf-form--grow">
     <label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow"> {{ ctrl.formatAlignmentText() }} </label>
   </div>
-</div>
+</div>

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

@@ -54,11 +54,11 @@ export class StackdriverAggregationCtrl {
       ...a,
       label: a.text,
     }));
-    if (!aggregations.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
+    if (!aggregations.find(o => o.value === this.templateSrv.replace(this.target.crossSeriesReducer))) {
       this.deselectAggregationOption('REDUCE_NONE');
     }
 
-    if (this.target.aggregation.groupBys.length > 0) {
+    if (this.target.groupBys.length > 0) {
       aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
@@ -72,24 +72,24 @@ export class StackdriverAggregationCtrl {
   }
 
   handleAlignmentChange(value) {
-    this.target.aggregation.perSeriesAligner = value;
+    this.target.perSeriesAligner = value;
     this.$scope.refresh();
   }
 
   handleAggregationChange(value) {
-    this.target.aggregation.crossSeriesReducer = value;
+    this.target.crossSeriesReducer = value;
     this.$scope.refresh();
   }
 
   handleAlignmentPeriodChange(value) {
-    this.target.aggregation.alignmentPeriod = value;
+    this.target.alignmentPeriod = value;
     this.$scope.refresh();
   }
 
   formatAlignmentText() {
     const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
     const selectedAlignment = alignments.find(
-      ap => ap.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner)
+      ap => ap.value === this.templateSrv.replace(this.target.perSeriesAligner)
     );
     return `${kbn.secondsToHms(this.$scope.alignmentPeriod)} interval (${
       selectedAlignment ? selectedAlignment.text : ''
@@ -99,7 +99,7 @@ export class StackdriverAggregationCtrl {
   deselectAggregationOption(notValidOptionValue: string) {
     const aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind);
     const newValue = aggregations.find(o => o.value !== notValidOptionValue);
-    this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
+    this.target.crossSeriesReducer = newValue ? newValue.value : '';
   }
 
   getTemplateVariablesGroup() {

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

@@ -13,12 +13,10 @@ export const DefaultTarget = {
   service: '',
   metric: '',
   unit: '',
-  aggregation: {
-    crossSeriesReducer: 'REDUCE_MEAN',
-    alignmentPeriod: 'stackdriver-auto',
-    perSeriesAligner: 'ALIGN_MEAN',
-    groupBys: [],
-  },
+  crossSeriesReducer: 'REDUCE_MEAN',
+  alignmentPeriod: 'stackdriver-auto',
+  perSeriesAligner: 'ALIGN_MEAN',
+  groupBys: [],
   filters: [],
   showAggregationOptions: false,
   aliasBy: '',
@@ -36,12 +34,10 @@ export class StackdriverQueryCtrl extends QueryCtrl {
     service: '',
     metric: '',
     unit: '',
-    aggregation: {
-      crossSeriesReducer: 'REDUCE_MEAN',
-      alignmentPeriod: 'stackdriver-auto',
-      perSeriesAligner: 'ALIGN_MEAN',
-      groupBys: [],
-    },
+    crossSeriesReducer: 'REDUCE_MEAN',
+    alignmentPeriod: 'stackdriver-auto',
+    perSeriesAligner: 'ALIGN_MEAN',
+    groupBys: [],
     filters: [],
     showAggregationOptions: false,
     aliasBy: '',

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

@@ -40,7 +40,7 @@ export class StackdriverFilterCtrl {
 
   initSegments(hideGroupBys: boolean) {
     if (!hideGroupBys) {
-      this.groupBySegments = this.target.aggregation.groupBys.map(groupBy => {
+      this.groupBySegments = this.target.groupBys.map(groupBy => {
         return this.uiSegmentSrv.getSegmentForValue(groupBy);
       });
       this.ensurePlusButton(this.groupBySegments);
@@ -111,7 +111,7 @@ export class StackdriverFilterCtrl {
   async getGroupBys(segment) {
     let elements = await this.createLabelKeyElements();
 
-    elements = elements.filter(e => this.target.aggregation.groupBys.indexOf(e.value) === -1);
+    elements = elements.filter(e => this.target.groupBys.indexOf(e.value) === -1);
     const noValueOrPlusButton = !segment || segment.type === 'plus-button';
     if (noValueOrPlusButton && elements.length === 0) {
       return [];

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

@@ -82,7 +82,6 @@ describe('StackdriverDataSource', () => {
       targets: [
         {
           refId: 'A',
-          aggregation: {},
         },
       ],
     };

public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts

@@ -12,7 +12,8 @@ describe('StackdriverAggregationCtrl', () => {
               target: {
                 valueType: 'DOUBLE',
                 metricKind: 'GAUGE',
-                aggregation: { crossSeriesReducer: '', groupBys: [] },
+                crossSeriesReducer: '',
+                groupBys: [],
               },
             },
             {
@@ -52,7 +53,8 @@ describe('StackdriverAggregationCtrl', () => {
               target: {
                 valueType: 'DOUBLE',
                 metricKind: 'DELTA',
-                aggregation: { crossSeriesReducer: '', groupBys: [] },
+                crossSeriesReducer: '',
+                groupBys: [],
               },
             },
             {
@@ -87,7 +89,8 @@ describe('StackdriverAggregationCtrl', () => {
               target: {
                 valueType: 'DOUBLE',
                 metricKind: 'GAUGE',
-                aggregation: { crossSeriesReducer: 'REDUCE_NONE', groupBys: ['resource.label.projectid'] },
+                crossSeriesReducer: 'REDUCE_NONE',
+                groupBys: ['resource.label.projectid'],
               },
             },
             {
@@ -110,8 +113,8 @@ describe('StackdriverAggregationCtrl', () => {
 
         it('should select some other reducer than REDUCE_NONE', () => {
           ctrl.setAggOptions();
-          expect(ctrl.target.aggregation.crossSeriesReducer).not.toBe('');
-          expect(ctrl.target.aggregation.crossSeriesReducer).not.toBe('REDUCE_NONE');
+          expect(ctrl.target.crossSeriesReducer).not.toBe('');
+          expect(ctrl.target.crossSeriesReducer).not.toBe('REDUCE_NONE');
         });
       });
     });

public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts

@@ -56,7 +56,7 @@ describe('StackdriverQueryFilterCtrl', () => {
           'resource-key-1': ['resource-value-1'],
           'resource-key-2': ['resource-value-2'],
         };
-        ctrl.target.aggregation.groupBys = ['metric.label.metric-key-1', 'resource.label.resource-key-1'];
+        ctrl.target.groupBys = ['metric.label.metric-key-1', 'resource.label.resource-key-1'];
 
         result = await ctrl.getGroupBys();
       });
@@ -78,7 +78,7 @@ describe('StackdriverQueryFilterCtrl', () => {
       });
 
       it('should be added to group bys list', () => {
-        expect(ctrl.target.aggregation.groupBys.length).toBe(1);
+        expect(ctrl.target.groupBys.length).toBe(1);
       });
     });
 
@@ -91,7 +91,7 @@ describe('StackdriverQueryFilterCtrl', () => {
       });
 
       it('should be added to group bys list', () => {
-        expect(ctrl.target.aggregation.groupBys.length).toBe(0);
+        expect(ctrl.target.groupBys.length).toBe(0);
       });
     });
   });
@@ -425,12 +425,10 @@ function createTarget(existingFilters?: string[]) {
     metricType: 'ametric',
     service: '',
     refId: 'A',
-    aggregation: {
-      crossSeriesReducer: '',
-      alignmentPeriod: '',
-      perSeriesAligner: '',
-      groupBys: [],
-    },
+    crossSeriesReducer: '',
+    alignmentPeriod: '',
+    perSeriesAligner: '',
+    groupBys: [],
     filters: existingFilters || [],
     aliasBy: '',
     metricService: '',

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

@@ -26,12 +26,10 @@ export interface Target {
   metricType: string;
   service: string;
   refId: string;
-  aggregation: {
-    crossSeriesReducer: string;
-    alignmentPeriod: string;
-    perSeriesAligner: string;
-    groupBys: string[];
-  };
+  crossSeriesReducer: string;
+  alignmentPeriod: string;
+  perSeriesAligner: string;
+  groupBys: string[];
   filters: string[];
   aliasBy: string;
   metricKind: any;