[Uptime] update synthentics screenshot preview images (#87602) (#88182)

* update PingTimestamp caption and add spinner for loading images * use FETCH_STATUS to determine render state for PingTimestamp * add tests for ping timestamp * adjust ping timestamp caption * update screenshot to use EuiImage * remove deprecated translations Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Jan 13, 2021 · 842f407 · 842f407
1 parent 0c29799
commit 842f407
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 415 deletions.
diff --git a/x-pack/plugins/observability/public/index.ts b/x-pack/plugins/observability/public/index.ts
@@ -27,7 +27,7 @@ export {
   METRIC_TYPE,
 } from './hooks/use_track_metric';
 
-export { useFetcher } from './hooks/use_fetcher';
+export { useFetcher, FETCH_STATUS } from './hooks/use_fetcher';
 
 export * from './typings';
 

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -22659,8 +22659,6 @@
     "xpack.uptime.synthetics.screenshot.noImageMessage": "画像がありません",
     "xpack.uptime.synthetics.screenshotDisplay.altText": "名前「{stepName}」のステップのスクリーンショット",
     "xpack.uptime.synthetics.screenshotDisplay.altTextWithoutName": "スクリーンショット",
-    "xpack.uptime.synthetics.screenshotDisplay.fullScreenshotAltText": "名前「{stepName}」のステップの詳細スクリーンショット",
-    "xpack.uptime.synthetics.screenshotDisplay.fullScreenshotAltTextWithoutName": "詳細スクリーンショット",
     "xpack.uptime.synthetics.screenshotDisplay.thumbnailAltText": "名前「{stepName}」のステップのサムネイルスクリーンショット",
     "xpack.uptime.synthetics.screenshotDisplay.thumbnailAltTextWithoutName": "サムネイルスクリーンショット",
     "xpack.uptime.synthetics.statusBadge.failedMessage": "失敗",
@@ -23037,4 +23035,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "フィールドを選択してください。",
     "xpack.watcher.watcherDescription": "アラートの作成、管理、監視によりデータへの変更を検知します。"
   }
-}
+}
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -22710,8 +22710,6 @@
     "xpack.uptime.synthetics.screenshot.noImageMessage": "没有可用图像",
     "xpack.uptime.synthetics.screenshotDisplay.altText": "名称为“{stepName}”的步骤的屏幕截图",
     "xpack.uptime.synthetics.screenshotDisplay.altTextWithoutName": "屏幕截图",
-    "xpack.uptime.synthetics.screenshotDisplay.fullScreenshotAltText": "名称为“{stepName}”的步骤的完整屏幕截图",
-    "xpack.uptime.synthetics.screenshotDisplay.fullScreenshotAltTextWithoutName": "完整屏幕截图",
     "xpack.uptime.synthetics.screenshotDisplay.thumbnailAltText": "名称为“{stepName}”的步骤的缩略屏幕截图",
     "xpack.uptime.synthetics.screenshotDisplay.thumbnailAltTextWithoutName": "缩略屏幕截图",
     "xpack.uptime.synthetics.statusBadge.failedMessage": "失败",
@@ -23088,4 +23086,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "此字段必填。",
     "xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。"
   }
-}
+}
diff --git a/...me/public/components/monitor/ping_list/columns/__snapshots__/ping_timestamp.test.tsx.snap b/...me/public/components/monitor/ping_list/columns/__snapshots__/ping_timestamp.test.tsx.snap
diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp.test.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp.test.tsx
@@ -5,16 +5,26 @@
  */
 
 import React from 'react';
-import { shallowWithIntl, renderWithIntl } from '@kbn/test/jest';
 import { PingTimestamp } from './ping_timestamp';
 import { mockReduxHooks } from '../../../../lib/helper/test_helpers';
+import { render } from '../../../../lib/helper/rtl_helpers';
 import { Ping } from '../../../../../common/runtime_types/ping';
-import { EuiThemeProvider } from '../../../../../../observability/public';
+import * as observabilityPublic from '../../../../../../observability/public';
 
 mockReduxHooks();
 
