feat: Implemented Filters UI for Asset Events View - #54640

Merged
bbovenzi merged 23 commits into
apache:mainfrom
BrianLii:feat-asset-view-filter
Sep 11, 2025
Merged

feat: Implemented Filters UI for Asset Events View#54640
bbovenzi merged 23 commits into
apache:mainfrom
BrianLii:feat-asset-view-filter

Conversation

@BrianLii

@BrianLiiBrianLii commented Aug 19, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

Part of: #53053

This PR implements the filtering UI for viewing asset events. The filters include:

  • Timestamp -- date picker

  • DAG ID -- search bar with substring matching

  • Task ID -- search bar with substring matching

Demo:
https://github.com/user-attachments/assets/cfb496d2-fb84-4663-937c-7a61fa91526a

@boring-cyborgboring-cyborgBot added the area:UI Related to UI/UX. For Frontend Developers. label Aug 19, 2025
@BrianLiiBrianLii changed the title feat: Implemented Filters for Asset Viewfeat: Implemented Filters UI for Asset ViewAug 21, 2025
@BrianLii
BrianLii marked this pull request as ready for review August 21, 2025 22:08
guan404ming
guan404ming reviewed Aug 25, 2025
View reviewed changes

@guan404mingguan404ming left a comment •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR, the direction looks good! I've left some comments on it. Also, I think there are still two things needed in this PR:

  1. need to add labels for start date and end date fields

  2. make the layout more consistent with current filters, you could take a look at this one https://github.com/apache/airflow/pull/54049/files

  3. (optional) reset filter feature is also needed (could be done in follow up one)

cc @RoyLee1224 I think you are more familiar with filter please help give it a quick look if you have time. Thanks!

Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx Outdated
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx Outdated
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx Outdated
@BrianLii

BrianLii commented Aug 26, 2025

Copy link
Copy Markdown
ContributorAuthor

Thanks @guan404ming for the review!
I've committed changes regarding the UI (1. and 2.) you mentioned. Below is how it looks now.
Screenshot 2025-08-25 at 8 05 28 PM

@BrianLii
BrianLiiforce-pushed the feat-asset-view-filter branch from 71c9a9a to 5b18a59CompareAugust 29, 2025 17:13
pierrejeambrun
pierrejeambrun reviewed Sep 3, 2025
View reviewed changes

@pierrejeambrunpierrejeambrun left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similarly to other filtering options, can you handle the reset filter button too?

pierrejeambrun
pierrejeambrun reviewed Sep 3, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx Outdated
@BrianLii

BrianLii commented Sep 4, 2025

Copy link
Copy Markdown
ContributorAuthor

I've also implemented the reset button, similar to the counterpart in Xcom.

RoyLee1224
RoyLee1224 reviewed Sep 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx Outdated
RoyLee1224
RoyLee1224 reviewed Sep 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx Outdated
@RoyLee1224

RoyLee1224 commented Sep 4, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

I found that AssetEventsFilter is displayed on multiple pages but only works on the Asset detail page (/assets/{id}).

Working (with proper data binding):

  • Asset detail page: /assets/{assetId}

Non-functional (shows filter UI but ignores URL parameters):

  • DAG Overview: /dags/{dagId} (overview tab)
  • Dashboard: /dashboard (HistoricalMetrics)
  • Task Asset Events: /dags/{dagId}/runs/{runId}/tasks/{taskId}/asset_events
  • DAG Run Asset Events: /dags/{dagId}/runs/{runId}/asset_events

Should the filter only be functional on the assets page? If so, perhaps we should prevent it from rendering on the other pages.

Non-functional example:

CleanShot 2025-09-04 at 14 56 58

@BrianLii

BrianLii commented Sep 5, 2025•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

I found that AssetEventsFilter is displayed on multiple pages but only works on the Asset detail page (/assets/{id}).

We could restrict the filters to only appear on /assets/{id} by adding an showFIlters prop to AssetEvents.

Support for other pages could be implemented later by extracting the API logic in AssetLayout into a reusable hook, but that can be handled in a separate PR.

@RoyLee1224

RoyLee1224 commented Sep 9, 2025

Copy link
Copy Markdown
Contributor

UI Looks good to me, nice fix 💪

@bbovenzi

bbovenzi commented Sep 10, 2025

Copy link
Copy Markdown
Contributor

Functionality looks good. Let's rebase to use the new components from #54895

bbovenzi
bbovenzi approved these changes Sep 11, 2025
View reviewed changes

@bbovenzibbovenzi left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually functionality looks good. We can update the UX in another PR

