Система визуализации и мониторинга данных Grafana является одной из самых популярных. Кастомные плагины позволяют расширять стандартные возможности Grafana, позволяя подстраивать ее под разнообразные задачи всевозможных проектов и организаций.
Ключевые преимущества кастомизации:
Добавление специфических визуализаций, необходимых для бизнеса.
Интеграция с нестандартными источниками данных или API.
Разработка интерфейсов для работы с информацией.
В статье подробно рассматривается процесс разработки, начиная с подготовки окружения и заканчивая деплоем готового плагина.
Подготовительный этап
Для создания плагинов необходимо подготовить рабочее пространство.
Необходимые инструменты:
Node.js (нужна версия обозначена в документации Grafana).
Yarn или NPM необходимы для администрирования зависимостей.
Git используется с целью отслеживания изменений кода и управления версиями.
Grafana для проверки созданных плагинов.
Этапы конфигурирования:
Проведите локальную инсталляцию Grafana, или же откройте её через Docker-контейнер.
Инсталлируйте grafana-toolkit, чтобы плагины создавались в авторежиме.
Убедитесь, что версия Grafana совместима с вашим проектом.
Виды Grafana-плагинов
Всего три базовых типов плагинов для Grafana дадут разработчикам обширные способности. Они применяются для работы со специфическими задачами, что непосредственно имеют отношение к визуализации, интеграции и обработки данных.
Плагины панели (Panel Plugins)
Функции:
В тех случаях, когда вас не устраивает классический интерфейс Grafana, включающий в себя различные графики, тепловые карты и гистограммы, данные плагины нужны для создания уникальных способов отображения информации, позволяя создать индивидуальный интерфейс.
Варианты применения:
Разработка сложных графических элементов. Например, таблиц, потоковых диаграмм и графиков 3D-формата.
Отображение временных данных в виде нестандартных шкал времени.
Выстраивание интерактивных панелей для информационного анализа.
Отличительные «фишки»:
Создаются с использованием React и каталога @grafana/ui.
Дают гибкую конфигурацию внешнего вида и функционирования деталей панели.
Позволяют адаптировать отображение данных для конкретных задач компании.
Источники данных (Data Source Plugins)
Функции:
Эти плагины позволяют подключать Grafana к новым источникам данных, которые не поддерживаются по умолчанию. Например, к частным API, кастомным базам данных или нестандартным системам мониторинга.
Варианты применения:
Интеграция с частными API для получения уникальных метрик.
Подключение к SQL- или NoSQL-базам данных, не поддерживаемым стандартными плагинами Grafana.
Интеграция с промышленными IoT-платформами или SCADA-системами.
Отличительные «фишки»:
Настраиваются через интерфейс Grafana, где указываются параметры подключения.
Поддерживают возможности кэширования и оптимизации запросов.
Используют Grafana Data Source Query API для обработки запросов и преобразования данных.
Плагины приложений (App Plugins)
Функции:
App Plugins - это сочетание информ источников и панелей. Они подходят для создание более сложной логики и интерфейсов, которые часто используются для применения совместно со сторонними системами.
Варианты применения:
Разработка плагина для администрирования и отслеживания серверов в онлайн-режиме.
Объединение с площадками проектного управления по типу Jira или GitLab для отображения процесса деятельности.
Разработка решений узкопрофильной направленности для контроля рабочих операций.
Отличительные «фишки»:
Объединяют в одном интерфейсе несколько информ источников и панелей.
Предназначены для создания специализированных решений, включая отображение и управление информацией.
Могут включать собственные панели управления, например, для настройки подключения к источникам данных или обработки показателей.
Разработка основного плагина
Без использования классического шаблона Grafana работа по созданию базового плагина не предполагается. Это упрощает процесс разработки и дает вашему проекту начальную, готовую структуру. В этом разделе мы подробно разберём шаги, начиная с генерации плагина и заканчивая его базовой настройкой.
Генерация шаблона плагина
Grafana предоставляет инструмент grafana-toolkit, который значительно облегчает процесс создания новых плагинов. Шаблон, сгенерированный этим инструментом, включает все необходимые файлы и папки для быстрой настройки.
Установка grafana-toolkit — это первый шаг для разработки плагинов Grafana. С его помощью процесс разработки, сборки и тестирования существенно облегчается. Это обусловлено наличием готовых шаблонов и удобных команд.
Этапы инсталляции grafana-toolkit
Проверьте наличие всех требуемых зависимостей
Прежде чем перейти к установке grafana-toolkit проверьте наличие на вашем ПК компонентов, приведенных ниже:
Node.js (необходимо наличие версии, начинающейся с 16-й)
Проверьте версию Node.js:
node --version
В случае отсутствия Node.js - установить его можно с официального сайта:
https://nodejs.org/.
Yarn (для взаимодействия с зависимостями советуем использовать его)
Инсталлировать Yarn можно через npm:
npm install -g yarn
Проверьте его версию:
yarn --version
Инсталлируйте grafana-toolkit с помощью npm или Yarn
Инсталлировать grafana-toolkit можно либо глобально, либо исключительно для активного проекта.
Глобальная инсталляция:
Если вы хотите использовать grafana-toolkit для различных проектов, то глобальную инсталляцию следует проводить с помощью команды:
npm install -g @grafana/toolkit
Когда установка будет завершена, вам нужно проверить ее корректность через следующую команду:
grafana-toolkit --version
Локальная инсталляция:
В случае необходимости использования grafana-toolkit исключительно для одного проекта, то локально инсталляцию можно провести с помощью команды в папке конкретной работы:
npm install --save-dev @grafana/toolkit
Завершив инсталляцию вызов команд совершается с помощью npx, например:
npx grafana-toolkit plugin:create my-plugin
Генерация новой работы через grafana-toolkit
Проведя все необходимые процедуры установки теперь с помощью grafana-toolkit можно генерировать плагины. Как пример:
npx @grafana/toolkit plugin:create my-plugin
Проверка работоспособности
Сгенерировав проект активируйте Grafana в режиме разработчика, чтобы провести тесты нового плагина:
Перейдите в директорию, где находится необходимый плагин:
cd my-pluginУстановите зависимости:
yarn installАктивируйте локальный сервер:
yarn dev
Архитектура проекта: анализ ключевых элементов
По завершению генерации, оформление проекта приобретет следующий вид:
src/ — каталог с кодом плагина.
module.ts — основной документ, определяющий рабочие возможности плагина.
components/ — каталог React-компонентов интерфейса.
plugin.json — файл конфигурации, содержащий метаданные плагина.
README.md — мануал по использованию плагина и принципам его применения.
package.json — документ зависимостей и сборочных скриптов.
tsconfig.json — настройки TypeScript.
yarn.lock / package-lock.json — документ для фиксирования зависимостей.
Для чего требуется plugin.json?
Это центрообразующий файл, в котором записаны метаданные и конфигурации плагина. Применяется Grafana с целью загрузки и установления параметров плагина.
Пример содержимого файла:
Ключевые параметры plugin.json:
id — уникальный идентификатор плагина. Используйте префикс (например, com.example.) для предотвращения конфликтов.
type — вид плагина (например, панель (panel),источник данных (datasource), приложение (app).
name — отображаемое имя плагина в интерфейсе Grafana.
description — краткое описание функционала плагина.
grafanaVersion — указывает на минимальную версию Grafana, с которой способен работать плагин.
plugins — перечень зависимостей от других плагинов (если применимо).
Корректировки и активация плагина
После настройки файла plugin.json можно приступить к редактированию исходного кода плагина:
React-компоненты — создаются в папке src/components.
Логика — реализуется в файле module.ts.
Для проверки изменений запустите Grafana в режиме разработчика:
yarn devРежим разработчика: преимущества
Позволяет в автоматическом порядке пересобрать плагин при внесении корректировок.
Мгновенное тестирование плагина в локальной версии Grafana.
Создание функциональных возможностей
Интерфейс на основе React:
Внедрение административных элементов с помощью React-компонентов.
Используйте библиотеки Grafana для доступа к данным.
Пример: создание конфигурационного поля:
export const MyPluginEditor = (props) => {
return <Input onChange={(e) => props.onOptionsChange({ text: e.target.value })} />;
};Связь с API:
Используйте Axios или Fetch для конфигурации обработки запросов.
Применяйте Prometheus API, в случае необходимости получения метрик.
Анализ и отладка плагина
Режим разработчика:
Запустите Grafana с параметром --dev для удобства отладки.
Средства анализа:
DevTools для мониторинга журналов и сбоев.
Проводите тестирование в различных ситуациях для проверки корректной работы плагина.
Сборка и развертывание
Сборка плагина:
yarn build
Установка плагина в Grafana:
Скопируйте собранный архив в директорию plugins.
Перезапустите Grafana для активации плагина.
Подсказки и советы
Ознакомьтесь с официальным мануалом Grafana.
Участвуйте в сообществах и форумах для обсуждения идей.
Следуйте лучшим практикам: пишите чистый код, тестируйте на нескольких версиях Grafana, добавляйте документацию.
Итог
Индивидуальные плагины открывают много возможностей для настройки площадки под конкретные требования. Этот процесс включает в себя выбор типа плагина, подготовку рабочего окружения, разработку необходимых функций, публикацию и тестирование. Каждый из этих этапов требует особого внимания, но с помощью эффективных средств Grafana и поддержке сообщества, даже новички могут успешно справиться с задачей.
Использование индивидуальных плагинов дает возможность:
Оптимизировать отображение информации в соответствии с конкретными рабочими процессами.
Интегрировать нетрадиционные источники информации и API.
Разрабатывать уникальные админ-панели для анализа и мониторинга.
Не стоит бояться экспериментов и освоения нового. Создание плагинов является не только вариантом улучшения Grafana но и шансом привнести частичку своего труда в развитие инструментов DevOps. Начните с простого, постепенно расширяя и усложняя функционал расширяйте его функционал и показывайте свой прогресс комьюнити.
Для глубокого понимания процесса советуем изучить официальный мануал Grafana, посмотреть образцы кода на GitHub и рассмотреть различные обучающие ресурсы.