Grafana页面嵌入到其他系统框架

由于自行开发dashboard页面工作量很大，所以考虑借助grafana绘制看板页面，然后嵌入到已有的系统当中，实现此方案需要做如下操作：

一. 设置grafana配置文件：defaults.ini

由于grafana默认配置是：不允许dashboard嵌入到其他框架下，且登录需要用户名密码。所以需要做如下配置：

1.使用nano(或者vi)打开grafana配置文件 2.修改配置：允许嵌入&允许匿名登录改为true

运行grafana容器时，需要将其工作目录/usr/share/grafana，映射到docker本地卷：/var/lib/docker/volumes/grafana_conf/_data，便于持久化，否则容器重启会导致修改失效。（也可以修改/etc/grafana/grafana.ini文件）

二. 获得dashboard链接（可传参）

1. 由于嵌入到其他系统的dashboard页面不需要grafana的左侧菜单栏和上方title栏，所以需要点击右上角的小电脑图标两次即可。

2. 点完效果如下，可以在url上拼接&var-month=2来传递参数，month是变量名称，2是变量值。地址栏的url地址即为此dashboard链接：

前段框架可控制var-month来对此dashboard页面传参。

三、将grafana dashboard页面嵌入现有系统框架

现有的框架是用的vue-vben-admin，它有自己封装好如何去嵌套外来页面，只需在路由页面，新增此页面的路由配置即可，frameSrc中填的就是步骤二分享的链接，代码如下：

    //内嵌到框架中的一个外部链接
    {
      path: 'grafana2',
      name: 'Grafana2',
      component: IFrame,
      meta: {
        frameSrc: 'http://10.87.100.217:3000/d/YWmqn527b/test1?orgId=1&var-month=2&kiosk',
        title: 'Grafan页面2',
      },

最终效果如下：

至此，已经完成了Grafana页面嵌入到其他系统框架的配置。