使用iframe内嵌grafana监控页面

最新推荐文章于 2024-11-05 17:10:12 发布
原创 最新推荐文章于 2024-11-05 17:10:12 发布 · 1.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#grafana

grafana监控大盘被普遍采用，但一个缺点就是一次只能打开一个页面，切换页面很不便，如果能一次同时展示多个页面就好了，如图：
在这里插入图片描述
使用tab标签，结合iframe，把各个监控页面全放在一起，可以自由切换
但默认grafana是不支持这么做的，需要修改配置如下：

vim grafana.ini
#允许匿名访问 权限为只读 这样就不必登陆
[auth.anonymous]
enabled = true
;org_name = home      #默认组织即可
org_role = Viewer
#还有这里 允许页面嵌入
allow_embedding = true

前端参考，这里用了vue


                

                
                
        

    



  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    

      

        

            

              
                
                  chaodaibing
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
Grafana嵌入iframe,websoket连接报错400或403（nginx代理）

				
			

			

				

					一个行走江湖的人
				

				

					06-28
					
					2073
					
				

			

		

		

			
				
1、custom.ini配置文件修改allowed_origins=*

			
		

	



                

            
              



	

		

			

				
					
iframe嵌套跨域grafana,前端如何自定义隐藏模块

				
			

			

				

					miin_ying的博客
				

				

					10-24
					
					3267
					
				

			

		

		

			
				
iframe嵌套跨域grafana,前端如何自定义隐藏模块

			
		

	



              


  
              

                


	

		

			

				
					
解决 iframe 嵌入 grafana 问题

					
热门推荐

				
			

			

				

					不懂一休
				

				

					11-11
					
					2万+
					
				

			

		

		

			
				
grafana 所有配置参考官网https://grafana.com/docs/grafana/latest/administration/configuration/
一、添加仪表盘
首先启动 grafana 添加一个仪表盘，为了测试简单我是用的  grafana 自带的

二、test.html 测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>grafanna&lt

			
		

	





	

		

			

				
					
通过iFrame嵌入Grafana页面或pannel

				
			

			

				

					星猿科技的博客
				

				

					01-06
					
					6058
					
				

			

		

		

			
				
grafana具体Dashboard页面，右上角分享按钮点开有链接，拷贝后作为iframe的url。或者可以通过快照导入，生成本地快照，拷贝快照链接，作为ifame的url即可。针对具体pannel，其嵌入其他页面的链接可在其自己组件的分享界面获取。

			
		

	



		

			
		



	

		

			

				
					
将Grafana页面嵌入自建Web应用页面

				
			

			

				

					我有一枚大大大太阳
				

				

					04-29
					
					3498
					
				

			

		

		

			
				
Grafana页面嵌入自建Web应用页面

			
		

	





	

		

			

				
					
iframe嵌套grafana （前端视角）

				
			

			

				

					miin_ying的博客
				

				

					05-06
					
					4237
					
				

			

		

		

			
				
iframe嵌入grafana，必要了解

			
		

	





	

		

			

				
					
网页通过iframe嵌入grafana

				
			

			

				

					qq_43159578的博客
				

				

					03-29
					
					3652
					
				

			

		

		

			
				
进入grafana容器


docker exec -u root -it grafana sh

修改/usr/share/grafana/conf下的缺省配置文件defaults.ini

我们添加参数： cfg:default.security.allow_embedding=true 后在 iframe 里面可以显示出来了。
但是登录不上，提示登录成功，但是还是回到了登录界面。
添加匿名登录的参数： cfg:default.auth.anonymous.enabled=true 界面就出来了，
我们

			
		

	





	

		

			

				
					
Grafana链接iframe嵌入Web前端一直跳登录页面的问题记录

				
			

			

				

					qq_38189542的博客
				

				

					09-29
					
					1971
					
				

			

		

		

			
				
公司有个项目使用到Grafana作为监控界面，因为项目方的环境极其复杂，仅物理隔离的环境就有三四个，而且每个都得部署项目，今天在某个环境测试，查看界面遇到一个比较奇怪的Grafana问题，后面针对该问题进行跟踪分析并解决，故而博文记录，用于备忘。

			
		

	





	

		

			

				
					
自主系统通过iframe 嵌入 grafana 仪表板（dashboard）

				
			

			

				

					manba_24的专栏
				

				

					08-01
					
					2420
					
				

			

		

		

			
				
使用iframe方式嵌入dashboard主要会遇到以下几个问题：1、iframe方式嵌入dashboard跳转拒绝访问；2、浏览器控制台报错：Refused to display 'http://{ip:port}/' in a frame because it set 'X-Frame-Options' to 'deny'；3、跳转之后依然需要登录；......以上有些问题，可以通过修改配置文件相关配置来解决（修改配置文件之后，记得重启grafana服务）

			
		

	





	

		

			

				
					
vue通过iframe方式嵌套grafana图表

				
			

			

				

					cuiwin的专栏
				

				

					11-05
					
					1944
					
				

			

		

		

			
				
我们的前端是vue实现的，监控图表是在grafana中的，需要在项目web页面直接显示grafana。

			
		

	





	

		

			

				
					
