Практика разработки плагина источника данных Grafana 1

база данных Grafana внешний интерфейс Angular.js

Мы можем разработать плагины для любой базы данных, а плагины взаимодействуют с базой данных через протокол http.

Структура каталогов проекта

├── src
    ├── css
    ├── img
    │   └── server-logo.png
    ├── module
    │   ├── annotationsQueryCtrl.js
    │   ├── configCtrl.js
    │   ├── datasource.js
    │   ├── queryCtrl.js
    │   └── queryOptionsCtrl.js
    ├── module.js
    ├── page
    │   ├── annotationsQuery.html
    │   ├── config.html
    │   ├── query.html
    │   └── queryOptions.html
    └── plugin.json
├── Gruntfile.js
├── README.md
├── package.json

Файл метаданных имеетplugin.jsonа такжеREADME.mdдва,Gruntfile.jsЭто файл метаданных инструмента grunt, и этих трех файлов немного. Основной исходный код плагина источника данных находится в файле src, в папке css хранятся файлы стилей, а в папке img хранятся файлы изображений, которые также можно пропустить напрямую. Остальные — папка модуля, папка страницы, файл module.js и файл plugin.json.

файл plugin.json

В файле plugin.json есть два параметра для конкретного источника данных, один из которых должен быть истинным.

"metrics": true,  // 是否在panel中支持metrics
"annotations": false,  // 在dashboard中支持annotations查询

plugin.json сохраняет метаданные плагина. Grafana ищет файл plugin.json при сканировании каталога плагинов и автоматически регистрирует плагин. Содержимое файла будет извлечено и инкапсулировано в объект для использования. Пример файла plugin.json:

{
  "name": "代理服务端",
  "id": "grafana-server-datasource",
  "type": "datasource",
  "metrics": true,
  "annotations": true,
  "info": {
    "description": "代理服务端作为数据源",
    "author": {
      "name": "liuchunhui",
      "url": "https://grafana.com"
    },
    "logos": {
      "small": "img/server-logo.png",
      "large": "img/server-logo.png"
    },
    "links": [
      {"name": "Github", "url": ""},
      {"name": "MIT License", "url": ""}
    ],
    "version": "1.0.0",
    "updated": "2018-04-23"
  },

  "dependencies": {
    "grafanaVersion": "3.x.x",
    "plugins": []
  }
}

module.js

Файл module.js очень важен, это файл начальной точки для загрузки плагина. Для взаимодействия с остальной частью Grafana файл плагина должен экспортировать следующие 5 модулей:

Datasource  // Required
QueryCtrl  // Required
ConfigCtrl  // Required
QueryOptionsCtrl  // 
AnnotationsQueryCtrl  //

Итак, в модуле он отвечает за экспорт этих пяти модулей. Пример кода файла module.js:

import GenericAnnotationsQueryCtrl from './module/annotationsQueryCtrl';
import GenericConfigCtrl from './module/configCtrl';
import GenericDatasource from './module/datasource';
import GenericQueryCtrl from './module/queryCtrl';
import GenericQueryOptionsCtrl from './module/queryOptionsCtrl';

export {
    GenericAnnotationsQueryCtrl as AnnotationsQueryCtrl,
    GenericConfigCtrl as ConfigCtrl,
    GenericDatasource as Datasource,
    GenericQueryCtrl as QueryCtrl,
    GenericQueryOptionsCtrl as QueryOptionsCtrl
};

папка модуля

    │   ├── annotationsQueryCtrl.js
    │   ├── configCtrl.js
    │   ├── datasource.js
    │   ├── queryCtrl.js
    │   └── queryOptionsCtrl.js

Эти пять файлов соответствуют пяти модулям, которые module.js должен экспортировать, и в будущем они будут преобразованы в пять контроллеров angular.

папка страницы

    │   ├── annotationsQuery.html
    │   ├── config.html
    │   ├── query.html
    │   └── queryOptions.html

Эти четыре файла соответствуют папке модуляannotationsQueryCtrl,configCtrl,queryCtrl,queryOptionsCtrlЧетыре модуля должны быть привязаны к шаблону страницы,datasourceМодули не требуют шаблонов страниц.

В следующей статье подробно рассказывается, что находится в разработкеПрактика разработки плагина источника данных Grafana II

Категории