+jest.mock('../../../../../../observability/public', () => {
+  const originalModule = jest.requireActual('../../../../../../observability/public');
+
+  return {
+    ...originalModule,
+    useFetcher: jest.fn().mockReturnValue({ data: null, status: 'pending' }),
+  };
+});
+
 describe('Ping Timestamp component', () => {
   let response: Ping;
+  const { FETCH_STATUS } = observabilityPublic;
 
   beforeAll(() => {
     response = {
@@ -49,19 +59,37 @@ describe('Ping Timestamp component', () => {
     };
   });
 
-  it('shallow render without errors', () => {
-    const component = shallowWithIntl(
+  it.each([[FETCH_STATUS.PENDING], [FETCH_STATUS.LOADING]])(
+    'displays spinner when loading step image',
+    (fetchStatus) => {
+      jest
+        .spyOn(observabilityPublic, 'useFetcher')
+        .mockReturnValue({ status: fetchStatus, data: null, refetch: () => null });
+      const { getByTestId } = render(
+        <PingTimestamp ping={response} timestamp={response.timestamp} />
+      );
+      expect(getByTestId('pingTimestampSpinner')).toBeInTheDocument();
+    }
+  );
+
+  it('displays no image available when img src is unavailable and fetch status is successful', () => {
+    jest
+      .spyOn(observabilityPublic, 'useFetcher')
+      .mockReturnValue({ status: FETCH_STATUS.SUCCESS, data: null, refetch: () => null });
+    const { getByTestId } = render(
       <PingTimestamp ping={response} timestamp={response.timestamp} />
     );
-    expect(component).toMatchSnapshot();
+    expect(getByTestId('pingTimestampNoImageAvailable')).toBeInTheDocument();
   });
 
-  it('render without errors', () => {
-    const component = renderWithIntl(
-      <EuiThemeProvider darkMode={false}>
-        <PingTimestamp ping={response} timestamp={response.timestamp} />
-      </EuiThemeProvider>
-    );
-    expect(component).toMatchSnapshot();
+  it('displays image when img src is available from useFetcher', () => {
+    const src = 'http://sample.com/sampleImageSrc.png';
+    jest.spyOn(observabilityPublic, 'useFetcher').mockReturnValue({
+      status: FETCH_STATUS.SUCCESS,
+      data: { src },
+      refetch: () => null,
+    });
+    const { container } = render(<PingTimestamp ping={response} timestamp={response.timestamp} />);
+    expect(container.querySelector('img')?.src).toBe(src);
   });
 });
diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp.tsx
@@ -12,14 +12,15 @@ import {
   EuiImage,
   EuiSpacer,
   EuiText,
+  EuiLoadingSpinner,
 } from '@elastic/eui';
 import useIntersection from 'react-use/lib/useIntersection';
 import moment from 'moment';
 import styled from 'styled-components';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Ping } from '../../../../../common/runtime_types/ping';
 import { getShortTimeStamp } from '../../../overview/monitor_list/columns/monitor_status_column';
-import { euiStyled, useFetcher } from '../../../../../../observability/public';
+import { euiStyled, FETCH_STATUS, useFetcher } from '../../../../../../observability/public';
 import { getJourneyScreenshot } from '../../../../state/api/journey';
 import { UptimeSettingsContext } from '../../../../contexts';
 
@@ -81,7 +82,7 @@ export const PingTimestamp = ({ timestamp, ping }: Props) => {
     threshold: 1,
   });
 
-  const { data } = useFetcher(() => {
+  const { data, status } = useFetcher(() => {
     if (intersection && intersection.intersectionRatio === 1 && !stepImages[stepNo - 1])
       return getJourneyScreenshot(imgPath);
   }, [intersection?.intersectionRatio, stepNo]);
@@ -94,12 +95,14 @@ export const PingTimestamp = ({ timestamp, ping }: Props) => {
 
   const imgSrc = stepImages[stepNo] || data?.src;
 
+  const isLoading = status === FETCH_STATUS.LOADING;
+  const isPending = status === FETCH_STATUS.PENDING;
+
+  const captionContent = `Step:${stepNo} ${data?.stepName}`;
+
   const ImageCaption = (
     <>
-      <div
-        className="stepArrowsFullScreen"
-        style={{ position: 'absolute', bottom: 32, width: '100%' }}
-      >
+      <div className="stepArrowsFullScreen">
         {imgSrc && (
           <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="center">
             <EuiFlexItem grow={false}>
@@ -114,9 +117,7 @@ export const PingTimestamp = ({ timestamp, ping }: Props) => {
               />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiText>
-                Step:{stepNo} {data?.stepName}
-              </EuiText>
+              <EuiText>{captionContent}</EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiButtonIcon
@@ -146,15 +147,20 @@ export const PingTimestamp = ({ timestamp, ping }: Props) => {
           size="s"
           hasShadow
           caption={ImageCaption}
-          alt="No image available"
+          alt={captionContent}
           url={imgSrc}
+          data-test-subj="pingTimestampImage"
         />
       ) : (
         <EuiFlexGroup gutterSize="s" alignItems="center">
           <EuiFlexItem>
-            <NoImageAvailable />
+            {isLoading || isPending ? (
+              <EuiLoadingSpinner size="xl" data-test-subj="pingTimestampSpinner" />
+            ) : (
+              <NoImageAvailable />
+            )}
           </EuiFlexItem>
-          <EuiFlexItem> {ImageCaption}</EuiFlexItem>
+          <EuiFlexItem>{ImageCaption}</EuiFlexItem>
         </EuiFlexGroup>
       )}
       <EuiFlexGroup
@@ -200,7 +206,7 @@ const BorderedText = euiStyled(EuiText)`
 
 export const NoImageAvailable = () => {
   return (
-    <BorderedText>
+    <BorderedText data-test-subj="pingTimestampNoImageAvailable">
       <strong>
         <FormattedMessage
           id="xpack.uptime.synthetics.screenshot.noImageMessage"