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 {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,
};

1. 首先导入component目录下的类
2. 导入加载自定义css的类
3. 声明自定义的css样式
4. 声明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选项卡中显示；

注意事项

1. 插件id必须是全小写
2. 开发者无法添加依赖项，默认可用的依赖项有：
   • virtual-scroll
   • mousetrap
   • remarkable
   • tether
   • eventemitter3
   • tether-drop
   • moment
   • jquery
   • lodash-src
   • lodash
   • angular
   • bootstrap
   • angular-route
   • angular-sanitize
   • angular-ui
   • angular-strap
   • angular-dragdrop
   • angular-bindonce
   • spectrum
   • bootstrap-tagsinput
   • jquery.flot
   • jquery.flot.pie
   • jquery.flot.selection
   • jquery.flot.stack
   • jquery.flot.stackpercent
   • jquery.flot.time
   • jquery.flot.crosshair
   • jquery.flot.fillbelow
   • jquery.flot.gauge
   • d3
   • jquery.flot.dashes