Add task details overview page with duration chart.

[tirkarthi]

Similar to #46504 . Add widget to plot failed task instances within given logical date selected and on click goes to task instances page with state filter applied. Similar to Airflow 2 and other PR the charts are almost the same except for small differences like queued_dttm/queued_when for queued calculation and can be refactored in a later PR to avoid code duplication. Change sort to order by logical_date since the chart is constructed with logical_date along x-axis. Handle skipped tasks where queued_when is null and resort to queued duration as zero.

[pierrejeambrun]

I think the factorization should be part of this PR. I'm not super confident merging code duplication especially when this is most of the PR content.

Other improvements / tweaks can be done later.

[tirkarthi]

@pierrejeambrun I have refactored them to a common component DurationChart . Most of the part is same for task instance and dag run except the queued duration calculation which needs queued_when and queued_at . I am passing kind to denote the type and also using it in switch case to use the correct attribute for queued duration. I am new to JS/React refactoring. Please let me know if there is a better way. Another approach I thought of was making the component as a base class and each class TaskInstanceDurationChart and DagRunDurationChart inherits from the base class to implement queued logic duration calculation as a function for the respective class.

[bbovenzi]

Just one nit on variable names.

[tirkarthi]

The chart currently uses logical_date along x-axis . Since logical_date was made nullable and also not unique it should be decided how to represent multiple runs of same or null logical_date values. I feel it's out of the scope for this PR but just realized while testing with the changes to logical_date recently.

[bbovenzi]

Yeah, I'm happy to merge now and figure out logical date later.

[tirkarthi]

Thanks @bbovenzi and @pierrejeambrun .