[Monitor management] Fix test now mode issues (#129501) (#129750)

(cherry picked from commit 4f34f07) Co-authored-by: Shahzad <shahzad.muhammad@elastic.co>
elastic · Apr 7, 2022 · b7538d8 · b7538d8
1 parent 2796612
commit b7538d8
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 21 deletions.
diff --git a/...gins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx b/...gins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx
@@ -13,6 +13,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import {
   isScreenshotImageBlob,
   isScreenshotRef,
+  ScreenshotImageBlob,
   ScreenshotRefImageData,
 } from '../../../../../../common/runtime_types';
 import { useFetcher, FETCH_STATUS } from '../../../../../../../observability/public';
@@ -35,10 +36,11 @@ const StepDiv = styled.div`
 interface Props {
   checkGroup?: string;
   label?: string;
+  stepStatus?: string;
   initialStepNo?: number;
 }
 
-export const PingTimestamp = ({ label, checkGroup, initialStepNo = 1 }: Props) => {
+export const PingTimestamp = ({ label, checkGroup, stepStatus, initialStepNo = 1 }: Props) => {
   const [stepNumber, setStepNumber] = useState(initialStepNo);
   const [isImagePopoverOpen, setIsImagePopoverOpen] = useState(false);
 
@@ -57,6 +59,12 @@ export const PingTimestamp = ({ label, checkGroup, initialStepNo = 1 }: Props) =
   });
 
   const { data, status } = useFetcher(() => {
+    if (stepStatus === 'skipped') {
+      return new Promise<ScreenshotImageBlob | ScreenshotRefImageData | null>((resolve) =>
+        resolve(null)
+      );
+    }
+
     if (intersection && intersection.intersectionRatio === 1 && !stepImages[stepNumber - 1])
       return getJourneyScreenshot(imgPath);
   }, [intersection?.intersectionRatio, stepNumber, imgPath]);

diff --git a/...ptime/public/components/monitor_management/test_now_mode/browser/browser_test_results.tsx b/...ptime/public/components/monitor_management/test_now_mode/browser/browser_test_results.tsx
@@ -7,13 +7,14 @@
 
 import { useEffect } from 'react';
 import * as React from 'react';
-import { EuiAccordion, EuiText } from '@elastic/eui';
+import { EuiAccordion, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
 import { StepsList } from '../../../synthetics/check_steps/steps_list';
 import { JourneyStep } from '../../../../../common/runtime_types';
 import { useBrowserRunOnceMonitors } from './use_browser_run_once_monitors';
 import { TestResultHeader } from '../test_result_header';
+import { StdErrorLogs } from '../../../synthetics/check_steps/stderr_logs';
 
 interface Props {
   monitorId: string;
@@ -74,11 +75,25 @@ export const BrowserTestRunResult = ({ monitorId, isMonitorSaved, onDone }: Prop
       data-test-subj="expandResults"
       initialIsOpen={true}
     >
-      {isStepsLoading && <EuiText>{LOADING_STEPS}</EuiText>}
+      {isStepsLoading && (
+        <EuiFlexGroup alignItems="center" gutterSize="xs">
+          <EuiFlexItem grow={false}>
+            <EuiText>{LOADING_STEPS}</EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiLoadingSpinner size="s" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
       {isStepsLoadingFailed && (
         <EuiText color="danger">{summaryDoc?.error?.message ?? FAILED_TO_RUN}</EuiText>
       )}
 
+      {isStepsLoadingFailed &&
+        summaryDoc?.error?.message?.includes('journey did not finish executing') && (
+          <StdErrorLogs checkGroup={summaryDoc.monitor.check_group} hideTitle={true} />
+        )}
+
       {stepEnds.length > 0 && stepListData?.steps && (
         <StepsList
           data={stepListData.steps}

diff --git a/x-pack/plugins/uptime/public/components/synthetics/check_steps/stderr_logs.tsx b/x-pack/plugins/uptime/public/components/synthetics/check_steps/stderr_logs.tsx
@@ -36,12 +36,14 @@ export const StdErrorLogs = ({
   timestamp,
   title,
   summaryMessage,
+  hideTitle = false,
 }: {
   configId?: string;
   checkGroup?: string;
   timestamp?: string;
   title?: string;
   summaryMessage?: string;
+  hideTitle?: boolean;
 }) => {
   const columns = [
     {
@@ -95,24 +97,31 @@ export const StdErrorLogs = ({
 
   return (
     <>
-      <EuiFlexGroup alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="s">
-            <h3>{title ?? TEST_RUN_LOGS_LABEL}</h3>
-          </EuiTitle>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiLink>
-            <EuiButtonEmpty href={discoverLink} iconType="discoverApp" isDisabled={!discoverLink}>
-              {VIEW_IN_DISCOVER_LABEL}
-            </EuiButtonEmpty>
-          </EuiLink>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
-      <EuiCallOut title={ERROR_SUMMARY_LABEL} color="danger" iconType="alert">
-        <p>{summaryMessage}</p>
-      </EuiCallOut>
+      {!hideTitle && (
+        <>
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="s">
+                <h3>{title ?? TEST_RUN_LOGS_LABEL}</h3>
+              </EuiTitle>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiLink>
+                <EuiButtonEmpty
+                  href={discoverLink}
+                  iconType="discoverApp"
+                  isDisabled={!discoverLink}
+                >
+                  {VIEW_IN_DISCOVER_LABEL}
+                </EuiButtonEmpty>
+              </EuiLink>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiCallOut title={ERROR_SUMMARY_LABEL} color="danger" iconType="alert">
+            <p>{summaryMessage}</p>
+          </EuiCallOut>
+        </>
+      )}
 
       <EuiSpacer />
 

diff --git a/x-pack/plugins/uptime/public/components/synthetics/check_steps/step_image.tsx b/x-pack/plugins/uptime/public/components/synthetics/check_steps/step_image.tsx
@@ -22,6 +22,7 @@ export const StepImage = ({ step, compactView }: Props) => {
         <PingTimestamp
           checkGroup={step.monitor.check_group}
           initialStepNo={step.synthetics?.step?.index}
+          stepStatus={step.synthetics.payload?.status}
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false} style={{ minWidth: 80 }}>