[Uptime] Ping list step screenshot caption formatting (#91403) (#91624)

Co-authored-by: Shahzad <shahzad.muhammad@elastic.co>

x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.test.tsx

@@ -102,17 +102,17 @@ describe('Ping Timestamp component', () => {
       data: { src },
       refetch: () => null,
     });
-    const { getByAltText, getByText, queryByAltText } = render(
+    const { getByAltText, getAllByText, queryByAltText } = render(
       <PingTimestamp ping={response} timestamp={response.timestamp} />
     );
-    const caption = getByText('Nov 26, 2020 10:28:56 AM');
-    fireEvent.mouseEnter(caption);
+    const caption = getAllByText('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.`;
 
     await waitFor(() => getByAltText(altText));
 
-    fireEvent.mouseLeave(caption);
+    fireEvent.mouseLeave(caption[0]);
 
     await waitFor(() => expect(queryByAltText(altText)).toBeNull());
   });

x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx

@@ -8,6 +8,8 @@
 import React, { useContext, useEffect, useState } from 'react';
 import useIntersection from 'react-use/lib/useIntersection';
 import styled from 'styled-components';
+import moment from 'moment';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { Ping } from '../../../../../../common/runtime_types/ping';
 import { useFetcher, FETCH_STATUS } from '../../../../../../../observability/public';
 import { getJourneyScreenshot } from '../../../../../state/api/journey';
@@ -17,6 +19,7 @@ import { NoImageDisplay } from './no_image_display';
 import { StepImageCaption } from './step_image_caption';
 import { StepImagePopover } from './step_image_popover';
 import { formatCaptionContent } from './translations';
+import { getShortTimeStamp } from '../../../../overview/monitor_list/columns/monitor_status_column';
 
 const StepDiv = styled.div`
   figure.euiImage {
@@ -25,11 +28,6 @@ const StepDiv = styled.div`
     }
   }
 
