[Synthetics] Detect and display missing/corrupted Synthetics integrations in monitor UIs

x-pack/solutions/observability/plugins/synthetics/common/constants/synthetics/rest_api.ts

@@ -23,6 +23,8 @@ export enum SYNTHETICS_API_URLS {
   SERVICE_ALLOWED = '/internal/synthetics/service/allowed',
   SYNTHETICS_PROJECT_APIKEY = '/internal/synthetics/service/api_key',
   SYNTHETICS_HAS_INTEGRATION_MONITORS = '/internal/synthetics/fleet/has_integration_monitors',
+  SYNTHETICS_MONITORS_HEALTH = '/internal/synthetics/monitors/_health',
+  SYNTHETICS_MONITOR_HEALTH = '/internal/synthetics/monitors/{monitorId}/_health',
   PRIVATE_LOCATIONS_CLEANUP = `/internal/synthetics/private_locations/_cleanup`,
   SYNC_GLOBAL_PARAMS = `/internal/synthetics/sync_global_params`,
   SYNC_GLOBAL_PARAMS_SETTINGS = `/internal/synthetics/sync_global_params/_settings`,

x-pack/solutions/observability/plugins/synthetics/common/runtime_types/index.ts

@@ -14,3 +14,4 @@ export * from './snapshot';
 export * from './network_events';
 export * from './monitor_management';
 export * from './monitor_management/synthetics_private_locations';
+export * from './monitor_health';

x-pack/solutions/observability/plugins/synthetics/common/runtime_types/monitor_health.ts

@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+export enum LocationHealthStatusValue {
+  Healthy = 'healthy',
+  MissingPackagePolicy = 'missing_package_policy',
+  MissingAgentPolicy = 'missing_agent_policy',
+  AgentPolicyMismatch = 'agent_policy_mismatch',
+  MissingLocation = 'missing_location',
+  PackageNotInstalled = 'package_not_installed',
+}
+
+export interface LocationHealthStatus {
+  locationId: string;
+  locationLabel: string;
+  status: LocationHealthStatusValue;
+  policyId: string;
+  reason?: string;
+}
+
+export interface MonitorHealthStatus {
+  configId: string;
+  monitorName: string;
+  isUnhealthy: boolean;
+  locations: LocationHealthStatus[];
+}
+
+export interface MonitorHealthError {
+  configId: string;
+  error: string;
+  statusCode?: number;
+}
+
+export interface MonitorsHealthResponse {
+  monitors: MonitorHealthStatus[];
+  errors: MonitorHealthError[];
+}

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/hooks/status_labels.ts

@@ -0,0 +1,51 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { LocationHealthStatusValue } from '../../../../../../common/runtime_types';
+
+export const STATUS_LABELS: Record<
+  Exclude<LocationHealthStatusValue, LocationHealthStatusValue.Healthy>,
+  string
+> = {
+  [LocationHealthStatusValue.MissingPackagePolicy]: i18n.translate(
+    'xpack.synthetics.monitorHealth.status.missingPackagePolicy',
+    {
+      defaultMessage: 'The Fleet package policy for this monitor/location pair does not exist.',
+    }
+  ),
+  [LocationHealthStatusValue.MissingAgentPolicy]: i18n.translate(
+    'xpack.synthetics.monitorHealth.status.missingAgentPolicy',
+    {
+      defaultMessage: 'The agent policy referenced by this private location no longer exists.',
+    }
+  ),
+  [LocationHealthStatusValue.AgentPolicyMismatch]: i18n.translate(
+    'xpack.synthetics.monitorHealth.status.agentPolicyMismatch',
+    {
+      defaultMessage:
+        'The package policy exists but is attached to a different agent policy than expected.',
+    }
+  ),
+  [LocationHealthStatusValue.MissingLocation]: i18n.translate(
+    'xpack.synthetics.monitorHealth.status.missingLocation',
+    {
+      defaultMessage: 'The monitor references a private location that no longer exists.',
+    }
+  ),
+  [LocationHealthStatusValue.PackageNotInstalled]: i18n.translate(
+    'xpack.synthetics.monitorHealth.status.packageNotInstalled',
+    {
+      defaultMessage: 'The synthetics Fleet package is not installed.',
+    }
+  ),
+};
+
+export const getStatusLabel = (status: LocationHealthStatusValue): string | undefined => {
+  if (status === LocationHealthStatusValue.Healthy) return undefined;
+  return STATUS_LABELS[status];
+};

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/hooks/use_monitor_integration_health.ts

@@ -0,0 +1,183 @@
+/*
+ * 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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  fetchMonitorListAction,
+  getMonitorListPageStateWithDefaults,
+  selectMonitorListState,
+} from '../../../state';
+import { ConfigKey, LocationHealthStatusValue } from '../../../../../../common/runtime_types';
+import { fetchMonitorHealthAction, selectMonitorHealth } from '../../../state/monitor_health';
+
+export interface MonitorIntegrationStatus {
+  configId: string;
+  locationId: string;
+  locationLabel: string;
+  policyId: string;
+  status: LocationHealthStatusValue;
+  isUnhealthy: boolean;
+}
+
+interface UseMonitorIntegrationHealthOptions {
+  configIds?: string[];
+}
+
+interface UseMonitorIntegrationHealthReturn {
+  statuses: Map<string, MonitorIntegrationStatus[]>;
+  loading: boolean;
+  isResetting: boolean;
+  resetMonitor: (configId: string) => Promise<void>;
+  resetMonitors: (configIds: string[]) => Promise<void>;
+  isUnhealthy: (configId: string) => boolean;
+  getUnhealthyLocationStatuses: (configId: string) => MonitorIntegrationStatus[];
+  getUnhealthyLocationCount: () => number;
+  getUnhealthyMonitorCountForLocation: (locationId: string) => number;
+  getUnhealthyConfigIdsForLocation: (locationId: string) => string[];
+}
+
+export const useMonitorIntegrationHealth = (
+  options?: UseMonitorIntegrationHealthOptions
+): UseMonitorIntegrationHealthReturn => {
+  const { configIds: explicitConfigIds } = options ?? {};
+  const dispatch = useDispatch();
+  const [isResetting, setIsResetting] = useState(false);
+
+  const {
+    data: { monitors: listMonitors },
+    loaded: listLoaded,
+    loading: listLoading,
+  } = useSelector(selectMonitorListState);
+
+  const { data: healthData, loading: healthLoading } = useSelector(selectMonitorHealth);
+
+  useEffect(() => {
+    if (!explicitConfigIds && !listLoaded && !listLoading) {
+      dispatch(fetchMonitorListAction.get(getMonitorListPageStateWithDefaults()));
+    }
+  }, [dispatch, explicitConfigIds, listLoaded, listLoading]);
+
+  const monitorIdsToFetch = useMemo(() => {
+    if (explicitConfigIds) {
+      return explicitConfigIds;
+    }
+    if (!listLoaded) {
+      return [];
+    }
+    return listMonitors
+      .filter((m) => (m[ConfigKey.LOCATIONS] ?? []).some((loc) => !loc.isServiceManaged))
+      .map((m) => m[ConfigKey.CONFIG_ID]);
+  }, [explicitConfigIds, listLoaded, listMonitors]);
+
+  const prevIdsRef = useRef<string>('');
+
+  useEffect(() => {
+    if (monitorIdsToFetch.length === 0) return;
+
+    const key = monitorIdsToFetch.slice().sort().join(',');
+    if (key === prevIdsRef.current) return;
+    prevIdsRef.current = key;
+
+    dispatch(fetchMonitorHealthAction.get(monitorIdsToFetch));
+  }, [dispatch, monitorIdsToFetch]);
+
+  const statuses = useMemo(() => {
+    const map = new Map<string, MonitorIntegrationStatus[]>();
+    if (!healthData) return map;
+
+    for (const monitor of healthData.monitors) {
+      const locationStatuses: MonitorIntegrationStatus[] = monitor.locations.map((loc) => ({
+        configId: monitor.configId,
+        locationId: loc.locationId,
+        locationLabel: loc.locationLabel,
+        policyId: loc.policyId,
+        status: loc.status,
+        isUnhealthy: loc.status !== LocationHealthStatusValue.Healthy,
+      }));
+      map.set(monitor.configId, locationStatuses);
+    }
+
+    return map;
+  }, [healthData]);
+
+  const isUnhealthy = useCallback(
+    (configId: string): boolean => {
+      const locationStatuses = statuses.get(configId);
+      return locationStatuses?.some((s) => s.isUnhealthy) ?? false;
+    },
+    [statuses]
+  );
+
+  const getUnhealthyLocationStatuses = useCallback(
+    (configId: string): MonitorIntegrationStatus[] => {
+      const locationStatuses = statuses.get(configId);
+      return locationStatuses?.filter((s) => s.isUnhealthy) ?? [];
+    },
+    [statuses]
+  );
+
+  const getUnhealthyLocationCount = useCallback((): number => {
+    let count = 0;
+    for (const locationStatuses of statuses.values()) {
+      if (locationStatuses.some((s) => s.isUnhealthy)) count++;
+    }
+    return count;
+  }, [statuses]);
+
+  const getUnhealthyMonitorCountForLocation = useCallback(
+    (locationId: string): number => {
+      let count = 0;
+      for (const locationStatuses of statuses.values()) {
+        if (locationStatuses.some((s) => s.locationId === locationId && s.isUnhealthy)) count++;
+      }
+      return count;
+    },
+    [statuses]
+  );
+
+  const getUnhealthyConfigIdsForLocation = useCallback(
+    (locationId: string): string[] => {
+      const ids: string[] = [];
+      for (const entries of statuses.values()) {
+        if (entries.some((s) => s.locationId === locationId && s.isUnhealthy)) {
+          ids.push(entries[0].configId);
+        }
+      }
+      return ids;
+    },
+    [statuses]
+  );
+
+  // Reset functionality is a stub until the reset endpoint is implemented (#256394)
+  const resetMonitor = useCallback(async (_configId: string): Promise<void> => {
+    setIsResetting(true);
+    await new Promise((resolve) => setTimeout(resolve, 800));
+    setIsResetting(false);
+  }, []);
+
+  const resetMonitors = useCallback(async (_ids: string[]): Promise<void> => {
+    setIsResetting(true);
+    await new Promise((resolve) => setTimeout(resolve, 800));
+    setIsResetting(false);
+  }, []);
+
+  const loading = explicitConfigIds ? healthLoading : !listLoaded || healthLoading;
+
+  return {
+    statuses,
+    loading,
+    isResetting,
+    resetMonitor,
+    resetMonitors,
+    isUnhealthy,
+    getUnhealthyLocationStatuses,
+    getUnhealthyLocationCount,
+    getUnhealthyMonitorCountForLocation,
+    getUnhealthyConfigIdsForLocation,
+  };
+};

x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/monitor_edit_page.tsx

@@ -26,6 +26,7 @@ import {
   selectSyntheticsMonitorLoading,
 } from '../../state';
 import { AlertingCallout } from '../common/alerting_callout/alerting_callout';
+import { MissingIntegrationCallout } from './steps/missing_integration_callout';
 import { MonitorSteps } from './steps';
 import { MonitorForm } from './form';
 import { LocationsLoadingError } from './locations_loading_error';
@@ -102,6 +103,7 @@ export const MonitorEditPage: React.FC = () => {
     <>
       <DisabledCallout />
       <CanUsePublicLocationsCallout canUsePublicLocations={canUsePublicLocations} />
+      <MissingIntegrationCallout configId={data[ConfigKey.CONFIG_ID]} />
       <AlertingCallout isAlertingEnabled={data[ConfigKey.ALERT_CONFIG]?.status?.enabled} />
       <MonitorForm
         defaultValues={data}