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