---
title: 'Создание кастомных плагинов для Grafana | Zomro'
description: 'Кастомные плагины позволяют расширять стандартные возможности Grafana, позволяя подстраивать ее под разнообразные задачи всевозможных проектов и организаций.'
image: 'https://zomro.com/static/site/images/logo/logo-white.png?v=1790075172'
---
![opened image]()
* [Zomro](https://zomro.com/rus/)
* [Полезные статьи](https://zomro.com/rus/blog/articles/)
* Создание кастомных плагинов для Grafana
# Создание кастомных плагинов для Grafana
21-02-2025
Система визуализации и мониторинга данных Grafana является одной из самых популярных. Кастомные плагины позволяют расширять стандартные возможности Grafana, позволяя подстраивать ее под разнообразные задачи всевозможных проектов и организаций.
##
## **Ключевые преимущества кастомизации:**
* Добавление специфических визуализаций, необходимых для бизнеса.
* Интеграция с нестандартными источниками данных или API.
* Разработка интерфейсов для работы с информацией.
В статье подробно рассматривается процесс разработки, начиная с подготовки окружения и заканчивая деплоем готового плагина.
**Подготовительный этап**
Для создания плагинов необходимо подготовить рабочее пространство.
**Необходимые инструменты:**
* **Node.js** (нужна версия обозначена в документации Grafana).
* **Yarn** или **NPM** необходимы для администрирования зависимостей.
* **Git** используется с целью отслеживания изменений кода и управления версиями.
* **Grafana** для проверки созданных плагинов.
**Этапы конфигурирования:**
1. Проведите локальную инсталляцию Grafana, или же откройте её через Docker-контейнер.
2. Инсталлируйте **grafana-toolkit** , чтобы плагины создавались в авторежиме.
3. Убедитесь, что версия 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 - установить его можно с официального сайта:
.
**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 в режиме разработчика, чтобы провести тесты нового плагина:
1. Перейдите в директорию, где находится необходимый плагин:
cd my-plugin
2. Установите зависимости:
yarn install
3. Активируйте локальный сервер:
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 можно приступить к редактированию исходного кода плагина:
1. **React-компоненты** — создаются в папке src/components.
2. **Логика** — реализуется в файле module.ts.
Для проверки изменений запустите Grafana в режиме разработчика:
yarn dev
**Режим разработчика: преимущества**
* Позволяет в автоматическом порядке пересобрать плагин при внесении корректировок.
* Мгновенное тестирование плагина в локальной версии Grafana.
**Создание функциональных возможностей**
**Интерфейс на основе React:**
* Внедрение административных элементов с помощью React-компонентов.
* Используйте библиотеки Grafana для доступа к данным.
**Пример: создание конфигурационного поля:**
export const MyPluginEditor = (props) => {
return props.onOptionsChange({ text: e.target.value })} />;
};
**Связь с API:**
* Используйте Axios или Fetch для конфигурации обработки запросов.
* Применяйте Prometheus API, в случае необходимости получения метрик.
**Анализ и отладка плагина**
**Режим разработчика:**
Запустите Grafana с параметром --dev для удобства отладки.
**Средства анализа:**
* DevTools для мониторинга журналов и сбоев.
* Проводите тестирование в различных ситуациях для проверки корректной работы плагина.
**Сборка и развертывание**
**Сборка плагина:**
yarn build
## **Установка плагина в Grafana:**
1. Скопируйте собранный архив в директорию plugins.
2. Перезапустите Grafana для активации плагина.
**Подсказки и советы**
* Ознакомьтесь с официальным мануалом Grafana.
* Участвуйте в сообществах и форумах для обсуждения идей.
* Следуйте лучшим практикам: пишите чистый код, тестируйте на нескольких версиях [Grafana](https://zomro.com/rus/marketplace/grafana), добавляйте документацию.
**Итог**
Индивидуальные плагины открывают много возможностей для настройки площадки под конкретные требования. Этот процесс включает в себя выбор типа плагина, подготовку рабочего окружения, разработку необходимых функций, публикацию и тестирование. Каждый из этих этапов требует особого внимания, но с помощью эффективных средств Grafana и поддержке сообщества, даже новички могут успешно справиться с задачей.
Использование индивидуальных плагинов дает возможность:
* Оптимизировать отображение информации в соответствии с конкретными рабочими процессами.
* Интегрировать нетрадиционные источники информации и API.
* Разрабатывать уникальные админ-панели для анализа и мониторинга.
Не стоит бояться экспериментов и освоения нового. Создание плагинов является не только вариантом улучшения Grafana но и шансом привнести частичку своего труда в развитие инструментов DevOps. Начните с простого, постепенно расширяя и усложняя функционал расширяйте его функционал и показывайте свой прогресс комьюнити.
Для глубокого понимания процесса советуем изучить официальный мануал Grafana, посмотреть образцы кода на GitHub и рассмотреть различные обучающие ресурсы.
Похожие статьи
[Как выбрать лучший хостинг для своего бизнеса](https://zomro.com/rus/blog/articles/340-how-to-choose-the-best-hosting-for-your-business) [Как удержать клиента и зачем это нужно?](https://zomro.com/rus/blog/articles/25-kak-uderzhat-klienta-i-zachem-eto-nuzhno) [Преимущества и недостатки бесплатного веб-хостинга](https://zomro.com/rus/blog/articles/170-preimuschestva-i-nedostatki-besplatnogo-veb-hostinga) [Восстановление сайта из резервной копии на виртуальном хостинге cPanel](https://zomro.com/rus/blog/articles/556-restoring-a-website-from-a-backup-on-cpanel-virtual-hosting) [API - Взаимодействие с Boot From ISO](https://zomro.com/rus/blog/articles/484-api-interacting-with-boot-from-iso)
[ Сервер для Forex от €7.95/мес ](/rus/server-for-forex)