Timepicker v2, new types of time ranges

[torkelo]

Been working on support more time options,

New features:

• support "The day so far" = from=now/d to=now
• support "Today" = from=now/d to=now/d
• support "Week to date" = from=now/w to=now
• support "This Week" = from=now/w to=now/d
• support "Yesterday" = from=now-1d/d to=now-1d/d
• support "Day before yesterday" = from=now-2d/d to=now-2d/d
• support "This day last week" = from=now-7d/d to=now-7d/d

etc, etc

Syntax: if it ends with /(timespan unit) it will round to startOf for the from range, and endOf for the to range.

I want users to be able to add custom ones but I would also like to a have a substantial list as default. Right now all relative and refresh options are stored in the dashboard, I cant add new options and have them appear on the dashboard. And with more options the single row dropdown might not be a good option. Maybe something inspired by kibanas time dropdown?

Like #2612
Already support today (which I have changed a bit how it works in timepicker v2 branch)
#1186

[mattttt]

Chatted with Torkel a bit today and worked on some mockups. My favorite so far consolidates the time selection & quicker picker into a single area, without tabs/sub-menus.

The To & From form fields would be able to accept any relative time item (like "Now-25hrs") as well as an absolute time. And when a Quick Relative time is selected, the corresponding relative time shorthand will be populated in the To/From fields. The goal is to teach people how they can enter their own relative time ranges rather than requiring either a pre-set relative or absolute.

Continuing the teaching concept, I like the idea of showing the relative time shorthand on-hover, illustrated in this mockup over Day before yesterday.

I am also proposing the ability to save time ranges, which would trigger a modal (or display some additional fields) that let you name it.

[torkelo]

great work @mattttt !
working on implementing that design,

Think it makes sense to put the quick ranges to the right, so they are closest to the mouse position when you open the dropdown.

[bulletfactory]

I took a pass at this and am happy with the results. I was already most of the way there, just a few incremental tweaks to really make it polished.

The original is on top and the tweaked version on bottom.

Recommendations:

• Make the button at top right feel more connected to the dropdown. I might suggest making the selected state the same color as the dropdown bg, and having it hang down below the drop shadow you have on the toolbar.
• remove the bullets - all of the dots tended to make it feel more busy
• Open the line-height slightly (24px is used, increased from 20px) - I notice in the original mockup, the line-height of the list seems to change (look at how "Last 60" lines up vertically w/ "Day before yesterday", but "The day so far" has been nudged down slightly. That entire column seems to have a different line-height)
• implement bold as well as underline for current selection
• The calendar buttons on the left seemed too prominent compared to the text links, I think we could make the icon color a light grey, not white, and darkening the blue helps as well.
• I also lined up the calendar button to the right edge of the apply button and rounded the right edges to match.

Interested in your thoughts.

[torkelo]

@bulletfactory good feedback!

• I cant change the primary button color without also changing all other primary button colors (not many, mostly login/signup/continue button use that blue color).
• Having the nav item background be the same as the dropdown looks great on black theme (implemented as your screenshot)

Not as good on white theme, due to same color for header and panel, maybe something we should change

[torkelo]

[mattttt]

Looks good

(1) Then perhaps we introduce a different convention for in-form secondary actions, rather than relying on that primary button style. My main grip is that it demands so much attention, despite it not being the most important thing. Let me try a couple different ideas.

(2) White theme. Yep, hrm.

[torkelo]

added UTC marker when timezone is set to UTC, not supper happy about color and look, especially in white theme

[torkelo]

Almost everthing is working:

TODO

• Fix timepicker settings (add custom ranges)
• Make it possible to open in full screen / edit view (right now opening the dropdown will close fullscreen / edit view)

[torkelo]

Merged to master and closed. This feature REMOVES the ability to set custom quick ranges.

I think it would be good to get some feedback on the NEED for that now that we have a lot more built in quick ranges, and maybe improve the settings ui if that is the case.

[rschitz]

I actually need the opposite. Since i use auto interval for some dahsboard, i need my users to only be able to choose from a predefined list of ranges. is it possible to switch from timepicker v1 and v2 ?

[torkelo]

@rschitz not sure what you mean switch from v1 to v2, that is what this issue does. v1 does not exist anymore

[rschitz]

I mean let the user chose between v1 and v2 but i guess this won't be possible. What are the chances you'll reintroduce custom quick ranges again, i'm working on a project that needs that feature badly :(

[torkelo]

@rschitz can you describe more? Is that the quick ranges that are included by default are not enough? I think I will add custom ranges, but needs a lot of work to do it correctly, and want to see if the need is there before I start.

[rschitz]

It's too much actually, i need to limit to few ranges only : 3h,6h,12h,1d,2d,7d,30d,90d,1y,5y
My personal feeling is that there is now too much information in the timepicker now, you have to "understand" it before using it. Would be cool to be able to "set" something simple for shared dashboard (my usecase)

[timgriffiths]

Yes @torkelo we require the ability to set quick time ranges for example we graph exchange market data so the larger time ranges are not very interesting to us but looking at things in the last 1 or 2 minutes is sometimes more interesting, also creating custom time ranges like now/d+8h is also very useful to us.

Just started testing the new master branch looks like some really nice improvements!

[shoonoise]

@torkelo custom quick ranges are really actually for us too

[tokudan]

@torkelo
I also urgently need custom ranges for my project.
In my project data is stored for different ranges, but never longer than 1 year, for some graphs 30d or less, still i get questions about why data is stored longer than that, as it's clearly listed in grafana.
For different dashboards I need different times to keep the load on the server sane. The dashboard that lists all possible graphs should not advertise that you can view a whole year's data and thus choke the browser (e.g. firefox hangs for some time while the browser is busy rendering the graphs).

I also need times not listed in the current chooser, e.g. 3h, 14d. Manually setting them is just annoying.

With the old custom chooser I had a simple list in one of my graphs: 1h, 2h, 3h, 6h, 12h, 24h, 2d, 7d, 30d, a list of 9 sensible times for my graph with the option to zoom in and out as necessary.
Now I have 27 options where 9 are completely useless:

• less than one hour does not make any sense on that graph
• Data longer than 30d is not available
  The useful options are spread over 4 columns and thus are hard to find, which is a both a bad user experience and a bad admin experience.

Please at least allow us to choose which time picker we use.

[rschitz]

@torkelo we know you must be very busy but can we have some news about re-introducing custom ranges? Thanks.

[eliten00b]

+1 for custom ranges

[evandro-portugal]

For my use, I would just like to know where I could change the code to make timepicker ranges customized by roles (admin can see it all, viewer can see just a limited option, to prevent them from making big searches which could have a performance impact in the database..... I use grafana to view Zabbix information, which has a lot of I/O already in the database)
I'm really interested in adding the ability to customize the timepicker, but I can't see to find a way to check for user role in time-picker

[retorquere]

In our case, we're specifically interested in full months (so a Jan/Feb/etc quick-pick) or Quartiles (so Q1/Q2/etc). Can these be scripted in somehow?