Разработка своего плагина визуализации для Grafana +6




Grafana — удобный инструмент для визуализации и мониторинга временных данных из множества источников. В этом посте я хочу рассказать ключевые концепции разработки своего плагина.

Создание своего плагина может понадобиться для 1) визуализации временных данных, т.к графановский движок удобен для создания запросов. 2) для расширения функциональности графаны под свои нужды.

Установка


  • Скачиваем и запускаем Grafana любым способом
  • После запуска через bin/grafana-server должна появиться папка data

Что такое плагин c тех. точки зрения


Эти детали знать необязательно. Я разбирался с этими концепциями по ходу дела.
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

Альтернативная установка

Можно склонировать в другую директорию, например в /home/alex/development/grafana/plugins/grafana-plugin-template-webpack, a потом создать файл $GRAFANA_PATH/conf/custom.ini и написать там


[plugin.template]
path = /home/alex/development/grafana/plugins/grafana-plugin-template-webpack

Теперь нужно перезапустить 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 — поле родительского класса, для подписки на событие о полученных данных. Больше фич MetricsPanelCtrl только в исходниках


Перезагрузим плагин и получим данные от источника данных в консоли. Можно далее выбрать нужный вам источник данных и создавать к нему запросы через Grafana. И рендерить как захочется. Например, через d3.js.


Еще можно попробовать добавить вывод значения в шаблон. Для этого изменим конструктор:


  constructor($scope, $injector) {
    super($scope, $injector);
    this.message = "nice!";
  }

и изменим файл partials/template.html:


<div class="hello">
  Hello from <b>Template Plugin</b> {{ ctrl.message }}
</div>

Заключение


Можно почитать официальную документацию.
Я советую поразбираться с одним опен-сорс плагином для того, что бы разобраться как загружать данные и как получить больше из доступных для использования фич графаны. Например, использование typescript, редактор, сохранение конфига plugin.json плагина, assets


Кстати, использование старых директив англяра — это зло, т.к. есть коллизи имен. Сейчас у нас есть размышления сделать билдер плагинов с компонентами.


И видео с аналогичным контентом от меня. Прошу прощения за звук. Тут есть еще доп информация:



Я еще рекомендую для разработки Visual Studio Code, в таком случае появится возможность дебажить


Всем удачного кодинга.


P.S. пост проверил Alexander Zobnin. Спасибо ему большое.




К сожалению, не доступен сервер mySQL