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

你可能感兴趣的:(Grafana)