Grafana 嵌入其他平台的实践

2025-04-08

前言

版本:v8.4.7
Grafana 提供了 kiosk 模式,可以将 dashboard 更好的展示在大屏幕上,下面是一篇介绍:
https://grafana.com/blog/2019/05/02/grafana-tutorial-how-to-create-kiosks-to-display-dashboards-on-a-tv/

kiosk 的默认3种模式

kiosk=tv

img

特点:

  1. 保留左上方菜单栏,点击可会弹出dashboard选择的浮窗
  2. 保留右上方的时间范围、刷新、kiosk切换等功能

kiosk=full

img

特点:

  1. 保留左上方菜单栏,点击可会弹出dashboard选择的浮窗
  2. 保留右上方的时间范围、刷新、kiosk切换等功能
  3. 保留新建 Panel、保存面板和设置按钮

kiosk= (值为空)

img

特点:

  1. 仅展示 Panel

改进

kiosk=iframe(新增选项)

img

改进

  • 去掉左上方的菜单栏,防止用户在平台内点击跳到其他页面
  • 去掉Esc键的功能,防止按Esc键跳出kiosk模式
  • 自行开发时间选择按钮,放在面板上面,更加直观,也可以更好的自定义,如添加一个按钮跳转到内部其他监控平台
  • 展示变量选择框,如图中的pod变量,基于Grafana的变量动态查询功能,不需要平台自行查询
  • 向Parent page发送Message,实现在grafana的页面内选择了变量后,可以自动填充到父页面的URL里,实现查询记录保留

详细的代码变更见PR:https://github.com/ryanwuer/grafana/pull/1/files