前面的文章介绍一下如何在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″ 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 仪表盘信息如下所示
常见问题
现象
页面使用 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