[Synthetics] Fix breadcrumbs navigation for monitor (#148384)

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Fixes https://github.com/elastic/kibana/issues/148031

x-pack/plugins/synthetics/public/apps/synthetics/components/common/links/step_details_link.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 { EuiButtonIcon } from '@elastic/eui';
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { useSelectedLocation } from '../../monitor_details/hooks/use_selected_location';
+import { useSyntheticsSettingsContext } from '../../../contexts';
+
+export const StepDetailsLinkIcon = ({
+  stepIndex,
+  checkGroup,
+}: {
+  checkGroup: string;
+  stepIndex?: number;
+}) => {
+  const { basePath } = useSyntheticsSettingsContext();
+  const selectedLocation = useSelectedLocation();
+
+  return (
+    <EuiButtonIcon
+      aria-label={VIEW_DETAILS}
+      title={VIEW_DETAILS}
+      size="s"
+      href={`${basePath}/app/synthetics/journey/${checkGroup}/step/${stepIndex}?locationId=${selectedLocation?.id}`}
+      target="_self"
+      iconType="apmTrace"
+    />
+  );
+};
+
+const VIEW_DETAILS = i18n.translate('xpack.synthetics.monitor.step.viewStepDetails', {
+  defaultMessage: 'View step details',
+});

x-pack/plugins/synthetics/public/apps/synthetics/components/common/links/test_details_link.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { EuiLink, EuiText, useEuiTheme } from '@elastic/eui';
+import { useSelectedLocation } from '../../monitor_details/hooks/use_selected_location';
 import { Ping } from '../../../../../../common/runtime_types';
 import { useSyntheticsSettingsContext } from '../../../contexts';
 import { useKibanaDateFormat } from '../../../../../hooks/use_kibana_date_format';
@@ -23,6 +24,7 @@ export const TestDetailsLink = ({
 }) => {
   const { euiTheme } = useEuiTheme();
   const { basePath } = useSyntheticsSettingsContext();
+  const selectedLocation = useSelectedLocation();
 
   const format = useKibanaDateFormat();
   const timestampText = (
@@ -33,9 +35,12 @@ export const TestDetailsLink = ({
 
   return isBrowserMonitor ? (
     <EuiLink
-      href={`${basePath}/app/synthetics/monitor/${ping?.config_id ?? ''}/test-run/${
-        ping.monitor.check_group
-      }`}
+      href={getTestRunDetailLink({
+        basePath,
+        checkGroup: ping.monitor.check_group,
+        monitorId: ping?.config_id ?? '',
+        locationId: selectedLocation?.id,
+      })}
     >
       {timestampText}
     </EuiLink>
@@ -43,3 +48,22 @@ export const TestDetailsLink = ({
     timestampText
   );
 };
+
+export const getTestRunDetailLink = ({
+  monitorId,
+  basePath,
+  checkGroup,
+  locationId,
+}: {
+  monitorId: string;
+  checkGroup: string;
+  basePath?: string;
+  locationId?: string;
+}) => {
+  const testRunUrl = `/monitor/${monitorId}/test-run/${checkGroup}?locationId=${locationId}`;
+  if (basePath) {
+    return `${basePath}/app/synthetics${testRunUrl}`;
+  } else {
+    return testRunUrl;
+  }
+};

x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/browser_steps_list.tsx

@@ -7,17 +7,11 @@
 
 import { i18n } from '@kbn/i18n';
 import React, { CSSProperties } from 'react';
-import {
-  EuiBasicTable,
-  EuiBasicTableColumn,
-  EuiButtonIcon,
-  EuiText,
-  useEuiTheme,
-} from '@elastic/eui';
+import { EuiBasicTable, EuiBasicTableColumn, EuiText, useEuiTheme } from '@elastic/eui';
 import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
 
+import { StepDetailsLinkIcon } from '../links/step_details_link';
 import { JourneyStepScreenshotContainer } from '../screenshot/journey_step_screenshot_container';
-import { useSyntheticsSettingsContext } from '../../../contexts/synthetics_settings_context';
 import { JourneyStep } from '../../../../../../common/runtime_types';
 
 import { StatusBadge, parseBadgeStatus, getTextColorForMonitorStatus } from './status_badge';
@@ -46,8 +40,6 @@ export const BrowserStepsList = ({
   const stepEnds: JourneyStep[] = steps.filter(isStepEnd);
   const stepLabels = stepEnds.map((stepEnd) => stepEnd?.synthetics?.step?.name ?? '');
 
-  const { basePath } = useSyntheticsSettingsContext();
-
   const columns: Array<EuiBasicTableColumn<JourneyStep>> = [
     ...(showStepNumber
       ? [
@@ -125,13 +117,9 @@ export const BrowserStepsList = ({
       name: '',
       mobileOptions: { show: false },
       render: (_val: string, item) => (
-        <EuiButtonIcon
-          aria-label={VIEW_DETAILS}
-          title={VIEW_DETAILS}
-          size="s"
-          href={`${basePath}/app/synthetics/journey/${item.monitor.check_group}/step/${item.synthetics?.step?.index}`}
-          target="_self"
-          iconType="apmTrace"
+        <StepDetailsLinkIcon
+          checkGroup={item.monitor.check_group}
+          stepIndex={item.synthetics?.step?.index}
         />
       ),
     },
@@ -201,7 +189,3 @@ const STEP_NAME = i18n.translate('xpack.synthetics.monitor.stepName.label', {
 const STEP_DURATION = i18n.translate('xpack.synthetics.monitor.step.duration.label', {
   defaultMessage: 'Duration',
 });
-
-const VIEW_DETAILS = i18n.translate('xpack.synthetics.monitor.step.viewDetails', {
-  defaultMessage: 'View Details',
-});

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/monitor_details_portal.tsx

@@ -9,26 +9,35 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { EuiLink, EuiIcon } from '@elastic/eui';
 import { InPortal } from 'react-reverse-portal';
+import { useSelectedLocation } from '../monitor_details/hooks/use_selected_location';
 import { MonitorDetailsLinkPortalNode } from './portals';
 
-export const MonitorDetailsLinkPortal = ({
-  name,
-  configId,
-}: {
+interface Props {
   name: string;
   configId: string;
-}) => {
+  locationId?: string;
+}
+
+export const MonitorDetailsLinkPortal = ({ name, configId, locationId }: Props) => {
   return (
     <InPortal node={MonitorDetailsLinkPortalNode}>
-      <MonitorDetailsLink name={name} configId={configId} />
+      <MonitorDetailsLink name={name} configId={configId} locationId={locationId} />
     </InPortal>
   );
 };
 
-export const MonitorDetailsLink = ({ name, configId }: { name: string; configId: string }) => {
+export const MonitorDetailsLink = ({ name, configId, locationId }: Props) => {
+  const selectedLocation = useSelectedLocation();
+
+  let locId = locationId;
+
+  if (selectedLocation?.id && !locationId) {
+    locId = selectedLocation.id;
+  }
+
   const history = useHistory();
   const href = history.createHref({
-    pathname: `monitor/${configId}`,
+    pathname: locId ? `monitor/${configId}?locationId=${locId}` : `monitor/${configId}`,
   });
   return (
     <EuiLink href={href}>

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

@@ -22,8 +22,9 @@ import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
 import { EuiTableSortingType } from '@elastic/eui/src/components/basic_table/table_types';
 
 import { useHistory, useParams } from 'react-router-dom';
+import { useSelectedLocation } from '../hooks/use_selected_location';
 import { MONITOR_TYPES } from '../../../../../../common/constants';
-import { TestDetailsLink } from '../../common/links/test_details_link';
+import { getTestRunDetailLink, TestDetailsLink } from '../../common/links/test_details_link';
 import { ConfigKey, DataStream, Ping } from '../../../../../../common/runtime_types';
 import { formatTestDuration } from '../../../utils/monitor_test_result/test_time_formats';
 import { useSyntheticsSettingsContext } from '../../../contexts/synthetics_settings_context';
@@ -141,6 +142,8 @@ export const TestRunsTable = ({ paginable = true, from, to }: TestRunsTableProps
     },
   ];
 
+  const selectedLocation = useSelectedLocation();
+
   const getRowProps = (item: Ping) => {
     if (item.monitor.type !== MONITOR_TYPES.BROWSER) {
       return {};
@@ -156,7 +159,13 @@ export const TestRunsTable = ({ paginable = true, from, to }: TestRunsTableProps
           targetElem.tagName !== 'path' &&
           !targetElem.parentElement?.classList.contains('euiLink')
         ) {
-          history.push(`/monitor/${monitorId}/test-run/${item.monitor.check_group}`);
+          history.push(
+            getTestRunDetailLink({
+              monitorId,
+              checkGroup: item.monitor.check_group,
+              locationId: selectedLocation?.id,
+            })
+          );
         }
       },
     };

x-pack/plugins/synthetics/public/apps/synthetics/components/test_run_details/hooks/use_test_run_details_breadcrumbs.ts

@@ -6,6 +6,7 @@
  */
 import { i18n } from '@kbn/i18n';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useSelectedLocation } from '../../monitor_details/hooks/use_selected_location';
 import { useSelectedMonitor } from '../../monitor_details/hooks/use_selected_monitor';
 import { useBreadcrumbs } from '../../../hooks/use_breadcrumbs';
 import { ConfigKey } from '../../../../../../common/runtime_types';
@@ -20,6 +21,8 @@ export const useTestRunDetailsBreadcrumbs = (
 
   const { monitor } = useSelectedMonitor();
 
+  const selectedLocation = useSelectedLocation();
+
   useBreadcrumbs([
     {
       text: MONITOR_MANAGEMENT_CRUMB,
@@ -30,7 +33,7 @@ export const useTestRunDetailsBreadcrumbs = (
       href: `${appPath}${MONITOR_ROUTE.replace(
         ':monitorId',
         monitor?.[ConfigKey.CONFIG_ID] ?? ''
-      )}`,
+      )}?locationId=${selectedLocation?.id ?? ''}`,
     },
     ...(extraCrumbs ?? []),
   ]);

x-pack/plugins/translations/translations/fr-FR.json

@@ -33586,7 +33586,6 @@
     "xpack.synthetics.monitor.step.screenshot.notAvailable": "La capture d'écran de l'étape n'est pas disponible.",
     "xpack.synthetics.monitor.step.screenshot.unAvailable": "Image indisponible",
     "xpack.synthetics.monitor.step.thumbnail.alt": "Version plus grande de la capture d'écran de la miniature de l'étape du parcours.",
-    "xpack.synthetics.monitor.step.viewDetails": "Afficher les détails",
     "xpack.synthetics.monitor.stepName.label": "Nom de l'étape",
     "xpack.synthetics.monitorCharts.durationChart.wrapper.label": "Graphique affichant la durée de ping du moniteur, avec regroupement par emplacement.",
     "xpack.synthetics.monitorCharts.monitorDuration.titleLabel": "Durée du moniteur",

x-pack/plugins/translations/translations/ja-JP.json

@@ -33558,7 +33558,6 @@
     "xpack.synthetics.monitor.step.screenshot.notAvailable": "ステップスクリーンショットがありません。",
     "xpack.synthetics.monitor.step.screenshot.unAvailable": "画像がありません",
     "xpack.synthetics.monitor.step.thumbnail.alt": "このステップのサムネイルのスクリーンショットの大きいバージョン。",
-    "xpack.synthetics.monitor.step.viewDetails": "詳細を表示",
     "xpack.synthetics.monitor.stepName.label": "ステップ名",
     "xpack.synthetics.monitorCharts.durationChart.wrapper.label": "場所でグループ化された、モニターのping期間を示すグラフ。",
     "xpack.synthetics.monitorCharts.monitorDuration.titleLabel": "監視期間",

x-pack/plugins/translations/translations/zh-CN.json

@@ -33592,7 +33592,6 @@
     "xpack.synthetics.monitor.step.screenshot.notAvailable": "步骤屏幕截图不可用。",
     "xpack.synthetics.monitor.step.screenshot.unAvailable": "图像不可用",
     "xpack.synthetics.monitor.step.thumbnail.alt": "此过程步骤的缩略图屏幕截图较大版本。",
-    "xpack.synthetics.monitor.step.viewDetails": "查看详情",
     "xpack.synthetics.monitor.stepName.label": "步骤名称",
     "xpack.synthetics.monitorCharts.durationChart.wrapper.label": "显示监测的 ping 持续时间（按位置分组）的图表。",
     "xpack.synthetics.monitorCharts.monitorDuration.titleLabel": "监测持续时间",