Fix header nav and no TIs

apache · Feb 6, 2024 · 93a03d5 · 93a03d5
1 parent e3e8e32
commit 93a03d5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 18 deletions.
diff --git a/airflow/www/static/js/dag/details/Header.tsx b/airflow/www/static/js/dag/details/Header.tsx
@@ -47,13 +47,18 @@ const Header = () => {
   } = useSelection();
   const dagRun = dagRuns.find((r) => r.runId === runId);
 
-  // clearSelection if the current selected dagRun is
-  // filtered out.
+  const group = getTask({ taskId, task: groups });
+
+  // If runId and/or taskId can't be found remove the selection
   useEffect(() => {
-    if (runId && !dagRun) {
+    if (runId && !dagRun && taskId && !group) {
       clearSelection();
+    } else if (runId && !dagRun) {
+      onSelect({ taskId });
+    } else if (taskId && !group) {
+      onSelect({ runId });
     }
-  }, [clearSelection, dagRun, runId]);
+  }, [dagRun, taskId, group, runId, onSelect, clearSelection]);
 
   let runLabel;
   if (dagRun && runId) {
@@ -75,15 +80,13 @@ const Header = () => {
     );
   }
 
-  const group = getTask({ taskId, task: groups });
-
   const lastIndex = taskId ? taskId.lastIndexOf(".") : null;
   const taskName =
     taskId && lastIndex ? taskId.substring(lastIndex + 1) : taskId;
 
   const isDagDetails = !runId && !taskId;
   const isRunDetails = !!(runId && !taskId);
-  const isTaskDetails = runId && taskId && mapIndex === undefined;
+  const isTaskDetails = !runId && taskId;
   const isMappedTaskDetails = runId && taskId && mapIndex !== undefined;
 
   return (
@@ -109,7 +112,11 @@ const Header = () => {
       {taskId && (
         <BreadcrumbItem isCurrentPage mt={4}>
           <BreadcrumbLink
-            onClick={() => onSelect({ runId, taskId })}
+            onClick={() =>
+              mapIndex !== undefined
+                ? onSelect({ runId, taskId })
+                : onSelect({ taskId })
+            }
             _hover={isTaskDetails ? { cursor: "default" } : undefined}
           >
             <BreadcrumbText

diff --git a/airflow/www/static/js/dag/details/task/TaskDuration.tsx b/airflow/www/static/js/dag/details/task/TaskDuration.tsx
@@ -56,10 +56,10 @@ const TaskDuration = () => {
   if (!task) return null;
   const orderingLabel = ordering[0] || ordering[1] || "startDate";
 
-  const durations: (TaskInstanceDuration | null)[] = dagRuns.map((dagRun) => {
+  const durations: (TaskInstanceDuration | {})[] = dagRuns.map((dagRun) => {
     const { runId } = dagRun;
     const instance = task.instances.find((ti) => ti && ti.runId === runId);
-    if (!instance) return null;
+    if (!instance) return {};
     // @ts-ignore
     const runDuration = moment.duration(
       instance.startDate && instance.endDate
@@ -124,6 +124,7 @@ const TaskDuration = () => {
       runId,
       queuedDttm,
       startDate,
+      state,
       endDate,
       tryNumber,
       queuedDurationUnit,
@@ -134,6 +135,7 @@ const TaskDuration = () => {
       Run Id: ${runId} <br>
       ${startCase(orderingLabel)}: ${formatDateTime(data[orderingLabel])} <br>
       Try Number: ${tryNumber} <br>
+      State: ${state} <br>
       Queued: ${queuedDttm && formatDateTime(queuedDttm)} <br>
       Started: ${startDate && formatDateTime(startDate)} <br>
       Ended: ${endDate && formatDateTime(endDate)} <br>
@@ -182,8 +184,9 @@ const TaskDuration = () => {
       type: "category",
       show: true,
       axisLabel: {
-        // @ts-ignore
-        formatter: (value: string) => moment(value).format(defaultFormat),
+        formatter: (value: string) =>
+          // @ts-ignore
+          value ? moment(value).format(defaultFormat) : "",
       },
       name: startCase(orderingLabel),
       nameLocation: "end",

diff --git a/airflow/www/static/js/dag/details/task/index.tsx b/airflow/www/static/js/dag/details/task/index.tsx
@@ -38,13 +38,11 @@ const TaskDetails = () => {
 
   return (
     <Box height="50%">
+      <Text as="strong">Task Instance Duration</Text>
+      <TaskDuration />
       <Text as="strong">Task Details</Text>
       <Table variant="striped" my={5}>
         <Tbody>
-          <Tr>
-            <Td>Task ID</Td>
-            <Td>{task?.id}</Td>
-          </Tr>
           <Tr>
             <Td>Operator</Td>
             <Td>{task?.operator}</Td>
@@ -55,8 +53,6 @@ const TaskDetails = () => {
           </Tr>
         </Tbody>
       </Table>
-      <Text as="strong">Task Instance Duration</Text>
-      <TaskDuration />
     </Box>
   );
 };