Add location, fix name badge links for Synthetics SLOs (#210695)

## Summary

- Implements #178138 
- Fixes a bug where clicking on the existing link to the monitor via the
name badge led failed to load any data.

## Release Notes
- Fixes a bug where clicking on the name badge for a synthetics monitor
on an SLO details page would lead to a page that failed to load monitor
details.
- Adds a working link to the location badge on synthetics SLOs that will
route the user to the monitors page with a filter applied that matches
the location of the origin SLO.

![Screenshot 2025-02-11 at 3 31
15 PM](https://github.com/user-attachments/assets/1df39069-fc42-4c33-a7e5-8395b2730f43)
![Screenshot 2025-02-11 at 3 31
34 PM](https://github.com/user-attachments/assets/f1b3180f-eb9c-4f3b-9ff6-66bd4d1f8d5b)

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

@@ -78,6 +78,8 @@ export const observabilityFeatureId = 'observability';
 // by other plugins as well, so defined here to prevent cross-references.
 export { uptimeOverviewLocatorID } from '@kbn/deeplinks-observability';
 export const syntheticsMonitorDetailLocatorID = 'SYNTHETICS_MONITOR_DETAIL_LOCATOR';
+export const syntheticsMonitorLocationQueryLocatorID =
+  'SYNTHETICS_MONITOR_GROUP_BY_LOCATION_LOCATOR';
 export const syntheticsEditMonitorLocatorID = 'SYNTHETICS_EDIT_MONITOR_LOCATOR';
 export const syntheticsSettingsLocatorID = 'SYNTHETICS_SETTINGS';
 export const alertsLocatorID = 'ALERTS_LOCATOR';

x-pack/solutions/observability/plugins/slo/public/pages/slo_details/components/overview/synthetics_indicator_overview.tsx

@@ -9,7 +9,10 @@ import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { syntheticsAvailabilityIndicatorSchema, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import React from 'react';
-import { syntheticsMonitorDetailLocatorID } from '@kbn/observability-plugin/common';
+import {
+  syntheticsMonitorDetailLocatorID,
+  syntheticsMonitorLocationQueryLocatorID,
+} from '@kbn/observability-plugin/common';
 import { useKibana } from '../../../../hooks/use_kibana';
 import { OverviewItem } from './overview_item';
 
@@ -24,17 +27,20 @@ export function SyntheticsIndicatorOverview({ slo }: Props) {
     },
   } = useKibana().services;
 
-  const locator = locators.get(syntheticsMonitorDetailLocatorID);
+  const monitorLocator = locators.get(syntheticsMonitorDetailLocatorID);
+  const regionLocator = locators.get(syntheticsMonitorLocationQueryLocatorID);
 
   const { 'monitor.name': name, 'observer.geo.name': location } = slo.groupings;
-  const { configId, locationId } = slo.meta?.synthetics || {};
+
+  const { locationId, monitorId } = slo.meta?.synthetics || {};
 
   const indicator = slo.indicator;
   if (!syntheticsAvailabilityIndicatorSchema.is(indicator)) {
     return null;
   }
 
-  const onMonitorClick = () => locator?.navigate({ configId, locationId });
+  const onMonitorClick = () => monitorLocator?.navigate({ configId: monitorId, locationId });
+  const onLocationClick = () => regionLocator?.navigate({ locationId: location });
   const showOverviewItem = name || location;
 
   if (!showOverviewItem) {
@@ -64,7 +70,13 @@ export function SyntheticsIndicatorOverview({ slo }: Props) {
           )}
           {location && (
             <EuiFlexItem grow={false}>
-              <EuiBadge color="hollow">
+              <EuiBadge
+                color="hollow"
+                onClick={onLocationClick}
+                iconOnClick={onLocationClick}
+                onClickAriaLabel={LOCATION_ARIA_LABEL}
+                iconOnClickAriaLabel={LOCATION_ARIA_LABEL}
+              >
                 {i18n.translate('xpack.slo.sloDetails.overview.syntheticsMonitor.locationName', {
                   defaultMessage: 'Location: {value}',
                   values: { value: location },
@@ -88,3 +100,10 @@ const MONITOR_ARIA_LABEL = i18n.translate(
     defaultMessage: 'Synthetics monitor details',
   }
 );
+
+const LOCATION_ARIA_LABEL = i18n.translate(
+  'xpack.slo.sloDetails.overview.syntheticsLocationGroup',
+  {
+    defaultMessage: 'View all monitors in this location',
+  }
+);

x-pack/solutions/observability/plugins/synthetics/public/apps/locators/group_monitor_by_location.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 { syntheticsMonitorLocationQueryLocatorID } from '@kbn/observability-plugin/common';
+
+async function navigate({ locationId }: { locationId: string }) {
+  const locations = encodeURIComponent(JSON.stringify([locationId]));
+
+  return {
+    app: 'synthetics',
+    path: `?locations=${[locations]}`,
+    state: {},
+  };
+}
+
+export const monitorLocationNavigatorParams = {
+  id: syntheticsMonitorLocationQueryLocatorID,
+  getLocation: navigate,
+};

x-pack/solutions/observability/plugins/synthetics/public/apps/locators/index.ts

@@ -9,9 +9,11 @@ import { SerializableRecord } from '@kbn/utility-types';
 import { monitorDetailNavigatorParams } from './monitor_detail';
 import { editMonitorNavigatorParams } from './edit_monitor';
 import { syntheticsSettingsNavigatorParams } from './settings';
+import { monitorLocationNavigatorParams } from './group_monitor_by_location';
 
 export const locators: Array<Pick<LocatorPublic<SerializableRecord>, 'id' | 'getLocation'>> = [
   monitorDetailNavigatorParams,
+  monitorLocationNavigatorParams,
   editMonitorNavigatorParams,
   syntheticsSettingsNavigatorParams,
 ];