51 KiB
UX/UI: журнал реализации
Правила продолжения
- План: ReUI PRO, Frame, base-nova; KpiStatGrid, ServerTileRail и CodeExportSheet остаются источниками общих композиционных решений.
- Работа последовательно, без субагентов. После каждого завершённого этапа — локальный коммит на русском, без push.
- В начале этапа и после значимых проверок читать пятичасовой лимит. При остатке 25% и ниже не начинать следующий блок; закончить проверки и журнал.
- Этапы 2–4 выполнять в отдельной ветке codex/reui-v9-migration; не выпускать её до завершения миграции всех потребителей.
- Локально доступны моки. Проверки операций должны идти по обычному API-пути с подменой HTTP-ответов в тестах: встроенный mock-режим обходит запросы и не доказывает корректность live-ветки.
- Реальное применение RouterOS, сетевой опрос и экспорт сертификатов требуют отдельной приёмки в тестовом окружении. Не считать их проверенными по мокам.
- Перед продолжением читать git status и новые коммиты; сохранять изменения других задач.
Состояние этапов
| Этап | Результат | Статус |
|---|---|---|
| 0 | Исходная база, карта миграции, проверки и обзор экранов | Завершён 2026-09-13 |
| 1 | Достоверность сохранения, удаления, включения и опроса серверов | Завершён 2026-09-13 |
| 2 | Общая оболочка Data Grid/TanStack v9, Filters и эталон серверов | Завершён 2026-09-13, с перечисленными ограничениями приёмки |
| 3 | Основные таблицы и справочники | Завершён 2026-09-13, границы проверок ниже |
| 4 | Остальные таблицы, удаление старых API, общая регрессия | В работе: BGP/OSPF и VPN-группа перенесены |
| 5 | Состояния данных, свежесть, частичные сбои, гонки polling | Не начат |
| 6 | Навигация и дашборд | Не начат |
| 7 | Серверы и мониторинг: детали, формы, URL-контекст, права | Не начат |
| 8 | Трафик и статистика | Не начат |
| 9 | VPN, Firewall и Filters | Не начат |
| 10 | Маршрутизация, диагностика, карта и терминал | Не начат |
| 11А | Пользователи, контейнеры, сертификаты и резервные копии | Не начат |
| 11Б | Оповещения, сбор данных, интеграции, релизы и настройки | Не начат |
| 12 | Итоговая доступность, адаптивность, производительность и регрессия | Не начат |
Этап 0 — исходная база
Исходный HEAD: f8e7437210.
На старте уже изменены 25 файлов навыков ReUI, AGENTS.md и создан .codex/config.toml. Они относятся к предыдущей настройке и не входят в коммит этого этапа. .codegraph/daemon.pid — служебный файл, не коммитить.
Изменение: в lib/format-service-path-label.test.ts убрано расширение .ts из локального импорта. Это устраняет TS5097 без ослабления tsconfig и без изменения UI или backend.
Проверки
| Проверка | Результат |
|---|---|
| tsc --noEmit --incremental false | Успешно после исправления импорта |
| tsx lib/format-service-path-label.test.ts | Успешно |
| tsx backend/src/services/ipsec-config.test.ts | Успешно |
| tsx backend/src/services/ros-file-contents.test.ts | Успешно |
| npm run build | Успешно: контракты, Next.js, TypeScript, 34 статические страницы |
| eslint . | Не проходит: 494 ошибки, 11015 предупреждений; включает артефакты .ci/docker |
| Тот же lint-отчёт без файлов .ci/docker | 81 ошибка, 134 предупреждения; это фильтрация отчёта, не отдельный запуск |
Lint hotspots: components/reui/sortable.tsx (8 ошибок), app/(main)/probes/page.tsx (8), components/reui/filters.tsx (6), app/(main)/network-map/page.tsx (5), app/(main)/firewall/page.tsx (4), components/reui/date-selector.tsx (3). Не исправлять их массово в этапе 1. Изоляцию generated-каталогов в ESLint вынести в отдельный небольшой блок перед миграцией; правила проверок не отключать.
В песочнице сборка не могла записать существующие dist-файлы (EPERM), а tsx падал в uv_os_get_passwd. Повторные запуски вне песочницы прошли; это ограничения окружения, не ошибки приложения.
Исходные экраны
Просмотрены /servers и /dashboard через локальную production-сборку на 127.0.0.1:3000, без backend, в mock-режиме. Скриншоты показаны в истории задачи; отдельные PNG в репозиторий не добавлены.
- Серверы: 9 записей, 7 онлайн; Frame/KPI, вкладки типов, фильтры и поиск работают как исходная композиция. На viewport 1280×720 KPI занимают две строки; часть правых колонок таблицы за пределами видимой области. Проверку прокрутки и мобильной компоновки выполнить на этапе 7.
- Дашборд: KPI с подписями «Флот», «Оверлей», «BGP Rx», «Здоровье»; ниже крупные быстрые переходы, затем график задержки и события. Очередь проблем не доминирует на первом экране — целевая перестройка этапа 6.
- Это исходный визуальный обзор, не сквозная проверка операций. Проверки консоли, клавиатуры, других размеров и тем остаются в профильных этапах.
Сохраняемые исправления IPsec
Последние коммиты исправляют общий IKEv2-peer с отдельными сертификатами клиентов, декодирование .p12 из RouterOS /file/get, отсутствие неподдерживаемых proposal-ключей в .sswan и горизонтальное переполнение шторки сертификата. Эти сценарии включить в регрессию этапов 4, 9, 11А. Ограничение passphrase брать из @mmapp/contracts (IPSEC_MIN_PASSPHRASE), не дублировать. Тест ipsec-config проходит отдельно, но отсутствует в общей npm test-цепочке backend; подключить его при следующей правке тестовой инфраструктуры.
Задание этапа 1 (выполнено)
Начать с app/(main)/servers/page.tsx, components/data-grids/servers-data-grid.tsx, shared/api/servers.ts и моделей серверов. Не начинать миграцию ReUI в этом этапе.
- Сохранение: блокировать повторную отправку; закрывать форму и менять список только после успеха API. На 400/403/500/сетевой ошибке сохранять значения и показывать сообщение рядом с формой.
- Редактирование: загрузить полную модель до разрешения сохранения; защитить от ответа другого сервера и закрытой формы. Не выводить enabled из online/offline. Изменение подключения сбрасывает прежний результат проверки.
- Удаление: подтверждение конкретного объекта; не удалять строку при ошибке API; блокировать повтор.
- Включение: обновлять enabled через API, фактическую доступность не подменять локальным переключением.
- Опрос: результат по устройству; массово не более четырёх запросов одновременно, повтор только неуспешных. Ошибку перечитывания списка отличать от результата самого опроса.
- Добавить проверки по HTTP-пути frontend с контролируемыми ответами, а не только встроенный mock. Успех, 403, 500, таймаут, двойное нажатие и смена объекта во время запроса обязательны.
- Типизация, lint изменённых файлов, профильные тесты и браузерная проверка; обновить журнал и сделать отдельный локальный коммит без push.
Остановка после этапа 0: на последней проверке осталось 15% пятичасовой квоты (было 35% на старте). Этап 1 не начат по согласованному правилу резерва. При продолжении сначала проверить свежие лимиты.
Этап 1 — достоверность операций
Исходный HEAD: 88326d9. Изменения предыдущей настройки ReUI и служебные файлы не входят в коммит этапа.
- В
app/(main)/servers/page.tsxсохранение закрывает форму только после подтверждения API. Ошибки остаются рядом с формой, повторные отправки блокируются синхронным замком. Пока загружаются детали, сохранение недоступно; ошибку загрузки можно повторить. Поздний ответ другого объекта игнорируется. - Удаление требует подтверждения имени и адреса, при ошибке строка и диалог остаются. Включение изменяет
enabledчерез API и не подменяет измеренный online/offline. Изменение параметров подключения сбрасывает прежний результат проверки. lib/server-operations.tsсодержит замок операций, понятные сообщения ошибок и очередь опроса максимум по четыре запроса. Результат показан по каждому серверу, повторяются только неудачные запросы. Ошибка последующего обновления списка отделена от результата опроса, прежние строки сохраняются.- В
shared/api/servers.tsожидание ограничено 30 секундами, для опроса — 60. Таймаут явно означает неизвестный результат: клиентское прерывание не отменяет действие на backend. Контракты и маршруты API не изменены. - В
components/data-grids/servers-data-grid.tsxдействия блокируются на время операции; выключенный сервер помечается отдельно от доступности. - Добавлены Playwright,
playwright.config.ts,tests/e2e/servers.spec.tsи командаnpm run test:servers. Используется установленный Microsoft Edge, свободный порт 3100 и отдельный Next dev процесс. Запросы API и health перехвачены тестами; встроенный mock-режим не используется. Отчёты исключены из Git.
Проверки этапа 1
| Проверка | Результат |
|---|---|
npm run test:servers |
14 браузерных тестов прошли: создание, сохранение 400/403/500 и повтор, двойное нажатие, удаление с повтором, enabled, загрузка деталей и смена объекта, массовый опрос и повтор, таймаут, отдельная ошибка обновления списка, запрет включения, сброс проверки подключения |
| TypeScript | Проверка без emit прошла; production build также проверяет типы |
npm run build |
Успешно: contracts, Next.js, TypeScript, 34 статические страницы |
| ESLint изменённых TS/TSX-файлов | 0 ошибок, 1 известное предупреждение React Compiler о TanStack v8 useReactTable |
ReUI get_audit_checklist |
Получен; сохранены установленные компоненты, Frame, семантические токены и типизированный API. Требование TanStack v9 остаётся этапам 2–4; полная доступность и адаптивность — профильным этапам и приёмке |
Моки достаточны для этих клиентских сценариев. Реальный backend, права реальных пользователей и применение RouterOS не проверены. Общие исходные ошибки lint перечислены в этапе 0; они не устранены этим этапом. Полную регрессию повторять после миграции общей основы.
Следующий шаг — этап 2
В новом окне проверить лимиты, git status и последние коммиты. Создать ветку codex/reui-v9-migration, перепроверить актуальный совместимый API ReUI Data Grid/TanStack и Filters. Мигрировать общую оболочку и одну таблицу серверов, закрепить зависимости и описать образец переноса. Сохранить проверки операций из этапа 1. Ветку не выпускать до завершения этапа 4. После этапа — отдельный локальный коммит без push.
Этап 2 — промежуточное сохранение 2026-09-13
Ветка codex/reui-v9-migration, исходный HEAD c30f817. Этап не завершён. На старте оставалось 51% пятичасового лимита, после основного блока — 24%; новые блоки остановлены по правилу резерва.
Выполнено
- Проверены MCP API и dry-run официального реестра base-nova; установлен Data Grid, новый Filters с Cascader и учебный
components/examples/c-data-grid-1.tsx. Пример не подключён к маршрутам приложения. 13 общих примитивов при установке не перезаписывались; итоговых изменений глобальной темы нет. - Закреплён
@tanstack/react-table9.2.4. Для поэтапной совместимости старые таблицы используют alias@tanstack/react-table-v8(8.21.3),components/reui/legacy-data-grid/иshared/legacy-data-grid-*. Это временная изоляция, не эмуляция API v8 поверх v9. Все старые импорты изменены механически; семантика старых экранов сохраняется. Удалить alias и legacy-файлы после последнего потребителя в этапе 4. - Канонические
shared/data-grid-shell.tsx,data-grid-sort-header.tsx,data-grid-layout.tsтипизированы черезDataGridFeatures.servers-data-grid.tsxиспользуетColumnDef<DataGridFeatures, Server>иuseTable({ features: dataGridFeatures, ... }). Отдельныеget*RowModelудалены.manualPagination: trueсохраняет прежний полный список: bundle включает пагинацию по умолчанию, а экран серверов её пока не показывает. СтабильныйgetRowIdи раскрытие сохранены. - Новый Filters установлен в
components/reui/filters/; старыйcomponents/reui/filters.tsxи его шесть потребителей пока работают. При переносе импортировать новый API явно из@/components/reui/filters/filters: одноимённый старый файл имеет приоритет над каталогом. Сохранить AND-семантику старых условий; не применятьflattenFilterConditionsкак вычислитель вложенных OR-групп.
Проверки и остаток
| Проверка | Результат |
|---|---|
tsc --noEmit --incremental false |
Прошла для всего проекта |
| 14 браузерных тестов операций | Прошли после миграции |
| Дополнительный тест v9 | Прошёл: 12 строк без потерь, сортировка в обе стороны, раскрытие и закрытие деталей |
| Lint адаптированной таблицы, общей оболочки и тестов | Прошёл без замечаний |
npm run build |
Прошла: contracts, типы и 34 статические страницы |
| Lint новых официальных Data Grid / Filters / Cascader | 23 ошибки и 27 предупреждений; точный список. Это незакрытая часть этапа, правила не отключались |
Следующий запуск: продолжить этап 2, не переходить к этапу 3. Проверить лимит и HEAD; разобрать замечания установленного реестра, подготовить и проверить переход старых Filters в FilterQuery на эталоне серверов, выполнить визуальную и клавиатурную проверку эталона и итоговый ReUI audit. Затем завершить этап отдельным локальным коммитом. Текущее сохранение — промежуточный коммит, без push; ветку не выпускать.
Референсы: пример пагинации, PRO-таблица, Data Grid API, Filters API.
flowchart LR
A[Серверы: реальные API] --> B[DataGridShell]
B --> C[ReUI Data Grid + TanStack v9]
D[Остальные таблицы] --> E[Временная оболочка legacy]
E --> F[TanStack v8 alias]
G[Старые Filters] -. этапы 2–4 .-> H[FilterQuery: AND / OR]
Малый блок после промежуточного сохранения
По отдельному поручению пользователя выполнить работу в пределах 10% квоты; на старте фактически оставалось 9%. В data-grid.tsx сериализация tableLayout и tableClassNames вынесена в именованные ключи зависимостей useMemo. Сравнение по содержимому сохранено, два замечания React Compiler устранены, правила не отключались.
Проверки: TypeScript всего проекта прошёл; браузерный тест v9 (12 строк, сортировка, раскрытие) прошёл. Повторный lint группы: 21 ошибка, 27 предупреждений, актуальный компактный отчёт — docs/reui-migration-lint.md. Production build не повторялся после этой локальной правки; предыдущая сборка этапа прошла. Этап 2 остаётся в работе; следующий объём прежний.
Этап 2 — завершение
Продолжение от f9a4a07 в codex/reui-v9-migration. Записи о промежуточных остановках выше — история; текущий следующий шаг — этап 3.
Результат
- Серверы используют ReUI Data Grid/TanStack 9.2.4 и новый
FilterQuery; таблица сохраняет все строки, сортировку, детали и подтверждённые операции этапа 1. Для раскрытия есть отдельная кнопка сaria-expanded, работающая с клавиатуры. При пустом результате фильтрации показывается «Нет совпадений», а не предложение добавить первый сервер. ServerFiltersповторяет контракт официальногоc-filters-1. Поляcountry/status/typeимеютtype: select, потому что данные скалярные. Варианты множественного выбора задаются операторами. Добавлены русские подписи Filters, вычислитель дереваapplyFilterQueryи временныйmigrateFilterQueryдля AND-массива старых условий. Неизвестное условие не расширяет выборку, незавершённые условия не превращают OR в истинное выражение.DataPageToolbar.filterControlпозволяет переносить потребителей по одному; старые props сохранены только на период этапов 3–4. Новые импорты Filters обязательно указывают/filters/filters, пока существует старый одноимённый файл.- Выполнены локальные исправления совместимости исходников ReUI с React Compiler. Контекст Data Grid передаёт актуальный снимок данных; императивный координатор ширины получает только закоммиченные React значения. Кэш подписей Cascader обновляется без мутации ref во время рендера; измерения запускаются через ResizeObserver/кадр браузера, отложенная навигация отменяется при смене контекста. Draft и автооткрытие Filters синхронизируются до рендера дочерних редакторов. Убраны неиспользуемые импорты и лишние вычисления. Правила lint не отключались, публичные API и композиция сохранены. При будущем обновлении реестра эти исправления сравнить с upstream, не перезаписывать автоматически.
Приёмка
| Проверка | Результат |
|---|---|
npm run test:servers |
17 браузерных тестов прошли, включая операции, сортировку 12 строк, фильтрацию AND, изменение/сброс, Escape и клавиатурное раскрытие |
npx tsx --test lib/data-filters/apply-filter-query.test.ts |
6 тестов прошли: AND/OR, отрицание, черновики, пустые/неизвестные условия, эквивалентность поддерживаемых старых операторов |
TypeScript и npm run build |
Успешно, 34 статические страницы |
| Lint изменённых участков и новой группы ReUI | 0 ошибок, 1 предупреждение react-hooks/incompatible-library для виртуализатора. React Compiler пропускает его оптимизацию; отчёт |
| Визуальная проверка | Просмотрены экраны 1440×1000 и 390×844. Page overflow отсутствует; широкая таблица сохраняет горизонтальный скролл внутри своего контейнера |
| ReUI audit | Checklist получен; проверены композиция Frame/base-nova, API, типизированные HTTP-данные, подписи, состояния и фокус эталона. Правки internals ограничены описанной совместимостью, без смены дизайна |
Границы приёмки: моки HTTP не подтверждают реальные права или применение RouterOS. Общая мобильная шапка обрезает часть действий, KPI занимают много высоты — исходные задачи этапов 6–7. Некоторые служебные объявления вложенного Cascader ещё английские — завершить локализацию на этапе 7. Все режимы DnD/виртуализации/автоподбора ширины не были проверены браузером на этом этапе; их проверять при переносе использующих их экранов. Изменённый способ публикации контекста Data Grid требует профилирования больших таблиц на этапе 12. Это не полная приёмка доступности/производительности всего приложения.
Образец следующего переноса
- В выбранном доменном grid заменить
react-table-v8наreact-table, legacy-оболочку наDataGridShellи заголовки на новыйDataGridSortHeader. - Тип колонок —
ColumnDef<DataGridFeatures, T>, таблицы —Table<DataGridFeatures, T>. ИспользоватьuseTable({ features: dataGridFeatures, ... }); удалить старыеget*RowModel. Сверить переименованные sorting/pinning/resize props с установленным API. Сохранить стабильныйgetRowId. - Явно определить пагинацию: для полного списка без панели —
manualPagination: true; для серверной — передавать реальныйrowCount; для клиентской — подключить панель и контролируемую страницу. - Для Filters перенести поля
key → id, выбрать тип по данным, сохранить AND черезmigrateFilterQuery. Вычислитель сейчас поддерживает только операторы скалярных фильтров серверов и прежние текстовые contains; перед переносом дат, чисел или массивов расширить вычисление и тесты. Нельзя просто сплющить OR-дерево. - Проверить фильтрацию, сортировку, сброс/страницу, раскрытие и действия. Старую основу удалять только после последнего потребителя в этапе 4.
Следующий шаг: проверить квоту и состояние файлов; выполнить только этап 3 (обзор, мониторинг, трафик, статистика и справочники) в этой ветке, перечислить оставшихся legacy-потребителей и сделать локальный коммит без push. Перед миграцией виртуализированных таблиц добавить профильные проверки указанного выше риска контекста. Этапы 2–4 не выпускать до общей регрессии этапа 4.
Этап 3 — основные таблицы и справочники
Перенесены десять прямых потребителей: asns-data-grid, domains-data-grid, ip-ranges-data-grid, communities-data-grid, compact-data-grid, uptime-resources-data-grid, uptime-speed-history-data-grid, traffic-flows-data-grid, traffic/flow-analytics-panel, traffic/flow-traffic-map. Через CompactDataGrid новую основу получили таблицы дашборда, статистики и снимков состояния. Серверы уже перенесены на этапе 2.
Используются useTable, dataGridFeatures и типы v9. Сохранены доменные props, стабильные идентификаторы, раскрытие и обработчики действий. Для списков без панели явно отключена клиентская пагинация; для каталогов EvoBGP она сохранена. Таблицы потоков сохраняют исходный порядок данных. Состояние выбора Communities приведено к типу v9. Общая оболочка получила русские служебные подписи через документированный i18n, без изменения установленных примитивов ReUI.
| Референс | Схема сохранённого сценария |
|---|---|
| Data Grid Filtering 2 | Поиск → страница таблицы → сортировка / выбор строки → детали |
| API Data Grid | Типизированные данные → useTable v9 → DataGridShell → таблица и опциональная пагинация |
Проверки: TypeScript и целевой ESLint — без ошибок и предупреждений. 17 браузерных тестов серверов прошли. Добавлены 6 сценариев tests/e2e/migrated-tables.spec.ts: пагинация и поиск с последней страницы в трёх справочниках, числовая сортировка через границу страницы, выбор одной из 12 Communities, все 12 строк статистики и переход в URL-срез. Первый старт Next.js превысил 120 секунд; повторный старт успешен. Два теста сначала упали из-за неточных селекторов, исправлены и повторно прошли. Все запросы перехватывались HTTP-моками.
ReUI audit checklist получен. Сохранены Frame/base-nova, композиция и типизированные источники; новые props сверены с установленными файлами. Просмотрен экран Communities: таблица и выбранная строка отображаются, но правая панель деталей обрезается при ширине 1440 px. Исправить размещение таблицы/деталей при профильной переработке экранов; общую доступность и адаптивность не считать принятой. Существующие неработающие действия справочников также не входят в приёмку миграции. Браузерные проверки всех комбинаций мониторинга, traffic-map и snapshot-деталей остаются для общей регрессии этапа 4 и профильных этапов 7–10. Виртуализатор эти десять компонентов не используют; нагрузочный профиль общей основы остаётся этапу 12.
Production build прошёл: npm run build, 34 статические страницы. Последняя проверка квоты перед завершением блока: использовано 37% пятичасового окна и 50% недельного; это общий расход аккаунта, не оценка стоимости этапа.
Остаток для этапа 4
- Доменные legacy-таблицы: backups, bgp-sessions, certificates, data-collection-scheduler, filters, firewall-rules, firewall-scenario-rules, gre-pools, gre-tunnels, ospf-bfd, ospf-neighbors, ospf-routes, probes-schedule, probes-speed-probes, recursive-routes, route-optimizer-comm-recs, route-optimizer-full-routes, route-optimizer-ospf-preview, route-optimizer-wan-matrix, subusers, users, vxlan, wireguard, wireguard-peers, ipsec-users-grid.
- Общая основа:
components/data-table.tsx,components/data-grids/shared/legacy-*,components/reui/legacy-data-grid/*; ссылки на legacy layout в DataPageCard и DataPageToolbar. Проверить отсутствие потребителей перед удалением. - Старые Filters: статистика, BGP, backups, backups-history и fallback DataPageToolbar; старые определения полей/вычислитель. Статистика передаёт в API только равенство скалярных срезов: при переносе нельзя принимать OR/отрицание и молча превращать их в равенство. Сохранять незавершённый черновик отдельно от URL.
Следующий шаг: проверить квоту и git status; начать этап 4 в codex/reui-v9-migration, переносить оставшихся потребителей ограниченными группами, затем удалить v8/старые Filters и выполнить общую регрессию. Ветку до этой проверки не выпускать. Коммит этапа 3 — только локальный, без push; настройки skills/AGENTS/.codex других работ не включать.
Этап 4 — блок 1: BGP и OSPF
Перенесены bgp-sessions-data-grid, ospf-neighbors-data-grid, ospf-routes-data-grid, ospf-bfd-data-grid. Использована установленная основа ReUI v9 (useTable, dataGridFeatures, современная оболочка и заголовки); manualPagination: true сохраняет полный список. Стабильные row ID, сортировка, раскрытие BGP и управляемый выбор OSPF сохранены. Убрано неиспользуемое извлечение onHighlight из props, сам внешний контракт не менялся.
Проверки: npx tsc --noEmit --incremental false и целевой ESLint успешны. Три сценария tests/e2e/routing-tables.spec.ts подтвердили 12 строк во всех четырёх таблицах, числовую сортировку, выбор OSPF-соседа, раскрытие/сворачивание BGP после сортировки и пустые ответы API. Один тест сначала ожидал сокращённый текст пустого BFD; после уточнения селектора прошёл. Это HTTP-моки, не подтверждение реальной работы сетевых протоколов. Общая основа не менялась, повторная полная сборка/регрессия отложены до завершения этапа 4.
ReUI checklist получен: сохранены композиция, props установленного API, источники данных и оформление. Полная клавиатурная доступность действий строк, мобильная компоновка и сценарии графа остаются профильному этапу 10 и итоговой приёмке; текущие тесты их не подтверждают.
Квота: на старте использовано 49%, после блока 58% пятичасового окна (общий расход аккаунта). Этап 4 не завершён. BGP и три OSPF-таблицы исключить из списка оставшихся выше; остальные legacy-таблицы и все перечисленные старые Filters ещё остаются.
Точный следующий шаг: проверить git status и квоту, перенести VPN-группу (wireguard-data-grid, wireguard-peers-grid, ipsec-users-grid, gre-pools-data-grid, gre-tunnels-data-grid, vxlan-data-grid) с профильными проверками. Затем перейти к оставшимся таблицам управления/диагностики и миграции Filters. Старые зависимости удалять только после последнего потребителя. Этот блок сохранить отдельным локальным коммитом без push; ветку не выпускать.
Этап 4 — блок 2: WireGuard
Перенесены wireguard-data-grid и wireguard-peers-grid на установленную основу ReUI v9. Сохранены внешние props, идентификаторы, обработчики операций и раскрытие интерфейса. Явное manualPagination: true сохраняет все строки без скрытого ограничения в десять записей. Общие примитивы и сетевые операции не менялись.
Проверки: TypeScript (--incremental false) и целевой ESLint прошли без замечаний. Два браузерных сценария tests/e2e/wireguard-tables.spec.ts прошли: 12 интерфейсов, сортировка по порту, раскрытие/сворачивание пиров выбранного интерфейса, 12 строк отдельной вкладки пиров, сортировка и пустые состояния обеих вкладок. Фикстура проверяется схемой wgListResponseSchema, ответы подменяются на HTTP-уровне. Реальные операции RouterOS и права этими тестами не проверены; их приёмка остаётся этапу 9. Применён уже полученный ReUI checklist: сохранены композиция, публичный API и оформление; полная доступность и адаптивность ещё не приняты.
Квота на старте: использовано 67% пятичасового окна; после браузерных проверок — 74% (остаток 26%). Новый блок не начинать на границе резерва. Полная сборка и общая регрессия остаются завершению этапа 4, общая основа в этом блоке не менялась.
Следующий шаг после проверки квоты: перенести оставшиеся четыре VPN-таблицы ipsec-users-grid, gre-pools-data-grid, gre-tunnels-data-grid, vxlan-data-grid. WireGuard, BGP и три OSPF-таблицы уже исключены из остатка. Остальные таблицы управления/диагностики и старые Filters ещё не перенесены; этап 4 не завершён, ветку не выпускать. Блок WireGuard сохранить локальным коммитом без push.
Этап 4 — блок 3: VXLAN
По явному поручению пользователя продолжить ниже резервного порога выполнен один небольшой блок: vxlan-data-grid перенесён на установленную ReUI v9-оболочку. Использованы useTable, dataGridFeatures, типы v9 и manualPagination: true; сохранены идентификаторы, сортировка и обработчик экспорта. Общая основа не менялась.
TypeScript (--incremental false), целевой ESLint и браузерный сценарий tests/e2e/vxlan-table.spec.ts прошли. Проверены 12 строк, числовая сортировка VNI, открытие экспорта выбранного туннеля после сортировки, поиск, пустой результат и сброс. Использованы типизированные HTTP-моки; скачивание файла, применение RouterOS и существующие пункты редактирования/включения/удаления этим тестом не проверены. По ранее полученному ReUI checklist сохранены композиция, публичный API и оформление; профильная доступность и адаптивность остаются этапу 9. Полная регрессия остаётся завершению этапа 4.
После проверок осталось 8% пятичасового лимита (общая квота аккаунта). Блок сохранить локальным коммитом без push. Следующий шаг после сброса: ipsec-users-grid, gre-pools-data-grid, gre-tunnels-data-grid; затем оставшиеся таблицы управления/диагностики и старые Filters. VXLAN исключить из предыдущего списка остатка. Этап 4 не завершён, ветку не выпускать.
Этап 4 — блок 4: IPsec и GRE (2026-09-14)
Перенесены ipsec-users-grid, gre-tunnels-data-grid, gre-pools-data-grid: useTable, dataGridFeatures, типы и общая оболочка ReUI v9. Явное manualPagination: true сохраняет полный список. Сохранены существующие идентификаторы и обработчики; ID GRE по-прежнему включает индекс исходных данных, его стабильность при переупорядочивании ответа API не улучшалась в этом блоке. Установленные примитивы и сетевые правила не менялись.
Проверки: TypeScript (--incremental false), целевой ESLint и три браузерных сценария tests/e2e/ipsec-gre-tables.spec.ts прошли. Проверены 12 клиентов IPsec, сортировка и подтверждение удаления выбранного клиента с отменой; 12 GRE-туннелей и производных пулов, числовая сортировка MTU, поиск, сортировка пулов и пустые ответы API. Селектор заголовка «Клиент» уточнён после совпадения с кнопкой панели. IPsec-фикстура валидируется контрактной схемой; GRE типизирован через доменную модель. Используются HTTP-моки: применение RouterOS, удаление клиента и экспорт сертификата этим прогоном не проверены.
ReUI checklist получен; сохранены публичный API, композиция и оформление. Полная доступность, адаптивность, работа операций и существующие декоративные действия GRE-пулов остаются профильному этапу 9 и итоговой приёмке. Общая основа не менялась; полная сборка и регрессия остаются завершению этапа 4.
Квота: в начале использовано 1%, после проверок 18% пятичасового окна (общий расход аккаунта). VPN-группа миграции завершена, этап 4 в целом ещё открыт. Следующий конкретный блок — users-data-grid, subusers-data-grid, certificates-data-grid, backups-data-grid; затем оставшиеся таблицы диагностики/управления и Filters. Только после последнего потребителя удалить legacy-основу и v8 и выполнить общую регрессию. Блок IPsec/GRE сохранить локальным коммитом без push; ветку до завершения этапа 4 не выпускать.
Карта миграции (исходная инвентаризация этапа 0)
Текущая связка: @tanstack/react-table ^8.21.3, @tanstack/react-virtual ^3.14.4, base-nova. Актуальный ReUI MCP ранее подтвердил useTable/dataGridFeatures для Data Grid и дерево FilterQuery вместо filters/onChange для Filters. Перед установкой перепроверить совместимые версии, сохранить семантику существующих фильтров (простые условия → AND) и закрепить lockfile.
Источники: контракт UI, таблицы PRO, API Data Grid, API Filters.
Прямые потребители TanStack (47)
components/data-grids/asns-data-grid.tsxcomponents/data-grids/backups-data-grid.tsxcomponents/data-grids/bgp-sessions-data-grid.tsxcomponents/data-grids/certificates-data-grid.tsxcomponents/data-grids/communities-data-grid.tsxcomponents/data-grids/compact-data-grid.tsxcomponents/data-grids/data-collection-scheduler-data-grid.tsxcomponents/data-grids/domains-data-grid.tsxcomponents/data-grids/filters-data-grid.tsxcomponents/data-grids/firewall-rules-data-grid.tsxcomponents/data-grids/firewall-scenario-rules-data-grid.tsxcomponents/data-grids/gre-pools-data-grid.tsxcomponents/data-grids/gre-tunnels-data-grid.tsxcomponents/data-grids/ip-ranges-data-grid.tsxcomponents/data-grids/ospf-bfd-data-grid.tsxcomponents/data-grids/ospf-neighbors-data-grid.tsxcomponents/data-grids/ospf-routes-data-grid.tsxcomponents/data-grids/probes-schedule-data-grid.tsxcomponents/data-grids/probes-speed-probes-data-grid.tsxcomponents/data-grids/recursive-routes-data-grid.tsxcomponents/data-grids/route-optimizer-comm-recs-data-grid.tsxcomponents/data-grids/route-optimizer-full-routes-data-grid.tsxcomponents/data-grids/route-optimizer-ospf-preview-data-grid.tsxcomponents/data-grids/route-optimizer-wan-matrix-data-grid.tsxcomponents/data-grids/servers-data-grid.tsxcomponents/data-grids/shared/data-grid-shell.tsxcomponents/data-grids/shared/data-grid-sort-header.tsxcomponents/data-grids/subusers-data-grid.tsxcomponents/data-grids/traffic-flows-data-grid.tsxcomponents/data-grids/uptime-resources-data-grid.tsxcomponents/data-grids/uptime-speed-history-data-grid.tsxcomponents/data-grids/users-data-grid.tsxcomponents/data-grids/vxlan-data-grid.tsxcomponents/data-grids/wireguard-data-grid.tsxcomponents/data-grids/wireguard-peers-grid.tsxcomponents/data-table.tsxcomponents/ipsec/ipsec-users-grid.tsxcomponents/reui/data-grid/data-grid-column-filter.tsxcomponents/reui/data-grid/data-grid-column-header.tsxcomponents/reui/data-grid/data-grid-column-visibility.tsxcomponents/reui/data-grid/data-grid-table-dnd-rows.tsxcomponents/reui/data-grid/data-grid-table-dnd.tsxcomponents/reui/data-grid/data-grid-table-virtual.tsxcomponents/reui/data-grid/data-grid-table.tsxcomponents/reui/data-grid/data-grid.tsxcomponents/traffic/flow-analytics-panel.tsxcomponents/traffic/flow-traffic-map.tsx
Прямые потребители Filters (6)
app/(main)/backups/page.tsxapp/(main)/bgp/page.tsxapp/(main)/servers/page.tsxapp/(main)/statistics/page.tsxcomponents/backups/backups-history.tsxcomponents/data-page-toolbar.tsx