fix(ui): изолировать операции Firewall по источнику

app/(main)/firewall/page.tsx

@@ -1918,6 +1918,11 @@ function payloadToMockRule(
 function FirewallPageInner() {
   const { mode, backendUrl } = useDataSource()
   const isLive = mode === "live"
+  const mounted = useRef(true)
+  useEffect(() => {
+    mounted.current = true
+    return () => { mounted.current = false }
+  }, [])
   const apiFetch = useMemo(() => makeApiFetch(backendUrl), [backendUrl])
   const searchParams = useSearchParams()
   const serverFromQuery = searchParams.get("server")
@@ -1967,7 +1972,7 @@ function FirewallPageInner() {
   const [historyRestoring, setHistoryRestoring] = useState(false)
 
   const loadLive = useCallback(async () => {
-    if (!isLive) return
+    if (!isLive || !mounted.current) return
     const epoch = ++loadEpoch.current
     setDataLoading(true)
     setDataError(null)
@@ -1999,7 +2004,7 @@ function FirewallPageInner() {
   useEffect(() => () => { historyEpoch.current += 1 }, [historyServerId, backendUrl, isLive])
 
   const loadRevisions = useCallback(async () => {
-    if (!isLive || !historyServerId) return
+    if (!isLive || !historyServerId || !mounted.current) return
     const epoch = ++historyEpoch.current
     setHistoryLoading(true)
     setHistoryError(null)
@@ -2030,6 +2035,7 @@ function FirewallPageInner() {
         `/api/firewall/revisions/${encodeURIComponent(id)}/restore`,
         { method: "POST", body: JSON.stringify({ serverId: historyServerId }) },
       )
+      if (!mounted.current) return
       if (res?.ok !== true) throw new Error("Сервер не подтвердил восстановление")
       toast.success("Версия применена на роутер")
       await loadLive()
@@ -2173,6 +2179,7 @@ function FirewallPageInner() {
           method: "PATCH",
           body: JSON.stringify({ ...key, disabled: r.enabled }),
         })
+        if (!mounted.current) return
         if (result?.ok !== true) throw new Error("Сервер не подтвердил изменение правила")
         await loadLive()
       } catch (e) {
@@ -2208,6 +2215,7 @@ function FirewallPageInner() {
         const result = await apiFetch<{ ok: boolean }>(target.kind === "rule" ? "/api/firewall/rules" : "/api/firewall/address-lists", {
           method: "DELETE", body: JSON.stringify(key),
         })
+        if (!mounted.current) return
         if (result?.ok !== true) throw new Error("Сервер не подтвердил удаление")
         await loadLive()
       } else if (target.kind === "rule") {
@@ -2215,6 +2223,7 @@ function FirewallPageInner() {
       } else {
         setMockAddrLists(rows => rows.filter(x => x.id !== target.item.id))
       }
+      if (!mounted.current) return
       setPendingDelete(null)
       toast.success(target.kind === "rule" ? "Правило удалено" : "Запись удалена")
     } catch (e) {
@@ -2267,6 +2276,7 @@ function FirewallPageInner() {
           ...(dest.dest ? { destinationRosId: dest.dest } : {}),
         }),
       })
+      if (!mounted.current) return
       if (result?.ok !== true) throw new Error("Сервер не подтвердил перемещение правила")
       await loadLive()
     } catch (e) {
@@ -2321,6 +2331,7 @@ function FirewallPageInner() {
             method: "PUT",
             body: JSON.stringify({ serverId, family, table, rosId: editingRule.rosId, ...payload }),
           })
+          if (!mounted.current) return
           if (result?.ok !== true) throw new Error("Сервер не подтвердил сохранение")
           toast.success("Правило сохранено")
         } else {
@@ -2328,6 +2339,7 @@ function FirewallPageInner() {
             method: "POST",
             body: JSON.stringify({ serverId, family, table, ...payload }),
           })
+          if (!mounted.current) return
           if (result?.ok !== true) throw new Error("Сервер не подтвердил сохранение")
           toast.success("Правило создано")
         }
@@ -2398,6 +2410,7 @@ function FirewallPageInner() {
           method: "PATCH",
           body: JSON.stringify({ ...key, disabled: !e.disabled }),
         })
+        if (!mounted.current) return
         if (result?.ok !== true) throw new Error("Сервер не подтвердил изменение адреса")
         await loadLive()
       } catch (err) {
@@ -2440,6 +2453,7 @@ function FirewallPageInner() {
             method: "PUT",
             body: JSON.stringify({ serverId, family, rosId: editingAddr.rosId, ...payload }),
           })
