From 66b439cc2e969975782d81144e88d4d05c16aa22 Mon Sep 17 00:00:00 2001 From: Denozordec Date: Wed, 30 Sep 2026 00:42:28 +0700 Subject: [PATCH] =?UTF-8?q?fix(ui):=20=D0=BF=D0=BE=D0=B4=D1=82=D0=B2=D0=B5?= =?UTF-8?q?=D1=80=D0=B6=D0=B4=D0=B0=D1=82=D1=8C=20=D0=BF=D0=B5=D1=80=D0=B5?= =?UTF-8?q?=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=82=D1=83?= =?UTF-8?q?=D0=BD=D0=BD=D0=B5=D0=BB=D0=B5=D0=B9=20GRE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/(main)/gre/page.tsx | 18 +++++++++++--- docs/ux-ui-plan.md | 4 +-- docs/ux-ui-progress.md | 9 ++++++- docs/ux-ui-stage-9.md | 6 ++++- tests/e2e/gre-toggle.spec.ts | 48 ++++++++++++++++++++++++++++++++++++ 5 files changed, 78 insertions(+), 7 deletions(-) create mode 100644 tests/e2e/gre-toggle.spec.ts diff --git a/app/(main)/gre/page.tsx b/app/(main)/gre/page.tsx index 3d939d5a..932c5d56 100644 --- a/app/(main)/gre/page.tsx +++ b/app/(main)/gre/page.tsx @@ -275,6 +275,9 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on const [tunnelMode, setTunnelMode] = useState<"create" | "edit">("create") const [editingTunnel, setEditingTunnel] = useState(null) const [pendingDelete, setPendingDelete] = useState(null) + const toggleLock = useRef(false) + const [toggleStatus, setToggleStatus] = useState(null) + const [toggleError, setToggleError] = useState(null) const deleteLock = useRef(false) const [deleteError, setDeleteError] = useState(null) const [mutateBusy, setMutateBusy] = useState(false) @@ -484,10 +487,13 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on } async function toggleTunnel(t: GreTunnel) { - if (!isLive || mutationsLocked) return + if (!isLive || mutationsLocked || toggleLock.current) return + toggleLock.current = true + setToggleError(null) + setToggleStatus(`Ожидание изменения ${t.name}…`) setMutateBusy(true) try { - await apiFetch("/api/gre/tunnels", { + const result = await apiFetch<{ ok: boolean }>("/api/gre/tunnels", { method: "PATCH", body: JSON.stringify({ serverId: t.serverId, @@ -497,11 +503,14 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on remoteAddress: t.remoteAddress, }), }) + if (result?.ok !== true) throw new Error("Сервер не подтвердил изменение туннеля") toast.success(t.enabled ? `Выключен ${t.name}` : `Включён ${t.name}`) await loadLive() } catch (err) { - toast.error("Не удалось изменить туннель", { description: String(err) }) + setToggleError(`${t.name}: ${err instanceof Error ? err.message : "Не удалось изменить туннель"}`) } finally { + toggleLock.current = false + setToggleStatus(null) setMutateBusy(false) } } @@ -719,6 +728,9 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on ]} /> + {toggleStatus &&

{toggleStatus}

} + {toggleError &&

{toggleError}

} + {/* Page tabs */}
{(["tunnels", "pools"] as PageTab[]).map((tab) => ( diff --git a/docs/ux-ui-plan.md b/docs/ux-ui-plan.md index aa6490e6..5a785af1 100644 --- a/docs/ux-ui-plan.md +++ b/docs/ux-ui-plan.md @@ -80,7 +80,7 @@ flowchart LR ## Текущая точка продолжения -По журналу этапы 0–8 завершены в границах локальной приёмки; внешние ограничения сохраняются. Этап 9 начат (блоки 9.1–9.19 — операции IPsec и удаление GRE); этапы 10–12 не начаты. Этап 11 разделён: 11А — пользователи, контейнеры, сертификаты, резервирование; 11Б — оповещения, сбор данных, интеграции, релизы, настройки. +По журналу этапы 0–8 завершены в границах локальной приёмки; внешние ограничения сохраняются. Этап 9 начат (блоки 9.1–9.20 — операции IPsec, удаление и переключение GRE); этапы 10–12 не начаты. Этап 11 разделён: 11А — пользователи, контейнеры, сертификаты, резервирование; 11Б — оповещения, сбор данных, интеграции, релизы, настройки. Подробные планы: [этап 6](ux-ui-stage-6.md), [этап 7](ux-ui-stage-7.md), [этап 8 и итоговая матрица](ux-ui-stage-8.md), [этап 9](ux-ui-stage-9.md). @@ -88,7 +88,7 @@ flowchart LR Ближайший оставшийся объём: -1. Этап 9: карта разделов и схема сохранены; удаление, импорт, создание, переключение, контекст экспорта и выбор пира WireGuard исправлены в 9.1–9.7; в 9.8 проверено подтверждение восстановления. В 9.9 исправлены разметка и сохранение подтверждения при ошибке у всех шести потребителей. В 9.10 исправлены ошибки и поздние ответы загрузки истории WireGuard. В 9.11 подтверждение восстановления проверено у остальных пяти потребителей. В 9.12 обработаны ошибка/повтор/поздние ответы истории IPsec. В 9.13 подключены ошибка/повтор/защита поздних ответов остальных четырёх разделов и общая валидация ревизий всех шести. В 9.14 исправлены подтверждение инициализации IPsec, сохранение формы и защита повторной отправки. В 9.15 проверены создание/редактирование пользователей IPsec и сохранение формы. В 9.16 проверены получение/повторный экспорт сертификатов, поздние ответы и соответствие отображаемого пароля архиву. В 9.17 подтверждены ответы удаления четырёх типов объектов IPsec и исправлен диалог повторов. В 9.18 исправлено подтверждение сохранения peer IPsec и поведение формы. В 9.19 исправлено подтверждение удаления GRE и сохранение диалога при ошибке. Далее — создание/изменение и переключение GRE, затем VXLAN/Firewall/Filters; загрузка данных IPsec и общая приёмка остаются открытыми. +1. Этап 9: карта разделов и схема сохранены; удаление, импорт, создание, переключение, контекст экспорта и выбор пира WireGuard исправлены в 9.1–9.7; в 9.8 проверено подтверждение восстановления. В 9.9 исправлены разметка и сохранение подтверждения при ошибке у всех шести потребителей. В 9.10 исправлены ошибки и поздние ответы загрузки истории WireGuard. В 9.11 подтверждение восстановления проверено у остальных пяти потребителей. В 9.12 обработаны ошибка/повтор/поздние ответы истории IPsec. В 9.13 подключены ошибка/повтор/защита поздних ответов остальных четырёх разделов и общая валидация ревизий всех шести. В 9.14 исправлены подтверждение инициализации IPsec, сохранение формы и защита повторной отправки. В 9.15 проверены создание/редактирование пользователей IPsec и сохранение формы. В 9.16 проверены получение/повторный экспорт сертификатов, поздние ответы и соответствие отображаемого пароля архиву. В 9.17 подтверждены ответы удаления четырёх типов объектов IPsec и исправлен диалог повторов. В 9.18 исправлено подтверждение сохранения peer IPsec и поведение формы. В 9.19 исправлено подтверждение удаления GRE и сохранение диалога при ошибке. В 9.20 исправлено подтверждение включения/выключения GRE и защита повторов. Далее — создание/изменение GRE, затем VXLAN/Firewall/Filters; загрузка данных IPsec и общая приёмка остаются открытыми. 2. Сохранять контекст устройства, введённые значения при ошибке и подтверждать результат операций по API; локальные моки проверяют клиентские сценарии, реальные сетевые операции требуют тестового окружения. 3. В этапе 12 выполнить полный аудит доступности (скринридер, контраст), производительности и сквозную регрессию. Ограничения этапа 8 — удалённые серверы месячного каталога, отсутствие экспорта и автоматического переподключения SSE — остаются явно зафиксированными, без заявления о реализации. diff --git a/docs/ux-ui-progress.md b/docs/ux-ui-progress.md index 765bfbe3..6727611e 100644 --- a/docs/ux-ui-progress.md +++ b/docs/ux-ui-progress.md @@ -25,12 +25,19 @@ | 6 | Навигация и дашборд | Завершён 2026-09-20 в границах локальной приёмки; ограничения ниже | | 7 | Серверы и мониторинг: детали, формы, URL-контекст, права | Завершён в границах локальной приёмки 2026-09-23; внешние ограничения ниже | | 8 | Трафик и статистика | Завершён 2026-09-28 в границах локальной приёмки; ограничения в блоке 8.13 | -| 9 | VPN, Firewall и Filters | В работе: блоки 9.1–9.19 — операции IPsec и удаление GRE | +| 9 | VPN, Firewall и Filters | В работе: блоки 9.1–9.20 — операции IPsec, удаление и переключение GRE | | 10 | Маршрутизация, диагностика, карта и терминал | Не начат | | 11А | Пользователи, контейнеры, сертификаты и резервные копии | Не начат | | 11Б | Оповещения, сбор данных, интеграции, релизы и настройки | Не начат | | 12 | Итоговая доступность, адаптивность, производительность и регрессия | Не начат | +## Блок 9.20 — переключение GRE (2026-09-30) + +- Включение/выключение требует ok=true. Синхронный замок предотвращает повтор до PATCH и обновления списка; ожидание и ошибка с именем туннеля объявляются через status/alert. Ошибка не показывает успех и не меняет данные локально. +- Все 3 E2E прошли: включение, выключение и регрессия удаления. Проверены задержка, двойное нажатие, 403, пустой ответ, ok=false и успешный повтор. Lint: 0 ошибок, прежние 14 предупреждений GRE; новый тест чистый. TypeScript и diff-check проверены перед коммитом. Последний build — 9.16, повторная сборка не выполнялась. +- Далее — создание/редактирование GRE: два варианта ответа создания, подтверждение PATCH, сохранение формы и защита повторов/закрытия. Реальные RouterOS/JWT не проверены. Этап 9 открыт. +- На старте использовано 27% пятичасовой и 97% недельной квоты; выбран небольшой самостоятельный блок. Локальный коммит без push, чужие изменения сохранены. + ## Блок 9.19 — удаление GRE (2026-09-30) - Удаление требует ok=true; пустой ответ и ok=false сохраняют диалог и не показывают успех. Ошибка находится рядом с подтверждением выбранного туннеля. Синхронный замок блокирует повтор, Escape и отмену до ответа; ожидание объявляется через status. Существующие ограничения mutationsLocked проверяются также обработчиком. diff --git a/docs/ux-ui-stage-9.md b/docs/ux-ui-stage-9.md index a9f7fdba..21c53787 100644 --- a/docs/ux-ui-stage-9.md +++ b/docs/ux-ui-stage-9.md @@ -1,6 +1,6 @@ # Этап 9: VPN и сетевые операции -Статус: начат 2026-09-28, выполнены блоки 9.1–9.19. Основа — существующие ReUI PRO/base-nova, Frame, ServerTileRail, DataGrid и формы. Правила применения сетевой конфигурации не меняем. +Статус: начат 2026-09-28, выполнены блоки 9.1–9.20. Основа — существующие ReUI PRO/base-nova, Frame, ServerTileRail, DataGrid и формы. Правила применения сетевой конфигурации не меняем. ## Схема и референсы принятого плана @@ -117,3 +117,7 @@ IPsec/GRE/Firewall/Filters/рекурсивные маршруты требую ## Блок 9.19 — удаление GRE (2026-09-30) Удаление требует ok=true; диалог сохраняет объект/ошибку, блокирует повторы и закрытие во время запроса. Проверки — в журнале. Далее — создание/изменение и переключение GRE. Реальное устройство не проверено, последний build — 9.16. + +## Блок 9.20 — переключение GRE (2026-09-30) + +PATCH требует ok=true; замок блокирует повтор, ожидание и ошибка содержат имя туннеля. Все 3 E2E прошли, новых замечаний lint нет; TypeScript — в журнале. Далее — создание/редактирование GRE. Реальное устройство не проверено, последний build — 9.16. diff --git a/tests/e2e/gre-toggle.spec.ts b/tests/e2e/gre-toggle.spec.ts new file mode 100644 index 00000000..c91d5102 --- /dev/null +++ b/tests/e2e/gre-toggle.spec.ts @@ -0,0 +1,48 @@ +import { test, expect } from "@playwright/test" + +for (const enabled of [true, false]) { +test(`GRE: переключение ${enabled} требует подтверждения`, async ({ page }) => { + let attempts = 0 + let release: (() => void) | undefined + const gate = new Promise(resolve => { release = resolve }) + const tunnel = { id: "*T/1", name: "gre-test", serverId: "1", localAddress: "192.0.2.1", remoteAddress: "192.0.2.2", localInnerIp: "10.0.0.1/30", remoteInnerIp: "10.0.0.2/30", poolId: "pool", ipsec: null, mtu: 1476, keepaliveInterval: 10, keepaliveRetries: 3, dscp: "inherit", clampTcpMss: true, allowFastPath: true, comment: "", enabled, status: "up" } + await page.route("**/health", route => route.fulfill({ json: { ok: true } })) + await page.route("**/api/**", async route => { + const path = new URL(route.request().url()).pathname + if (route.request().method() === "PATCH") { + attempts++ + expect(path).toBe("/api/gre/tunnels") + expect(route.request().postDataJSON()).toEqual({ serverId: "1", rosId: "*T/1", name: "gre-test", enabled: !enabled, remoteAddress: "192.0.2.2" }) + if (attempts === 1) { await gate; return route.fulfill({ status: 403, json: { error: "Удаление запрещено тест" } }) } + if (attempts === 2) return route.fulfill({ json: {} }) + if (attempts === 3) return route.fulfill({ json: { ok: false } }) + return route.fulfill({ json: { ok: true } }) + } + return route.fulfill({ json: path === "/api/auth/config" ? { required: false } + : path === "/api/gre/tunnels" ? { tunnels: [tunnel] } + : path === "/api/servers" ? [{ id: 1, name: "Роутер", host: "192.0.2.1", enabled: true, type: "exit-node", country: "RU", status: "online" }] : {} }) + }) + await page.goto("/gre") + const toggle = async (double = false) => { + await page.getByRole("button", { name: "Действия: gre-test" }).click() + const item = page.getByRole("menuitem", { name: enabled ? "Выключить" : "Включить", exact: true }) + if (double) await item.evaluate(element => { (element as HTMLElement).click(); (element as HTMLElement).click() }) + else await item.click() + } + await toggle(true) + await expect.poll(() => attempts).toBe(1) + await expect(page.getByRole("status").filter({ hasText: "Ожидание изменения gre-test" })).toBeVisible() + release!() + await expect(page.getByRole("alert").filter({ hasText: "Удаление запрещено тест" })).toBeVisible() + for (let i = 2; i <= 3; i++) { + await toggle() + await expect.poll(() => attempts).toBe(i) + await expect(page.getByRole("alert").filter({ hasText: "Сервер не подтвердил изменение туннеля" })).toBeVisible() + await expect(page.getByText(enabled ? "Выключен gre-test" : "Включён gre-test", { exact: true })).toHaveCount(0) + } + await toggle() + await expect(page.getByText(enabled ? "Выключен gre-test" : "Включён gre-test", { exact: true })).toBeVisible() + expect(attempts).toBe(4) + await expect(page.getByRole("alert").filter({ hasText: "Сервер не подтвердил" })).toHaveCount(0) +}) +}