From ec68c656607d3c8fb08f8d74aa8fb710740ddec2 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Thu, 20 Dec 2018 11:00:16 +0100 Subject: [PATCH] flatten target obj --- .../stackdriver/components/Aggregations.tsx | 21 ++-- .../stackdriver/components/QueryEditor.tsx | 105 ++++++------------ .../datasource/stackdriver/datasource.ts | 18 +-- .../partials/query.aggregation.html | 8 +- .../stackdriver/query_aggregation_ctrl.ts | 14 +-- .../datasource/stackdriver/query_ctrl.ts | 20 ++-- .../stackdriver/query_filter_ctrl.ts | 4 +- .../stackdriver/specs/datasource.test.ts | 1 - .../specs/query_aggregation_ctrl.test.ts | 13 ++- .../specs/query_filter_ctrl.test.ts | 16 ++- .../plugins/datasource/stackdriver/types.ts | 10 +- 11 files changed, 90 insertions(+), 140 deletions(-) diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx index a077649291c..2fa3b9b9f7d 100644 --- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx +++ b/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 { } } - 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 { }) ); - 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 { render() { const { aggOptions, displayAdvancedOptions } = this.state; - const { aggregation, templateSrv, onChange } = this.props; + const { templateSrv, onChange, crossSeriesReducer } = this.props; return ( @@ -95,7 +90,7 @@ export class Aggregations extends React.Component { onChange(value)} - selected={aggregation.crossSeriesReducer} + selected={crossSeriesReducer} templateVariables={templateSrv.variables} options={aggOptions} searchable={true} diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx index ec5ed594280..24dec2e90d5 100644 --- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx +++ b/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 { - state: State = { target: DefaultTarget }; +export class QueryEditor extends React.Component { + 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 { 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 { 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 { 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 { this.handleAggregationChange(value)} > - {displayAdvancedOptions => - displayAdvancedOptions && ( - this.handleAlignmentChange(value)} - /> - ) - } + {displayAdvancedOptions => ( + this.handleAlignmentChange(value)} + /> + )} )} diff --git a/public/app/plugins/datasource/stackdriver/datasource.ts b/public/app/plugins/datasource/stackdriver/datasource.ts index 7b1afbae5ac..8e361558e6d 100644 --- a/public/app/plugins/datasource/stackdriver/datasource.ts +++ b/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', }, ], diff --git a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html index d6de9011857..30ac9f219eb 100755 --- a/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html +++ b/public/app/plugins/datasource/stackdriver/partials/query.aggregation.html @@ -3,7 +3,7 @@ Aligner Alignment Period - \ No newline at end of file + diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts index 7213b02550d..d08bf8d94d9 100644 --- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts +++ b/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() { diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts index 8dbfc7038dc..d7b08522711 100644 --- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts +++ b/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: '', diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts index d02ed91b53d..767c80c4721 100644 --- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts +++ b/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 []; diff --git a/public/app/plugins/datasource/stackdriver/specs/datasource.test.ts b/public/app/plugins/datasource/stackdriver/specs/datasource.test.ts index d0d8462e506..46cdd77b7a9 100644 --- a/public/app/plugins/datasource/stackdriver/specs/datasource.test.ts +++ b/public/app/plugins/datasource/stackdriver/specs/datasource.test.ts @@ -82,7 +82,6 @@ describe('StackdriverDataSource', () => { targets: [ { refId: 'A', - aggregation: {}, }, ], }; diff --git a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts index 6e83824d504..c2273526844 100644 --- a/public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts +++ b/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'); }); }); }); diff --git a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts index 5e8d7c0aea0..539ac5c71da 100644 --- a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts +++ b/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: '', diff --git a/public/app/plugins/datasource/stackdriver/types.ts b/public/app/plugins/datasource/stackdriver/types.ts index fa46800ce21..ffd4f28cad1 100644 --- a/public/app/plugins/datasource/stackdriver/types.ts +++ b/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;