grafana添加html无法保存,【解决方案】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可返回(必要时候可以禁用按键))

addEvent.jpg

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

load.png

特点

加载快(因为只有一个iframe，资源文件只需加载一次)

配置方便(一个dashboard内有N个panel，只需配置一个dashboard地址即可)

整个dashboard内的panel是联动的

方案二、单个panel分享(item)

item.gif

特点

可控制加载顺序(@load)

不会联动(较好伪装)

问题

资源文件多次加载可参考

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

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