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.

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

Feature Request: Title Tooltip Field #4079

Closed
kylebrandt opened this issue Feb 19, 2016 · 43 comments · Fixed by #6847
Closed

Feature Request: Title Tooltip Field #4079

kylebrandt opened this issue Feb 19, 2016 · 43 comments · Fixed by #6847
Assignees
Labels
help wanted prio/low It's a good idea, but not scheduled for any release type/feature-request
Milestone

Comments

@kylebrandt
Copy link
Contributor

I would find it useful to have a field for text that would display as a tooltip when hovering over the title of graph panel.

My use case is that in bosun each metric has a description field. Those descriptions give more information about the metric. These can be long, so there doesn't seem to be a current space on grafana dashboards for this. The best I have come up with for a workaround is to create a drill down link that has no link value (Just a lot of text for the title). Which is a little silly and ends up looking like this:

image

Maybe there is a better way that I am missing?

@utkarshcmu
Copy link
Collaborator

Check this out for screenshots : #1505
The work was done here in this PR : #3691
But it was not merged into Grafana master in favor of #1168

Still if you want tooltip with Title as shown in #1505 , its available here [https://github.com/justforkit/grafana]

@utkarshcmu
Copy link
Collaborator

Anyway, thanks for the great work in Bosun. It is very useful. 👍

@kylebrandt
Copy link
Contributor Author

Hmm... So the one that was merged isn't collapsed by default?

@utkarshcmu
Copy link
Collaborator

Sorry, I did not understand your question. #3691 was never merged and was rejected in Grafana master. #3691 is merged in my fork [https://github.com/justforkit/grafana].

@kylebrandt
Copy link
Contributor Author

I meant the notes in #1168 - seems like the notes are not collapsed based on your comment, so with lots of graphs or long notes it gets messy?

@utkarshcmu
Copy link
Collaborator

Yes it will get somewhat messy, but according to @torkelo in #1505 , the panel notes/info should be visible all the time. Anyway, I am still completely in favor of something hidden and which only shows up on the dashboard when needed (either by hovered tooltip or collapsed notes). Dashboard space is precious for my use case at least. :)

@kylebrandt
Copy link
Contributor Author

@torkelo Request for reconsideration on

Having panel description text that only appear on mouse over (like tooltip) is not something that feels like a good idea. If the information is important then it should be visibile all the time.

The reason is because there are two different user stories here:

  1. Focused dashboards with important curated graphs. In this scenario, I think you are correct. You don't want to hide important information that is essential to interpreting the visualization.
  2. Many graph dashboards: In this scenario, there are many graphs (say, row X columns = 6x6). In this case, I'm basically visually looking for things that seem anomalous. Once I see those things, I then want more information about the metric / panel. Always having the notes displayed reduces the number of panels I can have on my screen for this sort of thing overview and makes it harder to read. To me this is kind of like having the legend always displayed or not.

@torkelo torkelo added type/feature-request prio/low It's a good idea, but not scheduled for any release help wanted labels Feb 29, 2016
@utkarshcmu
Copy link
Collaborator

@torkelo

Would you like to reconsider #1505 & #3691 as you labeled this issue as "help wanted"?

@torkelo
Copy link
Member

torkelo commented Mar 1, 2016

Yes, but need to use new drop component instead of the normal tooltip

@utkarshcmu
Copy link
Collaborator

@torkelo - Can you please give me an example from the code where this new drop component is used? Also, if you can briefly describe how you want the dropdown of this help text. Just wanted to make sure whats your vision before starting any work on this. :)

@torkelo
Copy link
Member

torkelo commented Mar 1, 2016

the new tooltip / popover component is used by annotations and the help popover (used in data source edit view, when you focus datasource name or http url inputs )

@utkarshcmu
Copy link
Collaborator

This help text is optional. It will show up "i" icon only when there is any help text otherwise not.

screen shot 2016-03-01 at 11 09 28 pm

screen shot 2016-03-01 at 11 09 13 pm

Any feedback?

@torkelo
Copy link
Member

torkelo commented Mar 2, 2016

@utkarshcmu looks good, how does it handle out of bounds scenarios (long text on panel close to right edge of viewport). Currently css for the help popover is that is gets hidden when out of bounds, the drop component also supports moving attachment position when out of bounds, but due to the current css for the help popover this is disabled as it is hidden.

@torkelo
Copy link
Member

torkelo commented Mar 2, 2016

@mattttt thoughts ^

@utkarshcmu
Copy link
Collaborator

This is a screenshot with a help text of 208 characters.
screen shot 2016-03-02 at 12 56 35 am

Character count = 332
screen shot 2016-03-02 at 1 00 40 am

IMO this serves the basic purpose of help text. If the help text is too long, i.e. more than 200-300 characters then that information is too verbose.

@mattttt
Copy link
Contributor

mattttt commented Mar 2, 2016

Not near wifi at the moment, will look later tonight or worst case tomorrow.

On Mar 2, 2016, at 5:04 PM, Torkel Ödegaard notifications@github.com wrote:

@mattttt thoughts ^


Reply to this email directly or view it on GitHub.

@utkarshcmu
Copy link
Collaborator

@mattttt Any updates on this?

@sbengo
Copy link
Contributor

sbengo commented Apr 11, 2016

+1! Would be awesome to add info about shown metrics for the final user!

@toni-moreno
Copy link
Contributor

👍

We need this PR to show a good description on the metrics shown to users.

We have had lots of misunderstanding issues with users that can not understand what they are watching in some panels.

@dutchiechris
Copy link

