Hide task duration if we don't have a start_date (#47633)

In some failure scenarios, we can have an end_date without a start_date.
If we naively show a duration in these cases, we end up with a negative
duration, which isn't ideal. This hides the duration if we don't have
start_date.

End_date wasn't added to the condition so a duration is still shown for
running tasks - those with a start_date but no end_date.

Author: jedcunningham

airflow/ui/src/pages/MappedTaskInstance/Header.tsx

@@ -46,7 +46,9 @@ export const Header = ({
     ...entries,
     { label: "Start", value: <Time datetime={taskInstance.start_date} /> },
     { label: "End", value: <Time datetime={taskInstance.end_date} /> },
-    { label: "Duration", value: `${getDuration(taskInstance.start_date, taskInstance.end_date)}s` },
+    ...(Boolean(taskInstance.start_date)
+      ? [{ label: "Duration", value: `${getDuration(taskInstance.start_date, taskInstance.end_date)}s` }]
+      : []),
   ];
 
   return (

airflow/ui/src/pages/TaskInstance/Details.tsx

@@ -134,11 +134,9 @@ export const Details = () => {
           <Table.Row>
             <Table.Cell>Duration</Table.Cell>
             <Table.Cell>
-              {
-                // eslint-disable-next-line unicorn/no-null
-                getDuration(tryInstance?.start_date ?? null, tryInstance?.end_date ?? null)
-              }
-              s
+              {Boolean(tryInstance?.start_date) // eslint-disable-next-line unicorn/no-null
+                ? `${getDuration(tryInstance?.start_date ?? null, tryInstance?.end_date ?? null)}s`
+                : ""}
             </Table.Cell>
           </Table.Row>
           <Table.Row>

airflow/ui/src/pages/TaskInstance/Header.tsx

@@ -46,7 +46,9 @@ export const Header = ({
     ...(taskInstance.try_number > 1 ? [{ label: "Try Number", value: taskInstance.try_number }] : []),
     { label: "Start", value: <Time datetime={taskInstance.start_date} /> },
     { label: "End", value: <Time datetime={taskInstance.end_date} /> },
-    { label: "Duration", value: `${getDuration(taskInstance.start_date, taskInstance.end_date)}s` },
+    ...(Boolean(taskInstance.start_date)
+      ? [{ label: "Duration", value: `${getDuration(taskInstance.start_date, taskInstance.end_date)}s` }]
+      : []),
     {
       label: "DAG Version",
       value:

airflow/ui/src/pages/TaskInstances/TaskInstances.tsx

@@ -137,7 +137,8 @@ const taskInstanceColumns = (
     header: "Operator",
   },
   {
-    cell: ({ row: { original } }) => `${getDuration(original.start_date, original.end_date)}s`,
+    cell: ({ row: { original } }) =>
+      Boolean(original.start_date) ? `${getDuration(original.start_date, original.end_date)}s` : "",
     header: "Duration",
   },
   {