diff --git a/app/(main)/filters/page.tsx b/app/(main)/filters/page.tsx index 9198face..4b2aac0d 100644 --- a/app/(main)/filters/page.tsx +++ b/app/(main)/filters/page.tsx @@ -469,7 +469,7 @@ function RuleSheet({ }: { open: boolean; mode: "create" | "edit" initial: RuleForm; serverId: string - onSave: (f: RuleForm) => void; onClose: () => void + onSave: (f: RuleForm) => Promise; onClose: () => void serversList: Server[] tunnelsList: GreTunnel[] communityNameMap: Record @@ -480,6 +480,9 @@ function RuleSheet({ const [form, setForm] = useState(initial) const [error, setError] = useState(null) const [touched, setTouched] = useState(false) + const [saving, setSaving] = useState(false) + const [saveError, setSaveError] = useState(null) + const saveLock = useRef(false) const set = (k: K, v: RuleForm[K]) => { setForm(f => ({ ...f, [k]: v })) @@ -507,19 +510,31 @@ function RuleSheet({ } setError(null); return true } - const handleSave = () => { + const handleSave = async () => { + if (saveLock.current) return setTouched(true) if (!validate_(form)) return - onSave(form.action === "blackhole" - ? { ...form, gateway: "", gatewayTunnelId: "", gatewayKind: "gre" } - : form - ) + saveLock.current = true + setSaving(true) + setSaveError(null) + try { + setSaveError(await onSave(form.action === "blackhole" + ? { ...form, gateway: "", gatewayTunnelId: "", gatewayKind: "gre" } + : form + )) + } catch (error) { + setSaveError(error instanceof Error ? error.message : "Не удалось сохранить правило") + } finally { + saveLock.current = false + setSaving(false) + } } + const close = () => { if (!saveLock.current) onClose() } const isBlackhole = form.action === "blackhole" return ( - { if (!v) onClose() }}> + { if (!v) close() }}> @@ -538,13 +553,13 @@ function RuleSheet({ · {serversList.find(s => s.id === serverId)?.name} - -
+
{/* ── BGP Community ── */}
@@ -719,7 +734,7 @@ function RuleSheet({
- set("description", e.target.value)} + set("description", e.target.value)} placeholder={isBlackhole ? "RTBH — нулевая маршрутизация DDoS-трафика" : "YouTube bypass через Франкфурт"} className="h-9 text-sm" />
@@ -729,16 +744,19 @@ function RuleSheet({ {error}
)} -
+ + {saveError &&

{saveError}

} + {saving &&

Ожидание подтверждения сервера…

} - + @@ -1331,6 +1349,7 @@ export default function FiltersPage() { const [previewOpen, setPreviewOpen] = useState(false) const [copyOpen, setCopyOpen] = useState(false) const [applyBusy, setApplyBusy] = useState(false) + const applyLock = useRef(false) const [liveStale, setLiveStale] = useState(false) const [historyOpen, setHistoryOpen] = useState(false) const [historyLoading, setHistoryLoading] = useState(false) @@ -1428,7 +1447,7 @@ export default function FiltersPage() { const allTunnels = !isLive || liveLoadState === "error" ? greTunnels : (greByServer[selectedServerId] ?? []) const selectedServer = allServers.find(s => s.id === selectedServerId) ?? allServers[0] const totalRules = rulesets.reduce((s, r) => s + r.rules.length, 0) - const mutationsLocked = isLive && (applyBusy || liveStale || liveLoadState === "error") + const mutationsLocked = isLive && (applyBusy || historyRestoring || liveStale || liveLoadState !== "idle") const filterRailItems = useMemo(() => ( allServers.map((s) => ({ @@ -1445,6 +1464,8 @@ export default function FiltersPage() { ), [allServers, rulesets]) const handleSelectServer = useCallback((id: string) => { + if (applyLock.current) return + setSheetOpen(false) setSelectedServerId(id) setSearch("") }, []) @@ -1470,31 +1491,36 @@ export default function FiltersPage() { nextRules: FilterRule[], source: "apply" | "copy" = "apply", ) => { - const prev = rulesets - setRulesets((p) => p.map((rs) => rs.serverId === serverId ? { ...rs, rules: nextRules } : rs)) - if (!isLive) return - if (liveStale) { - setRulesets(prev) - toast.error("Роутер недоступен — изменения заблокированы") - return + if (applyLock.current || applyBusy || historyRestoring) return { ok: false, error: "Дождитесь завершения текущей операции" } + if (isLive && (liveStale || liveLoadState !== "idle")) { + const error = "Роутер недоступен — изменения заблокированы" + toast.error(error) + return { ok: false, error } } + if (!isLive) { + setRulesets(p => p.map(rs => rs.serverId === serverId ? { ...rs, rules: nextRules } : rs)) + return { ok: true } + } + applyLock.current = true setApplyBusy(true) try { const res = await apiFetch<{ ok: boolean; rules?: FilterRule[] }>("/api/filters/rules", { method: "PUT", body: JSON.stringify({ serverId, rules: nextRules, source }), }) - if (res.rules) { - setRulesets((p) => p.map((rs) => rs.serverId === serverId ? { ...rs, rules: res.rules ?? nextRules } : rs)) - } + if (res?.ok !== true) throw new Error("Сервер не подтвердил применение правил") + setRulesets(p => p.map(rs => rs.serverId === serverId ? { ...rs, rules: res.rules ?? nextRules } : rs)) toast.success("Правила применены на роутер") + return { ok: true } } catch (err) { - setRulesets(prev) - toast.error("Не удалось применить правила на роутер", { description: String(err) }) + const error = err instanceof Error ? err.message : "Не удалось применить правила на роутер" + toast.error("Не удалось применить правила на роутер", { description: error }) + return { ok: false, error } } finally { + applyLock.current = false setApplyBusy(false) } - }, [isLive, apiFetch, rulesets, liveStale]) + }, [isLive, apiFetch, applyBusy, historyRestoring, liveStale, liveLoadState]) const refreshFromRouter = useCallback(async () => { if (!isLive || !selectedServerId || applyBusy) return @@ -1557,13 +1583,15 @@ export default function FiltersPage() { const updateRules = useCallback((serverId: string, updater: (rules: FilterRule[]) => FilterRule[]) => { const current = rulesets.find((rs) => rs.serverId === serverId)?.rules ?? [] - void applyRules(serverId, updater(current)) + return applyRules(serverId, updater(current)) }, [rulesets, applyRules]) const openCreate = () => { + if (mutationsLocked || applyLock.current) return setSheetInitial(emptyForm()); setSheetMode("create"); setEditingId(null); setSheetOpen(true) } const openEdit = (rule: FilterRule) => { + if (mutationsLocked || applyLock.current) return setSheetInitial({ action: rule.action ?? "route", community: rule.community, @@ -1575,23 +1603,26 @@ export default function FiltersPage() { setSheetMode("edit"); setEditingId(rule.id); setSheetOpen(true) } - const handleSave = (form: RuleForm) => { - if (mutationsLocked) return + const handleSave = async (form: RuleForm): Promise => { + if (mutationsLocked) return "Изменения заблокированы — обновите данные или дождитесь завершения операции" const { gatewayKind: _gk, ...payload } = form + let result if (sheetMode === "create") { - updateRules(selectedServerId, rules => [ + result = await updateRules(selectedServerId, rules => [ ...rules, { id: newId(), ...payload, communityName: communityNameMap[payload.community] ?? "" }, ]) } else if (editingId) { - updateRules(selectedServerId, rules => + result = await updateRules(selectedServerId, rules => rules.map(r => r.id === editingId ? { ...r, ...payload, communityName: communityNameMap[payload.community] ?? "" } : r ) ) } + if (!result?.ok) return result?.error ?? "Не удалось сохранить правило" setSheetOpen(false) + return null } const handleDelete = (id: string) => { @@ -1847,7 +1878,7 @@ export default function FiltersPage() { diff --git a/docs/ux-ui-plan.md b/docs/ux-ui-plan.md index 49969e31..630d26a7 100644 --- a/docs/ux-ui-plan.md +++ b/docs/ux-ui-plan.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 и защита повторов. В 9.21 исправлены подтверждение создания/сохранения GRE и защита формы. В 9.22 исправлены контейнер ответа, первоначальные KPI и сохранение данных при ошибке VXLAN. В 9.23 backend сообщает частичные сбои VXLAN, UI сохраняет данные неответивших устройств и показывает неизвестное состояние. В 9.24 добавлены схемы payload и тесты гонок VXLAN. В 9.25 подтверждены включение/отключение правил Firewall и защита повторов. В 9.26 подтверждены включение/отключение address-list с общим замком переключений. В 9.27 удаление правил/address-list перенесено в диалог с подтверждением API и защитой повторов. В 9.28 создание/редактирование правил и address-list требуют подтверждения API, сохраняют ввод/ошибку и блокируют повторы/закрытие. В 9.29 перемещение Firewall требует ok=true, откатывает порядок при ошибке и использует общий замок. В 9.30 восстановление истории подключено к общему замку, ручное обновление и открытие истории заблокированы во время записи. В 9.31 добавлены схемы ответа Firewall/серверов, сохранение последних данных при ошибке и поколение чтения с отменой применения при начале записи. В 9.32 backend сообщает частичные сбои по устройству/семейству/таблице, UI сохраняет недоступные срезы и блокирует изменения неполного среза. В 9.33 состояние изолировано по backend/режиму; поздние операции старого экрана не запускают чтение и не показывают уведомления в новом контексте. В 9.34 показано время получения срезов Firewall: успешные обновляются, недоступные сохраняют прежнее время или остаются неизвестными. Далее — операции Filters; ограничения счётчика, свежести и записи VXLAN остаются открытыми; загрузка данных 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 и защита формы. В 9.22 исправлены контейнер ответа, первоначальные KPI и сохранение данных при ошибке VXLAN. В 9.23 backend сообщает частичные сбои VXLAN, UI сохраняет данные неответивших устройств и показывает неизвестное состояние. В 9.24 добавлены схемы payload и тесты гонок VXLAN. В 9.25 подтверждены включение/отключение правил Firewall и защита повторов. В 9.26 подтверждены включение/отключение address-list с общим замком переключений. В 9.27 удаление правил/address-list перенесено в диалог с подтверждением API и защитой повторов. В 9.28 создание/редактирование правил и address-list требуют подтверждения API, сохраняют ввод/ошибку и блокируют повторы/закрытие. В 9.29 перемещение Firewall требует ok=true, откатывает порядок при ошибке и использует общий замок. В 9.30 восстановление истории подключено к общему замку, ручное обновление и открытие истории заблокированы во время записи. В 9.31 добавлены схемы ответа Firewall/серверов, сохранение последних данных при ошибке и поколение чтения с отменой применения при начале записи. В 9.32 backend сообщает частичные сбои по устройству/семейству/таблице, UI сохраняет недоступные срезы и блокирует изменения неполного среза. В 9.33 состояние изолировано по backend/режиму; поздние операции старого экрана не запускают чтение и не показывают уведомления в новом контексте. В 9.34 показано время получения срезов Firewall: успешные обновляются, недоступные сохраняют прежнее время или остаются неизвестными. В 9.35 сохранение Filters ожидает ok=true, сохраняет ввод при ошибке и блокирует повторную отправку/закрытие; live-список меняется после подтверждения. Далее — копирование Filters, затем удаление/перенос и общая блокировка восстановления/обновления; загрузка, схемы и гонки Filters остаются открытыми; ограничения счётчика, свежести и записи VXLAN остаются открытыми; загрузка данных IPsec и общая приёмка остаются открытыми. 2. Сохранять контекст устройства, введённые значения при ошибке и подтверждать результат операций по API; локальные моки проверяют клиентские сценарии, реальные сетевые операции требуют тестового окружения. 3. В этапе 12 выполнить полный аудит доступности (скринридер, контраст), производительности и сквозную регрессию. Ограничения этапа 8 — удалённые серверы месячного каталога, отсутствие экспорта и автоматического переподключения SSE — остаются явно зафиксированными, без заявления о реализации. diff --git a/docs/ux-ui-progress.md b/docs/ux-ui-progress.md index 754d7f80..9b26913e 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.34 — IPsec/GRE/VXLAN и переключение Firewall | +| 9 | VPN, Firewall и Filters | В работе: блоки 9.1–9.35 — IPsec/GRE/VXLAN, Firewall и сохранение Filters | | 10 | Маршрутизация, диагностика, карта и терминал | Не начат | | 11А | Пользователи, контейнеры, сертификаты и резервные копии | Не начат | | 11Б | Оповещения, сбор данных, интеграции, релизы и настройки | Не начат | | 12 | Итоговая доступность, адаптивность, производительность и регрессия | Не начат | +## Блок 9.35 — подтверждённое сохранение Filters (2026-09-30) + +- Создание/редактирование правила ожидает результат PUT /api/filters/rules. applyRules возвращает результат, требует ok=true и обновляет live-список только после подтверждения; при ошибке прежний список остаётся. Подтверждённые rules из ответа имеют приоритет над отправленным списком. Общий путь применяется также к копированию/удалению/переносу, но их отдельный UX ещё не принят. +- Форма сохраняет введённые данные и показывает API-ошибку в alert. Во время запроса fieldset, кнопки отмены/закрытия/сохранения заблокированы, Escape не закрывает форму; status сообщает ожидание. Синхронные замки формы и applyRules предотвращают повторный PUT. Выбор устройства не переключается во время применения. Повторное открытие формы начинает новый сеанс с актуальными начальными значениями. Кнопка редактирования и поле описания получили доступные имена. Используются существующие Sheet/Button/Input и ReUI Data Grid, композиция base-nova сохранена. +- Проверки: пять E2E прошли — создание и редактирование (задержка, двойное нажатие, 403, пустой ответ, ok=false, повтор, подтверждённые сервером данные, повторное открытие), таблица Filters и два сценария истории. TypeScript прошёл. Новые тесты и таблица lint-чистые; исходные 2 ошибки/13 предупреждений страницы Filters совпадают с HEAD. Последние production build: frontend — 9.31, backend — 9.32; в этом блоке не повторялись. +- Следующий точный шаг: CopyRulesSheet и handleCopyRules — ожидать applyRules, сохранять выбранные цель/правила и показывать ошибку вместо преждевременного done. Затем подтверждение удаления/перемещения и общий замок обновления/восстановления. Открыты схемы ответа/правил, гонки чтения и смены backend/режима; первоначальная live-ошибка ещё подставляет встроенные моки, loadLiveRules может выбирать первый чужой ruleset и скрывает ошибку. Эти ограничения не считать исправленными данным блоком. Реальные RouterOS/JWT/БД не проверены; этап 9 открыт. +- Квота: 54% пятичасовой/8% недельной на старте, 58%/9% после проверок. Локальный коммит без push; чужие изменения сохранены. + ## Блок 9.34 — свежесть данных Firewall (2026-09-30) - Время успешного получения хранится для каждого включённого устройства × IP-семейства × таблицы/address-list. Успешный пустой срез тоже обновляет время, недоступный сохраняет прежнее либо null. Отключённые устройства исключаются из набора; смена источника очищает времена вместе с данными. diff --git a/docs/ux-ui-stage-9.md b/docs/ux-ui-stage-9.md index 6c564f7b..4a82d042 100644 --- a/docs/ux-ui-stage-9.md +++ b/docs/ux-ui-stage-9.md @@ -177,3 +177,7 @@ Backend сообщает failures по срезу, неполный snapshot о ## Блок 9.34 — свежесть Firewall (2026-09-30) Время получения сохраняется по срезам: успешные получают новое время, недоступные сохраняют прежнее или остаются неизвестными. Экран показывает диапазон, неизвестные срезы и время данных в предупреждении. Это время браузерного получения, не измерения RouterOS. Все 37 E2E и TypeScript прошли, два профильных теста диапазона повторены; новых замечаний lint нет. Далее — операции Filters. Реальные устройства не проверены; frontend build — 9.31, backend — 9.32. + +## Блок 9.35 — сохранение Filters (2026-09-30) + +Создание и редактирование ожидают ok=true, ошибки сохраняют форму и прежние строки. Блокируются повторы/закрытие, есть inline-ошибка и статус ожидания. Повторное открытие начинает новую форму. Пять профильных E2E, TypeScript и lint новых файлов прошли; исходные замечания страницы сохранены. Далее — CopyRulesSheet: убрать преждевременный done, дождаться применения и сохранить выбор при ошибке. Загрузка/схемы/гонки Filters и реальные устройства ещё не проверены; frontend build — 9.31, backend — 9.32. diff --git a/tests/e2e/filters-save.spec.ts b/tests/e2e/filters-save.spec.ts new file mode 100644 index 00000000..4f8d7524 --- /dev/null +++ b/tests/e2e/filters-save.spec.ts @@ -0,0 +1,82 @@ +import { test, expect } from "@playwright/test" +import type { FilterRule } from "../../lib/data" + +for (const editing of [false, true]) { + test(`Filters: ${editing ? "редактирование" : "создание"} ждёт подтверждения и сохраняет ввод`, async ({ page }) => { + let attempts = 0 + let release: (() => void) | undefined + const gate = new Promise(resolve => { release = resolve }) + let rules: FilterRule[] = [{ id: "rule-1", community: "65001:101", gateway: "", gatewayTunnelId: "", action: "blackhole", description: "Исходное правило" }] + 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 === "/api/filters/rules" && route.request().method() === "PUT") { + attempts++ + const body = route.request().postDataJSON() + expect(body.serverId).toBe("1") + expect(body.source).toBe("apply") + expect(body.rules).toHaveLength(editing ? 1 : 2) + expect(body.rules.find((r: FilterRule) => r.description === "Сохранить ввод")).toMatchObject({ community: editing ? "65001:101" : "65001:999", action: "blackhole", gateway: "", gatewayTunnelId: "" }) + 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 } }) + rules = body.rules.map((r: FilterRule) => ({ ...r, description: r.description === "Сохранить ввод" ? "Подтверждено API" : r.description })) + return route.fulfill({ json: { ok: true, rules } }) + } + return route.fulfill({ json: path === "/api/filters/rules" ? { rulesets: [{ serverId: "1", rules }], greTunnels: [], live: true } + : path === "/api/servers" ? [{ id: 1, name: "Тестовый роутер", host: "192.0.2.1", type: "exit-node", site: "TEST", country: "RU", asn: "", enabled: true, status: "online", latency: 1 }] + : path === "/api/auth/config" ? { required: false } + : path === "/api/filters/gre-tunnels" ? { tunnels: [] } + : path === "/api/recursive-routes" ? { routes: [] } : {} }) + }) + await page.goto("/filters") + const rows = page.locator("tr[data-row-id]") + await expect(rows).toHaveCount(1) + const open = async () => { + if (editing) { + await rows.first().hover() + await rows.first().getByRole("button", { name: "Редактировать правило", exact: true }).click() + } else await page.getByRole("button", { name: "Новое правило", exact: true }).click() + } + await open() + const dialog = page.getByRole("dialog") + if (!editing) { + await dialog.getByPlaceholder("65001:100").fill("65001:999") + await dialog.getByRole("button", { name: /⊘ Blackhole/ }).click() + } + const description = dialog.getByRole("textbox", { name: "Описание правила" }) + await description.fill("Сохранить ввод") + const submit = dialog.getByRole("button", { name: editing ? "Сохранить" : "Добавить", exact: true }) + await submit.evaluate(button => { (button as HTMLButtonElement).click(); (button as HTMLButtonElement).click() }) + await expect.poll(() => attempts).toBe(1) + await expect(dialog.getByRole("status")).toContainText("Ожидание подтверждения сервера") + await expect(description).toBeDisabled() + await expect(dialog.getByPlaceholder("65001:100")).toBeDisabled() + await expect(dialog.getByRole("button", { name: /⊘ Blackhole/ })).toBeDisabled() + await expect(dialog.getByRole("button", { name: "Отмена", exact: true })).toBeDisabled() + await expect(dialog.getByRole("button", { name: "Закрыть форму", exact: true })).toBeDisabled() + await page.keyboard.press("Escape") + await expect(dialog).toBeVisible() + await expect(rows).toHaveCount(1) + await expect(rows.first()).toContainText("Исходное правило") + release!() + await expect(dialog.getByRole("alert")).toContainText("Сохранение запрещено тест") + await expect(description).toHaveValue("Сохранить ввод") + for (let i = 2; i <= 3; i++) { + await submit.click() + await expect.poll(() => attempts).toBe(i) + await expect(dialog.getByRole("alert")).toContainText("Сервер не подтвердил применение правил") + await expect(description).toHaveValue("Сохранить ввод") + await expect(rows).toHaveCount(1) + await expect(page.getByText("Правила применены на роутер", { exact: true })).toHaveCount(0) + } + await submit.click() + await expect(dialog).toHaveCount(0) + await expect(rows).toHaveCount(editing ? 1 : 2) + await expect(page.getByText("Подтверждено API", { exact: true })).toBeVisible() + expect(attempts).toBe(4) + await open() + await expect(dialog.getByRole("alert")).toHaveCount(0) + await expect(description).toHaveValue(editing ? "Подтверждено API" : "") + }) +}