feat(fw): Frontend /firewall mit 6 Tabs (Rules/NAT/Address-Objects/-Groups/Services/-Groups)
management-ui/src/pages/Firewall/:
* index.tsx — AntD Tabs default=Rules
* AddressObjects.tsx — Table + Modal (kind-Switch ändert Placeholder)
* AddressGroups.tsx — Members als Multi-Select aus Address-Objects
* Services.tsx — Builtin-Rows sind Edit/Delete-disabled mit Tooltip,
Form blendet Port-Felder bei proto != tcp/udp aus
* ServiceGroups.tsx — analog AddressGroups
* Rules.tsx — Renderer mit object/group/cidr/any-Switch pro Seite
+ Service-Picker; Action+Zone als Tags in der Tabelle
* NATRules.tsx — kind-spezifische Form (DNAT braucht in_zone+dport,
SNAT/MASQ braucht out_zone, MASQ verbietet target_addr)
Sidebar bekommt eigene Sektion "Sicherheit" mit FireOutlined-Icon
für /firewall. i18n de/en für alle 6 Tabs + Form-Labels.
Backend war schon im vorigen Commit fertig — diese Pages konsumieren
direkt /api/v1/firewall/{address-objects,address-groups,services,
service-groups,rules,nat-rules}. Renderer (nft aus den Joins) +
auto-apply folgen in den nächsten Commits — bis dahin sind die Rules
in der DB sichtbar aber noch nicht aktiv im Kernel.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Debian
225
management-ui/src/pages/Firewall/NATRules.tsx
Normal file
225
management-ui/src/pages/Firewall/NATRules.tsx
Normal file
@@ -0,0 +1,225 @@
|
||||
import { useState } from 'react'
|
||||
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Tag, message } from 'antd'
|
||||
import type { ColumnsType } from 'antd/es/table'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import apiClient, { isEnvelope } from '../../api/client'
|
||||
import type { NATRule } from './types'
|
||||
|
||||
interface FormValues {
|
||||
name?: string
|
||||
priority: number
|
||||
enabled: boolean
|
||||
kind: NATRule['kind']
|
||||
in_zone?: string
|
||||
out_zone?: string
|
||||
proto?: 'tcp' | 'udp' | 'any'
|
||||
match_src_cidr?: string
|
||||
match_dst_cidr?: string
|
||||
match_dport_start?: number
|
||||
match_dport_end?: number
|
||||
target_addr?: string
|
||||
target_port_start?: number
|
||||
target_port_end?: number
|
||||
comment?: string
|
||||
}
|
||||
|
||||
const ZONES_FOR_NAT = ['wan', 'lan', 'dmz', 'mgmt', 'cluster'] as const
|
||||
|
||||
async function listNAT(): Promise<NATRule[]> {
|
||||
const r = await apiClient.get('/firewall/nat-rules')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { nat_rules?: NATRule[] }).nat_rules ?? []
|
||||
}
|
||||
|
||||
const KIND_COLORS: Record<NATRule['kind'], string> = {
|
||||
dnat: 'blue',
|
||||
snat: 'purple',
|
||||
masquerade: 'gold',
|
||||
}
|
||||
|
||||
export default function NATRulesTab() {
|
||||
const { t } = useTranslation()
|
||||
const qc = useQueryClient()
|
||||
const { data, isLoading } = useQuery({ queryKey: ['fw', 'nat'], queryFn: listNAT })
|
||||
|
||||
const [editing, setEditing] = useState<NATRule | null>(null)
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [form] = Form.useForm<FormValues>()
|
||||
|
||||
const create = useMutation({
|
||||
mutationFn: async (v: FormValues) => { await apiClient.post('/firewall/nat-rules', v) },
|
||||
onSuccess: () => {
|
||||
message.success(t('common.save')); setCreating(false); form.resetFields()
|
||||
void qc.invalidateQueries({ queryKey: ['fw', 'nat'] })
|
||||
},
|
||||
})
|
||||
const update = useMutation({
|
||||
mutationFn: async ({ id, v }: { id: number; v: FormValues }) => { await apiClient.put(`/firewall/nat-rules/${id}`, v) },
|
||||
onSuccess: () => {
|
||||
message.success(t('common.save')); setEditing(null); form.resetFields()
|
||||
void qc.invalidateQueries({ queryKey: ['fw', 'nat'] })
|
||||
},
|
||||
})
|
||||
const del = useMutation({
|
||||
mutationFn: async (id: number) => { await apiClient.delete(`/firewall/nat-rules/${id}`) },
|
||||
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fw', 'nat'] }) },
|
||||
})
|
||||
|
||||
const renderTarget = (r: NATRule) => {
|
||||
if (r.kind === 'masquerade') return <Tag color="gold">{r.out_zone ?? '?'}-iface IP</Tag>
|
||||
if (!r.target_addr) return '—'
|
||||
return <code>{r.target_addr}{r.target_port_start ? `:${r.target_port_start}${r.target_port_end !== r.target_port_start ? `-${r.target_port_end}` : ''}` : ''}</code>
|
||||
}
|
||||
|
||||
const columns: ColumnsType<NATRule> = [
|
||||
{ title: '#', dataIndex: 'priority', key: 'priority', width: 70 },
|
||||
{ title: t('fw.nat.kind'), dataIndex: 'kind', key: 'kind', render: (k: NATRule['kind']) => <Tag color={KIND_COLORS[k]}>{k.toUpperCase()}</Tag> },
|
||||
{
|
||||
title: t('fw.nat.match'), key: 'match',
|
||||
render: (_, r) => (
|
||||
<Space size={4}>
|
||||
{r.in_zone && <Tag>in:{r.in_zone}</Tag>}
|
||||
{r.out_zone && <Tag>out:{r.out_zone}</Tag>}
|
||||
{r.proto && <Tag>{r.proto}</Tag>}
|
||||
{r.match_src_cidr && <code>src={r.match_src_cidr}</code>}
|
||||
{r.match_dst_cidr && <code>dst={r.match_dst_cidr}</code>}
|
||||
{r.match_dport_start && <code>dport={r.match_dport_start}{r.match_dport_end !== r.match_dport_start ? `-${r.match_dport_end}` : ''}</code>}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
{ title: t('fw.nat.target'), key: 'target', render: (_, r) => renderTarget(r) },
|
||||
{ title: t('fw.nat.enabled'), dataIndex: 'enabled', key: 'enabled', render: (v: boolean) => v ? '✓' : '—' },
|
||||
{
|
||||
title: t('common.edit'), key: 'actions',
|
||||
render: (_, row) => (
|
||||
<Space>
|
||||
<Button size="small" onClick={() => {
|
||||
setEditing(row)
|
||||
form.setFieldsValue({
|
||||
name: row.name ?? undefined,
|
||||
priority: row.priority, enabled: row.enabled, kind: row.kind,
|
||||
in_zone: row.in_zone ?? undefined, out_zone: row.out_zone ?? undefined,
|
||||
proto: row.proto ?? undefined,
|
||||
match_src_cidr: row.match_src_cidr ?? undefined,
|
||||
match_dst_cidr: row.match_dst_cidr ?? undefined,
|
||||
match_dport_start: row.match_dport_start ?? undefined,
|
||||
match_dport_end: row.match_dport_end ?? undefined,
|
||||
target_addr: row.target_addr ?? undefined,
|
||||
target_port_start: row.target_port_start ?? undefined,
|
||||
target_port_end: row.target_port_end ?? undefined,
|
||||
comment: row.comment ?? undefined,
|
||||
})
|
||||
}}>{t('common.edit')}</Button>
|
||||
<Popconfirm title={t('fw.nat.deleteConfirm')} onConfirm={() => del.mutate(row.id)}>
|
||||
<Button size="small" danger>{t('common.delete')}</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button type="primary" style={{ marginBottom: 16 }} onClick={() => {
|
||||
setCreating(true); form.resetFields()
|
||||
form.setFieldsValue({ priority: 100, enabled: true, kind: 'dnat' })
|
||||
}}>
|
||||
{t('fw.nat.add')}
|
||||
</Button>
|
||||
<Table rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} pagination={false} />
|
||||
<Modal
|
||||
title={editing ? t('fw.nat.edit') : t('fw.nat.add')}
|
||||
open={editing !== null || creating}
|
||||
onCancel={() => { setEditing(null); setCreating(false) }}
|
||||
onOk={() => { void form.submit() }}
|
||||
confirmLoading={create.isPending || update.isPending}
|
||||
width={560}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={(v) => { if (editing) update.mutate({ id: editing.id, v }); else create.mutate(v) }}
|
||||
>
|
||||
<Form.Item label={t('fw.nat.name')} name="name">
|
||||
<Input placeholder="Forward HTTP zu Web-Backend" />
|
||||
</Form.Item>
|
||||
<Space size="middle">
|
||||
<Form.Item label={t('fw.nat.priority')} name="priority" rules={[{ required: true }]}>
|
||||
<InputNumber min={0} max={9999} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('fw.nat.kind')} name="kind" rules={[{ required: true }]}>
|
||||
<Select style={{ width: 160 }} options={(['dnat','snat','masquerade'] as const).map(k => ({ value: k, label: k.toUpperCase() }))} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('fw.nat.enabled')} name="enabled" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
|
||||
<Form.Item noStyle shouldUpdate={(p, c) => p.kind !== c.kind}>
|
||||
{({ getFieldValue }) => {
|
||||
const kind = getFieldValue('kind') as NATRule['kind']
|
||||
return (
|
||||
<>
|
||||
{kind === 'dnat' && (
|
||||
<Form.Item label={t('fw.nat.inZone')} name="in_zone" rules={[{ required: true }]}>
|
||||
<Select options={ZONES_FOR_NAT.map(z => ({ value: z, label: z }))} />
|
||||
</Form.Item>
|
||||
)}
|
||||
{(kind === 'snat' || kind === 'masquerade') && (
|
||||
<Form.Item label={t('fw.nat.outZone')} name="out_zone" rules={[{ required: true }]}>
|
||||
<Select options={ZONES_FOR_NAT.map(z => ({ value: z, label: z }))} />
|
||||
</Form.Item>
|
||||
)}
|
||||
<Form.Item label={t('fw.nat.proto')} name="proto">
|
||||
<Select allowClear options={(['tcp','udp','any'] as const).map(p => ({ value: p, label: p }))} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('fw.nat.matchSrcCidr')} name="match_src_cidr">
|
||||
<Input placeholder="10.0.0.0/24" />
|
||||
</Form.Item>
|
||||
{kind === 'dnat' && (
|
||||
<>
|
||||
<Form.Item label={t('fw.nat.matchDstCidr')} name="match_dst_cidr">
|
||||
<Input placeholder={t('fw.nat.matchDstCidrHint')} />
|
||||
</Form.Item>
|
||||
<Space>
|
||||
<Form.Item label={t('fw.nat.dportStart')} name="match_dport_start" rules={[{ required: true }]}>
|
||||
<InputNumber min={1} max={65535} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('fw.nat.dportEnd')} name="match_dport_end">
|
||||
<InputNumber min={1} max={65535} />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
</>
|
||||
)}
|
||||
{kind !== 'masquerade' && (
|
||||
<>
|
||||
<Form.Item label={t('fw.nat.targetAddr')} name="target_addr" rules={[{ required: true }]}>
|
||||
<Input placeholder="192.0.2.10" />
|
||||
</Form.Item>
|
||||
{kind === 'dnat' && (
|
||||
<Space>
|
||||
<Form.Item label={t('fw.nat.targetPortStart')} name="target_port_start">
|
||||
<InputNumber min={1} max={65535} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('fw.nat.targetPortEnd')} name="target_port_end">
|
||||
<InputNumber min={1} max={65535} />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label={t('fw.nat.comment')} name="comment">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user