Add recent runs duration chart.

[tirkarthi]

This uses the API to get recent 14 dag runs to plot the chart along with average of the run and queued duration as annotations. The size is 1/3 since there will be 2 more for success/failed rate and grouped durations as per design. This is for initial implementation and might not completely cover all use cases like Airflow 2 but can be taken up in subsequent PRs or separate issues for them as below. If approved a similar overview page can be created for task page as well in another PR for task duration.

Notes to self and review

1. It seems stateColor.ts was removed. What is the recommended way to show color based on state for a given theme?
2. Legend is not implemented now where in Airflow 2 it can be selected to show only those values.
3. Duration is now in seconds and conversion to other units is yet to be implemented.
4. x axis value is set to 3 since high number causes values to render vertically amidst smaller space.
5. landing times based toggle is not implemented yet.
6. Clicking on dagrun to take to the run page is not implemented yet.
7. Autorefresh is not yet implemented.
8. It seems even with limit of 14 passed more dagruns are returned. Changing it manually reflects correct value. Need to see if there is some cache issue.

[bbovenzi]

I'm happy to merge this as a good start. But we'll need to do auto refresh and improve the general design of it (accessibility, styling, the space the axis labels take up)

[tirkarthi]

Thanks @bbovenzi , I suppose a very similar overview page will be present for each task too with recent failed task instances, task duration chart etc, as per the design.

http://localhost:8000/webapp/dags/tutorial_taskflow_api/tasks/load

[bbovenzi]

Thanks @bbovenzi , I suppose a very similar overview page will be present for each task too with recent failed task instances, task duration chart etc, as per the design.

http://localhost:8000/webapp/dags/tutorial_taskflow_api/tasks/load

Yes, eventually we want to do a lot more with these dashboard views on the homepage and on a Dag or Task.

What were you trying to link here?

[tirkarthi]

The link was to a sample task details page which now only has task instances and events tab. My understanding from the designs is that there will be a overview page for a task similar to dag page. The task duration chart was useful with median plot and it will be good to have it somewhere in Airflow 3 too.