fix(ui): подтверждать сохранение форм Firewall
This commit is contained in:
1 parent
14a9e6d26c
commit
b47c5645d5
5 files changed
+160
-38
No files matched your search
@@ -486,7 +486,7 @@ function generateRsc(rules: FirewallRule[], timestamp?: string): string {
|
|||||||
|
|
||||||
// ─── Rule Sheet ───────────────────────────────────────────────────────────────
|
// ─── Rule Sheet ───────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
function RuleSheet({ open, onClose, initialRule, chainGroup, family, onSave, saving = false }: {
|
function RuleSheet({ open, onClose, initialRule, chainGroup, family, onSave, saving = false, error }: {
|
||||||
open: boolean
|
open: boolean
|
||||||
onClose: () => void
|
onClose: () => void
|
||||||
initialRule: Partial<FirewallRule> | null
|
initialRule: Partial<FirewallRule> | null
|
||||||
@@ -494,6 +494,7 @@ function RuleSheet({ open, onClose, initialRule, chainGroup, family, onSave, sav
|
|||||||
family: IpFamily
|
family: IpFamily
|
||||||
onSave: (payload: RuleWritePayload) => void
|
onSave: (payload: RuleWritePayload) => void
|
||||||
saving?: boolean
|
saving?: boolean
|
||||||
|
error?: string | null
|
||||||
}) {
|
}) {
|
||||||
const isNew = !initialRule?.id
|
const isNew = !initialRule?.id
|
||||||
const [form, setForm] = useState<RuleForm>(defaultForm)
|
const [form, setForm] = useState<RuleForm>(defaultForm)
|
||||||
@@ -530,8 +531,8 @@ function RuleSheet({ open, onClose, initialRule, chainGroup, family, onSave, sav
|
|||||||
: ["accept", "drop", "reject", "fasttrack-connection", "add-src-to-address-list", "add-dst-to-address-list", "passthrough"]
|
: ["accept", "drop", "reject", "fasttrack-connection", "add-src-to-address-list", "add-dst-to-address-list", "passthrough"]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Sheet open={open} onOpenChange={(v) => { if (!v) onClose() }}>
|
<Sheet open={open} onOpenChange={(v) => { if (!v && !saving) onClose() }}>
|
||||||
<SheetContent className="flex flex-col overflow-hidden p-0 gap-0 sm:max-w-lg">
|
<SheetContent showCloseButton={!saving} className="flex flex-col overflow-hidden p-0 gap-0 sm:max-w-lg">
|
||||||
<SheetHeader className="shrink-0 px-6 pt-5 pb-4 border-b">
|
<SheetHeader className="shrink-0 px-6 pt-5 pb-4 border-b">
|
||||||
<SheetTitle>{isNew ? "Новое правило" : "Редактировать правило"}</SheetTitle>
|
<SheetTitle>{isNew ? "Новое правило" : "Редактировать правило"}</SheetTitle>
|
||||||
<SheetDescription>
|
<SheetDescription>
|
||||||
@@ -539,7 +540,7 @@ function RuleSheet({ open, onClose, initialRule, chainGroup, family, onSave, sav
|
|||||||
</SheetDescription>
|
</SheetDescription>
|
||||||
</SheetHeader>
|
</SheetHeader>
|
||||||
|
|
||||||
<div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">
|
<fieldset disabled={saving} className="flex-1 min-h-0 overflow-y-auto px-6 py-5 flex flex-col gap-5">
|
||||||
|
|
||||||
{/* Chain + Action */}
|
{/* Chain + Action */}
|
||||||
<div className="flex flex-col gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
@@ -616,7 +617,7 @@ function RuleSheet({ open, onClose, initialRule, chainGroup, family, onSave, sav
|
|||||||
<p className="text-sm font-medium">Log</p>
|
<p className="text-sm font-medium">Log</p>
|
||||||
<p className="text-xs text-muted-foreground">Записывать совпадения в системный лог</p>
|
<p className="text-xs text-muted-foreground">Записывать совпадения в системный лог</p>
|
||||||
</div>
|
</div>
|
||||||
<FormToggle checked={form.log} onChange={(v) => set("log", v)} />
|
<FormToggle disabled={saving} checked={form.log} onChange={(v) => set("log", v)} />
|
||||||
</div>
|
</div>
|
||||||
{form.log && (
|
{form.log && (
|
||||||
<FormField label="Log-prefix" hint="Метка в логе, например FW-DROP">
|
<FormField label="Log-prefix" hint="Метка в логе, например FW-DROP">
|
||||||
@@ -636,7 +637,7 @@ function RuleSheet({ open, onClose, initialRule, chainGroup, family, onSave, sav
|
|||||||
<p className="text-sm font-medium">Правило включено</p>
|
<p className="text-sm font-medium">Правило включено</p>
|
||||||
<p className="text-xs text-muted-foreground">Отключённые правила сохраняются, но не применяются</p>
|
<p className="text-xs text-muted-foreground">Отключённые правила сохраняются, но не применяются</p>
|
||||||
</div>
|
</div>
|
||||||
<FormToggle checked={form.enabled} onChange={(v) => set("enabled", v)} />
|
<FormToggle disabled={saving} checked={form.enabled} onChange={(v) => set("enabled", v)} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* CLI preview */}
|
{/* CLI preview */}
|
||||||
@@ -669,10 +670,12 @@ function RuleSheet({ open, onClose, initialRule, chainGroup, family, onSave, sav
|
|||||||
].filter(Boolean).join("\n")}
|
].filter(Boolean).join("\n")}
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</fieldset>
|
||||||
|
{saving && <p role="status" className="px-6 text-sm text-muted-foreground">Ожидание результата сохранения…</p>}
|
||||||
|
{error && <p role="alert" className="px-6 text-sm text-destructive">{error}</p>}
|
||||||
|
|
||||||
<SheetFooter className="shrink-0 px-6 py-4 border-t flex-row gap-2">
|
<SheetFooter className="shrink-0 px-6 py-4 border-t flex-row gap-2">
|
||||||
<SheetClose render={<Button variant="outline" className="flex-1" />}>Отмена</SheetClose>
|
<SheetClose render={<Button variant="outline" className="flex-1" disabled={saving} />}>Отмена</SheetClose>
|
||||||
<Button
|
<Button
|
||||||
className="flex-1"
|
className="flex-1"
|
||||||
disabled={saving}
|
disabled={saving}
|
||||||
@@ -860,7 +863,7 @@ const defaultAddrForm = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function AddressListSheet({
|
function AddressListSheet({
|
||||||
open, onClose, initial, family, onSave, saving = false,
|
open, onClose, initial, family, onSave, saving = false, error,
|
||||||
}: {
|
}: {
|
||||||
open: boolean
|
open: boolean
|
||||||
onClose: () => void
|
onClose: () => void
|
||||||
@@ -868,6 +871,7 @@ function AddressListSheet({
|
|||||||
family: IpFamily
|
family: IpFamily
|
||||||
onSave: (payload: { list: string; address: string; comment?: string; timeout?: string; disabled?: boolean }) => void
|
onSave: (payload: { list: string; address: string; comment?: string; timeout?: string; disabled?: boolean }) => void
|
||||||
saving?: boolean
|
saving?: boolean
|
||||||
|
error?: string | null
|
||||||
}) {
|
}) {
|
||||||
const isNew = !initial?.id
|
const isNew = !initial?.id
|
||||||
const [form, setForm] = useState(defaultAddrForm)
|
const [form, setForm] = useState(defaultAddrForm)
|
||||||
@@ -884,15 +888,15 @@ function AddressListSheet({
|
|||||||
}, [open, initial])
|
}, [open, initial])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Sheet open={open} onOpenChange={(v) => { if (!v) onClose() }}>
|
<Sheet open={open} onOpenChange={(v) => { if (!v && !saving) onClose() }}>
|
||||||
<SheetContent className="flex flex-col overflow-hidden p-0 gap-0 sm:max-w-md">
|
<SheetContent showCloseButton={!saving} className="flex flex-col overflow-hidden p-0 gap-0 sm:max-w-md">
|
||||||
<SheetHeader className="shrink-0 px-6 pt-5 pb-4 border-b">
|
<SheetHeader className="shrink-0 px-6 pt-5 pb-4 border-b">
|
||||||
<SheetTitle>{isNew ? "Запись address-list" : "Редактировать запись"}</SheetTitle>
|
<SheetTitle>{isNew ? "Запись address-list" : "Редактировать запись"}</SheetTitle>
|
||||||
<SheetDescription>
|
<SheetDescription>
|
||||||
{family === "ip6" ? "/ipv6 firewall address-list" : "/ip firewall address-list"} · {IP_FAMILY_LABELS[family]}
|
{family === "ip6" ? "/ipv6 firewall address-list" : "/ip firewall address-list"} · {IP_FAMILY_LABELS[family]}
|
||||||
</SheetDescription>
|
</SheetDescription>
|
||||||
</SheetHeader>
|
</SheetHeader>
|
||||||
<div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-4">
|
<fieldset disabled={saving} className="flex-1 min-h-0 overflow-y-auto px-6 py-5 flex flex-col gap-4">
|
||||||
<FormField label="Лист" required>
|
<FormField label="Лист" required>
|
||||||
<Input className="font-mono h-8" placeholder="cdn-bypass"
|
<Input className="font-mono h-8" placeholder="cdn-bypass"
|
||||||
value={form.list} onChange={(e) => setForm((f) => ({ ...f, list: e.target.value }))} />
|
value={form.list} onChange={(e) => setForm((f) => ({ ...f, list: e.target.value }))} />
|
||||||
@@ -914,11 +918,13 @@ function AddressListSheet({
|
|||||||
<p className="text-sm font-medium">Запись включена</p>
|
<p className="text-sm font-medium">Запись включена</p>
|
||||||
<p className="text-xs text-muted-foreground">Отключённые адреса не матчятся</p>
|
<p className="text-xs text-muted-foreground">Отключённые адреса не матчятся</p>
|
||||||
</div>
|
</div>
|
||||||
<FormToggle checked={form.enabled} onChange={(v) => setForm((f) => ({ ...f, enabled: v }))} />
|
<FormToggle disabled={saving} checked={form.enabled} onChange={(v) => setForm((f) => ({ ...f, enabled: v }))} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</fieldset>
|
||||||
|
{saving && <p role="status" className="px-6 text-sm text-muted-foreground">Ожидание результата сохранения…</p>}
|
||||||
|
{error && <p role="alert" className="px-6 text-sm text-destructive">{error}</p>}
|
||||||
<SheetFooter className="shrink-0 px-6 py-4 border-t flex-row gap-2">
|
<SheetFooter className="shrink-0 px-6 py-4 border-t flex-row gap-2">
|
||||||
<SheetClose render={<Button variant="outline" className="flex-1" />}>Отмена</SheetClose>
|
<SheetClose render={<Button variant="outline" className="flex-1" disabled={saving} />}>Отмена</SheetClose>
|
||||||
<Button
|
<Button
|
||||||
className="flex-1"
|
className="flex-1"
|
||||||
disabled={saving || !form.list.trim() || !form.address.trim()}
|
disabled={saving || !form.list.trim() || !form.address.trim()}
|
||||||
@@ -1941,7 +1947,8 @@ function FirewallPageInner() {
|
|||||||
const [dataLoading, setDataLoading] = useState(false)
|
const [dataLoading, setDataLoading] = useState(false)
|
||||||
const [dataError, setDataError] = useState<string | null>(null)
|
const [dataError, setDataError] = useState<string | null>(null)
|
||||||
const [busy, setBusy] = useState(false)
|
const [busy, setBusy] = useState(false)
|
||||||
const toggleLock = useRef(false)
|
const [formError, setFormError] = useState<string | null>(null)
|
||||||
|
const mutationLock = useRef(false)
|
||||||
const [togglePending, setTogglePending] = useState(false)
|
const [togglePending, setTogglePending] = useState(false)
|
||||||
const [toggleStatus, setToggleStatus] = useState<string | null>(null)
|
const [toggleStatus, setToggleStatus] = useState<string | null>(null)
|
||||||
const [toggleError, setToggleError] = useState<string | null>(null)
|
const [toggleError, setToggleError] = useState<string | null>(null)
|
||||||
@@ -2149,11 +2156,11 @@ function FirewallPageInner() {
|
|||||||
|
|
||||||
async function toggleRule(id: string) {
|
async function toggleRule(id: string) {
|
||||||
const r = displayRules.find((x) => x.id === id)
|
const r = displayRules.find((x) => x.id === id)
|
||||||
if (!r || toggleLock.current || busy || historyRestoring) return
|
if (!r || mutationLock.current || busy || historyRestoring) return
|
||||||
if (isLive) {
|
if (isLive) {
|
||||||
const key = ruleKey(r)
|
const key = ruleKey(r)
|
||||||
if (!key) return
|
if (!key) return
|
||||||
toggleLock.current = true
|
mutationLock.current = true
|
||||||
setTogglePending(true)
|
setTogglePending(true)
|
||||||
setToggleError(null)
|
setToggleError(null)
|
||||||
setToggleStatus(`Ожидание изменения правила ${r.comment || r.rosId || r.id}…`)
|
setToggleStatus(`Ожидание изменения правила ${r.comment || r.rosId || r.id}…`)
|
||||||
@@ -2167,7 +2174,7 @@ function FirewallPageInner() {
|
|||||||
} catch (e) {
|
} catch (e) {
|
||||||
setToggleError(`${r.comment || r.rosId || r.id}: ${e instanceof Error ? e.message : "Не удалось переключить правило"}`)
|
setToggleError(`${r.comment || r.rosId || r.id}: ${e instanceof Error ? e.message : "Не удалось переключить правило"}`)
|
||||||
} finally {
|
} finally {
|
||||||
toggleLock.current = false
|
mutationLock.current = false
|
||||||
setTogglePending(false)
|
setTogglePending(false)
|
||||||
setToggleStatus(null)
|
setToggleStatus(null)
|
||||||
}
|
}
|
||||||
@@ -2177,15 +2184,15 @@ function FirewallPageInner() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function requestDelete(target: NonNullable<typeof pendingDelete>) {
|
function requestDelete(target: NonNullable<typeof pendingDelete>) {
|
||||||
if (toggleLock.current || busy || historyRestoring) return
|
if (mutationLock.current || busy || historyRestoring) return
|
||||||
setDeleteError(null)
|
setDeleteError(null)
|
||||||
setPendingDelete(target)
|
setPendingDelete(target)
|
||||||
}
|
}
|
||||||
|
|
||||||
async function confirmDelete() {
|
async function confirmDelete() {
|
||||||
if (!pendingDelete || toggleLock.current || busy || historyRestoring) return
|
if (!pendingDelete || mutationLock.current || busy || historyRestoring) return
|
||||||
const target = pendingDelete
|
const target = pendingDelete
|
||||||
toggleLock.current = true
|
mutationLock.current = true
|
||||||
setDeletePending(true)
|
setDeletePending(true)
|
||||||
setDeleteError(null)
|
setDeleteError(null)
|
||||||
try {
|
try {
|
||||||
@@ -2207,7 +2214,7 @@ function FirewallPageInner() {
|
|||||||
} catch (e) {
|
} catch (e) {
|
||||||
setDeleteError(e instanceof Error ? e.message : "Не удалось удалить объект")
|
setDeleteError(e instanceof Error ? e.message : "Не удалось удалить объект")
|
||||||
} finally {
|
} finally {
|
||||||
toggleLock.current = false
|
mutationLock.current = false
|
||||||
setDeletePending(false)
|
setDeletePending(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -2255,6 +2262,8 @@ function FirewallPageInner() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function openAdd() {
|
function openAdd() {
|
||||||
|
if (mutationLock.current || busy || historyRestoring) return
|
||||||
|
setFormError(null)
|
||||||
if (!requireWriteServer()) return
|
if (!requireWriteServer()) return
|
||||||
const table = tableOfGroup(chainGroup)
|
const table = tableOfGroup(chainGroup)
|
||||||
if (!table) {
|
if (!table) {
|
||||||
@@ -2265,11 +2274,14 @@ function FirewallPageInner() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function openEdit(r: FirewallRule) {
|
function openEdit(r: FirewallRule) {
|
||||||
|
if (mutationLock.current || busy || historyRestoring) return
|
||||||
|
setFormError(null)
|
||||||
setEditingRule(r)
|
setEditingRule(r)
|
||||||
setRuleSheetOpen(true)
|
setRuleSheetOpen(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
async function saveRule(payload: RuleWritePayload) {
|
async function saveRule(payload: RuleWritePayload) {
|
||||||
|
if (mutationLock.current || busy || historyRestoring) return
|
||||||
const table = (editingRule?.table ?? tableOfGroup(chainGroup) ?? "filter") as FirewallTable
|
const table = (editingRule?.table ?? tableOfGroup(chainGroup) ?? "filter") as FirewallTable
|
||||||
const family = editingRule?.id ? ruleFamily(editingRule as FirewallRule) : ipFamily
|
const family = editingRule?.id ? ruleFamily(editingRule as FirewallRule) : ipFamily
|
||||||
const serverId = editingRule?.serverId ?? requireWriteServer()
|
const serverId = editingRule?.serverId ?? requireWriteServer()
|
||||||
@@ -2280,26 +2292,31 @@ function FirewallPageInner() {
|
|||||||
?? serverId
|
?? serverId
|
||||||
|
|
||||||
if (isLive) {
|
if (isLive) {
|
||||||
|
mutationLock.current = true
|
||||||
setBusy(true)
|
setBusy(true)
|
||||||
|
setFormError(null)
|
||||||
try {
|
try {
|
||||||
if (editingRule?.rosId) {
|
if (editingRule?.rosId) {
|
||||||
await apiFetch("/api/firewall/rules", {
|
const result = await apiFetch<{ ok: boolean }>("/api/firewall/rules", {
|
||||||
method: "PUT",
|
method: "PUT",
|
||||||
body: JSON.stringify({ serverId, family, table, rosId: editingRule.rosId, ...payload }),
|
body: JSON.stringify({ serverId, family, table, rosId: editingRule.rosId, ...payload }),
|
||||||
})
|
})
|
||||||
|
if (result?.ok !== true) throw new Error("Сервер не подтвердил сохранение")
|
||||||
toast.success("Правило сохранено")
|
toast.success("Правило сохранено")
|
||||||
} else {
|
} else {
|
||||||
await apiFetch("/api/firewall/rules", {
|
const result = await apiFetch<{ ok: boolean }>("/api/firewall/rules", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: JSON.stringify({ serverId, family, table, ...payload }),
|
body: JSON.stringify({ serverId, family, table, ...payload }),
|
||||||
})
|
})
|
||||||
|
if (result?.ok !== true) throw new Error("Сервер не подтвердил сохранение")
|
||||||
toast.success("Правило создано")
|
toast.success("Правило создано")
|
||||||
}
|
}
|
||||||
setRuleSheetOpen(false)
|
setRuleSheetOpen(false)
|
||||||
await loadLive()
|
await loadLive()
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast.error(e instanceof Error ? e.message : "Не удалось сохранить правило")
|
setFormError(e instanceof Error ? e.message : "Не удалось сохранить правило")
|
||||||
} finally {
|
} finally {
|
||||||
|
mutationLock.current = false
|
||||||
setBusy(false)
|
setBusy(false)
|
||||||
}
|
}
|
||||||
return
|
return
|
||||||
@@ -2331,22 +2348,26 @@ function FirewallPageInner() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function openAddAddr(list?: string) {
|
function openAddAddr(list?: string) {
|
||||||
|
if (mutationLock.current || busy || historyRestoring) return
|
||||||
|
setFormError(null)
|
||||||
if (!requireWriteServer()) return
|
if (!requireWriteServer()) return
|
||||||
setEditingAddr(list ? { list } : null)
|
setEditingAddr(list ? { list } : null)
|
||||||
setAddrSheetOpen(true)
|
setAddrSheetOpen(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
function openEditAddr(e: AddressListEntry) {
|
function openEditAddr(e: AddressListEntry) {
|
||||||
|
if (mutationLock.current || busy || historyRestoring) return
|
||||||
|
setFormError(null)
|
||||||
setEditingAddr(e)
|
setEditingAddr(e)
|
||||||
setAddrSheetOpen(true)
|
setAddrSheetOpen(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
async function toggleAddr(e: AddressListEntry) {
|
async function toggleAddr(e: AddressListEntry) {
|
||||||
if (toggleLock.current || busy || historyRestoring) return
|
if (mutationLock.current || busy || historyRestoring) return
|
||||||
if (isLive) {
|
if (isLive) {
|
||||||
const key = addressKey(e)
|
const key = addressKey(e)
|
||||||
if (!key) return
|
if (!key) return
|
||||||
toggleLock.current = true
|
mutationLock.current = true
|
||||||
setTogglePending(true)
|
setTogglePending(true)
|
||||||
setToggleError(null)
|
setToggleError(null)
|
||||||
setToggleStatus(`Ожидание изменения адреса ${e.address} (${e.list})…`)
|
setToggleStatus(`Ожидание изменения адреса ${e.address} (${e.list})…`)
|
||||||
@@ -2360,7 +2381,7 @@ function FirewallPageInner() {
|
|||||||
} catch (err) {
|
} catch (err) {
|
||||||
setToggleError(`${e.address} (${e.list}): ${err instanceof Error ? err.message : "Не удалось переключить запись"}`)
|
setToggleError(`${e.address} (${e.list}): ${err instanceof Error ? err.message : "Не удалось переключить запись"}`)
|
||||||
} finally {
|
} finally {
|
||||||
toggleLock.current = false
|
mutationLock.current = false
|
||||||
setTogglePending(false)
|
setTogglePending(false)
|
||||||
setToggleStatus(null)
|
setToggleStatus(null)
|
||||||
}
|
}
|
||||||
@@ -2376,6 +2397,7 @@ function FirewallPageInner() {
|
|||||||
timeout?: string
|
timeout?: string
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
}) {
|
}) {
|
||||||
|
if (mutationLock.current || busy || historyRestoring) return
|
||||||
const family = editingAddr?.id ? addressFamily(editingAddr as AddressListEntry) : ipFamily
|
const family = editingAddr?.id ? addressFamily(editingAddr as AddressListEntry) : ipFamily
|
||||||
const serverId = editingAddr?.serverId ?? requireWriteServer()
|
const serverId = editingAddr?.serverId ?? requireWriteServer()
|
||||||
if (!serverId) return
|
if (!serverId) return
|
||||||
@@ -2385,26 +2407,31 @@ function FirewallPageInner() {
|
|||||||
?? serverId
|
?? serverId
|
||||||
|
|
||||||
if (isLive) {
|
if (isLive) {
|
||||||
|
mutationLock.current = true
|
||||||
setBusy(true)
|
setBusy(true)
|
||||||
|
setFormError(null)
|
||||||
try {
|
try {
|
||||||
if (editingAddr?.rosId) {
|
if (editingAddr?.rosId) {
|
||||||
await apiFetch("/api/firewall/address-lists", {
|
const result = await apiFetch<{ ok: boolean }>("/api/firewall/address-lists", {
|
||||||
method: "PUT",
|
method: "PUT",
|
||||||
body: JSON.stringify({ serverId, family, rosId: editingAddr.rosId, ...payload }),
|
body: JSON.stringify({ serverId, family, rosId: editingAddr.rosId, ...payload }),
|
||||||
})
|
})
|
||||||
|
if (result?.ok !== true) throw new Error("Сервер не подтвердил сохранение")
|
||||||
toast.success("Запись сохранена")
|
toast.success("Запись сохранена")
|
||||||
} else {
|
} else {
|
||||||
await apiFetch("/api/firewall/address-lists", {
|
const result = await apiFetch<{ ok: boolean }>("/api/firewall/address-lists", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: JSON.stringify({ serverId, family, ...payload }),
|
body: JSON.stringify({ serverId, family, ...payload }),
|
||||||
})
|
})
|
||||||
|
if (result?.ok !== true) throw new Error("Сервер не подтвердил сохранение")
|
||||||
toast.success("Запись создана")
|
toast.success("Запись создана")
|
||||||
}
|
}
|
||||||
setAddrSheetOpen(false)
|
setAddrSheetOpen(false)
|
||||||
await loadLive()
|
await loadLive()
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(err instanceof Error ? err.message : "Не удалось сохранить запись")
|
setFormError(err instanceof Error ? err.message : "Не удалось сохранить запись")
|
||||||
} finally {
|
} finally {
|
||||||
|
mutationLock.current = false
|
||||||
setBusy(false)
|
setBusy(false)
|
||||||
}
|
}
|
||||||
return
|
return
|
||||||
@@ -2667,21 +2694,23 @@ function FirewallPageInner() {
|
|||||||
|
|
||||||
<RuleSheet
|
<RuleSheet
|
||||||
open={ruleSheetOpen}
|
open={ruleSheetOpen}
|
||||||
onClose={() => setRuleSheetOpen(false)}
|
onClose={() => { if (!mutationLock.current) setRuleSheetOpen(false) }}
|
||||||
initialRule={editingRule}
|
initialRule={editingRule}
|
||||||
chainGroup={sheetChainGroup}
|
chainGroup={sheetChainGroup}
|
||||||
family={editingRule?.id ? ruleFamily(editingRule as FirewallRule) : ipFamily}
|
family={editingRule?.id ? ruleFamily(editingRule as FirewallRule) : ipFamily}
|
||||||
onSave={(payload) => { void saveRule(payload) }}
|
onSave={(payload) => { void saveRule(payload) }}
|
||||||
saving={busy}
|
saving={busy}
|
||||||
|
error={formError}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<AddressListSheet
|
<AddressListSheet
|
||||||
open={addrSheetOpen}
|
open={addrSheetOpen}
|
||||||
onClose={() => setAddrSheetOpen(false)}
|
onClose={() => { if (!mutationLock.current) setAddrSheetOpen(false) }}
|
||||||
initial={editingAddr}
|
initial={editingAddr}
|
||||||
family={editingAddr?.id ? addressFamily(editingAddr as AddressListEntry) : ipFamily}
|
family={editingAddr?.id ? addressFamily(editingAddr as AddressListEntry) : ipFamily}
|
||||||
onSave={(payload) => { void saveAddr(payload) }}
|
onSave={(payload) => { void saveAddr(payload) }}
|
||||||
saving={busy}
|
saving={busy}
|
||||||
|
error={formError}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ExportSheet
|
<ExportSheet
|
||||||
@@ -2691,7 +2720,7 @@ function FirewallPageInner() {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<AlertDialog open={!!pendingDelete} onOpenChange={open => {
|
<AlertDialog open={!!pendingDelete} onOpenChange={open => {
|
||||||
if (!open && !toggleLock.current) { setPendingDelete(null); setDeleteError(null) }
|
if (!open && !mutationLock.current) { setPendingDelete(null); setDeleteError(null) }
|
||||||
}}>
|
}}>
|
||||||
<AlertDialogContent>
|
<AlertDialogContent>
|
||||||
<AlertDialogHeader>
|
<AlertDialogHeader>
|
||||||
|
|||||||
+2
-2
@@ -80,7 +80,7 @@ flowchart LR
|
|||||||
|
|
||||||
## Текущая точка продолжения
|
## Текущая точка продолжения
|
||||||
|
|
||||||
По журналу этапы 0–8 завершены в границах локальной приёмки; внешние ограничения сохраняются. Этап 9 начат (блоки 9.1–9.27 — IPsec/GRE/VXLAN и переключение Firewall); этапы 10–12 не начаты. Этап 11 разделён: 11А — пользователи, контейнеры, сертификаты, резервирование; 11Б — оповещения, сбор данных, интеграции, релизы, настройки.
|
По журналу этапы 0–8 завершены в границах локальной приёмки; внешние ограничения сохраняются. Этап 9 начат (блоки 9.1–9.28 — 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).
|
Подробные планы: [этап 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 и защитой повторов. Далее — сохранение и перемещение 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, сохраняют ввод/ошибку и блокируют повторы/закрытие. Далее — подтверждение перемещения Firewall, затем Filters; ограничения счётчика, свежести и записи VXLAN остаются открытыми; загрузка данных IPsec и общая приёмка остаются открытыми.
|
||||||
2. Сохранять контекст устройства, введённые значения при ошибке и подтверждать результат операций по API; локальные моки проверяют клиентские сценарии, реальные сетевые операции требуют тестового окружения.
|
2. Сохранять контекст устройства, введённые значения при ошибке и подтверждать результат операций по API; локальные моки проверяют клиентские сценарии, реальные сетевые операции требуют тестового окружения.
|
||||||
3. В этапе 12 выполнить полный аудит доступности (скринридер, контраст), производительности и сквозную регрессию. Ограничения этапа 8 — удалённые серверы месячного каталога, отсутствие экспорта и автоматического переподключения SSE — остаются явно зафиксированными, без заявления о реализации.
|
3. В этапе 12 выполнить полный аудит доступности (скринридер, контраст), производительности и сквозную регрессию. Ограничения этапа 8 — удалённые серверы месячного каталога, отсутствие экспорта и автоматического переподключения SSE — остаются явно зафиксированными, без заявления о реализации.
|
||||||
|
|
||||||
|
|||||||
@@ -25,12 +25,20 @@
|
|||||||
| 6 | Навигация и дашборд | Завершён 2026-09-20 в границах локальной приёмки; ограничения ниже |
|
| 6 | Навигация и дашборд | Завершён 2026-09-20 в границах локальной приёмки; ограничения ниже |
|
||||||
| 7 | Серверы и мониторинг: детали, формы, URL-контекст, права | Завершён в границах локальной приёмки 2026-09-23; внешние ограничения ниже |
|
| 7 | Серверы и мониторинг: детали, формы, URL-контекст, права | Завершён в границах локальной приёмки 2026-09-23; внешние ограничения ниже |
|
||||||
| 8 | Трафик и статистика | Завершён 2026-09-28 в границах локальной приёмки; ограничения в блоке 8.13 |
|
| 8 | Трафик и статистика | Завершён 2026-09-28 в границах локальной приёмки; ограничения в блоке 8.13 |
|
||||||
| 9 | VPN, Firewall и Filters | В работе: блоки 9.1–9.27 — IPsec/GRE/VXLAN и переключение Firewall |
|
| 9 | VPN, Firewall и Filters | В работе: блоки 9.1–9.28 — IPsec/GRE/VXLAN и переключение Firewall |
|
||||||
| 10 | Маршрутизация, диагностика, карта и терминал | Не начат |
|
| 10 | Маршрутизация, диагностика, карта и терминал | Не начат |
|
||||||
| 11А | Пользователи, контейнеры, сертификаты и резервные копии | Не начат |
|
| 11А | Пользователи, контейнеры, сертификаты и резервные копии | Не начат |
|
||||||
| 11Б | Оповещения, сбор данных, интеграции, релизы и настройки | Не начат |
|
| 11Б | Оповещения, сбор данных, интеграции, релизы и настройки | Не начат |
|
||||||
| 12 | Итоговая доступность, адаптивность, производительность и регрессия | Не начат |
|
| 12 | Итоговая доступность, адаптивность, производительность и регрессия | Не начат |
|
||||||
|
|
||||||
|
## Блок 9.28 — формы Firewall (2026-09-30)
|
||||||
|
|
||||||
|
- Создание/редактирование правил и address-list требует ok=true в ответе POST/PUT. При 403, пустом ответе и ok=false форма сохраняет ввод, показывает alert и допускает повтор. Новое открытие сбрасывает ошибку; успешный ответ закрывает форму.
|
||||||
|
- Во время запроса fieldset и переключатели disabled, отмена и Escape блокируются, кнопка закрытия скрыта. Синхронный mutationLock общий для сохранения, удаления и переключения; открытие новой формы также учитывает занятость и восстановление истории.
|
||||||
|
- Все 21 E2E Firewall прошли: восемь новых сценариев rule/address × create/edit × IPv4/IPv6 проверяют метод/контекст/payload, двойное нажатие, задержку, сохранение ввода, 403, пустой ответ, ok=false и успех. Прежние 13 сценариев прошли. TypeScript прошёл. Новый тест lint-чистый; исходные 4 ошибки/2 предупреждения страницы не изменились относительно HEAD. Diff-check проверен перед коммитом. Последний production build — 9.21, повтор не выполнялся.
|
||||||
|
- Далее — подтверждение и блокировка перемещения Firewall, затем Filters. Восстановление истории и перемещение пока не используют общий mutationLock, гонки загрузки не исправлены. После подтверждённой записи loadLive может сообщить отдельную ошибку чтения; реальные RouterOS/JWT не проверены. Этап 9 открыт.
|
||||||
|
- Квота: 23% пятичасовой/4% недельной на старте, 25%/4% после проверок. Локальный коммит без push; чужие изменения сохранены.
|
||||||
|
|
||||||
## Блок 9.27 — удаление Firewall (2026-09-30)
|
## Блок 9.27 — удаление Firewall (2026-09-30)
|
||||||
|
|
||||||
- Правила и address-list удаляются через общий AlertDialog существующей Base UI оболочки. Диалог показывает объект, устройство, IP-семейство, для правила — таблицу/цепочку; отмена до отправки не вызывает API.
|
- Правила и address-list удаляются через общий AlertDialog существующей Base UI оболочки. Диалог показывает объект, устройство, IP-семейство, для правила — таблицу/цепочку; отмена до отправки не вызывает API.
|
||||||
|
|||||||
@@ -149,3 +149,7 @@ PATCH требует ok=true, общий замок переключений п
|
|||||||
## Блок 9.27 — удаление Firewall (2026-09-30)
|
## Блок 9.27 — удаление Firewall (2026-09-30)
|
||||||
|
|
||||||
Правила/address-list удаляются через общий диалог с контекстом устройства. DELETE требует ok=true; ошибка сохраняет диалог, повтор и закрытие блокируются до ответа. Все 13 E2E и TypeScript прошли, новых замечаний lint нет. Далее — формы и перемещение Firewall; остальные мутации и гонки загрузки ещё открыты. Реальные устройства не проверены; последний build — 9.21.
|
Правила/address-list удаляются через общий диалог с контекстом устройства. DELETE требует ok=true; ошибка сохраняет диалог, повтор и закрытие блокируются до ответа. Все 13 E2E и TypeScript прошли, новых замечаний lint нет. Далее — формы и перемещение Firewall; остальные мутации и гонки загрузки ещё открыты. Реальные устройства не проверены; последний build — 9.21.
|
||||||
|
|
||||||
|
## Блок 9.28 — формы Firewall (2026-09-30)
|
||||||
|
|
||||||
|
POST/PUT правил и address-list требуют ok=true. Ошибка сохраняет форму/ввод, повтор и закрытие блокируются во время запроса. Все 21 E2E и TypeScript прошли, новых замечаний lint нет. Далее — перемещение Firewall; восстановление истории, перемещение и гонки загрузки ещё требуют общей защиты. Реальные устройства не проверены; последний build — 9.21.
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
import { test, expect } from "@playwright/test"
|
||||||
|
|
||||||
|
for (const kind of ["rule", "address"] as const) {
|
||||||
|
for (const editing of [false, true]) {
|
||||||
|
for (const family of ["ip", "ip6"] as const) {
|
||||||
|
test(`Firewall: сохранение ${kind}/${editing ? "edit" : "create"}/${family} сохраняет форму при ошибке`, async ({ page }) => {
|
||||||
|
let attempts = 0
|
||||||
|
let release: (() => void) | undefined
|
||||||
|
const gate = new Promise<void>(resolve => { release = resolve })
|
||||||
|
const rule = { id: "rule-1", rosId: "*R/1", serverId: "1", serverName: "Роутер", family, table: "filter", chain: "forward", action: "accept", proto: "tcp", src: "", dst: "", port: "443", iface: "", comment: "Правило тест", enabled: true, hits: 1 }
|
||||||
|
const entry = { id: "address-1", rosId: "*A/1", serverId: "1", serverName: "Роутер", family, list: "trusted", address: family === "ip" ? "192.0.2.10" : "2001:db8::10", comment: "Адрес тест", disabled: false }
|
||||||
|
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 (["POST", "PUT"].includes(route.request().method())) {
|
||||||
|
attempts++
|
||||||
|
expect(path).toBe(kind === "rule" ? "/api/firewall/rules" : "/api/firewall/address-lists")
|
||||||
|
expect(route.request().method()).toBe(editing ? "PUT" : "POST")
|
||||||
|
const payload = route.request().postDataJSON()
|
||||||
|
expect(payload).toMatchObject({ serverId: "1", family, comment: "Сохранить ввод", disabled: false })
|
||||||
|
if (kind === "rule") expect(payload).toMatchObject({ table: "filter", action: "accept", chain: editing ? "forward" : "input" })
|
||||||
|
else expect(payload).toMatchObject({ list: "trusted", address: entry.address })
|
||||||
|
if (editing) expect(payload.rosId).toBe(kind === "rule" ? "*R/1" : "*A/1")
|
||||||
|
else expect(payload).not.toHaveProperty("rosId")
|
||||||
|
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 } })
|
||||||
|
return route.fulfill({ json: { ok: true } })
|
||||||
|
}
|
||||||
|
return route.fulfill({ json: path === "/api/auth/config" ? { required: false }
|
||||||
|
: path === "/api/firewall/all" ? { rules: [rule], addressLists: [entry] }
|
||||||
|
: 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")
|
||||||
|
await expect(page.locator("tr[data-row-id]")).toHaveCount(family === "ip" ? 1 : 0)
|
||||||
|
if (family === "ip6") await page.getByRole("button", { name: "IPv6", exact: true }).click()
|
||||||
|
if (kind === "address") await page.getByRole("button", { name: /Адр. листы/ }).click()
|
||||||
|
const open = async () => {
|
||||||
|
if (editing) {
|
||||||
|
await page.getByRole("button", { name: kind === "rule" ? "Действия: forward accept" : "Действия: " + entry.address, exact: true }).click()
|
||||||
|
await page.getByRole("menuitem", { name: "Редактировать", exact: true }).click()
|
||||||
|
} else {
|
||||||
|
await page.getByRole("button", { name: kind === "rule" ? "Новое правило" : "Добавить", exact: true }).click()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await open()
|
||||||
|
const dialog = page.getByRole("dialog")
|
||||||
|
const comment = dialog.locator('[data-slot="field"]').filter({ has: page.getByText("Комментарий", { exact: true }) }).getByRole("textbox")
|
||||||
|
await comment.fill("Сохранить ввод")
|
||||||
|
if (kind === "address" && !editing) {
|
||||||
|
await dialog.getByPlaceholder("cdn-bypass").fill("trusted")
|
||||||
|
await dialog.getByPlaceholder("10.0.0.0/8").fill(entry.address)
|
||||||
|
}
|
||||||
|
const submit = dialog.getByRole("button", { name: editing ? "Сохранить" : kind === "rule" ? "Создать правило" : "Добавить", 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(comment).toBeDisabled()
|
||||||
|
for (const toggle of await dialog.getByRole("switch").all()) await expect(toggle).toBeDisabled()
|
||||||
|
await expect(dialog.getByRole("button", { name: "Отмена" })).toBeDisabled()
|
||||||
|
await page.keyboard.press("Escape")
|
||||||
|
await expect(dialog).toBeVisible()
|
||||||
|
release!()
|
||||||
|
await expect(dialog.getByRole("alert")).toContainText("Сохранение запрещено тест")
|
||||||
|
await expect(comment).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(comment).toHaveValue("Сохранить ввод")
|
||||||
|
await expect(page.getByText(kind === "rule" ? editing ? "Правило сохранено" : "Правило создано" : editing ? "Запись сохранена" : "Запись создана", { exact: true })).toHaveCount(0)
|
||||||
|
}
|
||||||
|
await submit.click()
|
||||||
|
await expect(dialog).toHaveCount(0)
|
||||||
|
expect(attempts).toBe(4)
|
||||||
|
await open()
|
||||||
|
await expect(dialog.getByRole("alert")).toHaveCount(0)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in new issue
Block a user