[Synthetics] Step details page, step selection, location fix (#149529)

x-pack/plugins/synthetics/e2e/journeys/uptime/private_locations/add_monitor_private_location.ts

@@ -57,6 +57,7 @@ journey('AddPrivateLocationMonitor', async ({ page, params: { kibanaUrl } }) =>
       page.waitForNavigation(/* { url: '${kibanaUrl}/app/integrations/browse' }*/),
       page.click('text=Integrations'),
     ]);
+    await page.click('text=Display beta integrations');
     await page.click('text=Installed integrations');
     expect(page.url()).toBe(`${kibanaUrl}/app/integrations/installed`);
     await page.click(`text=Elastic Synthetics`);

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

@@ -52,7 +52,10 @@ export const MonitorLocationSelect = ({
       return '';
     }
 
-    if (monitorLocations.length > 1) {
+    const showSelection =
+      monitorLocations.length === 1 && monitorLocations[0].id !== selectedLocation?.id;
+
+    if (monitorLocations.length > 1 || showSelection) {
       const button = (
         <EuiLink onClick={openLocationList} disabled={isDisabled}>
           {selectedLocation.label} <EuiIcon type="arrowDown" />

x-pack/plugins/synthetics/public/apps/synthetics/components/error_details/error_details_page.tsx

@@ -26,7 +26,7 @@ export function ErrorDetailsPage() {
 
   const checkGroupId = failedTests?.[0]?.monitor.check_group ?? '';
 
-  const { data, isFailed, failedStep, loading: stepsLoading } = useJourneySteps(checkGroupId);
+  const { data, isFailedStep, failedStep, loading: stepsLoading } = useJourneySteps(checkGroupId);
 
   const lastTestRun = failedTests?.[0];
 
@@ -61,7 +61,7 @@ export function ErrorDetailsPage() {
         <EuiFlexItem grow={1} style={{ height: 'fit-content' }}>
           <PanelWithTitle>
             {data?.details?.journey && failedStep && (
-              <StepImage ping={data?.details?.journey} step={failedStep} isFailed={isFailed} />
+              <StepImage ping={data?.details?.journey} step={failedStep} isFailed={isFailedStep} />
             )}
           </PanelWithTitle>
 

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_journey_steps.tsx

@@ -34,12 +34,6 @@ export const useJourneySteps = (checkGroup?: string, lastRefresh?: number) => {
     }
   }, [checkGroupId, dispatch, lastRefresh]);
 
-  const isFailed =
-    journeyData?.steps.some(
-      (step) =>
-        step.synthetics?.step?.status === 'failed' || step.synthetics?.step?.status === 'skipped'
-    ) ?? false;
-
   const stepEnds: JourneyStep[] = (journeyData?.steps ?? []).filter(isStepEnd);
   const failedStep = journeyData?.steps.find((step) => step.synthetics?.step?.status === 'failed');
   const stepLabels = stepEnds.map((stepEnd) => stepEnd?.synthetics?.step?.name ?? '');
@@ -48,13 +42,17 @@ export const useJourneySteps = (checkGroup?: string, lastRefresh?: number) => {
     ? stepEnds.find((step) => step.synthetics?.step?.index === Number(stepIndex))
     : undefined;
 
+  const isFailedStep =
+    failedStep?.synthetics?.step && failedStep.synthetics.step.index === Number(stepIndex);
+
   return {
     data: journeyData as SyntheticsJourneyApiResponse,
     loading: loading ?? false,
-    isFailed,
     stepEnds,
     stepLabels,
     currentStep,
     failedStep,
+    isFailedStep,
+    isFailed: false,
   };
 };

x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/hooks/use_step_detail_page.ts

@@ -7,6 +7,7 @@
 
 import { useParams } from 'react-router-dom';
 import { useMemo } from 'react';
+import { useSelectedLocation } from '../../monitor_details/hooks/use_selected_location';
 import { useSyntheticsSettingsContext } from '../../../contexts';
 import { useJourneySteps } from '../../monitor_details/hooks/use_journey_steps';
 
@@ -23,6 +24,8 @@ export const useStepDetailPage = () => {
 
   const stepIndex = Number(stepIndexString);
 
+  const selectedLocation = useSelectedLocation();
+
   const { data: journey, stepEnds } = useJourneySteps(checkGroupId);
 
   const memoized = useMemo(
@@ -35,7 +38,13 @@ export const useStepDetailPage = () => {
   const { basePath } = useSyntheticsSettingsContext();
 
   const handleStepHref = (stepNo: number) =>
-    `${basePath}/app/synthetics/monitor/${monitorId}/test-run/${checkGroupId}/step/${stepNo}`;
+    getStepDetailLink({
+      basePath,
+      monitorId,
+      checkGroupId,
+      stepIndex: stepNo,
+      locationId: selectedLocation?.id,
+    });
 
   return {
     checkGroupId,
@@ -52,7 +61,7 @@ export const useStepDetailLink = ({
   stepIndex,
 }: {
   checkGroupId?: string;
-  stepIndex: string;
+  stepIndex: number | string;
 }) => {
   const { basePath } = useSyntheticsSettingsContext();
 
@@ -60,9 +69,33 @@ export const useStepDetailLink = ({
     monitorId: string;
   }>();
 
+  const selectedLocation = useSelectedLocation();
+
   if (!checkGroupId) {
     return '';
   }
 
-  return `${basePath}/app/synthetics/monitor/${monitorId}/test-run/${checkGroupId}/step/${stepIndex}`;
+  return getStepDetailLink({
+    basePath,
+    stepIndex,
+    monitorId,
+    checkGroupId,
+    locationId: selectedLocation?.id,
+  });
+};
+
+const getStepDetailLink = ({
+  checkGroupId,
+  stepIndex,
+  basePath,
+  monitorId,
+  locationId,
+}: {
+  checkGroupId: string;
+  locationId?: string;
+  stepIndex: number | string;
+  basePath: string;
+  monitorId: string;
+}) => {
+  return `${basePath}/app/synthetics/monitor/${monitorId}/test-run/${checkGroupId}/step/${stepIndex}?locationId=${locationId}`;
 };

x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_detail_page.tsx

@@ -30,7 +30,7 @@ export const StepDetailPage = () => {
   useTrackPageview({ app: 'synthetics', path: 'stepDetail' });
   useTrackPageview({ app: 'synthetics', path: 'stepDetail', delay: 15000 });
 
-  const { data, isFailed, currentStep } = useJourneySteps();
+  const { data, isFailedStep, currentStep } = useJourneySteps();
 
   useStepDetailsBreadcrumbs();
 
@@ -62,7 +62,7 @@ export const StepDetailPage = () => {
         <EuiFlexItem grow={1}>
           <EuiPanel hasShadow={false} hasBorder>
             {data?.details?.journey && currentStep && (
-              <StepImage ping={data?.details?.journey} step={currentStep} isFailed={isFailed} />
+              <StepImage ping={data?.details?.journey} step={currentStep} isFailed={isFailedStep} />
             )}
           </EuiPanel>
         </EuiFlexItem>