Разработка своего плагина визуализации для Grafana
- пятница, 18 мая 2018 г. в 00:20:22
bin/grafana-server
должна появиться папка data
Эти детали знать необязательно. Я разбирался с этими концепциями по ходу дела.
Grafana 5.x — это большое приложение Angular версии 1.6.6 :) и немного React. Сам плагин — это angular controller, который лежит в файле data/plugins/your-module/dist/module.js
, который может быть загружен как SystemJS модуль. Рядом должен быть файл plugin.json
c мета-описанием плагина: название, id, иконки ...
Я рекомендую использовать следующий шаблон на webpack. Там есть описание фич почему он лучше. Кстати, он есть в официальной документации
В системе должен быть установлен npm.
cd $GRAFANA_PATH/data/plugins
git clone https://github.com/CorpGlory/grafana-plugin-template-webpack.git
cd grafana-plugin-template-webpack
npm install
npm run build
Теперь нужно перезапустить Grafana. Должна появиться строчка
INFO[05-17|06:08:46] Registering plugin logger=plugins name="Plugin Template Name"
в логах запуска графаны.
Дальше заходим на localhost:3000
, нажимаем на знак +
под логотипом для создания нового дашборда, в новом окне должно появиться окошко с выбором новой панели "Plugin Template Name". Должно появится такое окошко:
Открываем файл src/module.js
— это наш "main". Отсюда графана делает загрузку плагина в страницу, ожидая инстанс PanelCtrl
. Обратите внимание на последнюю строчку: export { Ctrl as PanelCtrl }
. Вообще помните, что вы работаете в окружении большого фронт-энд приложения, где определено много переменных и можно импортировать библиотеки. Все, что 'import {...} from grafana/*' — это уже доступные фичи.
Давайте перепишем конструктор вот так:
constructor($scope, $injector) {
super($scope, $injector);
console.log('hello from console');
}
Теперь можно использовать npm run dev
вместо npm run build
, т.к. код будет сам ребилдиться. Можно не перезагружать бэкенд графаны (это то, что мы запускали через bin/grafana-server
), но графана любит кешировать файлы плагинов, так что будьте осторожны с перезагрузкой сбилженных сорцов. Внизу поста есть видео где я больше рассказываю о том, как устроена билд система, и использую шаблон Angular, который лежит в partials
.
Наш класс является контроллером Angular и есть функция link(scope, element)
. Я советую сделать console.log(element)
, там будет html элемент с которым можно будет делать что хочется.
Наш контроллер — наследник класса PanelCtrl
, давайте теперь заменим его на класс MetricsPanelCtrl
. Теперь, если зайти в режим редактирования панели, то там появился новая вкладка
Тут я использую Grafana TestData
Теперь изменим код класса-наследника вот так
constructor($scope, $injector) {
super($scope, $injector);
this.events.on(
'data-received', this._onDataReceived.bind(this)
);
}
_onDataReceived(data) {
console.log(data);
}
Здесь появилось использование объекта this.events
— поле родительского класса, для подписки на событие о полученных данных.
Перезагрузим плагин и получим данные от источника данных в консоли. Можно далее выбрать нужный вам источник данных и создавать к нему запросы через Grafana. И рендерить как захочется. Например, через d3.js.
Можно почитать официальную документацию.
Я советую поразбираться с одним опен-сорс плагином для того, что бы разобраться как загружать данные и как получить больше из доступных для использования фич графаны. Например, использование typescript, редактор, сохранение конфига plugin.json
плагина, assets
Кстати, использование старых директив англяра — это зло, т.к. есть коллизи имен. Сейчас у нас есть размышления сделать билдер плагинов с компонентами.
И видео с аналогичным контентом от меня. Прошу прощения за звук. Тут есть еще доп информация:
Я еще рекомендую для разработки Visual Studio Code, в таком случае появится возможность дебажить
Всем удачного кодинга.