grafana实现自己的Panel

序：

学习的初期必定是没有体系的，当我现在告诉你接下来你要干什么，分几步，其实对刚接触Grafana意义不大，但还是要说，因为在宏观上的认知会让你减少踩不必要的坑

1. 知道grafana是干什么的
2. 如何安装grafana
3. 如何搭建自己的grafana插件开发环境
4. 如何部署自己的grafana插件
5. 了解他的开放API

我觉得以上五点，足矣！其实开发流程很简单

正文：

1. grafana是干什么的？

官网：
Grafana: The open observability platform
提到grafana不得不提日志分析平台ELK中的kibana，名称很相似，其实grafana一开始就是kibana的一个分支，弥补kibana没有监控警报的不足
grafana是一款开源的插件化集成可视化，监控，报警等功能的平台工具，也可以理解为开发报表页面和监控报警功能的开发工具，具体使用，还需要你会写一下sql，当然，也可以固化一些固定格式的sql以便用于开发插件

这里可能需要你提前会写一些简单的sql语句以便你后期测试

2. 安装grafana

这里只描述mac版，其他版本大差不差

2.1. 下载grafana

官方下载地址：
Download Grafana | Grafana Labs
选择对应的版本下载

使用命令行工具下载，就可以按照官网提示复制运行等待即可
这里mac推荐一款下载工具：NeatDownloadManager，下载速度会快很多

复制文件下载链接：
https://dl.grafana.com/enterprise/release/grafana-enterprise-9.0.2.darwin-amd64.tar.gz
下载

2.2. 解压tar -zxvf grafana-enterprise-9.0.2.darwin-amd64.tar.gz

2.3. 配置项

在运行之前，先要基本了解它的一些配置项，为什么要先配置，因为不想你到时候找不到你的文件位置在哪里，还能对你的电脑文件位置有所了解，待会开发插件时需要用到一些路径
grafana在mac上默认读取的是path(解压后的文件夹)/conf/default.ini，我们改默认的就好，记得备份 cp defaults.ini defaults.ini.bak

打开defaults.ini

1. 修改app_mode

# possible values : production, development
app_mode = development

app_mode为development模式，这样在一会开发插件时就不需要重启grafana了

2. 修改paths

找到[paths]分组，修改一些关键数据为你已知的文件夹

#################################### Paths ###############################
[paths]
# Path to where grafana can store temp files, sessions, and the sqlite3 db (if that is used)
data = /Users/zhaozhou/Documents/ENHE/MDMS/grafana/server/temp/data

# Directory where grafana can store logs
logs = /Users/zhaozhou/Documents/ENHE/MDMS/grafana/server/temp/data/log

# Directory where grafana will automatically scan and look for plugins
plugins = /Users/zhaozhou/Documents/ENHE/MDMS/grafana/server/temp/data/plugins

这里我为了省事重复使用了绝对路径，你也可以使用相对路径，也可以定义一个变量来读取你的路径

主要记住plugins这个路径

3. 修改plugins

找到[plugins]分组，启动未签名插件

[plugins]
# 如果你想测试还没有准备好普遍使用的 alpha 插件，设置为 true。默认是假的。
enable_alpha = true
# 输入一个逗号分隔的插件标识符列表，以识别要加载的插件，即使它们是无符号的。修改签名的插件永远不会被加载。
allow_loading_unsigned_plugins = 插件名1,插件名2
# 只对 Grafana 管理员开放，默认情况下插件管理应用设置为 false。设置为 true 以启用应用程序。
plugin_admin_enabled = true
# 如果您想启用外部插件管理，请设置为 true。默认是假的。这只适用于 Grafana Cloud 用户。
plugin_admin_external_manage_enabled = true

4. 匿名访问

1. 开启allow_embedding 允许页面嵌入
2. 开启auth.anonymous 允许匿名登录

2.4. 启动grafana

先启动一次grafana，会按照你配置的内容自动创建一些文件夹，不需要你手动去创建

启动完成后，它监听的端口是3000，通过localhost:3000即可访问，默认的用户是admin/admin

3. 搭建开发环境

其实上面的配置项已经做了一些环境的操作了，接下来就是插件的环境搭建了
工具：node.js

1. 进入到你刚刚配置的paths分组下的plugins文件夹

npx @grafana/toolkit plugin:create my-plugins

这里使用npx,如果你没有@grafana/toolkit会帮助你下载该模块，也可以提前安装该模块,按照提示选择Panel Plugin,然后一步一步往下即可

这样开发开发环境就建好了

使用ide打开这个工程
这是一个ts工程，先安装依赖进入终端执行yarn

文件结构

src
├── module.ts # 模块入口，通过它你的面版才能生效
├── plugin.json # 插件能被识别的重要文件，通常情况下不需要你去改什么
├── SimplePanel.tsx # 你的面板文件
└── types.ts # 泛型文件

注意：

1. 你的插件文件根目录在你配置过的plugins路径下
2. 你的grafana是以development方式启动
3. 你的插件在配置文件中allow_loading_unsigned_plugins = my-plugin已经定义过了,如果没有，停掉grafanaf服务，然后加上你的插件，插件名称在你刚刚创建插件文件时的提示内容中找到，然后重启你的grafana

4. 启动

这就简单了，进入到项目中，执行yarn start

启动完成后，浏览器打开grafana，新建dashboard，然后新建一个panel，在上方选择面板的时候，就可以看到你的插件了，并且标识未签名状态

5. 打包

写完你的面板之后，通过yarn build来打包，这里需要注意的是，它通过ESLint来检查你的代码风格，要求非常严格，以至于你的代码可能不能通过lint的检查而无法打包,只需要加上参数–skipLint即可
在package.json中的script

"build": "grafana-toolkit plugin:build --skipLint",

然后再次执行yarn build

6. 部署

打完包后，修改dist文件名称为你的插件名称my-plugin，在服务端的grafana，不需要修改grafana配置文件那么多内容，只需要修改

[plugins]
# 如果你想测试还没有准备好普遍使用的 alpha 插件，设置为 true。默认是假的。
enable_alpha = true
# 输入一个逗号分隔的插件标识符列表，以识别要加载的插件，即使它们是无符号的。修改签名的插件永远不会被加载。
allow_loading_unsigned_plugins = my-plugin
# 只对 Grafana 管理员开放，默认情况下插件管理应用设置为 false。设置为 true 以启用应用程序。
plugin_admin_enabled = true
# 如果您想启用外部插件管理，请设置为 true。默认是假的。这只适用于 Grafana Cloud 用户。
plugin_admin_external_manage_enabled = true

然后将你的dist（my-plugin）放在服务器上的plugins文件夹下，linux默认配置可以通过查看进程来知道
ps -ef | grep grafana

这里对应的plugins文件夹就是/var/lib/grafana/plugins
然后重启grafana，systemctl restart grafana
这里通常不需要自己关注，可以在自己电脑上自己进行测试部署

好了，正文到这里就结束了
相关友情链接：
panel开发API：（从这里开始找吧！）
PanelPlugin
@grafana/ui提供了很多可用的控件，比如monaco，可以自行查看（这里开始找吧）
@grafana/ui

案例自取：grafana-panel实际案例

🎉🎉 完结~