Представьте: вы смотрите на дашборд Grafana, который выглядит так же захватывающе, как таблица из 1995 года. Внезапно вас осеняет идея: «А что, если бы я мог визуализировать метрики серверов в виде танцующих лам?» Добро пожаловать в разработку плагинов, где мы превращаем «ну ладно» в «ОГО!» с помощью TypeScript. Давайте создадим код!

Подготовка рабочего пространства

Сначала вооружитесь следующими инструментами:

  1. Node.js версии 18 и выше (кофеин современного JavaScript).
  2. Docker (ваш портативный «песочник»).
  3. Grafana Plugin Toolkit (швейцарский нож).

Запустите терминал и выполните команду:

npx @grafana/create-plugin@latest

Это волшебное заклинание создаёт структуру проекта чище, чем у Мари Кондо:

my-fancy-plugin/
├── src/
│   ├── module.ts        # Точка входа плагина
│   ├── panel/           # Ваша визуальная площадка
│   └── types/           # Определения типов TypeScript
├── package.json         # Манифест зависимостей
└── docker-compose.yml   # Локальный экземпляр Grafana
graph TD A[Точка входа плагина] --> B[Компоненты панели] A --> C[Обработка данных] B --> D[Слой визуализации] C --> D

Создание вашей первой панели на TypeScript

Давайте создадим панель, которая показывает загрузку сервера в виде эмодзи (почему бы и нет?):

import { PanelPlugin } from '@grafana/data';
import { EmojiMoodPanel } from './components/EmojiMoodPanel';
export const plugin = new PanelPlugin(EmojiMoodPanel).setPanelOptions(builder => {
  return builder
    .addSelect({
      path: 'moodLevel',
      name: 'Индикатор стресса',
      settings: {
        options: [
          { value: 0, label: '😎 Спокойно' },
          { value: 1, label: '😐 Нейтрально' },
          { value: 2, label: '🔥 Стресс' }
        ]
      }
    });
});

Соберите и запустите:

npm run dev
docker-compose up -d

Защита от ошибок с помощью типизации TypeScript

Определения TypeScript в Grafana действуют как друг, который не даёт вам написать сообщение бывшему партнёру в 2 часа ночи. Рассмотрим этот пример запроса данных:

interface ServerMetrics {
  загрузка процессора: число;
  использование памяти: число;
  качество танца ламы: 'хорошее' | 'плохое' | 'сомнительное';
}
const queryData = async (options: DataQueryRequest<ServerQuery>): Promise<DataQueryResponse> => {
  const { data } = await getBackendSrv().datasourceRequest({
    url: '/api/metrics',
    params: options.targets.filters
  });
  return {
    data: data.metrics.map((m: ServerMetrics) => ({
      название: m.качество танца ламы,
      значение: m.загрузка процессора * m.использование памяти
    }))
  };
};

Профессиональные советы из окопов разработки плагинов

  1. Магия горячей перезагрузки: npm run dev следит за файлами, как ястреб с ADD.
  2. Изучение типов: нажмите F12 на любом типе Grafana, чтобы увидеть его ДНК.
  3. Ритуал отладки: добавьте "debug": "node --inspect-brk ./node_modules/.bin/grunt dev" в package.json.
graph LR A[Запрос данных] --> B[Обработка данных] B --> C[Проверка типов] C --> D[Визуализация] D --> E[Отображение панели]

Доставьте это как FedEx

Когда будете готовы представить своё творение:

npm run build
npm run sign -- --rootUrls https://grafana.example.com

Отправьте папку dist/ в реестр плагинов Grafana. Наблюдайте, как пользователи по всему миру восхищаются вашими метриками танцующих лам!

Напутственные слова

Помните: отличные плагины — как хорошие шутки — им нужны своевременность, подача и неожиданность. А теперь сделайте свою среду IDE комедийным клубом! Что вы создадите? Круговую диаграмму, которая действительно показывает пироги? Тепловую карту, которая нагревает ваш ноутбук? Холст ваш…