Parent job in job panel (MarquezProject#2868)

* Adding parent job from query update.

* Formatting and tooltip added.

* None --> N/A

Signed-off-by: Isa Inalcik <isa.inalcik@gmail.com>

Author: phixMe

web/src/components/datasets/DatasetInfo.tsx

@@ -140,9 +140,9 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
                                 disabled={!hasColumnLineage}
                                 size={'small'}
                                 component={Link}
-                                to={`/datasets/column-level/${encodeURIComponent(dataset.namespace)}/${
-                                  encodeURIComponent(dataset.name)
-                                }?column=${encodeURIComponent(
+                                to={`/datasets/column-level/${encodeURIComponent(
+                                  dataset.namespace
+                                )}/${encodeURIComponent(dataset.name)}?column=${encodeURIComponent(
                                   encodeQueryString(dataset.namespace, dataset.name, field.name)
                                 )}&columnName=${encodeURIComponent(field.name)}`}
                               >

web/src/components/jobs/JobDetailPage.tsx

@@ -7,7 +7,14 @@ import '../../i18n/config'
 import * as Redux from 'redux'
 import { Box, Button, CircularProgress, Divider, Grid, Tab, Tabs } from '@mui/material'
 import { CalendarIcon } from '@mui/x-date-pickers'
-import { DirectionsRun, SportsScore, Start } from '@mui/icons-material'
+import {
+  DirectionsRun,
+  EscalatorWarning,
+  Speed,
+  SportsScore,
+  Start,
+  Title,
+} from '@mui/icons-material'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IState } from '../../store/reducers'
 import { LineageJob } from '../../types/lineage'
@@ -36,12 +43,12 @@ import CloseIcon from '@mui/icons-material/Close'
 import Dialog from '../Dialog'
 import IconButton from '@mui/material/IconButton'
 import JobTags from './JobTags'
+import MQTooltip from '../core/tooltip/MQTooltip'
 import MqEmpty from '../core/empty/MqEmpty'
 import MqStatus from '../core/status/MqStatus'
 import MqText from '../core/text/MqText'
 import RunInfo from './RunInfo'
 import Runs from './Runs'
-import SpeedRounded from '@mui/icons-material/SpeedRounded'
 
 interface DispatchProps {
   fetchLatestRuns: typeof fetchLatestRuns
@@ -207,48 +214,70 @@ const JobDetailPage: FunctionComponent<IProps> = (props) => {
         </Box>
       </Box>
       <Grid container spacing={2}>
-        <Grid item xs={4}>
+        <Grid item xs={3}>
           <MqInfo
             icon={<CalendarIcon color={'disabled'} />}
             label={'Created at'.toUpperCase()}
             value={formatUpdatedAt(job.createdAt)}
           />
         </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={3}>
           <MqInfo
             icon={<CalendarIcon color={'disabled'} />}
             label={'Updated at'.toUpperCase()}
             value={formatUpdatedAt(job.updatedAt)}
           />
         </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={3}>
           <MqInfo
-            icon={<SpeedRounded color={'disabled'} />}
+            icon={<Speed color={'disabled'} />}
             label={'Last Runtime'.toUpperCase()}
             value={job.latestRun ? stopWatchDuration(job.latestRun.durationMs) : 'N/A'}
           />
         </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={3}>
+          <MqInfo
+            icon={<Title color={'disabled'} />}
+            label={'Type'.toUpperCase()}
+            value={job.type ? job.type : 'N/A'}
+          />
+        </Grid>
+        <Grid item xs={3}>
           <MqInfo
             icon={<Start color={'disabled'} />}
             label={'Last Started'.toUpperCase()}
             value={job.latestRun ? formatUpdatedAt(job.latestRun.startedAt) : 'N/A'}
           />
         </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={3}>
           <MqInfo
             icon={<SportsScore color={'disabled'} />}
             label={'Last Finished'.toUpperCase()}
             value={job.latestRun ? formatUpdatedAt(job.latestRun.endedAt) : 'N/A'}
           />
         </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={3}>
           <MqInfo
             icon={<DirectionsRun color={'disabled'} />}
             label={'Running Status'.toUpperCase()}
             value={<MqStatus label={job.latestRun?.state} color={jobRunsStatus(latestRuns)} />}
           />
         </Grid>
+        <Grid item xs={3}>
+          <MqInfo
+            icon={<EscalatorWarning color={'disabled'} />}
+            label={'Parent Job'.toUpperCase()}
+            value={
+              job.parentJobName ? (
+                <MQTooltip title={job.parentJobName}>
+                  <>{truncateText(job.parentJobName, 16)}</>
+                </MQTooltip>
+              ) : (
+                'N/A'
+              )
+            }
+          />
+        </Grid>
       </Grid>
       <Divider sx={{ my: 1 }} />
       <JobTags jobTags={jobTags} jobName={job.name} namespace={job.namespace} />

web/src/types/lineage.ts

@@ -36,6 +36,8 @@ export interface LineageJob {
   location: string
   description: string
   latestRun: Nullable<Run>
+  parentJobName: Nullable<string>
+  parentJobUuid: Nullable<string>
 }
 
 export interface LineageEdge {