[Synthetics] Overview - standardize queries for monitor duration metric item

src/core/server/integration_tests/saved_objects/migrations/check_registered_types.test.ts

@@ -132,7 +132,7 @@ describe('checking migration metadata changes on all registered SO types', () =>
         "siem-ui-timeline-pinned-event": "e2697b38751506c7fce6e8b7207a830483dc4283",
         "space": "c4a0acce1bd4b9cce85154f2a350624a53111c59",
         "spaces-usage-stats": "922d3235bbf519e3fb3b260e27248b1df8249b79",
-        "synthetics-monitor": "111811218f7e34f40980665a4eb99976f457bb23",
+        "synthetics-monitor": "d784b64a3def47d3f3d1f367df71ae41ef33cb3c",
         "synthetics-privates-locations": "dd00385f4a27ef062c3e57312eeb3799872fa4af",
         "tag": "39413f4578cc2128c9a0fda97d0acd1c8862c47a",
         "task": "ef53d0f070bd54957b8fe22fae3b1ff208913f76",

x-pack/plugins/synthetics/common/runtime_types/monitor_management/monitor_types.ts

@@ -391,6 +391,7 @@ export type MonitorManagementListResult = t.TypeOf<typeof MonitorManagementListR
 export const MonitorOverviewItemCodec = t.interface({
   name: t.string,
   id: t.string,
+  configId: t.string,
   location: MonitorServiceLocationCodec,
   isEnabled: t.boolean,
 });

x-pack/plugins/synthetics/e2e/journeys/synthetics/overview_sorting.journey.ts

@@ -65,7 +65,6 @@ journey('Overview Sorting', async ({ page, params }) => {
     await page.waitForSelector(`[data-test-subj="syntheticsOverviewGridItem"]`);
     await page.click('[data-test-subj="syntheticsOverviewSortButton"]');
     await page.click('button:has-text("Z -> A")');
-    await page.waitForSelector('text=Loading');
     await page.waitForSelector(`text=${testMonitor1}`);
     await page.waitForSelector(`text=${testMonitor2}`);
     await page.waitForSelector(`text=${testMonitor3}`);
@@ -85,7 +84,6 @@ journey('Overview Sorting', async ({ page, params }) => {
     await page.waitForSelector(`[data-test-subj="syntheticsOverviewGridItem"]`);
     await page.click('[data-test-subj="syntheticsOverviewSortButton"]');
     await page.click('button:has-text("Last modified")');
-    await page.waitForSelector('text=Loading');
     await page.waitForSelector(`text=${testMonitor1}`);
     await page.waitForSelector(`text=${testMonitor2}`);
     await page.waitForSelector(`text=${testMonitor3}`);
@@ -99,14 +97,12 @@ journey('Overview Sorting', async ({ page, params }) => {
     expect(await correctFirstMonitor.count()).toBe(1);
     expect(await correctSecondMonitor.count()).toBe(1);
     expect(await correctThirdMonitor.count()).toBe(1);
-    await page.waitForTimeout(30000);
   });
 
   step('sort last updated desc', async () => {
     await page.waitForSelector(`[data-test-subj="syntheticsOverviewGridItem"]`);
     await page.click('[data-test-subj="syntheticsOverviewSortButton"]');
     await page.click('button:has-text("Oldest first")');
-    await page.waitForSelector('text=Loading');
     await page.waitForSelector(`text=${testMonitor1}`);
     await page.waitForSelector(`text=${testMonitor2}`);
     await page.waitForSelector(`text=${testMonitor3}`);
@@ -120,7 +116,6 @@ journey('Overview Sorting', async ({ page, params }) => {
     expect(await correctFirstMonitor.count()).toBe(1);
     expect(await correctSecondMonitor.count()).toBe(1);
     expect(await correctThirdMonitor.count()).toBe(1);
-    await page.waitForTimeout(30000);
   });
 
   step('delete monitors', async () => {

x-pack/plugins/synthetics/public/apps/locators/edit_monitor.ts

@@ -7,10 +7,10 @@
 
 import { syntheticsEditMonitorLocatorID } from '@kbn/observability-plugin/common';
 
-async function navigate({ monitorId }: { monitorId: string }) {
+async function navigate({ configId }: { configId: string }) {
   return {
     app: 'synthetics',
-    path: `/edit-monitor/${monitorId}`,
+    path: `/edit-monitor/${configId}`,
     state: {},
   };
 }

x-pack/plugins/synthetics/public/apps/locators/monitor_detail.ts

@@ -7,11 +7,11 @@
 
 import { syntheticsMonitorDetailLocatorID } from '@kbn/observability-plugin/common';
 
-async function navigate({ monitorId, locationId }: { monitorId: string; locationId?: string }) {
+async function navigate({ configId, locationId }: { configId: string; locationId?: string }) {
   const locationUrlQueryParam = locationId ? `?locationId=${locationId}` : '';
   return {
     app: 'synthetics',
-    path: `/monitor/${monitorId}${locationUrlQueryParam}`,
+    path: `/monitor/${configId}${locationUrlQueryParam}`,
     state: {},
   };
 }

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_details_panel.tsx

@@ -36,15 +36,15 @@ export const MonitorDetailsPanel = () => {
   const { euiTheme } = useEuiTheme();
   const { latestPing } = useMonitorLatestPing();
 
-  const { monitorId } = useParams<{ monitorId: string }>();
+  const { monitorId: configId } = useParams<{ monitorId: string }>();
 
   const dispatch = useDispatch();
 
   const { monitor, loading } = useSelectedMonitor();
 
   if (
-    (latestPing && latestPing?.config_id !== monitorId) ||
-    (monitor && monitor[ConfigKey.CONFIG_ID] !== monitorId)
+    (latestPing && latestPing?.config_id !== configId) ||
+    (monitor && monitor[ConfigKey.CONFIG_ID] !== configId)
   ) {
     return <EuiLoadingContent lines={6} />;
   }
@@ -69,10 +69,10 @@ export const MonitorDetailsPanel = () => {
             {monitor && (
               <MonitorEnabled
                 initialLoading={loading}
-                id={monitorId}
+                configId={configId}
                 monitor={monitor}
                 reloadPage={() => {
-                  dispatch(getMonitorAction.get({ monitorId }));
+                  dispatch(getMonitorAction.get({ monitorId: configId }));
                 }}
               />
             )}

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_edit_monitor_locator.ts

@@ -10,7 +10,7 @@ import { useEffect, useState } from 'react';
 import { syntheticsEditMonitorLocatorID } from '@kbn/observability-plugin/common';
 import { useSyntheticsStartPlugins } from '../../../contexts';
 
-export function useEditMonitorLocator({ monitorId }: { monitorId: string }) {
+export function useEditMonitorLocator({ configId }: { configId: string }) {
   const [editUrl, setEditUrl] = useState<string | undefined>(undefined);
   const locator = useSyntheticsStartPlugins()?.share?.url.locators.get(
     syntheticsEditMonitorLocatorID
@@ -19,12 +19,12 @@ export function useEditMonitorLocator({ monitorId }: { monitorId: string }) {
   useEffect(() => {
     async function generateUrl() {
       const url = await locator?.getUrl({
-        monitorId,
+        configId,
       });
       setEditUrl(url);
     }
     generateUrl();
-  }, [locator, monitorId]);
+  }, [locator, configId]);
 
   return editUrl;
 }

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_monitor_detail_locator.ts

@@ -10,10 +10,10 @@ import { syntheticsMonitorDetailLocatorID } from '@kbn/observability-plugin/comm
 import { useSyntheticsStartPlugins } from '../../../contexts';
 
 export function useMonitorDetailLocator({
-  monitorId,
+  configId,
   locationId,
 }: {
-  monitorId: string;
+  configId: string;
   locationId?: string;
 }) {
   const [monitorUrl, setMonitorUrl] = useState<string | undefined>(undefined);
@@ -24,13 +24,13 @@ export function useMonitorDetailLocator({
   useEffect(() => {
     async function generateUrl() {
       const url = await locator?.getUrl({
-        monitorId,
+        configId,
         locationId,
       });
       setMonitorUrl(url);
     }
     generateUrl();
-  }, [locator, monitorId, locationId]);
+  }, [locator, configId, locationId]);
 
   return monitorUrl;
 }

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/columns.tsx

@@ -137,7 +137,7 @@ export function getMonitorListColumns({
       }),
       render: (_enabled: boolean, monitor: EncryptedSyntheticsSavedMonitor) => (
         <MonitorEnabled
-          id={monitor.id}
+          configId={monitor[ConfigKey.CONFIG_ID]}
           monitor={monitor}
           reloadPage={reloadPage}
           isSwitchable={!loading}

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/monitor_details_link.tsx

@@ -32,7 +32,7 @@ export const MonitorDetailsLink = ({
     lastSelectedLocationId && monitorHasLocation ? lastSelectedLocationId : firstMonitorLocationId;
 
   const monitorDetailLinkUrl = useMonitorDetailLocator({
-    monitorId: monitor[ConfigKey.CONFIG_ID],
+    configId: monitor[ConfigKey.CONFIG_ID],
     locationId,
   });
 

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/monitor_enabled.tsx

@@ -15,15 +15,15 @@ import * as labels from './labels';
 import { useMonitorEnableHandler } from '../../../../hooks/use_monitor_enable_handler';
 
 interface Props {
-  id: string;
+  configId: string;
   monitor: EncryptedSyntheticsMonitor;
   reloadPage: () => void;
   initialLoading?: boolean;
   isSwitchable?: boolean;
 }
 
 export const MonitorEnabled = ({
-  id,
+  configId,
   monitor,
   reloadPage,
   initialLoading = false,
@@ -41,7 +41,7 @@ export const MonitorEnabled = ({
   }, [monitorName]);
 
   const { isEnabled, updateMonitorEnabledState, status } = useMonitorEnableHandler({
-    id,
+    configId,
     isEnabled: monitor[ConfigKey.ENABLED],
     reloadPage,
     labels: statusLabels,

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/actions_popover.test.tsx

@@ -27,6 +27,7 @@ describe('ActionsPopover', () => {
       isEnabled: true,
       name: 'Monitor 1',
       id: 'somelongstring',
+      configId: '1lkjelre',
     };
   });
 

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/actions_popover.tsx

@@ -87,10 +87,10 @@ export function ActionsPopover({
   const locationName = useLocationName({ locationId: monitor.location.id });
 
   const detailUrl = useMonitorDetailLocator({
-    monitorId: monitor.id,
+    configId: monitor.configId,
     locationId: monitor.location.id,
   });
-  const editUrl = useEditMonitorLocator({ monitorId: monitor.id });
+  const editUrl = useEditMonitorLocator({ configId: monitor.configId });
 
   const labels = useMemo(
     () => ({
@@ -101,7 +101,7 @@ export function ActionsPopover({
     [monitor.name]
   );
   const { status, isEnabled, updateMonitorEnabledState } = useMonitorEnableHandler({
-    id: monitor.id,
+    configId: monitor.configId,
     isEnabled: monitor.isEnabled,
     labels,
   });
@@ -125,7 +125,9 @@ export function ActionsPopover({
     disabled: !locationName,
     onClick: () => {
       if (locationName) {
-        dispatch(setFlyoutConfig({ monitorId: monitor.id, location: locationName }));
+        dispatch(
+          setFlyoutConfig({ configId: monitor.configId, location: locationName, id: monitor.id })
+        );
         setIsPopoverOpen(false);
       }
     },

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx

@@ -36,12 +36,12 @@ export const MetricItem = ({
   data: Array<{ x: number; y: number }>;
   averageDuration: number;
   loaded: boolean;
-  onClick: (id: string, location: string) => void;
+  onClick: (params: { id: string; configId: string; location: string }) => void;
 }) => {
   const [isMouseOver, setIsMouseOver] = useState(false);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const locationName = useLocationName({ locationId: monitor.location?.id });
-  const { locations } = useStatusByLocation(monitor.id);
+  const { locations } = useStatusByLocation(monitor.configId);
   const ping = locations.find((loc) => loc.observer?.geo?.name === locationName);
   const theme = useTheme();
 
@@ -67,11 +67,15 @@ export const MetricItem = ({
         >
           <Chart>
             <Settings
-              onElementClick={() => monitor.id && locationName && onClick(monitor.id, locationName)}
+              onElementClick={() =>
+                monitor.configId &&
+                locationName &&
+                onClick({ configId: monitor.configId, id: monitor.id, location: locationName })
+              }
               baseTheme={DARK_THEME}
             />
             <Metric
-              id={`${monitor.id}-${monitor.location?.id}`}
+              id={`${monitor.configId}-${monitor.location?.id}`}
               data={[
                 [
                   {

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.test.tsx

@@ -50,6 +50,7 @@ describe('Monitor Detail Flyout', () => {
     const onCloseMock = jest.fn();
     const { getByLabelText } = render(
       <MonitorDetailFlyout
+        configId="test-id"
         id="test-id"
         location="US East"
         onClose={onCloseMock}
@@ -72,6 +73,7 @@ describe('Monitor Detail Flyout', () => {
 
     const { getByText } = render(
       <MonitorDetailFlyout
+        configId="test-id"
         id="test-id"
         location="US East"
         onClose={jest.fn()}
@@ -90,6 +92,7 @@ describe('Monitor Detail Flyout', () => {
 
     const { getByRole } = render(
       <MonitorDetailFlyout
+        configId="test-id"
         id="test-id"
         location="US East"
         onClose={jest.fn()}
@@ -124,6 +127,7 @@ describe('Monitor Detail Flyout', () => {
 
     const { getByRole, getByText, getAllByRole } = render(
       <MonitorDetailFlyout
+        configId="test-id"
         id="test-id"
         location="US East"
         onClose={jest.fn()}