refactor(tests): update package.json scripts for linting and testing; enhance CI workflows for linting and testing integration

2026-03-15 23:29:24 +07:00
parent 164507513c
commit e529aa23ec
46 changed files with 519 additions and 146 deletions
@@ -0,0 +1,248 @@
+---
+name: Анализ и оптимизация Router Lists UI
+overview: Комплексный анализ проекта Router Lists UI (RouterOS Manager) — управление BGP-списками, MikroTik и S3. План включает предложения по новым фичам и оптимизациям архитектуры, производительности и качества кода.
+todos: []
+isProject: false
+---
+
+# Анализ проекта Router Lists UI
+
+## Текущее состояние проекта
+
+**Router Lists UI** — fullstack-приложение для управления BGP-списками (домены, IP-диапазоны, ASN), фильтрами и конфигурациями MikroTik на базе S3 (Yandex Object Storage).
+
+### Архитектура
+
+```mermaid
+flowchart TB
+    subgraph Frontend [Frontend - Vite + React]
+        App[App.jsx]
+        Pages[20+ страниц]
+        Hooks[useApiQuery, useErrorHandler]
+        API[api.js + axios]
+    end
+
+    subgraph Backend [Backend - Express]
+        Server[server.js]
+        Routes[30+ роутов]
+        S3Service[s3Service]
+        Schedulers[4 планировщика]
+    end
+
+    subgraph External [Внешние сервисы]
+        S3[S3 / Yandex Object Storage]
+        MikroTik[MikroTik RouterOS API]
+        BGP[BGP Background Service]
+    end
+
+    App --> Pages
+    Pages --> Hooks
+    Hooks --> API
+    API -->|REST| Server
+    Server --> Routes
+    Routes --> S3Service
+    S3Service --> S3
+    Routes --> MikroTik
+    Server --> Schedulers
+```
+
+
+
+### Технологический стек
+
+
+| Слой     | Технологии                                                                      |
+| -------- | ------------------------------------------------------------------------------- |
+| Frontend | React 19, Vite 7, Tabler, TanStack Query, React Router, Recharts, @xyflow/react |
+| Backend  | Express, AWS SDK (S3), Pino, Prometheus, Helmet, Rate Limit                     |
+| Инфра    | Docker, Gitea Actions, S3                                                       |
+
+
+### Сильные стороны
+
+- Продуманная обработка ошибок (retry, ErrorBoundary, NetworkErrorHandler)
+- ETag/If-None-Match для условных GET и кеширования
+- Soft-locks для предотвращения гонок при редактировании
+- Prometheus-метрики, health/ready endpoints
+- i18n (RU/EN), темы (light/dark), два варианта layout
+- Command Palette, горячие клавиши
+- Типы в `frontend/src/types/index.ts` (частичная типизация)
+
+---
+
+## Рекомендуемые фичи
+
+### 1. Аутентификация и авторизация (высокий приоритет)
+
+**Проблема:** API открыт без авторизации — любой с доступом к сети может изменять данные.
+
+**Решение:**
+
+- JWT или session-based auth (express-session + passport)
+- Роли: `viewer` (только чтение), `editor` (CRUD), `admin` (всё + настройки)
+- Middleware на backend для проверки токена/сессии
+- Страница логина, защищённые роуты на frontend
+
+### 2. Аудит-лог изменений
+
+- Логирование всех мутаций (кто, когда, что изменил)
+- Хранение в S3 (`audit/YYYY-MM-DD.jsonl`) или отдельная таблица
+- UI: страница «История изменений» с фильтрами по ресурсу, пользователю, дате
+
+### 3. Уведомления и алерты
+
+- Расширить [AlertsContext](frontend/src/contexts/AlertsContext.jsx): email/Telegram при критичных событиях
+- Настраиваемые триггеры: сервер недоступен, превышение лимита ресурсов
+- Интеграция с webhook (например, Slack/Discord)
+
+### 4. Экспорт/импорт в разных форматах
+
+- Экспорт доменов/ASN/IP в CSV, JSON, plain text
+- Импорт из CSV с маппингом колонок
+- Bulk-операции: «заменить community для выбранных» уже есть — добавить «импорт из файла»
+
+### 5. Расширенный поиск и фильтры
+
+- Полнотекстовый поиск по доменам (при больших объёмах — индексация на backend)
+- Фильтры: по community, по дате добавления (если добавить метаданные)
+- Сохранённые фильтры (уже есть [SavedFilters](frontend/src/components/SavedFilters.jsx)) — синхронизация с backend
+
+### 6. Дашборд и отчёты
+
+- Кастомные виджеты на Dashboard (drag-and-drop)
+- Отчёты: топ доменов по community, динамика изменений
+- Scheduled reports (PDF/email по расписанию)
+
+### 7. API-документация
+
+- OpenAPI/Swagger для backend API
+- Интерактивная документация (Swagger UI) на `/api-docs`
+- Генерация клиента для внешних интеграций
+
+### 8. Мобильная версия (PWA)
+
+- Service Worker для офлайн-просмотра кешированных данных
+- Адаптивные таблицы (уже используется Tabler)
+- Установка как PWA (manifest.json)
+
+---
+
+## Оптимизации проекта
+
+### Frontend
+
+#### 1. Code splitting и lazy loading
+
+**Проблема:** Все 20+ страниц импортируются синхронно в [App.jsx](frontend/src/App.jsx) — большой начальный бандл.
+
+**Решение:**
+
+```javascript
+// Вместо: import Dashboard from './Dashboard';
+const Dashboard = lazy(() => import('./Dashboard'));
+// Обернуть Routes в <Suspense fallback={<PageSkeleton />}>
+```
+
+Применить для тяжёлых страниц: `TrafficDashboard`, `NetworkMapDashboard`, `RouteOptimizerPage`, `FilterManager`, `MikrotikTools`, `OspfToolsPage`.
+
+#### 2. Виртуализация таблиц
+
+- Используется `@tanstack/react-virtual` — проверить, что все большие списки (domains, ip-ranges, asns) используют виртуализацию
+- В [DomainsNewManager](frontend/src/DomainsNewManager.jsx) — пагинация на backend (`offset`/`limit`), но при `limit=0` загружаются все данные — рассмотреть серверную пагинацию для больших объёмов
+
+#### 3. Оптимизация API-запросов
+
+- На Easy Switch при открытии идёт множество параллельных `POST /mikrotik/ping` — добавить batch endpoint `POST /mikrotik/ping-batch` для снижения нагрузки
+- Prefetch при наведении на пункты меню (React Query `prefetchQuery`)
+- Дедупликация запросов к `/communities` — уже кешируется в React Query, но вызывается из многих компонентов
+
+#### 4. Унификация работы с данными
+
+- Часть страниц использует [useApiQuery](frontend/src/hooks/useApiQuery.js) (domains, ipRanges, asns, servers, communities), часть — ручные `useState` + `api.get/post`
+- Мигрировать `DomainsNewManager`, `IPRangesManager`, `ASNsNewManager` на единые хуки из `useApiQuery` для консистентности и оптимистичных обновлений
+
+#### 5. Миграция на TypeScript
+
+- Есть [types/index.ts](frontend/src/types/index.ts), но большинство компонентов — `.jsx`
+- Поэтапная миграция: сначала `api.js`, `useApiQuery.js`, затем страницы
+- Включить `strict` в tsconfig для новых файлов
+
+### Backend
+
+#### 1. Кеширование S3-ответов
+
+- Добавить in-memory cache (например, `node-cache`) для часто читаемых объектов (`communities`, `servers`, `filters`) с TTL 30–60 сек
+- Уменьшит количество обращений к S3 при активной работе
+
+#### 2. Пул соединений и таймауты
+
+- Проверить настройки AWS SDK: connection pooling, таймауты для S3
+- Для долгих операций (address-lists, speed-test) — рассмотреть фоновые задачи (очередь jobs)
+
+#### 3. Валидация и санитизация
+
+- Использовать единую схему валидации (Ajv) для всех JSON-эндпоинтов
+- Добавить rate limit на чувствительные операции (apply config, run script)
+
+#### 4. Структура роутов
+
+- [server.js](backend/server.js) — ~450 строк, много роутов в одном файле
+- Вынести группы роутов в отдельные файлы: `textDataRoutes`, `jsonDataRoutes`, `mikrotikRoutes` и подключать через `app.use('/api/...', router)`
+
+### Инфраструктура и DevOps
+
+#### 1. Тестирование
+
+- **Сейчас:** `npm test` — заглушка, vitest упоминается в tsconfig, но тестов нет
+- Добавить unit-тесты для: `validators`, `apiErrorHandler`, `s3Helpers`, `mikrotikConfig`
+- E2E (Playwright) для критичных сценариев: логин, добавление домена, применение фильтра
+
+#### 2. CI/CD
+
+- Добавить шаг `npm run lint` и `npm run test` в Gitea Actions перед сборкой Docker
+- Отдельный workflow для frontend: `npm run build` + проверка размера бандла
+
+#### 3. Мониторинг
+
+- Prometheus уже есть — добавить алерты (например, в Alertmanager) на `http_errors_total`, `http_request_duration_seconds`
+- Health check: проверка доступности S3 в `/ready`
+
+#### 4. Безопасность
+
+- Регулярное обновление зависимостей (`npm audit`)
+- Секреты (ENCRYPTION_KEY, AWS keys) — только через env, не в коде
+- Рассмотреть Vault или аналог для production
+
+### Документация и DX
+
+- README — хороший, но API описан текстом; добавить ссылку на OpenAPI
+- CONTRIBUTING.md с правилами коммитов, кодстайла
+- Архитектурная диаграмма в репозитории (C4 или подобная)
+
+---
+
+## Приоритизация
+
+
+| Категория          | Действие                   | Приоритет |
+| ------------------ | -------------------------- | --------- |
+| Безопасность       | Аутентификация             | Высокий   |
+| Производительность | Lazy loading страниц       | Высокий   |
+| Производительность | Batch ping endpoint        | Средний   |
+| Качество           | Unit-тесты                 | Высокий   |
+| Качество           | Миграция на TS             | Средний   |
+| UX                 | Аудит-лог                  | Средний   |
+| UX                 | Расширенный экспорт/импорт | Низкий    |
+| Инфра              | CI: lint + test            | Высокий   |
+| Инфра              | S3 in-memory cache         | Средний   |
+
+
+---
+
+## Следующие шаги
+
+1. Выбрать 2–3 пункта из плана для первой итерации
+2. Для аутентификации — определиться со стратегией (JWT vs session, хранение пользователей)
+3. Для lazy loading — создать `PageSkeleton` и обновить роуты в App.jsx
+4. Для тестов — настроить Vitest, написать первые тесты для `validators` и `apiErrorHandler`
+