fix(ui): подтверждать переключение правил Firewall
This commit is contained in:
Denozordec committed
1 parent
14be83a869
commit
131ecb8668
6 files changed
+89
-11
No files matched your search
@@ -1935,6 +1935,10 @@ function FirewallPageInner() {
|
||||
const [dataLoading, setDataLoading] = useState(false)
|
||||
const [dataError, setDataError] = useState<string | null>(null)
|
||||
const [busy, setBusy] = useState(false)
|
||||
const toggleLock = useRef(false)
|
||||
const [togglePending, setTogglePending] = useState(false)
|
||||
const [toggleStatus, setToggleStatus] = useState<string | null>(null)
|
||||
const [toggleError, setToggleError] = useState<string | null>(null)
|
||||
|
||||
const [selectedServerId, setSelectedServerId] = useState(serverFromQuery ?? ALL_SERVERS_ID)
|
||||
const appliedQueryRef = useRef(false)
|
||||
@@ -2136,18 +2140,27 @@ function FirewallPageInner() {
|
||||
|
||||
async function toggleRule(id: string) {
|
||||
const r = displayRules.find((x) => x.id === id)
|
||||
if (!r) return
|
||||
if (!r || toggleLock.current || busy || historyRestoring) return
|
||||
if (isLive) {
|
||||
const key = ruleKey(r)
|
||||
if (!key) return
|
||||
toggleLock.current = true
|
||||
setTogglePending(true)
|
||||
setToggleError(null)
|
||||
setToggleStatus(`Ожидание изменения правила ${r.comment || r.rosId || r.id}…`)
|
||||
try {
|
||||
await apiFetch("/api/firewall/rules", {
|
||||
const result = await apiFetch<{ ok: boolean }>("/api/firewall/rules", {
|
||||
method: "PATCH",
|
||||
body: JSON.stringify({ ...key, disabled: r.enabled }),
|
||||
})
|
||||
if (result?.ok !== true) throw new Error("Сервер не подтвердил изменение правила")
|
||||
await loadLive()
|
||||
} catch (e) {
|
||||
toast.error(e instanceof Error ? e.message : "Не удалось переключить правило")
|
||||
setToggleError(`${r.comment || r.rosId || r.id}: ${e instanceof Error ? e.message : "Не удалось переключить правило"}`)
|
||||
} finally {
|
||||
toggleLock.current = false
|
||||
setTogglePending(false)
|
||||
setToggleStatus(null)
|
||||
}
|
||||
return
|
||||
}
|
||||
@@ -2468,6 +2481,8 @@ function FirewallPageInner() {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{toggleStatus && <p role="status" className="text-sm text-muted-foreground">{toggleStatus}</p>}
|
||||
{toggleError && <p role="alert" className="text-sm text-destructive">{toggleError}</p>}
|
||||
<KpiStatGrid
|
||||
aria-label="Сводка Firewall"
|
||||
items={[
|
||||
@@ -2570,10 +2585,11 @@ function FirewallPageInner() {
|
||||
|
||||
<FirewallRulesDataGrid
|
||||
rules={filteredRules}
|
||||
mutationsDisabled={togglePending || busy || historyRestoring}
|
||||
onToggle={(id) => { void toggleRule(id) }}
|
||||
onEdit={openEdit}
|
||||
onDelete={(r) => { void deleteRule(r) }}
|
||||
onReorder={canReorder ? (activeId, overId) => { void reorderRules(activeId, overId) } : undefined}
|
||||
onReorder={canReorder && !togglePending ? (activeId, overId) => { void reorderRules(activeId, overId) } : undefined}
|
||||
showServer={showServerCol}
|
||||
/>
|
||||
</DataPageCard>
|
||||
|
||||
@@ -90,6 +90,7 @@ function ChainBadge({ chain }: { chain: string }) {
|
||||
|
||||
interface FirewallRulesDataGridProps {
|
||||
rules: FirewallRule[]
|
||||
mutationsDisabled?: boolean
|
||||
onToggle: (id: string) => void
|
||||
onEdit: (rule: FirewallRule) => void
|
||||
onDelete?: (rule: FirewallRule) => void
|
||||
@@ -99,6 +100,7 @@ interface FirewallRulesDataGridProps {
|
||||
|
||||
function FirewallRulesDataGrid({
|
||||
rules,
|
||||
mutationsDisabled = false,
|
||||
onToggle,
|
||||
onEdit,
|
||||
onDelete,
|
||||
@@ -256,7 +258,7 @@ function FirewallRulesDataGrid({
|
||||
enableSorting: false,
|
||||
cell: ({ row }) => (
|
||||
<div onClick={(e) => e.stopPropagation()}>
|
||||
<FormToggle checked={row.original.enabled} onChange={() => onToggle(row.original.id)} />
|
||||
<FormToggle disabled={mutationsDisabled} checked={row.original.enabled} onChange={() => onToggle(row.original.id)} />
|
||||
</div>
|
||||
),
|
||||
meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
|
||||
@@ -297,7 +299,7 @@ function FirewallRulesDataGrid({
|
||||
Дублировать
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={() => onToggle(r.id)}>
|
||||
<DropdownMenuItem disabled={mutationsDisabled} onClick={() => onToggle(r.id)}>
|
||||
<PowerIcon className="size-4" />
|
||||
{r.enabled ? "Отключить" : "Включить"}
|
||||
</DropdownMenuItem>
|
||||
@@ -315,7 +317,7 @@ function FirewallRulesDataGrid({
|
||||
meta: { headerClassName: DATA_GRID_CELL_PAD_LAST, cellClassName: DATA_GRID_CELL_PAD_LAST },
|
||||
},
|
||||
],
|
||||
[onEdit, onToggle, onDelete, showServer, reorderable, indexPad],
|
||||
[onEdit, onToggle, onDelete, showServer, reorderable, indexPad, mutationsDisabled],
|
||||
)
|
||||
|
||||
const table = useTable({
|
||||
|
||||
+2
-2
@@ -80,7 +80,7 @@ flowchart LR
|
||||
|
||||
## Текущая точка продолжения
|
||||
|
||||
По журналу этапы 0–8 завершены в границах локальной приёмки; внешние ограничения сохраняются. Этап 9 начат (блоки 9.1–9.24 — операции IPsec/GRE и загрузка VXLAN); этапы 10–12 не начаты. Этап 11 разделён: 11А — пользователи, контейнеры, сертификаты, резервирование; 11Б — оповещения, сбор данных, интеграции, релизы, настройки.
|
||||
По журналу этапы 0–8 завершены в границах локальной приёмки; внешние ограничения сохраняются. Этап 9 начат (блоки 9.1–9.25 — 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. Далее — операции 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 и защита повторов. Далее — address-list, сохранение/удаление и перемещение Firewall, затем Filters; ограничения счётчика, свежести и записи VXLAN остаются открытыми; загрузка данных 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.24 — операции IPsec/GRE и загрузка VXLAN |
|
||||
| 9 | VPN, Firewall и Filters | В работе: блоки 9.1–9.25 — IPsec/GRE/VXLAN и переключение Firewall |
|
||||
| 10 | Маршрутизация, диагностика, карта и терминал | Не начат |
|
||||
| 11А | Пользователи, контейнеры, сертификаты и резервные копии | Не начат |
|
||||
| 11Б | Оповещения, сбор данных, интеграции, релизы и настройки | Не начат |
|
||||
| 12 | Итоговая доступность, адаптивность, производительность и регрессия | Не начат |
|
||||
|
||||
## Блок 9.25 — переключение правил Firewall (2026-09-30)
|
||||
|
||||
- PATCH правила требует ok=true. Синхронный замок блокирует повтор до ответа и обновления списка. Переключатели и действие переключения в меню disabled во время запроса; перенос строк отключён. Вызов также блокируется при занятости формы/восстановлении истории.
|
||||
- Ожидание и ошибка отображаются через status/alert с комментарием либо RouterOS ID правила. При 403, пустом ответе и ok=false исходное состояние сохраняется; новый успешный запрос сбрасывает ошибку и обновляет таблицу из API. Mock-операция остаётся локальной.
|
||||
- Все 7 E2E прошли: два новых сценария включения/отключения с задержкой, двойным нажатием, 403, пустым ответом, ok=false и успехом; пять прежних сценариев таблицы/перемещения/черновика. TypeScript прошёл. Grid и тест lint-чистые; исходные 4 ошибки/2 предупреждения страницы не изменились (сравнение с HEAD). Diff-check проверен перед коммитом. Build не повторялся, последний — 9.21.
|
||||
- Далее — переключение address-list, затем сохранение/удаление и подтверждение перемещения Firewall. Защита остальных обработчиков и единая блокировка всех мутаций остаются открытыми; реальные RouterOS/JWT не проверены, этап 9 открыт.
|
||||
- На старте использовано 15% пятичасовой и 2% недельной квоты. Локальный коммит без push; чужие изменения сохранены.
|
||||
|
||||
## Блок 9.24 — схема ответа и гонки VXLAN (2026-09-30)
|
||||
|
||||
- Добавлены схемы туннелей, failures и записей серверов. Проверяются обязательные строки, булевы поля, статус, диапазоны VNI/портов, массив VTEP и уникальность пары serverId/id. Отсутствующий failures совместим со старым API (пустой список). Неверный ответ сохраняет последние данные и отображает ошибку.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Этап 9: VPN и сетевые операции
|
||||
|
||||
Статус: начат 2026-09-28, выполнены блоки 9.1–9.24. Основа — существующие ReUI PRO/base-nova, Frame, ServerTileRail, DataGrid и формы. Правила применения сетевой конфигурации не меняем.
|
||||
Статус: начат 2026-09-28, выполнены блоки 9.1–9.25. Основа — существующие ReUI PRO/base-nova, Frame, ServerTileRail, DataGrid и формы. Правила применения сетевой конфигурации не меняем.
|
||||
|
||||
## Схема и референсы принятого плана
|
||||
|
||||
@@ -137,3 +137,7 @@ API возвращает failures, одиночный endpoint — 502 при с
|
||||
## Блок 9.24 — проверка данных VXLAN (2026-09-30)
|
||||
|
||||
Схемы отклоняют повреждённые записи/серверы/failures и дубли пары serverId/id. Все 16 E2E, lint и TypeScript прошли, включая поздний успех/ошибку при смене устройства. Далее — операции Firewall, затем Filters. Счётчик ошибок, timestamp и запись VXLAN остаются открытыми, последний build — 9.21; реальные устройства не проверены.
|
||||
|
||||
## Блок 9.25 — переключение Firewall (2026-09-30)
|
||||
|
||||
PATCH правила требует ok=true, замок предотвращает повтор до обновления таблицы; статус/ошибка содержат контекст правила. Все 7 E2E и TypeScript прошли. Grid/тест lint-чистые, исходные замечания страницы сохранены. Далее — address-list и остальные мутации Firewall, общий замок ещё не распространён на них. Реальные устройства не проверены; последний build — 9.21.
|
||||
@@ -0,0 +1,48 @@
|
||||
import { test, expect } from "@playwright/test"
|
||||
|
||||
for (const enabled of [true, false]) {
|
||||
test(`Firewall: переключение правила ${enabled} требует подтверждения`, async ({ page }) => {
|
||||
let attempts = 0
|
||||
let release: (() => void) | undefined
|
||||
const gate = new Promise<void>(resolve => { release = resolve })
|
||||
let currentEnabled = enabled
|
||||
const rule = { id: "rule-1", rosId: "*R/1", serverId: "1", serverName: "Роутер", family: "ip", table: "filter", chain: "forward", action: "accept", proto: "tcp", src: "", dst: "", port: "443", iface: "", comment: "Правило тест", enabled, hits: 1 }
|
||||
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() === "PATCH") {
|
||||
attempts++
|
||||
expect(path).toBe("/api/firewall/rules")
|
||||
expect(route.request().postDataJSON()).toMatchObject({ serverId: "1", rosId: "*R/1", family: "ip", table: "filter", disabled: enabled })
|
||||
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 } })
|
||||
currentEnabled = !enabled
|
||||
return route.fulfill({ json: { ok: true } })
|
||||
}
|
||||
return route.fulfill({ json: path === "/api/auth/config" ? { required: false }
|
||||
: path === "/api/firewall/all" ? { rules: [{ ...rule, enabled: currentEnabled }], addressLists: [] }
|
||||
: path === "/api/servers" ? [{ id: 1, name: "Роутер", host: "192.0.2.1", type: "exit-node", enabled: true, country: "RU", status: "online" }] : {} })
|
||||
})
|
||||
await page.goto("/firewall?server=1")
|
||||
const row = page.locator("tr[data-row-id]")
|
||||
await expect(row).toHaveCount(1)
|
||||
const toggle = row.getByRole("switch")
|
||||
await toggle.evaluate(element => { (element as HTMLElement).click(); (element as HTMLElement).click() })
|
||||
await expect.poll(() => attempts).toBe(1)
|
||||
await expect(toggle).toBeDisabled()
|
||||
await expect(page.getByRole("status").filter({ hasText: "Ожидание изменения правила" })).toBeVisible()
|
||||
release!()
|
||||
await expect(page.getByRole("alert").filter({ hasText: "Изменение запрещено тест" })).toBeVisible()
|
||||
for (let i = 2; i <= 3; i++) {
|
||||
await toggle.click()
|
||||
await expect.poll(() => attempts).toBe(i)
|
||||
await expect(page.getByRole("alert").filter({ hasText: "Сервер не подтвердил изменение правила" })).toBeVisible()
|
||||
await expect(toggle).toHaveAttribute("aria-checked", String(enabled))
|
||||
}
|
||||
await toggle.click()
|
||||
await expect(toggle).toHaveAttribute("aria-checked", String(!enabled))
|
||||
expect(attempts).toBe(4)
|
||||
await expect(page.getByRole("alert").filter({ hasText: "Сервер не подтвердил" })).toHaveCount(0)
|
||||
})
|
||||
}
|
||||
Reference in new issue
Block a user