Display static asset metadata (extra) in Asset details page

[Lohith625]

---

Description

This PR adds a new section in the Asset Details page to display the Additional Data (asset.extra) associated with each asset.
This enhancement allows users to easily view contextual information (such as owner, path, or other custom fields) defined alongside the asset.

Before

• Additional data (asset.extra) was not visible in the UI.

• Users had no way to inspect the additional information stored with each asset.

After

• Added an "Additional Data" section below the asset header on the Asset Details page.

• The additional data is displayed as a formatted JSON block, consistent with how asset_event.extra is shown.

• Added i18n translation support by including the "additional_data" key in all locale assets.json files.

Screenshots

Before

(No section for Additional data)

After

Additional data is now clearly visible:

Implementation Details

• Updated file:
  airflow-core/src/airflow/ui/src/pages/Asset/AssetLayout.tsx

• Added i18n key "additional_data" to all locale files under:
  airflow-core/src/airflow/ui/public/i18n/locales/*/assets.json

• Verified in Breeze dev mode using:
  breeze start-airflow --dev-mode

• Tested with sample assets having additional data

Summary

This improvement enhances the clarity and usability of the Airflow UI by displaying Additional Data directly within the Asset Details page, ensuring consistency with how asset events are represented.

[Lohith625]

Hi 👋, I wanted to mention that I wasn’t able to fully run the UI locally due to environment limitations,
but I verified that the code builds successfully with npm run build.
The change only adds a conditional block to display asset.extra metadata in the Asset Details page.

I’d really appreciate any guidance or help verifying the UI behavior.
Thank you!

[jscheffl]

Running locally especially for UI changes is important. Can you tell us whether it is your PC as environment or do you have struggles in getting development environment working?

Alongside of UI changes it is also always good to post a "Before" and "After" screenshot, that makes reviews easier.

[Lohith625]

Hi @jscheffl 👋

Thanks for following up!

I tried setting up the full UI environment locally to test the change but ran into some issues.

Here’s what I’ve done so far:

Installed and configured Breeze successfully.

Ran breeze start-airflow — backend services started fine.

In another terminal, I ran npm run dev inside airflow-core/src/airflow/ui.

Both commands started successfully, but when I opened the localhost links (e.g., http://localhost:8080 and the Vite dev port like 5173), the pages were blank (no UI rendered).
I also tried breeze compile-ui-assets and restarting Breeze, but the result was the same.

After that, I tried a separate docker-compose setup (with an .env file and Airflow folder).
That one started fine, but I realized it’s the demo environment using prebuilt images — so my local UI changes didn’t appear there.

The UI build (npm run build) completes successfully, so I think my frontend code is fine — I’m just struggling to get the dev environment to render the UI.

Could you please help me understand what I might be missing, or if there’s a specific step to make the frontend appear correctly when using Breeze?

Any guidance would mean a lot 🙏

[potiuk]

You should use breeze start-airflow --dev-mode -> that's all that you need to develop UI in "development mode" - it will automatically start vite and what's needed in the dev mode, rebuilding assets when needed, enabling debugging etc.

[Lee-W]

Related to #55200. I guess @uranusjr might be interested in this one?

I just ran locally. Looks good to me

[uranusjr]

I want to deprecate and remove it, but as long as the value is there (it will be until Airflow 4) it should be shown in the UI. Looks like the implementation hides it when the extra is empty so I’m fine with this.

Instead of just plain JSON, should we show the dict as a table instead? (What do we do for AssetEvent.extra?)

[Lee-W]

I want to deprecate and remove it, but as long as the value is there (it will be until Airflow 4) it should be shown in the UI. Looks like the implementation hides it when the extra is empty so I’m fine with this.

Instead of just plain JSON, should we show the dict as a table instead? (What do we do for AssetEvent.extra?)

both json at this moment. but table sounds to be a good idea

[guan404ming]

Please add this in airflow-core/src/airflow/ui/public/i18n/locales/en since we have i18n support.

[Lohith625]

Thanks @Lee-W, @uranusjr, and @guan404ming for reviewing this!
I’ll make the requested updates (i18n addition and table formatting for extra).

[uranusjr]

IMO asset extra and asset event extra should be displayed in the same way. Since the latter is JSON now, the former should be JSON too.

Let’s get this done first, and then work on changing both to tables (if viable).

[Lohith625]

Thanks @uranusjr! Got it — I’ll keep the asset.extra displayed as JSON for now to stay consistent with asset_event.extra.
Once this is merged, we can follow up later to explore the table formatting for both.

[Lee-W]

Suggested change

	{translate("assets:static_asset_metadata")}
	{translate("assets:additional_data")}

maybe let's try additional data? the reason why I don't want to use extra is because of #55200, but suggestion is welcome. Naming is hard 🤯

[Lohith625]

Thanks, @Lee-W — that makes sense! I’ve updated the label to use Additional Data to stay consistent with the naming direction and avoid confusion with extra. 👍

[Lohith625]

Thanks so much @Lee-W, @uranusjr, @guan404ming, @jscheffl, and @potiuk for all your guidance and patience throughout this PR 🙏

I finally got the development environment fully working locally (with both assets and DAGs loaded!) and verified that the static asset metadata — now labeled as “Additional Data” — renders correctly in the UI.

I’ve also added the i18n translations across all locale files and ensured all static and formatting checks pass successfully ✅

I’ve updated the PR description with the latest details and added before/after screenshots for better clarity.

If any further changes or refinements are needed, please let me know — I’m happy to make updates.

Really appreciate all your support and feedback — this has been an incredible learning experience so far! 😊

[potiuk]

Looks like there are unrelated (language) changes here. The PR should likely be rebased to latest main and those changes removed.