From 995111ad8a4d74fe546f9c77627c865ce4d95747 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Thu, 29 Oct 2020 16:07:09 +0100
Subject: [PATCH] [Uptime] Use base path for screenshot url (#81930)

---
 .../monitor/synthetics/__tests__/executed_journey.test.tsx  | 3 +++
 .../components/monitor/synthetics/executed_journey.tsx      | 1 +
 .../public/components/monitor/synthetics/executed_step.tsx  | 3 +--
 .../monitor/synthetics/step_screenshot_display.tsx          | 6 ++++--
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/executed_journey.test.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/executed_journey.test.tsx
index 5ab815a3c0b5d..9fec9439b3ad5 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/executed_journey.test.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/executed_journey.test.tsx
@@ -253,6 +253,9 @@ describe('ExecutedJourney component', () => {
             }
           }
         />
+        <EuiSpacer
+          size="s"
+        />
       </EuiFlexGroup>
     `);
   });
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_journey.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_journey.tsx
index 2ffb3f0feb4dd..9a3e045017f9a 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_journey.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_journey.tsx
@@ -79,6 +79,7 @@ export const ExecutedJourney: FC<ExecutedJourneyProps> = ({ journey }) => (
       {journey.steps.filter(isStepEnd).map((step, index) => (
         <ExecutedStep key={index} index={index} step={step} />
       ))}
+      <EuiSpacer size="s" />
     </EuiFlexGroup>
   </div>
 );
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_step.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_step.tsx
index 3c26ba12eea65..5966851973af2 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_step.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_step.tsx
@@ -41,7 +41,7 @@ export const ExecutedStep: FC<ExecutedStepProps> = ({ step, index }) => (
       <div>
         <StatusBadge status={step.synthetics?.payload?.status} />
       </div>
-      <EuiSpacer />
+      <EuiSpacer size="s" />
       <div>
         <EuiFlexGroup>
           <EuiFlexItem grow={false}>
@@ -87,6 +87,5 @@ export const ExecutedStep: FC<ExecutedStepProps> = ({ step, index }) => (
         </EuiFlexGroup>
       </div>
     </div>
-    <EuiSpacer />
   </>
 );
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_screenshot_display.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_screenshot_display.tsx
index 2e8ad4bd0c9a8..b81cf6bc1ec1d 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_screenshot_display.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_screenshot_display.tsx
@@ -16,7 +16,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useContext, useEffect, useRef, useState, FC } from 'react';
 import { useIntersection } from 'react-use';
-import { UptimeThemeContext } from '../../../contexts';
+import { UptimeSettingsContext, UptimeThemeContext } from '../../../contexts';
 
 interface StepScreenshotDisplayProps {
   screenshotExists?: boolean;
@@ -41,6 +41,8 @@ export const StepScreenshotDisplay: FC<StepScreenshotDisplayProps> = ({
     colors: { lightestShade: pageBackground },
   } = useContext(UptimeThemeContext);
 
+  const { basePath } = useContext(UptimeSettingsContext);
+
   const [isImagePopoverOpen, setIsImagePopoverOpen] = useState<boolean>(false);
   const [isOverlayOpen, setIsOverlayOpen] = useState<boolean>(false);
 
@@ -59,7 +61,7 @@ export const StepScreenshotDisplay: FC<StepScreenshotDisplayProps> = ({
   }, [hasIntersected, isIntersecting, setHasIntersected]);
 
   let content: JSX.Element | null = null;
-  const imgSrc = `/api/uptime/journey/screenshot/${checkGroup}/${stepIndex}`;
+  const imgSrc = basePath + `/api/uptime/journey/screenshot/${checkGroup}/${stepIndex}`;
   if (hasIntersected && screenshotExists) {
     content = (
       <>