MMM-GrafanaEmbedded:将grafana面板嵌入魔术镜中

				
			

			

				

					05-17
				

			

		

		

			
				
MMM-Grafana嵌入[ ]
 grafana的嵌入式面板（需要grafana v6或更高版本）
例子
因斯托尔
cd ~/MagicMirror/modules
 git clone https://github.com/eirikaho/MMM-SystemStatus.git
 配置~/MagicMirror/config/config.js ： 
	{
		module: 'MMM-GrafanaEmbedded',
		position: 'top_right',
		config: {
			id: "",
			host: "",
			port: ""
			dashboardName: "",
			orgId: ,
			panelId: ,
			width: "450",
			height: "200",
			refreshRate: "5m",
			fr

			
		

	





	

		

			

				
					
Grafana页面嵌入及隐藏左侧边栏和顶部菜单栏

				
			

			

				

					Shyllin的博客
				

				

					04-14
					
					8528
					
				

			

		

		

			
				
Grafana页面嵌入及隐藏左侧边栏和顶部菜单栏

			
		

	





	

		

			

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

				
			

			

				

					知行合一 止于至善
				

				

					01-20
					
					2万+
					
				

			

		

		

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

			
		

	





	

		

			

				
					
中间件(19) : grafana图片嵌入页面

				
			

			

				

					Lxinccode的博客
				

				

					06-02
					
					1144
					
				

			

		

		

			
				
>grafana嵌入。

			
		

	





	

		

			

				
					
Grafana图标嵌入第三方系统及可选择四种模式(kiosk)

				
			

			

				

					u012867475的博客
				

				

					12-16
					
					8564
					
				

			

		

		

			
				
一、修改配置让Grafana支持嵌入第三方系统

以下方案默认是安装在linux下的部署(我是在自己的linux测试的).

    Grafana嵌入第三方系统需要解决两个问题，

① 让Grafana支持嵌入第三方系统；

修改配置：

grafana配置文件默认在/etc/grafana/grafana.ini，如果不生效找一下/usr/share/grafana/conf/defaults.ini



                 ...

			
		

	





	

		

			

				
					
Grafana嵌入页面 Antd Pro（匿名登录，去除边框）

				
			

			

				

					o__o__o__o的博客
				

				

					11-11
					
					4688
					
				

			

		

		

			
				
需求是：要将Grafana嵌入到Antd Pro的页面当中去。
用iframe标签嵌入Grafana的时候，将链接地址放到iframe 里面，但是无法直接不能访问。
会出现下面问题，显示IP拒绝了我们的连接请求。172.17.0.1 in a frame because it set 'X-Frame-Options' to 'deny'。同时需要解决Grafana匿名登录问题和大盘展示时候的边框问题。

			
		

	





	

		

			

				
					
grafana嵌入其他网页过程整理

				
			

			

				

					qq_37347802的博客
				

				

					08-20
					
					1386
					
				

			

		

		

			
				
文件中搜索命令:        /enable anonymous access。将文件拷贝进docker容器(f07fb90ee0ba是容器id)从docker容器拷贝出来(f07fb90ee0ba是容器id)docker容器中文件只读需要将文件拷贝出来编辑后再倒入进去。这个组织name在granafa页面位置，需要admin登录。重启容器(f07fb90ee0ba是容器id)2.修改grafane配置文件。修改匿名登录时候的组织名称。改完导入docker容器。打开iframe嵌套。

			
		

	





	

		

			

				
					
Grafana：web项目的仪表盘嵌入

				
			

			

				

					技术因分享而快乐！
				

				

					03-22
					
					4993
					
				

			

		

		

			
				
需求描述

需要将Grafana中的仪表盘直接取出，嵌入到web项目中作为图表展示。

核心问题

1. 在web项目中，需要登录Grafana后才能显示图表

2.在web项目中，仪表盘有效期过短，失效后显示NoData

解决方法

1. 配置匿名登录

在配置匿名登录时需要同时修改两个配置文件中的内容

2. 主题色调整

3. 工具条隐藏
...

			
		

	





	

		

			

				
					
grafana 嵌入 share链接

				
			

			

				

					weixin_43844239的博客
				

				

					05-26
					
					1790
					
				

			

		

		

			
				
vue项目通过iframe嵌入grafana
1、设置允许iframe嵌入
打开conf/defaults.ini，设置allow_embedding = true
补充：设置允许匿名访问，不需要登录
[auth.anonymous]
enabled = true
2、生成link链接

点击dashboard的share按钮，根据需要选择配置，点击copy复制生成的链接
3、将复制的链接填写入iframe，嵌入成功

隐藏左侧菜单栏，在链接上添加&kiosk=tv

隐藏左侧和顶部，则在链接上添加

			
		

	





	

		

			

				
					
mineru部署在OA端

					
最新发布

				
			

			

				

					11-28
				

			

		

		

			
				
 - 集成监控工具（Prometheus + Grafana）采集指标：  ```yaml  # Prometheus配置示例  scrape_configs:  - job_name: 'mineru'  metrics_path: '/actuator/prometheus'  static_configs:  - targets: ['mineru-...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值