[8.7] [Synthetics] Adjust screenshot backoff logic for older runs (#152710) (#152768)

# Backport

This will backport the following commits from `main` to `8.7`:
- [[Synthetics] Adjust screenshot backoff logic for older runs
(#152710)](https://github.com/elastic/kibana/pull/152710)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Shahzad","email":"shahzad31comp@gmail.com"},"sourceCommit":{"committedDate":"2023-03-06T23:18:08Z","message":"[Synthetics]
Adjust screenshot backoff logic for older runs (#152710)\n\n##
Summary\r\n\r\nDon't retry screenshot fetching if image is more than 10
minutes old.\r\n\r\nCo-authored-by: Dominique Clarke
<dominique.clarke@elastic.co>","sha":"ec6d0f27e395159e04edf9a3df392bd80da68f94","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:uptime","release_note:skip","v8.7.0","v8.8.0"],"number":152710,"url":"https://github.com/elastic/kibana/pull/152710","mergeCommit":{"message":"[Synthetics]
Adjust screenshot backoff logic for older runs (#152710)\n\n##
Summary\r\n\r\nDon't retry screenshot fetching if image is more than 10
minutes old.\r\n\r\nCo-authored-by: Dominique Clarke
<dominique.clarke@elastic.co>","sha":"ec6d0f27e395159e04edf9a3df392bd80da68f94"}},"sourceBranch":"main","suggestedTargetBranches":["8.7"],"targetPullRequestStates":[{"branch":"8.7","label":"v8.7.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/152710","number":152710,"mergeCommit":{"message":"[Synthetics]
Adjust screenshot backoff logic for older runs (#152710)\n\n##
Summary\r\n\r\nDon't retry screenshot fetching if image is more than 10
minutes old.\r\n\r\nCo-authored-by: Dominique Clarke
<dominique.clarke@elastic.co>","sha":"ec6d0f27e395159e04edf9a3df392bd80da68f94"}}]}]
BACKPORT-->

Co-authored-by: Shahzad <shahzad31comp@gmail.com>
This commit is contained in:
Kibana Machine 2023-03-06 19:49:37 -05:00 committed by GitHub
parent 3340aefa15
commit 58ecbf8f34
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 42 additions and 15 deletions

View file

@ -127,7 +127,7 @@ export const BrowserStepsList = ({
align: 'left',
field: 'timestamp',
name: SCREENSHOT_LABEL,
render: (_timestamp: string, step) => (
render: (timestamp: string, step) => (
<JourneyStepScreenshotContainer
checkGroup={step.monitor.check_group}
initialStepNumber={step.synthetics?.step?.index}
@ -135,6 +135,7 @@ export const BrowserStepsList = ({
allStepsLoaded={!loading}
retryFetchOnRevisit={true}
size={screenshotImageSize}
timestamp={timestamp}
/>
),
mobileOptions: {

View file

@ -13,6 +13,7 @@ import { JourneyScreenshotDialog } from '../screenshot/journey_screenshot_dialog
import { ScreenshotImage } from '../screenshot/screenshot_image';
export interface StepImagePopoverProps {
timestamp?: string;
checkGroup: string | undefined;
stepName?: string;
stepNumber: number;
@ -26,6 +27,7 @@ export interface StepImagePopoverProps {
}
export const JourneyScreenshotPreview: React.FC<StepImagePopoverProps> = ({
timestamp,
checkGroup,
stepName,
stepNumber,
@ -96,6 +98,7 @@ export const JourneyScreenshotPreview: React.FC<StepImagePopoverProps> = ({
maxSteps={maxSteps}
isOpen={isImageDialogOpen}
onClose={onDialogClose}
timestamp={timestamp}
/>
) : null}
<EuiPopover

View file

@ -7,6 +7,7 @@
import { useEffect, useMemo, useState } from 'react';
import { useFetcher } from '@kbn/observability-plugin/public';
import moment from 'moment';
import {
ScreenshotImageBlob,
ScreenshotRefImageData,
@ -28,12 +29,14 @@ interface ImageDataResult {
}
export const useRetrieveStepImage = ({
timestamp,
checkGroup,
stepStatus,
hasIntersected,
imgPath,
retryFetchOnRevisit,
}: {
timestamp?: string;
checkGroup: string | undefined;
imgPath: string;
stepStatus?: string;
@ -54,6 +57,9 @@ export const useRetrieveStepImage = ({
const isImageUrlAvailable = dataResult?.[imgPath]?.url ?? false;
useFetcher(() => {
const is10MinutesOld = timestamp
? moment(timestamp).isBefore(moment().subtract(10, 'minutes'))
: false;
const retrieveAttemptedBefore = (imgState[imgPath]?.attempts ?? 0) > 0;
const shouldRetry = retryFetchOnRevisit || !retrieveAttemptedBefore;
@ -61,7 +67,7 @@ export const useRetrieveStepImage = ({
setImgState((prevState) => {
return getUpdatedState({ prevState, imgPath, increment: true, loading: true });
});
return getJourneyScreenshot(imgPath)
return getJourneyScreenshot(imgPath, !is10MinutesOld)
.then((data) => {
setImgState((prevState) => {
return getUpdatedState({ prevState, imgPath, increment: false, data, loading: false });
@ -77,7 +83,7 @@ export const useRetrieveStepImage = ({
} else {
return new Promise<ImageResponse>((resolve) => resolve(null));
}
}, [skippedStep, hasIntersected, imgPath, retryFetchOnRevisit]);
}, [skippedStep, hasIntersected, imgPath, retryFetchOnRevisit, timestamp]);
return dataResult;
};

View file

@ -14,8 +14,10 @@ import { ScreenshotImageSize } from './screenshot_size';
export const JourneyLastScreenshot = ({
checkGroupId,
size,
timestamp,
}: {
checkGroupId: string;
timestamp?: string;
size: ScreenshotImageSize;
}) => {
const { loading: stepsLoading, stepEnds } = useJourneySteps(checkGroupId);
@ -40,6 +42,7 @@ export const JourneyLastScreenshot = ({
allStepsLoaded={!stepsLoading}
retryFetchOnRevisit={false}
size={size}
timestamp={timestamp}
/>
);
};

View file

@ -34,12 +34,14 @@ import { useRetrieveStepImage } from '../monitor_test_result/use_retrieve_step_i
import { ScreenshotImage } from './screenshot_image';
export const JourneyScreenshotDialog = ({
timestamp,
checkGroup,
initialImgSrc,
initialStepNumber,
isOpen,
onClose,
}: {
timestamp?: string;
checkGroup: string | undefined;
initialImgSrc: string | undefined;
initialStepNumber: number;
@ -60,6 +62,7 @@ export const JourneyScreenshotDialog = ({
imgPath,
retryFetchOnRevisit: false,
checkGroup,
timestamp,
});
const { url, loading, stepName, maxSteps } = imageResult?.[imgPath] ?? {};
const imgSrc = stepNumber === initialStepNumber ? initialImgSrc ?? url : url;

View file

@ -15,6 +15,7 @@ import { JourneyScreenshotPreview } from '../monitor_test_result/journey_screens
import { ScreenshotImageSize, THUMBNAIL_SCREENSHOT_SIZE } from './screenshot_size';
interface Props {
timestamp?: string;
checkGroup?: string;
stepStatus?: string;
initialStepNumber?: number;
@ -26,6 +27,7 @@ interface Props {
}
export const JourneyStepScreenshotContainer = ({
timestamp,
checkGroup,
stepStatus,
allStepsLoaded,
@ -55,6 +57,7 @@ export const JourneyStepScreenshotContainer = ({
imgPath,
retryFetchOnRevisit,
checkGroup,
timestamp,
});
const { url, loading, stepName, maxSteps } = imageResult?.[imgPath] ?? {};
@ -72,6 +75,7 @@ export const JourneyStepScreenshotContainer = ({
size={size}
unavailableMessage={unavailableMessage}
borderRadius={borderRadius}
timestamp={timestamp}
/>
</div>
);

View file

@ -98,8 +98,12 @@ export const TestRunsTable = ({
align: 'left',
field: 'timestamp',
name: SCREENSHOT_LABEL,
render: (_timestamp: string, item) => (
<JourneyLastScreenshot checkGroupId={item.monitor.check_group} size={[100, 64]} />
render: (timestamp: string, item) => (
<JourneyLastScreenshot
checkGroupId={item.monitor.check_group}
size={[100, 64]}
timestamp={timestamp}
/>
),
},
]

View file

@ -27,15 +27,18 @@ export const StepScreenshotDetails = ({
<EuiPanel hasShadow={false} hasBorder={false} color="subdued">
<EuiFlexGroup>
<EuiFlexItem css={{ alignItems: 'flex-start' }} grow={false}>
<JourneyStepScreenshotContainer
key={stepIndex}
checkGroup={step?.monitor.check_group ?? checkGroupId}
initialStepNumber={stepIndex}
stepStatus={step?.synthetics.payload?.status}
allStepsLoaded={true}
retryFetchOnRevisit={false}
size={[180, 112]}
/>
{step ? (
<JourneyStepScreenshotContainer
key={stepIndex}
checkGroup={step?.monitor.check_group ?? checkGroupId}
initialStepNumber={stepIndex}
stepStatus={step?.synthetics.payload?.status}
allStepsLoaded={true}
retryFetchOnRevisit={false}
size={[180, 112]}
timestamp={step?.['@timestamp']}
/>
) : null}
</EuiFlexItem>
<StepMetaInfo step={step} stepIndex={stepIndex} stateId={stateId} />
</EuiFlexGroup>

View file

@ -57,7 +57,7 @@ export const getJourneyDetails: UMElasticsearchQueryFn<
const foundJourney = journeyStartHit || journeySummaryHit;
const journeySource = journeyStartHit?._source ?? journeySummaryHit?._source;
const journeySource = journeySummaryHit?._source ?? journeyStartHit?._source;
if (journeySource && foundJourney) {
const baseSiblingParams = createEsParams({