Add pagination to grid view, and adjust grid if linking to old runs by bbovenzi · Pull Request #65388 · apache/airflow

bbovenzi · 2026-04-16T20:07:32Z

Add <> pagination buttons to the grid view.

When clicking a link to an old dag run that is out of view, adjust the grid with runAfterLte to show the run.

Add a >> reset button to jump back to the latest grid info.

Move filters out from the Settings dropdown and reuse the same (+Filter) badge UX that we have for our table views.

Sync grid filters with dag run table filters

Closes#65217

With Gantt chart:

Was generative AI tooling used to co-author this PR?

[ x] Yes (Claude Sonnet 4.6)

Read the Pull Request Guidelines for more information. Note: commit author/co-author name and email in commits become permanently public when merged.
For fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
When adding dependency, check compliance with the ASF 3rd Party License Policy.
For significant user-facing changes create newsfragment: {pr_number}.significant.rst, in airflow-core/newsfragments. You can add this file in a follow-up commit after the PR is created so you know the PR number.

pierrejeambrun

Super cool 🎉.

Tested locally and working as expected.

A few suggestions, nothing blocking. (code might use some simplification / refactoring, at some places logic is dense and hard to follow maybe it can be simplified)

…pache#65388) * Paginate the grid view, with jumping to old runs * Sync up runs and grid filters * Use same filter pill ux * Reset dagView as localStorage * Address PR feedback

bbovenzi · 2026-04-16T20:07:32Z

Add <> pagination buttons to the grid view.

When clicking a link to an old dag run that is out of view, adjust the grid with runAfterLte to show the run.

Add a >> reset button to jump back to the latest grid info.

Move filters out from the Settings dropdown and reuse the same (+Filter) badge UX that we have for our table views.

Sync grid filters with dag run table filters

Closes#65217

With Gantt chart:

Was generative AI tooling used to co-author this PR?

[ x] Yes (Claude Sonnet 4.6)

Read the Pull Request Guidelines for more information. Note: commit author/co-author name and email in commits become permanently public when merged.
For fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
When adding dependency, check compliance with the ASF 3rd Party License Policy.
For significant user-facing changes create newsfragment: {pr_number}.significant.rst, in airflow-core/newsfragments. You can add this file in a follow-up commit after the PR is created so you know the PR number.

pierrejeambrun

Super cool 🎉.

Tested locally and working as expected.

A few suggestions, nothing blocking. (code might use some simplification / refactoring, at some places logic is dense and hard to follow maybe it can be simplified)

…pache#65388) * Paginate the grid view, with jumping to old runs * Sync up runs and grid filters * Use same filter pill ux * Reset dagView as localStorage * Address PR feedback

bbovenzi · 2026-04-16T20:07:32Z

Add <> pagination buttons to the grid view.

When clicking a link to an old dag run that is out of view, adjust the grid with runAfterLte to show the run.

Add a >> reset button to jump back to the latest grid info.

Move filters out from the Settings dropdown and reuse the same (+Filter) badge UX that we have for our table views.

Sync grid filters with dag run table filters

Closes#65217

With Gantt chart:

Was generative AI tooling used to co-author this PR?

[ x] Yes (Claude Sonnet 4.6)

Read the Pull Request Guidelines for more information. Note: commit author/co-author name and email in commits become permanently public when merged.
For fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
When adding dependency, check compliance with the ASF 3rd Party License Policy.
For significant user-facing changes create newsfragment: {pr_number}.significant.rst, in airflow-core/newsfragments. You can add this file in a follow-up commit after the PR is created so you know the PR number.

pierrejeambrun

Super cool 🎉.

Tested locally and working as expected.

A few suggestions, nothing blocking. (code might use some simplification / refactoring, at some places logic is dense and hard to follow maybe it can be simplified)

…pache#65388) * Paginate the grid view, with jumping to old runs * Sync up runs and grid filters * Use same filter pill ux * Reset dagView as localStorage * Address PR feedback

bbovenzi · 2026-04-16T20:07:32Z

