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

#210930) # Backport This will backport the following commits from `main` to `9.0`: - [Add location, fix name badge links for Synthetics SLOs (#210695)](#210695)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Bailey Cash <bailey.cash@elastic.co> Co-authored-by: Shahzad <shahzad31comp@gmail.com>
elastic · Feb 18, 2025 · 852a008 · 852a008
1 parent 75e54da
commit 852a008
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 5 deletions.
diff --git a/x-pack/solutions/observability/plugins/observability/common/index.ts b/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';

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,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',
+  }
+);
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
@@ -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,
+};
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,
 ];