@bbovenzi
bbovenzi merged commit 9385762 into apache:mainSep 11, 2025
55 checks passed
@bbovenzibbovenzi added this to the Airflow 3.1.0 milestone Sep 11, 2025
@pierrejeambrunpierrejeambrun changed the title feat: Implemented Filters UI for Asset Viewfeat: Implemented Filters UI for Asset Events ViewSep 11, 2025
kaxil pushed a commit that referenced this pull request Sep 11, 2025
@BrianLii@bbovenzi@kaxil
feat: Implemented Filters UI for Asset View (#54640)
ad9d783
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
(cherry picked from commit 9385762)
@RoyLee1224RoyLee1224 mentioned this pull request Sep 11, 2025
Closed
5 tasks
suman-himanshu pushed a commit to suman-himanshu/airflow that referenced this pull request Sep 17, 2025
@BrianLii@bbovenzi@suman-himanshu
feat: Implemented Filters UI for Asset View (apache#54640)
7ac9b67
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
Brunda10 pushed a commit to Brunda10/airflow that referenced this pull request Sep 17, 2025
@BrianLii@bbovenzi@Brunda10
feat: Implemented Filters UI for Asset View (apache#54640)
20bcc19
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
@potiukpotiuk mentioned this pull request Nov 8, 2025
Merged
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bbovenzibbovenzibbovenzi approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@jscheffljschefflAwaiting requested review from jscheffl
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner
@guan404mingguan404mingAwaiting requested review from guan404mingguan404ming is a code owner
@RoyLee1224RoyLee1224Awaiting requested review from RoyLee1224
@pierrejeambrunpierrejeambrunAwaiting requested review from pierrejeambrunpierrejeambrun is a code owner

Assignees

No one assigned

Labels

area:UIRelated to UI/UX. For Frontend Developers.

Projects

None yet

Milestone

Airflow 3.1.0

Development

Successfully merging this pull request may close these issues.

5 participants

@BrianLii@RoyLee1224@bbovenzi@pierrejeambrun@guan404ming
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat: Implemented Filters UI for Asset Events View - #54640
Merged
bbovenzi merged 23 commits into
apache:mainfrom 
BrianLii:feat-asset-view-filter
Sep 11, 2025
Merged
feat: Implemented Filters UI for Asset Events View#54640
bbovenzi merged 23 commits into
apache:mainfrom 
BrianLii:feat-asset-view-filter
Conversation
@BrianLii
@BrianLiiBrianLii
commented
Aug 19, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Part of: #53053
This PR implements the filtering UI for viewing asset events. The filters include:
  • Timestamp -- date picker
  • DAG ID -- search bar with substring matching
  • Task ID -- search bar with substring matching
Demo:
https://github.com/user-attachments/assets/cfb496d2-fb84-4663-937c-7a61fa91526a
@boring-cyborgboring-cyborgBot
added
the 
area:UI
Related to UI/UX. For Frontend Developers.
label
Aug 19, 2025
@BrianLiiBrianLii
changed the title
feat: Implemented Filters for Asset Viewfeat: Implemented Filters UI for Asset ViewAug 21, 2025
@BrianLii
BrianLii
marked this pull request as ready for review
August 21, 2025 22:08
guan404ming
guan404ming
reviewed
Aug 25, 2025
View reviewed changes
@guan404mingguan404ming
left a comment
•

edited

Loading

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR, the direction looks good! I've left some comments on it. Also, I think there are still two things needed in this PR:
  1. need to add labels for start date and end date fields
  2. make the layout more consistent with current filters, you could take a look at this one https://github.com/apache/airflow/pull/54049/files
  3. (optional) reset filter feature is also needed (could be done in follow up one)
cc @RoyLee1224 I think you are more familiar with filter please help give it a quick look if you have time. Thanks!
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

@BrianLii
BrianLii
commented
Aug 26, 2025

Copy link


Copy Markdown

ContributorAuthor
Thanks @guan404ming for the review!

I've committed changes regarding the UI (1. and 2.) you mentioned. Below is how it looks now.
Screenshot 2025-08-25 at 8 05 28 PM
@BrianLii
BrianLiiforce-pushed
the
feat-asset-view-filter
branch
from
71c9a9a to
5b18a59CompareAugust 29, 2025 17:13
pierrejeambrun
pierrejeambrun
reviewed
Sep 3, 2025
View reviewed changes
@pierrejeambrunpierrejeambrun
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similarly to other filtering options, can you handle the reset filter button too?
pierrejeambrun
pierrejeambrun
reviewed
Sep 3, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

@BrianLii
BrianLii
commented
Sep 4, 2025

Copy link


Copy Markdown

ContributorAuthor
I've also implemented the reset button, similar to the counterpart in Xcom.
RoyLee1224
RoyLee1224
reviewed
Sep 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
Outdated

RoyLee1224
RoyLee1224
reviewed
Sep 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
Outdated

@RoyLee1224
RoyLee1224
commented
Sep 4, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
I found that AssetEventsFilter is displayed on multiple pages but only works on the Asset detail page (/assets/{id}).
Working (with proper data binding):
  • Asset detail page: /assets/{assetId}
Non-functional (shows filter UI but ignores URL parameters):
  • DAG Overview: /dags/{dagId} (overview tab)
  • Dashboard: /dashboard (HistoricalMetrics)
  • Task Asset Events: /dags/{dagId}/runs/{runId}/tasks/{taskId}/asset_events
  • DAG Run Asset Events: /dags/{dagId}/runs/{runId}/asset_events
Should the filter only be functional on the assets page? If so, perhaps we should prevent it from rendering on the other pages.
Non-functional example:
CleanShot 2025-09-04 at 14 56 58
@BrianLii
BrianLii
commented
Sep 5, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I found that AssetEventsFilter is displayed on multiple pages but only works on the Asset detail page (/assets/{id}).
We could restrict the filters to only appear on /assets/{id} by adding an showFIlters prop to AssetEvents.
Support for other pages could be implemented later by extracting the API logic in AssetLayout into a reusable hook, but that can be handled in a separate PR.
@RoyLee1224
RoyLee1224
commented
Sep 9, 2025

Copy link


Copy Markdown

Contributor
UI Looks good to me, nice fix 💪
@bbovenzi
bbovenzi
commented
Sep 10, 2025

Copy link


Copy Markdown

Contributor
Functionality looks good. Let's rebase to use the new components from #54895
bbovenzi
bbovenzi
approved these changes
Sep 11, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually functionality looks good. We can update the UX in another PR
@bbovenzi
bbovenzi
merged commit 9385762
into
apache:mainSep 11, 2025

55 checks passed

@bbovenzibbovenzi
added this to the Airflow 3.1.0 milestone
Sep 11, 2025
@pierrejeambrunpierrejeambrun
changed the title
feat: Implemented Filters UI for Asset Viewfeat: Implemented Filters UI for Asset Events ViewSep 11, 2025
kaxil pushed a commit
that referenced
this pull request
Sep 11, 2025
@BrianLii@bbovenzi@kaxil
feat: Implemented Filters UI for Asset View (#54640)
ad9d783
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
(cherry picked from commit 9385762)
@RoyLee1224RoyLee1224
mentioned this pull request
Sep 11, 2025

Closed

5 tasks
suman-himanshu pushed a commit
to suman-himanshu/airflow
that referenced
this pull request
Sep 17, 2025
@BrianLii@bbovenzi@suman-himanshu
feat: Implemented Filters UI for Asset View (apache#54640)
7ac9b67
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
Brunda10 pushed a commit
to Brunda10/airflow
that referenced
this pull request
Sep 17, 2025
@BrianLii@bbovenzi@Brunda10
feat: Implemented Filters UI for Asset View (apache#54640)
20bcc19
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
@potiukpotiuk
mentioned this pull request
Nov 8, 2025
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@bbovenzibbovenzibbovenzi approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@jscheffljschefflAwaiting requested review from jscheffl
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner
@guan404mingguan404mingAwaiting requested review from guan404mingguan404ming is a code owner
@RoyLee1224RoyLee1224Awaiting requested review from RoyLee1224
@pierrejeambrunpierrejeambrunAwaiting requested review from pierrejeambrunpierrejeambrun is a code owner

Assignees


No one assigned


Labels

area:UIRelated to UI/UX. For Frontend Developers.

Projects


None yet


Milestone

Airflow 3.1.0

Development

Successfully merging this pull request may close these issues.

5 participants

@BrianLii@RoyLee1224@bbovenzi@pierrejeambrun@guan404ming

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat: Implemented Filters UI for Asset Events View - #54640
Merged
bbovenzi merged 23 commits into
apache:mainfrom 
BrianLii:feat-asset-view-filter
Sep 11, 2025
Merged
feat: Implemented Filters UI for Asset Events View#54640
bbovenzi merged 23 commits into
apache:mainfrom 
BrianLii:feat-asset-view-filter
Conversation
@BrianLii
@BrianLiiBrianLii
commented
Aug 19, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Part of: #53053
This PR implements the filtering UI for viewing asset events. The filters include:
  • Timestamp -- date picker
  • DAG ID -- search bar with substring matching
  • Task ID -- search bar with substring matching
Demo:
https://github.com/user-attachments/assets/cfb496d2-fb84-4663-937c-7a61fa91526a
@boring-cyborgboring-cyborgBot
added
the 
area:UI
Related to UI/UX. For Frontend Developers.
label
Aug 19, 2025
@BrianLiiBrianLii
changed the title
feat: Implemented Filters for Asset Viewfeat: Implemented Filters UI for Asset ViewAug 21, 2025
@BrianLii
BrianLii
marked this pull request as ready for review
August 21, 2025 22:08
guan404ming
guan404ming
reviewed
Aug 25, 2025
View reviewed changes
@guan404mingguan404ming
left a comment
•

edited

Loading

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR, the direction looks good! I've left some comments on it. Also, I think there are still two things needed in this PR:
  1. need to add labels for start date and end date fields
  2. make the layout more consistent with current filters, you could take a look at this one https://github.com/apache/airflow/pull/54049/files
  3. (optional) reset filter feature is also needed (could be done in follow up one)
cc @RoyLee1224 I think you are more familiar with filter please help give it a quick look if you have time. Thanks!
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

@BrianLii
BrianLii
commented
Aug 26, 2025

Copy link


Copy Markdown

ContributorAuthor
Thanks @guan404ming for the review!

I've committed changes regarding the UI (1. and 2.) you mentioned. Below is how it looks now.
Screenshot 2025-08-25 at 8 05 28 PM
@BrianLii
BrianLiiforce-pushed
the
feat-asset-view-filter
branch
from
71c9a9a to
5b18a59CompareAugust 29, 2025 17:13
pierrejeambrun
pierrejeambrun
reviewed
Sep 3, 2025
View reviewed changes
@pierrejeambrunpierrejeambrun
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similarly to other filtering options, can you handle the reset filter button too?
pierrejeambrun
pierrejeambrun
reviewed
Sep 3, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

@BrianLii
BrianLii
commented
Sep 4, 2025

Copy link


Copy Markdown

ContributorAuthor
I've also implemented the reset button, similar to the counterpart in Xcom.
RoyLee1224
RoyLee1224
reviewed
Sep 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
Outdated

RoyLee1224
RoyLee1224
reviewed
Sep 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
Outdated

@RoyLee1224
RoyLee1224
commented
Sep 4, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
I found that AssetEventsFilter is displayed on multiple pages but only works on the Asset detail page (/assets/{id}).
Working (with proper data binding):
  • Asset detail page: /assets/{assetId}
Non-functional (shows filter UI but ignores URL parameters):
  • DAG Overview: /dags/{dagId} (overview tab)
  • Dashboard: /dashboard (HistoricalMetrics)
  • Task Asset Events: /dags/{dagId}/runs/{runId}/tasks/{taskId}/asset_events
  • DAG Run Asset Events: /dags/{dagId}/runs/{runId}/asset_events
Should the filter only be functional on the assets page? If so, perhaps we should prevent it from rendering on the other pages.
Non-functional example:
CleanShot 2025-09-04 at 14 56 58
@BrianLii
BrianLii
commented
Sep 5, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I found that AssetEventsFilter is displayed on multiple pages but only works on the Asset detail page (/assets/{id}).
We could restrict the filters to only appear on /assets/{id} by adding an showFIlters prop to AssetEvents.
Support for other pages could be implemented later by extracting the API logic in AssetLayout into a reusable hook, but that can be handled in a separate PR.
@RoyLee1224
RoyLee1224
commented
Sep 9, 2025

Copy link


Copy Markdown

Contributor
UI Looks good to me, nice fix 💪
@bbovenzi
bbovenzi
commented
Sep 10, 2025

Copy link


Copy Markdown

Contributor
Functionality looks good. Let's rebase to use the new components from #54895
bbovenzi
bbovenzi
approved these changes
Sep 11, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually functionality looks good. We can update the UX in another PR
@bbovenzi
bbovenzi
merged commit 9385762
into
apache:mainSep 11, 2025

55 checks passed

@bbovenzibbovenzi
added this to the Airflow 3.1.0 milestone
Sep 11, 2025
@pierrejeambrunpierrejeambrun
changed the title
feat: Implemented Filters UI for Asset Viewfeat: Implemented Filters UI for Asset Events ViewSep 11, 2025
kaxil pushed a commit
that referenced
this pull request
Sep 11, 2025
@BrianLii@bbovenzi@kaxil
feat: Implemented Filters UI for Asset View (#54640)
ad9d783
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
(cherry picked from commit 9385762)
@RoyLee1224RoyLee1224
mentioned this pull request
Sep 11, 2025

Closed

5 tasks
suman-himanshu pushed a commit
to suman-himanshu/airflow
that referenced
this pull request
Sep 17, 2025
@BrianLii@bbovenzi@suman-himanshu
feat: Implemented Filters UI for Asset View (apache#54640)
7ac9b67
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
Brunda10 pushed a commit
to Brunda10/airflow
that referenced
this pull request
Sep 17, 2025
@BrianLii@bbovenzi@Brunda10
feat: Implemented Filters UI for Asset View (apache#54640)
20bcc19
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
@potiukpotiuk
mentioned this pull request
Nov 8, 2025
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@bbovenzibbovenzibbovenzi approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@jscheffljschefflAwaiting requested review from jscheffl
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner
@guan404mingguan404mingAwaiting requested review from guan404mingguan404ming is a code owner
@RoyLee1224RoyLee1224Awaiting requested review from RoyLee1224
@pierrejeambrunpierrejeambrunAwaiting requested review from pierrejeambrunpierrejeambrun is a code owner

Assignees


No one assigned


Labels

area:UIRelated to UI/UX. For Frontend Developers.

Projects


None yet


Milestone

Airflow 3.1.0

Development

Successfully merging this pull request may close these issues.

5 participants

@BrianLii@RoyLee1224@bbovenzi@pierrejeambrun@guan404ming

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat: Implemented Filters UI for Asset Events View - #54640
Merged
bbovenzi merged 23 commits into
apache:mainfrom 
BrianLii:feat-asset-view-filter
Sep 11, 2025
Merged
feat: Implemented Filters UI for Asset Events View#54640
bbovenzi merged 23 commits into
apache:mainfrom 
BrianLii:feat-asset-view-filter
Conversation
@BrianLii
@BrianLiiBrianLii
commented
Aug 19, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Part of: #53053
This PR implements the filtering UI for viewing asset events. The filters include:
  • Timestamp -- date picker
  • DAG ID -- search bar with substring matching
  • Task ID -- search bar with substring matching
Demo:
https://github.com/user-attachments/assets/cfb496d2-fb84-4663-937c-7a61fa91526a
@boring-cyborgboring-cyborgBot
added
the 
area:UI
Related to UI/UX. For Frontend Developers.
label
Aug 19, 2025
@BrianLiiBrianLii
changed the title
feat: Implemented Filters for Asset Viewfeat: Implemented Filters UI for Asset ViewAug 21, 2025
@BrianLii
BrianLii
marked this pull request as ready for review
August 21, 2025 22:08
guan404ming
guan404ming
reviewed
Aug 25, 2025
View reviewed changes
@guan404mingguan404ming
left a comment
•

edited

Loading

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR, the direction looks good! I've left some comments on it. Also, I think there are still two things needed in this PR:
  1. need to add labels for start date and end date fields
  2. make the layout more consistent with current filters, you could take a look at this one https://github.com/apache/airflow/pull/54049/files
  3. (optional) reset filter feature is also needed (could be done in follow up one)
cc @RoyLee1224 I think you are more familiar with filter please help give it a quick look if you have time. Thanks!
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

@BrianLii
BrianLii
commented
Aug 26, 2025

Copy link


Copy Markdown

ContributorAuthor
Thanks @guan404ming for the review!

I've committed changes regarding the UI (1. and 2.) you mentioned. Below is how it looks now.
Screenshot 2025-08-25 at 8 05 28 PM
@BrianLii
BrianLiiforce-pushed
the
feat-asset-view-filter
branch
from
71c9a9a to
5b18a59CompareAugust 29, 2025 17:13
pierrejeambrun
pierrejeambrun
reviewed
Sep 3, 2025
View reviewed changes
@pierrejeambrunpierrejeambrun
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similarly to other filtering options, can you handle the reset filter button too?
pierrejeambrun
pierrejeambrun
reviewed
Sep 3, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

@BrianLii
BrianLii
commented
Sep 4, 2025

Copy link


Copy Markdown

ContributorAuthor
I've also implemented the reset button, similar to the counterpart in Xcom.
RoyLee1224
RoyLee1224
reviewed
Sep 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
Outdated

RoyLee1224
RoyLee1224
reviewed
Sep 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
Outdated

@RoyLee1224
RoyLee1224
commented
Sep 4, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
I found that AssetEventsFilter is displayed on multiple pages but only works on the Asset detail page (/assets/{id}).
Working (with proper data binding):
  • Asset detail page: /assets/{assetId}
Non-functional (shows filter UI but ignores URL parameters):
  • DAG Overview: /dags/{dagId} (overview tab)
  • Dashboard: /dashboard (HistoricalMetrics)
  • Task Asset Events: /dags/{dagId}/runs/{runId}/tasks/{taskId}/asset_events
  • DAG Run Asset Events: /dags/{dagId}/runs/{runId}/asset_events
Should the filter only be functional on the assets page? If so, perhaps we should prevent it from rendering on the other pages.
Non-functional example:
CleanShot 2025-09-04 at 14 56 58
@BrianLii
BrianLii
commented
Sep 5, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I found that AssetEventsFilter is displayed on multiple pages but only works on the Asset detail page (/assets/{id}).
We could restrict the filters to only appear on /assets/{id} by adding an showFIlters prop to AssetEvents.
Support for other pages could be implemented later by extracting the API logic in AssetLayout into a reusable hook, but that can be handled in a separate PR.
@RoyLee1224
RoyLee1224
commented
Sep 9, 2025

Copy link


Copy Markdown

Contributor
UI Looks good to me, nice fix 💪
@bbovenzi
bbovenzi
commented
Sep 10, 2025

Copy link


Copy Markdown

Contributor
Functionality looks good. Let's rebase to use the new components from #54895
bbovenzi
bbovenzi
approved these changes
Sep 11, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually functionality looks good. We can update the UX in another PR
@bbovenzi
bbovenzi
merged commit 9385762
into
apache:mainSep 11, 2025

55 checks passed

@bbovenzibbovenzi
added this to the Airflow 3.1.0 milestone
Sep 11, 2025
@pierrejeambrunpierrejeambrun
changed the title
feat: Implemented Filters UI for Asset Viewfeat: Implemented Filters UI for Asset Events ViewSep 11, 2025
kaxil pushed a commit
that referenced
this pull request
Sep 11, 2025
@BrianLii@bbovenzi@kaxil
feat: Implemented Filters UI for Asset View (#54640)
ad9d783
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
(cherry picked from commit 9385762)
@RoyLee1224RoyLee1224
mentioned this pull request
Sep 11, 2025

Closed

5 tasks
suman-himanshu pushed a commit
to suman-himanshu/airflow
that referenced
this pull request
Sep 17, 2025
@BrianLii@bbovenzi@suman-himanshu
feat: Implemented Filters UI for Asset View (apache#54640)
7ac9b67
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
Brunda10 pushed a commit
to Brunda10/airflow
that referenced
this pull request
Sep 17, 2025
@BrianLii@bbovenzi@Brunda10
feat: Implemented Filters UI for Asset View (apache#54640)
20bcc19
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
@potiukpotiuk
mentioned this pull request
Nov 8, 2025
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@bbovenzibbovenzibbovenzi approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@jscheffljschefflAwaiting requested review from jscheffl
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner
@guan404mingguan404mingAwaiting requested review from guan404mingguan404ming is a code owner
@RoyLee1224RoyLee1224Awaiting requested review from RoyLee1224
@pierrejeambrunpierrejeambrunAwaiting requested review from pierrejeambrunpierrejeambrun is a code owner

Assignees


No one assigned


Labels

area:UIRelated to UI/UX. For Frontend Developers.

Projects


None yet


Milestone

Airflow 3.1.0

Development

Successfully merging this pull request may close these issues.

5 participants

@BrianLii@RoyLee1224@bbovenzi@pierrejeambrun@guan404ming

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat: Implemented Filters UI for Asset Events View - #54640
Merged
bbovenzi merged 23 commits into
apache:mainfrom 
BrianLii:feat-asset-view-filter
Sep 11, 2025
Merged
feat: Implemented Filters UI for Asset Events View#54640
bbovenzi merged 23 commits into
apache:mainfrom 
BrianLii:feat-asset-view-filter
Conversation
@BrianLii
@BrianLiiBrianLii
commented
Aug 19, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Part of: #53053
This PR implements the filtering UI for viewing asset events. The filters include:
  • Timestamp -- date picker
  • DAG ID -- search bar with substring matching
  • Task ID -- search bar with substring matching
Demo:
https://github.com/user-attachments/assets/cfb496d2-fb84-4663-937c-7a61fa91526a
@boring-cyborgboring-cyborgBot
added
the 
area:UI
Related to UI/UX. For Frontend Developers.
label
Aug 19, 2025
@BrianLiiBrianLii
changed the title
feat: Implemented Filters for Asset Viewfeat: Implemented Filters UI for Asset ViewAug 21, 2025
@BrianLii
BrianLii
marked this pull request as ready for review
August 21, 2025 22:08
guan404ming
guan404ming
reviewed
Aug 25, 2025
View reviewed changes
@guan404mingguan404ming
left a comment
•

edited

Loading

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR, the direction looks good! I've left some comments on it. Also, I think there are still two things needed in this PR:
  1. need to add labels for start date and end date fields
  2. make the layout more consistent with current filters, you could take a look at this one https://github.com/apache/airflow/pull/54049/files
  3. (optional) reset filter feature is also needed (could be done in follow up one)
cc @RoyLee1224 I think you are more familiar with filter please help give it a quick look if you have time. Thanks!
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

@BrianLii
BrianLii
commented
Aug 26, 2025

Copy link


Copy Markdown

ContributorAuthor
Thanks @guan404ming for the review!

I've committed changes regarding the UI (1. and 2.) you mentioned. Below is how it looks now.
Screenshot 2025-08-25 at 8 05 28 PM
@BrianLii
BrianLiiforce-pushed
the
feat-asset-view-filter
branch
from
71c9a9a to
5b18a59CompareAugust 29, 2025 17:13
pierrejeambrun
pierrejeambrun
reviewed
Sep 3, 2025
View reviewed changes
@pierrejeambrunpierrejeambrun
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similarly to other filtering options, can you handle the reset filter button too?
pierrejeambrun
pierrejeambrun
reviewed
Sep 3, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

@BrianLii
BrianLii
commented
Sep 4, 2025

Copy link


Copy Markdown

ContributorAuthor
I've also implemented the reset button, similar to the counterpart in Xcom.
RoyLee1224
RoyLee1224
reviewed
Sep 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
Outdated

RoyLee1224
RoyLee1224
reviewed
Sep 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
Outdated

@RoyLee1224
RoyLee1224
commented
Sep 4, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
I found that AssetEventsFilter is displayed on multiple pages but only works on the Asset detail page (/assets/{id}).
Working (with proper data binding):
  • Asset detail page: /assets/{assetId}
Non-functional (shows filter UI but ignores URL parameters):
  • DAG Overview: /dags/{dagId} (overview tab)
  • Dashboard: /dashboard (HistoricalMetrics)
  • Task Asset Events: /dags/{dagId}/runs/{runId}/tasks/{taskId}/asset_events
  • DAG Run Asset Events: /dags/{dagId}/runs/{runId}/asset_events
Should the filter only be functional on the assets page? If so, perhaps we should prevent it from rendering on the other pages.
Non-functional example:
CleanShot 2025-09-04 at 14 56 58
@BrianLii
BrianLii
commented
Sep 5, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I found that AssetEventsFilter is displayed on multiple pages but only works on the Asset detail page (/assets/{id}).
We could restrict the filters to only appear on /assets/{id} by adding an showFIlters prop to AssetEvents.
Support for other pages could be implemented later by extracting the API logic in AssetLayout into a reusable hook, but that can be handled in a separate PR.
@RoyLee1224
RoyLee1224
commented
Sep 9, 2025

Copy link


Copy Markdown

Contributor
UI Looks good to me, nice fix 💪
@bbovenzi
bbovenzi
commented
Sep 10, 2025

Copy link


Copy Markdown

Contributor
Functionality looks good. Let's rebase to use the new components from #54895
bbovenzi
bbovenzi
approved these changes
Sep 11, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually functionality looks good. We can update the UX in another PR
@bbovenzi
bbovenzi
merged commit 9385762
into
apache:mainSep 11, 2025

55 checks passed

@bbovenzibbovenzi
added this to the Airflow 3.1.0 milestone
Sep 11, 2025
@pierrejeambrunpierrejeambrun
changed the title
feat: Implemented Filters UI for Asset Viewfeat: Implemented Filters UI for Asset Events ViewSep 11, 2025
kaxil pushed a commit
that referenced
this pull request
Sep 11, 2025
@BrianLii@bbovenzi@kaxil
feat: Implemented Filters UI for Asset View (#54640)
ad9d783
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
(cherry picked from commit 9385762)
@RoyLee1224RoyLee1224
mentioned this pull request
Sep 11, 2025

Closed

5 tasks
suman-himanshu pushed a commit
to suman-himanshu/airflow
that referenced
this pull request
Sep 17, 2025
@BrianLii@bbovenzi@suman-himanshu
feat: Implemented Filters UI for Asset View (apache#54640)
7ac9b67
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
Brunda10 pushed a commit
to Brunda10/airflow
that referenced
this pull request
Sep 17, 2025
@BrianLii@bbovenzi@Brunda10
feat: Implemented Filters UI for Asset View (apache#54640)
20bcc19
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
@potiukpotiuk
mentioned this pull request
Nov 8, 2025
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@bbovenzibbovenzibbovenzi approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@jscheffljschefflAwaiting requested review from jscheffl
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner
@guan404mingguan404mingAwaiting requested review from guan404mingguan404ming is a code owner
@RoyLee1224RoyLee1224Awaiting requested review from RoyLee1224
@pierrejeambrunpierrejeambrunAwaiting requested review from pierrejeambrunpierrejeambrun is a code owner

Assignees


No one assigned


Labels

area:UIRelated to UI/UX. For Frontend Developers.

Projects


None yet


Milestone

Airflow 3.1.0

Development

Successfully merging this pull request may close these issues.

5 participants

@BrianLii@RoyLee1224@bbovenzi@pierrejeambrun@guan404ming

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat: Implemented Filters UI for Asset Events View - #54640
Merged
bbovenzi merged 23 commits into
apache:mainfrom 
BrianLii:feat-asset-view-filter
Sep 11, 2025
Merged
feat: Implemented Filters UI for Asset Events View#54640
bbovenzi merged 23 commits into
apache:mainfrom 
BrianLii:feat-asset-view-filter
Conversation
@BrianLii
@BrianLiiBrianLii
commented
Aug 19, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Part of: #53053
This PR implements the filtering UI for viewing asset events. The filters include:
  • Timestamp -- date picker
  • DAG ID -- search bar with substring matching
  • Task ID -- search bar with substring matching
Demo:
https://github.com/user-attachments/assets/cfb496d2-fb84-4663-937c-7a61fa91526a
@boring-cyborgboring-cyborgBot
added
the 
area:UI
Related to UI/UX. For Frontend Developers.
label
Aug 19, 2025
@BrianLiiBrianLii
changed the title
feat: Implemented Filters for Asset Viewfeat: Implemented Filters UI for Asset ViewAug 21, 2025
@BrianLii
BrianLii
marked this pull request as ready for review
August 21, 2025 22:08
guan404ming
guan404ming
reviewed
Aug 25, 2025
View reviewed changes
@guan404mingguan404ming
left a comment
•

edited

Loading

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR, the direction looks good! I've left some comments on it. Also, I think there are still two things needed in this PR:
  1. need to add labels for start date and end date fields
  2. make the layout more consistent with current filters, you could take a look at this one https://github.com/apache/airflow/pull/54049/files
  3. (optional) reset filter feature is also needed (could be done in follow up one)
cc @RoyLee1224 I think you are more familiar with filter please help give it a quick look if you have time. Thanks!
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

@BrianLii
BrianLii
commented
Aug 26, 2025

Copy link


Copy Markdown

ContributorAuthor
Thanks @guan404ming for the review!

I've committed changes regarding the UI (1. and 2.) you mentioned. Below is how it looks now.
Screenshot 2025-08-25 at 8 05 28 PM
@BrianLii
BrianLiiforce-pushed
the
feat-asset-view-filter
branch
from
71c9a9a to
5b18a59CompareAugust 29, 2025 17:13
pierrejeambrun
pierrejeambrun
reviewed
Sep 3, 2025
View reviewed changes
@pierrejeambrunpierrejeambrun
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similarly to other filtering options, can you handle the reset filter button too?
pierrejeambrun
pierrejeambrun
reviewed
Sep 3, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

@BrianLii
BrianLii
commented
Sep 4, 2025

Copy link


Copy Markdown

ContributorAuthor
I've also implemented the reset button, similar to the counterpart in Xcom.
RoyLee1224
RoyLee1224
reviewed
Sep 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
Outdated

RoyLee1224
RoyLee1224
reviewed
Sep 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
Outdated

@RoyLee1224
RoyLee1224
commented
Sep 4, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
I found that AssetEventsFilter is displayed on multiple pages but only works on the Asset detail page (/assets/{id}).
Working (with proper data binding):
  • Asset detail page: /assets/{assetId}
Non-functional (shows filter UI but ignores URL parameters):
  • DAG Overview: /dags/{dagId} (overview tab)
  • Dashboard: /dashboard (HistoricalMetrics)
  • Task Asset Events: /dags/{dagId}/runs/{runId}/tasks/{taskId}/asset_events
  • DAG Run Asset Events: /dags/{dagId}/runs/{runId}/asset_events
Should the filter only be functional on the assets page? If so, perhaps we should prevent it from rendering on the other pages.
Non-functional example:
CleanShot 2025-09-04 at 14 56 58
@BrianLii
BrianLii
commented
Sep 5, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I found that AssetEventsFilter is displayed on multiple pages but only works on the Asset detail page (/assets/{id}).
We could restrict the filters to only appear on /assets/{id} by adding an showFIlters prop to AssetEvents.
Support for other pages could be implemented later by extracting the API logic in AssetLayout into a reusable hook, but that can be handled in a separate PR.
@RoyLee1224
RoyLee1224
commented
Sep 9, 2025

Copy link


Copy Markdown

Contributor
UI Looks good to me, nice fix 💪
@bbovenzi
bbovenzi
commented
Sep 10, 2025

Copy link


Copy Markdown

Contributor
Functionality looks good. Let's rebase to use the new components from #54895
bbovenzi
bbovenzi
approved these changes
Sep 11, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually functionality looks good. We can update the UX in another PR
@bbovenzi
bbovenzi
merged commit 9385762
into
apache:mainSep 11, 2025

55 checks passed

@bbovenzibbovenzi
added this to the Airflow 3.1.0 milestone
Sep 11, 2025
@pierrejeambrunpierrejeambrun
changed the title
feat: Implemented Filters UI for Asset Viewfeat: Implemented Filters UI for Asset Events ViewSep 11, 2025
kaxil pushed a commit
that referenced
this pull request
Sep 11, 2025
@BrianLii@bbovenzi@kaxil
feat: Implemented Filters UI for Asset View (#54640)
ad9d783
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
(cherry picked from commit 9385762)
@RoyLee1224RoyLee1224
mentioned this pull request
Sep 11, 2025

Closed

5 tasks
suman-himanshu pushed a commit
to suman-himanshu/airflow
that referenced
this pull request
Sep 17, 2025
@BrianLii@bbovenzi@suman-himanshu
feat: Implemented Filters UI for Asset View (apache#54640)
7ac9b67
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
Brunda10 pushed a commit
to Brunda10/airflow
that referenced
this pull request
Sep 17, 2025
@BrianLii@bbovenzi@Brunda10
feat: Implemented Filters UI for Asset View (apache#54640)
20bcc19
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
@potiukpotiuk
mentioned this pull request
Nov 8, 2025
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@bbovenzibbovenzibbovenzi approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@jscheffljschefflAwaiting requested review from jscheffl
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner
@guan404mingguan404mingAwaiting requested review from guan404mingguan404ming is a code owner
@RoyLee1224RoyLee1224Awaiting requested review from RoyLee1224
@pierrejeambrunpierrejeambrunAwaiting requested review from pierrejeambrunpierrejeambrun is a code owner

Assignees


No one assigned


Labels

area:UIRelated to UI/UX. For Frontend Developers.

Projects


None yet


Milestone

Airflow 3.1.0

Development

Successfully merging this pull request may close these issues.

5 participants

@BrianLii@RoyLee1224@bbovenzi@pierrejeambrun@guan404ming

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat: Implemented Filters UI for Asset Events View - #54640
Merged
bbovenzi merged 23 commits into
apache:mainfrom 
BrianLii:feat-asset-view-filter
Sep 11, 2025
Merged
feat: Implemented Filters UI for Asset Events View#54640
bbovenzi merged 23 commits into
apache:mainfrom 
BrianLii:feat-asset-view-filter
Conversation
@BrianLii
@BrianLiiBrianLii
commented
Aug 19, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Part of: #53053
This PR implements the filtering UI for viewing asset events. The filters include:
  • Timestamp -- date picker
  • DAG ID -- search bar with substring matching
  • Task ID -- search bar with substring matching
Demo:
https://github.com/user-attachments/assets/cfb496d2-fb84-4663-937c-7a61fa91526a
@boring-cyborgboring-cyborgBot
added
the 
area:UI
Related to UI/UX. For Frontend Developers.
label
Aug 19, 2025
@BrianLiiBrianLii
changed the title
feat: Implemented Filters for Asset Viewfeat: Implemented Filters UI for Asset ViewAug 21, 2025
@BrianLii
BrianLii
marked this pull request as ready for review
August 21, 2025 22:08
guan404ming
guan404ming
reviewed
Aug 25, 2025
View reviewed changes
@guan404mingguan404ming
left a comment
•

edited

Loading

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR, the direction looks good! I've left some comments on it. Also, I think there are still two things needed in this PR:
  1. need to add labels for start date and end date fields
  2. make the layout more consistent with current filters, you could take a look at this one https://github.com/apache/airflow/pull/54049/files
  3. (optional) reset filter feature is also needed (could be done in follow up one)
cc @RoyLee1224 I think you are more familiar with filter please help give it a quick look if you have time. Thanks!
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

@BrianLii
BrianLii
commented
Aug 26, 2025

Copy link


Copy Markdown

ContributorAuthor
Thanks @guan404ming for the review!

I've committed changes regarding the UI (1. and 2.) you mentioned. Below is how it looks now.
Screenshot 2025-08-25 at 8 05 28 PM
@BrianLii
BrianLiiforce-pushed
the
feat-asset-view-filter
branch
from
71c9a9a to
5b18a59CompareAugust 29, 2025 17:13
pierrejeambrun
pierrejeambrun
reviewed
Sep 3, 2025
View reviewed changes
@pierrejeambrunpierrejeambrun
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similarly to other filtering options, can you handle the reset filter button too?
pierrejeambrun
pierrejeambrun
reviewed
Sep 3, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

@BrianLii
BrianLii
commented
Sep 4, 2025

Copy link


Copy Markdown

ContributorAuthor
I've also implemented the reset button, similar to the counterpart in Xcom.
RoyLee1224
RoyLee1224
reviewed
Sep 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
Outdated

RoyLee1224
RoyLee1224
reviewed
Sep 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
Outdated

@RoyLee1224
RoyLee1224
commented
Sep 4, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
I found that AssetEventsFilter is displayed on multiple pages but only works on the Asset detail page (/assets/{id}).
Working (with proper data binding):
  • Asset detail page: /assets/{assetId}
Non-functional (shows filter UI but ignores URL parameters):
  • DAG Overview: /dags/{dagId} (overview tab)
  • Dashboard: /dashboard (HistoricalMetrics)
  • Task Asset Events: /dags/{dagId}/runs/{runId}/tasks/{taskId}/asset_events
  • DAG Run Asset Events: /dags/{dagId}/runs/{runId}/asset_events
Should the filter only be functional on the assets page? If so, perhaps we should prevent it from rendering on the other pages.
Non-functional example:
CleanShot 2025-09-04 at 14 56 58
@BrianLii
BrianLii
commented
Sep 5, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I found that AssetEventsFilter is displayed on multiple pages but only works on the Asset detail page (/assets/{id}).
We could restrict the filters to only appear on /assets/{id} by adding an showFIlters prop to AssetEvents.
Support for other pages could be implemented later by extracting the API logic in AssetLayout into a reusable hook, but that can be handled in a separate PR.
@RoyLee1224
RoyLee1224
commented
Sep 9, 2025

Copy link


Copy Markdown

Contributor
UI Looks good to me, nice fix 💪
@bbovenzi
bbovenzi
commented
Sep 10, 2025

Copy link


Copy Markdown

Contributor
Functionality looks good. Let's rebase to use the new components from #54895
bbovenzi
bbovenzi
approved these changes
Sep 11, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually functionality looks good. We can update the UX in another PR
@bbovenzi
bbovenzi
merged commit 9385762
into
apache:mainSep 11, 2025

55 checks passed

@bbovenzibbovenzi
added this to the Airflow 3.1.0 milestone
Sep 11, 2025
@pierrejeambrunpierrejeambrun
changed the title
feat: Implemented Filters UI for Asset Viewfeat: Implemented Filters UI for Asset Events ViewSep 11, 2025
kaxil pushed a commit
that referenced
this pull request
Sep 11, 2025
@BrianLii@bbovenzi@kaxil
feat: Implemented Filters UI for Asset View (#54640)
ad9d783
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
(cherry picked from commit 9385762)
@RoyLee1224RoyLee1224
mentioned this pull request
Sep 11, 2025

Closed

5 tasks
suman-himanshu pushed a commit
to suman-himanshu/airflow
that referenced
this pull request
Sep 17, 2025
@BrianLii@bbovenzi@suman-himanshu
feat: Implemented Filters UI for Asset View (apache#54640)
7ac9b67
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
Brunda10 pushed a commit
to Brunda10/airflow
that referenced
this pull request
Sep 17, 2025
@BrianLii@bbovenzi@Brunda10
feat: Implemented Filters UI for Asset View (apache#54640)
20bcc19
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
@potiukpotiuk
mentioned this pull request
Nov 8, 2025
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@bbovenzibbovenzibbovenzi approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@jscheffljschefflAwaiting requested review from jscheffl
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner
@guan404mingguan404mingAwaiting requested review from guan404mingguan404ming is a code owner
@RoyLee1224RoyLee1224Awaiting requested review from RoyLee1224
@pierrejeambrunpierrejeambrunAwaiting requested review from pierrejeambrunpierrejeambrun is a code owner

Assignees


No one assigned


Labels

area:UIRelated to UI/UX. For Frontend Developers.

Projects


None yet


Milestone

Airflow 3.1.0

Development

Successfully merging this pull request may close these issues.

5 participants

@BrianLii@RoyLee1224@bbovenzi@pierrejeambrun@guan404ming

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat: Implemented Filters UI for Asset Events View - #54640
Merged
bbovenzi merged 23 commits into
apache:mainfrom 
BrianLii:feat-asset-view-filter
Sep 11, 2025
Merged
feat: Implemented Filters UI for Asset Events View#54640
bbovenzi merged 23 commits into
apache:mainfrom 
BrianLii:feat-asset-view-filter
Conversation
@BrianLii
@BrianLiiBrianLii
commented
Aug 19, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Part of: #53053
This PR implements the filtering UI for viewing asset events. The filters include:
  • Timestamp -- date picker
  • DAG ID -- search bar with substring matching
  • Task ID -- search bar with substring matching
Demo:
https://github.com/user-attachments/assets/cfb496d2-fb84-4663-937c-7a61fa91526a
@boring-cyborgboring-cyborgBot
added
the 
area:UI
Related to UI/UX. For Frontend Developers.
label
Aug 19, 2025
@BrianLiiBrianLii
changed the title
feat: Implemented Filters for Asset Viewfeat: Implemented Filters UI for Asset ViewAug 21, 2025
@BrianLii
BrianLii
marked this pull request as ready for review
August 21, 2025 22:08
guan404ming
guan404ming
reviewed
Aug 25, 2025
View reviewed changes
@guan404mingguan404ming
left a comment
•

edited

Loading

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR, the direction looks good! I've left some comments on it. Also, I think there are still two things needed in this PR:
  1. need to add labels for start date and end date fields
  2. make the layout more consistent with current filters, you could take a look at this one https://github.com/apache/airflow/pull/54049/files
  3. (optional) reset filter feature is also needed (could be done in follow up one)
cc @RoyLee1224 I think you are more familiar with filter please help give it a quick look if you have time. Thanks!
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

@BrianLii
BrianLii
commented
Aug 26, 2025

Copy link


Copy Markdown

ContributorAuthor
Thanks @guan404ming for the review!

I've committed changes regarding the UI (1. and 2.) you mentioned. Below is how it looks now.
Screenshot 2025-08-25 at 8 05 28 PM
@BrianLii
BrianLiiforce-pushed
the
feat-asset-view-filter
branch
from
71c9a9a to
5b18a59CompareAugust 29, 2025 17:13
pierrejeambrun
pierrejeambrun
reviewed
Sep 3, 2025
View reviewed changes
@pierrejeambrunpierrejeambrun
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similarly to other filtering options, can you handle the reset filter button too?
pierrejeambrun
pierrejeambrun
reviewed
Sep 3, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
Outdated

@BrianLii
BrianLii
commented
Sep 4, 2025

Copy link


Copy Markdown

ContributorAuthor
I've also implemented the reset button, similar to the counterpart in Xcom.
RoyLee1224
RoyLee1224
reviewed
Sep 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
Outdated

RoyLee1224
RoyLee1224
reviewed
Sep 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
Outdated

@RoyLee1224
RoyLee1224
commented
Sep 4, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
I found that AssetEventsFilter is displayed on multiple pages but only works on the Asset detail page (/assets/{id}).
Working (with proper data binding):
  • Asset detail page: /assets/{assetId}
Non-functional (shows filter UI but ignores URL parameters):
  • DAG Overview: /dags/{dagId} (overview tab)
  • Dashboard: /dashboard (HistoricalMetrics)
  • Task Asset Events: /dags/{dagId}/runs/{runId}/tasks/{taskId}/asset_events
  • DAG Run Asset Events: /dags/{dagId}/runs/{runId}/asset_events
Should the filter only be functional on the assets page? If so, perhaps we should prevent it from rendering on the other pages.
Non-functional example:
CleanShot 2025-09-04 at 14 56 58
@BrianLii
BrianLii
commented
Sep 5, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I found that AssetEventsFilter is displayed on multiple pages but only works on the Asset detail page (/assets/{id}).
We could restrict the filters to only appear on /assets/{id} by adding an showFIlters prop to AssetEvents.
Support for other pages could be implemented later by extracting the API logic in AssetLayout into a reusable hook, but that can be handled in a separate PR.
@RoyLee1224
RoyLee1224
commented
Sep 9, 2025

Copy link


Copy Markdown

Contributor
UI Looks good to me, nice fix 💪
@bbovenzi
bbovenzi
commented
Sep 10, 2025

Copy link


Copy Markdown

Contributor
Functionality looks good. Let's rebase to use the new components from #54895
bbovenzi
bbovenzi
approved these changes
Sep 11, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually functionality looks good. We can update the UX in another PR
@bbovenzi
bbovenzi
merged commit 9385762
into
apache:mainSep 11, 2025

55 checks passed

@bbovenzibbovenzi
added this to the Airflow 3.1.0 milestone
Sep 11, 2025
@pierrejeambrunpierrejeambrun
changed the title
feat: Implemented Filters UI for Asset Viewfeat: Implemented Filters UI for Asset Events ViewSep 11, 2025
kaxil pushed a commit
that referenced
this pull request
Sep 11, 2025
@BrianLii@bbovenzi@kaxil
feat: Implemented Filters UI for Asset View (#54640)
ad9d783
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
(cherry picked from commit 9385762)
@RoyLee1224RoyLee1224
mentioned this pull request
Sep 11, 2025

Closed

5 tasks
suman-himanshu pushed a commit
to suman-himanshu/airflow
that referenced
this pull request
Sep 17, 2025
@BrianLii@bbovenzi@suman-himanshu
feat: Implemented Filters UI for Asset View (apache#54640)
7ac9b67
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
Brunda10 pushed a commit
to Brunda10/airflow
that referenced
this pull request
Sep 17, 2025
@BrianLii@bbovenzi@Brunda10
feat: Implemented Filters UI for Asset View (apache#54640)
20bcc19
* feat: implemented filter timestamp
* refactor: minor
* feat: remove key for the date input
* feat: add run and dag filter
* feat: add selector for run type
* fix: fix translation for selector label
* fix: add empty option in the selector
* refactor: move filter variables to utils
* fix: bug of total_entries
* feat: add label
* feat: beautify UI
* feat: add label for searchbar
* feat: use backend filter
* feat: move filter components to AssetEventsFilter
* feat: add reset button
* fix: remove unused translation package
* fix: remove unused translation package
* feat: update reset ui
* refactor: adjust the order of variables
* refactor: move paramkeys to global
* feat: conditionally render filter
* refactor: rename showFilters
---------
Co-authored-by: Brent Bovenzi <brent@astronomer.io>
@potiukpotiuk
mentioned this pull request
Nov 8, 2025
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@bbovenzibbovenzibbovenzi approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@jscheffljschefflAwaiting requested review from jscheffl
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner
@guan404mingguan404mingAwaiting requested review from guan404mingguan404ming is a code owner
@RoyLee1224RoyLee1224Awaiting requested review from RoyLee1224
@pierrejeambrunpierrejeambrunAwaiting requested review from pierrejeambrunpierrejeambrun is a code owner

Assignees


No one assigned


Labels

area:UIRelated to UI/UX. For Frontend Developers.

Projects


None yet


Milestone

Airflow 3.1.0

Development

Successfully merging this pull request may close these issues.

5 participants

@BrianLii@RoyLee1224@bbovenzi@pierrejeambrun@guan404ming