From fc76d0ace85e933da2d5e62b25532df5e9237ab7 Mon Sep 17 00:00:00 2001
From: phixMe <peter.hicks@pdtechsolutions.com>
Date: Tue, 15 Oct 2024 14:36:27 -0700
Subject: [PATCH] Fixing the running state duration.

Signed-off-by: phixMe <peter.hicks@pdtechsolutions.com>
---
 web/src/components/jobs/JobDetailPage.tsx | 13 +++++++++++--
 web/src/routes/dashboard/JobRunItem.tsx   | 16 ++++++++++------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/web/src/components/jobs/JobDetailPage.tsx b/web/src/components/jobs/JobDetailPage.tsx
index 56126ad504..a4f25a8e5e 100644
--- a/web/src/components/jobs/JobDetailPage.tsx
+++ b/web/src/components/jobs/JobDetailPage.tsx
@@ -34,6 +34,7 @@ import {
 } from '../../store/actionCreators'
 import { faCog } from '@fortawesome/free-solid-svg-icons/faCog'
 import { formatUpdatedAt } from '../../helpers'
+import { runStateColor } from '../../helpers/nodes'
 import { stopWatchDuration } from '../../helpers/time'
 import { truncateText } from '../../helpers/text'
 import { useNavigate, useSearchParams } from 'react-router-dom'
@@ -48,7 +49,6 @@ import MqStatus from '../core/status/MqStatus'
 import MqText from '../core/text/MqText'
 import RunInfo from './RunInfo'
 import Runs from './Runs'
-import {runStateColor} from "../../helpers/nodes";
 
 interface DispatchProps {
   fetchLatestRuns: typeof fetchLatestRuns
@@ -259,7 +259,16 @@ const JobDetailPage: FunctionComponent<IProps> = (props) => {
           <MqInfo
             icon={<DirectionsRun color={'disabled'} />}
             label={'Running Status'.toUpperCase()}
-            value={<MqStatus label={job.latestRun?.state} color={job.latestRun?.state ?  runStateColor(job.latestRun.state) : theme.palette.secondary.main} />}
+            value={
+              <MqStatus
+                label={job.latestRun?.state}
+                color={
+                  job.latestRun?.state
+                    ? runStateColor(job.latestRun.state)
+                    : theme.palette.secondary.main
+                }
+              />
+            }
           />
         </Grid>
         <Grid item xs={3}>
diff --git a/web/src/routes/dashboard/JobRunItem.tsx b/web/src/routes/dashboard/JobRunItem.tsx
index 87a7c40692..d7e7c2e035 100644
--- a/web/src/routes/dashboard/JobRunItem.tsx
+++ b/web/src/routes/dashboard/JobRunItem.tsx
@@ -20,7 +20,7 @@ interface Props {
 
 const JobRunItem: React.FC<Props> = ({ job }) => {
   const navigate = useNavigate()
-  const reversedRuns = [...(job.latestRuns || [])].reverse();
+  const reversedRuns = [...(job.latestRuns || [])].reverse()
   const longestRun = useMemo(
     () => job.latestRuns?.reduce((acc, run) => (acc.durationMs > run.durationMs ? acc : run)),
     [job.latestRuns]
@@ -80,9 +80,9 @@ const JobRunItem: React.FC<Props> = ({ job }) => {
                   key={run.id}
                   title={
                     <>
-                      <MqStatus label={job.latestRun?.state} color={runStateColor(run.state)}/>
-                      <MqText sx={{textAlign: 'center'}} subdued>
-                        {run ? stopWatchDuration(run.durationMs) : 'N/A'}
+                      <MqStatus label={job.latestRun?.state} color={runStateColor(run.state)} />
+                      <MqText sx={{ textAlign: 'center' }} subdued>
+                        {run && run.durationMs ? stopWatchDuration(run.durationMs) : 'N/A'}
                       </MqText>
                     </>
                   }
@@ -102,7 +102,7 @@ const JobRunItem: React.FC<Props> = ({ job }) => {
                     }}
                   />
                 </MQTooltip>
-              );
+              )
             })}
           </Box>
         </Box>
@@ -137,7 +137,11 @@ const JobRunItem: React.FC<Props> = ({ job }) => {
         <Divider sx={{ mx: 2 }} flexItem orientation={'vertical'} />
         <Box>
           <MqText subdued>LAST RUN</MqText>
-          <MqText>{job.latestRun ? stopWatchDuration(job.latestRun.durationMs) : 'N/A'}</MqText>
+          <MqText>
+            {job.latestRun && job.latestRun.durationMs
+              ? stopWatchDuration(job.latestRun.durationMs)
+              : 'N/A'}
+          </MqText>
         </Box>
         <Box display={{ sm: 'none', md: 'inline-flex' }}>
           <Divider sx={{ mx: 2 }} flexItem orientation={'vertical'} />