fix(ui): сохранять подтверждение восстановления при ошибке

This commit is contained in:
Denozordec committed 2026-09-29 13:37:32 +07:00
1 parent 221d6db10c
commit 1d1de12c58
12 files changed
+134 -35

No files matched your search

+1 -1
View File
@@ -1541,7 +1541,7 @@ export default function FiltersPage() {
toast.success("Версия применена на роутер")
await loadRevisions()
} catch (err) {
toast.error("Не удалось откатить", { description: String(err) })
throw err
} finally {
setHistoryRestoring(false)
}
+1 -1
View File
@@ -2006,7 +2006,7 @@ function FirewallPageInner() {
await loadLive()
await loadRevisions()
} catch (err) {
toast.error("Не удалось откатить", { description: String(err) })
throw err
} finally {
setHistoryRestoring(false)
}
+1 -1
View File
@@ -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)
}
+2 -2
View File
@@ -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="конфигурация"
/>
+1 -1
View File
@@ -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)
}
+1 -1
View File
@@ -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)
+47 -21
View File
@@ -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> | void
}) {
const [pending, setPending] = useState<ConfigRevisionDto | null>(null)
const restoreLock = useRef(false)
const [submitting, setSubmitting] = useState(false)
const [restoreError, setRestoreError] = useState<string | null>(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 (
<>
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent side="right" className="w-full sm:max-w-md flex flex-col gap-0 p-0">
<Sheet open={open} onOpenChange={v => {
if (restoreLock.current || restoring) return
if (!v) {
setPending(null)
setRestoreError(null)
}
onOpenChange(v)
}}>
<SheetContent showCloseButton={!busy} side="right" className="w-full sm:max-w-md flex flex-col gap-0 p-0">
<SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
<SheetTitle>{title}</SheetTitle>
<SheetDescription>
@@ -92,7 +118,7 @@ export function ConfigHistorySheet({
</SheetHeader>
<div className="flex-1 min-h-0 overflow-y-auto px-6 py-5">
{loading ? (
<div className="flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground">
<div role="status" className="flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground">
<LoaderCircleIcon className="size-4 animate-spin" />
Загрузка истории…
</div>
@@ -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) }}
>
<RotateCcwIcon className="size-3.5" />
Откатить
@@ -144,7 +170,7 @@ export function ConfigHistorySheet({
</SheetContent>
</Sheet>
<AlertDialog open={Boolean(pending)} onOpenChange={(v) => { if (!v && !restoring) setPending(null) }}>
<AlertDialog open={Boolean(pending)} onOpenChange={(v) => { if (!v && !restoreLock.current && !restoring) { setPending(null); setRestoreError(null) } }}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogMedia className="bg-warning/10 text-warning">
@@ -156,25 +182,25 @@ export function ConfigHistorySheet({
На CHR будут применены {pending?.itemCount ?? 0} {itemLabel} от{" "}
{pending ? formatWhen(pending.createdAt) : ""}.
</span>
<Alert variant="warning">
<TriangleAlertIcon />
<AlertTitle>Изменятся только объекты MikrotikManager</AlertTitle>
<AlertDescription>
Чужие правила и маршруты на роутере не удаляются.
</AlertDescription>
</Alert>
</AlertDialogDescription>
<Alert variant="warning">
<TriangleAlertIcon />
<AlertTitle>Изменятся только объекты MikrotikManager</AlertTitle>
<AlertDescription>
Чужие правила и маршруты на роутере не удаляются.
</AlertDescription>
</Alert>
</AlertDialogHeader>
{busy && <p role="status" className="text-sm text-muted-foreground">Ожидание результата восстановления…</p>}
{restoreError && <p role="alert" className="text-sm text-destructive">{restoreError}</p>}
<AlertDialogFooter>
<AlertDialogCancel disabled={restoring} onClick={() => setPending(null)}>Отмена</AlertDialogCancel>
<AlertDialogCancel disabled={busy} onClick={() => setPending(null)}>Отмена</AlertDialogCancel>
<AlertDialogAction
disabled={restoring || !pending}
onClick={() => {
if (!pending) return
void Promise.resolve(onRestore(pending.id)).finally(() => setPending(null))
}}
disabled={busy || !pending}
type="button"
onClick={() => void confirmRestore()}
>
{restoring ? <LoaderCircleIcon className="size-4 animate-spin" /> : null}
{busy ? <LoaderCircleIcon className="size-4 animate-spin" /> : null}
Откатить
</AlertDialogAction>
</AlertDialogFooter>
+2 -2
View File
@@ -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 — остаются явно зафиксированными, без заявления о реализации.
+10 -1
View File
@@ -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 больше не объявляется применённой версией.
+5 -1
View File
@@ -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 и не изменились. Сборка — в журнале. Далее — ошибки/гонки загрузки истории, затем подтверждение восстановления остальных разделов. Реальные устройства не проверены.
+61
View File
@@ -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<void>(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([])
})
}
+2 -3
View File
@@ -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)