-
Notifications
You must be signed in to change notification settings - Fork 16.3k
UI: Restore detailed hover tooltips in Grid view #55927
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think the grid should fetch TI details.
If we need more information the details panel is for that purpose.
The grid summary endpoint sends back min_start_date and max_end_date. It's only populated for groups, but we could rename it a reuse it for start_date and end_date and always populate it. So we have access to that directly. 'duration' and 'trigger rule' I think we can remove for now.
airflow-core/src/airflow/ui/src/components/TaskInstanceTooltip.tsx
Outdated
Show resolved
Hide resolved
airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
Outdated
Show resolved
Hide resolved
airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
Outdated
Show resolved
Hide resolved
airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
Outdated
Show resolved
Hide resolved
|
Just wanted to say having |
|
I think the best approach is to see what we can easily add to the LightGridTaskInstanceSummary without affecting API performance. |
|
@KatalKavya96 Here's what the previous grid legend looks like #53438 |
|
@KatalKavya96 Let's try to rebase and use the new |
6964181 to
3d23fca
Compare
|
@RoyLee1224 I have applied changes to use renderDuration,Please review it once again. Thanks |
airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
Outdated
Show resolved
Hide resolved
airflow-core/src/airflow/api_fastapi/core_api/routes/ui/grid.py
Outdated
Show resolved
Hide resolved
airflow-core/src/airflow/ui/src/layouts/Details/Grid/DurationTick.tsx
Outdated
Show resolved
Hide resolved
airflow-core/src/airflow/api_fastapi/core_api/routes/ui/grid.py
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code is not super elegant. It's hard to read and there is a lot of unnecessary stuff.
I assume it was done with help of AI tools and could use some refinement.
Also for the backend you probably need to update tests accordingly, it looks like we want to add 'duration' to the GridTISummaries datamodel but the model was not updated so it's most likely ignored in the response. Can you add new screenshots of what it looks like too please.
CI need fixing, there are typing errors.
airflow-core/src/airflow/api_fastapi/core_api/routes/ui/grid.py
Outdated
Show resolved
Hide resolved
airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridTI.tsx
Outdated
Show resolved
Hide resolved
| ((selectedTaskId ?? undefined) !== undefined && selectedTaskId === taskId) || | ||
| ((selectedGroupId ?? undefined) !== undefined && selectedGroupId === taskId); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(selectedTaskId ?? undefined) that's not necessary I believe.
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com>
|
@pierrejeambrun This is what it looks like on UI right now But i made a few changes as the Grid Icon fetch was giving Internal Server Error |
bbovenzi
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Leaving a Request Changes on here until all unnecessary code changes are reverted.
|
@KatalKavya96 are you still working on this? |
|
@RoyLee1224 Sure!, You can take this PR further up as i am currently equipped with few other things so it would be better if you could resolve this |
|
Closing as @RoyLee1224 is working on that on different PRs and we don't plan to continue the work on this PR. Thanks for your effort @KatalKavya96, feel free to re-open if you plan to work on this again. |

PR Description
This PR improves the grid view task instance tooltips to display full task instance details, similar to the tooltip shown in the DAG run details page.
Changes Made
GridTI.tsx
Integrated TaskInstanceTooltip directly into grid view task instance ticks.
Ensures hover on grid ticks shows the same rich details as the task success/failure badges.
Cleaned up unused state handling and simplified hydration logic.
TaskInstanceTooltip.tsx
Updated to handle additional task instance fields consistently.
Fixed eslint/type issues and standardised object key ordering.
Improved null/undefined handling for optional fields.
TaskInstancesColumn.tsx
DurationTick.tsx
Why
Testing
Verified locally in Breeze UI:
Hovering grid ticks now shows all task instance fields.
Tooltips match those in DAG run success/failure badges.
UI tests (pnpm test) pass.
#Demo Video
Screen.Recording.2025-09-21.at.2.30.37.AM.mov
#Related
related: #55900