fix(ui): подтверждать сохранение формы GRE
This commit is contained in:
Denozordec committed
1 parent
66b439cc2e
commit
3d518ff902
5 files changed
+111
-16
No files matched your search
+33
-12
@@ -275,6 +275,8 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on
|
||||
const [tunnelMode, setTunnelMode] = useState<"create" | "edit">("create")
|
||||
const [editingTunnel, setEditingTunnel] = useState<GreTunnel | null>(null)
|
||||
const [pendingDelete, setPendingDelete] = useState<GreTunnel | null>(null)
|
||||
const formLock = useRef(false)
|
||||
const [formError, setFormError] = useState<string | null>(null)
|
||||
const toggleLock = useRef(false)
|
||||
const [toggleStatus, setToggleStatus] = useState<string | null>(null)
|
||||
const [toggleError, setToggleError] = useState<string | null>(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<unknown>("/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 ══════════════════════════════════════════════════ */}
|
||||
<Sheet open={tunnelOpen} onOpenChange={setTunnelOpen}>
|
||||
<SheetContent side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
|
||||
<Sheet open={tunnelOpen} onOpenChange={v => { if (!formLock.current) setTunnelOpen(v) }}>
|
||||
<SheetContent showCloseButton={!mutateBusy} side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
|
||||
<SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
|
||||
<SheetTitle>{tunnelMode === "edit" ? "Редактировать GRE-туннель" : "Новый GRE-туннель"}</SheetTitle>
|
||||
<SheetDescription>RouterOS 7.20+ · /interface gre {tunnelMode === "edit" ? "set" : "add"}</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">
|
||||
<fieldset disabled={mutateBusy} className="flex flex-col gap-5">
|
||||
<div className="flex flex-col gap-4">
|
||||
<SectionTitle>Основные</SectionTitle>
|
||||
<FormField label="Имя интерфейса" required hint="Только латиница, цифры и дефис, например gre-msk-spb">
|
||||
<Input className="font-mono" placeholder="gre-msk-spb" value={tForm.name} disabled={tunnelMode === "edit"} onChange={(e) => setT("name", e.target.value)} />
|
||||
<Input className="font-mono" placeholder="gre-msk-spb" aria-label="Имя интерфейса" value={tForm.name} disabled={tunnelMode === "edit"} onChange={(e) => setT("name", e.target.value)} />
|
||||
</FormField>
|
||||
<FormField label="Сервер (MikroTik)" required>
|
||||
<select value={tForm.serverId} onChange={(e) => setT("serverId", e.target.value)} disabled={tunnelMode === "edit"}
|
||||
<select aria-label="Сервер (MikroTik)" value={tForm.serverId} onChange={(e) => 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">
|
||||
<option value="" disabled>Выбрать сервер…</option>
|
||||
{displayServers.map((s) => <option key={s.id} value={s.id}>{s.name} ({s.site})</option>)}
|
||||
</select>
|
||||
</FormField>
|
||||
<FormField label="Комментарий">
|
||||
<Input placeholder="Описание туннеля" value={tForm.comment} onChange={(e) => setT("comment", e.target.value)} />
|
||||
<Input placeholder="Описание туннеля" aria-label="Комментарий" value={tForm.comment} onChange={(e) => setT("comment", e.target.value)} />
|
||||
</FormField>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">Включён</span>
|
||||
@@ -918,7 +936,7 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on
|
||||
<Input className="font-mono" placeholder="0.0.0.0" value={tForm.localAddress} onChange={(e) => setT("localAddress", e.target.value)} />
|
||||
</FormField>
|
||||
<FormField label="Удалённый адрес" required hint="Внешний IP удалённого MikroTik">
|
||||
<Input className="font-mono" placeholder="203.0.113.1" value={tForm.remoteAddress} onChange={(e) => setT("remoteAddress", e.target.value)} />
|
||||
<Input className="font-mono" placeholder="203.0.113.1" aria-label="Удалённый адрес" value={tForm.remoteAddress} onChange={(e) => setT("remoteAddress", e.target.value)} />
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
@@ -1042,10 +1060,13 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
{mutateBusy && <p role="status" className="px-6 text-sm text-muted-foreground">Ожидание результата сохранения…</p>}
|
||||
{formError && <p role="alert" className="px-6 text-sm text-destructive">{formError}</p>}
|
||||
<SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
|
||||
<SheetClose render={<Button variant="outline" className="flex-1" />}>Отмена</SheetClose>
|
||||
<SheetClose render={<Button variant="outline" className="flex-1" disabled={mutateBusy} />}>Отмена</SheetClose>
|
||||
<Button className="flex-1" onClick={() => void submitTunnel()} disabled={mutateBusy}>
|
||||
{tunnelMode === "edit" ? "Сохранить" : "Создать туннель"}
|
||||
</Button>
|
||||
|
||||
+2
-2
@@ -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 — остаются явно зафиксированными, без заявления о реализации.
|
||||
|
||||
|
||||
@@ -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. Ошибка не показывает успех и не меняет данные локально.
|
||||
|
||||
@@ -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, доступность остальных полей и реальные сетевые операции ещё требуют проверки.
|
||||
@@ -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<void>(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)
|
||||
})
|
||||
}
|
||||
Reference in new issue
Block a user