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;
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
+37 -68
View File
@@ -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
+5 -13
View File
@@ -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
+4 -4
View File
@@ -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
+7 -7
View File
@@ -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
+8 -12
View File
@@ -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
+2 -2
View File
@@ -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
-1
View File
@@ -82,7 +82,6 @@ describe('StackdriverDataSource', () => {
targets: [
{
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: {
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
+7 -9
View File
@@ -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
+4 -6
View File
@@ -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;