diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_selector/monitor_searchable_list.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_selector/monitor_searchable_list.tsx index 7f08cfcbd59bd..caafd24a87335 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_selector/monitor_searchable_list.tsx +++ b/x-pack/plugins/synthetics/public/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([]); + const [options, setOptions] = useState([]); 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 ( - 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) => ( {option.label} diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_selector/use_monitor_name.ts b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_selector/use_monitor_name.ts index cb097b0f99342..497d2d64d1c6a 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_selector/use_monitor_name.ts +++ b/x-pack/plugins/synthetics/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/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_selector/use_recently_viewed_monitors.test.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_selector/use_recently_viewed_monitors.test.tsx index 8c5922f4acc7a..e1e0e288cf4a1 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_selector/use_recently_viewed_monitors.test.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/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/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_selector/use_recently_viewed_monitors.ts b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_selector/use_recently_viewed_monitors.ts index 64f7a60c28c7a..569b5f14539f4 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_selector/use_recently_viewed_monitors.ts +++ b/x-pack/plugins/synthetics/public/apps/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]);