fix(ui): подтверждать сохранение форм Firewall
This commit is contained in:
Denozordec committed
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 ───────────────────────────────────────────────────────────────
|
||||
|
||||
function RuleSheet({ open, onClose, initialRule, chainGroup, family, onSave, saving = false }: {
|
||||
function RuleSheet({ open, onClose, initialRule, chainGroup, family, onSave, saving = false, error }: {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
initialRule: Partial<FirewallRule> | null
|
||||
@@ -494,6 +494,7 @@ function RuleSheet({ open, onClose, initialRule, chainGroup, family, onSave, sav
|
||||
family: IpFamily
|
||||
onSave: (payload: RuleWritePayload) => void
|
||||
saving?: boolean
|
||||
error?: string | null
|
||||
}) {
|
||||
const isNew = !initialRule?.id
|
||||
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"]
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={(v) => { if (!v) onClose() }}>
|
||||
<SheetContent className="flex flex-col overflow-hidden p-0 gap-0 sm:max-w-lg">
|
||||
<Sheet open={open} onOpenChange={(v) => { if (!v && !saving) onClose() }}>
|
||||
<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">
|
||||
<SheetTitle>{isNew ? "Новое правило" : "Редактировать правило"}</SheetTitle>
|
||||
<SheetDescription>
|
||||
@@ -539,7 +540,7 @@ function RuleSheet({ open, onClose, initialRule, chainGroup, family, onSave, sav
|
||||
</SheetDescription>
|
||||
</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 */}
|
||||
<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-xs text-muted-foreground">Записывать совпадения в системный лог</p>
|
||||
</div>
|
||||
<FormToggle checked={form.log} onChange={(v) => set("log", v)} />
|
||||
<FormToggle disabled={saving} checked={form.log} onChange={(v) => set("log", v)} />
|
||||
</div>
|
||||
{form.log && (
|
||||
<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-xs text-muted-foreground">Отключённые правила сохраняются, но не применяются</p>
|
||||
</div>
|
||||
<FormToggle checked={form.enabled} onChange={(v) => set("enabled", v)} />
|
||||
<FormToggle disabled={saving} checked={form.enabled} onChange={(v) => set("enabled", v)} />
|
||||
</div>
|
||||
|
||||
{/* CLI preview */}
|
||||
@@ -669,10 +670,12 @@ function RuleSheet({ open, onClose, initialRule, chainGroup, family, onSave, sav
|
||||
].filter(Boolean).join("\n")}
|
||||
</pre>
|
||||
</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">
|
||||
<SheetClose render={<Button variant="outline" className="flex-1" />}>Отмена</SheetClose>
|
||||
<SheetClose render={<Button variant="outline" className="flex-1" disabled={saving} />}>Отмена</SheetClose>
|
||||
<Button
|
||||
className="flex-1"
|
||||
disabled={saving}
|
||||
@@ -860,7 +863,7 @@ const defaultAddrForm = {
|
||||
}
|
||||
|
||||
function AddressListSheet({
|
||||
open, onClose, initial, family, onSave, saving = false,
|
||||
open, onClose, initial, family, onSave, saving = false, error,
|
||||
}: {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
@@ -868,6 +871,7 @@ function AddressListSheet({
|
||||
family: IpFamily
|
||||
onSave: (payload: { list: string; address: string; comment?: string; timeout?: string; disabled?: boolean }) => void
|
||||
saving?: boolean
|
||||
error?: string | null
|
||||
}) {
|
||||
const isNew = !initial?.id
|
||||
const [form, setForm] = useState(defaultAddrForm)
|
||||
@@ -884,15 +888,15 @@ function AddressListSheet({
|
||||
}, [open, initial])
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={(v) => { if (!v) onClose() }}>
|
||||
<SheetContent className="flex flex-col overflow-hidden p-0 gap-0 sm:max-w-md">
|
||||
<Sheet open={open} onOpenChange={(v) => { if (!v && !saving) onClose() }}>
|
||||
<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">
|
||||
<SheetTitle>{isNew ? "Запись address-list" : "Редактировать запись"}</SheetTitle>
|
||||
<SheetDescription>
|
||||
{family === "ip6" ? "/ipv6 firewall address-list" : "/ip firewall address-list"} · {IP_FAMILY_LABELS[family]}
|
||||
</SheetDescription>
|
||||
</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>
|
||||
<Input className="font-mono h-8" placeholder="cdn-bypass"
|
||||
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-xs text-muted-foreground">Отключённые адреса не матчятся</p>
|
||||
</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>
|
||||
</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">
|
||||
<SheetClose render={<Button variant="outline" className="flex-1" />}>Отмена</SheetClose>
|
||||
<SheetClose render={<Button variant="outline" className="flex-1" disabled={saving} />}>Отмена</SheetClose>
|
||||
<Button
|
||||
className="flex-1"
|
||||
disabled={saving || !form.list.trim() || !form.address.trim()}
|
||||
@@ -1941,7 +1947,8 @@ function FirewallPageInner() {
|
||||
const [dataLoading, setDataLoading] = useState(false)
|
||||
const [dataError, setDataError] = useState<string | null>(null)
|
||||
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 [toggleStatus, setToggleStatus] = useState<string | null>(null)
|
||||
const [toggleError, setToggleError] = useState<string | null>(null)
|
||||
@@ -2149,11 +2156,11 @@ function FirewallPageInner() {
|
||||
|
||||
async function toggleRule(id: string) {
|
||||
const r = displayRules.find((x) => x.id === id)
|
||||
if (!r || toggleLock.current || busy || historyRestoring) return
|
||||
if (!r || mutationLock.current || busy || historyRestoring) return
|
||||
if (isLive) {
|
||||
const key = ruleKey(r)
|
||||
if (!key) return
|
||||
toggleLock.current = true
|
||||
mutationLock.current = true
|
||||
setTogglePending(true)
|
||||
setToggleError(null)
|
||||
setToggleStatus(`Ожидание изменения правила ${r.comment || r.rosId || r.id}…`)
|
||||
@@ -2167,7 +2174,7 @@ function FirewallPageInner() {
|
||||
} catch (e) {
|
||||
setToggleError(`${r.comment || r.rosId || r.id}: ${e instanceof Error ? e.message : "Не удалось переключить правило"}`)
|
||||
} finally {
|
||||
toggleLock.current = false
|
||||
mutationLock.current = false
|
||||
setTogglePending(false)
|
||||
setToggleStatus(null)
|
||||
}
|
||||
@@ -2177,15 +2184,15 @@ function FirewallPageInner() {
|
||||
}
|
||||
|
||||
function requestDelete(target: NonNullable<typeof pendingDelete>) {
|
||||
if (toggleLock.current || busy || historyRestoring) return
|
||||
if (mutationLock.current || busy || historyRestoring) return
|
||||
setDeleteError(null)
|
||||
setPendingDelete(target)
|
||||
}
|
||||
|
||||
async function confirmDelete() {
|
||||
if (!pendingDelete || toggleLock.current || busy || historyRestoring) return
|
||||
if (!pendingDelete || mutationLock.current || busy || historyRestoring) return
|
||||
const target = pendingDelete
|
||||
toggleLock.current = true
|
||||
mutationLock.current = true
|
||||
setDeletePending(true)
|
||||
setDeleteError(null)
|
||||
try {
|
||||
@@ -2207,7 +2214,7 @@ function FirewallPageInner() {
|
||||
} catch (e) {
|
||||
setDeleteError(e instanceof Error ? e.message : "Не удалось удалить объект")
|
||||
} finally {
|
||||
toggleLock.current = false
|
||||
mutationLock.current = false
|
||||
setDeletePending(false)
|
||||
}
|
||||
}
|
||||
@@ -2255,6 +2262,8 @@ function FirewallPageInner() {
|
||||
}
|
||||
|
||||
function openAdd() {
|
||||
if (mutationLock.current || busy || historyRestoring) return
|
||||
setFormError(null)
|
||||
if (!requireWriteServer()) return
|
||||
const table = tableOfGroup(chainGroup)
|
||||
if (!table) {
|
||||
@@ -2265,11 +2274,14 @@ function FirewallPageInner() {
|
||||
}
|
||||
|
||||
function openEdit(r: FirewallRule) {
|
||||
if (mutationLock.current || busy || historyRestoring) return
|
||||
setFormError(null)
|
||||
setEditingRule(r)
|
||||
setRuleSheetOpen(true)
|
||||
}
|
||||
|
||||
async function saveRule(payload: RuleWritePayload) {
|
||||
if (mutationLock.current || busy || historyRestoring) return
|
||||
const table = (editingRule?.table ?? tableOfGroup(chainGroup) ?? "filter") as FirewallTable
|
||||
const family = editingRule?.id ? ruleFamily(editingRule as FirewallRule) : ipFamily
|
||||
const serverId = editingRule?.serverId ?? requireWriteServer()
|
||||
@@ -2280,26 +2292,31 @@ function FirewallPageInner() {
|
||||
?? serverId
|
||||
|
||||
if (isLive) {
|
||||
mutationLock.current = true
|
||||
setBusy(true)
|
||||
setFormError(null)
|
||||
try {
|
||||
if (editingRule?.rosId) {
|
||||
await apiFetch("/api/firewall/rules", {
|
||||
const result = await apiFetch<{ ok: boolean }>("/api/firewall/rules", {
|
||||
method: "PUT",
|
||||
body: JSON.stringify({ serverId, family, table, rosId: editingRule.rosId, ...payload }),
|
||||
})
|
||||
if (result?.ok !== true) throw new Error("Сервер не подтвердил сохранение")
|
||||
toast.success("Правило сохранено")
|
||||
} else {
|
||||
await apiFetch("/api/firewall/rules", {
|
||||
const result = await apiFetch<{ ok: boolean }>("/api/firewall/rules", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ serverId, family, table, ...payload }),
|
||||
})
|
||||
if (result?.ok !== true) throw new Error("Сервер не подтвердил сохранение")
|
||||
toast.success("Правило создано")
|
||||
}
|
||||
setRuleSheetOpen(false)
|
||||
await loadLive()
|
||||
} catch (e) {
|
||||
toast.error(e instanceof Error ? e.message : "Не удалось сохранить правило")
|
||||
setFormError(e instanceof Error ? e.message : "Не удалось сохранить правило")
|
||||
} finally {
|
||||
mutationLock.current = false
|
||||
setBusy(false)
|
||||
}
|
||||
return
|
||||
@@ -2331,22 +2348,26 @@ function FirewallPageInner() {
|
||||
}
|
||||
|
||||
function openAddAddr(list?: string) {
|
||||
if (mutationLock.current || busy || historyRestoring) return
|
||||
setFormError(null)
|
||||
if (!requireWriteServer()) return
|
||||
setEditingAddr(list ? { list } : null)
|
||||
setAddrSheetOpen(true)
|
||||
}
|
||||
|
||||
function openEditAddr(e: AddressListEntry) {
|
||||
if (mutationLock.current || busy || historyRestoring) return
|
||||
setFormError(null)
|
||||
setEditingAddr(e)
|
||||
setAddrSheetOpen(true)
|
||||
}
|
||||
|
||||
async function toggleAddr(e: AddressListEntry) {
|
||||
if (toggleLock.current || busy || historyRestoring) return
|
||||
if (mutationLock.current || busy || historyRestoring) return
|
||||
if (isLive) {
|
||||
const key = addressKey(e)
|
||||
if (!key) return
|
||||
toggleLock.current = true
|
||||
mutationLock.current = true
|
||||
setTogglePending(true)
|
||||
setToggleError(null)
|
||||
setToggleStatus(`Ожидание изменения адреса ${e.address} (${e.list})…`)
|
||||
@@ -2360,7 +2381,7 @@ function FirewallPageInner() {
|
||||
} catch (err) {
|
||||
setToggleError(`${e.address} (${e.list}): ${err instanceof Error ? err.message : "Не удалось переключить запись"}`)
|
||||
} finally {
|
||||
toggleLock.current = false
|
||||
mutationLock.current = false
|
||||
setTogglePending(false)
|
||||
setToggleStatus(null)
|
||||
}
|
||||
@@ -2376,6 +2397,7 @@ function FirewallPageInner() {
|
||||
timeout?: string
|
||||
disabled?: boolean
|
||||
}) {
|
||||
if (mutationLock.current || busy || historyRestoring) return
|
||||
const family = editingAddr?.id ? addressFamily(editingAddr as AddressListEntry) : ipFamily
|
||||
const serverId = editingAddr?.serverId ?? requireWriteServer()
|
||||
if (!serverId) return
|
||||
@@ -2385,26 +2407,31 @@ function FirewallPageInner() {
|
||||
?? serverId
|
||||
|
||||
if (isLive) {
|
||||
mutationLock.current = true
|
||||
setBusy(true)
|
||||
setFormError(null)
|
||||
try {
|
||||
if (editingAddr?.rosId) {
|
||||
await apiFetch("/api/firewall/address-lists", {
|
||||
const result = await apiFetch<{ ok: boolean }>("/api/firewall/address-lists", {
|
||||
method: "PUT",
|
||||
body: JSON.stringify({ serverId, family, rosId: editingAddr.rosId, ...payload }),
|
||||
})
|
||||
if (result?.ok !== true) throw new Error("Сервер не подтвердил сохранение")
|
||||
toast.success("Запись сохранена")
|
||||
} else {
|
||||
await apiFetch("/api/firewall/address-lists", {
|
||||
const result = await apiFetch<{ ok: boolean }>("/api/firewall/address-lists", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ serverId, family, ...payload }),
|
||||
})
|
||||
if (result?.ok !== true) throw new Error("Сервер не подтвердил сохранение")
|
||||
toast.success("Запись создана")
|
||||
}
|
||||
setAddrSheetOpen(false)
|
||||
await loadLive()
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Не удалось сохранить запись")
|
||||
setFormError(err instanceof Error ? err.message : "Не удалось сохранить запись")
|
||||
} finally {
|
||||
mutationLock.current = false
|
||||
setBusy(false)
|
||||
}
|
||||
return
|
||||
@@ -2667,21 +2694,23 @@ function FirewallPageInner() {
|
||||
|
||||
<RuleSheet
|
||||
open={ruleSheetOpen}
|
||||
onClose={() => setRuleSheetOpen(false)}
|
||||
onClose={() => { if (!mutationLock.current) setRuleSheetOpen(false) }}
|
||||
initialRule={editingRule}
|
||||
chainGroup={sheetChainGroup}
|
||||
family={editingRule?.id ? ruleFamily(editingRule as FirewallRule) : ipFamily}
|
||||
onSave={(payload) => { void saveRule(payload) }}
|
||||
saving={busy}
|
||||
error={formError}
|
||||
/>
|
||||
|
||||
<AddressListSheet
|
||||
open={addrSheetOpen}
|
||||
onClose={() => setAddrSheetOpen(false)}
|
||||
onClose={() => { if (!mutationLock.current) setAddrSheetOpen(false) }}
|
||||
initial={editingAddr}
|
||||
family={editingAddr?.id ? addressFamily(editingAddr as AddressListEntry) : ipFamily}
|
||||
onSave={(payload) => { void saveAddr(payload) }}
|
||||
saving={busy}
|
||||
error={formError}
|
||||
/>
|
||||
|
||||
<ExportSheet
|
||||
@@ -2691,7 +2720,7 @@ function FirewallPageInner() {
|
||||
/>
|
||||
|
||||
<AlertDialog open={!!pendingDelete} onOpenChange={open => {
|
||||
if (!open && !toggleLock.current) { setPendingDelete(null); setDeleteError(null) }
|
||||
if (!open && !mutationLock.current) { setPendingDelete(null); setDeleteError(null) }
|
||||
}}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
|
||||
Reference in new issue
Block a user