Add dag run and task instance metrics to dashboard.

[tirkarthi]

Related #42700

Adds dag run and task instance metrics from historical metrics endpoint to dashboard.

• The bar charts will be added later once API is available.
• Checkboxes are missing. It seems in chakra 3 adding a components takes a few more steps.
• State colors are of more contrast and might need to be toned down.
• Some padding to center text in the status box. Probably there should be some bubble text type of component.
• Currently the select box has preset hours shown to users at last 1, 8, 12 and 24 hours. This can be a component where users can select date time freely on their own. Probably need to see if this needs to be limited since using 30 days might take a lot of time to query and render the plot.

[bbovenzi]

Nice start!

A few other thoughts:

• In a separate PR, I definitely need to adjust the task colors because they do not work in both light and dark mode.
• Let's use a more subtle color for the percentage bars
• We need a bit more vertical space under the titles of each section
• Eventually, we need a full date range selector instead of just a few preset dropdown options

[tirkarthi]

Thanks @bbovenzi for the comments. Did the following changes.

1. Refactored Metrics.tsx to HistoricalMetrics folder with one component per file.
2. Updated colors to use semantic codes.
3. Added a custom badge component that can be updated so that the badge looks same across the components.

Eventually, we need a full date range selector instead of just a few preset dropdown options

Agreed, it looks like Chakra doesn't have a datepicker component. So something like https://www.npmjs.com/package/react-datepicker can be used or one of the options from the discussion chakra-ui/chakra-ui#580 . The datepicker can be a general component since it will be used across the app.

Feel free to push to the branch if you have any changes directly too. Thanks.

[bbovenzi]

A few more nits.

[tirkarthi]

Applied all the PR comments locally and rebased with latest main branch. Thanks.

[pierrejeambrun]

Are screenshots up to date following latest changes ? Just to get a rough idea of the rendered UI.

[tirkarthi]

Latest screenshots after the review changes. Most of it has been moving Metrics.tsx to HistoricalMetrics with one component per file. Moving from text customization to using Badge and a few text size, padding, margin changes.

[pierrejeambrun]

Looking nice.

Just a minor nit, it looks like the number in the badge is not centered vertically. Maybe that's just because of the screenshot but it looks slightly off.

[tirkarthi]

Yes, in the layout tab for the badge WxH is 15.5667×20 in Firefox on Ubuntu for me. I can see the centering not correct in inspect toolbar. The padding is equally applied at the y-axis with py={1} . @bbovenzi mentioned the same in the comment but couldn't figure out the right change in CSS.

#43888 (comment)

[tirkarthi]

It appears okay in Brave on Ubuntu. Probably a Firefox/Linux issue as many have reported it in chakra-ui/chakra-ui#983 , chakra-ui/chakra-ui#2314

[pierrejeambrun]

It appears okay in Brave on Ubuntu. Probably a Firefox/Linux issue as many have reported it.

Nice to hear, thanks for investigating.

[tirkarthi]

Thanks @bbovenzi for the feedback. Made the below changes as per latest review.

1. Simple skeleton for dagrun and task instance sections. A better one would be using SkeletonCircle for badge and SkeletonText for the bar for each state in https://www.chakra-ui.com/docs/components/skeleton . I can take it up in another PR since it's not urgent.

2. I have refactored the datetime selector into a separate component. I would like to access the state changes to startDate and endDate to pass to API. I had tried to use the pattern as per state lifting docs. Please let me know if there is any other correct approach. https://react.dev/learn/sharing-state-between-components .

3. I will make the changes related to end_date being null once the PR changes are merged and not to block this PR.

[bbovenzi]

Nice work! A few small nits before we can merge.

[bbovenzi]

Lgtm! We can iterate on a more detailed loading state and update end_date later.

[tirkarthi]

Thanks @bbovenzi and @pierrejeambrun .