Add global events page to browse along with support to display only events for the dag.

[tirkarthi]

This adds support to display all events under browse page. This also adds support to display events only related to the dag under events tab in dag details which is basically filter by dag_id in the API when dag_id is present in the URL. The events per dag skips dag_id column which is redundant.

Add support to filter by when, event_log_id which needs to be replaced in the backend before querying. This was done in the legacy API connexion code and the same support is added here

airflow/airflow/api_connexion/endpoints/event_log_endpoint.py

Line 78 in e502065

to_replace = {"event_log_id": "id", "when": "dttm"}

Notes for self and review :

1. eslint fails with below error that <Time /> cannot be constructed for when column but I have seen this pattern used elsewhere and also previously when dags list page only had timestamp for next/last dagrun as <Time />

/home/karthikeyan/stuff/python/airflow/airflow/ui/src/pages/Events/Events.tsx
56:13 error Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “Events” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true react/no-unstable-nested-component

2. Legacy UI does sorting by when in descending manner by default to display latest events first. I have passed it to useTableURLState as default yet somehow this is not working.
3. When there are no events the page displays No Eventss found where Events has a double s which needs to be fixed.
4. extra column is usually a json and might need a followup PR in new UI to pretty display JSON like legacy UI.
5. The events table under the dag details tab on scroll pushes the column of the table up and needs to be fixed. This is not observed in the code page.

Related

#43704
#43705

Screenshots

[bbovenzi]

I will work on a fix for the scroll state and search params in a separate PR.

For extra you can try to use the renderSubComponent field on DataTable. But I'm not sure yet if that will be a great UX

[bbovenzi]

We can define columns just outside of the Events component on line 29

[bbovenzi]

Suggested change

	modelName="Events"
	modelName="Event"

[bbovenzi]

With columns defined outside of the react component. we might need to turn const columns into a function in order to accept a dagId