Email DLP Monitor

Система мониторинга и предотвращения утечек данных через электронную почту (Data Loss Prevention).

Технологический стек

Frontend

• Next.js 15.2.1 (App Router) - React фреймворк
• TypeScript - Типизация
• TailwindCSS - Стилизация
• Material UI - UI компоненты
• Zustand - Управление состоянием
• Recharts - Визуализация данных
• Socket.io-client - WebSocket соединение
• date-fns - Работа с датами

Backend

• Node.js с TypeScript
• Socket.io - WebSocket сервер

Архитектура приложения

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

src/
├── app/                    # Next.js страницы
│   ├── page.tsx           # Главная страница
│   └── dashboard/         # Дашборд
├── components/            # React компоненты
│   ├── DashboardCharts.tsx    # Графики статистики
│   ├── IncidentTable.tsx      # Таблица инцидентов
│   ├── IncidentDetails.tsx    # Модальное окно деталей
│   └── RealTimeNotifications.tsx  # Уведомления
├── types/                 # TypeScript типы
│   └── incident.ts       # Типы для инцидентов
├── store/                 # Управление состоянием
│   └── incidentStore.ts  # Хранилище Zustand
└── server/               # Серверная часть
    └── websocket.ts     # WebSocket сервер

Основные компоненты

Типы данных (types/incident.ts)

• Incident - структура инцидента
• ThreatLevel - уровни угрозы ('low' | 'medium' | 'high')
• IncidentStats - структура статистики

Хранилище (store/incidentStore.ts)

• Управление списком инцидентов
• Управление статистикой
• Фильтрация данных
• Автоматическое обновление статистики при новых инцидентах

WebSocket сервер (server/websocket.ts)

• Генерация тестовых инцидентов
• Отправка уведомлений клиентам
• CORS настройки для разработки

Функциональность

Дашборд

1. Статистика в реальном времени

   • Общее количество инцидентов
   • Количество критических инцидентов
   • Инциденты в обработке

2. Визуализация данных

   • График по отделам
   • График по уровням угрозы
   • Временная динамика инцидентов

3. Таблица инцидентов

   • Время
   • Уровень угрозы
   • Пользователь
   • Отдел
   • Тема письма
   • Статус
   • Действия

4. Детальная информация

   • Модальное окно с подробностями
   • Получатели письма
   • Вложения
   • Полное описание

5. Уведомления

   • Real-time уведомления о новых инцидентах
   • Цветовая индикация по уровню угрозы

Установка и запуск

1. Установка зависимостей

npm install

2. Запуск приложения

В первом терминале запустите Next.js приложение:

npm run dev

В другом терминале запустите WebSocket сервер:

npm run websocket

Приложение будет доступно по адресу: http://localhost:3000

Конфигурация WebSocket

По умолчанию WebSocket сервер работает на порту 3001. Для изменения настроек отредактируйте файл src/server/websocket.ts:

const PORT = 3001;
const CORS_ORIGIN = "http://localhost:3000";

Масштабирование

Для production-окружения рекомендуется:

1. Реализовать реальный API для получения данных
2. Добавить аутентификацию пользователей
3. Настроить постоянное хранение данных (БД)
4. Добавить систему логирования
5. Настроить мониторинг производительности

Безопасность

В текущей версии:

• Используется CORS для WebSocket соединений
• Типизация данных для предотвращения некорректного ввода
• Валидация входящих данных на стороне клиента

Требования к системе

• Node.js 18+
• npm 8+
• Современный браузер с поддержкой WebSocket