Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 9 commits into from
Sep 30, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4b02cfc
Change casing for datasets / jobs page and rename latest runtime column
wslulciuc Sep 27, 2022
192ade9
Change casing for job / dataset display pages
wslulciuc Sep 27, 2022
796d85d
Add mappings for node color to run state
wslulciuc Sep 27, 2022
cddf44e
continued: Add mappings for node color to run state
wslulciuc Sep 28, 2022
4e076e3
Merge branch 'main' into feature/display-current-run-state-for-job-in…
wslulciuc Sep 28, 2022
af505d8
Color adjustments.
Sep 30, 2022
43aea64
Color adjustments and prettier.
Sep 30, 2022
5a21fa4
Fixing prettier.
Sep 30, 2022
3e46596
Merge branch 'main' into feature/display-current-run-state-for-job-in…
phixMe Sep 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions web/src/components/datasets/DatasetInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[]
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 7 additions & 1 deletion web/src/components/datasets/DatasetVersions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[]
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/jobs/RunInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions web/src/components/jobs/Runs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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>
Expand Down
48 changes: 26 additions & 22 deletions web/src/components/lineage/components/node/Node.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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
Expand All @@ -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)) {
Expand All @@ -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)}
Expand All @@ -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}
Expand All @@ -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>
) : (
Expand All @@ -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}
Expand All @@ -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>
)}
Expand Down
4 changes: 2 additions & 2 deletions web/src/components/sidenav/Sidenav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'} />
Expand All @@ -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'} />
Expand Down
6 changes: 6 additions & 0 deletions web/src/helpers/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,12 @@ export const theme = createTheme({
error: {
main: '#ee7b7b'
},
warning: {
main: '#7D7D7D'
},
Comment on lines +35 to +37
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typically, this would be an orange or yellow in a design system.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was referencing the colors defined in helpers/runs.ts. Also, maybe I should just use runColorMap defined in runs.ts?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, let's go with that.

info: {
main: '#FECC00'
},
background: {
default: '#191f26'
},
Expand Down
60 changes: 31 additions & 29 deletions web/src/routes/datasets/Datasets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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>
Expand All @@ -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>
</>
Expand Down
4 changes: 2 additions & 2 deletions web/src/routes/jobs/Jobs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion web/src/types/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down