Datasets UI Improvements

[bbovenzi]

In anticipation of Dataset Aliases, the Datasets page is getting a refresh. What really matters are events, so this update allows us to emphasize Dataset Events and sets us up to show more event details in the future.

Most notably,

• add a Dataset Events list to show all dataset events across all datasets
• the dataset events was changed from a table to a list of cards with more richly displayed information (source, downstream runs, extra)
• show dataset events, details, datasets list and the graph in separate tabs vs trying to squeeze everything into one view
• new breadcrumb to show if a dataset is selected (later on we will allow users to select dataset events)
• Richer dataset details (extra, consuming dags, producing tasks)

DAG details also using the new dataset event cards:

---

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in newsfragments.

[vatsrahul1001]

@bbovenzi can we have a scroll in the list of cards showing dataset events extra? Also spacing between source and extras increases as we increase num of extra

Screen.Recording.2024-07-22.at.4.31.08.PM.mov

[vatsrahul1001]

@bbovenzi is it possible to provide DAG run id link in source and triggered

[jscheffl]

Inspected code - unfortunately I am not to deep into React code and in Datasets... but did a manual check, looks like working as expected.

[bbovenzi]

@bbovenzi can we have a scroll in the list of cards showing dataset events extra? Also spacing between source and extras increases as we increase num of extra

Screen.Recording.2024-07-22.at.4.31.08.PM.mov

Ok I have a follow up branch for a event details page. Perhaps we should only show extra then. Otherwise each card can be wildly different heights

[bbovenzi]

@vatsrahul1001

I added links to datasets, dagruns and task instances. Also, we're now using the same card component in the DAG details.

I switched the extra fields to render as json, it starts as collapsed but will scroll if it exceeds 300px

[vatsrahul1001]

@bbovenzi looked good to me