Update time duration format

airflow-core/src/airflow/ui/src/components/DagRunInfo.tsx

@@ -17,12 +17,12 @@
  * under the License.
  */
 import { VStack, Text, Box } from "@chakra-ui/react";
-import dayjs from "dayjs";
 
 import type { DAGRunResponse } from "openapi/requests/types.gen";
 import { StateBadge } from "src/components/StateBadge";
 import Time from "src/components/Time";
 import { Tooltip } from "src/components/ui";
+import { getDuration } from "src/utils";
 
 type Props = {
   readonly endDate?: string | null;
@@ -52,9 +52,7 @@ const DagRunInfo = ({ endDate, logicalDate, runAfter, startDate, state }: Props)
             End Date: <Time datetime={endDate} />
           </Text>
         ) : undefined}
-        {Boolean(startDate) ? (
-          <Text>Duration: {dayjs.duration(dayjs(endDate).diff(startDate)).asSeconds()}s</Text>
-        ) : undefined}
+        {Boolean(startDate) ? <Text>Duration: {getDuration(startDate, endDate)}</Text> : undefined}
       </VStack>
     }
   >

airflow-core/src/airflow/ui/src/components/DurationChart.tsx

@@ -34,8 +34,7 @@ import { Bar } from "react-chartjs-2";
 
 import type { TaskInstanceResponse, DAGRunResponse } from "openapi/requests/types.gen";
 import { system } from "src/theme";
