public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

flatten target obj

Browse Source
This commit is contained in:
Erik Sundell
2018-12-20 11:00:16 +01:00
parent 095407c8cf
commit ec68c65660
11 changed files with 90 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
+8 -13
View File
@@ -11,10 +11,8 @@ export interface Props {
valueType: string; valueType: string;
metricKind: string; metricKind: string;
}; };
aggregation: { crossSeriesReducer: string;
crossSeriesReducer: string; groupBys: string[];
groupBys: string[];
};
children?: (renderProps: any) => JSX.Element; 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( let aggregations = getAggregationOptionsByMetric(metricDescriptor.valueType, metricDescriptor.metricKind).map(
a => ({ a => ({
...a, ...a,
@@ -53,16 +51,13 @@ export class Aggregations extends React.Component<Props, State> {
}) })
); );
if ( if (aggregations.length > 0 && !aggregations.find(o => o.value === templateSrv.replace(crossSeriesReducer))) {
aggregations.length > 0 &&
!aggregations.find(o => o.value === templateSrv.replace(aggregation.crossSeriesReducer))
) {
this.deselectAggregationOption('REDUCE_NONE'); this.deselectAggregationOption('REDUCE_NONE');
} }
if (aggregation.groupBys.length > 0) { if (groupBys.length > 0) {
aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE'); aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
if (aggregation.crossSeriesReducer === 'REDUCE_NONE') { if (crossSeriesReducer === 'REDUCE_NONE') {
this.deselectAggregationOption('REDUCE_NONE'); this.deselectAggregationOption('REDUCE_NONE');
} }
} }
@@ -86,7 +81,7 @@ export class Aggregations extends React.Component<Props, State> {
render() { render() {
const { aggOptions, displayAdvancedOptions } = this.state; const { aggOptions, displayAdvancedOptions } = this.state;
const { aggregation, templateSrv, onChange } = this.props; const { templateSrv, onChange, crossSeriesReducer } = this.props;
return ( return (
<React.Fragment> <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> <label className="gf-form-label query-keyword width-9">Aggregation</label>
<StackdriverPicker <StackdriverPicker
onChange={value => onChange(value)} onChange={value => onChange(value)}
selected={aggregation.crossSeriesReducer} selected={crossSeriesReducer}
templateVariables={templateSrv.variables} templateVariables={templateSrv.variables}
options={aggOptions} options={aggOptions}
searchable={true} searchable={true}
public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
+37 -68
View File
@@ -16,10 +16,6 @@ export interface Props {
uiSegmentSrv: any; uiSegmentSrv: any;
} }
interface State {
target: Target;
}
const DefaultTarget: Target = { const DefaultTarget: Target = {
defaultProject: 'loading project...', defaultProject: 'loading project...',
metricType: '', metricType: '',
@@ -28,38 +24,31 @@ const DefaultTarget: Target = {
refId: '', refId: '',
service: '', service: '',
unit: '', unit: '',
aggregation: { crossSeriesReducer: 'REDUCE_MEAN',
crossSeriesReducer: 'REDUCE_MEAN', alignmentPeriod: 'stackdriver-auto',
alignmentPeriod: 'stackdriver-auto', perSeriesAligner: 'ALIGN_MEAN',
perSeriesAligner: 'ALIGN_MEAN', groupBys: [],
groupBys: [],
},
filters: [], filters: [],
aliasBy: '', aliasBy: '',
}; };
export class QueryEditor extends React.Component<Props, State> { export class QueryEditor extends React.Component<Props, Target> {
state: State = { target: DefaultTarget }; state: Target = DefaultTarget;
componentDidMount() { componentDidMount() {
this.setState({ target: this.props.target }); this.setState(this.props.target);
} }
handleMetricTypeChange({ valueType, metricKind, type, unit }) { handleMetricTypeChange({ valueType, metricKind, type, unit }) {
this.setState( this.setState(
{ {
target: { metricType: type,
...this.state.target, unit,
...{ valueType,
metricType: type, metricKind,
unit,
valueType,
metricKind,
},
},
}, },
() => { () => {
// this.props.onQueryChange(this.state.target); // this.props.onQueryChange(this.state);
this.props.onExecuteQuery(); this.props.onExecuteQuery();
} }
); );
@@ -68,13 +57,10 @@ export class QueryEditor extends React.Component<Props, State> {
handleFilterChange(value) { handleFilterChange(value) {
this.setState( this.setState(
{ {
target: { filters: value,
...this.state.target,
filters: value,
},
}, },
() => { () => {
this.props.onQueryChange(this.state.target); // this.props.onQueryChange(this.state);
this.props.onExecuteQuery(); this.props.onExecuteQuery();
} }
); );
@@ -83,52 +69,35 @@ export class QueryEditor extends React.Component<Props, State> {
handleGroupBysChange(value) { handleGroupBysChange(value) {
this.setState( this.setState(
{ {
target: { groupBys: value,
...this.state.target,
aggregation: {
...this.state.target.aggregation,
groupBys: value,
},
},
}, },
() => { () => {
this.props.onQueryChange(this.state.target); // this.props.onQueryChange(this.state);
this.props.onExecuteQuery(); this.props.onExecuteQuery();
} }
); );
} }
handleAggregationChange(value) { handleAggregationChange(value) {
const target = { this.setState({ crossSeriesReducer: value }, () => {
...this.state.target, // this.props.onQueryChange(this.state);
aggregation: {
...this.state.target.aggregation,
crossSeriesReducer: value,
},
};
this.setState({ target }, () => {
this.props.onQueryChange(target);
this.props.onExecuteQuery(); this.props.onExecuteQuery();
}); });
} }
handleAlignmentChange(value) { handleAlignmentChange(value) {
const target = { this.setState({ perSeriesAligner: value }, () => {
...this.state.target, // this.props.onQueryChange(this.state);
aggregation: {
...this.state.target.aggregation,
perSeriesAligner: value,
},
};
this.setState({ target }, () => {
this.props.onQueryChange(target);
this.props.onExecuteQuery(); this.props.onExecuteQuery();
}); });
} }
componentDidUpdate(prevProps: Props, prevState: Target) {
this.props.onQueryChange(this.state);
}
render() { render() {
const { target } = this.state; const { defaultProject, metricType, crossSeriesReducer, groupBys, perSeriesAligner } = this.state;
const { defaultProject, metricType, aggregation } = target;
const { templateSrv, datasource, uiSegmentSrv } = this.props; const { templateSrv, datasource, uiSegmentSrv } = this.props;
return ( return (
@@ -145,7 +114,7 @@ export class QueryEditor extends React.Component<Props, State> {
<Filter <Filter
filtersChanged={value => this.handleFilterChange(value)} filtersChanged={value => this.handleFilterChange(value)}
groupBysChanged={value => this.handleGroupBysChange(value)} groupBysChanged={value => this.handleGroupBysChange(value)}
target={target} target={this.state}
uiSegmentSrv={uiSegmentSrv} uiSegmentSrv={uiSegmentSrv}
templateSrv={templateSrv} templateSrv={templateSrv}
datasource={datasource} datasource={datasource}
@@ -154,19 +123,19 @@ export class QueryEditor extends React.Component<Props, State> {
<Aggregations <Aggregations
metricDescriptor={metric} metricDescriptor={metric}
templateSrv={templateSrv} templateSrv={templateSrv}
aggregation={aggregation} crossSeriesReducer={crossSeriesReducer}
groupBys={groupBys}
onChange={value => this.handleAggregationChange(value)} onChange={value => this.handleAggregationChange(value)}
> >
{displayAdvancedOptions => {displayAdvancedOptions => (
displayAdvancedOptions && ( <Alignments
<Alignments display={displayAdvancedOptions}
metricDescriptor={metric} metricDescriptor={metric}
templateSrv={templateSrv} templateSrv={templateSrv}
perSeriesAligner={aggregation.perSeriesAligner} perSeriesAligner={perSeriesAligner}
onChange={value => this.handleAlignmentChange(value)} onChange={value => this.handleAlignmentChange(value)}
/> />
) )}
}
</Aggregations> </Aggregations>
</React.Fragment> </React.Fragment>
)} )}
public/app/plugins/datasource/stackdriver/datasource.ts
+5 -13
View File
@@ -29,21 +29,15 @@ export default class StackdriverDatasource {
return !target.hide && target.metricType; return !target.hide && target.metricType;
}) })
.map(t => { .map(t => {
if (!t.hasOwnProperty('aggregation')) {
t.aggregation = {
crossSeriesReducer: 'REDUCE_MEAN',
groupBys: [],
};
}
return { return {
refId: t.refId, refId: t.refId,
intervalMs: options.intervalMs, intervalMs: options.intervalMs,
datasourceId: this.id, datasourceId: this.id,
metricType: this.templateSrv.replace(t.metricType, options.scopedVars || {}), metricType: this.templateSrv.replace(t.metricType, options.scopedVars || {}),
primaryAggregation: this.templateSrv.replace(t.aggregation.crossSeriesReducer, options.scopedVars || {}), primaryAggregation: this.templateSrv.replace(t.crossSeriesReducer || 'REDUCE_MEAN', options.scopedVars || {}),
perSeriesAligner: this.templateSrv.replace(t.aggregation.perSeriesAligner, options.scopedVars || {}), perSeriesAligner: this.templateSrv.replace(t.perSeriesAligner, options.scopedVars || {}),
alignmentPeriod: this.templateSrv.replace(t.aggregation.alignmentPeriod, options.scopedVars || {}), alignmentPeriod: this.templateSrv.replace(t.alignmentPeriod, options.scopedVars || {}),
groupBys: this.interpolateGroupBys(t.aggregation.groupBys, options.scopedVars), groupBys: this.interpolateGroupBys(t.groupBys, options.scopedVars),
view: t.view || 'FULL', view: t.view || 'FULL',
filters: (t.filters || []).map(f => { filters: (t.filters || []).map(f => {
return this.templateSrv.replace(f, options.scopedVars || {}); return this.templateSrv.replace(f, options.scopedVars || {});
@@ -76,9 +70,7 @@ export default class StackdriverDatasource {
refId: refId, refId: refId,
datasourceId: this.id, datasourceId: this.id,
metricType: this.templateSrv.replace(metricType), metricType: this.templateSrv.replace(metricType),
aggregation: { crossSeriesReducer: 'REDUCE_NONE',
crossSeriesReducer: 'REDUCE_NONE',
},
view: 'HEADERS', view: 'HEADERS',
}, },
], ],
public/app/plugins/datasource/stackdriver/partials/query.aggregation.html
+4 -4
View File
@@ -3,7 +3,7 @@
<label class="gf-form-label query-keyword width-9">Aggregation</label> <label class="gf-form-label query-keyword width-9">Aggregation</label>
<stackdriver-picker <stackdriver-picker
onChange="ctrl.handleAggregationChange" onChange="ctrl.handleAggregationChange"
selected="ctrl.target.aggregation.crossSeriesReducer" selected="ctrl.target.crossSeriesReducer"
options="ctrl.aggOptions" options="ctrl.aggOptions"
searchable="true" searchable="true"
placeholder="'Select Aggregation'" placeholder="'Select Aggregation'"
@@ -26,7 +26,7 @@
<label class="gf-form-label query-keyword width-15">Aligner</label> <label class="gf-form-label query-keyword width-15">Aligner</label>
<stackdriver-picker <stackdriver-picker
onChange="ctrl.handleAlignmentChange" onChange="ctrl.handleAlignmentChange"
selected="ctrl.target.aggregation.perSeriesAligner" selected="ctrl.target.perSeriesAligner"
options="ctrl.alignOptions" options="ctrl.alignOptions"
searchable="true" searchable="true"
placeholder="'Select Alignment'" placeholder="'Select Alignment'"
@@ -43,7 +43,7 @@
<label class="gf-form-label query-keyword width-9">Alignment Period</label> <label class="gf-form-label query-keyword width-9">Alignment Period</label>
<stackdriver-picker <stackdriver-picker
onChange="ctrl.handleAlignmentPeriodChange" onChange="ctrl.handleAlignmentPeriodChange"
selected="ctrl.target.aggregation.alignmentPeriod" selected="ctrl.target.alignmentPeriod"
options="ctrl.alignmentPeriods" options="ctrl.alignmentPeriods"
searchable="true" searchable="true"
placeholder="'Select Alignment'" placeholder="'Select Alignment'"
@@ -56,4 +56,4 @@
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow"> {{ ctrl.formatAlignmentText() }} </label> <label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow"> {{ ctrl.formatAlignmentText() }} </label>
</div> </div>
</div> </div>
public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+7 -7
View File
@@ -54,11 +54,11 @@ export class StackdriverAggregationCtrl {
...a, ...a,
label: a.text, 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'); 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'); aggregations = aggregations.filter(o => o.value !== 'REDUCE_NONE');
this.deselectAggregationOption('REDUCE_NONE'); this.deselectAggregationOption('REDUCE_NONE');
} }
@@ -72,24 +72,24 @@ export class StackdriverAggregationCtrl {
} }
handleAlignmentChange(value) { handleAlignmentChange(value) {
this.target.aggregation.perSeriesAligner = value; this.target.perSeriesAligner = value;
this.$scope.refresh(); this.$scope.refresh();
} }
handleAggregationChange(value) { handleAggregationChange(value) {
this.target.aggregation.crossSeriesReducer = value; this.target.crossSeriesReducer = value;
this.$scope.refresh(); this.$scope.refresh();
} }
handleAlignmentPeriodChange(value) { handleAlignmentPeriodChange(value) {
this.target.aggregation.alignmentPeriod = value; this.target.alignmentPeriod = value;
this.$scope.refresh(); this.$scope.refresh();
} }
formatAlignmentText() { formatAlignmentText() {
const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind); const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
const selectedAlignment = alignments.find( 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 (${ return `${kbn.secondsToHms(this.$scope.alignmentPeriod)} interval (${
selectedAlignment ? selectedAlignment.text : '' selectedAlignment ? selectedAlignment.text : ''
@@ -99,7 +99,7 @@ export class StackdriverAggregationCtrl {
deselectAggregationOption(notValidOptionValue: string) { deselectAggregationOption(notValidOptionValue: string) {
const aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind); const aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind);
const newValue = aggregations.find(o => o.value !== notValidOptionValue); const newValue = aggregations.find(o => o.value !== notValidOptionValue);
this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : ''; this.target.crossSeriesReducer = newValue ? newValue.value : '';
} }
getTemplateVariablesGroup() { getTemplateVariablesGroup() {
public/app/plugins/datasource/stackdriver/query_ctrl.ts
+8 -12
View File
@@ -13,12 +13,10 @@ export const DefaultTarget = {
service: '', service: '',
metric: '', metric: '',
unit: '', unit: '',
aggregation: { crossSeriesReducer: 'REDUCE_MEAN',
crossSeriesReducer: 'REDUCE_MEAN', alignmentPeriod: 'stackdriver-auto',
alignmentPeriod: 'stackdriver-auto', perSeriesAligner: 'ALIGN_MEAN',
perSeriesAligner: 'ALIGN_MEAN', groupBys: [],
groupBys: [],
},
filters: [], filters: [],
showAggregationOptions: false, showAggregationOptions: false,
aliasBy: '', aliasBy: '',
@@ -36,12 +34,10 @@ export class StackdriverQueryCtrl extends QueryCtrl {
service: '', service: '',
metric: '', metric: '',
unit: '', unit: '',
aggregation: { crossSeriesReducer: 'REDUCE_MEAN',
crossSeriesReducer: 'REDUCE_MEAN', alignmentPeriod: 'stackdriver-auto',
alignmentPeriod: 'stackdriver-auto', perSeriesAligner: 'ALIGN_MEAN',
perSeriesAligner: 'ALIGN_MEAN', groupBys: [],
groupBys: [],
},
filters: [], filters: [],
showAggregationOptions: false, showAggregationOptions: false,
aliasBy: '', aliasBy: '',
public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+2 -2
View File
@@ -40,7 +40,7 @@ export class StackdriverFilterCtrl {
initSegments(hideGroupBys: boolean) { initSegments(hideGroupBys: boolean) {
if (!hideGroupBys) { if (!hideGroupBys) {
this.groupBySegments = this.target.aggregation.groupBys.map(groupBy => { this.groupBySegments = this.target.groupBys.map(groupBy => {
return this.uiSegmentSrv.getSegmentForValue(groupBy); return this.uiSegmentSrv.getSegmentForValue(groupBy);
}); });
this.ensurePlusButton(this.groupBySegments); this.ensurePlusButton(this.groupBySegments);
@@ -111,7 +111,7 @@ export class StackdriverFilterCtrl {
async getGroupBys(segment) { async getGroupBys(segment) {
let elements = await this.createLabelKeyElements(); 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'; const noValueOrPlusButton = !segment || segment.type === 'plus-button';
if (noValueOrPlusButton && elements.length === 0) { if (noValueOrPlusButton && elements.length === 0) {
return []; return [];
public/app/plugins/datasource/stackdriver/specs/datasource.test.ts
-1
View File
@@ -82,7 +82,6 @@ describe('StackdriverDataSource', () => {
targets: [ targets: [
{ {
refId: 'A', refId: 'A',
aggregation: {},
}, },
], ],
}; };
public/app/plugins/datasource/stackdriver/specs/query_aggregation_ctrl.test.ts
+8 -5
View File
@@ -12,7 +12,8 @@ describe('StackdriverAggregationCtrl', () => {
target: { target: {
valueType: 'DOUBLE', valueType: 'DOUBLE',
metricKind: 'GAUGE', metricKind: 'GAUGE',
aggregation: { crossSeriesReducer: '', groupBys: [] }, crossSeriesReducer: '',
groupBys: [],
}, },
}, },
{ {
@@ -52,7 +53,8 @@ describe('StackdriverAggregationCtrl', () => {
target: { target: {
valueType: 'DOUBLE', valueType: 'DOUBLE',
metricKind: 'DELTA', metricKind: 'DELTA',
aggregation: { crossSeriesReducer: '', groupBys: [] }, crossSeriesReducer: '',
groupBys: [],
}, },
}, },
{ {
@@ -87,7 +89,8 @@ describe('StackdriverAggregationCtrl', () => {
target: { target: {
valueType: 'DOUBLE', valueType: 'DOUBLE',
metricKind: 'GAUGE', 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', () => { it('should select some other reducer than REDUCE_NONE', () => {
ctrl.setAggOptions(); ctrl.setAggOptions();
expect(ctrl.target.aggregation.crossSeriesReducer).not.toBe(''); expect(ctrl.target.crossSeriesReducer).not.toBe('');
expect(ctrl.target.aggregation.crossSeriesReducer).not.toBe('REDUCE_NONE'); expect(ctrl.target.crossSeriesReducer).not.toBe('REDUCE_NONE');
}); });
}); });
}); });
public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts
+7 -9
View File
@@ -56,7 +56,7 @@ describe('StackdriverQueryFilterCtrl', () => {
'resource-key-1': ['resource-value-1'], 'resource-key-1': ['resource-value-1'],
'resource-key-2': ['resource-value-2'], '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(); result = await ctrl.getGroupBys();
}); });
@@ -78,7 +78,7 @@ describe('StackdriverQueryFilterCtrl', () => {
}); });
it('should be added to group bys list', () => { 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', () => { 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', metricType: 'ametric',
service: '', service: '',
refId: 'A', refId: 'A',
aggregation: { crossSeriesReducer: '',
crossSeriesReducer: '', alignmentPeriod: '',
alignmentPeriod: '', perSeriesAligner: '',
perSeriesAligner: '', groupBys: [],
groupBys: [],
},
filters: existingFilters || [], filters: existingFilters || [],
aliasBy: '', aliasBy: '',
metricService: '', metricService: '',
public/app/plugins/datasource/stackdriver/types.ts
+4 -6
View File
@@ -26,12 +26,10 @@ export interface Target {
metricType: string; metricType: string;
service: string; service: string;
refId: string; refId: string;
aggregation: { crossSeriesReducer: string;
crossSeriesReducer: string; alignmentPeriod: string;
alignmentPeriod: string; perSeriesAligner: string;
perSeriesAligner: string; groupBys: string[];
groupBys: string[];
};
filters: string[]; filters: string[];
aliasBy: string; aliasBy: string;
metricKind: any; metricKind: any;