[Synthetics] Monitor select append location id (#148523)

Fixes #146057
elastic · Jan 9, 2023 · f94c7ad · f94c7ad
1 parent cecdd18
commit f94c7ad
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 18 deletions.
diff --git a/...c/apps/synthetics/components/monitor_details/monitor_selector/monitor_searchable_list.tsx b/...c/apps/synthetics/components/monitor_details/monitor_selector/monitor_searchable_list.tsx
@@ -22,11 +22,15 @@ import { useMonitorName } from './use_monitor_name';
 import { AddMonitorLink } from '../../common/links/add_monitor';
 import { useSyntheticsSettingsContext } from '../../../contexts';
 
+type MonitorOption = EuiSelectableOption & {
+  locationIds?: string[];
+};
+
 export const MonitorSearchableList = ({ closePopover }: { closePopover: () => void }) => {
   const history = useHistory();
   const recentlyViewed = useRecentlyViewedMonitors();
 
-  const [options, setOptions] = useState<EuiSelectableOption[]>([]);
+  const [options, setOptions] = useState<MonitorOption[]>([]);
   const [searchValue, setSearchValue] = useState('');
 
   const selectedLocation = useSelectedLocation();
@@ -36,14 +40,19 @@ export const MonitorSearchableList = ({ closePopover }: { closePopover: () => vo
   const { values, loading } = useMonitorName({ search: searchValue });
 
   useEffect(() => {
-    const newOptions: EuiSelectableOption[] = [];
+    const newOptions: MonitorOption[] = [];
     if (recentlyViewed.length > 0 && !searchValue) {
       const otherMonitors = values.filter((value) =>
         recentlyViewed.every((recent) => recent.key !== value.key)
-      );
+      ) as MonitorOption[];
 
       if (otherMonitors.length > 0) {
-        newOptions.push({ key: 'monitors', label: OTHER_MONITORS, isGroupLabel: true });
+        newOptions.push({
+          key: 'monitors',
+          label: OTHER_MONITORS,
+          isGroupLabel: true,
+          locationIds: [],
+        });
       }
 
       setOptions([...recentlyViewed, ...newOptions, ...otherMonitors]);
@@ -52,8 +61,15 @@ export const MonitorSearchableList = ({ closePopover }: { closePopover: () => vo
     }
   }, [recentlyViewed, searchValue, values]);
 
+  const getLocationId = (option: MonitorOption) => {
+    if (option.locationIds?.includes(selectedLocation?.id ?? '')) {
+      return selectedLocation?.id;
+    }
+    return option.locationIds?.[0];
+  };
+
   return (
-    <EuiSelectable
+    <EuiSelectable<MonitorOption>
       searchable
       isLoading={loading}
       searchProps={{
@@ -67,7 +83,7 @@ export const MonitorSearchableList = ({ closePopover }: { closePopover: () => vo
         setOptions(selectedOptions);
         const option = selectedOptions.find((opt) => opt.checked === 'on');
         if (option) {
-          history.push(`/monitor/${option.key}?locationId=${selectedLocation?.id}`);
+          history.push(`/monitor/${option.key}?locationId=${getLocationId(option)}`);
         }
         closePopover();
       }}
@@ -77,7 +93,9 @@ export const MonitorSearchableList = ({ closePopover }: { closePopover: () => vo
       }}
       renderOption={(option, search) => (
         <EuiLink
-          href={`${basePath}/app/synthetics/monitor/${option.key}?locationId=${selectedLocation?.id}`}
+          href={`${basePath}/app/synthetics/monitor/${option.key}?locationId=${getLocationId(
+            option
+          )}`}
         >
           <EuiHighlight search={searchValue}>{option.label}</EuiHighlight>
         </EuiLink>

diff --git a/...cs/public/apps/synthetics/components/monitor_details/monitor_selector/use_monitor_name.ts b/...cs/public/apps/synthetics/components/monitor_details/monitor_selector/use_monitor_name.ts
@@ -28,6 +28,7 @@ export const useMonitorName = ({ search = '' }: { search?: string }) => {
     const values = monitors.map((monitor) => ({
       label: monitor.attributes.name as string,
       key: monitor.id,
+      locationIds: monitor.attributes.locations.map((location) => location.id),
     }));
 
     return { values: values.filter((val) => val.key !== monitorId), loading };

diff --git a/...thetics/components/monitor_details/monitor_selector/use_recently_viewed_monitors.test.tsx b/...thetics/components/monitor_details/monitor_selector/use_recently_viewed_monitors.test.tsx
@@ -6,6 +6,7 @@
  */
 import React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
+import { waitFor } from '@testing-library/react';
 import { useRecentlyViewedMonitors } from './use_recently_viewed_monitors';
 import { mockCore, WrappedHelper } from '../../../utils/testing';
 import { syntheticsMonitorType } from '../../../../../../common/types/saved_objects';
@@ -19,6 +20,7 @@ const resultData = {
 
         attributes: {
           name: 'Test Monitor',
+          locations: [],
         },
       },
     },
@@ -68,16 +70,19 @@ describe('useRecentlyViewedMonitors', () => {
 
     await waitForNextUpdate();
 
-    expect(result.current).toEqual([
-      {
-        isGroupLabel: true,
-        key: 'recently_viewed',
-        label: 'Recently viewed',
-      },
-      {
-        key: 'c9322230-2a11-11ed-962b-d3e7eeedf9d1',
-        label: 'Test Monitor',
-      },
-    ]);
+    await waitFor(() => {
+      expect(result.current).toEqual([
+        {
+          isGroupLabel: true,
+          key: 'recently_viewed',
+          label: 'Recently viewed',
+        },
+        {
+          key: 'c9322230-2a11-11ed-962b-d3e7eeedf9d1',
+          label: 'Test Monitor',
+          locationIds: [],
+        },
+      ]);
+    });
   });
 });
diff --git a/...ps/synthetics/components/monitor_details/monitor_selector/use_recently_viewed_monitors.ts b/...ps/synthetics/components/monitor_details/monitor_selector/use_recently_viewed_monitors.ts
@@ -61,6 +61,7 @@ export const useRecentlyViewedMonitors = () => {
       .map(({ saved_object: monitor }) => ({
         key: monitor.id,
         label: (monitor.attributes as MonitorFields).name,
+        locationIds: (monitor.attributes as MonitorFields).locations.map((location) => location.id),
       }));
   }, [monitorId, recentlyViewed]);