[Fleet] Prevent popovers on agent logs page from being stuck (#105253)

This commit is contained in:
Alejandro Fernández Gómez 2021-07-12 19:54:20 +02:00 committed by GitHub
parent afc07c376f
commit a5eadd054d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 6 deletions

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import React, { memo, useState, useEffect } from 'react';
import React, { memo, useState, useEffect, useCallback } from 'react';
import { EuiPopover, EuiFilterButton, EuiFilterSelectItem } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -22,6 +22,9 @@ export const DatasetFilter: React.FunctionComponent<{
const [isLoading, setIsLoading] = useState<boolean>(false);
const [datasetValues, setDatasetValues] = useState<string[]>([AGENT_DATASET]);
const togglePopover = useCallback(() => setIsOpen((prevIsOpen) => !prevIsOpen), [setIsOpen]);
const closePopover = useCallback(() => setIsOpen(false), [setIsOpen]);
useEffect(() => {
const fetchValues = async () => {
setIsLoading(true);
@ -48,7 +51,7 @@ export const DatasetFilter: React.FunctionComponent<{
button={
<EuiFilterButton
iconType="arrowDown"
onClick={() => setIsOpen(true)}
onClick={togglePopover}
isSelected={isOpen}
isLoading={isLoading}
numFilters={datasetValues.length}
@ -61,7 +64,7 @@ export const DatasetFilter: React.FunctionComponent<{
</EuiFilterButton>
}
isOpen={isOpen}
closePopover={() => setIsOpen(false)}
closePopover={closePopover}
panelPaddingSize="none"
>
{datasetValues.map((dataset) => (

View file

@ -5,7 +5,7 @@
* 2.0.
*/
import React, { memo, useState, useEffect } from 'react';
import React, { memo, useState, useEffect, useCallback } from 'react';
import { EuiPopover, EuiFilterButton, EuiFilterSelectItem } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -33,6 +33,9 @@ export const LogLevelFilter: React.FunctionComponent<{
const [isLoading, setIsLoading] = useState<boolean>(false);
const [levelValues, setLevelValues] = useState<string[]>([]);
const togglePopover = useCallback(() => setIsOpen((prevIsOpen) => !prevIsOpen), []);
const closePopover = useCallback(() => setIsOpen(false), []);
useEffect(() => {
const fetchValues = async () => {
setIsLoading(true);
@ -59,7 +62,7 @@ export const LogLevelFilter: React.FunctionComponent<{
button={
<EuiFilterButton
iconType="arrowDown"
onClick={() => setIsOpen(true)}
onClick={togglePopover}
isSelected={isOpen}
isLoading={isLoading}
numFilters={levelValues.length}
@ -72,7 +75,7 @@ export const LogLevelFilter: React.FunctionComponent<{
</EuiFilterButton>
}
isOpen={isOpen}
closePopover={() => setIsOpen(false)}
closePopover={closePopover}
panelPaddingSize="none"
>
{levelValues.map((level) => (