• -------------------------------------------------------------
  • ====================================

Grafana基础:集成方法之页面嵌入

建站指南 dewbay 2年前 (2022-07-04) 5361次浏览 已收录 0个评论 扫描二维码

前面的文章介绍一下如何在Grafana中设定匿名登录的方式,然后直接跳转到Grafana中即可,但是这种方法需要在Grafana和其他系统中跳来跳去。实际上Grafana可以直接通过 iframe 等方式嵌入到其他系统页面中,这篇文章通过具体介绍一下相应的方法。

示例准备
可以自行准备任何Grafana的使用示例,本文使用 Prometheus 下使用 Node Exporter 的Grafana示例,构建方法可参看:

https://liumiaocn.blog.csdn.net/article/details/104043410
示例代码
监控地址
Grafana 中 Node Exporter 的仪表盘监控地址为:

http://localhost:3000/d/hb7fSE0Zz/1-node-exporter-for-prometheus-dashboard-english-version-update-1102?orgId=1
示例代码
liumiaocn:Desktop liumiao$ cat grafana-demo.html
<!DOCTYPE html>
<html>

<head>
<meta charset=”utf-8″>
<title>Grafana Embeded Demo</title>
</head>

<body>
<iframe src=”http://localhost:3000/d/hb7fSE0Zz/1-node-exporter-for-prometheus-dashboard-english-version-update-1102?orgId=1&#8243; width=”1280″ height=”860″ frameborder=”0″>
</iframe>
</body>

</html>liumiaocn:Desktop liumiao$

设定方法
需要注意的是虽然 Grafana 提供了嵌入的方法,缺省情况下次选项是关闭的,需要将相应的选项打开

设定项 缺省设定 详细说明
allow_embedding false 是否允许匿名登录
其他设定选项说明可参看:

https://liumiaocn.blog.csdn.net/article/details/104027047
修改设定
本文示例使用了 Grafana 的官方镜像,首先需要使用类似如下的命令进入到已经启动的容器之中:

liumiaocn:config liumiao$ docker exec -it grafana sh
/usr/share/grafana $ ls
LICENSE NOTICE.md README.md VERSION bin conf public scripts tools
/usr/share/grafana $ cd conf
/usr/share/grafana/conf $ ls
defaults.ini ldap.toml ldap_multiple.toml provisioning sample.ini
/usr/share/grafana/conf $

修改/usr/share/grafana/conf 下的缺省配置文件 defaults.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

可以看到,缺省状态下,allow_embedding 设定为 false,这里可以使用直接修改缺省设定的方式,将 allow_embedding 设定为 true 即可。需要注意的是这种方式进入容器之中是无法修改此文件的,所以我们以 root 身份进入容器,可参照如下日志中的示例命令进行操作

liumiaocn:config liumiao$ docker exec -u root -it grafana sh
/usr/share/grafana # cd conf
/usr/share/grafana/conf # vi defaults.ini
/usr/share/grafana/conf # grep allow_embedding defaults.ini
allow_embedding = true
/usr/share/grafana/conf #

设定之后,需要重启 Grafana 服务方可生效

liumiaocn:config liumiao$ docker restart grafana
grafana
liumiaocn:config liumiao$

结果确认
双击通过浏览器打开上述 HTML 页面,可以看到在 HTML 页面中嵌入的 Grafana 仪表盘信息如下所示

Grafana基础:集成方法之页面嵌入
常见问题
现象
页面使用 iframe 显示的地方无法正常显示,鼠标悬停时会提示 connection refused。

原因
如果 allow_embedding 未设定或者尚未重启服务生效的情况下,页面嵌入可能无法正常显示,提示 conneciton refused。这是因为缺省情况下 allow_embedding 设定未 false 情况下,grafana 会在响应的报文头部将 X-Frame-Options 选项设定未 deny,这种情况下就不会允许使用 iframe 等方式进行嵌入。

对应方法
设定 allow_embedding 选项为 true 并重启 Grafana 服务即可

总结
可以通过 iframe 等方式集成已经创建的 Grafana 的监控页面,本文的示例将整个 Dashboard 进行了集成,但是实际使用的时候可以更加灵活,比如仅仅嵌入其中一个 Panel 等方式,这些在 Grafana 中都是支持的。

参考内容
https://grafana.com/docs/grafana/latest/installation/configuration/#allow-embedding


露水湾 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Grafana基础:集成方法之页面嵌入
喜欢 (3)
[]
分享 (0)
关于作者:
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址