构建一个面板插件

bob电竞频道Grafana实验室团队
Grabob电竞频道fana实验室团队

最近更新于2021年11月11日

初学者

简介

面板是Grafana的积木。它们允许您以不同的方式可视化数据。虽然Grafana已经内置了几种类型的面板，但您也可以构建自己的面板，以添加对其他可视化的支持。

有关面板的更多信息，请参阅有关的文档面板．

先决条件

  • Grafana > = 7.0
  • NodeJS > = 14
  • 纱

设置您的环境

在开始构建插件之前，需要为插件开发设置环境。

为了发现插件，Grafana扫描a插件目录，它的位置取决于你的操作系统。

  1. 创建一个名为grafana-plugins在您首选的工作空间中。

  2. 找到插件属性，并设置插件财产的路径你grafana-plugins目录中。请参阅Grafana配置文档更多信息。

    [paths] plugins = "/path/to/grafana-plugins"

  3. 如果Grafana已经在运行，则重新启动它，以加载新的配置。

可选方法:Docker

如果不想在本地机器上安装Grafana，可以使用码头工人．

使用Docker建立Grafana插件开发，运行以下命令:

运行-d -p 3000:3000 -v "$(pwd)"/ var/lib/grafana/plugins——name=grafana grafana/grafana:7.0.0 .

由于Grafana只在启动时加载插件，所以在添加或删除插件时需要重新启动容器。

Docker重启grafana

创建一个新插件

现代web开发的工具很难让你理解。虽然您当然可以编写自己的webpack配置，但在本指南中，您将使用grafana create-plugin工具

Grafanacreate-plugin工具是一个CLI应用程序，它简化了Grafana插件的开发，因此您可以专注于代码。该工具为您提供了启动器插件和所有所需的配置。

  1. 在插件目录中，使用create-plugin从模板创建一个插件:

    npx @grafana / create-plugin

  2. 更改目录到你新创建的插件:

    cd my-plugin

  3. 安装依赖项:

    线安装

  4. 编译插件:

    纱线开发

  5. 重新启动Grafana服务器以发现您的插件。

  6. 打开Grafana然后去配置->插件．确保你的插件在那里。

默认情况下，Grafana在发现插件时记录日志:

