[Fleet] Prevent popovers on agent logs page from being stuck (elastic…

…#105253)
dominiqueclarke · Jul 12, 2021 · a5eadd0 · a5eadd0
1 parent afc07c3
commit a5eadd0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/...cations/fleet/sections/agents/agent_details_page/components/agent_logs/filter_dataset.tsx b/...cations/fleet/sections/agents/agent_details_page/components/agent_logs/filter_dataset.tsx
@@ -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) => (

diff --git a/...tions/fleet/sections/agents/agent_details_page/components/agent_logs/filter_log_level.tsx b/...tions/fleet/sections/agents/agent_details_page/components/agent_logs/filter_log_level.tsx
@@ -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) => (