[Synthetics] Fix monitor details project monitor view (#143258)

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_monitor_latest_ping.tsx

@@ -7,6 +7,7 @@
 
 import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { ConfigKey } from '../../../../../../common/runtime_types';
 import { getMonitorRecentPingsAction, selectLatestPing, selectPingsLoading } from '../../../state';
 import { useSelectedLocation } from './use_selected_location';
 import { useSelectedMonitor } from './use_selected_monitor';
@@ -28,10 +29,14 @@ export const useMonitorLatestPing = (params?: UseMonitorLatestPingParams) => {
   const latestPing = useSelector(selectLatestPing);
   const pingsLoading = useSelector(selectPingsLoading);
 
-  const isUpToDate =
-    latestPing &&
-    latestPing.monitor.id === monitorId &&
-    latestPing.observer?.geo?.name === locationLabel;
+  const latestPingId = latestPing?.monitor.id;
+
+  const isIdSame =
+    latestPingId === monitorId || latestPingId === monitor?.[ConfigKey.CUSTOM_HEARTBEAT_ID];
+
+  const isLocationSame = latestPing?.observer?.geo?.name === locationLabel;
+
+  const isUpToDate = isIdSame && isLocationSame;
 
   useEffect(() => {
     if (monitorId && locationLabel && !isUpToDate) {
@@ -47,7 +52,7 @@ export const useMonitorLatestPing = (params?: UseMonitorLatestPingParams) => {
     return { loading: pingsLoading, latestPing: null };
   }
 
-  if (latestPing.monitor.id !== monitorId || latestPing.observer?.geo?.name !== locationLabel) {
+  if (!isIdSame || !isLocationSame) {
     return { loading: pingsLoading, latestPing: null };
   }
 

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_monitor_query_id.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useParams } from 'react-router-dom';
+import { ConfigKey } from '../../../../../../common/runtime_types';
+import { useSelectedMonitor } from './use_selected_monitor';
+
+export const useMonitorQueryId = () => {
+  const { monitorId } = useParams<{ monitorId: string }>();
+
+  const { monitor } = useSelectedMonitor();
+
+  if (monitor && monitor.origin === 'project') {
+    return monitor[ConfigKey.CUSTOM_HEARTBEAT_ID]!;
+  }
+
+  return monitorId;
+};

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

@@ -8,16 +8,16 @@
 import React from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { ReportTypes, useTheme } from '@kbn/observability-plugin/public';
-import { useParams } from 'react-router-dom';
 import { ClientPluginsStart } from '../../../../../plugin';
+import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
 
 export const AvailabilitySparklines = () => {
   const {
     services: {
       observability: { ExploratoryViewEmbeddable },
     },
   } = useKibana<ClientPluginsStart>();
-  const { monitorId } = useParams<{ monitorId: string }>();
+  const monitorId = useMonitorQueryId();
 
   const theme = useTheme();
 

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

@@ -8,18 +8,18 @@
 import React from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { ReportTypes } from '@kbn/observability-plugin/public';
-import { useParams } from 'react-router-dom';
 import { ClientPluginsStart } from '../../../../../plugin';
 
 import { KpiWrapper } from './kpi_wrapper';
+import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
 
 export const DurationPanel = () => {
   const {
     services: {
       observability: { ExploratoryViewEmbeddable },
     },
   } = useKibana<ClientPluginsStart>();
-  const { monitorId } = useParams<{ monitorId: string }>();
+  const monitorId = useMonitorQueryId();
 
   return (
     <KpiWrapper>

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

@@ -7,15 +7,15 @@
 
 import React from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { useParams } from 'react-router-dom';
 import { ClientPluginsStart } from '../../../../../plugin';
+import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
 
 export const MonitorDurationTrend = () => {
   const { observability } = useKibana<ClientPluginsStart>().services;
 
   const { ExploratoryViewEmbeddable } = observability;
 
-  const { monitorId } = useParams<{ monitorId: string }>();
+  const monitorId = useMonitorQueryId();
 
   const metricsToShow = ['min', 'max', 'median', '25th', '75th'];
 
@@ -31,9 +31,7 @@ export const MonitorDurationTrend = () => {
         },
         name: metric + ' Series',
         selectedMetricField: 'monitor.duration.us',
-        reportDefinitions: {
-          'monitor.id': [monitorId],
-        },
+        reportDefinitions: { 'monitor.id': [monitorId] },
         seriesType: 'line',
         operationType: metric,
       }))}

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

@@ -9,20 +9,20 @@ import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText, EuiTitle } from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { ReportTypes } from '@kbn/observability-plugin/public';
-import { useParams } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 
+import { useMonitorQueryId } from '../hooks/use_monitor_query_id';
 import { useSelectedMonitor } from '../hooks/use_selected_monitor';
 import { ClientPluginsStart } from '../../../../../plugin';
 export const StepDurationPanel = () => {
   const { observability } = useKibana<ClientPluginsStart>().services;
 
   const { ExploratoryViewEmbeddable } = observability;
 
-  const { monitorId } = useParams<{ monitorId: string }>();
-
   const { monitor } = useSelectedMonitor();
 
+  const monitorId = useMonitorQueryId();
+
   const isBrowser = monitor?.type === 'browser';
 
   return (