+          if (!mounted.current) return
           if (result?.ok !== true) throw new Error("Сервер не подтвердил сохранение")
           toast.success("Запись сохранена")
         } else {
@@ -2447,6 +2461,7 @@ function FirewallPageInner() {
             method: "POST",
             body: JSON.stringify({ serverId, family, ...payload }),
           })
+          if (!mounted.current) return
           if (result?.ok !== true) throw new Error("Сервер не подтвердил сохранение")
           toast.success("Запись создана")
         }
@@ -2791,10 +2806,15 @@ function FirewallPageInner() {
   )
 }
 
+function FirewallSource() {
+  const { mode, backendUrl } = useDataSource()
+  return <FirewallPageInner key={JSON.stringify([mode, backendUrl])} />
+}
+
 export default function FirewallPage() {
   return (
     <Suspense fallback={null}>
-      <FirewallPageInner />
+      <FirewallSource />
     </Suspense>
   )
 }

docs/ux-ui-plan.md

@@ -80,7 +80,7 @@ flowchart LR
 
 ## Текущая точка продолжения
 
-По журналу этапы 0–8 завершены в границах локальной приёмки; внешние ограничения сохраняются. Этап 9 начат (блоки 9.1–9.32 — IPsec/GRE/VXLAN и переключение Firewall); этапы 10–12 не начаты. Этап 11 разделён: 11А — пользователи, контейнеры, сертификаты, резервирование; 11Б — оповещения, сбор данных, интеграции, релизы, настройки.
+По журналу этапы 0–8 завершены в границах локальной приёмки; внешние ограничения сохраняются. Этап 9 начат (блоки 9.1–9.33 — IPsec/GRE/VXLAN и переключение Firewall); этапы 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 и защита повторов. В 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 сохраняет недоступные срезы и блокирует изменения неполного среза. Далее — свежесть и дополнительные проверки контекста 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/режиму; поздние операции старого экрана не запускают чтение и не показывают уведомления в новом контексте. Далее — свежесть данных Firewall, затем Filters; ограничения счётчика, свежести и записи VXLAN остаются открытыми; загрузка данных IPsec и общая приёмка остаются открытыми.
 2. Сохранять контекст устройства, введённые значения при ошибке и подтверждать результат операций по API; локальные моки проверяют клиентские сценарии, реальные сетевые операции требуют тестового окружения.
 3. В этапе 12 выполнить полный аудит доступности (скринридер, контраст), производительности и сквозную регрессию. Ограничения этапа 8 — удалённые серверы месячного каталога, отсутствие экспорта и автоматического переподключения SSE — остаются явно зафиксированными, без заявления о реализации.
 

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.32 — IPsec/GRE/VXLAN и переключение Firewall |
+| 9 | VPN, Firewall и Filters | В работе: блоки 9.1–9.33 — IPsec/GRE/VXLAN и переключение Firewall |
 | 10 | Маршрутизация, диагностика, карта и терминал | Не начат |
 | 11А | Пользователи, контейнеры, сертификаты и резервные копии | Не начат |
 | 11Б | Оповещения, сбор данных, интеграции, релизы и настройки | Не начат |
 | 12 | Итоговая доступность, адаптивность, производительность и регрессия | Не начат |
 
