grafana share 页面链接

朱雀 2021-05-12 11:50 740阅读 0赞

grafana是一款不错的图表展示软件，通常将一些监控数据写入到graphite或者其他时序数据库中，然后通过grafana来展示图表。有时，我们需要在内部的系统中展示grafana中的某些图表（panel）或者dashboard，grafana正好提供了share功能，提供一个url连接，允许我们在其他系统中引入。

官方文档：[https://grafana.com/docs/grafana/latest/linking/linking-overview/][https_grafana.com_docs_grafana_latest_linking_linking-overview]

接下来，我们做一个分享panel的示范。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70][]

点击share后，进入分享设置页面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 1][]

panel可以作为Link（一个页面url）、Embed（iframe代码），以及生成图片url 三种分享模式。

在url中可以通过参数来设置一些属性：

*  from： Defines the lower limit of the time range, specified in ms epoch.
 *  to：Defines the upper limit of the time range, specified in ms epoch.
 *  time and time.window： Define a time range from time-time.window/2 to time+time.window/2. Both params should be specified in ms. For example ?time=1500000000000&time.window=10000 will result in 10s time range from 1499999995000 to 1500000005000.
 *  theme：dark、light

将url粘贴到浏览器或者ifram的代码粘贴到其他系统中，就可以展示分享的页面了。

有的时候，我们在panel中使用了grafana的template功能，如果要分享这样的panel，就不能使用ifram了，可以使用url展示分享panel，但是默认这个页面会带有导航栏，如果将这样的页面引入到其他系统中非常的不协调。如何去掉呢？

可以在url连接后面添加&kiosk即可解决。我们对比一下效果；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 2][]

添加&kiosk后：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 3][]

协调了许多。

参考github的issue：[https://github.com/grafana/grafana/issues/11875][https_github.com_grafana_grafana_issues_11875]

在官方查了一下kiosk这个参数，得知grafana支持TV-mode和kiosk-mode（信息亭）两种UI显示模式。

*  TV-mode：在电视模式下，顶部导航栏，行和面板控件将全部淡化为透明（自动识别的）
 *  kiosk-mode：导航栏完全隐藏/从视图中删除。（添加&kiosk指定）

[https://grafana.com/docs/grafana/latest/guides/whats-new-in-v4/\#tv-mode-and-kiosk-mode][https_grafana.com_docs_grafana_latest_guides_whats-new-in-v4_tv-mode-and-kiosk-mode]

[https://grafana.com/docs/grafana/latest/dashboards/playlist/\#share-a-playlist-in-a-view-mode][https_grafana.com_docs_grafana_latest_dashboards_playlist_share-a-playlist-in-a-view-mode]

并且有一个单独的github项目：[https://github.com/grafana/grafana-kiosk][https_github.com_grafana_grafana-kiosk]

[https_grafana.com_docs_grafana_latest_linking_linking-overview]: https://grafana.com/docs/grafana/latest/linking/linking-overview/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70]: /images/20210511/5372e8d62a054bf7bf6e7fae336ef9dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 1]: /images/20210511/b610a89d50684860bbb47a8bcd60b7c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 2]: /images/20210511/64a2db8b1c744198aca12945bfca14bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 3]: /images/20210511/35a5c640fba44d52b1bd4bdab229d731.png
[https_github.com_grafana_grafana_issues_11875]: https://github.com/grafana/grafana/issues/11875
[https_grafana.com_docs_grafana_latest_guides_whats-new-in-v4_tv-mode-and-kiosk-mode]: https://grafana.com/docs/grafana/latest/guides/whats-new-in-v4/#tv-mode-and-kiosk-mode
[https_grafana.com_docs_grafana_latest_dashboards_playlist_share-a-playlist-in-a-view-mode]: https://grafana.com/docs/grafana/latest/dashboards/playlist/#share-a-playlist-in-a-view-mode
[https_github.com_grafana_grafana-kiosk]: https://github.com/grafana/grafana-kiosk