Display current run state for job node in lineage graph (#2146)

* Change casing for datasets / jobs page and rename latest runtime column Signed-off-by: wslulciuc <willy@datakin.com> * Change casing for job / dataset display pages Signed-off-by: wslulciuc <willy@datakin.com> * Add mappings for node color to run state Signed-off-by: wslulciuc <willy@datakin.com> * continued: Add mappings for node color to run state Signed-off-by: wslulciuc <willy@datakin.com> * Color adjustments. * Color adjustments and prettier. * Fixing prettier. Signed-off-by: wslulciuc <willy@datakin.com> Co-authored-by: phix <peter.hicks@astronomer.io> Co-authored-by: Peter Hicks <phixMe@users.noreply.github.com>
MarquezProject · Sep 30, 2022 · 67e9249 · 67e9249
1 parent b6544ec
commit 67e9249
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 62 deletions.
diff --git a/web/src/components/datasets/DatasetInfo.tsx b/web/src/components/datasets/DatasetInfo.tsx
@@ -10,7 +10,7 @@ import MqText from '../core/text/MqText'
 import React, { FunctionComponent } from 'react'
 import RunStatus from '../jobs/RunStatus'
 
-const DATASET_COLUMNS = ['Field', 'Type', 'Description']
+const DATASET_COLUMNS = ['NAME', 'TYPE', 'DESCRIPTION']
 
 interface DatasetInfoProps {
   datasetFields: Field[]
@@ -56,7 +56,7 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = props => {
       {facets && (
         <Box mt={2}>
           <Box mb={1}>
-            <MqText subheading>Facets</MqText>
+            <MqText subheading>FACETS</MqText>
           </Box>
           <MqJson code={facets} />
         </Box>

diff --git a/web/src/components/datasets/DatasetVersions.tsx b/web/src/components/datasets/DatasetVersions.tsx
@@ -26,7 +26,13 @@ const styles = (theme: ITheme) => {
   })
 }
 
-const DATASET_VERSIONS_COLUMNS = ['Version', 'Created At', 'Field Count', 'Dataset Creator (Run)', 'Lifecycle State']
+const DATASET_VERSIONS_COLUMNS = [
+  'VERSION',
+  'CREATED AT',
+  'FIELDS',
+  'CREATED BY RUN',
+  'LIFECYCLE STATE'
+]
 
 interface DatasetVersionsProps {
   versions: DatasetVersion[]

diff --git a/web/src/components/jobs/RunInfo.tsx b/web/src/components/jobs/RunInfo.tsx
@@ -26,7 +26,7 @@ const RunInfo: FunctionComponent<RunInfoProps> = props => {
       {run.facets && (
         <Box mt={2}>
           <Box mb={1}>
-            <MqText subheading>Facets</MqText>
+            <MqText subheading>FACETS</MqText>
           </Box>
           <MqJson code={run.facets} />
         </Box>

diff --git a/web/src/components/jobs/Runs.tsx b/web/src/components/jobs/Runs.tsx
@@ -27,7 +27,7 @@ import RunInfo from './RunInfo'
 import RunStatus from './RunStatus'
 import transitions from '@material-ui/core/styles/transitions'
 
-const RUN_COLUMNS = ['ID', 'State', 'Created At', 'Started At', 'Ended At', 'Duration']
+const RUN_COLUMNS = ['ID', 'STATE', 'CREATED AT', 'STARTED AT', 'ENDED AT', 'DURATION']
 
 const styles = (theme: Theme) => {
   return createStyles({
@@ -116,7 +116,7 @@ const Runs: FunctionComponent<RunsProps & WithStyles<typeof styles>> = props =>
       {facets && (
         <Box mt={2}>
           <Box mb={1}>
-            <MqText subheading>Facets</MqText>
+            <MqText subheading>FACETS</MqText>
           </Box>
           <MqCode code={JSON.stringify(facets, null, '\t')} />
         </Box>

diff --git a/web/src/components/lineage/components/node/Node.tsx b/web/src/components/lineage/components/node/Node.tsx
@@ -8,6 +8,8 @@ import { Node as GraphNode } from 'dagre'
 import { Link } from 'react-router-dom'
 import { MqNode } from '../../types'
 import { NodeText } from './NodeText'
+import { Nullable } from '../../../../types/util/Nullable'
+import { Run } from '../../../../types/api'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { encodeNode, isDataset, isJob } from '../../../../helpers/nodes'
@@ -25,7 +27,7 @@ export type Vertex = {
 const RADIUS = 14
 const OUTER_RADIUS = RADIUS + 8
 const ICON_SIZE = 16
-const BORDER = 2
+const BORDER = 4
 
 interface DispatchProps {
   setSelectedNode: (payload: string) => void
@@ -39,6 +41,23 @@ interface OwnProps {
 
 type NodeProps = DispatchProps & OwnProps
 
+function runStateToNodeColor(run: Nullable<Run>) {
+  switch (run && run.state) {
+    case 'NEW':
+      return theme.palette.secondary.main
+    case 'RUNNING':
+      return theme.palette.info.main
+    case 'COMPLETED':
+      return theme.palette.secondary.main
+    case 'FAILED':
+      return theme.palette.error.main
+    case 'ABORTED':
+      return theme.palette.warning.main
+    default:
+      return theme.palette.secondary.main
+  }
+}
+
 class Node extends React.Component<NodeProps> {
   determineLink = (node: GraphNode<MqNode>) => {
     if (isJob(node)) {
@@ -52,6 +71,7 @@ class Node extends React.Component<NodeProps> {
   render() {
     const { node, edgeEnds, selectedNode } = this.props
     const job = isJob(node)
+    const isSelected = selectedNode === node.label
     return (
       <Link
         to={this.determineLink(node)}
@@ -62,12 +82,8 @@ class Node extends React.Component<NodeProps> {
             <circle
               style={{ cursor: 'pointer' }}
               r={RADIUS}
-              fill={theme.palette.common.white}
-              stroke={
-                selectedNode === node.label
-                  ? theme.palette.primary.main
-                  : theme.palette.secondary.main
-              }
+              fill={runStateToNodeColor(job.latestRun)}
+              stroke={isSelected ? theme.palette.primary.main : theme.palette.secondary.main}
               strokeWidth={BORDER}
               cx={node.x}
               cy={node.y}
@@ -88,11 +104,7 @@ class Node extends React.Component<NodeProps> {
               height={ICON_SIZE}
               x={node.x - ICON_SIZE / 2}
               y={node.y - ICON_SIZE / 2}
-              color={
-                selectedNode === node.label
-                  ? theme.palette.primary.main
-                  : theme.palette.secondary.main
-              }
+              color={runStateToNodeColor(job.latestRun)}
             />
           </g>
         ) : (
@@ -102,11 +114,7 @@ class Node extends React.Component<NodeProps> {
               x={node.x - RADIUS}
               y={node.y - RADIUS}
               fill={theme.palette.common.white}
-              stroke={
-                selectedNode === node.label
-                  ? theme.palette.primary.main
-                  : theme.palette.secondary.main
-              }
+              stroke={isSelected ? theme.palette.primary.main : theme.palette.secondary.main}
               strokeWidth={BORDER}
               width={RADIUS * 2}
               height={RADIUS * 2}
@@ -129,11 +137,7 @@ class Node extends React.Component<NodeProps> {
               height={ICON_SIZE}
               x={node.x - ICON_SIZE / 2}
               y={node.y - ICON_SIZE / 2}
-              color={
-                selectedNode === node.label
-                  ? theme.palette.primary.main
-                  : theme.palette.secondary.main
-              }
+              color={theme.palette.secondary.main}
             />
           </g>
         )}

diff --git a/web/src/components/sidenav/Sidenav.tsx b/web/src/components/sidenav/Sidenav.tsx
@@ -55,7 +55,7 @@ class Sidenav extends React.Component<SidenavProps> {
             <RouterLink to={'/'} className={classes.link}>
               <MqIconButton
                 id={'homeDrawerButton'}
-                title={'Jobs'}
+                title={'JOBS'}
                 active={this.props.location.pathname === '/'}
               >
                 <FontAwesomeIcon icon={faCogs} size={'2x'} />
@@ -64,7 +64,7 @@ class Sidenav extends React.Component<SidenavProps> {
             <RouterLink to={'/datasets'} className={classes.link}>
               <MqIconButton
                 id={'datasetsDrawerButton'}
-                title={'Datasets'}
+                title={'DATASETS'}
                 active={this.props.location.pathname === '/datasets'}
               >
                 <FontAwesomeIcon icon={faDatabase} size={'2x'} />

diff --git a/web/src/helpers/theme.ts b/web/src/helpers/theme.ts
@@ -32,6 +32,12 @@ export const theme = createTheme({
     error: {
       main: '#ee7b7b'
     },
+    warning: {
+      main: '#7D7D7D'
+    },
+    info: {
+      main: '#FECC00'
+    },
     background: {
       default: '#191f26'
     },

diff --git a/web/src/routes/datasets/Datasets.tsx b/web/src/routes/datasets/Datasets.tsx
@@ -34,7 +34,7 @@ interface DispatchProps {
 
 type DatasetsProps = WithStyles<typeof styles> & StateProps & DispatchProps
 
-const DATASET_COLUMNS = ['Name', 'Namespace', 'Source', 'Updated At']
+const DATASET_COLUMNS = ['NAME', 'NAMESPACE', 'SOURCE', 'UPDATED AT']
 
 class Datasets extends React.Component<DatasetsProps> {
   componentDidMount() {
@@ -73,7 +73,7 @@ class Datasets extends React.Component<DatasetsProps> {
             ) : (
               <>
                 <Box p={2}>
-                  <MqText heading>Datasets</MqText>
+                  <MqText heading>DATASETS</MqText>
                 </Box>
                 <Table size='small'>
                   <TableHead>
@@ -88,33 +88,35 @@ class Datasets extends React.Component<DatasetsProps> {
                     </TableRow>
                   </TableHead>
                   <TableBody>
-                    {datasets.filter(dataset => !dataset.deleted).map(dataset => {
-                      return (
-                        <TableRow key={dataset.name}>
-                          <TableCell align='left'>
-                            <MqText
-                              link
-                              linkTo={`/lineage/${encodeNode(
-                                'DATASET',
-                                dataset.namespace,
-                                dataset.name
-                              )}`}
-                            >
-                              {dataset.name}
-                            </MqText>
-                          </TableCell>
-                          <TableCell align='left'>
-                            <MqText>{dataset.namespace}</MqText>
-                          </TableCell>
-                          <TableCell align='left'>
-                            <MqText>{dataset.sourceName}</MqText>
-                          </TableCell>
-                          <TableCell align='left'>
-                            <MqText>{formatUpdatedAt(dataset.updatedAt)}</MqText>
-                          </TableCell>
-                        </TableRow>
-                      )
-                    })}
+                    {datasets
+                      .filter(dataset => !dataset.deleted)
+                      .map(dataset => {
+                        return (
+                          <TableRow key={dataset.name}>
+                            <TableCell align='left'>
+                              <MqText
+                                link
+                                linkTo={`/lineage/${encodeNode(
+                                  'DATASET',
+                                  dataset.namespace,
+                                  dataset.name
+                                )}`}
+                              >
+                                {dataset.name}
+                              </MqText>
+                            </TableCell>
+                            <TableCell align='left'>
+                              <MqText>{dataset.namespace}</MqText>
+                            </TableCell>
+                            <TableCell align='left'>
+                              <MqText>{dataset.sourceName}</MqText>
+                            </TableCell>
+                            <TableCell align='left'>
+                              <MqText>{formatUpdatedAt(dataset.updatedAt)}</MqText>
+                            </TableCell>
+                          </TableRow>
+                        )
+                      })}
                   </TableBody>
                 </Table>
               </>

diff --git a/web/src/routes/jobs/Jobs.tsx b/web/src/routes/jobs/Jobs.tsx
@@ -31,7 +31,7 @@ interface DispatchProps {
 
 type JobsProps = StateProps & DispatchProps
 
-const JOB_COLUMNS = ['Name', 'Namespace', 'Updated At', 'Last Runtime']
+const JOB_COLUMNS = ['NAME', 'NAMESPACE', 'UPDATED AT', 'LATEST RUN DURATION']
 
 class Jobs extends React.Component<JobsProps> {
   componentDidMount() {
@@ -70,7 +70,7 @@ class Jobs extends React.Component<JobsProps> {
             ) : (
               <>
                 <Box p={2}>
-                  <MqText heading>Jobs</MqText>
+                  <MqText heading>JOBS</MqText>
                 </Box>
                 <Table size='small'>
                   <TableHead>

diff --git a/web/src/types/api.ts b/web/src/types/api.ts
@@ -141,7 +141,7 @@ export interface Run {
   facets: object
 }
 
-export type RunState = 'NEW' | 'COMPLETED' | 'FAILED' | 'ABORTED'
+export type RunState = 'NEW' | 'RUNNING' | 'COMPLETED' | 'FAILED' | 'ABORTED'
 
 export interface SearchResult {
   name: string