From 83016b141558d3a3356b421a8613749df9f4fb6a Mon Sep 17 00:00:00 2001
From: phixMe <peter.hicks@pdtechsolutions.com>
Date: Tue, 15 Oct 2024 12:14:09 -0700
Subject: [PATCH] Fix reverse runs

Signed-off-by: phixMe <peter.hicks@pdtechsolutions.com>
---
 web/src/routes/dashboard/JobRunItem.tsx | 59 +++++++++++++------------
 1 file changed, 31 insertions(+), 28 deletions(-)

diff --git a/web/src/routes/dashboard/JobRunItem.tsx b/web/src/routes/dashboard/JobRunItem.tsx
index a1ef4f2d3c..87a7c40692 100644
--- a/web/src/routes/dashboard/JobRunItem.tsx
+++ b/web/src/routes/dashboard/JobRunItem.tsx
@@ -20,6 +20,7 @@ interface Props {
 
 const JobRunItem: React.FC<Props> = ({ job }) => {
   const navigate = useNavigate()
+  const reversedRuns = [...(job.latestRuns || [])].reverse();
   const longestRun = useMemo(
     () => job.latestRuns?.reduce((acc, run) => (acc.durationMs > run.durationMs ? acc : run)),
     [job.latestRuns]
@@ -73,34 +74,36 @@ const JobRunItem: React.FC<Props> = ({ job }) => {
                 }}
               />
             ))}
-            {job.latestRuns?.reverse().map((run) => (
-              <MQTooltip
-                key={run.id}
-                title={
-                  <>
-                    <MqStatus label={job.latestRun?.state} color={runStateColor(run.state)} />
-                    <MqText sx={{ textAlign: 'center' }} subdued>
-                      {run ? stopWatchDuration(run.durationMs) : 'N/A'}
-                    </MqText>
-                  </>
-                }
-              >
-                <Box
-                  display={'flex'}
-                  alignItems={'center'}
-                  justifyContent={'space-between'}
-                  bgcolor={runStateColor(run.state)}
-                  mr={0.5}
-                  minHeight={2}
-                  width={5}
-                  height={(run.durationMs / longestRun.durationMs) * 40}
-                  sx={{
-                    borderTopLeftRadius: theme.shape.borderRadius,
-                    borderTopRightRadius: theme.shape.borderRadius,
-                  }}
-                />
-              </MQTooltip>
-            ))}
+            {reversedRuns.map((run) => {
+              return (
+                <MQTooltip
+                  key={run.id}
+                  title={
+                    <>
+                      <MqStatus label={job.latestRun?.state} color={runStateColor(run.state)}/>
+                      <MqText sx={{textAlign: 'center'}} subdued>
+                        {run ? stopWatchDuration(run.durationMs) : 'N/A'}
+                      </MqText>
+                    </>
+                  }
+                >
+                  <Box
+                    display={'flex'}
+                    alignItems={'center'}
+                    justifyContent={'space-between'}
+                    bgcolor={runStateColor(run.state)}
+                    mr={0.5}
+                    minHeight={2}
+                    width={5}
+                    height={(run.durationMs / longestRun.durationMs) * 40}
+                    sx={{
+                      borderTopLeftRadius: theme.shape.borderRadius,
+                      borderTopRightRadius: theme.shape.borderRadius,
+                    }}
+                  />
+                </MQTooltip>
+              );
+            })}
           </Box>
         </Box>
         <Box display={{ sm: 'none', md: 'inline-flex' }}>