ui: incorrect time bound selection

[aliher1911]

Is your feature request related to a problem? Please describe.
When analysing historic cluster behaviour using metrics dashboard on web ui it is necessary to zoom into particular time range and then progress between dashboards e.g. from slow requests to overload to hardware.

If something goes wrong with chart due to ui bugs you have to reload page to restore the state, but that doesn't preserve the time range. So you have to pick the new range again. This is the first problem.

Then you have to go through date and time pickers which doesn't allow you to type the date/time. And the dialog always starts from current time even if you already have a range picked. Which makes extending the time range painful as well.

Describe the solution you'd like
Preserve displayed time range when page is reloaded.

Allow typing the range and copying its value which may help as a stopgap if we can't preserve it during reload.

Make range picker start from current values.

Describe alternatives you've considered
The alternative is to use external monitoring, but it is not possible in cases where you need to analyse exported time series from on prem client clusters or from roachtest runs.

Additional context
This problem gets very irritating when hitting any bugs in charts that force you to reload page frequently (see #71201)
Time picker is a real pain when debugging clusters behaviour but we don't have any alternative to this.

Epic CC-5280

Jira issue: CRDB-10438

[aliher1911]

After some poking around I realized that date range is preserved when page is reloaded but it is reset in URL (but not in the actual pick range entry) when you change dashboard. So if you change dashboard and reload you are screwed.
Maybe there's an easy fix to preserve time range reliably when switching dashboard?

[thtruo]

cc @Annebirzin for usability feedback

[tbg]

@thtruo wanted to ping this - support is increasingly relying on "tsdump" during customer escalations, which means we spend more time using the console UI. Just yesterday @aliher1911 and I were looking into https://github.com/cockroachlabs/support/issues/1558 and it was quite frustrating to be investigating graphs that date two weeks back due to the various navigation quirks. I checked with @stevendanna and @erikgrinaker and they both confirmed similar frustrations.

I recorded a loom that walks through the main problems: https://www.loom.com/share/d17dc4cac1c146029b1600f30e59e79f

Just want to be clear that I'm not pushing for a perfect UX here (that is probably a bunch of work), only something that works well enough to not slow us down in support work. Efficient selection of time ranges would go most of the way here. I think the following are hopefully easy and would make (at least me) happy:

• < > move in half intervals
• timestamp picker defaults to currently visible bounds

[Annebirzin]

The SQL observability team also has a ticket that flags some of these issues with the custom time picker (the same time picker is used across SQL Activity pages and metrics pages) #78499

cc @kevin-v-ngo @thtruo @maryliag @jocrl

[jocrl]

To follow up on a few things,

• Timestamp picker defaults to currently visible bounds: addressing in ui: Initialize the time picker custom option with the current selection #80660
• Allow text entry in the time selector: Broke issue out into ui: Allow text entry in the time selector #80655 to document findings

[tbg]

One more short loom to re-illustrate the issue of wrong bounds being set when selecting a time range via click-and-drag on the graph:

https://www.loom.com/share/342d94c7558944fcaaa1c391eb3d2be8

From the last day view I am trying to select the time range 9:00-midnight and it zooms me to 6pm-midnight. This is essentially unusable, as is my life would almost be better if this method of selecting time bounds didn't exist, since it rarely drops me where I want to go.

edit: I realized my build had #80660 and it really helps, so thanks again for that!

[jocrl]

Noting that @irfansharif also hit what was mentioned in the previous comment, that the wrong bounds are being set when selecting a time range via click-and-drag on the graph.
edit: this was on the advanced debug page

[irfansharif]

Loom for the above: https://www.loom.com/share/b42dab2a710648b5876bdfa70f7bb9e5

UI bug around selecting a time window over metrics, where what was selected does not match what I tried to do

[irfansharif]

Re-titling this issue to now focus on time range picker correctness, when picked by dragging across a time window in one of the plots.