-  figure.euiImage-isFullScreen {
-    div.stepArrowsFullScreen {
-      display: flex;
-    }
-  }
   position: relative;
   div.stepArrows {
     display: none;
@@ -91,31 +89,38 @@ export const PingTimestamp = ({ timestamp, ping }: Props) => {
   );
 
   return (
-    <StepDiv
-      onMouseEnter={() => setIsImagePopoverOpen(true)}
-      onMouseLeave={() => setIsImagePopoverOpen(false)}
-      ref={intersectionRef}
-    >
-      {imgSrc ? (
-        <StepImagePopover
-          captionContent={captionContent}
-          imageCaption={ImageCaption}
-          imgSrc={imgSrc}
-          isImagePopoverOpen={isImagePopoverOpen}
-        />
-      ) : (
-        <NoImageDisplay
-          imageCaption={ImageCaption}
-          isLoading={status === FETCH_STATUS.LOADING}
-          isPending={status === FETCH_STATUS.PENDING}
-        />
-      )}
-      <NavButtons
-        maxSteps={data?.maxSteps}
-        setIsImagePopoverOpen={setIsImagePopoverOpen}
-        setStepNumber={setStepNumber}
-        stepNumber={stepNumber}
-      />
-    </StepDiv>
+    <EuiFlexGroup alignItems="center">
+      <EuiFlexItem grow={false}>
+        <StepDiv
+          onMouseEnter={() => setIsImagePopoverOpen(true)}
+          onMouseLeave={() => setIsImagePopoverOpen(false)}
+          ref={intersectionRef}
+        >
+          {imgSrc ? (
+            <StepImagePopover
+              captionContent={captionContent}
+              imageCaption={ImageCaption}
+              imgSrc={imgSrc}
+              isImagePopoverOpen={isImagePopoverOpen}
+            />
+          ) : (
+            <NoImageDisplay
+              imageCaption={ImageCaption}
+              isLoading={status === FETCH_STATUS.LOADING}
+              isPending={status === FETCH_STATUS.PENDING}
+            />
+          )}
+          <NavButtons
+            maxSteps={data?.maxSteps}
+            setIsImagePopoverOpen={setIsImagePopoverOpen}
+            setStepNumber={setStepNumber}
+            stepNumber={stepNumber}
+          />
+        </StepDiv>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <span className="eui-textNoWrap">{getShortTimeStamp(moment(timestamp))}</span>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };

x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx

@@ -5,11 +5,12 @@
  * 2.0.
  */
 
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import React from 'react';
 import moment from 'moment';
 import { nextAriaLabel, prevAriaLabel } from './translations';
 import { getShortTimeStamp } from '../../../../overview/monitor_list/columns/monitor_status_column';
+import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
 
 export interface StepImageCaptionProps {
   captionContent: string;
@@ -20,6 +21,13 @@ export interface StepImageCaptionProps {
   timestamp: string;
 }
 
+const ImageCaption = euiStyled.div`
+  background-color: ${(props) => props.theme.eui.euiColorLightestShade};
+  display: inline-block;
+  width: 100%;
+  text-decoration: none;
+`;
+
 export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
   captionContent,
   imgSrc,
@@ -29,41 +37,42 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
   timestamp,
 }) => {
   return (
-    <>
+    <ImageCaption>
       <div className="stepArrowsFullScreen">
         {imgSrc && (
-          <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="center">
+          <EuiFlexGroup alignItems="center" justifyContent="center">
             <EuiFlexItem grow={false}>
-              <EuiButtonIcon
+              <EuiButtonEmpty
                 disabled={stepNumber === 1}
-                size="m"
                 onClick={() => {
                   setStepNumber(stepNumber - 1);
                 }}
                 iconType="arrowLeft"
                 aria-label={prevAriaLabel}
-              />
+              >
+                {prevAriaLabel}
+              </EuiButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiText>{captionContent}</EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButtonIcon
+              <EuiButtonEmpty
                 disabled={stepNumber === maxSteps}
-                size="m"
                 onClick={() => {
                   setStepNumber(stepNumber + 1);
                 }}
                 iconType="arrowRight"
+                iconSide="right"
                 aria-label={nextAriaLabel}
-              />
+              >
+                {nextAriaLabel}
+              </EuiButtonEmpty>
             </EuiFlexItem>
           </EuiFlexGroup>
         )}
+        <span className="eui-textNoWrap">{getShortTimeStamp(moment(timestamp))}</span>
       </div>
-      {/* TODO: Add link to details page once it's available */}
-      <span className="eui-textNoWrap">{getShortTimeStamp(moment(timestamp))}</span>
-      <EuiSpacer size="s" />
-    </>
+    </ImageCaption>
   );
 };

x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_popover.tsx

@@ -16,12 +16,11 @@ const POPOVER_IMG_WIDTH = 640;
 const StepImage = styled(EuiImage)`
   &&& {
     display: flex;
-    figcaption {
-      white-space: nowrap;
-      align-self: center;
-      margin-left: 8px;
-      margin-top: 8px;
-      text-decoration: none !important;
+    figure.euiImage-isFullScreen {
+      display: flex;
+      div.stepArrowsFullScreen {
+        display: flex;
+      }
     }
   }
 `;
@@ -39,7 +38,7 @@ export const StepImagePopover: React.FC<StepImagePopoverProps> = ({
   isImagePopoverOpen,
 }) => (
   <EuiPopover
-    anchorPosition="rightCenter"
+    anchorPosition="upCenter"
     button={
       <StepImage
         allowFullScreen={true}
@@ -49,6 +48,7 @@ export const StepImagePopover: React.FC<StepImagePopoverProps> = ({
         hasShadow
         url={imgSrc}
         size="s"
+        className="syntheticsStepImage"
       />
     }
     isOpen={isImagePopoverOpen}

x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/translations.ts

@@ -26,11 +26,11 @@ export const fullSizeImageAlt = i18n.translate('xpack.uptime.synthetics.thumbnai
   defaultMessage: `A larger version of the screenshot for this journey step's thumbnail.`,
 });
 
-export const formatCaptionContent = (stepNumber: number, stepName?: number) =>
+export const formatCaptionContent = (stepNumber: number, totalSteps?: number) =>
   i18n.translate('xpack.uptime.synthetics.pingTimestamp.captionContent', {
-    defaultMessage: 'Step: {stepNumber} {stepName}',
+    defaultMessage: 'Step: {stepNumber} of {totalSteps}',
     values: {
       stepNumber,
-      stepName,
+      totalSteps,
     },
   });