AlertSystem.tsx

Обзор

Компонент AlertSystem представляет собой пользовательский React-компонент, предназначенный для отображения и управления системными оповещениями (алертами). Он предоставляет пользователю визуальное представление текущих алертов с возможностью фильтрации по типу и категории, а также опции просмотра разрешённых алертов и подробностей каждого оповещения. Компонент поддерживает действия по отметке алерта как «решённого» и (опционально) по его отклонению.

Основное назначение файла — предоставить интерфейс для мониторинга состояния системы через алерты различной важности и категорий, обеспечивая удобный обзор и управление ими.

Детальное описание

Интерфейс AlertSystemProps

Определяет входные параметры компонента:

Компонент AlertSystem

Функциональный React-компонент, реализующий отображение системы алертов.

Состояния (useState):

• filter — фильтр по типу алерта: 'all' | 'critical' | 'warning' | 'info'.

• categoryFilter — фильтр по категории: 'all' | 'network' | 'economic' | 'validator' | 'security'.

• showResolved — отображать ли разрешённые алерты (boolean).

• expandedAlert — ID алерта, для которого раскрыты подробности, или null.

Основная логика и рендеринг:

• Фильтрация алертов происходит на основе выбранных фильтров и флага отображения разрешённых.

• Выводится сводка по количеству алертов каждого типа (Critical, Warning, Info) и общее количество активных.

• Пользователь может переключать фильтры по типу и категории, а также включать/выключать отображение разрешённых алертов.

• Для каждого алерта отображается:

  • Иконка, соответствующая типу и категории.

  • Заголовок, сообщение, время с момента возникновения (в формате «x секунд/минут/часов/дней назад»).

  • Статус разрешения.

  • Затронутые компоненты.

  • Кнопки для раскрытия деталей, разрешения и (если задана) отклонения алерта.

• Внизу выводится статистика по отфильтрованным алертам: общее число, количество разрешённых, средняя серьёзность, время самого свежего алерта.

Вспомогательные функции

• getAlertIcon(type: string): JSX.Element
  Возвращает иконку компонента, соответствующую типу алерта (critical, warning, info).

• getCategoryIcon(category: string): JSX.Element
  Возвращает иконку для категории алерта (network, economic, validator, security).

• getAlertBorderColor(type: string): string
  Возвращает CSS класс цвета рамки алерта в зависимости от типа.

• getAlertBgColor(type: string): string
  Возвращает CSS класс цвета фона алерта.

• getSeverityColor(severity: number): string
  Возвращает CSS класс цвета текста, зависящего от уровня серьёзности (от 1 до 10).

• formatTimeAgo(timestamp: number): string
  Форматирует время с момента события в человекочитаемый вид (например, «5m ago»).

Параметры и типы

• SystemAlert — объект алерта, импортируемый из сервиса analyticsService.
  Ожидаемые свойства (на основании использования в коде):

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

  • type: 'critical' | 'warning' | 'info' — уровень важности.

  • category: 'network' | 'economic' | 'validator' | 'security' — категория.

  • title: string — заголовок алерта.

  • message: string — текст сообщения.

  • severity: number — уровень серьёзности (1-10).

  • timestamp: number — время создания (в миллисекундах с эпохи).

  • resolved: boolean — статус разрешённости.

  • affectedComponents: string[] — список затронутых компонентов.

Использование

import { AlertSystem } from './AlertSystem';
import { SystemAlert } from '../services/analyticsService';

const alerts: SystemAlert[] = [
  {
    id: '123',
    type: 'critical',
    category: 'network',
    title: 'Network latency high',
    message: 'Latency exceeds threshold on node 5',
    severity: 9,
    timestamp: Date.now() - 600000,
    resolved: false,
    affectedComponents: ['Node 5', 'Router 3']
  },
  // ... другие алерты
];

function handleResolve(alertId: string) {
  console.log(`Resolved alert: ${alertId}`);
}

function handleDismiss(alertId: string) {
  console.log(`Dismissed alert: ${alertId}`);
}

<AlertSystem 
  alerts={alerts} 
  onResolveAlert={handleResolve} 
  onDismissAlert={handleDismiss} 
/>

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

• Компонент использует хуки React (useState) для управления локальным состоянием фильтров и раскрытия деталей.

• Используются иконки из библиотеки lucide-react для визуализации типов и категорий алертов.

• Цветовая схема и стили задаются через классы Tailwind CSS — цвета зависят от типа и серьёзности алерта.

• Время отображается в относительном формате, вычисляемом на стороне клиента.

• При отсутствии алертов или при фильтрах, не дающих результатов, показывается сообщение «All Clear!».

• Разрешённые алерты отображаются с уменьшенной непрозрачностью (opacity).

• Кнопка "Resolve" доступна только для неразрешённых алертов.

• Кнопка "Dismiss" отображается условно, только если передана соответствующая функция.

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

• Импортирует тип SystemAlert из сервиса аналитики analyticsService. Предположительно, этот сервис предоставляет источник данных алертов.

• Функции обратного вызова onResolveAlert и onDismissAlert позволяют интегрировать логику изменения статуса алертов в родительский компонент или глобальное состояние.

• Компонент можно использовать как в панели администратора, так и в пользовательском интерфейсе мониторинга состояния системы.

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

componentDiagram
    component AlertSystem {
        +props: AlertSystemProps
        +filter: 'all' | 'critical' | 'warning' | 'info'
        +categoryFilter: 'all' | 'network' | 'economic' | 'validator' | 'security'
        +showResolved: boolean
        +expandedAlert: string | null
        +filteredAlerts: SystemAlert[]
        +getAlertIcon(type): JSX.Element
        +getCategoryIcon(category): JSX.Element
        +getAlertBorderColor(type): string
        +getAlertBgColor(type): string
        +getSeverityColor(severity): string
        +formatTimeAgo(timestamp): string
    }
    component lucide-react <<library>>
    component analyticsService <<service>>
    
    AlertSystem --> lucide-react : использует иконки
    AlertSystem --> analyticsService : импортирует SystemAlert

Заключение

Файл AlertSystem.tsx реализует мощный, наглядный и интерактивный компонент для отображения системных оповещений. Благодаря фильтрам, цветовым индикаторам и удобным действиям, он облегчает мониторинг состояния системы и управление инцидентами. Интеграция с внешним сервисом аналитики и гибкие колбеки обеспечивают его универсальность в составе более масштабного приложения.