Created a new tooltip when click in a value to have different external links

[JoaquinJimenezGarcia]

Summary

Created an option that allows you to have a new tooltip when a serie's value is clicked in which you can have external links to navigate.

To complete the URL you want to have in the tooltip, you can use two vars "$series_label" (which will return the serie's name) and "$series_extra" (which will return something else). When using "$series_extra", you can choose the type of it, for now it can be "raw" (it will return the same of its value) or "Date" (which will return a date given it in miliseconds, indicating the index in the field "Extra Series Index").

Also you can filtrate in the case you have multiple values in the series in the field "Show only serie with Index", in case you don't have mapped the values, it will be painted in black and showing and error message in screen, saying which value is missing in the original tooltip of each item. In case the values are mapped, it will be painted in the color assigned.

Use Cases

• Generating URL with date to download files
  A serie has a value which is a timestamp when it was saved in a server and is the path of the file. It will format the date for you and giving back an URL which goes directly to the file to download.
• URL to check deployment info
  In that case you can have stored a timestamp when a build was made, we can have an URL to go directly to see the details of that build (i.e. http//mycicd.mydomain.com/{{build}}/status)

This PR is referenced to issue #17

[diafour]

Hello! Thank you for your efforts and sorry for the delay.

First of all, I want to say that the idea to put URLs in tooltip is great. It is more flexible than what was asked in #17. I think we can even combine both in future improvements (clickable cells and sticky tooltip).

I've tested this PR with grafana 6.5 and have some thoughts:

I think that using two different tooltips is not a good user experience. It is better to have one tooltip, that will stand still on click. By the way, there is no chance to see 'normal tooltip' on a mobile device: only new 'extra tooltip' appears on 'touch' event ;)

I don't get the purpose of "Filtering". What is the use case? Why not change the query to limit values?

Anyway, I've tried it and it behaves oddly. I've added 3 'CSV Metric Values' queries with similar alias and choose the discrete mode with solarized colors, so the hover tooltip contains 3 values. If Filtering is set to "-1", all cells are painted in black and both tooltips contain all 3 values. If Filtering is "0", all cells are painted as expected (using mapping priority), 'extra tooltip' contains the value from the first query and 'hover tooltip' contains 3 values. If Filtering is set to 1 or 2, the colors of the cells and value in both tooltips are from second and third queries accordingly.

Queries:

Filtering == -1

Filtering == 0

Filtering == 1

Filtering == 2

Some thoughts about settings pane:

• The section name 'URL' is too specific. I think that 'Tooltip on click' or even just 'Tooltip' is better. It gives ability to add other elements in the future, not only URLs.
• Labels should be without colons.
• Move buttons to the bottom.

Now:

Proposed:

4. Variables

4.1.

Some thoughts on '$series_extra':

• $series_extra — it is more like $bucket_value

• 'Use extra Serie Data' switch is redundant: "if the value is not needed in URL, do not use this variable".

• 'Extra Series Index:' is 'Bucket value index'. So 'bs-tooltip' can be like this: "If multiple values are not enabled, $bucket_value is always the value of the bucket.
  If multiple values are enabled, -1 give the top value (value with least index in color mapping), other numbers give value from the specific series."

4.2.
'$(template.name) name of the templated to be replaced'

This is confusing. What is the template?

4.3.
'$time from...to' Is it a time range of the graph or just the cell?

Variable names in help popup are not readable with the light theme:

P.S. I've finally got a time slot to work on this plugin, so, if you have no time, this PR can be merged as is and I will make changes in a different PR.

[JoaquinJimenezGarcia]

Hi @diafour !

Thank you very much for your time and review the code! I would really appreciate if you could merged the PR and make the changes in a different one due currently I am working in another PR for the pluggin (this new one allows to paginate the elements in the panel). Anyway I could assist you in any point you could need.

Thank you very much in advance!