Grafana插件工具-开始使用(一)

416 阅读4分钟

欢迎来到Grafana插件创建的世界,您可以在这里增强Grafana的基本功能。在本指南中,您将学习如何开始脚手架插件,在高效的开发环境中运行它,并使用其基本功能。

快速入门

用单个命令脚手架一个新的插件!运行以下内容并回答提示:

  • npm
npx @grafana/create-plugin@latest
  • pnpm
pnpm dlx @grafana/create-plugin@latest
  • yarn
yarn create @grafana/plugin

为什么要创建Grafana插件?

Grafana插件开发允许您使用受支持的功能创建许多不同类型的用户体验。例如,你可以做:

  • 面板插件-数据可视化的新方法
  • 数据源插件-连接到新数据库或其他数据源
  • 应用程序插件-集成的开箱即用体验

提示 如果这是您第一次创建插件,我们建议您熟悉插件类型、后端插件、数据帧和其他关键概念的基础知识。有关更多信息,请参阅Grafana插件开发简介

使用插件工具更快地开发您的插件

Grafana的插件工具提供了一种官方支持的方式来扩展Grafana的核心功能。我们设计了这些工具,以帮助您通过现代构建设置和零额外配置更快地开发插件。

插件工具由两个软件包组成:

  • create-plugin:一个CLI来脚手架新插件或迁移使用@grafana/toolkit创建的插件。
  • sign-plugin:一个用于签署插件以供分发的CLI。

信息 如果您之前使用@grafana/toolkit构建过插件,您可以使用我们的插件工具跳转到我们的最新工具。有关更多信息,请参阅从工具包迁移

在你开始之前

确保您使用的是受支持的操作系统、Grafana版本和工具。

支持的操作系统

Grafana插件工具适用于以下操作系统:

  • Linux
  • macOS
  • 带有WSL的Windows 10+(适用于Linux的Windows子系统)

支持的Grafana版本

我们通常建议您为v9.0之后的Grafana版本构建。有关使用Grafana开发时的要求和依赖性的更多信息,请参阅Grafana开发人员指南

推荐工具

您需要设置以下工具:

支持的软件包管理器

当您首次运行@grafana/create-plugin时,请选择您的软件包管理器:npmpnpmyarn

脚手架一个插件

步骤1:安装create-plugin工具

运行以下命令并回答提示:

  • npm
npx @grafana/create-plugin@latest
  • pnpm
pnpm dlx @grafana/create-plugin@latest
  • yarn
yarn create @grafana/plugin

有关提示的帮助,请参阅提示参考

第2步:打开生成的文件夹结构

完成工具安装后,打开插件文件夹:

  • npm
cd <orgName>-<pluginName>-<pluginType>
npm install
  • pnpm
cd <orgName>-<pluginName>-<pluginType>
pnpm install
  • yarn
cd <orgName>-<pluginName>-<pluginType>
yarn install

目录名称<orgName>-<pluginName>-<pluginType>基于您对提示的回答。出现提示时,使用生成的文件夹的名称。此目录包含启动插件开发的初始项目结构。

文件结构应该看起来像这样:

<orgName>-<pluginName>-<pluginType>
├── .config/
├── .eslintrc
├── .github
│   └── workflows
├── .gitignore
├── .nvmrc
├── .prettierrc.js
├── CHANGELOG.md
├── LICENSE
├── Magefile.go
├── README.md
├── cypress
│   └── integration
├── docker-compose.yaml
├── go.mod
├── go.sum
├── jest-setup.js
├── jest.config.js
├── node_modules
├── package.json
├── pkg
│   ├── main.go
│   └── plugin
├── src
│   ├── README.md
│   ├── components
│   ├── datasource.ts
│   ├── img
│   ├── module.ts
│   ├── plugin.json
│   └── types.ts
└── tsconfig.json

有关这些文件的更多信息,请参阅文件夹结构

第3步:在Docker中运行您的插件

使用create-plugin工具,您可以使用Docker容器来简化配置、加载和开发流程。有关更多信息,请参阅设置开发环境

关键的CLI命令包括:

  • install(npm i
  • 在开发模式下构建前端(npm run dev
  • 构建后端(可选)(mage -v build:linux
  • 运行Grafana服务(npm run server

常用的CLI命令

使用CLI执行插件开发的基本任务,用npmpnpm,或根据您选择的软件包管理器使用yarn

mage -v

为Linux、Windows和Darwin构建后端插件二进制文件。

npm run build

在生产模式下使用Webpack编译和捆绑项目。

npm run dev

在监视模式下运行Webpack进行开发,持续监控更改。

npm run typecheck

使用TypeScript在前端代码上执行类型检查过程。

npm run server

使用Docker启动Grafana开发服务器

npm run sign

使用最新版本的@grafana/sign-plugin签署Grafana插件。

信息

有关可用CLI命令的完整列表,请参阅CLI参考

下一步