Grafana适配GaussDB开源开发任务

从计划书开始开始

从计划书了解到任务内容，这次的任务是开发Grafana插件：GaussDB数据源插件。

Grafana最主要两个方面功能：

1. 数据可视化
2. 指标监控

从GaussDB的关系型数据库这特性来看，它更适合做数据可视化。

既然Grafana是可视化工具，那么UI是它重要组成部分，它是基于ReactJS开发的，开发插件也需要使用ReactJS实现界面。

那么我们任务需要做的是：使用ReactJS和Go实现GaussDB数据源插件。

适配分析

官网驱动（重要！！！）

官网的驱动 是 openGauss-connector-go-pq 的修改版本。

• 新增了postgres、gaussdb驱动名称注册，使可以用postgres驱动名称接入驱动

Grafana

Grafana是一款开源数据可视化工具，在数据可视化工具中具有很高的热度。

特点

1. 可视化：快速和灵活的客户端图形具有多种选项。面板插件为许多不同的方式可视化指标和日志。
2. 报警：可视化地为最重要的指标定义警报规则。Grafana将持续评估它们，并发送通知。
3. 通知：警报更改状态时，它会发出通知。接收电子邮件通知。
4. 动态仪表盘：使用模板变量创建动态和可重用的仪表板，这些模板变量作为下拉菜单出现在仪表板顶部。
5. 混合数据源：在同一个图中混合不同的数据源!可以根据每个查询指定数据源。这甚至适用于自定义数据源。
6. 注释：注释来自不同数据源图表。将鼠标悬停在事件上可以显示完整的事件元数据和标记。
7. 过滤器：过滤器允许您动态创建新的键/值过滤器，这些过滤器将自动应用于使用该数据源的所有查询。

Grafana提供了数据源插件方式支持扩展。

Grafana官方也提供了很多数据源插件：

• Prometheus
• MySQL
• PostgreSQL
• ClickHouse
• CockroachDB
• 等等等

而最值得我们关注的是PostgreSQL数据源，从GaussDB和PostgreSQL的历史关系来看，GaussDB继承了PostgreSQL的协议和大部分功能。

所以，参考官方的PostgreSQL数据源来编写我们的GaussDB数据源有很大的帮助。

根据对GaussDB的了解，我们可以复用PostgreSQL数据源的绝大部分代码，只需要替换驱动和修改一小部分就能使我们数据源适配GaussDB。

插件分析

适配方案：

1. 创建插件

2. 复用PostgreSQL数据源的前端和大部分Go代码。

3. 使用官网提供的GaussDB驱动替换掉PQ驱动。

开发过程

开发环境

开发Grafana数据源插件对于Window用户来说不太友好，需要用到WSL2或Linux或Mac。

创建一个数据源后端插件的预设环境：

• Grafana v10.0 or later
• Docker
• Go (Version)
• Mage
• LTS version of Node.js

在探索开发环境过程中遇到一些问题：

1. 使用Window与Linux共享目录会因链接或者其他问题导致依赖管理缓慢。
2. 使用yarn会出现依赖丢失问题。

最终开发环境方案是使用Window下的虚拟机，然后使用SFTP同步代码都Linux中。

创建插件

使用@grafana/create-plugin脚手架工具创建插件，Window环境不适用

npx，阔以

npx @grafana/create-plugin@latest

npm，也阔以

npm init @grafana/plugin

pnpm，推荐

pnpm dlx @grafana/create-plugin@latest

yarn，还没成功过

yarn create @grafana/plugin

将存在的项目迁移到新版本，也可以修复一些文件丢失的问题

npx @grafana/create-plugin@latest migrate

插件项目主要结构

./ssk9-gaussdb-datasource/
├── .config                   # webpack、Dockerfile等重要配置，插件生成，不建议修改
├── dist                      # build命令生成的文件夹
├── docker-compose.yaml       # docker compose 配置文件
├── go.mod                    # Go包管理依赖文件
├── go.sum                    # Go包管理依赖变化
├── Magefile.go               # Go Mage，make/rake 的工具
├── node_modules              # JS项目依赖文件
├── package.json              # JS项目管理依赖配置文件
├── pkg                       # 数据源Go代码
│   ├── main.go               # main
│   ├── models
│   │   └── settings.go       # 与前端交互的结构定义文件
│   └── plugin
│       └── datasource.go     # 数据源逻辑文件
├── pkg                  
├── src                       # 数据源前端代码
│   ├── components
│   │   ├── ConfigEditor.tsx  # 数据源配置页面代码
│   │   └── QueryEditor.tsx   # 数据源查询页面代码
│   ├── datasource.ts         # 数据源查询主要逻辑
│   ├── module.ts             # 模块注册，注册ConfigEditor，QueryEditor
│   ├── plugin.json           # 插件信息JSON文件
│   └── types.ts              # 前端交互参数
└── tests                     # 测试相关

关键代码

Go后端代码

• 组合PostgreSQL数据源handler

// Datasour结构体，组合了PostgreSQL数据源handler
type Datasource struct {
  *sqleng.DataSourceHandler
}

• PostgreSQL数据源改成GassDB官网驱动

// 将github.com/lib/pq替换成gitee.com/opengauss/openGauss-connector-go-pq
// "github.com/lib/pq"
openGaussPQ "gitee.com/opengauss/openGauss-connector-go-pq"
// 省略代码...
func newGauss(ctx context.Context, userFacingDefaultError string, rowLimit int64, dsInfo sqleng.DataSourceInfo, cnnstr string, logger log.Logger, settings backend.DataSourceInstanceSettings) (*sql.DB, *sqleng.DataSourceHandler, error) {
  connector, err := openGaussPQ.NewConnector(cnnstr)
  // 省略代码...
  db := sql.OpenDB(connector)
  // 省略代码...
  return db, handler, nil
}

• 创建数据源实例

func NewDatasource(ctx context.Context, instanceSettings backend.DataSourceInstanceSettings) (instancemgmt.Instance, error) {
  instance, err := base.NewInstanceSettings(ctx, instanceSettings)
  if err != nil {
    return nil, err
  }
  dataSourceHandler, ok := instance.(*sqleng.DataSourceHandler)
  if !ok {
    return nil, fmt.Errorf("error create Instance")
  }
  return &Datasource{
    DataSourceHandler: dataSourceHandler,
  }, nil
}

• 使用DataSourceHandler.QueryData代替自身的数据查询

func (d *Datasource) QueryData(ctx context.Context, req *backend.QueryDataRequest) (*backend.QueryDataResponse, error) {
  return d.DataSourceHandler.QueryData(ctx, req)
}

• 使用DataSourceHandler.CheckHealth代替自身健康检查

func (d *Datasource) CheckHealth(ctx context.Context, req *backend.CheckHealthRequest) (*backend.CheckHealthResult, error) {
  return d.DataSourceHandler.CheckHealth(ctx, req)
}

前端代码

沿用PostgreSQL的前端代码。

剩下的任务将PostgreSQL数据源前端后端代码整合到自己数据源中。

总结

本次任务到此为止。

Grafana社区真的很猛，几个小时一个版本呀。

未完待续。。。