Введение в разработку плагинов для Grafana

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

Настройка среды разработки

Прежде чем приступить к разработке плагина, убедитесь, что у вас есть необходимые инструменты и среда.

  • Установка Grafana: вы можете скачать и установить Grafana с официального сайта или использовать менеджер пакетов, такой как Docker.

    docker run -d -p 3000:3000 --name grafana grafana/grafana

  • Создание проекта плагина: для начала разработки плагина можно использовать grafana-toolkit, который упрощает создание, сборку и тестирование ваших плагинов.

    npm install -g @grafana/toolkit
grafana-toolkit plugin:create my-react-plugin
cd my-react-project

Структура проекта

Типичный проект плагина для Grafana, использующий React и TypeScript, будет иметь следующую структуру:

my-react-plugin/ ├── src/ │ ├── components/ │ │ ├── MyPanel.tsx │ │ ├── MyPanelEditor.tsx │ ├── types/ │ │ ├── defaults.ts │ │ ├── MyPanelOptions.ts │ ├── module.tsx │ ├── plugin.json ├── tsconfig.json ├── package.json └── README.md

plugin.json

Этот файл содержит метаданные о вашем плагине, такие как его имя, ID и тип.

{
  "type": "panel",
  "name": "My React Plugin",
  "id": "my-react-plugin",
  "info": {
    "author": {
      "name": "Maxim Zhirnov",
      "url": "https://example.com"
    },
    "description": "A React-based plugin for Grafana",
    "version": "1.0.0"
  },
  "dependencies": {
    "grafana": ">=8.0.0"
  },
  "includes": ["css/style.css"],
  "module": "module",
  "partials": ["partials/template.html"]
}

module.tsx

Это основная точка входа вашего плагина, где вы определяете компоненты React и настраиваете плагин.

import { PanelPlugin } from '@grafana/ui';
import { MyPanel } from './components/MyPanel';
import { MyPanelEditor } from './components/MyPanelEditor';
import { defaults, MyPanelOptions } from './types';

export const myReactPanel = new PanelPlugin<MyPanelOptions>(MyPanel);
myReactPanel.setEditor(MyPanelEditor);
myReactPanel.setDefaults(defaults);

MyPanel.tsx и MyPanelEditor.tsx

Эти файлы содержат ваши компоненты React для панели и её редактора.

// MyPanel.tsx
import React from 'react';
import { PanelProps } from '@grafana/ui';

interface MyPanelOptions {
  someText: string;
}

export class MyPanel extends React.PureComponent<PanelProps<MyPanelOptions>> {
  render() {
    const { options } = this.props;
    return (
      <div>
        Text from editor: {options.someText}
      </div>
    );
  }
}

// MyPanelEditor.tsx
import React from 'react';
import { EditorProps } from '@grafana/ui';

export class MyPanelEditor extends React.PureComponent<EditorProps<MyPanelOptions>> {
  render() {
    const { options, onOptionsChange } = this.props;
    return (
      <div>
        <input
          type="text"
          value={options.someText}
          onChange={(e) => onOptionsChange({ ...options, someText: e.target.value })}
        />
      </div>
    );
  }
}

Сборка и запуск плагина

Для сборки и запуска плагина вы можете использовать команды, предоставленные grafana-toolkit.

grafana-toolkit plugin:build
grafana-toolkit plugin:dev

Команда plugin:dev запустит сервер разработки, который будет следить за изменениями и автоматически перестраивать ваш плагин.

Мы надеемся, этот перевод будет полезен для вас.