Skip to content

Commit 67e9249

Browse files
wslulciucphixphixMe
authored
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>
1 parent b6544ec commit 67e9249

10 files changed

Lines changed: 80 additions & 62 deletions

File tree

‎web/src/components/datasets/DatasetInfo.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import MqText from '../core/text/MqText'
1010
import React, { FunctionComponent } from 'react'
1111
import RunStatus from '../jobs/RunStatus'
1212

13-
const DATASET_COLUMNS = ['Field', 'Type', 'Description']
13+
const DATASET_COLUMNS = ['NAME', 'TYPE', 'DESCRIPTION']
1414

1515
interface DatasetInfoProps {
1616
datasetFields: Field[]
@@ -56,7 +56,7 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = props => {
5656
{facets && (
5757
<Box mt={2}>
5858
<Box mb={1}>
59-
<MqText subheading>Facets</MqText>
59+
<MqText subheading>FACETS</MqText>
6060
</Box>
6161
<MqJson code={facets} />
6262
</Box>

‎web/src/components/datasets/DatasetVersions.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,13 @@ const styles = (theme: ITheme) => {
2626
})
2727
}
2828

29-
const DATASET_VERSIONS_COLUMNS = ['Version', 'Created At', 'Field Count', 'Dataset Creator (Run)', 'Lifecycle State']
29+
const DATASET_VERSIONS_COLUMNS = [
30+
'VERSION',
31+
'CREATED AT',
32+
'FIELDS',
33+
'CREATED BY RUN',
34+
'LIFECYCLE STATE'
35+
]
3036

3137
interface DatasetVersionsProps {
3238
versions: DatasetVersion[]

‎web/src/components/jobs/RunInfo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const RunInfo: FunctionComponent<RunInfoProps> = props => {
2626
{run.facets && (
2727
<Box mt={2}>
2828
<Box mb={1}>
29-
<MqText subheading>Facets</MqText>
29+
<MqText subheading>FACETS</MqText>
3030
</Box>
3131
<MqJson code={run.facets} />
3232
</Box>

‎web/src/components/jobs/Runs.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import RunInfo from './RunInfo'
2727
import RunStatus from './RunStatus'
2828
import transitions from '@material-ui/core/styles/transitions'
2929

30-
const RUN_COLUMNS = ['ID', 'State', 'Created At', 'Started At', 'Ended At', 'Duration']
30+
const RUN_COLUMNS = ['ID', 'STATE', 'CREATED AT', 'STARTED AT', 'ENDED AT', 'DURATION']
3131

3232
const styles = (theme: Theme) => {
3333
return createStyles({
@@ -116,7 +116,7 @@ const Runs: FunctionComponent<RunsProps & WithStyles<typeof styles>> = props =>
116116
{facets && (
117117
<Box mt={2}>
118118
<Box mb={1}>
119-
<MqText subheading>Facets</MqText>
119+
<MqText subheading>FACETS</MqText>
120120
</Box>
121121
<MqCode code={JSON.stringify(facets, null, '\t')} />
122122
</Box>

‎web/src/components/lineage/components/node/Node.tsx‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { Node as GraphNode } from 'dagre'
88
import { Link } from 'react-router-dom'
99
import { MqNode } from '../../types'
1010
import { NodeText } from './NodeText'
11+
import { Nullable } from '../../../../types/util/Nullable'
12+
import { Run } from '../../../../types/api'
1113
import { bindActionCreators } from 'redux'
1214
import { connect } from 'react-redux'
1315
import { encodeNode, isDataset, isJob } from '../../../../helpers/nodes'
@@ -25,7 +27,7 @@ export type Vertex = {
2527
const RADIUS = 14
2628
const OUTER_RADIUS = RADIUS + 8
2729
const ICON_SIZE = 16
28-
const BORDER = 2
30+
const BORDER = 4
2931

3032
interface DispatchProps {
3133
setSelectedNode: (payload: string) => void
@@ -39,6 +41,23 @@ interface OwnProps {
3941

4042
type NodeProps = DispatchProps & OwnProps
4143

44+
function runStateToNodeColor(run: Nullable<Run>) {
45+
switch (run && run.state) {
46+
case 'NEW':
47+
return theme.palette.secondary.main
48+
case 'RUNNING':
49+
return theme.palette.info.main
50+
case 'COMPLETED':
51+
return theme.palette.secondary.main
52+
case 'FAILED':
53+
return theme.palette.error.main
54+
case 'ABORTED':
55+
return theme.palette.warning.main
56+
default:
57+
return theme.palette.secondary.main
58+
}
59+
}
60+
4261
class Node extends React.Component<NodeProps> {
4362
determineLink = (node: GraphNode<MqNode>) => {
4463
if (isJob(node)) {
@@ -52,6 +71,7 @@ class Node extends React.Component<NodeProps> {
5271
render() {
5372
const { node, edgeEnds, selectedNode } = this.props
5473
const job = isJob(node)
74+
const isSelected = selectedNode === node.label
5575
return (
5676
<Link
5777
to={this.determineLink(node)}
@@ -62,12 +82,8 @@ class Node extends React.Component<NodeProps> {
6282
<circle
6383
style={{ cursor: 'pointer' }}
6484
r={RADIUS}
65-
fill={theme.palette.common.white}
66-
stroke={
67-
selectedNode === node.label
68-
? theme.palette.primary.main
69-
: theme.palette.secondary.main
70-
}
85+
fill={runStateToNodeColor(job.latestRun)}
86+
stroke={isSelected ? theme.palette.primary.main : theme.palette.secondary.main}
7187
strokeWidth={BORDER}
7288
cx={node.x}
7389
cy={node.y}
@@ -88,11 +104,7 @@ class Node extends React.Component<NodeProps> {
88104
height={ICON_SIZE}
89105
x={node.x - ICON_SIZE / 2}
90106
y={node.y - ICON_SIZE / 2}
91-
color={
92-
selectedNode === node.label
93-
? theme.palette.primary.main
94-
: theme.palette.secondary.main
95-
}
107+
color={runStateToNodeColor(job.latestRun)}
96108
/>
97109
</g>
98110
) : (
@@ -102,11 +114,7 @@ class Node extends React.Component<NodeProps> {
102114
x={node.x - RADIUS}
103115
y={node.y - RADIUS}
104116
fill={theme.palette.common.white}
105-
stroke={
106-
selectedNode === node.label
107-
? theme.palette.primary.main
108-
: theme.palette.secondary.main
109-
}
117+
stroke={isSelected ? theme.palette.primary.main : theme.palette.secondary.main}
110118
strokeWidth={BORDER}
111119
width={RADIUS * 2}
112120
height={RADIUS * 2}
@@ -129,11 +137,7 @@ class Node extends React.Component<NodeProps> {
129137
height={ICON_SIZE}
130138
x={node.x - ICON_SIZE / 2}
131139
y={node.y - ICON_SIZE / 2}
132-
color={
133-
selectedNode === node.label
134-
? theme.palette.primary.main
135-
: theme.palette.secondary.main
136-
}
140+
color={theme.palette.secondary.main}
137141
/>
138142
</g>
139143
)}

‎web/src/components/sidenav/Sidenav.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ class Sidenav extends React.Component<SidenavProps> {
5555
<RouterLink to={'/'} className={classes.link}>
5656
<MqIconButton
5757
id={'homeDrawerButton'}
58-
title={'Jobs'}
58+
title={'JOBS'}
5959
active={this.props.location.pathname === '/'}
6060
>
6161
<FontAwesomeIcon icon={faCogs} size={'2x'} />
@@ -64,7 +64,7 @@ class Sidenav extends React.Component<SidenavProps> {
6464
<RouterLink to={'/datasets'} className={classes.link}>
6565
<MqIconButton
6666
id={'datasetsDrawerButton'}
67-
title={'Datasets'}
67+
title={'DATASETS'}
6868
active={this.props.location.pathname === '/datasets'}
6969
>
7070
<FontAwesomeIcon icon={faDatabase} size={'2x'} />

‎web/src/helpers/theme.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,12 @@ export const theme = createTheme({
3232
error: {
3333
main: '#ee7b7b'
3434
},
35+
warning: {
36+
main: '#7D7D7D'
37+
},
38+
info: {
39+
main: '#FECC00'
40+
},
3541
background: {
3642
default: '#191f26'
3743
},

‎web/src/routes/datasets/Datasets.tsx‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ interface DispatchProps {
3434

3535
type DatasetsProps = WithStyles<typeof styles> & StateProps & DispatchProps
3636

37-
const DATASET_COLUMNS = ['Name', 'Namespace', 'Source', 'Updated At']
37+
const DATASET_COLUMNS = ['NAME', 'NAMESPACE', 'SOURCE', 'UPDATED AT']
3838

3939
class Datasets extends React.Component<DatasetsProps> {
4040
componentDidMount() {
@@ -73,7 +73,7 @@ class Datasets extends React.Component<DatasetsProps> {
7373
) : (
7474
<>
7575
<Box p={2}>
76-
<MqText heading>Datasets</MqText>
76+
<MqText heading>DATASETS</MqText>
7777
</Box>
7878
<Table size='small'>
7979
<TableHead>
@@ -88,33 +88,35 @@ class Datasets extends React.Component<DatasetsProps> {
8888
</TableRow>
8989
</TableHead>
9090
<TableBody>
91-
{datasets.filter(dataset => !dataset.deleted).map(dataset => {
92-
return (
93-
<TableRow key={dataset.name}>
94-
<TableCell align='left'>
95-
<MqText
96-
link
97-
linkTo={`/lineage/${encodeNode(
98-
'DATASET',
99-
dataset.namespace,
100-
dataset.name
101-
)}`}
102-
>
103-
{dataset.name}
104-
</MqText>
105-
</TableCell>
106-
<TableCell align='left'>
107-
<MqText>{dataset.namespace}</MqText>
108-
</TableCell>
109-
<TableCell align='left'>
110-
<MqText>{dataset.sourceName}</MqText>
111-
</TableCell>
112-
<TableCell align='left'>
113-
<MqText>{formatUpdatedAt(dataset.updatedAt)}</MqText>
114-
</TableCell>
115-
</TableRow>
116-
)
117-
})}
91+
{datasets
92+
.filter(dataset => !dataset.deleted)
93+
.map(dataset => {
94+
return (
95+
<TableRow key={dataset.name}>
96+
<TableCell align='left'>
97+
<MqText
98+
link
99+
linkTo={`/lineage/${encodeNode(
100+
'DATASET',
101+
dataset.namespace,
102+
dataset.name
103+
)}`}
104+
>
105+
{dataset.name}
106+
</MqText>
107+
</TableCell>
108+
<TableCell align='left'>
109+
<MqText>{dataset.namespace}</MqText>
110+
</TableCell>
111+
<TableCell align='left'>
112+
<MqText>{dataset.sourceName}</MqText>
113+
</TableCell>
114+
<TableCell align='left'>
115+
<MqText>{formatUpdatedAt(dataset.updatedAt)}</MqText>
116+
</TableCell>
117+
</TableRow>
118+
)
119+
})}
118120
</TableBody>
119121
</Table>
120122
</>

‎web/src/routes/jobs/Jobs.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ interface DispatchProps {
3131

3232
type JobsProps = StateProps & DispatchProps
3333

34-
const JOB_COLUMNS = ['Name', 'Namespace', 'Updated At', 'Last Runtime']
34+
const JOB_COLUMNS = ['NAME', 'NAMESPACE', 'UPDATED AT', 'LATEST RUN DURATION']
3535

3636
class Jobs extends React.Component<JobsProps> {
3737
componentDidMount() {
@@ -70,7 +70,7 @@ class Jobs extends React.Component<JobsProps> {
7070
) : (
7171
<>
7272
<Box p={2}>
73-
<MqText heading>Jobs</MqText>
73+
<MqText heading>JOBS</MqText>
7474
</Box>
7575
<Table size='small'>
7676
<TableHead>

‎web/src/types/api.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export interface Run {
141141
facets: object
142142
}
143143

144-
export type RunState = 'NEW' | 'COMPLETED' | 'FAILED' | 'ABORTED'
144+
export type RunState = 'NEW' | 'RUNNING' | 'COMPLETED' | 'FAILED' | 'ABORTED'
145145

146146
export interface SearchResult {
147147
name: string

0 commit comments

Comments
 (0)
⚡