Grafana Plugin: 支持 jsx 实时渲染的 grafana 面板插件

本文涉及的产品
可观测可视化 Grafana 版,10个用户账号 1个月
云拨测,每月3000次拨测额度
简介: A JSX real-time rendering grafana panel plugin. / 一个支持 JSX 实时渲染的 grafana 面板插件

背景

灵感来源于最近看到一个 aliyun grafana 托管版的客户通过 html 插件弄了个高度定制的自定义大盘,客户在使用这个 html 插件时手写了大量 dom,然后再用原生 js 手动操作 dom 展示数据,实在过于繁琐,没个前端 20 年功力感觉真搞不出来,另外这个 HTML 插件用的还是老的 angular 框架,grafana 官方在新开源版本也不再支持了。

那有没有一种方法可以让我用 “现代一点” 的 jsx 语法写 react 组件来自定义 grafana 面板呢?

How?

熟悉低代码的同学可能早就想到了,搞个 jsx 实时渲染组件,核心就三步:

  1. 用 monaco 提供代码编辑器
  2. 用 babel 提供转码编译
  3. 执行渲染

Create grafana plugin

在 grafana 中所有可扩展形态都被设计成插件,面板也是一个插件,我们用 grafana 官方提供好的 cli 工具链创建一个 panel plugin,启动调试会起一个完整的 grafana 容器,需要提前装好 docker。

代码编辑器

代码编辑器在 grafana 官方开源组件库 @grafana/ui 已经有提供好的现成组件,因为 grafana 提供 dark/light 俩套主题,方便适配主题样式,直接用官方提供的 code editor 组件就好(其实这个组件底层也是用的 monaco 内核):

import { CodeEditor as GrafanaCodeEditor } from '@grafana/ui';

因为  monaco 本身不支持 jsx 语法,还需要加一些黑魔法配置:

const onBeforeEditorMount = (monaco: typeof monacoType) => {
  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.Latest,
    allowNonTsExtensions: true,
    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
    module: monaco.languages.typescript.ModuleKind.CommonJS,
    noEmit: true,
    esModuleInterop: true,
    jsx: monaco.languages.typescript.JsxEmit.React,
    reactNamespace: "React",
    allowJs: true,
    typeRoots: ["node_modules/@types"],
  });
  monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
    noSemanticValidation: false,
    noSyntaxValidation: false,
  });
  monaco.languages.typescript.typescriptDefaults.addExtraLib(
    // Type definitions for React 16.9
    ReactTypes,
  );
}

实时编译

babel 提供了一个可在浏览器执行的版本 @babel/standalone,可以在浏览器环境实时编译 es6 代码,使用非常方便。

const compiled = Babel.transform(source, { presets: ['env', 'react'] }).code;

Grafana 插件最终构建出来的是 amd 产物,实际使用时会被 grafana 主应用使用 systemjs 加载进来,类似于微前端的加载方式,因为 @babel/standalone npm 包实际提供的一份 umd 格式产物,导致如果我们在项目中直接 require  npm 包的方式,会由于不同 grafana systemjs 配置不同,只能在开源 grafana 最新的 v10.0.x 版本正常使用,所以推荐使用 @babel/standalone 还是用 cdn js 的方式引入。

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

执行渲染

最后一步,拿到 babel 编译后的代码之后,通过 new Function 的方式起一个执行容器执行渲染。

为了方便更好的构建自定义 react 组件,这里函数组件参数透传除了常用的 panel props 如 数据源 data,还透传了 @grafana/ui 完整的组件库,可以在预置好的函数内直接使用。

结语

Jsx 组件在 aliyun grafana 共享版已经发布了,初版仅仅够用还比较简陋

如果想要部署到自托管的的 grafana 上,代码已开源,欢迎使用: https://github.com/foginn/grafana-jsx-panel

目录
相关文章
|
13天前
阿里云Grafana服务支持一键安装Grafana插件
阿里云Grafana服务支持一键安装Grafana插件
92 2
使用使用grafana中文插件
使用使用grafana中文插件
2399 0
使用使用grafana中文插件
|
13天前
阿里云Grafana服务支持一键安装Grafana插件
【2月更文挑战第12天】阿里云Grafana服务支持一键安装Grafana插件
36 4
|
13天前
|
SQL 数据可视化 应用服务中间件
[SLS开源兼容系列] 使用Grafana ES插件访问SLS
场景如果您厌倦了使用SQL来做Grafana图表,现在SLS刚好实现了ES接口兼容,可以使用GrafanaES来连。可以获得以下特性不需要安装GrafanaSLS的插件,使用Grafana自带的ES插件即可使用ES插件配置图表,不需要写SQL就可以快速配置漂亮的图表
127 2
|
5月前
|
Prometheus Kubernetes Cloud Native
k8s grafana 安装插件配置
k8s grafana 安装插件配置
164 1
|
9月前
Grafana 中,可以使用以下参数来限制用户对面板参数的修改
在 Grafana 中,可以使用以下参数来限制用户对面板参数的修改: 1. `kiosk`:如上所述,该参数可用于启用全屏模式,以隐藏浏览器的地址栏和工具栏,防止用户访问和修改面板参数。 2. `edit`:该参数用于禁止用户编辑面板。当使用 `edit` 参数时,用户将无法修改面板的布局、查询和其他配置选项。 3. `viewPanel`:该参数用于将面板设置为只读模式,以防止用户编辑面板。当使用 `viewPanel` 参数时,用户无法修改面板的任何设置,只能查看面板的内容。 这些参数可以单独使用,也可以同时使用,以提供更严格的限制。要使用这些参数,只需将它们添加到 Grafana
430 0
|
9月前
|
SQL 运维 监控
【运维知识进阶篇】Zabbix5.0稳定版详解11(在Grafana中使用Zabbix插件:安装Grafana+安装Zabbix插件+添加数据源+Grafana直连MySQL数据库取值)(下)
【运维知识进阶篇】Zabbix5.0稳定版详解11(在Grafana中使用Zabbix插件:安装Grafana+安装Zabbix插件+添加数据源+Grafana直连MySQL数据库取值)(下)
128 1
|
9月前
|
运维 监控 数据可视化
【运维知识进阶篇】Zabbix5.0稳定版详解11(在Grafana中使用Zabbix插件:安装Grafana+安装Zabbix插件+添加数据源+Grafana直连MySQL数据库取值)(上)
【运维知识进阶篇】Zabbix5.0稳定版详解11(在Grafana中使用Zabbix插件:安装Grafana+安装Zabbix插件+添加数据源+Grafana直连MySQL数据库取值)
271 0
|
10月前
|
Prometheus 监控 Cloud Native
【实战】CentOS7 Prometheus+Grafana面板搭建+监控node_exporter+监控mysqld_exporter
有3台主机(CentOS7): 192.168.188.100 服务端 192.168.188.101 客户端 192.168.188.102 客户端 100部署Prometheus(9090)+Grafana(3000) 101部署node_exporter(39100)模块,监控该服务器所用资源情况 102部署mysqld_exporter(39200)模块,监控该服务器上的数据库使用情况
612 0
阿里云grafana插件管理
Grafana服务支持一键安装Grafana插件,安装好的Grafana插件将会同步显示到Grafana的Plugins页面。本文介绍如何在Grafana服务中安装Grafana插件。
543 0
阿里云grafana插件管理

相关产品

  • 可观测可视化 Grafana 版