page.tsx

Обзор

page.tsx — это React-компонент, реализующий страницу мониторинга и аналитики сети валидаторов Symbiotic, ориентированной на газо-бесплатные игры. Компонент обеспечивает отображение реального времени ключевых метрик сети, экономических показателей и системы оповещений, позволяя пользователю переключаться между различными видами отображения: обзор, живые графики, центр оповещений и подробный системный просмотр.

Основные функции файла:

• Подписка на сервис аналитики для получения обновлений метрик и оповещений.

• Отображение и визуализация метрик сети и экономики.

• Управление системой оповещений (просмотр, разрешение).

• Экспорт метрик в JSON.

• Автоматическое и ручное обновление данных.

• Переключение между разными представлениями интерфейса.

Структура и описание компонентов

Функция MonitoringPage

Главный React-функциональный компонент страницы мониторинга.

Состояния (Hooks)

• selectedView: 'overview' | 'charts' | 'alerts' | 'detailed'
  Текущий выбранный вид отображения страницы.

• networkMetrics: NetworkMetrics | null
  Метрики сети, получаемые из сервиса аналитики.

• economicMetrics: EconomicMetrics | null
  Экономические метрики.

• alerts: SystemAlert[]
  Список системных оповещений.

• isRefreshing: boolean
  Индикатор процесса ручного обновления данных.

• autoRefresh: boolean
  Включение/выключение автоматического обновления.

useEffect: Подписка на сервис аналитики

При монтировании компонента происходит подписка на analyticsService с идентификатором 'monitoring-page'. При поступлении новых данных обновляются состояния networkMetrics, economicMetrics и alerts. При размонтировании — отписка от сервиса.

Основные методы и обработчики

handleRefresh(): Promise<void>

Асинхронная функция, запускающая ручное обновление данных. Симулирует задержку в 1 секунду для демонстрации процесса обновления.

Пример использования:

<button onClick={handleRefresh} disabled={isRefreshing}>Обновить</button>

handleExportMetrics(): void

Экспортирует текущие метрики за день в JSON-файл и инициирует скачивание файла пользователем. Использует API создания Blob и ссылок URL.

handleResolveAlert(alertId: string): void

Отмечает оповещение с указанным alertId как разрешённое, вызывая соответствующий метод сервиса аналитики.

Константы и вспомогательные переменные

• views — массив объектов для переключения между видами страницы. Каждый объект содержит:

  • id — уникальный идентификатор вида

  • name — название вида

  • icon — компонент иконки из библиотеки lucide-react.

• systemHealth — агрегированная оценка состояния системы, получаемая из analyticsService.getSystemHealth(). Содержит показатели:

  • overall

  • network

  • economic

JSX-разметка и UI

• Заголовок страницы: Отображает название и краткое описание назначения страницы мониторинга.

• Панель системного здоровья: Карточки с визуальным отображением текущих значений и иконками для:

  • Общего здоровья системы

  • Здоровья сети

  • Экономического здоровья

  • Количества активных (неразрешённых) оповещений

• Панель управления видами и опциями:

  • Кнопки для переключения между overview, charts, alerts, detailed с подсветкой активного вида.

  • Переключатель autoRefresh.

  • Кнопка обновления с анимацией во время загрузки.

  • Кнопка экспорта метрик.

• Основное содержимое страницы зависит от выбранного вида:

  • overview — компонент <MonitoringDashboard />.

  • charts — отображение нескольких графиков производительности и экономических данных с использованием компонентов <TPSChart>, <BlockTimeChart>, <NetworkHealthChart>, <ValidatorCountChart>, <MetricsChart>.

  • alerts — компонент <AlertSystem> с передачей списка оповещений и функции разрешения.

  • detailed — подробное представление с таблицами и параметрами сети и экономики, а также таблицей бенчмарков производительности.

Используемые внешние компоненты и сервисы

• Иконки: из lucide-react (Activity, BarChart3, Bell, RefreshCw, Download, Settings, TrendingUp, Zap).

• Компоненты:

  • <MonitoringDashboard /> — общий обзор.

  • <MetricsChart />, <TPSChart />, <BlockTimeChart />, <NetworkHealthChart />, <ValidatorCountChart /> — различные графики метрик.

  • <AlertSystem /> — система отображения и управления оповещениями.

• Сервис аналитики: analyticsService — предоставляет методы подписки на данные, экспорт метрик, получение состояния системы и разрешение оповещений.

• Типы данных:

  • NetworkMetrics — структура метрик сети.

  • EconomicMetrics — структура экономических метрик.

  • SystemAlert — структура оповещений.

Важные детали реализации

• Используется клиентский режим React ('use client'), что предполагает работу в браузере.

• Подписка на обновления реализована через analyticsService.subscribe с идентификатором подписки, что предотвращает множественные слушатели.

• Экспорт данных реализован через динамическое создание ссылки и элемент <a>, что обеспечивает совместимость с браузерами.

• Автоматическое обновление данных реализовано через подписку, а ручное — через кнопку обновления с имитацией задержки.

• Цвета и стили зависят от уровней показателей здоровья (зеленый, желтый, красный), что помогает визуально оценить состояние.

Взаимодействие с другими частями системы

• Компонент тесно взаимодействует с сервисом analyticsService, который предоставляет данные и методы управления системой.

• Использует компоненты визуализации и отображения, расположенные в поддиректориях ../components/.

• Отображаемые данные и оповещения отражают состояние внешней сети валидаторов и экономики, что важно для мониторинга и принятия решений.

Пример использования компонента

import MonitoringPage from './page';

function App() {
  return (
    <div>
      <MonitoringPage />
    </div>
  );
}

Диаграмма структуры компонента

componentDiagram
    direction TB
    MonitoringPage --> analyticsService : subscribe/unsubscribe\nexportMetrics\nresolveAlert\ngetSystemHealth
    MonitoringPage --> MonitoringDashboard
    MonitoringPage --> TPSChart
    MonitoringPage --> BlockTimeChart
    MonitoringPage --> NetworkHealthChart
    MonitoringPage --> ValidatorCountChart
    MonitoringPage --> MetricsChart
    MonitoringPage --> AlertSystem
    MonitoringPage --> lucide-react Icons

Заключение

page.tsx — ключевой файл для реализации интерфейса мониторинга сети Symbiotic. Он обеспечивает комплексный и интерактивный опыт для пользователей, позволяя наблюдать за состоянием сети и экономики, управлять оповещениями и экспортировать данные. Использование React hooks, современного стиля и модульных компонентов способствует поддерживаемости и расширяемости решения.