Grafana插件开发------APP插件开发

APP插件工程架构

目录描述dist存放编译打包后的插件代码src插件源码目录src/components界面文件, 可选src/csscss样式文件src/dashboard仪表板json文件src/datasource数据源插件src/img图像文件src/panel仪表板插件src/module.ts唯一入口文件src/plugin.json插件描述文件Gruntfile.jsGrunt任务描述package.json依赖包说明README.md说明文档

架构详解

dist

grafana引入插件主要在插件目录下的dist中读取入口文件，然后将对应的插件配置引入到grafana中；前面说到的编译运行就是把src的文件以及readme复制到dist中，然后将ts文件编译生成js文件；如果有后端服务程序，也会通过makefile编译生成到该目录下；

src/components

该目录下存放着对应的ts文件和html文件，定义前端的基本操作；

html定义页面显示，可使用grafana原有的样式，详情请参考官方开发指南；ts文件定义页面的页面具体操作，并可将页面通过描述嵌入到grafana的页面中； ts文件中的类定义templateUrl可导入HTML文件，然后该类需在module.ts入口文件进行声明，然后在plugin.json对页面进行对应描述即可。

src/css

该目录存放一些自定义css样式；

src/dashboard

该目录存放着插件自带的仪表板；可以通过grafana制定，然后保存生成json文件，不过应注意要把json文件中的id项改为null，不然会引发Import Dashboard Error；

src/datasource

该目录是APP附属的数据源配置， 相当于将数据源插件嵌入到APP中；

src/img

该目录存放图像文件，比如图标；

src/panel

该目录是APP附属的仪表插件， 相当于将仪表插件嵌入到APP中；待添加

src/module.ts

必要文件， 文件内容解析如下（以kubernetes app为例）：

import {KubernetesConfigCtrl} from './components/config/config'; import {ClustersCtrl} from './components/clusters/clusters'; import {loadPluginCss} from 'app/plugins/sdk'; loadPluginCss({ dark: 'plugins/grafana-kubernetes-app/css/dark.css', light: 'plugins/grafana-kubernetes-app/css/light.css' }); export { KubernetesConfigCtrl as ConfigCtrl, ClustersCtrl, }; 首先导入component目录下的类导入加载自定义css的类声明自定义的css样式声明APP使用到的类 ConfigCtrl是grafana在配置插件时使用的控制器，将KubernetesConfigCtrl作为ConfigCtrl，该页面会在插件配置的页面中显示。

src/plugin.json

必要文件， 文件内容解析如下：

{ "type": "app", //声明类型：app, datasource, panel "name": "kubernetes", //插件名称 "id": "grafana-kubernetes-app", //插件ID，必须唯一 "info": { //相关信息 "description": "Kubernetes app. shows data collected by Prometheus.", "author": { "name": "Grafana Labs", "url": "https://grafana.com/" }, "keywords": ["raintank", "kubernetes", "Prometheus"], "logos": { //声明图标 "small": "img/logo.svg", "large": "img/logo.svg" }, "links": [ //链接跳转 {"name": "Grafana Labs", "url": "https://grafana.com/"}, ], "version": "1.0.1", //版本信息 "updated": "2018-01-18" }, "includes": [ //对插件的各部分进行引入 { "type": "page", //页面类型 "name": "Clusters", //显示的名称 "component": "ClustersCtrl", //该页面的类 "role": "Viewer", //该页面的功能 "addToNav": true, //是否加入插件导航栏 "defaultNav": true //是否作为插件使能后的默认页面 }, { "type": "datasource", //数据源类型 "name": "kubernetes DS" //数据源名称 }, { "type": "dashboard", //仪表板类型 "name": "K8s Node", //仪表板的名称 "path": "dashboards/k8s-node.json", //仪表板的文职 "addToNav": false }, { "type": "panel", //仪表类型 "name": "Kubernetes Node Info" }, ], "dependencies": { //依赖的grafana版本以及插件 "grafanaVersion": "5.0+", "plugins": [] } }

Gruntfile.js

Grunt任务配置文件，主要架构是引入依赖插件，定义任务信息，配置需要执行的任务；

package.json

声明该插件需要使用到的插件和依赖，便于npm安装环境；

Readme.md

要求Markdown格式， 可在插件配置的页面的Readme选项卡中显示；

注意事项

插件id必须是全小写开发者无法添加依赖项，默认可用的依赖项有： virtual-scrollmousetrapremarkabletethereventemitter3tether-dropmomentjquerylodash-srclodashangularbootstrapangular-routeangular-sanitizeangular-uiangular-strapangular-dragdropangular-bindoncespectrumbootstrap-tagsinputjquery.flotjquery.flot.piejquery.flot.selectionjquery.flot.stackjquery.flot.stackpercentjquery.flot.timejquery.flot.crosshairjquery.flot.fillbelowjquery.flot.gauged3jquery.flot.dashes