+1 I have a set of default dashboards as part of NetApp storage monitoring integration and users often don't understand exactly what they are looking at, and since I am not their colleague I can't easily answer! A help field would help the user greatly and as the native/default dashboard feature of Grafana becomes more used it is helpful there too.

@utkarshcmu
Copy link
Collaborator

utkarshcmu commented Apr 29, 2016

If this can become part of 3.0.0 , it would be awesome. This will be so helpful for the viewers to understand the graphs without taking any extra space on the dashboard. :)

@merwy
Copy link

merwy commented May 30, 2016

+1 I would really need panel tooltips on my dashboards as I have some specific and tricky panels which need some additional explanation about what exactly they present. Looking forward for this feature!

@utkarshcmu
Copy link
Collaborator

@mattttt Any update on this issue / PR #4224

@utkarshcmu
Copy link
Collaborator

@torkelo / @bergquist I think this functionality is needed by many. Can you guys take a look at #4224 ?

@mattttt
Copy link
Contributor

mattttt commented Dec 5, 2016

I very much like the revised tool tip, but because space conflicts with the drill down, it'll need a bit more thought.

That said, because this entire row header needs a re-think, I'm inclined to approve this design right now (with the expectation that few panels will have both info and drilldown) while we focus on refactoring to support new features/functionality.

👍

@utkarshcmu
Copy link
Collaborator

Thanks @mattttt , will redo the PR #4224 asap!

@bergquist bergquist added this to the 4.1.0 milestone Dec 6, 2016
@utkarshcmu
Copy link
Collaborator

Screenshot:

screen shot 2016-12-06 at 3 54 02 am

@bergquist bergquist removed their assignment Dec 14, 2016
@torkelo
Copy link
Member

torkelo commented Dec 14, 2016

Made progress on refactoring PR #6847

Tried to improve layout for panel general tab to fit a text area for panel description (help text). Want text area as I would like to support markdown there instead of sanitizing html.
image

The thing that needs some thought is how to present this icon, right now we have 3 different icons next to panel title. Is there a way to organize them better (all before or after title for example, seperator?). @mattttt any thoughts?

image

@utkarshcmu
Copy link
Collaborator

utkarshcmu commented Dec 14, 2016

@torkelo / @matt One way to not have the "circle-i" icon is to display description when a user hovers over the Panel title but I am not sure if that is ideal or if we need an extra icon to show description.

@torkelo
Copy link
Member

torkelo commented Dec 14, 2016

I think the icon is important to signal that there is a panel description there

torkelo added a commit that referenced this issue Dec 16, 2016
…el errors, and panel help into a single panel feature, #4079 , #6847
torkelo added a commit that referenced this issue Dec 16, 2016
…el errors, and panel help into a single panel feature, #4079 , #6847
@torkelo
Copy link
Member

torkelo commented Dec 16, 2016

Made some good progress on this, trying to unify panel drilldown links and panel description text into the same area, the same are used for error info as well.

panel_desc

For full video where I talk through it:
http://grafana.org/assets/videos/panel_description.mp4

@utkarshcmu
Copy link
Collaborator

@torkelo This looks great! 👍🏽

@dutchiechris
Copy link

I loaded grafana:master from docker (commit: 0a0b4f5 shown on login page) to check out this feature and added a data source and panel with valid metric, and then added a description on the edit:general tab and I don't get any info icon in the corner. I saved, reloaded, tried in Firefox and Chrome, and verified it's in the json response, but didn't see it yet. Any ideas?

@utkarshcmu
Copy link
Collaborator

In the current master I see the description but the corner is without the blue background which is harder to spot. So, either we make the background blue of the corner or make the "i" whiter or bolder.

screen shot 2016-12-18 at 3 03 45 pm

@torkelo
Copy link
Member

torkelo commented Dec 19, 2016

@utkarshcmu yea, we wanted to tone it down a bit so it was not as attention grabbing. Do you think it's too hard to spot?

@dutchiechris
Copy link

I fetched again from Docker hub [ Grafana v4.1.0-pre1 (commit: 090db94) ] which looks like the most recent commit from this morning and still I see nothing after adding some help text:

image

Ideas? Should this feature be visible in the docker builds?

@torkelo
Copy link
Member

torkelo commented Dec 19, 2016

@dutchiechris thanks for the heads up, looks like there is an issue with the css and minification which makes the panel help icon not show up (in the optimized build)

@utkarshcmu
Copy link
Collaborator

@torkelo Thats a good question whether the description should catch attention or not. Some users might want the "i" to be more brighter and some dimmer. Right now as a user its somewhat hard to spot it as its dimmer but I think either lets keep it this way or make it a bit(not much) brighter.

But this looks great, it will help a lot of users to know what information is exactly displayed in the panel. 👍

@torkelo
Copy link
Member

torkelo commented Dec 19, 2016

@dutchiechris I fixed the css minification issue, next grafana/grafana:master docker image should have it working

@mattttt
Copy link
Contributor

mattttt commented Dec 19, 2016

@utkarshcmu: Keep us posted as you use it, but as dashboards are all about information priority, we want to make sure we dont have everything competing for attention. We can play with some shades of grey, but once the user learns it, I think it's appropriately clear.

@kylebrandt
Copy link
Contributor Author

kylebrandt commented Dec 19, 2016 via email

@utkarshcmu
Copy link
Collaborator

Agreed with @mattttt 👍

bergquist added a commit that referenced this issue Dec 20, 2016
@liujin1993
Copy link

@torkelo Which css file controls the panel help tooltip?I want to modify it to satisfy ourselves need.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted prio/low It's a good idea, but not scheduled for any release type/feature-request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

10 participants