add link to location badge

elastic · Feb 11, 2025 · 6eb781e · 6eb781e
1 parent 58744e7
commit 6eb781e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 21 deletions.
diff --git a/...lugins/slo/public/pages/slo_details/components/overview/synthetics_indicator_overview.tsx b/...lugins/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,7 +27,8 @@ 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;
 
@@ -35,7 +39,8 @@ export function SyntheticsIndicatorOverview({ slo }: Props) {
     return null;
   }
 
-  const onMonitorClick = () => locator?.navigate({ monitorId, locationId });
+  const onMonitorClick = () => monitorLocator?.navigate({ monitorId, locationId });
+  const onLocationClick = () => regionLocator?.navigate({ locationId: location });
   const showOverviewItem = name || location;
 
   if (!showOverviewItem) {
@@ -65,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 },
@@ -89,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',
+  }
+);
diff --git a/...utions/observability/plugins/synthetics/public/apps/locators/group_monitor_by_location.ts b/...utions/observability/plugins/synthetics/public/apps/locators/group_monitor_by_location.ts
@@ -7,29 +7,15 @@
 
 import { syntheticsMonitorLocationQueryLocatorID } from '@kbn/observability-plugin/common';
 
-async function navigate({
-  monitorId,
-  locationId,
-  spaceId,
-}: {
-  monitorId: string;
-  locationId?: string;
-  spaceId?: string;
-}) {
-  let queryParam = locationId ? `?locationId=${locationId}` : '';
-
-  if (spaceId) {
-    queryParam += queryParam ? `&spaceId=${spaceId}` : `?spaceId=${spaceId}`;
-  }
-
+async function navigate({ locationId }: { locationId: string }) {
   return {
     app: 'synthetics',
-    path: `/monitor/${queryParam}`,
+    path: `?locations=${[locationId]}`,
     state: {},
   };
 }
 
-export const monitorDetailNavigatorParams = {
+export const monitorLocationNavigatorParams = {
   id: syntheticsMonitorLocationQueryLocatorID,
   getLocation: navigate,
 };
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/locators/index.ts b/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,
 ];