通过iFrame嵌入Grafana页面或pannel

前言

在当前数据驱动的时代,有效地可视化和监控关键性能指标变得至关重要。Grafana,作为一个开源的监控解决方案,提供了强大的功能来呈现和分析数据,从而帮助用户及时洞察和响应各种情况。随着技术的不断发展,将这些信息无缝集成到现有的网页和应用程序中变得越来越常见。本文旨在探讨如何通过iFrame将Grafana面板或仪表盘嵌入到网页中,这不仅增强了数据的可访问性和交互性,还为实现更加动态和个性化的用户体验打开了大门。通过这篇文章,我们将详细介绍嵌入Grafana面板的步骤和注意事项,帮助读者更好地利用这一强大工具,以便更有效地监控和展示关键数据。

1. 修改Grafana配置

1.1 允许grafana匿名访问

shell 复制代码
vim /etc/grafana/grafana.ini

相关内容及参考修改如下:

ini 复制代码
#################################### Anonymous Auth ######################
[auth.anonymous]
# enable anonymous access
enabled = true

# specify organization name that should be used for unauthenticated users
org_name = Test

# specify role for unauthenticated users
org_role = Viewer

1.2 允许被iFrame嵌入

shell 复制代码
vim /etc/grafana/grafana.ini

内容如下:

ini 复制代码
# set to true if you want to allow browsers to render Grafana in a <frame>, <iframe>, <embed> or <object>. default is false.
;allow_embedding = false

将上述配置前面的;移除,同时改为true,即:

ini 复制代码
allow_embedding = true

2. 嵌入其他工程

2.1 Dashboard页面嵌套链接获取

grafana具体Dashboard页面,右上角分享按钮点开有链接,拷贝后作为iframe的url

或者可以通过快照导入,生成本地快照,拷贝快照链接,作为ifame的url即可

2.2 Pannel组件嵌入链接获取

针对具体pannel,其嵌入其他页面的链接可在其自己组件的分享界面获取

2.3 嵌入代码示意

前端通过iframe嵌入grafana对应信息块pannel的示例代码如下:

html 复制代码
<!DOCTYPE html>
<html>
  <body>
      <!-- IP数据隐藏,此处只是示意 -->
      <iframe
      src="http://xxx.xxx.xxx.xxx:3000/d-solo/uid001/xxxxxxxxxxx?orgId=1&from=1588146683228&to=1588150283228&var-job=All&var-hostname=All&var-node=All&var-maxmount=%2Fetc%2Fnode-exporter&var-env=&var-name=&var-CR_UID=uid001&panelId=7"
      width="450"
      height="200"
      frameborder="0"
    ></iframe>

    <p>测试ifame嵌套。</p>
  </body>
</html>

2.4 效果图

效果图如下:

3. 注意

该方式下,需要注意安全性和访问权限: 如果您的Grafana面板包含敏感数据,确保嵌入到的网站是安全的,并且只有授权用户才能访问。此外,根据您的Grafana配置,您可能需要对访问Grafana的用户进行身份验证。


【星猿杂谈】:在这里我们共同探索科技新趋势,分享积累的点滴,从编程语言到系统架构,从人工智能到高性能计算,我们追求技术的进步,同时珍视分享的力量。欢迎关注我们,在技术的精彩世界中一起遨游,发现更多未知!

相关推荐
虚拟指尖9 分钟前
Ubuntu编译安装COLMAP【实测编译成功】
linux·运维·ubuntu
刘某的Cloud1 小时前
parted磁盘管理
linux·运维·系统·parted
啊?啊?1 小时前
4 解锁 Linux 操作新姿势:man、grep、tar ,创建用户及添加权限等 10 大实用命令详解
linux·服务器·实用指令
程序员老舅1 小时前
干货|腾讯 Linux C/C++ 后端开发岗面试
linux·c语言·c++·编程·大厂面试题
爱倒腾的老唐2 小时前
24、Linux 路由管理
linux·运维·网络
程序员Aries2 小时前
自定义网络协议与序列化/反序列化
linux·网络·c++·网络协议·程序人生
泽02022 小时前
Linux之环境变量
java·linux·redis
正在努力的小河2 小时前
Linux 自带的 LED 灯驱动实验
linux·运维·服务器
檀越剑指大厂3 小时前
【Linux系列】Vim 中删除当前光标到行尾
linux·运维·vim
qiuiuiu4134 小时前
正点原子RK3568学习日志-编译第一个驱动程序helloworld
linux·c语言·开发语言·单片机