多种方式在Vue中嵌入Grafana面板

希里安 2023-04-27

3632

关注“希里安”，get更多有用干货！

昨天想了下开发监控模块的思路，有了大致的实现方法，今天都尝试了下，遇到一些问题,记录下：

1、使用iframe引入页面，这是目前最简单高效的方式，但并不是最优方式，原因如下：

安全性：iframe可以被恶意利用,展示钓鱼网站或攻击代码。这会存在安全隐患。

性能影响：iframe会增加页面加载时间和资源消耗。特别是在移动端,会明显感觉到卡顿。

阻塞主线程：iframe的JS代码会阻塞主页面的事件循环,影响交互响应。

隔离作用域：iframe创造了独立的作用域,无法直接访问其内容。需要通过postMessage跨域通信,较为复杂。

控制权限：iframe不受主页面控制,无法直接监听其事件或操控内容。权限由iframe页控制。

我在引入的时候，几种方式如下：

1、一种是这样，直接创建一个页面，iframe是浏览器原生支持的HTML标签,无需依赖任何外部库。您只需要在Vue3组件中这样使用：

浏览器报错1：

Mixed Content: The page at 'https://localhost:3100/#/grafana/index' was loaded over HTTPS, but requested an insecure frame 'http://ip:3000/d/rYdddlPWk/node-exporter-full?orgId=1'. This request has been blocked; the content must be served over HTTPS.

这个原因是vbenadmin精简版自带ssl证书，但是我部署的grafana是没有ssl证书的，访问的时报这个错，所以还得想办法给grafana添加证书，在/etc/Grafana.ini中的server字段配置，并尝试添加免费证书无果。

浏览器报错2：

Refused to display 'http://192.168.64.150:3000/'
in a frame because it set 'X-Frame-Options' to 'deny'

参考别人文章的解决方式：

1、允许跨域

[security.cors]
enabled = true
allowed_origins = https://localhost:3100

2、允许匿名

[auth.anonymous]
enabled = true

3、允许iframe

[rendering]
iframe_allow_from = https://localhost:3100
[rendering]
allow_embedding = true

4、设置浏览器显示混合内容，就是没证书的内容也显示：

Chrome浏览器,输入

chrome://flags/#allow-insecure-localhost

设置无果。

2、使用Grafana的API与Vue3应用进行深度集成,这时需要安装相关依赖,安装这俩:

- grafana/api-datasource - 用于调用Grafana API

- @grafana/ui - Grafana官方Vue组件库

使用Grafana API和UI组件库的主要优点是:

1. 可以在Vue3中创建、修改和删除Grafana仪表板

2. 可以通过Vue3直接读取和更新Grafana仪表板的数据

3. 有更丰富的可视化组件可以使用

4. 可以实现Vue3和Grafana之间的双向交互

但我在安装的时候遇到安装问题，还是增加了集成的难度和依赖项。如果后期别人维护因为因为依赖问题增加难度，所以直接放弃。

但还是摆一下具体的使用方法：

1. 获取Grafana API Key

前往Grafana控制台,点击菜单,点击“Add sa”按钮创建一个新密钥。选择“View”和“Edit”权限,点击“Add”按钮。这将生成一个32字符的API Key,复制它用于后续数据源配置。

2、安装grafana/ui和grafana/api-datasource包

grafana/ui库安装成功了，途中遇到卡住不动，网络问题没办法。

npm install @grafana/ui

但是在安装@grafana/api-datasource有问题，没有成功下载，应该是网络问题。

尝试从淘宝源切至官方源，无果。

npm config set registry https://registry.npmjs.org

3、创建GrafanaAPIDatasource

在src/datasources/GrafanaAPI.ts中:

ts
import { DataSource } from "@grafana/data";
import { DataSourceAPI } from "@grafana/api-datasource";
export class GrafanaAPIDatasource extends DataSourceAPI {
 constructor() {
 super({
 url: "http://your-grafana-url",
 basicAuth: "your-api-key"
 });
 }
}

这里url是Grafana服务器地址,basicAuth是第一步获取的API Key。

4. 注册GrafanaAPIDatasource

在src/datasources/index.ts中:

ts
import { GrafanaAPIDatasource } from "./GrafanaAPI";
export const grafanaAPI = (): GrafanaAPIDatasource => new GrafanaAPIDatasource();

这将GrafanaAPIDatasource注册为grafanaAPI数据源实例。

5. 创建GrafanaPanel组件

在src/components/GrafanaPanel.vue中:

<template>
 <a-spin
:spinning="loading">
 <div
ref="panel" class="grafana-panel" >
 </a-spin>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { PanelPlugin, PanelData, PanelEvents } from '@grafana/ui';
import { grafanaAPI } from '@/datasources';
export default defineComponent({
 name: 'GrafanaPanel',
 setup() {
 const panelData = new
PanelData(grafanaAPI(), { uid: 'panel-uid' });
 const loading = ref(true);
 const panel =
ref<PanelPlugin>();
 onMounted(async () => {
 panel.value = await
panelData.load();
 loading.value = false;
 });
 return {
 loading,
 panel
 };
 }
});
</script>

这里使用PanelData加载指定uid的Grafana面板,并在mounted钩子中获取面板实例panel.value。

6. 在页面使用GrafanaPanel组件

<grafana-panel >

这将在页面上渲染Grafana面板。

7. 编写页面组件并引入GrafanaPanel

<template>
 <a-layout>
<a-layout-sider>Sidebar</a-layout-sider>
 <a-layout>
 <grafana-panel >
 </a-layout>
 </a-layout>
</template>
<script>
import GrafanaPanel from './GrafanaPanel.vue';
export default {
 name: 'Home',
 components: {
 GrafanaPanel
 }
}
</script>

以上是Ant Design布局的页面示例,我们在其中引入了GrafanaPanel组件，看似简单，但是实现没那么简单。

3、直接参考vben admin引入外部页面的方式：

const IFrame = () =>
import('/@/views/sys/iframe/FrameBlank.vue');
{
path: 'doc',
name: 'Doc',
component: IFrame,
meta: {
frameSrc: 'https://vvbin.cn/doc-next/',
title: t('routes.demo.iframe.doc'),
 },
},

还是有点问题，只能再研究下。

4、最后也是目前选取的方式，直接跳转到指定地址，就是类似于超链接的，这么一想也挺好的，直接没有开发量，反正用的都是grafna的看板，还没有风险。

{
path: 'http://garfana-ip ',
name: 'DocExternal',
component: IFrame,
meta: {
title: t('routes.demo.iframe.docExternal'),
 },
}

直接就跳转了。

嗯，具体分享的内容就到这了，后面接着再研究研究。

文章转载自希里安，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

多种方式在Vue中嵌入Grafana面板

评论