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

Метод 1. Использование Grafana Iframe Embed:
Один из самых простых способов встраивания Grafana в веб-приложение — использование функции внедрения Grafana Iframe. Grafana предоставляет фрагмент кода для внедрения, который вы можете включить на свою HTML-страницу. Вот пример:

<iframe src="https://your-grafana-url/dashboard-slug" width="100%" height="600" frameborder="0"></iframe>

Замените « https://your-grafana-url/dashboard-slug » фактическим URL-адресом вашей панели управления Grafana. Настройте атрибуты ширины и высоты в соответствии со своими требованиями.

Метод 2. Встраивание панелей Grafana через API.
Grafana предоставляет мощный HTTP API, который позволяет программно взаимодействовать с инструментом. Вы можете использовать API для получения определенных панелей или визуализаций из Grafana и встраивания их в свое веб-приложение. Вот пример использования JavaScript:

const panelId = 123; // Replace with your panel ID
const url = `https://your-grafana-url/api/panels/${panelId}`;
fetch(url)
  .then(response => response.json())
  .then(data => {
    const panelHtml = data.html;
    document.getElementById("grafana-container").innerHTML = panelHtml;
  });

В этом примере мы получаем HTML-код панели с помощью API Grafana и динамически вставляем его в элемент контейнера с идентификатором «grafana-container» на веб-странице.

Метод 3. Использование библиотеки JavaScript Grafana.
Grafana предоставляет официальную библиотеку JavaScript под названием «@grafana/ui», которая предлагает более расширенные возможности интеграции. Вы можете использовать эту библиотеку для встраивания панелей Grafana, создания пользовательских панелей мониторинга и программного взаимодействия с функциями Grafana. Вот пример:

import { loadPluginCss, PanelPlugin } from '@grafana/ui';
const panelId = 123; // Replace with your panel ID
loadPluginCss({
  name: 'panel-plugin',
  path: 'https://your-grafana-url/public/plugins/panel-plugin/css/panel-styles.css',
});
const panelPlugin = new PanelPlugin(({ width, height }) => {
  return `<iframe src="https://your-grafana-url/api/panels/${panelId}" width="${width}" height="${height}" frameborder="0"></iframe>`;
});
panelPlugin.render({ width: '100%', height: 600 }, document.getElementById('grafana-container'));

В этом примере показано, как использовать библиотеку JavaScript Grafana для создания плагина пользовательской панели и встраивания его в элемент контейнера.

Встраивание Grafana в веб-приложение открывает мир возможностей для визуализации данных и встроенной аналитики. В этой статье мы рассмотрели несколько методов достижения этой интеграции, включая использование внедрения Grafana Iframe, интеграцию API для получения определенных панелей и использование библиотеки Grafana JavaScript для расширенной настройки. Выберите метод, который лучше всего соответствует вашим требованиям, и начните расширять свое веб-приложение с помощью мощных возможностей визуализации данных.

Реализуя эти методы, вы можете легко интегрировать Grafana в свое веб-приложение, предоставляя пользователям широкие возможности интерактивной визуализации данных.