INFO[01-01|12:00:00] registered plugin logger=plugins name=my-plugin . INFO[01-01|12:00:00

插件的剖析

插件有不同的形状和大小。在我们深入讨论之前，让我们看看它们共有的一些属性。

你创建的每个插件都至少需要两个文件:plugin.json而且module.ts．

plugin.json

当Grafana启动时，它会扫描插件目录中包含plugin.json文件。的plugin.json文件包含关于你的插件的信息，并告诉Grafana你的插件需要什么功能和依赖。

虽然某些插件类型可以有特定的配置选项，但让我们看看强制性的配置选项:

  • 类型告诉Grafana应该期待什么类型的插件。Grafana支持三种类型的插件:面板，数据源,应用程序．
  • 的名字是用户将在插件列表中看到的内容。如果您正在创建一个数据源，这通常是它所连接的数据库的名称，例如Prometheus、PostgreSQL或Stackdriver。
  • id唯一标识您的插件，并应以您的Grafana用户名开始，以避免与其他插件冲突。注册一个Grafana账户来声明您的用户名。

控件的所有可用配置设置plugin.json，请参阅plugin.jsonSchema．

module.ts

发现插件后，Grafana加载module.ts文件，你的插件的入口点。module.ts公开插件的实现，这取决于您正在构建的插件的类型。

具体地说,module.ts需要公开扩展的对象GrafanaPlugin，可以是以下任何一个:

面板插件

从Grafana 6。X，面板是ReactJS组件．

在Grafana 6.0之前，插件是用AngularJS．尽管我们仍然支持用AngularJS编写的插件，但我们强烈建议你使用ReactJS编写新的插件。

面板属性

的PanelProps接口公开关于面板的运行时信息，例如面板尺寸和当前时间范围。

您可以通过以下方式访问面板属性道具，如你的插件所示。

src / SimplePanel.tsx

Const {options, data, width, height} = props;

开发工作流程

接下来，您将学习对面板进行更改、构建面板并重新加载Grafana以反映所做的更改的基本工作流程。

首先，你需要添加你的面板到仪表板:

  1. 在浏览器中打开Grafana。
  2. 创建一个新的仪表板，并添加一个新的面板。
  3. 从可视化类型列表中选择您的面板。
  4. 保存仪表板。

现在你可以查看你的面板了，试着对面板插件做一些改变:

  1. 在SimplePanel.tsx，改变圆的填充颜色。
  2. 运行纱线开发来构建插件。
  3. 在浏览器中，重新加载带有新更改的Grafana。

添加面板选项

有时你想为面板的用户提供一个选项来配置插件的行为。通过配置面板选项对于你的插件，你的面板将能够接受用户输入。

在上一步中，您在代码中更改了圆的填充颜色。让我们更改代码，以便插件用户可以从面板编辑器中配置颜色。

添加一个选项

中定义了面板选项面板选项对象．SimpleOptions描述选项对象的接口。

  1. 在types.ts，添加一个CircleColor类型来保存用户可以选择的颜色:

    CircleColor = '红' | '绿' | '蓝';

  2. 在SimpleOptions接口中，添加一个名为颜色：

    颜色:CircleColor;

下面是更新后的选项定义:

src / types.ts

type SeriesSize = 'sm' | 'md' | 'lg';CircleColor = '红' | '绿' | '蓝';//接口定义面板选项类型导出接口SimpleOptions{文本:字符串;showSeriesCount:布尔;seriesCountSize: SeriesSize;颜色:CircleColor;｝

添加一个选项控件

要从面板编辑器更改该选项，需要绑定颜色的选择权选择控制．

Grafana支持一系列选项控件，比如文本输入、开关和无线电组。

让我们创建一个无线电控件并将其绑定到颜色选择。

  1. 在src / module.ts，在构建器末尾添加控件:

    .addRadio({path: 'color'， name: 'Circle color'， defaultValue: 'red'， settings: {options: [{value: 'red'， label: 'red'，}， {value: 'green'， label: 'green'，}， {value: 'blue'， label: 'blue'，}，]，}});

    的路径用于将控件绑定到选项。例如，可以通过指定选项对象中的完整路径将控件绑定到嵌套选项colors.background．

的面板编辑器侧栏中显示它显示部分。

使用新选项

快完成了。您已经添加了一个新的选项和一个相应的控件来更改值。但是插件还没有使用这个选项。让我们改变这一点。

  1. 若要将选项值转换为当前主题使用的颜色，请添加开关声明在返回声明SimplePanel.tsx．

    src / SimplePanel.tsx

    让颜色:串;switch (options.color) {case 'red': color = theme.palette.redBase;打破;case 'green': color = theme.palette.greenBase;打破;Case 'blue': color = theme.palette.blue95;打破;｝

  2. 配置圆使用该颜色。

    < g > <圆风格r ={{填补:颜色}}= {100}/ > < / g >

现在，当您在面板编辑器中更改颜色时，圆的填充颜色也会更改。

使用数据帧创建动态面板

大多数面板可视化来自Grafana数据源的动态数据。在这一步中，您将为每个系列创建一个圆，每个圆的半径都等于系列中的最后一个值。

要在面板中使用来自查询的数据，需要设置一个数据源。如果没有可用的工具，可以使用TestData DB开发时的数据源。

面板内数据源查询的结果可在数据属性在面板组件内。

Const {data} =道具;

data.series包含从数据源查询返回的系列。每个系列都表示为一个名为数据帧．数据帧类似于表，其中数据按列或列存储字段，而不是争吵。字段中的每个值都共享相同的数据类型，例如字符串、数字或时间。

这是一个带有时间字段的数据帧的例子，时间，和一个数字字段，价值：

时间 价值
1589189388597 32.4
1589189406480 27.2
1589189513721 15.0

让我们看看如何从数据帧中检索数据并在可视化中使用它。

  1. 获取类型的每个字段的最后一个值数量，通过添加以下内容SimplePanel.tsx，在返回声明:

    Const radii = data。Series .map(Series => Series .fields)查找(字段=>字段。类型=== 'number')) .map(field => field?.values.get(field.values.length - 1));

    半径将包含从数据源查询返回的每个系列中的最后一个值。您将使用这些来设置每个圆的半径。

  2. 改变svg元素添加到以下元素:

      {radii. xmlns="http://www.w3.org/2000/svg"Map ((radius, index) => {const step = width / radius .length;返回;})}   . xml

    注意我们是如何创建一个<圆>元素的每个值半径：

    {半径。Map ((radius, index) => {const step = width / radius .length;返回;})}

    我们使用变换在面板内水平分布圆。

  3. 重新构建您的插件，并通过向面板添加多个查询来尝试它。刷新仪表板。

如果您想了解更多关于数据帧的知识，请查看我们对数据帧．

总结

在本教程中，您学习了如何为仪表板创建自定义可视化。