From 67e9249dc546d2b05a0199af9fad703d13f60d3f Mon Sep 17 00:00:00 2001 From: Willy Lulciuc Date: Fri, 30 Sep 2022 10:49:01 -0700 Subject: [PATCH] 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 * Change casing for job / dataset display pages Signed-off-by: wslulciuc * Add mappings for node color to run state Signed-off-by: wslulciuc * continued: Add mappings for node color to run state Signed-off-by: wslulciuc * Color adjustments. * Color adjustments and prettier. * Fixing prettier. Signed-off-by: wslulciuc Co-authored-by: phix Co-authored-by: Peter Hicks --- web/src/components/datasets/DatasetInfo.tsx | 4 +- .../components/datasets/DatasetVersions.tsx | 8 ++- web/src/components/jobs/RunInfo.tsx | 2 +- web/src/components/jobs/Runs.tsx | 4 +- .../lineage/components/node/Node.tsx | 48 ++++++++------- web/src/components/sidenav/Sidenav.tsx | 4 +- web/src/helpers/theme.ts | 6 ++ web/src/routes/datasets/Datasets.tsx | 60 ++++++++++--------- web/src/routes/jobs/Jobs.tsx | 4 +- web/src/types/api.ts | 2 +- 10 files changed, 80 insertions(+), 62 deletions(-) diff --git a/web/src/components/datasets/DatasetInfo.tsx b/web/src/components/datasets/DatasetInfo.tsx index 8c656f231c..7e2013d320 100644 --- 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 = props => { {facets && ( - Facets + FACETS diff --git a/web/src/components/datasets/DatasetVersions.tsx b/web/src/components/datasets/DatasetVersions.tsx index c82a16f65d..ae0672eda4 100644 --- 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 index 1d9d0a1390..dcc897ae3d 100644 --- a/web/src/components/jobs/RunInfo.tsx +++ b/web/src/components/jobs/RunInfo.tsx @@ -26,7 +26,7 @@ const RunInfo: FunctionComponent = props => { {run.facets && ( - Facets + FACETS diff --git a/web/src/components/jobs/Runs.tsx b/web/src/components/jobs/Runs.tsx index 3dd7020411..08011a913a 100644 --- 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> = props => {facets && ( - Facets + FACETS diff --git a/web/src/components/lineage/components/node/Node.tsx b/web/src/components/lineage/components/node/Node.tsx index 8494490772..615f60e996 100644 --- 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) { + 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 { determineLink = (node: GraphNode) => { if (isJob(node)) { @@ -52,6 +71,7 @@ class Node extends React.Component { render() { const { node, edgeEnds, selectedNode } = this.props const job = isJob(node) + const isSelected = selectedNode === node.label return ( { { 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)} /> ) : ( @@ -102,11 +114,7 @@ class Node extends React.Component { 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 { 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} /> )} diff --git a/web/src/components/sidenav/Sidenav.tsx b/web/src/components/sidenav/Sidenav.tsx index e6e732a111..c1f7a14256 100644 --- a/web/src/components/sidenav/Sidenav.tsx +++ b/web/src/components/sidenav/Sidenav.tsx @@ -55,7 +55,7 @@ class Sidenav extends React.Component { @@ -64,7 +64,7 @@ class Sidenav extends React.Component { diff --git a/web/src/helpers/theme.ts b/web/src/helpers/theme.ts index 8d6bb25ec7..2607b14e14 100644 --- 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 index 0fc5721813..f367b306a8 100644 --- a/web/src/routes/datasets/Datasets.tsx +++ b/web/src/routes/datasets/Datasets.tsx @@ -34,7 +34,7 @@ interface DispatchProps { type DatasetsProps = WithStyles & StateProps & DispatchProps -const DATASET_COLUMNS = ['Name', 'Namespace', 'Source', 'Updated At'] +const DATASET_COLUMNS = ['NAME', 'NAMESPACE', 'SOURCE', 'UPDATED AT'] class Datasets extends React.Component { componentDidMount() { @@ -73,7 +73,7 @@ class Datasets extends React.Component { ) : ( <> - Datasets + DATASETS @@ -88,33 +88,35 @@ class Datasets extends React.Component { - {datasets.filter(dataset => !dataset.deleted).map(dataset => { - return ( - - - - {dataset.name} - - - - {dataset.namespace} - - - {dataset.sourceName} - - - {formatUpdatedAt(dataset.updatedAt)} - - - ) - })} + {datasets + .filter(dataset => !dataset.deleted) + .map(dataset => { + return ( + + + + {dataset.name} + + + + {dataset.namespace} + + + {dataset.sourceName} + + + {formatUpdatedAt(dataset.updatedAt)} + + + ) + })}
diff --git a/web/src/routes/jobs/Jobs.tsx b/web/src/routes/jobs/Jobs.tsx index 560e2f95a1..e1b2fa52c6 100644 --- 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 { componentDidMount() { @@ -70,7 +70,7 @@ class Jobs extends React.Component { ) : ( <> - Jobs + JOBS diff --git a/web/src/types/api.ts b/web/src/types/api.ts index 73e41551fa..d54cd1c92c 100644 --- 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