diff --git a/app/(main)/filters/page.tsx b/app/(main)/filters/page.tsx index 8a9152a2..cca9cece 100644 --- a/app/(main)/filters/page.tsx +++ b/app/(main)/filters/page.tsx @@ -1541,7 +1541,7 @@ export default function FiltersPage() { toast.success("Версия применена на роутер") await loadRevisions() } catch (err) { - toast.error("Не удалось откатить", { description: String(err) }) + throw err } finally { setHistoryRestoring(false) } diff --git a/app/(main)/firewall/page.tsx b/app/(main)/firewall/page.tsx index 955ce28e..63bee655 100644 --- a/app/(main)/firewall/page.tsx +++ b/app/(main)/firewall/page.tsx @@ -2006,7 +2006,7 @@ function FirewallPageInner() { await loadLive() await loadRevisions() } catch (err) { - toast.error("Не удалось откатить", { description: String(err) }) + throw err } finally { setHistoryRestoring(false) } diff --git a/app/(main)/gre/page.tsx b/app/(main)/gre/page.tsx index 6273d3b0..2ceaabe1 100644 --- a/app/(main)/gre/page.tsx +++ b/app/(main)/gre/page.tsx @@ -401,7 +401,7 @@ function GrePageContent({ selectedServerId, selectedTunnelId, allTunnelsHref, on await loadLive() await loadRevisions() } catch (err) { - toast.error("Не удалось откатить", { description: String(err) }) + throw err } finally { setHistoryRestoring(false) } diff --git a/app/(main)/ipsec/page.tsx b/app/(main)/ipsec/page.tsx index 5f58f901..524b28dd 100644 --- a/app/(main)/ipsec/page.tsx +++ b/app/(main)/ipsec/page.tsx @@ -271,7 +271,7 @@ export default function IpsecPage() { await loadLive() await loadRevisions() } catch (err) { - toast.error("Не удалось откатить", { description: String(err) }) + throw err } finally { setHistoryRestoring(false) } @@ -887,7 +887,7 @@ export default function IpsecPage() { revisions={revisions} loading={historyLoading} restoring={historyRestoring} - onRestore={(id) => void restoreRevision(id)} + onRestore={restoreRevision} title="История конфигураций IPsec" itemLabel="конфигурация" /> diff --git a/app/(main)/recursive-routes/page.tsx b/app/(main)/recursive-routes/page.tsx index b12b87ff..46ba27a9 100644 --- a/app/(main)/recursive-routes/page.tsx +++ b/app/(main)/recursive-routes/page.tsx @@ -501,7 +501,7 @@ export default function RecursiveRoutesPage() { toast.success("Версия применена на роутер") await loadRevisions() } catch (e) { - toast.error(e instanceof Error ? e.message : "Не удалось откатить") + throw e } finally { setHistoryRestoring(false) } diff --git a/app/(main)/wireguard/page.tsx b/app/(main)/wireguard/page.tsx index e3b9f140..062d4059 100644 --- a/app/(main)/wireguard/page.tsx +++ b/app/(main)/wireguard/page.tsx @@ -302,7 +302,7 @@ function WireGuardPageContent({ selectedServerId, selectedInterfaceId, allInterf await loadLive() await loadRevisions() } catch (err) { - toast.error("Не удалось откатить", { description: String(err) }) + throw err } finally { restoreLock.current = false setHistoryRestoring(false) diff --git a/components/config-history-sheet.tsx b/components/config-history-sheet.tsx index 5e4f6049..6bfecb5a 100644 --- a/components/config-history-sheet.tsx +++ b/components/config-history-sheet.tsx @@ -1,6 +1,6 @@ "use client" -import { useMemo, useState, type ComponentProps } from "react" +import { useMemo, useRef, useState, type ComponentProps } from "react" import { HistoryIcon, LoaderCircleIcon, RotateCcwIcon } from "lucide-react" import { Sheet, @@ -78,12 +78,38 @@ export function ConfigHistorySheet({ onRestore: (id: string) => Promise | void }) { const [pending, setPending] = useState(null) + const restoreLock = useRef(false) + const [submitting, setSubmitting] = useState(false) + const [restoreError, setRestoreError] = useState(null) + const busy = restoring || submitting + async function confirmRestore() { + if (!pending || restoreLock.current || restoring) return + restoreLock.current = true + setSubmitting(true) + setRestoreError(null) + try { + await onRestore(pending.id) + setPending(null) + } catch (error) { + setRestoreError(error instanceof Error ? error.message : "Не удалось восстановить версию") + } finally { + restoreLock.current = false + setSubmitting(false) + } + } const newestFirst = useMemo(() => revisions, [revisions]) return ( <> - - + { + if (restoreLock.current || restoring) return + if (!v) { + setPending(null) + setRestoreError(null) + } + onOpenChange(v) + }}> + {title} @@ -92,7 +118,7 @@ export function ConfigHistorySheet({
{loading ? ( -
+
Загрузка истории…
@@ -127,8 +153,8 @@ export function ConfigHistorySheet({ type="button" variant="outline" size="sm" - disabled={restoring} - onClick={() => setPending(rev)} + disabled={busy} + onClick={() => { setRestoreError(null); setPending(rev) }} > Откатить @@ -144,7 +170,7 @@ export function ConfigHistorySheet({ - { if (!v && !restoring) setPending(null) }}> + { if (!v && !restoreLock.current && !restoring) { setPending(null); setRestoreError(null) } }}> @@ -156,25 +182,25 @@ export function ConfigHistorySheet({ На CHR будут применены {pending?.itemCount ?? 0} {itemLabel} от{" "} {pending ? formatWhen(pending.createdAt) : ""}. - - - Изменятся только объекты MikrotikManager - - Чужие правила и маршруты на роутере не удаляются. - - + + + Изменятся только объекты MikrotikManager + + Чужие правила и маршруты на роутере не удаляются. + + + {busy &&

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

} + {restoreError &&

{restoreError}

} - setPending(null)}>Отмена + setPending(null)}>Отмена { - if (!pending) return - void Promise.resolve(onRestore(pending.id)).finally(() => setPending(null)) - }} + disabled={busy || !pending} + type="button" + onClick={() => void confirmRestore()} > - {restoring ? : null} + {busy ? : null} Откатить diff --git a/docs/ux-ui-plan.md b/docs/ux-ui-plan.md index 5f16d6eb..b0a3ef95 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.8 — операции WireGuard); этапы 10–12 не начаты. Этап 11 разделён: 11А — пользователи, контейнеры, сертификаты, резервирование; 11Б — оповещения, сбор данных, интеграции, релизы, настройки. +По журналу этапы 0–8 завершены в границах локальной приёмки; внешние ограничения сохраняются. Этап 9 начат (блоки 9.1–9.9 — операции WireGuard и общий диалог восстановления); этапы 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 проверено подтверждение восстановления. Далее — общий диалог истории: HTML-разметка, сохранение при ошибке и состояния загрузки; затем IPsec/GRE/VXLAN/Firewall/Filters. +1. Этап 9: карта разделов и схема сохранены; удаление, импорт, создание, переключение, контекст экспорта и выбор пира WireGuard исправлены в 9.1–9.7; в 9.8 проверено подтверждение восстановления. В 9.9 исправлены разметка и сохранение подтверждения при ошибке у всех шести потребителей. Далее — состояния загрузки истории и защита от поздних ответов; затем IPsec/GRE/VXLAN/Firewall/Filters. 2. Сохранять контекст устройства, введённые значения при ошибке и подтверждать результат операций по API; локальные моки проверяют клиентские сценарии, реальные сетевые операции требуют тестового окружения. 3. В этапе 12 выполнить полный аудит доступности (скринридер, контраст), производительности и сквозную регрессию. Ограничения этапа 8 — удалённые серверы месячного каталога, отсутствие экспорта и автоматического переподключения SSE — остаются явно зафиксированными, без заявления о реализации. diff --git a/docs/ux-ui-progress.md b/docs/ux-ui-progress.md index ab9a6cf4..fbfaa672 100644 --- a/docs/ux-ui-progress.md +++ b/docs/ux-ui-progress.md @@ -25,12 +25,21 @@ | 6 | Навигация и дашборд | Завершён 2026-09-20 в границах локальной приёмки; ограничения ниже | | 7 | Серверы и мониторинг: детали, формы, URL-контекст, права | Завершён в границах локальной приёмки 2026-09-23; внешние ограничения ниже | | 8 | Трафик и статистика | Завершён 2026-09-28 в границах локальной приёмки; ограничения в блоке 8.13 | -| 9 | VPN, Firewall и Filters | В работе: блоки 9.1–9.8 — операции WireGuard; история требует продолжения | +| 9 | VPN, Firewall и Filters | В работе: блоки 9.1–9.9 — операции WireGuard и общий диалог восстановления | | 10 | Маршрутизация, диагностика, карта и терминал | Не начат | | 11А | Пользователи, контейнеры, сертификаты и резервные копии | Не начат | | 11Б | Оповещения, сбор данных, интеграции, релизы и настройки | Не начат | | 12 | Итоговая доступность, адаптивность, производительность и регрессия | Не начат | +## Блок 9.9 — общий диалог восстановления (2026-09-29) + +- ConfigHistorySheet закрывает подтверждение только после успешного завершения onRestore. Ошибка остаётся внутри через role=alert, выбранная ревизия сохраняется для повтора. Синхронный замок предотвращает двойной вызов; ожидание объявляется через role=status. Во время операции нельзя закрыть подтверждение или панель истории. +- Все шесть потребителей (WireGuard, IPsec, GRE, Firewall, Filters, рекурсивные маршруты) передают исключение в диалог вместо поглощения в toast. IPsec теперь возвращает Promise обработчика. Контракты API и сетевые правила не менялись; проверка ok=true остаётся добавленной ранее только у WireGuard, остальные требуют отдельного аудита ответов. +- Устранено недопустимое вложение Alert/div в AlertDialogDescription/p: предупреждение размещено рядом с описанием. Существующие Sheet/AlertDialog/Timeline/Frame и semantic tokens сохранены; получен ReUI checklist. +- Все 40 профильных E2E прошли, включая 6 новых сценариев общего диалога: точный POST, двойное нажатие, задержка, Escape, 403, сохранение подтверждения, повтор и очистка ошибки при новом выборе. Проверяются отсутствие pageerror и ошибок HTML в консоли (ожидаемый HTTP 403 исключён). +- Общий компонент, WireGuard/IPsec и тесты проходят lint. Сравнение ESLint текущих шести страниц с git show HEAD подтвердило неизменные 7 исходных ошибок и 31 предупреждение: Firewall — 4 set-state-in-effect; Filters — 2 set-state-in-effect; Recursive Routes — 1 no-empty-object-type; предупреждения также в GRE. Полный lint этих страниц остаётся красным; новых сообщений нет. Diff-check чистый; production build/TypeScript прошли (34 страницы). +- Далее — состояния загрузки истории WireGuard: ошибка не должна выглядеть пустой историей, поздние ответы не должны менять новый контекст. Затем валидация подтверждения восстановления остальных разделов и их профильный UX. Реальные RouterOS/JWT не проверены, этап 9 открыт. На контрольной точке использовано 31% пятичасового и 67% недельного лимита. Локальный коммит без push. + ## Блок 9.8 — подтверждение восстановления WireGuard (2026-09-29) - Восстановление защищено синхронным замком до завершения операции и обновления данных. Успех требует ok=true; неподтверждённый HTTP 200 больше не объявляется применённой версией. diff --git a/docs/ux-ui-stage-9.md b/docs/ux-ui-stage-9.md index b62f9c79..b3e190fd 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.8. Основа — существующие ReUI PRO/base-nova, Frame, ServerTileRail, DataGrid и формы. Правила применения сетевой конфигурации не меняем. +Статус: начат 2026-09-28, выполнены блоки 9.1–9.9. Основа — существующие ReUI PRO/base-nova, Frame, ServerTileRail, DataGrid и формы. Правила применения сетевой конфигурации не меняем. ## Схема и референсы принятого плана @@ -73,3 +73,7 @@ ## Блок 9.8 — подтверждение восстановления (2026-09-29) Один POST до завершения операции; успех требует ok=true. Новый E2E проверил повторное нажатие, ok=false и успешный повтор. Далее — ConfigHistorySheet: исправить вложение div в p и сохранение подтверждения при ошибке, проверить всех потребителей. Предупреждение HTML воспроизведено; реальная операция RouterOS не проверена. + +## Блок 9.9 — общий диалог восстановления (2026-09-29) + +Исправлена HTML-разметка предупреждения; ошибка сохраняет выбранную ревизию и подтверждение для повтора. Общий замок блокирует повтор и закрытие до завершения Promise. Ошибки всех шести потребителей передаются в диалог; IPsec возвращает Promise. Все 40 профильных E2E прошли, включая 6 новых сценариев истории. Общий компонент и тесты lint-чистые; 7 исходных ошибок и 31 предупреждение в страницах подтверждены сравнением с HEAD и не изменились. Сборка — в журнале. Далее — ошибки/гонки загрузки истории, затем подтверждение восстановления остальных разделов. Реальные устройства не проверены. diff --git a/tests/e2e/config-history.spec.ts b/tests/e2e/config-history.spec.ts new file mode 100644 index 00000000..2ee55f0f --- /dev/null +++ b/tests/e2e/config-history.spec.ts @@ -0,0 +1,61 @@ +import { test, expect } from "@playwright/test" + +for (const section of ["wireguard", "ipsec", "gre", "firewall", "filters", "recursive-routes"]) { + test(`История ${section}: ошибка сохраняет подтверждение, повтор закрывает`, async ({ page }) => { + const errors: string[] = [] + page.on("pageerror", error => errors.push(error.message)) + page.on("console", message => { if (message.type() === "error") errors.push(message.text()) }) + let attempts = 0 + let release: (() => void) | undefined + const gate = new Promise(resolve => { release = resolve }) + 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 (path.endsWith("/restore")) { + expect(decodeURIComponent(path)).toBe(`/api/${section}/revisions/rev/1/restore`) + expect(route.request().postDataJSON()).toEqual({ serverId: "1" }) + attempts++ + if (attempts === 1) { + await gate + return route.fulfill({ status: 403, json: { error: "Восстановление запрещено тест" } }) + } + return route.fulfill({ json: { ok: true, routes: [], rules: [] } }) + } + const json = path.endsWith("/revisions") ? { revisions: [{ id: "rev/1", serverId: "1", section, source: "apply", fingerprint: "fixture", createdAt: "2026-09-29T00:00:00Z", note: null, itemCount: 1 }] } + : path === "/api/auth/config" ? { required: false } + : path === "/api/servers" ? [{ id: 1, name: "История роутер", host: "192.0.2.1", type: "exit-node", enabled: true, country: "RU", site: "TEST", asn: "", status: "online", latency: 1 }] + : path === "/api/wireguard" ? { interfaces: [] } + : path === "/api/ipsec" ? { servers: [], clients: [] } + : path === "/api/gre/tunnels" || path === "/api/filters/gre-tunnels" ? { tunnels: [] } + : path === "/api/firewall/all" ? { rules: [], addressLists: [] } + : path === "/api/filters/rules" ? { rulesets: [{ serverId: "1", rules: [] }], greTunnels: [], live: true } + : path === "/api/recursive-routes" ? { routes: [] } + : path === "/api/recursive-routes/gateways" ? { gateways: [] } + : path === "/api/evobgp/settings" ? { enabled: false, baseUrl: "", secretConfigured: false } : {} + return route.fulfill({ json }) + }) + await page.goto(`/${section}?server=1`) + if (section === "ipsec") await page.getByRole("option").filter({ hasText: "История роутер" }).click() + await page.getByRole("button", { name: "История", exact: true }).click() + const sheet = page.getByRole("dialog") + await sheet.getByRole("button", { name: "Откатить", exact: true }).click() + const dialog = page.getByRole("alertdialog") + await dialog.getByRole("button", { name: "Откатить", exact: true }).evaluate(button => { (button as HTMLButtonElement).click(); (button as HTMLButtonElement).click() }) + await expect.poll(() => attempts).toBe(1) + await expect(dialog.getByRole("status")).toContainText("Ожидание результата") + await expect(dialog.getByRole("button", { name: "Отмена" })).toBeDisabled() + await page.keyboard.press("Escape") + await expect(dialog).toBeVisible() + release!() + await expect(dialog.getByRole("alert").filter({ hasText: "Восстановление запрещено тест" })).toBeVisible() + await expect(dialog.getByRole("button", { name: "Откатить", exact: true })).toBeEnabled() + await dialog.getByRole("button", { name: "Откатить", exact: true }).click() + await expect(dialog).toHaveCount(0) + expect(attempts).toBe(2) + await sheet.getByRole("button", { name: "Откатить", exact: true }).click() + await expect(dialog.getByText("Восстановление запрещено тест")).toHaveCount(0) + await page.keyboard.press("Escape") + await expect(dialog).toHaveCount(0) + expect(errors.filter(error => !error.includes("403 (Forbidden)"))).toEqual([]) + }) +} diff --git a/tests/e2e/wireguard-links.spec.ts b/tests/e2e/wireguard-links.spec.ts index 66723a61..05274547 100644 --- a/tests/e2e/wireguard-links.spec.ts +++ b/tests/e2e/wireguard-links.spec.ts @@ -461,10 +461,9 @@ test("WireGuard: восстановление требует подтвержд await expect.poll(() => attempts).toBe(1) await expect(confirm.getByRole("button", { name: "Откатить", exact: true })).toBeDisabled() release!() - await expect(page.getByText("Не удалось откатить", { exact: true })).toBeVisible() + await expect(confirm.getByRole("alert").filter({ hasText: "Сервер не подтвердил восстановление" })).toBeVisible() await expect(page.getByText("Версия применена на роутер", { exact: true })).toHaveCount(0) - await expect(confirm).toHaveCount(0) - await sheet.getByRole("button", { name: "Откатить", exact: true }).click() + await expect(confirm).toBeVisible() await confirm.getByRole("button", { name: "Откатить", exact: true }).click() await expect(page.getByText("Версия применена на роутер", { exact: true })).toBeVisible() expect(attempts).toBe(2)