【解决方案】iframe嵌套Grafana如何伪装

事件描述

时间紧急、性能数据采集改造、后端近期无法直接提供数据接口，希望通过grafana直接作为可视化监控，做一层包装且尽可能的伪装。

技术选型

1. Grafana v6.3

2. Vue

安装Grafana

在初次部署的时候，我是使用docker安装，由于后面需要修改配置文件，要把这些文件和数据挂载出来，就遇到一些问题。

所以建议使用本地安装，因为后续修改配置文件比较方便。

安装完成

安装好后的数据源配置之类的自行解决，今天主要说的是关于iframe嵌套解决方案。

修改配置：

grafana配置文件默认在/etc/grafana/grafana.ini，修改以下内容

免登录.png

iframe.jpg

修改loading图标：

loading.png

edit-loading.png

需对/usr/share/grafana/public/views/index.html文件进行如下修改
更换svg，如不需要删除即可。

loading-css.png

更换文字

loading-text.png

使用过的都知道iframe是通过Grafana的share功能生成iframe。

grafana.jpg

share可以大致分为两种：

方案一、 整个dashboard页分享（page）

page.gif

kiosk参数（隐藏工具条，按ESC可返回（必要时候可以禁用按键））

隐藏左侧：http://localhost:3000/d/EgbXS25Zk/xc-dashboard?orgId=1&kiosk=tv
隐藏左侧+上方：http://localhost:3000/d/EgbXS25Zk/xc-dashboard?orgId=1&kiosk
由于禁用esc按键在捕获事件冒泡的时候会被拦截，可以通过postMessage通信修改样式，方法如下：
1.在源文件（/usr/share/grafana/public/views/index.html）添加以下代码

addEvent.jpg

2.自己项目内通过给iframe标签添加@load做后续操作

load.png

特点

1. 加载快（因为只有一个iframe，资源文件只需加载一次）
2. 配置方便（一个dashboard内有N个panel，只需配置一个dashboard地址即可）
3. 整个dashboard内的panel是联动的

方案二、单个panel分享（item）

item.gif

特点

1. 可控制加载顺序（@load）
2. 不会联动（较好伪装）

问题

1. 资源文件多次加载可参考

后面即可根据方案进行组件封装了

只是工作中遇到的一些问题以及解决方案分享，我知道这可能不是一个很好的解决方案，只是做个分享记录，希望对遇到这方面问题的码友们有一点点帮助。