maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Zacqary Adam Xeper 2020-05-05 13:57:25 -05:00 committed by GitHub
parent 76d8ffe0cd
commit a467fe5ffd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx
View file

@ -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}
/>

9
x-pack/plugins/infra/public/components/alerting/inventory/expression.tsx
View file

@ -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}
/>
)) || (