Fix reverse runs

Signed-off-by: phixMe <[email protected]>
MarquezProject · Oct 15, 2024 · 83016b1 · 83016b1
1 parent bc74ef9
commit 83016b1
Showing 1 changed file with 31 additions and 28 deletions.
diff --git 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' }}>