Fix: Consider all summary pings to determine if monitor is only fleet…

… managed. (#142004) (#142659) * Consider all ping to determine if monitor is only fleet managed. * Close popover on outside click as the built-in functionality is buggy. * Handle the case where only private locations are selected among a mix of locations. (cherry picked from commit 1eb059d) Co-authored-by: Abdul Wahab Zahid <[email protected]>
elastic · Oct 4, 2022 · 3b7c409 · 3b7c409
1 parent 1fc372c
commit 3b7c409
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 55 deletions.
diff --git a/...s/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx b/...s/synthetics/public/legacy_uptime/components/monitor_management/action_bar/action_bar.tsx
@@ -14,6 +14,7 @@ import {
   EuiButtonEmpty,
   EuiText,
   EuiPopover,
+  EuiOutsideClickDetector,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
@@ -71,8 +72,10 @@ export const ActionBar = ({
   const mouseMoveTimeoutIds = useRef<[number, number]>([0, 0]);
   const isReadOnly = monitor[ConfigKey.MONITOR_SOURCE_TYPE] === SourceType.PROJECT;
 
-  const hasServiceManagedLocation = monitor.locations?.some((loc) => loc.isServiceManaged);
-  const isOnlyPrivateLocations = !locations.some((loc) => loc.isServiceManaged);
+  const isAnyPublicLocationSelected = monitor.locations?.some((loc) => loc.isServiceManaged);
+  const isOnlyPrivateLocations =
+    !locations.some((loc) => loc.isServiceManaged) ||
+    ((monitor.locations?.length ?? 0) > 0 && !isAnyPublicLocationSelected);
 
   const { data, status } = useFetcher(() => {
     if (!isSaving || !isValid) {
@@ -150,55 +153,61 @@ export const ActionBar = ({
             {onTestNow && (
               <EuiFlexItem grow={false}>
                 {/* Popover is used instead of EuiTooltip until the resolution of https://github.com/elastic/eui/issues/5604 */}
-                <EuiPopover
-                  repositionOnScroll={true}
-                  ownFocus={false}
-                  initialFocus={''}
-                  button={
-                    <EuiButton
-                      css={{ width: '100%' }}
-                      fill
-                      size="s"
-                      color="success"
-                      iconType="play"
-                      disabled={!isValid || isTestRunInProgress || !hasServiceManagedLocation}
-                      data-test-subj={'monitorTestNowRunBtn'}
-                      onClick={() => onTestNow()}
-                      onMouseOver={() => {
-                        // We need this custom logic to display a popover even when button is disabled.
-                        clearTimeout(mouseMoveTimeoutIds.current[1]);
-                        if (mouseMoveTimeoutIds.current[0] === 0) {
-                          mouseMoveTimeoutIds.current[0] = setTimeout(() => {
-                            clearTimeout(mouseMoveTimeoutIds.current[1]);
-                            setIsPopoverOpen(true);
-                          }, 250) as unknown as number;
-                        }
-                      }}
-                      onMouseOut={() => {
-                        // We need this custom logic to display a popover even when button is disabled.
-                        clearTimeout(mouseMoveTimeoutIds.current[1]);
-                        mouseMoveTimeoutIds.current[1] = setTimeout(() => {
-                          clearTimeout(mouseMoveTimeoutIds.current[0]);
-                          setIsPopoverOpen(false);
-                          mouseMoveTimeoutIds.current = [0, 0];
-                        }, 100) as unknown as number;
-                      }}
-                    >
-                      {testRun ? RE_RUN_TEST_LABEL : RUN_TEST_LABEL}
-                    </EuiButton>
-                  }
-                  isOpen={isPopoverOpen}
+                <EuiOutsideClickDetector
+                  onOutsideClick={() => {
+                    setIsPopoverOpen(false);
+                  }}
                 >
-                  <EuiText style={{ width: 260, outline: 'none' }}>
-                    <p>
-                      {isTestRunInProgress
-                        ? TEST_SCHEDULED_LABEL
-                        : isOnlyPrivateLocations || (isValid && !hasServiceManagedLocation)
-                        ? PRIVATE_AVAILABLE_LABEL
-                        : TEST_NOW_DESCRIPTION}
-                    </p>
-                  </EuiText>
-                </EuiPopover>
+                  <EuiPopover
+                    repositionOnScroll={true}
+                    ownFocus={false}
+                    initialFocus={''}
+                    button={
+                      <EuiButton
+                        css={{ width: '100%' }}
+                        fill
+                        size="s"
+                        color="success"
+                        iconType="play"
+                        disabled={!isValid || isTestRunInProgress || !isAnyPublicLocationSelected}
+                        data-test-subj={'monitorTestNowRunBtn'}
+                        onClick={() => onTestNow()}
+                        onMouseOver={() => {
+                          // We need this custom logic to display a popover even when button is disabled.
+                          clearTimeout(mouseMoveTimeoutIds.current[1]);
+                          if (mouseMoveTimeoutIds.current[0] === 0) {
+                            mouseMoveTimeoutIds.current[0] = setTimeout(() => {
+                              clearTimeout(mouseMoveTimeoutIds.current[1]);
+                              setIsPopoverOpen(true);
+                            }, 250) as unknown as number;
+                          }
+                        }}
+                        onMouseOut={() => {
+                          // We need this custom logic to display a popover even when button is disabled.
+                          clearTimeout(mouseMoveTimeoutIds.current[1]);
+                          mouseMoveTimeoutIds.current[1] = setTimeout(() => {
+                            clearTimeout(mouseMoveTimeoutIds.current[0]);
+                            setIsPopoverOpen(false);
+                            mouseMoveTimeoutIds.current = [0, 0];
+                          }, 100) as unknown as number;
+                        }}
+                      >
+                        {testRun ? RE_RUN_TEST_LABEL : RUN_TEST_LABEL}
+                      </EuiButton>
+                    }
+                    isOpen={isPopoverOpen}
+                  >
+                    <EuiText style={{ width: 260, outline: 'none' }}>
+                      <p>
+                        {isTestRunInProgress
+                          ? TEST_SCHEDULED_LABEL
+                          : isOnlyPrivateLocations || (isValid && !isAnyPublicLocationSelected)
+                          ? PRIVATE_AVAILABLE_LABEL
+                          : TEST_NOW_DESCRIPTION}
+                      </p>
+                    </EuiText>
+                  </EuiPopover>
+                </EuiOutsideClickDetector>
               </EuiFlexItem>
             )}
 

diff --git a/...synthetics/public/legacy_uptime/components/overview/monitor_list/columns/test_now_col.tsx b/...synthetics/public/legacy_uptime/components/overview/monitor_list/columns/test_now_col.tsx
@@ -5,8 +5,8 @@
  * 2.0.
  */
 
+import React, { useMemo } from 'react';
 import { EuiButtonIcon, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui';
-import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Ping } from '../../../../../../common/runtime_types';
 import { testNowMonitorAction } from '../../../../state/actions';
@@ -16,17 +16,21 @@ import * as labels from '../translations';
 export const TestNowColumn = ({
   monitorId,
   configId,
-  selectedMonitor,
+  summaryPings,
 }: {
   monitorId: string;
   configId?: string;
-  selectedMonitor: Ping;
+  summaryPings: Ping[];
 }) => {
   const dispatch = useDispatch();
 
   const testNowRun = useSelector(testNowRunSelector(configId));
 
-  if (selectedMonitor.monitor.fleet_managed) {
+  const isOnFleetManaged = useMemo(() => {
+    return summaryPings.every((ping) => !!ping.monitor.fleet_managed);
+  }, [summaryPings]);
+
+  if (isOnFleetManaged) {
     return (
       <EuiToolTip content={labels.PRIVATE_AVAILABLE_LABEL}>
         <>--</>

diff --git a/...plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/monitor_list.tsx b/...plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/monitor_list.tsx
@@ -212,7 +212,7 @@ export const MonitorListComponent: ({
         <TestNowColumn
           monitorId={item.monitor_id}
           configId={item.configId}
-          selectedMonitor={item.state.summaryPings[0]}
+          summaryPings={item.state.summaryPings}
         />
       ),
     },