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

程序开发 2023-09-18 18:25:32

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

示例准备

可以自行准备任何Grafana的使用示例，本文使用Prometheus下使用Node Exporter的Grafana示例，构建方法可参看：

示例代码

监控地址

Grafana中Node Exporter的仪表盘监控地址为：

示例代码

liumiaocn:Desktop liumiao$ cat grafana-demo.html 
 
 Grafana Embeded Demo
 	
 liumiaocn:Desktop liumiao$

设定方法

需要注意的是虽然Grafana提供了嵌入的方法，缺省情况下次选项是关闭的，需要将相应的选项打开

设定项缺省设定详细说明allow_embeddingfalse是否允许匿名登录

其他设定选项说明可参看：

修改设定

本文示例使用了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 , , <embed> or <object>. default is false.
 allow_embedding = false                                                             
 ...
 </code></pre> 
 <p>可以看到，缺省状态下，allow_embedding设定为false，这里可以使用直接修改缺省设定的方式，将allow_embedding设定为true即可。需要注意的是这种方式进入容器之中是无法修改此文件的，所以我们以root身份进入容器，可参照如下日志中的示例命令进行操作</p> 
 <pre><code>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 #
 </code></pre> 
 <p>设定之后，需要重启Grafana服务方可生效</p> 
 <pre><code>liumiaocn:config liumiao$ docker restart grafana
 grafana
 liumiaocn:config liumiao$ 
 </code></pre> 
 <h1>结果确认</h1> 
 <p>双击通过浏览器打开上述HTML页面，可以看到在HTML页面中嵌入的Grafana仪表盘信息如下所示<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/20200120065528455.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9saXVtaWFvY24uYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> 
 <h1>常见问题</h1> 
 <h2>现象</h2> 
 <p>页面使用iframe显示的地方无法正常显示，鼠标悬停时会提示connection refused。</p> 
 <h2>原因</h2> 
 <p>如果allow_embedding未设定或者尚未重启服务生效的情况下，页面嵌入可能无法正常显示，提示conneciton refused。这是因为缺省情况下allow_embedding设定未false情况下，grafana会在响应的报文头部将X-Frame-Options选项设定未deny，这种情况下就不会允许使用iframe等方式进行嵌入。</p> 
 <h2>对应方法</h2> 
 <p>设定allow_embedding选项为true并重启Grafana服务即可</p> 
 <h1>总结</h1> 
 <p>可以通过iframe等方式集成已经创建的Grafana的监控页面，本文的示例将整个Dashboard进行了集成，但是实际使用的时候可以更加灵活，比如仅仅嵌入其中一个Panel等方式，这些在Grafana中都是支持的。</p> 
 <h1>参考内容</h1> 
 <p>https://grafana.com/docs/grafana/latest/installation/configuration/#allow-embedding</p>                        </div>
                        <br>
                        <p id="tag-wrap" class="tag-wrap">
                  <i class="fa fa-tags"></i> 标签：</p>
                        <div class="nextlog">
                            上一篇：
                             <a href="/it-vd2g010dd6.html">Module not found: Error: Can‘t resolve ‘stream‘ in</a>
                                                        下一篇：
                                                    </div>
                        <div class="link-box">
                            <p class="title">相关文章</p>
                            <ul class="loglist">
                    			无相关信息                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div id="sidebar">
       <section id="aside_hot" class="widget widget_aside_hot sb br mb">
        <h3><span>热门文章</span></h3>
        <ul class="widget-content aside_hot">
                   <li class="clearfix"><span class="list list-1">1</span><a href="/it-q2w0z1q1q0.html" title="">Grafana基础：集成方法之页面嵌入</a></li>
                   <li class="clearfix"><span class="list list-2">2</span><a href="/it-vd2g010dd6.html" title="">Module not found: Error: Can‘t resolve ‘stream‘ in</a></li>
                   <li class="clearfix"><span class="list list-3">3</span><a href="/it-i2w0y1w0w0.html" title="">学习web app开发，你需要掌握这3个编程语言</a></li>
                   <li class="clearfix"><span class="list list-4">4</span><a href="/it-c20y0yy9v9.html" title="">程序员技能图谱看这一篇就够了</a></li>
                   <li class="clearfix"><span class="list list-5">5</span><a href="/it-u20i0fi9p0.html" title="">02-IDEA 集成Maven</a></li>
                   <li class="clearfix"><span class="list list-6">6</span><a href="/it-2s0s0a8wa8.html" title="">37%的网站都在使用含有漏洞的JavaScript库</a></li>
                   <li class="clearfix"><span class="list list-7">7</span><a href="/it-2giw0gd082.html" title="">Angular4 websocket通讯</a></li>
                   <li class="clearfix"><span class="list list-8">8</span><a href="/it-m20z0e7zz0.html" title="">【uni-app】input组件 @input事件(实时监听输入)传参问题</a></li>
               </ul>
    </section>
    <section id="aside_new" class="widget widget_aside_new sb br mb">
        <h3><span>最新文章</span></h3>
        <ul class="widget-content aside_new">
        	            <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-umy1u03a04.html" title="前端培训技术AngularJS 服务(Service)">前端培训技术AngularJS 服务(Service)</a></li>
        	            <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-x10y3zy0y5.html" title="IDEA性能优化设置（解决卡顿问题）">IDEA性能优化设置（解决卡顿问题）</a></li>
        	            <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-z1z0a31as1.html" title="【Android 开发】：UI控件之 AlertDialog 对话框控件的的使用(一)">【Android 开发】：UI控件之 AlertDialog 对话框控件的的使用(一)</a></li>
        	            <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-o1n0n3z2o0.html" title="分布式架构 前后端交互优化 上篇">分布式架构 前后端交互优化 上篇</a></li>
        	            <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-1fp0p3p2a1.html" title="spring学习之工厂模式">spring学习之工厂模式</a></li>
        	            <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-1yo0y3ki22.html" title="新手教程：您必须了解的15套JavaScript框架与库">新手教程：您必须了解的15套JavaScript框架与库</a></li>
        	            <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-db1d03b2k3.html" title="以SpringBoot作为后台实践ajax异步刷新">以SpringBoot作为后台实践ajax异步刷新</a></li>
        	            <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-103xr2exi7.html" title="React组件复用">React组件复用</a></li>
        	            <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-j1j033zzt2.html" title="JSON.Stringify parse 序列化数据的坑">JSON.Stringify parse 序列化数据的坑</a></li>
        	            <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-r1ry03r3w3.html" title="angularjs实现 - 增加/删除/修改/查询/排序（优化界面）">angularjs实现 - 增加/删除/修改/查询/排序（优化界面）</a></li>
        	
        </ul>
    </section>

    <section id="divTags" class="widget widget_tags sb br mb">
        <h3><span>标签列表</span></h3>
        <div class="widget-content divTags">
            <div class="d_tags">

            </div>
        </div>

    </section>
</div>
        </div>
    </div>
  <div id="footerbar">
    <div class="wrap">
        <span><a href="">素材巴巴</a> Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved.</span>
        <span>备案号：备案中。</a></span>
    </div>
</div>
<div id="backtop"><span class="fa fa-chevron-circle-up"></span></div>
<script src="/skin/sucaibaba/js/common.js" type="text/javascript"></script>
<script src="/skin/sucaibaba/js/scrolltxt.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#croll").textSlider({
            line: 1,
            speed: 1000,
            timer: 3000
        });
    })
</script>  
</body>
</html>