[Metrics UI] Debounce onChange in alert creation UI (#65167)

elastic · May 5, 2020 · a467fe5 · a467fe5
1 parent 76d8ffe
commit a467fe5
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
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
@@ -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> = 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> = props => {
         {(alertsContext.metadata && (
           <MetricsExplorerKueryBar
             derivedIndexPattern={derivedIndexPattern}
-            onChange={onFilterChange}
+            onChange={debouncedOnFilterChange}
             onSubmit={onFilterChange}
             value={alertParams.filterQueryText}
           />

diff --git 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<InfraWaffleMapOptions>;
   nodeType?: InventoryItemType;
@@ -134,6 +137,10 @@ export const Expressions: React.FC<Props> = 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> = props => {
           <MetricsExplorerKueryBar
             derivedIndexPattern={derivedIndexPattern}
             onSubmit={onFilterChange}
-            onChange={onFilterChange}
+            onChange={debouncedOnFilterChange}
             value={alertParams.filterQueryText}
           />
         )) || (