feat: enhance time range selector for metrics - include presets

[adarsh0728]

Resolves #2278

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 65.86%. Comparing base (dfae989) to head (42ecb2d).
Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2292   +/-   ##
=======================================
  Coverage   65.85%   65.86%           
=======================================
  Files         346      346           
  Lines       42801    42801           
=======================================
+ Hits        28186    28190    +4     
+ Misses      13542    13535    -7     
- Partials     1073     1076    +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[adarsh0728]

We were using https://mui.com/x/react-date-pickers but for presets (last 1 hr, last 30mins etc) https://mui.com/x/react-date-pickers/shortcuts/ requires proversion (date and time shortcuts). Testing out different libraries and their outputs.
Will add the screenshots.

[adarsh0728]

Component Used: https://github.com/dangrossman/daterangepicker

[whynowy]

Why is the date format so weird?

[adarsh0728]

Why is the date format so weird?

@whynowy: talking about the attached date format? It's the default format for date with times. I tried with other formats but didn't work. Will check once more if there's a workaround.

https://mui.com/x/react-date-pickers/date-time-range-field/

here, it's like 04/17/2022 03:30 PM – 04/21/2022 06:30 PM

What do you suggest?

[whynowy]

Why is the date format so weird?

@whynowy: talking about the attached date format? It's the default format for date with times. I tried with other formats but didn't work. Will check once more if there's a workaround.

https://mui.com/x/react-date-pickers/date-time-range-field/

here, it's like 04/17/2022 03:30 PM – 04/21/2022 06:30 PM

What do you suggest?

Is it according to different client? What i see in the link you posted is like below.

[adarsh0728]

@whynowy: yes it was a different component (for reference i added, but we aren't using that).

I have made the changes and format would be like below. This works?