Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enhance the time range selectors for better usability #78499

Closed
kevin-v-ngo opened this issue Mar 25, 2022 · 6 comments · Fixed by #81855
Closed

Enhance the time range selectors for better usability #78499

kevin-v-ngo opened this issue Mar 25, 2022 · 6 comments · Fixed by #81855
Assignees
@jocrl
Labels
A-sql-console-general SQL Observability issues on the DB console spanning multiple areas. Includes Cockroach Cloud Console C-enhancement Solution expected to add code/behavior + preserve backward-compat (pg compat issues are exception)

Comments

@kevin-v-ngo
Copy link

kevin-v-ngo commented Mar 25, 2022 •
edited by jocrl
Loading

We should enhance the usability of the time range selectors we have in the console. Specifically,

  • If you were already rendering a custom range, the time picker should expand back to custom range pick when clicked. Today's behavior forces the user to click through the relative duration shorthands menu first.
  • In the time selector menu, we should also have a link to allow the user to quickly go to the relative duration shorthands list if they were at the custom range select view
  • Allow text entry in the time selector broke out into ui: Allow text entry in the time selector #80655

Jira issue: CRDB-14160
@kevin-v-ngo kevin-v-ngo added C-enhancement Solution expected to add code/behavior + preserve backward-compat (pg compat issues are exception) A-sql-console-general SQL Observability issues on the DB console spanning multiple areas. Includes Cockroach Cloud Console labels Mar 25, 2022
@Annebirzin Annebirzin mentioned this issue Apr 26, 2022
Closed
@jocrl jocrl mentioned this issue Apr 27, 2022
Closed
@jocrl
Copy link
Contributor

jocrl commented May 5, 2022

Hi @Annebirzin,
It sounds like with the first bullet point, if the user selects a custom selection, clicking on the dropdown should open directly to the custom selector.

For the next bullet point,

In the time selector menu, we should also have a link to allow the user to quickly go to the relative duration shorthands list if they were at the custom range select view

It sounds like given that will open directly to custom selector, we need a way to enable users to go back to the normal set of preset options. I'm curious what you're thinking in terms of how to do this? Naively, I would imagine link text or a button saying something like "Return to preset options".

For reference:
image

@Annebirzin
Copy link

@jocrl

  1. yep I think opening directly to the custom selector makes sense
  2. We can add a 'back' button (design here) so users can navigate back to the pre-defined time ranges

Screen Shot 2022-05-06 at 12 05 20 PM

@jocrl
Copy link
Contributor

jocrl commented May 16, 2022

Hello, amazing and very human clean up team!

I have updated the Jira description with the description in this GitHub issue. Thank you!

jocrl added a commit to jocrl/cockroach that referenced this issue May 25, 2022
@jocrl
ui: open TimeScaleDropdown directly to the custom menu when custom is…
a798c0a 
… selected

Fixes cockroachdb#78499

This commit modifies the TimeScaleDropdown so that if a custom time is currently
select it opens directly to the custom selection menu, and a "Preset Time
Ranges" navigation link to go to the preset options from the custom menu.

This commit also cleans up the unused DateRange component.

Release note (ui): The time picker now opens directly to the custom time
selection menu when a custom time is already selected. A "Preset Time Ranges"
navigation link has been added to go to the preset options from the custom
menu.
@jocrl jocrl mentioned this issue May 25, 2022
Merged
@irfansharif
Copy link
Contributor

I'll use this issue for a mega nit:
image

The timeseries show timestamps in 24h format, but the selector doesn't. When looking to select a specific window manually, having to translate between the two is slight friction. Do we think this is reasonable to unify? Should I file a separate issue?

@jocrl
Copy link
Contributor

jocrl commented May 26, 2022 •
edited
Loading

Thanks, @irfansharif! That's already being addressed in #81077 🙂
Edit: you can see it in the video for #81855

@irfansharif
Copy link
Contributor

Brilliant, thanks!

craig bot pushed a commit that referenced this issue May 26, 2022
@jocrl @irfansharif
Merge #81855 #81912
f588b5a 
81855: ui: open TimeScaleDropdown directly to the custom menu when custom is selected r=jocrl a=jocrl

Fixes #78499

This commit modifies the TimeScaleDropdown so that if a custom time is currently
select it opens directly to the custom selection menu, and a "Preset Time
Ranges" navigation link to go to the preset options from the custom menu.

This commit also cleans up the unused DateRange component.

https://user-images.githubusercontent.com/91907326/170353048-a52974dc-fd39-48f6-a228-f17fc974607d.mov

Release note (ui): The time picker now opens directly to the custom time
selection menu when a custom time is already selected. A "Preset Time Ranges"
navigation link has been added to go to the preset options from the custom
menu.

81912: roachprod: avoid invoking `cockroach version` r=irfansharif a=irfansharif

This was only being used for compatibility with v20.2 nodes
expecting different logging arguments. That version is no longer
officially supported, and in CI/elsewhere, we build roachprod using the
SHA from the specific release. Avoiding the version here lets me use
roachprod with crdb binaries that don't stamp in the version:
#79360 (avoiding stamping
can shave off a few precious seconds in builds).

Release note: None

Co-authored-by: Josephine Lee <[email protected]>
Co-authored-by: irfan sharif <[email protected]>
@craig craig bot closed this as completed in bc10e2b May 26, 2022
@ericharmeling ericharmeling mentioned this issue May 31, 2022
Closed
maryliag pushed a commit to maryliag/cockroach that referenced this issue Jun 6, 2022
@jocrl @maryliag
ui: open TimeScaleDropdown directly to the custom menu when custom is…
03312f2 
… selected

Fixes cockroachdb#78499

This commit modifies the TimeScaleDropdown so that if a custom time is currently
select it opens directly to the custom selection menu, and a "Preset Time
Ranges" navigation link to go to the preset options from the custom menu.

This commit also cleans up the unused DateRange component.

Release note (ui): The time picker now opens directly to the custom time
selection menu when a custom time is already selected. A "Preset Time Ranges"
navigation link has been added to go to the preset options from the custom
menu.
@maryliag maryliag mentioned this issue Jun 6, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jocrl jocrl

Labels
A-sql-console-general SQL Observability issues on the DB console spanning multiple areas. Includes Cockroach Cloud Console C-enhancement Solution expected to add code/behavior + preserve backward-compat (pg compat issues are exception)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

ui: open TimeScaleDropdown directly to the custom menu when custom is selected jocrl/cockroach
4 participants
@irfansharif @Annebirzin @kevin-v-ngo @jocrl