[Logs UI] Improve log threshold rule field selection (#111135)
* [Logs UI] Use ComboBox for criterion field selection (#110996 * [Logs UI] Make log threshold criterion field clearable
This commit is contained in:
parent
2cda9a9302
commit
51fd4abe20
|
@ -17,6 +17,7 @@ import {
|
||||||
EuiFieldText,
|
EuiFieldText,
|
||||||
EuiButtonIcon,
|
EuiButtonIcon,
|
||||||
EuiFormRow,
|
EuiFormRow,
|
||||||
|
EuiComboBox,
|
||||||
} from '@elastic/eui';
|
} from '@elastic/eui';
|
||||||
import { i18n } from '@kbn/i18n';
|
import { i18n } from '@kbn/i18n';
|
||||||
import { isNumber, isFinite } from 'lodash';
|
import { isNumber, isFinite } from 'lodash';
|
||||||
|
@ -112,7 +113,7 @@ export const Criterion: React.FC<Props> = ({
|
||||||
|
|
||||||
const fieldOptions = useMemo(() => {
|
const fieldOptions = useMemo(() => {
|
||||||
return fields.map((field) => {
|
return fields.map((field) => {
|
||||||
return { value: field.name, text: field.name };
|
return { label: field.name };
|
||||||
});
|
});
|
||||||
}, [fields]);
|
}, [fields]);
|
||||||
|
|
||||||
|
@ -129,8 +130,14 @@ export const Criterion: React.FC<Props> = ({
|
||||||
}, [fieldInfo]);
|
}, [fieldInfo]);
|
||||||
|
|
||||||
const handleFieldChange = useCallback(
|
const handleFieldChange = useCallback(
|
||||||
(e) => {
|
([selectedOption]) => {
|
||||||
const fieldName = e.target.value;
|
if (!selectedOption) {
|
||||||
|
updateCriterion(idx, { field: '' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const fieldName = selectedOption.label;
|
||||||
|
|
||||||
const nextFieldInfo = getFieldInfo(fields, fieldName);
|
const nextFieldInfo = getFieldInfo(fields, fieldName);
|
||||||
// If the field information we're dealing with has changed, reset the comparator and value.
|
// If the field information we're dealing with has changed, reset the comparator and value.
|
||||||
if (
|
if (
|
||||||
|
@ -146,10 +153,14 @@ export const Criterion: React.FC<Props> = ({
|
||||||
} else {
|
} else {
|
||||||
updateCriterion(idx, { field: fieldName });
|
updateCriterion(idx, { field: fieldName });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setIsFieldPopoverOpen(false);
|
||||||
},
|
},
|
||||||
[fieldInfo, fields, idx, updateCriterion]
|
[fieldInfo, fields, idx, updateCriterion]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const selectedField = criterion.field ? [{ label: criterion.field }] : [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EuiFlexGroup gutterSize="s">
|
<EuiFlexGroup gutterSize="s">
|
||||||
<EuiFlexItem grow>
|
<EuiFlexItem grow>
|
||||||
|
@ -181,13 +192,19 @@ export const Criterion: React.FC<Props> = ({
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<EuiPopoverTitle>{criterionFieldTitle}</EuiPopoverTitle>
|
<EuiPopoverTitle>{criterionFieldTitle}</EuiPopoverTitle>
|
||||||
<EuiFormRow isInvalid={errors.field.length > 0} error={errors.field}>
|
<EuiFormRow
|
||||||
<EuiSelect
|
style={{ minWidth: '300px' }}
|
||||||
|
isInvalid={errors.field.length > 0}
|
||||||
|
error={errors.field}
|
||||||
|
>
|
||||||
|
<EuiComboBox
|
||||||
compressed
|
compressed
|
||||||
hasNoInitialSelection={criterion.field == null}
|
fullWidth
|
||||||
value={criterion.field ?? ''}
|
isClearable={false}
|
||||||
onChange={handleFieldChange}
|
singleSelection={{ asPlainText: true }}
|
||||||
options={fieldOptions}
|
options={fieldOptions}
|
||||||
|
selectedOptions={selectedField}
|
||||||
|
onChange={handleFieldChange}
|
||||||
/>
|
/>
|
||||||
</EuiFormRow>
|
</EuiFormRow>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue