diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx index c1213b8ddfa1..406f9c7602d3 100644 --- a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx +++ b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx @@ -4,6 +4,7 @@ * 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 { EuiSpacer, @@ -40,6 +41,8 @@ import { ExpressionRow } from './expression_row'; import { AlertContextMeta, TimeUnit, MetricExpression } from '../types'; import { ExpressionChart } from './expression_chart'; +const FILTER_TYPING_DEBOUNCE_MS = 500; + interface Props { errors: IErrorObject[]; alertParams: { @@ -125,6 +128,10 @@ export const Expressions: React.FC = props => { [setAlertParams, derivedIndexPattern] ); + const debouncedOnFilterChange = useCallback(debounce(onFilterChange, FILTER_TYPING_DEBOUNCE_MS), [ + onFilterChange, + ]); + const onGroupByChange = useCallback( (group: string | null) => { setAlertParams('groupBy', group || ''); @@ -320,7 +327,7 @@ export const Expressions: React.FC = props => { {(alertsContext.metadata && ( diff --git a/x-pack/plugins/infra/public/components/alerting/inventory/expression.tsx b/x-pack/plugins/infra/public/components/alerting/inventory/expression.tsx index 15cad770836b..c2ee552e3155 100644 --- a/x-pack/plugins/infra/public/components/alerting/inventory/expression.tsx +++ b/x-pack/plugins/infra/public/components/alerting/inventory/expression.tsx @@ -4,6 +4,7 @@ * 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 { EuiFlexGroup, @@ -51,6 +52,8 @@ import { NodeTypeExpression } from './node_type'; import { InfraWaffleMapOptions } from '../../../lib/lib'; import { convertKueryToElasticSearchQuery } from '../../../utils/kuery'; +const FILTER_TYPING_DEBOUNCE_MS = 500; + interface AlertContextMeta { options?: Partial; nodeType?: InventoryItemType; @@ -134,6 +137,10 @@ export const Expressions: React.FC = props => { [derivedIndexPattern, setAlertParams] ); + const debouncedOnFilterChange = useCallback(debounce(onFilterChange, FILTER_TYPING_DEBOUNCE_MS), [ + onFilterChange, + ]); + const emptyError = useMemo(() => { return { aggField: [], @@ -291,7 +298,7 @@ export const Expressions: React.FC = props => { )) || (