+## Блок 9.33 — смена источника Firewall (2026-09-30)
+
+- FirewallSource создаёт отдельное состояние по паре mode/backendUrl. Формы, ошибки и замки старого источника не переносятся в новый. Проверка mounted после ответа записи исключает поздние уведомления и повторное чтение старого API; чтение правил/истории также не запускается после unmount. Удаление проверяет mounted дополнительно после обновления списка.
+- Четыре профильных E2E прошли: старое чтение с пустым успехом/ошибкой при смене backend; отложенное удаление после смены backend и Live → mock. Проверены данные нового API, отсутствие старого уведомления/диалога, отсутствие повторного чтения старого API и доступность нового действия. Использованы настройки и клиентская навигация с возвратом; реальные RouterOS/JWT не проверены.
+- Профиль запускается отдельно: npx playwright test --config playwright.firewall-context.config.ts. Он использует local backend URL и порт 3101, обычный конфиг same-origin на 3100 исключает этот файл. Первые запуски профиля конфликтовали из-за слияния webServer при defineConfig(base, overrides); исправлено единственным объектом конфигурации, процесс пользователя не остановлен. Обнаружение четырёх тестов проверено после окончательной правки профиля.
+- Все 39 E2E прошли в двух успешных прогонах: четыре профильных и 35 обычных Firewall. TypeScript прошёл. Новые тест/конфиги lint-чистые; исходные 4 ошибки/2 предупреждения страницы не изменились относительно HEAD. Diff-check проверен перед коммитом. Build не повторялся: последний frontend — 9.31, backend — 9.32.
+- Далее — свежесть данных Firewall: timestamp полного/частичного чтения, сохранение времени недоступного среза и понятная подпись последних данных. Затем Filters. Позднее завершение остальных типов мутаций покрыто общей проверкой mounted, но отдельные сценарии для каждого типа не запускались. Ограничения реальной БД/RouterOS и подтверждения после ошибки снимка из 9.32 сохраняются; этап 9 открыт.
+- Квота: 43% пятичасовой/7% недельной на старте, 49%/8% после проверок. Локальный коммит без push; чужие изменения сохранены.
+
 ## Блок 9.32 — частичные сбои Firewall (2026-09-30)
 
 - pollFirewallChunks опрашивает восемь таблиц правил и два address-list, сохраняет успешные срезы и возвращает failures с family/table/error. Повреждённый контейнер также считается сбоем. listFirewallAll добавляет устройство и сообщает общий сбой вместо маскировки успешным пустым списком.

docs/ux-ui-stage-9.md

@@ -169,3 +169,7 @@ POST требует ok=true, ошибка возвращает исходный
 ## Блок 9.32 — частичные сбои Firewall (2026-09-30)
 
 Backend сообщает failures по срезу, неполный snapshot отклоняется и не записывается как observed. UI сохраняет недоступные срезы, показывает неизвестную сводку и блокирует изменения до повторного успеха. Серверный тест, 35 разных E2E в двух прогонах, TypeScript frontend/backend и backend build прошли; новых frontend lint замечаний нет. Далее — свежесть/гонки контекста Firewall, затем Filters. Реальные RouterOS/БД и последствия ошибки снимка после записи ещё требуют приёмки; последний frontend build — 9.31.
+
+## Блок 9.33 — смена источника Firewall (2026-09-30)
+
+Состояние пересоздаётся по backend/режиму, старое завершение записи не уведомляет новый экран и не запускает чтение. Прошли 39 E2E в двух прогонах, TypeScript и lint новых файлов; исходные замечания страницы сохранены. Контекстные тесты запускаются отдельно через playwright.firewall-context.config.ts. Далее — свежесть данных Firewall, затем Filters. Реальные устройства не проверены; frontend build — 9.31, backend — 9.32.