Add <> pagination buttons to the grid view.

When clicking a link to an old dag run that is out of view, adjust the grid with runAfterLte to show the run.

Add a >> reset button to jump back to the latest grid info.

Move filters out from the Settings dropdown and reuse the same (+Filter) badge UX that we have for our table views.

Sync grid filters with dag run table filters

Closes#65217

With Gantt chart:

Was generative AI tooling used to co-author this PR?

[ x] Yes (Claude Sonnet 4.6)

Read the Pull Request Guidelines for more information. Note: commit author/co-author name and email in commits become permanently public when merged.
For fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
When adding dependency, check compliance with the ASF 3rd Party License Policy.
For significant user-facing changes create newsfragment: {pr_number}.significant.rst, in airflow-core/newsfragments. You can add this file in a follow-up commit after the PR is created so you know the PR number.

pierrejeambrun

Super cool 🎉.

Tested locally and working as expected.

A few suggestions, nothing blocking. (code might use some simplification / refactoring, at some places logic is dense and hard to follow maybe it can be simplified)

…pache#65388) * Paginate the grid view, with jumping to old runs * Sync up runs and grid filters * Use same filter pill ux * Reset dagView as localStorage * Address PR feedback

bbovenzi · 2026-04-16T20:07:32Z

Add <> pagination buttons to the grid view.

When clicking a link to an old dag run that is out of view, adjust the grid with runAfterLte to show the run.

Add a >> reset button to jump back to the latest grid info.

Move filters out from the Settings dropdown and reuse the same (+Filter) badge UX that we have for our table views.

Sync grid filters with dag run table filters

Closes#65217

With Gantt chart:

Was generative AI tooling used to co-author this PR?

[ x] Yes (Claude Sonnet 4.6)

Read the Pull Request Guidelines for more information. Note: commit author/co-author name and email in commits become permanently public when merged.
For fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
When adding dependency, check compliance with the ASF 3rd Party License Policy.
For significant user-facing changes create newsfragment: {pr_number}.significant.rst, in airflow-core/newsfragments. You can add this file in a follow-up commit after the PR is created so you know the PR number.

pierrejeambrun

Super cool 🎉.

Tested locally and working as expected.

A few suggestions, nothing blocking. (code might use some simplification / refactoring, at some places logic is dense and hard to follow maybe it can be simplified)

…pache#65388) * Paginate the grid view, with jumping to old runs * Sync up runs and grid filters * Use same filter pill ux * Reset dagView as localStorage * Address PR feedback

bbovenzi · 2026-04-16T20:07:32Z

Add <> pagination buttons to the grid view.

When clicking a link to an old dag run that is out of view, adjust the grid with runAfterLte to show the run.

Add a >> reset button to jump back to the latest grid info.

Move filters out from the Settings dropdown and reuse the same (+Filter) badge UX that we have for our table views.

Sync grid filters with dag run table filters

Closes#65217

With Gantt chart:

Was generative AI tooling used to co-author this PR?

[ x] Yes (Claude Sonnet 4.6)

Read the Pull Request Guidelines for more information. Note: commit author/co-author name and email in commits become permanently public when merged.
For fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
When adding dependency, check compliance with the ASF 3rd Party License Policy.
For significant user-facing changes create newsfragment: {pr_number}.significant.rst, in airflow-core/newsfragments. You can add this file in a follow-up commit after the PR is created so you know the PR number.

pierrejeambrun

Super cool 🎉.

Tested locally and working as expected.

A few suggestions, nothing blocking. (code might use some simplification / refactoring, at some places logic is dense and hard to follow maybe it can be simplified)

…pache#65388) * Paginate the grid view, with jumping to old runs * Sync up runs and grid filters * Use same filter pill ux * Reset dagView as localStorage * Address PR feedback

bbovenzi · 2026-04-16T20:07:32Z

Add <> pagination buttons to the grid view.

When clicking a link to an old dag run that is out of view, adjust the grid with runAfterLte to show the run.

Add a >> reset button to jump back to the latest grid info.

