IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Transformations: improve the reduce transformer (#27875)

Browse Source
This commit is contained in:
Ryan McKinley
2020-10-14 08:27:58 -07:00
committed by GitHub
parent db071e4939
commit f8e0adb168
5 changed files with 272 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx
View File

@@ -1,14 +1,15 @@
import React from 'react';
import { StatsPicker } from '@grafana/ui';
import React, { useCallback } from 'react';
import { StatsPicker, Select, LegacyForms } from '@grafana/ui';
import {
DataTransformerID,
ReducerID,
standardTransformers,
TransformerRegistyItem,
TransformerUIProps,
SelectableValue,
} from '@grafana/data';
import { ReduceTransformerOptions } from '@grafana/data/src/transformations/transformers/reduce';
import { ReduceTransformerOptions, ReduceTransformerMode } from '@grafana/data/src/transformations/transformers/reduce';
import { selectors } from '@grafana/e2e-selectors';
// TODO: Minimal implementation, needs some <3
@@ -16,27 +17,87 @@ export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransfor
options,
onChange,
}) => {
const modes: Array<SelectableValue<ReduceTransformerMode>> = [
{
label: 'Series to rows',
value: ReduceTransformerMode.SeriesToRows,
description: 'Create a table with one row for each series value',
},
{
label: 'Reduce fields',
value: ReduceTransformerMode.ReduceFields,
description: 'Collapse each field into a single value',
},
];
const onSelectMode = useCallback(
(value: SelectableValue<ReduceTransformerMode>) => {
const mode = value.value!;
onChange({
...options,
mode,
includeTimeField: mode === ReduceTransformerMode.ReduceFields ? !!options.includeTimeField : false,
});
},
[onChange, options]
);
const onToggleTime = useCallback(() => {
onChange({
...options,
includeTimeField: !options.includeTimeField,
});
}, [onChange, options]);
return (
<div className="gf-form-inline">
<div className="gf-form gf-form--grow">
<div className="gf-form-label width-8" aria-label={selectors.components.Transforms.Reduce.calculationsLabel}>
Calculations
<>
<div>
<div className="gf-form gf-form--grow">
<div className="gf-form-label width-8" aria-label={selectors.components.Transforms.Reduce.modeLabel}>
Mode
</div>
<Select
options={modes}
value={modes.find(v => v.value === options.mode) || modes[0]}
onChange={onSelectMode}
menuPlacement="bottom"
className="flex-grow-1"
/>
</div>
<StatsPicker
className="flex-grow-1"
placeholder="Choose Stat"
allowMultiple
stats={options.reducers || []}
onChange={stats => {
onChange({
...options,
reducers: stats as ReducerID[],
});
}}
menuPlacement="bottom"
/>
</div>
</div>
<div className="gf-form-inline">
<div className="gf-form gf-form--grow">
<div className="gf-form-label width-8" aria-label={selectors.components.Transforms.Reduce.calculationsLabel}>
Calculations
</div>
<StatsPicker
className="flex-grow-1"
placeholder="Choose Stat"
allowMultiple
stats={options.reducers || []}
onChange={stats => {
onChange({
...options,
reducers: stats as ReducerID[],
});
}}
menuPlacement="bottom"
/>
</div>
</div>
{options.mode === ReduceTransformerMode.ReduceFields && (
<div className="gf-form-inline">
<div className="gf-form">
<LegacyForms.Switch
label="Include time"
labelClass="width-8"
checked={!!options.includeTimeField}
onChange={onToggleTime}
/>
</div>
</div>
)}
</>
);
};