Graph: Add data links feature (click on graph) (#17267)
* WIP: initial panel links editor * WIP: Added dashboard migration to new panel drilldown link schema * Make link_srv interpolate new variables * Fix failing tests * Drilldown: Add context menu to graph viz (#17284) * Add simple context menu for adding graph annotations and showing drilldown links * Close graph context menu when user start scrolling * Move context menu component to grafana/ui * Make graph context menu appear on click, use cmd/ctrl click for quick annotations * Move graph context menu controller to separate file * Drilldown: datapoint variables interpolation (#17328) * Add simple context menu for adding graph annotations and showing drilldown links * Close graph context menu when user start scrolling * Move context menu component to grafana/ui * Make graph context menu appear on click, use cmd/ctrl click for quick annotations * Add util for absolute time range transformation * Add series name and datapoint timestamp interpolation * Rename drilldown link variables tot snake case, use const values instead of strings in tests * Bring LinkSrv.getPanelLinkAnchorInfo for compatibility reasons and add deprecation warning * Rename seriesLabel to seriesName * Drilldown: use separate editors for panel and series links (#17355) * Use correct target ini context menu links * Rename PanelLinksEditor to DrilldownLinksEditor and mote it to grafana/ui * Expose DrilldownLinksEditor as an angular directive * Enable visualization specifix drilldown links * Props interfaces rename * Drilldown: Add variables suggestion and syntax highlighting for drilldown link editor (#17391) * Add variables suggestion in drilldown link editor * Enable prism * Fix backspace not working * Move slate value helpers to grafana/ui * Add syntax higlighting for links input * Rename drilldown link components to data links * Add template variabe suggestions * Bugfix * Fix regexp not working in Firefox * Display correct links in panel header corner * bugfix * bugfix * Bugfix * Context menu UI tweaks * Use data link terminology instead of drilldown * DataLinks: changed autocomplete syntax * Use singular form for data link * Use the same syntax higlighting for built-in and template variables in data links editor * UI improvements to context menu * UI review tweaks * Tweak layout of data link editor * Fix vertical spacing * Remove data link header in context menu * Remove pointer cursor from series label in context menu * Fix variable selection on click * DataLinks: migrations for old links * Update docs about data links * Use value time instead of time range when interpolating datapoint timestamp * Remove not used util * Update docs * Moved icon a bit more down * Interpolate value ts only when using __value_time variable * Bring href property back to LinkModel * Add any type annotations * Fix TS error on slate's Value type * minor changes
This commit is contained in:
Torkel Ödegaard
@@ -35,20 +35,35 @@ The general tab allows customization of a panel's appearance and menu options.
|
||||
### Repeat
|
||||
Repeat a panel for each value of a variable. Repeating panels are described in more detail [here]({{< relref "../../reference/templating.md#repeating-panels" >}}).
|
||||
|
||||
### Drilldown / detail link
|
||||
### Data link
|
||||
|
||||
The drilldown section allows adding dynamic links to the panel that can link to other dashboards
|
||||
or URLs.
|
||||
Data link in graph settings allows adding dynamic links to the visualization. Those links can link to either other dashboard or to an external URL.
|
||||
|
||||
Each link has a title, a type and params. A link can be either a ``dashboard`` or ``absolute`` links.
|
||||
If it is a dashboard link, the `dashboard` value must be the name of a dashboard. If it is an
|
||||
`absolute` link, the URL is the URL to the link.
|
||||
{{< docs-imagebox img="/img/docs/data_link.png" max-width= "800px" >}}
|
||||
|
||||
``params`` allows adding additional URL params to the links. The format is the ``name=value`` with
|
||||
multiple params separated by ``&``. Template variables can be added as values using ``$myvar``.
|
||||
Data link is defined by title, url and a setting whether or not it should be opened in a new window.
|
||||
|
||||
When linking to another dashboard that uses template variables, you can use ``var-myvar=value`` to
|
||||
populate the template variable to a desired value from the link.
|
||||
**Title** is a human readable label for the link that will be displayed in the UI. The link itself is accessible in the graph's context menu when user **clicks on a single data point**:
|
||||
|
||||
{{< docs-imagebox img="/img/docs/data_link_tooltip.png" max-width= "800px" >}}
|
||||
|
||||
**URL** field allows the URL configuration for a given link. Apart from regular query params it also supports built-in variables and dashboard variables that you can choose from
|
||||
available suggestions:
|
||||
|
||||
{{< docs-imagebox img="/img/docs/data_link_typeahead.png" max-width= "800px" >}}
|
||||
|
||||
|
||||
Available built-in variables are:
|
||||
|
||||
1. ``__all_variables`` - will add all current dashboard's variables to the URL
|
||||
2. ``__url_time_range`` - will add current dashboard's time range to the URL (i.e. ``?from=now-6h&to=now``)
|
||||
3. ``__series_name`` - will add series name as a query param in the URL (i.e. ``?series=B-series``)
|
||||
4. ``__value_time`` - will add datapoint's timestamp (Unix ms epoch) to the URL (i.e. ``?time=1560268814105``)
|
||||
|
||||
|
||||
#### Template variables in data links
|
||||
When linking to another dashboard that uses template variables, you can use ``var-myvar=${myvar}`` syntax (where ``myvar`` is a name of template variable)
|
||||
to use current dashboard's variable value.
|
||||
|
||||
## Metrics
|
||||
|
||||
|
||||
Reference in New Issue
Block a user