playwright.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "@playwright/test"
 
 export default defineConfig({
   testDir: "./tests/e2e",
+  testIgnore: "**/firewall-context.spec.ts",
   fullyParallel: false,
   workers: 1,
   retries: 0,

playwright.firewall-context.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "@playwright/test"
+import base from "./playwright.config"
+
+const server = base.webServer
+if (!server || Array.isArray(server)) throw new Error("Ожидается один локальный сервер")
+export default defineConfig({
+  ...base,
+  use: { ...base.use, baseURL: "http://127.0.0.1:3101" },
+  testIgnore: [],
+  testMatch: "firewall-context.spec.ts",
+  webServer: { ...server, command: "node node_modules/next/dist/bin/next dev --hostname 127.0.0.1 --port 3101", url: "http://127.0.0.1:3101", env: { ...server.env, NEXT_PUBLIC_BACKEND_URL: "local" } },
+})

tests/e2e/firewall-context.spec.ts

@@ -0,0 +1,91 @@
+import { test, expect, type Page } from "@playwright/test"
+
+const rule = { id: "rule-1", rosId: "*1", serverId: "1", serverName: "Роутер", family: "ip", table: "filter", chain: "forward", action: "accept", proto: "tcp", src: "", dst: "", port: "443", iface: "", comment: "Контекст правило", enabled: true, hits: 1 }
+const headers = { "access-control-allow-origin": "*", "access-control-allow-methods": "GET,POST,PUT,PATCH,DELETE,OPTIONS", "access-control-allow-headers": "Content-Type,Authorization" }
+async function setup(page: Page) {
+  let oldReads = 0
+  await page.route("**/health", route => route.fulfill({ headers, json: { ok: true } }))
+  await page.route("**/api/**", route => {
+    const url = new URL(route.request().url())
+    if (url.pathname === "/api/firewall/all" && url.port === "8000") oldReads++
+    return route.fulfill({ headers, json: url.pathname === "/api/auth/config" ? { required: false }
+      : url.pathname === "/api/firewall/all" ? { rules: [{ ...rule, port: url.port === "8101" ? "8443" : "443" }], addressLists: [] }
+      : url.pathname === "/api/servers" ? [{ id: 1, name: "Роутер", host: "192.0.2.1", type: "exit-node", enabled: true, country: "RU", status: "online" }] : {} })
+  })
+  await page.goto("/settings")
+  await page.getByRole("link", { name: "Firewall", exact: true }).click()
+  await expect(page.locator("tr[data-row-id]")).toHaveCount(1)
+  return () => oldReads
+}
+async function changeBackend(page: Page) {
+  const field = page.getByPlaceholder("http://localhost:8000")
+  await field.fill("http://localhost:8101")
+  await field.press("Enter")
+}
+async function flush(page: Page) {
+  await page.evaluate(() => new Promise<void>(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))))
+}
+
+for (const fails of [false, true]) {
+  test(`Firewall: смена backend игнорирует старое чтение ${fails}`, async ({ page }) => {
+    await setup(page)
+    let release: (() => void) | undefined
+    const gate = new Promise<void>(resolve => { release = resolve })
+    let started = false
+    await page.route("**/api/firewall/all", async route => {
+      if (new URL(route.request().url()).port !== "8000") return route.fallback()
+      started = true
+      await gate
+      return route.fulfill(fails ? { headers, status: 500, json: { error: "Ошибка старого источника тест" } } : { headers, json: { rules: [], addressLists: [] } })
+    })
+    await page.getByRole("button", { name: "Обновить", exact: true }).click()
+    await expect.poll(() => started).toBe(true)
+    await page.goBack()
+    await expect(page).toHaveURL(/settings/)
+    await changeBackend(page)
+    await page.getByRole("link", { name: "Firewall", exact: true }).click()
+    await expect(page.locator("tr[data-row-id]")).toContainText("8443")
+    const response = page.waitForResponse(r => r.url().includes(":8000/api/firewall/all"))
+    release!()
+    await (await response).finished()
+    await flush(page)
+    await expect(page.locator("tr[data-row-id]")).toHaveCount(1)
+    await expect(page.locator("tr[data-row-id]")).toContainText("8443")
+    await expect(page.getByRole("alert").filter({ hasText: "Ошибка старого источника" })).toHaveCount(0)
+  })
+}
+
+for (const change of ["backend", "mode"]) {
+  test(`Firewall: позднее удаление не меняет новый контекст ${change}`, async ({ page }) => {
+    const oldReads = await setup(page)
+    let release: (() => void) | undefined
+    const gate = new Promise<void>(resolve => { release = resolve })
+    let attempts = 0
+    await page.route("**/api/firewall/rules", async route => {
+      if (route.request().method() === "OPTIONS") return route.fulfill({ headers, json: {} })
+      attempts++
+      await gate
+      return route.fulfill({ headers, json: { ok: true } })
+    })
+    await page.getByRole("button", { name: "Действия: forward accept", exact: true }).click()
+    await page.getByRole("menuitem", { name: "Удалить правило", exact: true }).click()
+    await page.getByRole("alertdialog").getByRole("button", { name: "Удалить", exact: true }).click()
+    await expect.poll(() => attempts).toBe(1)
+    const readsBefore = oldReads()
+    await page.goBack()
+    await expect(page).toHaveURL(/settings/)
+    if (change === "backend") await changeBackend(page)
+    else await page.getByRole("button", { name: "Моковые", exact: true }).click()
+    await page.getByRole("link", { name: "Firewall", exact: true }).click()
+    if (change === "backend") await expect(page.locator("tr[data-row-id]")).toContainText("8443")
+    else await expect(page.locator('tr[data-row-id="rule-1"]')).toHaveCount(0)
+    const response = page.waitForResponse(r => r.url().includes(":8000/api/firewall/rules") && r.request().method() === "DELETE")
+    release!()
+    await (await response).finished()
+    await flush(page)
+    expect(oldReads()).toBe(readsBefore)
+    await expect(page.getByText("Правило удалено", { exact: true })).toHaveCount(0)
+    await expect(page.getByRole("alertdialog")).toHaveCount(0)
+    await expect(page.getByRole("button", { name: "Новое правило", exact: true })).toBeEnabled()
+  })
+}