diff --git a/app/(main)/gre/page.tsx b/app/(main)/gre/page.tsx index 932c5d56..1d93c665 100644 --- a/app/(main)/gre/page.tsx +++ b/app/(main)/gre/page.tsx @@ -275,6 +275,8 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on const [tunnelMode, setTunnelMode] = useState<"create" | "edit">("create") const [editingTunnel, setEditingTunnel] = useState(null) const [pendingDelete, setPendingDelete] = useState(null) + const formLock = useRef(false) + const [formError, setFormError] = useState(null) const toggleLock = useRef(false) const [toggleStatus, setToggleStatus] = useState(null) const [toggleError, setToggleError] = useState(null) @@ -441,6 +443,8 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on } async function submitTunnel() { + if (formLock.current || mutationsLocked) return + setFormError(null) if (!isLive) { toast.info("Создание на роутер доступно только в live-режиме") return @@ -450,17 +454,18 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on return } if (!tForm.name.trim() || !tForm.serverId || !tForm.remoteAddress.trim()) { - toast.error("Заполните имя, сервер и удалённый адрес") + setFormError("Заполните имя, сервер и удалённый адрес") return } if (tForm.ipsecEnabled && tForm.ipsecSecret.trim().length < 8) { - toast.error("Для IPsec нужен PSK не короче 8 символов") + setFormError("Для IPsec нужен PSK не короче 8 символов") return } + formLock.current = true setMutateBusy(true) try { if (tunnelMode === "edit" && editingTunnel) { - await apiFetch("/api/gre/tunnels", { + const result = await apiFetch<{ ok: boolean }>("/api/gre/tunnels", { method: "PATCH", body: JSON.stringify({ ...tunnelWriteBody(tForm), @@ -468,20 +473,30 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on name: editingTunnel.name, }), }) + if (result?.ok !== true) throw new Error("Сервер не подтвердил сохранение туннеля") toast.success(`Туннель ${tForm.name} обновлён`) } else { - await apiFetch("/api/gre/tunnels", { + const result = await apiFetch("/api/gre/tunnels", { method: "POST", body: JSON.stringify(tunnelWriteBody(tForm)), }) + const confirmed = typeof result === "object" && result !== null && "name" in result && result.name === tForm.name.trim() && ( + ("ok" in result && result.ok === true) || + ("id" in result && typeof result.id === "string" && result.id.length > 0 && + "serverId" in result && String(result.serverId) === tForm.serverId && + "remoteAddress" in result && result.remoteAddress === tForm.remoteAddress.trim() && + "enabled" in result && result.enabled === tForm.enabled) + ) + if (!confirmed) throw new Error("Сервер не подтвердил создание туннеля") toast.success(`Туннель ${tForm.name} создан`) } setTunnelOpen(false) setEditingTunnel(null) await loadLive() } catch (err) { - toast.error("Не удалось сохранить туннель", { description: String(err) }) + setFormError(err instanceof Error ? err.message : "Не удалось сохранить туннель") } finally { + formLock.current = false setMutateBusy(false) } } @@ -539,6 +554,7 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on } function openCreateTunnel() { + setFormError(null) setTunnelMode("create") setEditingTunnel(null) setTForm({ @@ -549,6 +565,7 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on } function openEditTunnel(t: GreTunnel) { + setFormError(null) setTunnelMode("edit") setEditingTunnel(t) setTForm({ @@ -883,28 +900,29 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on /> {/* ══ Sheet: Add Tunnel ══════════════════════════════════════════════════ */} - - + { if (!formLock.current) setTunnelOpen(v) }}> + {tunnelMode === "edit" ? "Редактировать GRE-туннель" : "Новый GRE-туннель"} RouterOS 7.20+ · /interface gre {tunnelMode === "edit" ? "set" : "add"}
+
Основные - setT("name", e.target.value)} /> + setT("name", e.target.value)} /> - setT("serverId", e.target.value)} disabled={tunnelMode === "edit"} className="h-8 w-full rounded-lg border border-input bg-background px-2.5 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"> {displayServers.map((s) => )} - setT("comment", e.target.value)} /> + setT("comment", e.target.value)} />
Включён @@ -918,7 +936,7 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on setT("localAddress", e.target.value)} /> - setT("remoteAddress", e.target.value)} /> + setT("remoteAddress", e.target.value)} />
@@ -1042,10 +1060,13 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on
)}
+ + {mutateBusy &&

Ожидание результата сохранения…

} + {formError &&

{formError}

} - }>Отмена + }>Отмена diff --git a/docs/ux-ui-plan.md b/docs/ux-ui-plan.md index 5a785af1..72ef5d3b 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.20 — операции IPsec, удаление и переключение GRE); этапы 10–12 не начаты. Этап 11 разделён: 11А — пользователи, контейнеры, сертификаты, резервирование; 11Б — оповещения, сбор данных, интеграции, релизы, настройки. +По журналу этапы 0–8 завершены в границах локальной приёмки; внешние ограничения сохраняются. Этап 9 начат (блоки 9.1–9.21 — операции 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 и сохранение диалога при ошибке. В 9.20 исправлено подтверждение включения/выключения 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 и защита повторов. В 9.21 исправлены подтверждение создания/сохранения 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 6727611e..e5bc7faa 100644 --- a/docs/ux-ui-progress.md +++ b/docs/ux-ui-progress.md @@ -25,12 +25,20 @@ | 6 | Навигация и дашборд | Завершён 2026-09-20 в границах локальной приёмки; ограничения ниже | | 7 | Серверы и мониторинг: детали, формы, URL-контекст, права | Завершён в границах локальной приёмки 2026-09-23; внешние ограничения ниже | | 8 | Трафик и статистика | Завершён 2026-09-28 в границах локальной приёмки; ограничения в блоке 8.13 | -| 9 | VPN, Firewall и Filters | В работе: блоки 9.1–9.20 — операции IPsec, удаление и переключение GRE | +| 9 | VPN, Firewall и Filters | В работе: блоки 9.1–9.21 — операции IPsec и формы/действия GRE | | 10 | Маршрутизация, диагностика, карта и терминал | Не начат | | 11А | Пользователи, контейнеры, сертификаты и резервные копии | Не начат | | 11Б | Оповещения, сбор данных, интеграции, релизы и настройки | Не начат | | 12 | Итоговая доступность, адаптивность, производительность и регрессия | Не начат | +## Блок 9.21 — создание и редактирование GRE (2026-09-30) + +- Создание принимает подтверждение ok=true/name либо объект с непустым ID и совпадением имени, serverId, удалённого адреса и enabled. Это проверка подтверждения операции, не полная схема GreTunnel. PATCH требует ok=true. Ответы соответствуют двум веткам backend; серверные правила не менялись. +- Ошибка отображается в панели, сохраняет ввод; замок блокирует повтор, закрытие и поля до ответа. Ожидание объявляется через status; основные поля получили доступные имена. Ошибка сбрасывается при открытии новой формы. Имена/устройство при редактировании остаются фиксированными по существующему контракту. +- Все 6 E2E GRE прошли: оба ответа создания, редактирование, удаление, включение и выключение. Проверены задержка, двойное нажатие, 403, пустой ответ, чужой serverId/ok=false, сохранение комментария и успешный повтор. TypeScript и production build (34/34 страницы) прошли. Новых замечаний lint нет: прежние 14 предупреждений GRE, тест чистый; diff-check прошёл. Первый прогон остановлен до тестов для исправления имени кнопки в новом тесте. +- Далее — VXLAN: загрузка/ошибка/повтор и контекст server/tunnel, затем Firewall/Filters. Остаются полная схема записей GRE, доступность остальных полей формы, реальные RouterOS/JWT и сквозная приёмка; этап 9 открыт. +- На старте использовано 1% пятичасовой и 0% недельной квоты после сброса. Локальный коммит без push; чужие изменения сохранены. + ## Блок 9.20 — переключение GRE (2026-09-30) - Включение/выключение требует ok=true. Синхронный замок предотвращает повтор до PATCH и обновления списка; ожидание и ошибка с именем туннеля объявляются через status/alert. Ошибка не показывает успех и не меняет данные локально. diff --git a/docs/ux-ui-stage-9.md b/docs/ux-ui-stage-9.md index 21c53787..778caff8 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.20. Основа — существующие ReUI PRO/base-nova, Frame, ServerTileRail, DataGrid и формы. Правила применения сетевой конфигурации не меняем. +Статус: начат 2026-09-28, выполнены блоки 9.1–9.21. Основа — существующие ReUI PRO/base-nova, Frame, ServerTileRail, DataGrid и формы. Правила применения сетевой конфигурации не меняем. ## Схема и референсы принятого плана @@ -121,3 +121,7 @@ IPsec/GRE/Firewall/Filters/рекурсивные маршруты требую ## Блок 9.20 — переключение GRE (2026-09-30) PATCH требует ok=true; замок блокирует повтор, ожидание и ошибка содержат имя туннеля. Все 3 E2E прошли, новых замечаний lint нет; TypeScript — в журнале. Далее — создание/редактирование GRE. Реальное устройство не проверено, последний build — 9.16. + +## Блок 9.21 — формы GRE (2026-09-30) + +Создание проверяет ok/name либо поля подтверждённого объекта, PATCH требует ok=true. Ошибка сохраняет ввод, поля/повторы/закрытие заблокированы до ответа. Все 6 E2E прошли, остальные проверки — в журнале. Далее — VXLAN: загрузка, ошибка, повтор и URL-контекст. Полная схема GreTunnel, доступность остальных полей и реальные сетевые операции ещё требуют проверки. diff --git a/tests/e2e/gre-form.spec.ts b/tests/e2e/gre-form.spec.ts new file mode 100644 index 00000000..73bc9ef1 --- /dev/null +++ b/tests/e2e/gre-form.spec.ts @@ -0,0 +1,62 @@ +import { test, expect } from "@playwright/test" +for (const mode of ["create", "dto", "edit"]) { + test(`GRE: сохранение ${mode} подтверждается API`, 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: true, 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() === (mode === "edit" ? "PATCH" : "POST")) { + attempts++ + expect(path).toBe("/api/gre/tunnels") + expect(route.request().postDataJSON()).toMatchObject({ serverId: "1", name: "gre-test", remoteAddress: "192.0.2.9", comment: "сохранённый ввод" }) + if (mode === "edit") expect(route.request().postDataJSON().rosId).toBe("*T/1") + 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: mode === "edit" ? { ok: false } : { ...tunnel, serverId: "2" } }) + return route.fulfill({ json: mode === "dto" ? { ...tunnel, remoteAddress: "192.0.2.9" } : mode === "edit" ? { ok: true } : { ok: true, name: "gre-test" } }) + } + 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") + + if (mode === "edit") { + await page.getByRole("button", { name: "Действия: gre-test" }).click() + await page.getByRole("menuitem", { name: "Редактировать", exact: true }).click() + } else { + await page.getByRole("button", { name: "Добавить туннель", exact: true }).click() + } + const sheet = page.getByRole("dialog") + if (mode !== "edit") { + await sheet.getByLabel("Имя интерфейса").fill("gre-test") + await sheet.getByLabel("Сервер (MikroTik)").selectOption("1") + } + await sheet.getByLabel("Удалённый адрес").fill("192.0.2.9") + await sheet.getByLabel("Комментарий").fill("сохранённый ввод") + const submit = sheet.getByRole("button", { name: mode === "edit" ? "Сохранить" : "Создать туннель", exact: true }) + await submit.evaluate(button => { (button as HTMLButtonElement).click(); (button as HTMLButtonElement).click() }) + await expect.poll(() => attempts).toBe(1) + await expect(sheet.getByRole("status")).toContainText("Ожидание результата") + await expect(sheet.getByLabel("Удалённый адрес")).toBeDisabled() + await expect(sheet.getByRole("button", { name: "Отмена" })).toBeDisabled() + await page.keyboard.press("Escape") + await page.mouse.click(10, 10) + await expect(sheet).toBeVisible() + release!() + await expect(sheet.getByRole("alert")).toContainText("Запись запрещена тест") + await expect(sheet.getByLabel("Комментарий")).toHaveValue("сохранённый ввод") + for (let attempt = 2; attempt <= 3; attempt++) { + await submit.click() + await expect.poll(() => attempts).toBe(attempt) + await expect(sheet.getByRole("alert")).toContainText("Сервер не подтвердил") + } + await submit.click() + await expect(sheet).toHaveCount(0) + expect(attempts).toBe(4) + }) +}