论grafana如何完美的嵌入项目中

     项目需要监控页面，然而时间紧，任务重，不妨试试将grafana作为监控模块，嵌入到项目中吧。毕竟什么都不用写，只要安装配置好，加个iframe就可以搞定一整套监控，想想就很爽，程序员哪有不懒的。

    安装grafana的步骤，这里不重复了，网上有的是。直接贴上需要修改的地方。

1. 修改 conf/defaults.ini

   187行 allow_embedding = false true   

   313行 enabled =  false true

   319行 org_role = Viewer Editor 需要保留editor的功能。

2. 修改grafana原有loading，替换成自己项目的loading。

   修改grafana安装路径下，/public/views/index.html

   <!--div class="preloader__bounce">
       <div class="preloader__logo"></div>
   </div>-->
   <img src="./public/img/loading.gif" alt="logo"/>
   
   
   

   loading.gif放在grafana安装路径下，/public/img/中。
   

3. 增加代码，控制敲击esc按键，不显示grafana菜单。依然在上述html文件中修改。

   <script>
       document.addEventListener("keydown",function(e){
           var event =e||window.event;
           if(event.keyCode == 27){
               event.returnValue = false;
               event.stopPropagetion();
           }
       },true)
   </script>
   

4. 增加css，用来隐藏顶部部分功能按钮，屏蔽部分鼠标功能，panel上点击title，只可弹出edit和view功能（为了屏蔽不必要链接）。

    .sildermenu__logo{
      pointer-events:none;
   }
   .css-vyoujf{
     pointer-events:none;
   }
   .css-vyoujf .css-132xth5{
     display:none;
   }
   .navbar-page-btn{
     pointer-events:none;
     display:block;
     position:absolute;
     left:0;
   }
   .navbar-buttons--tv{
     display:none;
   }
   .css-1173tf-button{
     display:none;
   }
   .panel-menu>li{
     display:none;
   }
   .panel-menu>li:nth-last-child(7):nth-child(2){
     display:block;
   }
   .view-mode--tv .sildemenu{
     display:none;
   }
   .css-1pa7r7g{
     display:none;
   }
   

5. 修改grafana安装目录下/public/build/grafana.light.***.css,将里面的panel后面的功能按钮屏蔽掉。（我项目用的light模板，所以改的light，用dark的话，去改dark.**.css）

   .dashboard-row__actions{
     display:none;
   }
   

6. 创建grafana监控链接。点击share按钮，分享链接。url后面需要增加&kiosk=tv。去掉from=***&to=***。

    7.在你的项目中添加一个iframe，将url设置成上步骤的url。需要注意的是，滚动条请使用grafana自己的，所以你的iframe要定高。至于为什么，你自己试试就知道啦。

‍    最后效果如下图：模糊着看吧