-import { pluralize } from "src/utils";
-import { getDuration } from "src/utils/datetime_utils";
+import { pluralize, getDuration } from "src/utils";
 
 ChartJS.register(
   CategoryScale,

airflow-core/src/airflow/ui/src/components/TaskInstanceTooltip.tsx

@@ -25,6 +25,7 @@ import type {
 } from "openapi/requests/types.gen";
 import Time from "src/components/Time";
 import { Tooltip, type TooltipProps } from "src/components/ui";
+import { getDuration } from "src/utils";
 
 type Props = {
   readonly taskInstance?: GridTaskInstanceSummary | TaskInstanceHistoryResponse | TaskInstanceResponse;
@@ -47,8 +48,8 @@ const TaskInstanceTooltip = ({ children, positioning, taskInstance, ...rest }: P
             End Date: <Time datetime={taskInstance.end_date} />
           </Text>
           {taskInstance.try_number > 1 && <Text>Try Number: {taskInstance.try_number}</Text>}
-          {"duration" in taskInstance ? (
-            <Text>Duration: {taskInstance.duration?.toFixed(2) ?? 0}s</Text>
+          {"start_date" in taskInstance ? (
+            <Text>Duration: {getDuration(taskInstance.start_date, taskInstance.end_date)}</Text>
           ) : undefined}
         </Box>
       }

airflow-core/src/airflow/ui/src/pages/Dag/Backfills/Backfills.tsx

@@ -89,7 +89,7 @@ const columns: Array<ColumnDef<BackfillResponse>> = [
       <Text>
         {row.original.completed_at === null
           ? ""
-          : `${getDuration(row.original.created_at, row.original.completed_at)}s`}
+          : getDuration(row.original.created_at, row.original.completed_at)}
       </Text>
     ),
     enableSorting: false,

airflow-core/src/airflow/ui/src/pages/DagsList/RecentRuns.tsx

@@ -24,6 +24,7 @@ import { Link } from "react-router-dom";
 import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
 import Time from "src/components/Time";
 import { Tooltip } from "src/components/ui";
+import { getDuration } from "src/utils";
 
 dayjs.extend(duration);
 
@@ -68,7 +69,7 @@ export const RecentRuns = ({
                   End Date: <Time datetime={run.end_date} />
                 </Text>
               )}
-              <Text>Duration: {run.duration.toFixed(2)}s</Text>
+              <Text>Duration: {getDuration(run.start_date, run.end_date)}</Text>
             </Box>
           }
           key={run.dag_run_id}

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

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

airflow-core/src/airflow/ui/src/pages/Run/Details.tsx

@@ -90,7 +90,7 @@ export const Details = () => {
             </Table.Row>
             <Table.Row>
               <Table.Cell>Run Duration</Table.Cell>
-              <Table.Cell>{getDuration(dagRun.start_date, dagRun.end_date)}s</Table.Cell>
+              <Table.Cell>{getDuration(dagRun.start_date, dagRun.end_date)}</Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell>Last Scheduling Decision</Table.Cell>

airflow-core/src/airflow/ui/src/pages/Run/Header.tsx

@@ -104,7 +104,7 @@ export const Header = ({
           },
           { label: "Start", value: <Time datetime={dagRun.start_date} /> },
           { label: "End", value: <Time datetime={dagRun.end_date} /> },
-          { label: "Duration", value: `${getDuration(dagRun.start_date, dagRun.end_date)}s` },
+          { label: "Duration", value: getDuration(dagRun.start_date, dagRun.end_date) },
           {
             label: "Dag Version(s)",
             value: (

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

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

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

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

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

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

airflow-core/src/airflow/ui/src/utils/datetimeUtils.test.ts

@@ -0,0 +1,56 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { describe, it, expect } from "vitest";
+
+import { getDuration } from "./datetimeUtils";
+
+describe("getDuration", () => {
+  it("handles durations less than 10 seconds", () => {
+    const start = "2024-03-14T10:00:00.000Z";
+    const end = "2024-03-14T10:00:05.500Z";
+
+    expect(getDuration(start, end)).toBe("5.50s");
+  });
+
+  it("handles durations spanning multiple days", () => {
+    const start = "2024-03-14T10:00:00.000Z";
+    const end = "2024-03-17T15:30:45.000Z";
+
+    expect(getDuration(start, end)).toBe("3d05:30:45");
+  });
+
+  it("handles exactly 24 hours", () => {
+    const start = "2024-03-14T10:00:00.000Z";
+    const end = "2024-03-15T10:00:00.000Z";
+
+    expect(getDuration(start, end)).toBe("1d00:00:00");
+  });
+
+  it("handles hours and minutes without days", () => {
+    const start = "2024-03-14T10:00:00.000Z";
+    const end = "2024-03-14T12:30:00.000Z";
+
+    expect(getDuration(start, end)).toBe("02:30:00");
+  });
+
+  it("handles null or undefined dates", () => {
+    expect(getDuration(null, null)).toBe("00:00:00");
+    expect(getDuration(undefined, undefined)).toBe("00:00:00");
+  });
+});

airflow-core/src/airflow/ui/src/utils/datetime_utils.ts → airflow-core/src/airflow/ui/src/utils/datetimeUtils.ts

@@ -17,9 +17,22 @@
  * under the License.
  */
 import dayjs from "dayjs";
+import dayjsDuration from "dayjs/plugin/duration";
 
-export const getDuration = (startDate: string | null, endDate: string | null) =>
-  dayjs
-    .duration(dayjs(endDate ?? undefined).diff(startDate ?? undefined))
-    .asSeconds()
-    .toFixed(2);
+dayjs.extend(dayjsDuration);
+
+export const getDuration = (startDate?: string | null, endDate?: string | null) => {
+  const seconds = dayjs.duration(dayjs(endDate ?? undefined).diff(startDate ?? undefined)).asSeconds();
+
+  if (!seconds) {
+    return "00:00:00";
+  }
+
+  if (seconds < 10) {
+    return `${seconds.toFixed(2)}s`;
+  }
+
+  return seconds < 86_400
+    ? dayjs.duration(seconds, "seconds").format("HH:mm:ss")
+    : dayjs.duration(seconds, "seconds").format("D[d]HH:mm:ss");
+};

airflow-core/src/airflow/ui/src/utils/index.ts

@@ -19,7 +19,7 @@
 
 export { capitalize } from "./capitalize";
 export { pluralize } from "./pluralize";
-export { getDuration } from "./datetime_utils";
+export { getDuration } from "./datetimeUtils";
 export { getMetaKey } from "./getMetaKey";
 export { useContainerWidth } from "./useContainerWidth";
 export * from "./query";