From db342e53232999e6823d0e31ef3d60a95b5efeb3 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad31comp@gmail.com>
Date: Thu, 18 Feb 2021 18:04:19 +0100
Subject: [PATCH 1/2] Fix-step-number

---
 .../ping_list/columns/ping_timestamp/ping_timestamp.tsx   | 3 ++-
 .../columns/ping_timestamp/step_image_caption.tsx         | 8 ++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx
index 71c22b4406867..cfb92dd31190e 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx
@@ -73,7 +73,7 @@ export const PingTimestamp = ({ timestamp, ping }: Props) => {
     }
   }, [data]);
 
-  const imgSrc = stepImages[stepNumber] || data?.src;
+  const imgSrc = stepImages?.[stepNumber - 1] ?? data?.src;
 
   const captionContent = formatCaptionContent(stepNumber, data?.maxSteps);
 
@@ -85,6 +85,7 @@ export const PingTimestamp = ({ timestamp, ping }: Props) => {
       setStepNumber={setStepNumber}
       stepNumber={stepNumber}
       timestamp={timestamp}
+      isLoading={status === FETCH_STATUS.LOADING || status === FETCH_STATUS.PENDING}
     />
   );
 
diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx
index 018ef85062ecc..cdc6568ddad79 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx
@@ -19,6 +19,7 @@ export interface StepImageCaptionProps {
   setStepNumber: React.Dispatch<React.SetStateAction<number>>;
   stepNumber: number;
   timestamp: string;
+  isLoading?: boolean;
 }
 
 const ImageCaption = euiStyled.div`
@@ -35,6 +36,7 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
   setStepNumber,
   stepNumber,
   timestamp,
+  isLoading,
 }) => {
   return (
     <ImageCaption>
@@ -45,10 +47,11 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
               <EuiButtonEmpty
                 disabled={stepNumber === 1}
                 onClick={() => {
-                  setStepNumber(stepNumber - 1);
+                  setStepNumber((prevState) => prevState - 1);
                 }}
                 iconType="arrowLeft"
                 aria-label={prevAriaLabel}
+                isLoading={isLoading}
               >
                 {prevAriaLabel}
               </EuiButtonEmpty>
@@ -60,11 +63,12 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
               <EuiButtonEmpty
                 disabled={stepNumber === maxSteps}
                 onClick={() => {
-                  setStepNumber(stepNumber + 1);
+                  setStepNumber((prevState) => prevState + 1);
                 }}
                 iconType="arrowRight"
                 iconSide="right"
                 aria-label={nextAriaLabel}
+                isLoading={isLoading}
               >
                 {nextAriaLabel}
               </EuiButtonEmpty>

From e4c4fe139c6bba875b35f367ce97f50431f49c5e Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad31comp@gmail.com>
Date: Fri, 19 Feb 2021 13:18:51 +0100
Subject: [PATCH 2/2] update test

---
 .../columns/ping_timestamp/step_image_caption.test.tsx      | 1 +
 .../ping_list/columns/ping_timestamp/step_image_caption.tsx | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.test.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.test.tsx
index 80ed3ca46b8aa..a33e587093279 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.test.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.test.tsx
@@ -21,6 +21,7 @@ describe('StepImageCaption', () => {
       setStepNumber: jest.fn(),
       stepNumber: 2,
       timestamp: '2020-11-26T15:28:56.896Z',
+      isLoading: false,
     };
   });
 
diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx
index cdc6568ddad79..fe9709a02b684 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx
@@ -19,7 +19,7 @@ export interface StepImageCaptionProps {
   setStepNumber: React.Dispatch<React.SetStateAction<number>>;
   stepNumber: number;
   timestamp: string;
-  isLoading?: boolean;
+  isLoading: boolean;
 }
 
 const ImageCaption = euiStyled.div`
@@ -47,7 +47,7 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
               <EuiButtonEmpty
                 disabled={stepNumber === 1}
                 onClick={() => {
-                  setStepNumber((prevState) => prevState - 1);
+                  setStepNumber(stepNumber - 1);
                 }}
                 iconType="arrowLeft"
                 aria-label={prevAriaLabel}
@@ -63,7 +63,7 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
               <EuiButtonEmpty
                 disabled={stepNumber === maxSteps}
                 onClick={() => {
-                  setStepNumber((prevState) => prevState + 1);
+                  setStepNumber(stepNumber + 1);
                 }}
                 iconType="arrowRight"
                 iconSide="right"