Move filters out from the Settings dropdown and reuse the same (+Filter) badge UX that we have for our table views.

Sync grid filters with dag run table filters

Closes#65217

With Gantt chart:

Was generative AI tooling used to co-author this PR?

[ x] Yes (Claude Sonnet 4.6)

Read the Pull Request Guidelines for more information. Note: commit author/co-author name and email in commits become permanently public when merged.
For fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
When adding dependency, check compliance with the ASF 3rd Party License Policy.
For significant user-facing changes create newsfragment: {pr_number}.significant.rst, in airflow-core/newsfragments. You can add this file in a follow-up commit after the PR is created so you know the PR number.

pierrejeambrun

Super cool 🎉.

Tested locally and working as expected.

A few suggestions, nothing blocking. (code might use some simplification / refactoring, at some places logic is dense and hard to follow maybe it can be simplified)

…pache#65388) * Paginate the grid view, with jumping to old runs * Sync up runs and grid filters * Use same filter pill ux * Reset dagView as localStorage * Address PR feedback

bbovenzi · 2026-04-16T20:07:32Z

Add <> pagination buttons to the grid view.

When clicking a link to an old dag run that is out of view, adjust the grid with runAfterLte to show the run.

Add a >> reset button to jump back to the latest grid info.

Move filters out from the Settings dropdown and reuse the same (+Filter) badge UX that we have for our table views.

Sync grid filters with dag run table filters

Closes#65217

With Gantt chart:

Was generative AI tooling used to co-author this PR?

[ x] Yes (Claude Sonnet 4.6)

Read the Pull Request Guidelines for more information. Note: commit author/co-author name and email in commits become permanently public when merged.
For fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
When adding dependency, check compliance with the ASF 3rd Party License Policy.
For significant user-facing changes create newsfragment: {pr_number}.significant.rst, in airflow-core/newsfragments. You can add this file in a follow-up commit after the PR is created so you know the PR number.

pierrejeambrun

Super cool 🎉.

Tested locally and working as expected.

A few suggestions, nothing blocking. (code might use some simplification / refactoring, at some places logic is dense and hard to follow maybe it can be simplified)

…pache#65388) * Paginate the grid view, with jumping to old runs * Sync up runs and grid filters * Use same filter pill ux * Reset dagView as localStorage * Address PR feedback

bbovenzi requested review from choo121600, guan404ming, pierrejeambrun, ryanahamilton, shubhamraj-git and vatsrahul1001 as code owners April 16, 2026 20:07

boring-cyborgBot added area:translations area:UI Related to UI/UX. For Frontend Developers. translation:default labels Apr 16, 2026

bbovenzi added this to the Airflow 3.3.0 milestone Apr 16, 2026

pierrejeambrun approved these changes Apr 20, 2026
View reviewed changes

Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Grid/GridPaginationButtons.tsx
Comment threadairflow-core/src/airflow/ui/src/layouts/Details/Grid/useGridPagination.ts Outdated

bbovenzi added 5 commits April 20, 2026 14:23

Paginate the grid view, with jumping to old runs
2aa529c

Sync up runs and grid filters
e5344d2

Use same filter pill ux
db6c2f5

Reset dagView as localStorage
c619570

Address PR feedback
932de9a

bbovenzi force-pushed the grid-pagination branch from 16f9ada to 932de9aCompare April 20, 2026 18:40

bbovenzi merged commit 0a00d05 into apache:mainApr 20, 2026
141 checks passed

bbovenzi deleted the grid-pagination branch April 20, 2026 20:44

parkhojeong mentioned this pull request May 18, 2026
For DAGs with 25+ runs, selecting an old run auto-limits view to latest 5 runs. #56001
Closed
2 tasks

bbovenzi mentioned this pull request Jul 6, 2026
Links to specific dagruns don't work when older than 25 runs #34723
Closed
2 tasks

minyeamer mentioned this pull request Aug 13, 2026
UI: Add cross-Dag Time Schedule view #71558
Open
1 task