0%

通过iFrame嵌入Grafana页面或pannel

1. 修改Grafana配置

1.1 允许匿名访问

1
vim /etc/grafana/grafana.ini

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

1
2
3
4
5
6
7
8
9
10
#################################### 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嵌入

1
vim /etc/grafana/grafana.ini

内容如下:

1
2
# 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,即:

1
allow_embedding = true

2. 嵌入其他工程

2.1 Dashboard页面嵌套链接获取

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

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

2.2 Pannel组件嵌入链接获取

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

2.3 嵌入代码示意

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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 效果图

效果图如下:


本节 · 完

坚持原创技术分享,您的支持将鼓励我继续创作!