Prevent UI from crashing if grid task instances are null (#23939)

* UI fix for null task instances * improve tests without global vars * fix test data (cherry picked from commit 9314a4a)
apache · May 26, 2022 · a88900c · a88900c
1 parent 6decd20
commit a88900c
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 55 deletions.
diff --git a/airflow/www/static/js/grid/renderTaskRows.jsx b/airflow/www/static/js/grid/renderTaskRows.jsx
@@ -53,7 +53,7 @@ const TaskInstances = ({
   <Flex justifyContent="flex-end">
     {dagRunIds.map((runId) => {
       // Check if an instance exists for the run, or return an empty box
-      const instance = task.instances.find((gi) => gi.runId === runId);
+      const instance = task.instances.find((gi) => gi && gi.runId === runId);
       const isSelected = selectedRunId === runId;
       return (
         <Box

diff --git a/airflow/www/static/js/grid/renderTaskRows.test.jsx b/airflow/www/static/js/grid/renderTaskRows.test.jsx
@@ -25,33 +25,16 @@ import { render } from '@testing-library/react';
 import renderTaskRows from './renderTaskRows';
 import { TableWrapper } from './utils/testUtils';
 
-const mockGroup = {
-  id: null,
-  label: null,
-  children: [
-    {
-      extraLinks: [],
-      id: 'group_1',
-      label: 'group_1',
-      instances: [
-        {
-          dagId: 'dagId',
-          duration: 0,
-          endDate: '2021-10-26T15:42:03.391939+00:00',
-          executionDate: '2021-10-25T15:41:09.726436+00:00',
-          operator: 'DummyOperator',
-          runId: 'run1',
-          startDate: '2021-10-26T15:42:03.391917+00:00',
-          state: 'success',
-          taskId: 'group_1',
-          tryNumber: 1,
-        },
-      ],
+describe('Test renderTaskRows', () => {
+  test('Renders name and task instance', () => {
+    const task = {
+      id: null,
+      label: null,
       children: [
         {
-          id: 'group_1.task_1',
-          label: 'group_1.task_1',
           extraLinks: [],
+          id: 'group_1',
+          label: 'group_1',
           instances: [
             {
               dagId: 'dagId',
@@ -62,44 +45,60 @@ const mockGroup = {
               runId: 'run1',
               startDate: '2021-10-26T15:42:03.391917+00:00',
               state: 'success',
-              taskId: 'group_1.task_1',
+              taskId: 'group_1',
               tryNumber: 1,
             },
           ],
+          children: [
+            {
+              id: 'group_1.task_1',
+              label: 'group_1.task_1',
+              extraLinks: [],
+              instances: [
+                {
+                  dagId: 'dagId',
+                  duration: 0,
+                  endDate: '2021-10-26T15:42:03.391939+00:00',
+                  executionDate: '2021-10-25T15:41:09.726436+00:00',
+                  operator: 'DummyOperator',
+                  runId: 'run1',
+                  startDate: '2021-10-26T15:42:03.391917+00:00',
+                  state: 'success',
+                  taskId: 'group_1.task_1',
+                  tryNumber: 1,
+                },
+              ],
+            },
+          ],
         },
       ],
-    },
-  ],
-  instances: [],
-};
+      instances: [],
+    };
+
+    const { queryByTestId, getByText } = render(
+      <>{renderTaskRows({ task, dagRunIds: ['run1'] })}</>,
+      { wrapper: TableWrapper },
+    );
+
+    expect(getByText('group_1')).toBeInTheDocument();
+    expect(queryByTestId('task-instance')).toBeDefined();
+    expect(queryByTestId('blank-task')).toBeNull();
+  });
 
-describe('Test renderTaskRows', () => {
   test('Still renders names if there are no instances', () => {
-    global.gridData = {
-      groups: {
-        id: null,
-        label: null,
-        children: [
-          {
-            extraLinks: [],
-            id: 'group_1',
-            label: 'group_1',
-            instances: [],
-            children: [
-              {
-                id: 'group_1.task_1',
-                label: 'group_1.task_1',
-                extraLinks: [],
-                instances: [],
-              },
-            ],
-          },
-        ],
-        instances: [],
-      },
-      dagRuns: [],
+    const task = {
+      id: null,
+      label: null,
+      children: [
+        {
+          extraLinks: [],
+          id: 'group_1',
+          label: 'group_1',
+          instances: [],
+        },
+      ],
+      instances: [],
     };
-    const task = mockGroup;
 
     const { queryByTestId, getByText } = render(
       <>{renderTaskRows({ task, dagRunIds: [] })}</>,
@@ -109,4 +108,37 @@ describe('Test renderTaskRows', () => {
     expect(getByText('group_1')).toBeInTheDocument();
     expect(queryByTestId('task-instance')).toBeNull();
   });
+
+  test('Still renders correctly if task instance is null', () => {
+    const task = {
+      id: null,
+      label: null,
+      children: [
+        {
+          extraLinks: [],
+          id: 'group_1',
+          label: 'group_1',
+          instances: [null],
+          children: [
+            {
+              id: 'group_1.task_1',
+              label: 'group_1.task_1',
+              extraLinks: [],
+              instances: [null],
+            },
+          ],
+        },
+      ],
+      instances: [null],
+    };
+
+    const { queryByTestId, getByText } = render(
+      <>{renderTaskRows({ task, dagRunIds: ['run1'] })}</>,
+      { wrapper: TableWrapper },
+    );
+
+    expect(getByText('group_1')).toBeInTheDocument();
+    expect(queryByTestId('task-instance')).toBeNull();
+    expect(queryByTestId('blank-task')).toBeInTheDocument();
+  });
 });