[Synthetics UI]: display remote monitors in overview management pages

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_remote_badge.tsx

@@ -0,0 +1,50 @@
+/*
+ * 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 { EuiBadge, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import type { MouseEvent } from 'react';
+import React from 'react';
+import type { RemoteMonitorInfo } from '../../../../../../common/runtime_types/remote';
+import { useKibanaSpace } from '../../../../../hooks/use_kibana_space';
+import { createRemoteMonitorDetailsUrl } from '../../../utils/remote_monitor_urls';
+
+export function MonitorRemoteBadge({
+  remote,
+  configId,
+}: {
+  remote?: RemoteMonitorInfo;
+  configId: string;
+}) {
+  const { space } = useKibanaSpace();
+
+  if (!remote) {
+    return null;
+  }
+
+  const detailsUrl = createRemoteMonitorDetailsUrl(remote, configId, space?.id);
+
+  return (
+    <EuiFlexItem grow={false}>
+      <EuiToolTip content={remote.kibanaUrl} title={remote.remoteName}>
+        <EuiBadge
+          color="default"
+          href={detailsUrl}
+          target="_blank"
+          data-test-subj="syntheticsRemoteMonitorBadge"
+          onMouseDown={(e: MouseEvent) => {
+            e.stopPropagation();
+          }}
+        >
+          {i18n.translate('xpack.synthetics.remoteBadge.label', {
+            defaultMessage: 'Remote',
+          })}
+        </EuiBadge>
+      </EuiToolTip>
+    </EuiFlexItem>
+  );
+}

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_remote_callout.tsx

@@ -0,0 +1,67 @@
+/*
+ * 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 { EuiButton, EuiCallOut, EuiLink } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+import type { RemoteMonitorInfo } from '../../../../../../common/runtime_types/remote';
+import { useKibanaSpace } from '../../../../../hooks/use_kibana_space';
+import { createRemoteMonitorDetailsUrl } from '../../../utils/remote_monitor_urls';
+
+export function MonitorRemoteCallout({
+  remote,
+  configId,
+}: {
+  remote: RemoteMonitorInfo;
+  configId: string;
+}) {
+  const { space } = useKibanaSpace();
+  const detailsUrl = createRemoteMonitorDetailsUrl(remote, configId, space?.id);
+
+  return (
+    <EuiCallOut
+      title={i18n.translate('xpack.synthetics.monitorDetails.remoteCallout.title', {
+        defaultMessage: 'Remote monitor',
+      })}
+      data-test-subj="syntheticsRemoteMonitorCallout"
+    >
+      <p>
+        <FormattedMessage
+          id="xpack.synthetics.monitorDetails.remoteCallout.description"
+          defaultMessage="This is a remote monitor fetched from the remote cluster: {remoteName} with Kibana URL {kibanaUrl}. Configuration changes must be made on the remote Kibana instance."
+          values={{
+            remoteName: <strong>{remote.remoteName}</strong>,
+            kibanaUrl: (
+              <EuiLink
+                data-test-subj="syntheticsRemoteMonitorCalloutKibanaLink"
+                href={remote.kibanaUrl}
+                target="_blank"
+              >
+                {remote.kibanaUrl}
+              </EuiLink>
+            ),
+          }}
+        />
+      </p>
+      {detailsUrl && (
+        <EuiButton
+          data-test-subj="syntheticsRemoteMonitorCalloutDetailsButton"
+          href={detailsUrl}
+          color="primary"
+          target="_blank"
+          iconType="external"
+          iconSide="right"
+        >
+          {i18n.translate('xpack.synthetics.monitorDetails.remoteCallout.viewButton', {
+            defaultMessage: 'View on remote instance',
+          })}
+        </EuiButton>
+      )}
+    </EuiCallOut>
+  );
+}

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_monitor_remote_info.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import type { RemoteMonitorInfo } from '../../../../../../common/runtime_types/remote';
+import { selectOverviewStatus } from '../../../state/overview_status';
+
+/**
+ * Looks up remote monitor info from the overview status state for a given configId.
+ * Returns the RemoteMonitorInfo if the monitor was fetched from a remote cluster,
+ * or undefined if it is a local monitor.
+ */
+export function useMonitorRemoteInfo(configId: string): RemoteMonitorInfo | undefined {
+  const { allConfigs } = useSelector(selectOverviewStatus);
+
+  return useMemo(() => {
+    if (!allConfigs) {
+      return undefined;
+    }
+    const match = allConfigs.find((config) => config.configId === configId);
+    return match?.remote;
+  }, [allConfigs, configId]);
+}

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_page_title.tsx

@@ -7,17 +7,23 @@
 
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { useParams } from 'react-router-dom';
 import { MonitorSelector } from './monitor_selector/monitor_selector';
 import { useSelectedMonitor } from './hooks/use_selected_monitor';
+import { useMonitorRemoteInfo } from './hooks/use_monitor_remote_info';
+import { MonitorRemoteBadge } from '../common/components/monitor_remote_badge';
 
 export const MonitorDetailsPageTitle = () => {
+  const { monitorId } = useParams<{ monitorId: string }>();
   const { monitor } = useSelectedMonitor();
+  const remoteInfo = useMonitorRemoteInfo(monitorId);
 
   return (
     <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
       <EuiFlexItem grow={false} data-test-subj="monitorNameTitle">
         {monitor?.name}
       </EuiFlexItem>
+      {remoteInfo && <MonitorRemoteBadge remote={remoteInfo} configId={monitorId} />}
       <EuiFlexItem>
         <MonitorSelector />
       </EuiFlexItem>

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

@@ -19,11 +19,13 @@ import { i18n } from '@kbn/i18n';
 import { useParams } from 'react-router-dom';
 import { LoadWhenInView } from '@kbn/observability-shared-plugin/public';
 import { MonitorMWsCallout } from '../../common/mws_callout/monitor_mws_callout';
+import { MonitorRemoteCallout } from '../../common/components/monitor_remote_callout';
 import { MissingIntegrationCallout } from '../../monitor_add_edit/steps/missing_integration_callout';
 import { SummaryPanel } from './summary_panel';
 
 import { useMonitorDetailsPage } from '../use_monitor_details_page';
 import { useMonitorRangeFrom } from '../hooks/use_monitor_range_from';
+import { useMonitorRemoteInfo } from '../hooks/use_monitor_remote_info';
 import { MonitorAlerts } from './monitor_alerts';
 import { MonitorStatusPanel } from '../monitor_status/monitor_status_panel';
 import { MonitorDurationTrend } from './duration_trend';
@@ -37,6 +39,7 @@ import { useMonitorAttachmentConfig } from '../hooks/use_monitor_attachment_conf
 export const MonitorSummary = () => {
   const { monitorId: configId } = useParams<{ monitorId: string }>();
   const { from, to } = useMonitorRangeFrom();
+  const remoteInfo = useMonitorRemoteInfo(configId);
 
   const dateLabel = from === 'now-30d/d' ? LAST_30_DAYS_LABEL : TO_DATE_LABEL;
   const isMediumDevice = useIsWithinBreakpoints(['xs', 's', 'm', 'l']);
@@ -52,6 +55,12 @@ export const MonitorSummary = () => {
   return (
     <>
       <MissingIntegrationCallout configId={configId} />
+      {remoteInfo && (
+        <>
+          <MonitorRemoteCallout remote={remoteInfo} configId={configId} />
+          <EuiSpacer size="m" />
+        </>
+      )}
       <MonitorPendingWrapper>
         <MonitorMWsCallout />
         <SummaryPanel dateLabel={dateLabel} from={from} to={to} />