Time Range picker redesign

[monicawoj]

Resolves #4024

Implements a new time range picker design to improve UX of quicker choosing or adjusting time range of query. Additionally, in this PR, a new query is run every time the time range changes instead of having to explicitly click “search”

[alwaysmeticulous]

🤖 Meticulous spotted visual differences in 315 of 404 screens tested: view and approve differences detected.

_{Last updated for commit 9c5138c. This comment will update as new commits are pushed.}

[yomete]

lgtm! 🚢🇮🇹

[brancz]

Loooooooove this!!

A few minor things:

1. I clicked on the absolute thing while it was 15m, and then on relative again, and it was 6h. That was unexpected.
2. I typed a different value and hit enter, but that didn't do anything, I think hitting enter should run the query.

[monicawoj]

Loooooooove this!!

A few minor things:

1. I clicked on the absolute thing while it was 15m, and then on relative again, and it was 6h. That was unexpected.
2. I typed a different value and hit enter, but that didn't do anything, I think hitting enter should run the query.

1. Yeah current functionality just defaults to 6h when going from absolute to relative. I'll write up a function that calculates the general time range between the absolute date-times and shows that as the relative time.
2. Yup, currently just clicking out of the input runs the query. Will add an event listener for hitting 'enter'!

Thanks for the input!

[brancz]

Not sure what's up, but now only the first time hitting enter in the input box works, after that it only triggers when I either use the buttons, or click out of the field. I think hitting enter should already deselect the input field, and only enter should trigger a query, not clicking out of it.