Fixing the running state duration.

Signed-off-by: phixMe <[email protected]>
MarquezProject · Oct 15, 2024 · fc76d0a · fc76d0a
1 parent 83016b1
commit fc76d0a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git 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
@@ -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'} />