Grafana嵌入页面 Antd Pro(匿名登录,去除边框)

本文档详细介绍了如何将Grafana嵌入到AntdPro页面中,解决X-Frame-Options拒绝问题,以及开启匿名访问和去除边框。主要步骤包括修改Grafana配置文件以允许页面嵌入,开启匿名登录功能,并利用kiosk模式消除边框,实现无缝集成。
摘要由CSDN通过智能技术生成

项目场景:

需求是:要将Grafana嵌入到Antd Pro的页面当中去。


问题描述:

用iframe标签嵌入Grafana的时候,将链接地址放到iframe 里面,但是无法直接不能访问。
会出现下面问题,显示IP拒绝了我们的连接请求。172.17.0.1 in a frame because it set ‘X-Frame-Options’ to ‘deny’。同时需要解决Grafana匿名登录问题和大盘展示时候的边框问题。
172.17.0.1为虚拟机的地址;
在这里插入图片描述


解决方案:

字段允许页功能嵌入
allow_embedding允许页面嵌入
auth.anonymous开启匿名登录
kiosk去除边框

1. 开启allow_embedding 允许页面嵌入

Grafana提供了嵌入的方法,但在默认情况下选项是false关闭的,需要自己将对应的选项设置为true。
具体方法:在docker中进入Grafana容器,进入conf文件夹,找到default.ini文件,然后修改allow_embedding标签为true。
在这里插入图片描述

具体代码修改位置如下:
在这里插入图片描述

2. 开启auth.anonymous 允许匿名登录

设置匿名登录,方便展示。同样去配置文件中,找到[auth.anonymous],将下面的enabled设置为 true。同时将前面的#去掉。
在这里插入图片描述

3. 去除Grafana边框 kiosk

kiosk去除全部边框:
http://172.17.0.1:3000/d/UDdpyzz7z/prometheus-2-0-stats?orgId=1&refresh=1m&kiosk

kiosk=tv去除左侧功能栏,顶部不去除。
http://172.17.0.1:3000/d/UDdpyzz7z/prometheus-2-0-stats?orgId=1&refresh=1m&kiosk=tv

最终展示效果如下:

在这里插入图片描述

  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值