feat: Improved UX for Date Time Picker

[YounixM]

Improve experience around date time picker.

• Clicking on the input should open the time in startTime - endTime format always
• Users can enter time in startTime - endTime format , X m/h/d/w format.
• Relative times will be shown in Last X format on blur / input not focused state
• Custom Times will be shown in startTime - endTime format
• Show shorthand time labels next to the time and select options
• If user selects a custom time range , the input prefix label should show the diff range
• Show errors in popover if the input has errors
  - Future dates are not allowed
  - StartTime cannot be after EndTime
  - Incorrect input formats

Screen Recording - https://drive.google.com/file/d/1t7y7udh_grvHaw4OJ9RIj4Iuol9rabS7/view?usp=sharing

Areas Tested For -

Logs
→ Explorer

Traces
→ Explorer
→ Trace Funnels

Exceptions
→ Listing Page

External APIs
→ Listing Page
→ Details Page

Messaging Queues
→ Overview
→ Kafka
→ Celery

Metrics
→ Summary
→ Explorer

Infrastructure Monitoring
→ Hosts Listing Page
→ Host Details Page
→ K8s Listing Page
→ Pod Details Page

Services
→ Services Listing Page
→ Details Page

Alerts
→ Alerts Edit View
→ New Experience
→ Old Experience

Dashboards
→ Dashboard Details
→ Panel Edit View

Service Map
→ Service Map Page

Cost Meter
→ Explorer
→ Meter

[jeethukarthik]

@YounixM LGTM 👍 I don't have any notes..