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

APP插件工程架构

目录	描述
dist	存放编译打包后的插件代码
src	插件源码目录
src/components	界面文件, 可选
src/css	css样式文件
src/dashboard	仪表板json文件
src/datasource	数据源插件
src/img	图像文件
src/panel	仪表板插件
src/module.ts	唯一入口文件
src/plugin.json	插件描述文件
Gruntfile.js	Grunt任务描述
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 {loadP