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