Repository navigation
feat(ui): Implement Server-Side Time Range Filtering for Gantt View (#63715) - #74013
jhaabhijeet864 wants to merge 2 commits into
Conversation
|
Congratulations on your first Pull Request and welcome to the Apache Airflow community! If you have any issues or are unsure about any anything please check our Contributors' Guide
|
|
Quickest fix: git fetch upstream main && git rebase upstream/main
rm uv.lock && uv lock
git add uv.lock && git rebase --continue
git push --force-with-leaseAutomated nudge — ignore if you're not ready to rebase. This comment is updated in place on future |
3946f14 to
6f92056
Compare
|
Closing this. About 100 of the 18,900 changed lines are the feature; the rest is an unrelated #73555 is already open for the same feature and has review. |
Context & Problem Statement
This PR resolves issue #63715, providing a robust, highly performant time range selector for the Gantt view. As DAGs grow in size and complexity, rendering every single task instance in a run becomes unmanageable and visually overwhelming. Users require a way to slice the Gantt chart to a specific time window.
Why This Solves the Problem
This implementation introduces a seamlessly integrated "Start Date" range filter in the UI that acts as a strict time-window selector for the Gantt view.
Instead of passing the entire payload to the browser and attempting to filter it there, this solution filters the overlapping task instances at the database level. Only tasks that intersect with the user's selected time range are fetched, serialized, and rendered, keeping the frontend snappy regardless of the DAG's scale.
Why This is Better Than Previous Attempts
I have carefully reviewed previous attempts to solve this issue (such as PR #61058) and the feedback maintainers provided when closing them. I designed this implementation specifically to address those past shortcomings:
1. Avoiding Client-Side Bloat
Previous implementations attempted to solve the filtering entirely on the frontend. They fetched all task instances for a run and then used React/JS to hide tasks outside the window. As maintainers pointed out, this crashes the browser on massive DAGs and defeats the purpose of data-fetching optimizations. My implementation shifts this burden entirely to the backend FastAPI layer.
2. Preserving Database Index Utilization
Earlier backend attempts tried to handle running tasks (where
end_dateisNone) by using SQL functions likeCOALESCE(end_date, NOW())within theWHEREclause. Maintainers correctly noted that wrapping columns in functions destroys database index utilization, leading to full table scans. I have eliminatedfunc.coalesceentirely from the filtering logic.Technical Innovations & Architecture
Index-Friendly Null Handling
To ensure the Gantt chart correctly displays currently running or queued tasks without breaking database indexes, the SQL filter logic uses a pure
ORcondition instead of coalescing:This guarantees that active tasks remain visible within the selected time window while allowing the database engine to effectively use existing indexes on the
end_datecolumn.Seamless Frontend Wiring & State Management
The UI integration reuses the existing
START_DATE_RANGEfilter component withinGridFilters.tsx, but conditionally renders it only whendagView === 'gantt'. This keeps the standard Grid view clean. Furthermore, all filters are synchronized to the URL query parameters (start_date_gteandstart_date_lte), ensuring that users can bookmark and share specific Gantt time-slices.Reliance on CI OpenAPI Codegen
The FastAPI endpoints (
gantt.py) have been updated to officially acceptstart_date_gteandend_date_lte. To adhere strictly to Airflow's architectural standards, I have avoided making fragile manual patches to theopenapi-gen/TypeScript files.The official
openapi-merge-clipipeline will automatically pick up these new parameters during the CI build process, generating the correct types and ensuring the UI compiles natively without hacky overrides.Related Issue
Closes #63715
Testing & Validation
test_gantt.pyverifying partial filters, combined boundaries, and overlapping logic for both completed and running (null end_date) task instances.start_date_gte,start_date_lte) are properly populated by the FilterBar and wired directly into the backend API requests.