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

前面的文章介绍一下如何在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 
Grafana Embeded Demo
		
			
		
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,
		
			,  or. 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