grafana开发实例

最新推荐文章于 2024-08-24 09:48:30 发布

Thelifeyoulive

最新推荐文章于 2024-08-24 09:48:30 发布

阅读量2.2k

点赞数 49

文章标签： grafana

本文链接：https://blog.csdn.net/weixin_43956426/article/details/136710498

版权

本文详细介绍了如何在Grafana中进行插件开发，包括使用API、配置`plugin.json`、创建`module.tsx`组件以及实现统计类、列表类和图表类功能，如Echarts。通过实例展示了如何定制大屏面板，如设置样式、数据源查询和自定义组件的开发过程。

摘要由CSDN通过智能技术生成

接上篇grafana实现自己的Panel

上篇讲到如何搭建一个开发环境，这篇文件是详细讲解grafana插件开发中相关api的使用和开发实例
基于目前使用的案例，讲述三个实例，统计类，列表类，图表类(Echarts)

针对类似这样的报表和大屏平台，grafana很好的隔离了前端和后端之间的耦合，有统一的入口文件来接受由后端传过来的数据，我们只需要了解不同类型的查询方式所对应的数据结构就可以开发出我们想要的大屏，并且对插件的容错能力较强，即便因为某个插件的问题并不会影响其他块的展示

plugin.json

这是grafana用做来识别插件的文件，通过该文件，告知grafana当前插件可能需要的依赖，在不需要相互依赖的插件开发过程中，我们只需要关注几个相关的元数据，其他内容按照默认即可

type:"panel"
name: "插件名称"
id: "插件全局唯一标识"
info: {
  description: "插件描述",
  author: {
    name: "who wrote the code?",
    url: "your website"
  }
}

module.ts[x]

当granfana识别plugin.json后，并通过检查plugin.json为合法文件，继而主动加载module.tsx组件，通过module.tsx这个文件来暴露我们自定义插件的实现，继而被grafana所消费

// 在module.tsx中，创建一个PanelPlugin对象，传入参数为我们自定义的组件元素，返回为builder

import { PanelPlugin } from '@grafana/data';
import { SimpleOptions } from './types';
import { SimplePanel } from './SimplePanel';

export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOptions(builder => {
  return builder;
});

setPanelOptions

此方法中有个回调函数，回调函数入参为builder，并要求返回builder，相关options方法

addBooleanSwitch 【开关】
addFieldNamePicker 【查询字段映射器】
addNumberInput 【数字输入框】
addTextInput 【文本输入框】
addCustomEditor 【通用编辑器】

通过以上几个方法，已承载90%需求，入参要求

.addCustomEditor({
  category: ['样式属性'], (分组，必须为string类型数组)
  name: "valueStyle", （显示在页面该字段的标题）
  description: '数值样式',（显示在页面上的描述）
  id: 'ValueStyle', （唯一id）
  path: 'static.ValueStyle', （值对象映射，通过.的方式将字段自动扩展，比如{static: {ValueStyle: '值'}}）
  defaultValue: 'font-size:60px', （默认值）
  editor: CssCode, （addCustomEditor特有，指定对应的JSX.Element元素）
  showIf: (options) => {
    return options.isCard
  } （是否显示)
})

使用addCustomEditor中指定editor，即可实现我们自己的选项组件，注意该选项组件暴露value和onChange方法即可，如果有antdPro开发经验，很容易理解，和renderFormItem是一个东西，都是用来自定义字段的

自定义面板组件

他是一个函数式组件，通过Grafana自动装配透传5个属性，options，data，width，heigth，theme

options就是刚刚我们setPanelOptions后相关值变更的回调值
data是面板下方查询语句执行sql返回的结果，grafana是将数据平铺后返回，数据相对较为羞涩，可自行适当做调整
width，height，该面板在dom实例中相邻父组件的宽度高度
theme grafana的主题

该组件就是普通的React的组件，基于options和data的数据支撑，就可以随意发挥开发自己想要的组件了

首页设计

通用配置

创建Dashboard

新建文件夹后在新建Dashbard

新建动态数据源
设置主题字段

进入设置页面

变量name： theme，type： custom，label：主题，value: hidemenu,showmenu

新建主题Panel

前置条件：安装Boom-theme，面板市场可直接下载，研发提供的安装包已安装

插件选择Boom Theme

Add New Theme

主题名为hidemenu，External css URL：/static/CDN/grafana/tailwind.min.css
Additional css style:

body {
    background-color:#f0f2f5 !important
}

.panel-menu-container {
    display: none !important;
}

.panel-menu-toggle {
    display: none !important
}

.panel-title {
    cursor: default !important
}

.panel-header:hover {
    background: none !important
}

.panel-container {
    border: none !important
}

.panel-content {
    font: 14px arial, sans-serif !important;
    padding: 0 !important
}