[Metrics UI] Debounce onChange in alert creation UI (#65167)
This commit is contained in:
parent
76d8ffe0cd
commit
a467fe5ffd
|
@ -4,6 +4,7 @@
|
||||||
* you may not use this file except in compliance with the Elastic License.
|
* you may not use this file except in compliance with the Elastic License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import { debounce } from 'lodash';
|
||||||
import React, { ChangeEvent, useCallback, useMemo, useEffect, useState } from 'react';
|
import React, { ChangeEvent, useCallback, useMemo, useEffect, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
EuiSpacer,
|
EuiSpacer,
|
||||||
|
@ -40,6 +41,8 @@ import { ExpressionRow } from './expression_row';
|
||||||
import { AlertContextMeta, TimeUnit, MetricExpression } from '../types';
|
import { AlertContextMeta, TimeUnit, MetricExpression } from '../types';
|
||||||
import { ExpressionChart } from './expression_chart';
|
import { ExpressionChart } from './expression_chart';
|
||||||
|
|
||||||
|
const FILTER_TYPING_DEBOUNCE_MS = 500;
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
errors: IErrorObject[];
|
errors: IErrorObject[];
|
||||||
alertParams: {
|
alertParams: {
|
||||||
|
@ -125,6 +128,10 @@ export const Expressions: React.FC<Props> = props => {
|
||||||
[setAlertParams, derivedIndexPattern]
|
[setAlertParams, derivedIndexPattern]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const debouncedOnFilterChange = useCallback(debounce(onFilterChange, FILTER_TYPING_DEBOUNCE_MS), [
|
||||||
|
onFilterChange,
|
||||||
|
]);
|
||||||
|
|
||||||
const onGroupByChange = useCallback(
|
const onGroupByChange = useCallback(
|
||||||
(group: string | null) => {
|
(group: string | null) => {
|
||||||
setAlertParams('groupBy', group || '');
|
setAlertParams('groupBy', group || '');
|
||||||
|
@ -320,7 +327,7 @@ export const Expressions: React.FC<Props> = props => {
|
||||||
{(alertsContext.metadata && (
|
{(alertsContext.metadata && (
|
||||||
<MetricsExplorerKueryBar
|
<MetricsExplorerKueryBar
|
||||||
derivedIndexPattern={derivedIndexPattern}
|
derivedIndexPattern={derivedIndexPattern}
|
||||||
onChange={onFilterChange}
|
onChange={debouncedOnFilterChange}
|
||||||
onSubmit={onFilterChange}
|
onSubmit={onFilterChange}
|
||||||
value={alertParams.filterQueryText}
|
value={alertParams.filterQueryText}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
* you may not use this file except in compliance with the Elastic License.
|
* you may not use this file except in compliance with the Elastic License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import { debounce } from 'lodash';
|
||||||
import React, { useCallback, useMemo, useEffect, useState, ChangeEvent } from 'react';
|
import React, { useCallback, useMemo, useEffect, useState, ChangeEvent } from 'react';
|
||||||
import {
|
import {
|
||||||
EuiFlexGroup,
|
EuiFlexGroup,
|
||||||
|
@ -51,6 +52,8 @@ import { NodeTypeExpression } from './node_type';
|
||||||
import { InfraWaffleMapOptions } from '../../../lib/lib';
|
import { InfraWaffleMapOptions } from '../../../lib/lib';
|
||||||
import { convertKueryToElasticSearchQuery } from '../../../utils/kuery';
|
import { convertKueryToElasticSearchQuery } from '../../../utils/kuery';
|
||||||
|
|
||||||
|
const FILTER_TYPING_DEBOUNCE_MS = 500;
|
||||||
|
|
||||||
interface AlertContextMeta {
|
interface AlertContextMeta {
|
||||||
options?: Partial<InfraWaffleMapOptions>;
|
options?: Partial<InfraWaffleMapOptions>;
|
||||||
nodeType?: InventoryItemType;
|
nodeType?: InventoryItemType;
|
||||||
|
@ -134,6 +137,10 @@ export const Expressions: React.FC<Props> = props => {
|
||||||
[derivedIndexPattern, setAlertParams]
|
[derivedIndexPattern, setAlertParams]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const debouncedOnFilterChange = useCallback(debounce(onFilterChange, FILTER_TYPING_DEBOUNCE_MS), [
|
||||||
|
onFilterChange,
|
||||||
|
]);
|
||||||
|
|
||||||
const emptyError = useMemo(() => {
|
const emptyError = useMemo(() => {
|
||||||
return {
|
return {
|
||||||
aggField: [],
|
aggField: [],
|
||||||
|
@ -291,7 +298,7 @@ export const Expressions: React.FC<Props> = props => {
|
||||||
<MetricsExplorerKueryBar
|
<MetricsExplorerKueryBar
|
||||||
derivedIndexPattern={derivedIndexPattern}
|
derivedIndexPattern={derivedIndexPattern}
|
||||||
onSubmit={onFilterChange}
|
onSubmit={onFilterChange}
|
||||||
onChange={onFilterChange}
|
onChange={debouncedOnFilterChange}
|
||||||
value={alertParams.filterQueryText}
|
value={alertParams.filterQueryText}
|
||||||
/>
|
/>
|
||||||
)) || (
|
)) || (
|
||||||
|
|
Loading…
Reference in a new issue