Transformations: Remove usage of gf-forms in FilterByValue transformation (#76570)

This commit is contained in:
Joao Silva 2023-10-16 10:36:48 +01:00 committed by GitHub
parent 70d41d5a80
commit 260e123b35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 39 deletions

View File

@ -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"]
],

View File

@ -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>
);
};

View File

@ -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 = {