[Synthetics] Make error popover disappear onMouseLeave of metric it…

…em card (#155800)
elastic · Apr 26, 2023 · e01e123 · e01e123
1 parent a07bdc5
commit e01e123
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/...thetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx b/...thetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx
@@ -12,7 +12,7 @@ import { DARK_THEME } from '@elastic/charts';
 import { useTheme } from '@kbn/observability-plugin/public';
 import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
-import { toggleErrorPopoverOpen } from '../../../../state';
+import { selectErrorPopoverState, toggleErrorPopoverOpen } from '../../../../state';
 import { useLocationName, useStatusByLocationOverview } from '../../../../hooks';
 import { formatDuration } from '../../../../utils/formatting';
 import { MonitorOverviewItem } from '../../../../../../../common/runtime_types';
@@ -63,6 +63,7 @@ export const MetricItem = ({
 }) => {
   const [isMouseOver, setIsMouseOver] = useState(false);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const isErrorPopoverOpen = useSelector(selectErrorPopoverState);
   const locationName =
     useLocationName({ locationId: monitor.location?.id })?.label || monitor.location?.id;
   const { status, timestamp, ping, configIdByLocation } = useStatusByLocationOverview(
@@ -86,6 +87,9 @@ export const MetricItem = ({
           }
         }}
         onMouseLeave={() => {
+          if (isErrorPopoverOpen) {
+            dispatch(toggleErrorPopoverOpen(null));
+          }
           if (isMouseOver) {
             setIsMouseOver(false);
           }

diff --git a/...cs/public/apps/synthetics/components/monitors_page/overview/overview/metric_item_icon.tsx b/...cs/public/apps/synthetics/components/monitors_page/overview/overview/metric_item_icon.tsx
@@ -103,8 +103,7 @@ export const MetricItemIcon = ({
               onMouseLeave={() => {
                 if (isPopoverOpen) {
                   return;
-                }
-                if (timer.current) {
+                } else if (timer.current) {
                   clearTimeout(timer.current);
                 }
               }}