Fix task list display of completed runs (#29)

Author: george-dorin

.changeset/sweet-queens-camp.md

@@ -0,0 +1,5 @@
+---
+'@smartcontractkit/operator-ui': patch
+---
+
+Fixed a bug where the Task List would not be displayed correctly if a run was successfully completed.

src/components/Cards/TaskListDAG.tsx

@@ -119,15 +119,15 @@ function createDag({
     .attr('stroke-width', 6)
     .attr('fill', (node) => {
       switch (node.data.attributes?.status) {
-        case 'in_progress':
+        case TaskRunStatus.PENDING:
           // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
           // @ts-ignore because material UI doesn't update theme types with options
           return theme.palette.warning.main
-        case 'completed':
+        case TaskRunStatus.COMPLETE:
           // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
           // @ts-ignore because material UI doesn't update theme types with options
           return theme.palette.success.main
-        case 'errored':
+        case TaskRunStatus.ERROR:
           return theme.palette.error.main
         default:
           return theme.palette.grey['500']

src/screens/JobRun/JobRunView.test.tsx

@@ -5,6 +5,7 @@ import { renderWithRouter, screen } from 'test-utils'
 
 import { JobRunView } from './JobRunView'
 import { buildRun, buildTaskRun } from 'support/factories/gql/fetchJobRun'
+import { theme } from 'theme'
 
 const { queryByRole, queryByText } = screen
 
@@ -54,4 +55,46 @@ describe('JobView', () => {
     // Task Runs Card
     expect(queryByText(/jsonparse/i)).toBeInTheDocument()
   })
+
+  it('renders the job run view with no errors ', async () => {
+    const run = buildRun({
+      status: 'COMPLETED',
+      allErrors: [],
+      job: {
+        id: '10',
+        name: 'job 1',
+        observationSource: `ds1 [type=bridge name="bridge-api0"] ds2 [type=bridge name="bridge-api1"]`,
+      },
+      taskRuns: [
+        buildTaskRun({ dotID: 'ds1' }),
+        buildTaskRun({ dotID: 'ds2' }),
+      ],
+    })
+
+    renderComponent(run)
+
+    // Heading
+    expect(queryByText(`Job Run #${run.id}`)).toBeInTheDocument()
+
+    // Job Run Card
+    expect(queryByText(run.id)).toBeInTheDocument()
+
+    // Tabs
+    expect(queryByRole('tab', { name: 'Overview' })).toBeInTheDocument()
+    expect(queryByRole('tab', { name: 'JSON' })).toBeInTheDocument()
+
+    // Task List Card
+    expect(queryByText(/task list/i)).toBeInTheDocument()
+
+    // ds1 and ds2 are correctly displayed
+    const ds1 = queryByText(/ds1/, { selector: 'text' })?.parentNode?.firstChild
+    const ds2 = queryByText(/ds2/, { selector: 'text' })?.parentNode?.firstChild
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-expect-error because material UI doesn't update theme types with options
+    expect(ds1).toHaveAttribute('fill', theme.palette.success.main)
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-expect-error because material UI doesn't update theme types with options
+    expect(ds2).toHaveAttribute('fill', theme.palette.success.main)
+  })
 })

src/screens/JobRun/JobRunView.tsx

@@ -15,6 +15,7 @@ import { TaskListCard } from 'src/components/Cards/TaskListCard'
 import { TaskRunsCard } from './TaskRunsCard'
 import { JSONCard } from './JSONCard'
 import { TaskRunStatus } from 'src/utils/taskRunStatus'
+import { parseDot } from 'utils/parseDot'
 
 export const JOB_RUN_PAYLOAD__TASK_RUNS_FIELDS = gql`
   fragment JobRunPayload_TaskRunsFields on TaskRun {
@@ -59,7 +60,8 @@ export const JobRunView = ({ run }: Props) => {
 
   // Generate a list of attributes which will get added to the stratify array.
   // We do this so we can display the correct status icon in the TaskList DAG
-  const attrs = run.taskRuns.reduce((acc, run) => {
+  type Attributes = Record<string, { status: TaskRunStatus }>
+  const attrs = run.taskRuns.reduce<Attributes>((acc, run) => {
     let status: TaskRunStatus
 
     if (run.error) {
@@ -78,6 +80,18 @@ export const JobRunView = ({ run }: Props) => {
     }
   }, {})
 
+  //When there are no errors, taskRun is empty so attributes are not set, we
+  //must insert attributes
+  if (run.allErrors.length == 0) {
+    const graph = parseDot(`digraph {${run.job.observationSource}}`)
+    graph.forEach((node) => {
+      attrs[node.id] = {
+        ...node.attributes,
+        status: TaskRunStatus.COMPLETE,
+      }
+    })
+  }
+
   return (
     <Content>
       <Grid container spacing={16}>