mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
# Backport This will backport the following commits from `main` to `8.6`: - [[Synthetics] Improve image loading on step change (#145967)](https://github.com/elastic/kibana/pull/145967) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Shahzad","email":"shahzad.muhammad@elastic.co"},"sourceCommit":{"committedDate":"2022-11-23T19:40:54Z","message":"[Synthetics] Improve image loading on step change (#145967)\n\nCo-authored-by: Abdul Zahid <awahab07@yahoo.com>\r\nFixes https://github.com/elastic/kibana/issues/145911","sha":"3a3bd141e802f0f8b7fbfd457efaef2c7389a460","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:uptime","release_note:skip","v8.6.0","v8.7.0"],"number":145967,"url":"https://github.com/elastic/kibana/pull/145967","mergeCommit":{"message":"[Synthetics] Improve image loading on step change (#145967)\n\nCo-authored-by: Abdul Zahid <awahab07@yahoo.com>\r\nFixes https://github.com/elastic/kibana/issues/145911","sha":"3a3bd141e802f0f8b7fbfd457efaef2c7389a460"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"8.6","label":"v8.6.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/145967","number":145967,"mergeCommit":{"message":"[Synthetics] Improve image loading on step change (#145967)\n\nCo-authored-by: Abdul Zahid <awahab07@yahoo.com>\r\nFixes https://github.com/elastic/kibana/issues/145911","sha":"3a3bd141e802f0f8b7fbfd457efaef2c7389a460"}}]}] BACKPORT--> Co-authored-by: Shahzad <shahzad.muhammad@elastic.co>
This commit is contained in:
Kibana Machine
GitHub
parent
69f2cce519
commit
beeae697a7
8 changed files with 40 additions and 21 deletions
|
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { css } from '@emotion/react';
|
||||
import { EuiImage, EuiPopover, useEuiTheme } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
|
@ -163,16 +163,16 @@ export const JourneyStepImagePopover: React.FC<StepImagePopoverProps> = ({
|
|||
}) => {
|
||||
const { euiTheme } = useEuiTheme();
|
||||
|
||||
const [imageData, setImageData] = React.useState<string | undefined>(imgSrc || undefined);
|
||||
const [imageData, setImageData] = useState<string | undefined>(imgSrc || undefined);
|
||||
|
||||
React.useEffect(() => {
|
||||
useEffect(() => {
|
||||
// for legacy screenshots, when a new image arrives, we must overwrite it
|
||||
if (imgSrc && imgSrc !== imageData) {
|
||||
setImageData(imgSrc);
|
||||
}
|
||||
}, [imgSrc, imageData]);
|
||||
|
||||
const setImageDataCallback = React.useCallback(
|
||||
const setImageDataCallback = useCallback(
|
||||
(newImageData: string | undefined) => setImageData(newImageData),
|
||||
[setImageData]
|
||||
);
|
||||
|
|
|
|||
|
|
@ -65,7 +65,14 @@ export const EmptyImage = ({ size, isLoading = false }: { isLoading: boolean; si
|
|||
`}
|
||||
/>
|
||||
) : (
|
||||
<div>
|
||||
<div
|
||||
css={css({
|
||||
border: 'none',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
})}
|
||||
>
|
||||
<EuiIcon
|
||||
data-test-subj="stepScreenshotNotAvailable"
|
||||
type="eyeClosed"
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ import * as retrieveHooks from '../monitor_test_result/use_retrieve_step_image';
|
|||
|
||||
jest.mock('@kbn/observability-plugin/public');
|
||||
|
||||
jest.setTimeout(10 * 1000);
|
||||
|
||||
describe('JourneyStepScreenshotContainer', () => {
|
||||
let checkGroup: string;
|
||||
let timestamp: string;
|
||||
|
|
@ -108,7 +110,7 @@ describe('JourneyStepScreenshotContainer', () => {
|
|||
attempts: 1,
|
||||
});
|
||||
|
||||
const { getByAltText, getByText, getByRole, getAllByText, queryByAltText } = render(
|
||||
const { getByAltText, getByText, getByRole, findAllByText, queryByAltText } = render(
|
||||
<JourneyStepScreenshotContainer
|
||||
checkGroup={checkGroup}
|
||||
stepLabels={[getShortTimeStamp(moment(timestamp))]}
|
||||
|
|
@ -116,7 +118,9 @@ describe('JourneyStepScreenshotContainer', () => {
|
|||
);
|
||||
|
||||
await waitFor(() => getByRole('img'));
|
||||
const caption = getAllByText('Nov 26, 2020 10:28:56 AM');
|
||||
|
||||
await waitFor(async () => await findAllByText('Nov 26, 2020 10:28:56 AM'));
|
||||
const caption = await findAllByText('Nov 26, 2020 10:28:56 AM');
|
||||
fireEvent.mouseEnter(caption[0]);
|
||||
|
||||
const altText = `A larger version of the screenshot for this journey step's thumbnail.`;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ interface Props {
|
|||
}
|
||||
|
||||
export const JourneyStepScreenshotContainer = ({
|
||||
stepLabels = [],
|
||||
stepLabels,
|
||||
checkGroup,
|
||||
stepStatus,
|
||||
allStepsLoaded,
|
||||
|
|
@ -55,7 +55,7 @@ export const JourneyStepScreenshotContainer = ({
|
|||
const { basePath } = useContext(SyntheticsSettingsContext);
|
||||
|
||||
const imgPath = `${basePath}/internal/uptime/journey/screenshot/${checkGroup}/${stepNumber}`;
|
||||
const stepLabel = stepLabels[stepNumber - 1] ?? '';
|
||||
const stepLabel = stepLabels?.[stepNumber - 1] ?? '';
|
||||
|
||||
const intersection = useIntersection(intersectionRef, {
|
||||
root: null,
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@ export const MonitorErrors = () => {
|
|||
return (
|
||||
<>
|
||||
<SyntheticsDatePicker fullWidth={true} />
|
||||
<EuiSpacer />
|
||||
<EuiFlexGroup>
|
||||
<EuiSpacer size="m" />
|
||||
<EuiFlexGroup gutterSize="m">
|
||||
<EuiFlexItem grow={1}>
|
||||
<EuiPanel hasBorder>
|
||||
<EuiTitle size="xs">
|
||||
|
|
@ -60,7 +60,8 @@ export const MonitorErrors = () => {
|
|||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexGroup>
|
||||
<EuiSpacer size="m" />
|
||||
<EuiFlexGroup gutterSize="m">
|
||||
<EuiFlexItem grow={2}>
|
||||
<EuiPanel hasBorder>
|
||||
<EuiTitle size="xs">
|
||||
|
|
|
|||
|
|
@ -9,9 +9,16 @@ import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
|
|||
import React from 'react';
|
||||
import { useTheme } from '@kbn/observability-plugin/public';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { JourneyStep } from '../../../../../common/runtime_types';
|
||||
import { JourneyStepScreenshotContainer } from '../common/screenshot/journey_step_screenshot_container';
|
||||
|
||||
export const StepScreenshotDetails = ({ stepIndex }: { stepIndex: number }) => {
|
||||
export const StepScreenshotDetails = ({
|
||||
stepIndex,
|
||||
step,
|
||||
}: {
|
||||
stepIndex: number;
|
||||
step?: JourneyStep;
|
||||
}) => {
|
||||
const { checkGroupId } = useParams<{ checkGroupId: string }>();
|
||||
|
||||
const theme = useTheme();
|
||||
|
|
@ -22,13 +29,13 @@ export const StepScreenshotDetails = ({ stepIndex }: { stepIndex: number }) => {
|
|||
css={{ backgroundColor: theme.eui.euiColorLightestShade }}
|
||||
>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexItem css={{ alignItems: 'flex-start' }}>
|
||||
<JourneyStepScreenshotContainer
|
||||
key={stepIndex}
|
||||
checkGroup={checkGroupId}
|
||||
initialStepNo={stepIndex}
|
||||
stepStatus={'up'}
|
||||
stepStatus={step?.synthetics.payload?.status}
|
||||
allStepsLoaded={true}
|
||||
stepLabels={[]}
|
||||
retryFetchOnRevisit={false}
|
||||
asThumbnail={false}
|
||||
size="m"
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ export const TestRunDetails = () => {
|
|||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer size="m" />
|
||||
<StepScreenshotDetails stepIndex={stepIndex} />
|
||||
<StepScreenshotDetails stepIndex={stepIndex} step={step} />
|
||||
<EuiSpacer size="m" />
|
||||
<StepTabs stepsData={stepsData} step={step} loading={stepsLoading} />
|
||||
</EuiPanel>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { composeScreenshotRef } from '../utils/monitor_test_result/compose_screenshot_images';
|
||||
import {
|
||||
ScreenshotRefImageData,
|
||||
|
|
@ -84,15 +84,15 @@ export const useCompositeImage = (
|
|||
const dispatch = useDispatch();
|
||||
const { blocks }: { blocks: ScreenshotBlockCache } = useSelector(selectBrowserJourneyState);
|
||||
|
||||
React.useEffect(() => {
|
||||
useEffect(() => {
|
||||
dispatch(
|
||||
fetchBlocksAction(imgRef.ref.screenshotRef.screenshot_ref.blocks.map(({ hash }) => hash))
|
||||
);
|
||||
}, [dispatch, imgRef.ref.screenshotRef.screenshot_ref.blocks]);
|
||||
|
||||
const [curRef, setCurRef] = React.useState<ScreenshotRefImageData>(imgRef);
|
||||
const [curRef, setCurRef] = useState<ScreenshotRefImageData>(imgRef);
|
||||
|
||||
React.useEffect(() => {
|
||||
useEffect(() => {
|
||||
const canvas = document.createElement('canvas');
|
||||
|
||||
async function compose() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue