(airflow) branch v3-2-test updated: Show dag run duration in grid tooltip (#65787) (#66900)

[rahulvats]

This is an automated email from the ASF dual-hosted git repository.

vatsrahul1001 pushed a commit to branch v3-2-test
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/v3-2-test by this push:
     new 925ff3d9965 Show dag run duration in grid tooltip (#65787) (#66900)
925ff3d9965 is described below

commit 925ff3d9965d25ebf5272ebb31abb20e89c44943
Author: Rahul Vats <43964496+vatsrahul1...@users.noreply.github.com>
AuthorDate: Fri May 15 10:16:52 2026 +0530

    Show dag run duration in grid tooltip (#65787) (#66900)
    
    * Show dag run duration in grid tooltip
    
    * Reorder grid tooltip duration
    
    ---------
    
    
    (cherry picked from commit d628ea02ccffcb80247648843bea19058c8ba7f5)
    
    Co-authored-by: PrithviBadiga 
<45932166+prithvibad...@users.noreply.github.com>
    Co-authored-by: Prithvi Badiga <prithvibad...@users.noreply.github.com>
---
 airflow-core/src/airflow/ui/src/layouts/Details/Grid/Bar.tsx         | 1 +
 .../src/airflow/ui/src/layouts/Details/Grid/GridButton.test.tsx      | 2 ++
 airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx  | 5 +++++
 3 files changed, 8 insertions(+)

diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Bar.tsx 
b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Bar.tsx
index c2bb3ed6d04..0cfce328ac4 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Bar.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Bar.tsx
@@ -84,6 +84,7 @@ export const Bar = ({ max, onClick, run, 
showVersionIndicatorMode }: Props) => {
           alignItems="center"
           color="fg"
           dagId={dagId}
+          duration={run.duration}
           flexDir="column"
           height={`${(run.duration / max) * BAR_HEIGHT}px`}
           justifyContent="flex-end"
diff --git 
a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.test.tsx 
b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.test.tsx
index 6164573e68c..bb0f38b8725 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.test.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.test.tsx
@@ -31,6 +31,7 @@ describe("GridButton", () => {
     render(
       <GridButton
         dagId="example_dag"
+        duration={3661}
         label="2026-04-21T00:00:00+00:00"
         runId="manual__2026-04-21T00:00:00+00:00"
         searchParams=""
@@ -49,6 +50,7 @@ describe("GridButton", () => {
     expect(screen.getByTestId("basic-tooltip")).toHaveTextContent(
       "common:runId: manual__2026-04-21T00:00:00+00:00",
     );
+    expect(screen.getByTestId("basic-tooltip")).toHaveTextContent("duration: 
01:01:01");
 
     vi.useRealTimers();
   });
diff --git 
a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx 
b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
index 488ccffd0d0..8721d937c72 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
@@ -22,9 +22,11 @@ import { Link } from "react-router-dom";
 
 import type { DagRunState, TaskInstanceState } from 
"openapi/requests/types.gen";
 import { BasicTooltip } from "src/components/BasicTooltip";
+import { renderDuration } from "src/utils/datetimeUtils";
 
 type Props = {
   readonly dagId: string;
+  readonly duration?: number | null;
   readonly isGroup?: boolean;
   readonly label: string;
   readonly runId: string;
@@ -36,6 +38,7 @@ type Props = {
 export const GridButton = ({
   children,
   dagId,
+  duration,
   isGroup,
   label,
   runId,
@@ -54,6 +57,8 @@ export const GridButton = ({
       <br />
       {translate("state")}:{" "}
       {state ? translate(`common:states.${state}`) : 
translate("common:states.no_status")}
+      <br />
+      {translate("duration")}: {renderDuration(duration)}
     </>
   );