mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Transformations: Remove usage of gf-forms in FilterByValue transformation (#76570)
This commit is contained in:
parent
70d41d5a80
commit
260e123b35
@ -5187,9 +5187,6 @@ exports[`better eslint`] = {
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "14"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "15"]
|
||||
],
|
||||
"public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/features/transformers/FilterByValueTransformer/ValueMatchers/BasicMatcherEditor.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
|
||||
],
|
||||
|
@ -2,7 +2,8 @@ import React, { useCallback } from 'react';
|
||||
|
||||
import { Field, SelectableValue, valueMatchers } from '@grafana/data';
|
||||
import { FilterByValueFilter } from '@grafana/data/src/transformations/transformers/filterByValue';
|
||||
import { Button, Select } from '@grafana/ui';
|
||||
import { Button, Select, InlineField, InlineFieldRow } from '@grafana/ui';
|
||||
import { Box } from '@grafana/ui/src/unstable';
|
||||
|
||||
import { valueMatchersUI } from './ValueMatchers/valueMatchersUI';
|
||||
|
||||
@ -75,9 +76,8 @@ export const FilterByValueFilterEditor = (props: Props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form gf-form-spacing">
|
||||
<div className="gf-form-label width-7">Field</div>
|
||||
<InlineFieldRow>
|
||||
<InlineField label="Field" labelWidth={14}>
|
||||
<Select
|
||||
className="min-width-15 max-width-24"
|
||||
placeholder="Field Name"
|
||||
@ -85,9 +85,8 @@ export const FilterByValueFilterEditor = (props: Props) => {
|
||||
value={filter.fieldName}
|
||||
onChange={onChangeField}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form gf-form-spacing">
|
||||
<div className="gf-form-label">Match</div>
|
||||
</InlineField>
|
||||
<InlineField label="Match">
|
||||
<Select
|
||||
className="width-12"
|
||||
placeholder="Select test"
|
||||
@ -95,15 +94,14 @@ export const FilterByValueFilterEditor = (props: Props) => {
|
||||
value={matcherId}
|
||||
onChange={onChangeMatcher}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form gf-form-spacing">
|
||||
<div className="gf-form-label">Value</div>
|
||||
</InlineField>
|
||||
<InlineField label="Value" grow>
|
||||
<editor.component field={field} options={filter.config.options ?? {}} onChange={onChangeMatcherOptions} />
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
</InlineField>
|
||||
<Box marginBottom={0.5}>
|
||||
<Button icon="times" onClick={onDelete} variant="secondary" />
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</InlineFieldRow>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -1,4 +1,3 @@
|
||||
import { css } from '@emotion/css';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
|
||||
@ -21,7 +20,8 @@ import {
|
||||
FilterByValueTransformerOptions,
|
||||
FilterByValueType,
|
||||
} from '@grafana/data/src/transformations/transformers/filterByValue';
|
||||
import { Button, RadioButtonGroup, stylesFactory } from '@grafana/ui';
|
||||
import { Button, RadioButtonGroup, InlineField } from '@grafana/ui';
|
||||
import { Box } from '@grafana/ui/src/unstable';
|
||||
|
||||
import { DataFrameFieldsInfo, FilterByValueFilterEditor } from './FilterByValueFilterEditor';
|
||||
|
||||
@ -37,7 +37,6 @@ const filterMatch: Array<SelectableValue<FilterByValueMatch>> = [
|
||||
|
||||
export const FilterByValueTransformerEditor = (props: TransformerUIProps<FilterByValueTransformerOptions>) => {
|
||||
const { input, options, onChange } = props;
|
||||
const styles = getEditorStyles();
|
||||
const fieldsInfo = useFieldsInfo(input);
|
||||
|
||||
const onAddFilter = useCallback(() => {
|
||||
@ -101,19 +100,17 @@ export const FilterByValueTransformerEditor = (props: TransformerUIProps<FilterB
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="gf-form gf-form-inline">
|
||||
<div className="gf-form-label width-8">Filter type</div>
|
||||
<InlineField label="Filter type" labelWidth={16}>
|
||||
<div className="width-15">
|
||||
<RadioButtonGroup options={filterTypes} value={options.type} onChange={onChangeType} fullWidth />
|
||||
</div>
|
||||
</div>
|
||||
<div className="gf-form gf-form-inline">
|
||||
<div className="gf-form-label width-8">Conditions</div>
|
||||
</InlineField>
|
||||
<InlineField label="Conditions" labelWidth={16}>
|
||||
<div className="width-15">
|
||||
<RadioButtonGroup options={filterMatch} value={options.match} onChange={onChangeMatch} fullWidth />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.conditions}>
|
||||
</InlineField>
|
||||
<Box paddingLeft={2}>
|
||||
{options.filters.map((filter, idx) => (
|
||||
<FilterByValueFilterEditor
|
||||
key={idx}
|
||||
@ -123,12 +120,10 @@ export const FilterByValueTransformerEditor = (props: TransformerUIProps<FilterB
|
||||
onDelete={() => onDeleteFilter(idx)}
|
||||
/>
|
||||
))}
|
||||
<div className="gf-form">
|
||||
<Button icon="plus" size="sm" onClick={onAddFilter} variant="secondary">
|
||||
Add condition
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Button icon="plus" size="sm" onClick={onAddFilter} variant="secondary">
|
||||
Add condition
|
||||
</Button>
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -143,12 +138,6 @@ export const filterByValueTransformRegistryItem: TransformerRegistryItem<FilterB
|
||||
categories: new Set([TransformerCategory.Filter]),
|
||||
};
|
||||
|
||||
const getEditorStyles = stylesFactory(() => ({
|
||||
conditions: css`
|
||||
padding-left: 16px;
|
||||
`,
|
||||
}));
|
||||
|
||||
const useFieldsInfo = (data: DataFrame[]): DataFrameFieldsInfo => {
|
||||
return useMemo(() => {
|
||||
const meta = {
|
||||
|
Loading…
Reference in New Issue
Block a user