[Uptime] Use base path for screenshot url (#81930)

elastic · Oct 29, 2020 · 995111a · 995111a
1 parent 59662ee
commit 995111a
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/...k/plugins/uptime/public/components/monitor/synthetics/__tests__/executed_journey.test.tsx b/...k/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
@@ -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
@@ -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
@@ -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 = (
  <>