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. * 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}
/> />

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