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
299
management-ui/src/pages/Firewall/Rules.tsx
Normal file
299
management-ui/src/pages/Firewall/Rules.tsx
Normal file
@@ -0,0 +1,299 @@
|
||||
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 { AddressGroup, AddressObject, FwRule, FwService, ServiceGroup, Zone } from './types'
|
||||
import { ZONES } from './types'
|
||||
|
||||
interface FormValues {
|
||||
name?: string
|
||||
priority: number
|
||||
enabled: boolean
|
||||
action: FwRule['action']
|
||||
src_zone: Zone
|
||||
src_kind: 'object' | 'group' | 'cidr' | 'any'
|
||||
src_address_object_id?: number
|
||||
src_address_group_id?: number
|
||||
src_cidr?: string
|
||||
dst_zone: Zone
|
||||
dst_kind: 'object' | 'group' | 'cidr' | 'any'
|
||||
dst_address_object_id?: number
|
||||
dst_address_group_id?: number
|
||||
dst_cidr?: string
|
||||
service_kind: 'object' | 'group' | 'any'
|
||||
service_object_id?: number
|
||||
service_group_id?: number
|
||||
log: boolean
|
||||
comment?: string
|
||||
}
|
||||
|
||||
const ACTION_COLORS: Record<FwRule['action'], string> = {
|
||||
accept: 'green',
|
||||
drop: 'red',
|
||||
reject: 'orange',
|
||||
}
|
||||
|
||||
async function listRules(): Promise<FwRule[]> {
|
||||
const r = await apiClient.get('/firewall/rules')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { rules?: FwRule[] }).rules ?? []
|
||||
}
|
||||
async function listAO(): Promise<AddressObject[]> {
|
||||
const r = await apiClient.get('/firewall/address-objects')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { address_objects?: AddressObject[] }).address_objects ?? []
|
||||
}
|
||||
async function listAG(): Promise<AddressGroup[]> {
|
||||
const r = await apiClient.get('/firewall/address-groups')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { address_groups?: AddressGroup[] }).address_groups ?? []
|
||||
}
|
||||
async function listSv(): Promise<FwService[]> {
|
||||
const r = await apiClient.get('/firewall/services')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { services?: FwService[] }).services ?? []
|
||||
}
|
||||
async function listSG(): Promise<ServiceGroup[]> {
|
||||
const r = await apiClient.get('/firewall/service-groups')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { service_groups?: ServiceGroup[] }).service_groups ?? []
|
||||
}
|
||||
|
||||
function buildPayload(v: FormValues) {
|
||||
const out: Partial<FwRule> = {
|
||||
name: v.name, priority: v.priority, enabled: v.enabled, action: v.action,
|
||||
src_zone: v.src_zone, dst_zone: v.dst_zone, log: v.log, comment: v.comment,
|
||||
src_address_object_id: null, src_address_group_id: null, src_cidr: null,
|
||||
dst_address_object_id: null, dst_address_group_id: null, dst_cidr: null,
|
||||
service_object_id: null, service_group_id: null,
|
||||
}
|
||||
if (v.src_kind === 'object') out.src_address_object_id = v.src_address_object_id ?? null
|
||||
if (v.src_kind === 'group') out.src_address_group_id = v.src_address_group_id ?? null
|
||||
if (v.src_kind === 'cidr') out.src_cidr = v.src_cidr ?? null
|
||||
if (v.dst_kind === 'object') out.dst_address_object_id = v.dst_address_object_id ?? null
|
||||
if (v.dst_kind === 'group') out.dst_address_group_id = v.dst_address_group_id ?? null
|
||||
if (v.dst_kind === 'cidr') out.dst_cidr = v.dst_cidr ?? null
|
||||
if (v.service_kind === 'object') out.service_object_id = v.service_object_id ?? null
|
||||
if (v.service_kind === 'group') out.service_group_id = v.service_group_id ?? null
|
||||
return out
|
||||
}
|
||||
|
||||
export default function RulesTab() {
|
||||
const { t } = useTranslation()
|
||||
const qc = useQueryClient()
|
||||
const { data: rules, isLoading } = useQuery({ queryKey: ['fw', 'rules'], queryFn: listRules })
|
||||
const { data: aos } = useQuery({ queryKey: ['fw', 'addr-obj'], queryFn: listAO })
|
||||
const { data: ags } = useQuery({ queryKey: ['fw', 'addr-grp'], queryFn: listAG })
|
||||
const { data: svs } = useQuery({ queryKey: ['fw', 'svc'], queryFn: listSv })
|
||||
const { data: sgs } = useQuery({ queryKey: ['fw', 'svc-grp'], queryFn: listSG })
|
||||
|
||||
const aoLabel = (id?: number | null) => aos?.find(o => o.id === id)?.name ?? `#${id}`
|
||||
const agLabel = (id?: number | null) => ags?.find(g => g.id === id)?.name ?? `#${id}`
|
||||
const svLabel = (id?: number | null) => svs?.find(s => s.id === id)?.name ?? `#${id}`
|
||||
const sgLabel = (id?: number | null) => sgs?.find(g => g.id === id)?.name ?? `#${id}`
|
||||
|
||||
const renderSide = (objID?: number | null, grpID?: number | null, cidr?: string | null) => {
|
||||
if (objID) return <Tag>obj:{aoLabel(objID)}</Tag>
|
||||
if (grpID) return <Tag color="purple">grp:{agLabel(grpID)}</Tag>
|
||||
if (cidr) return <code>{cidr}</code>
|
||||
return <Tag>any</Tag>
|
||||
}
|
||||
const renderService = (objID?: number | null, grpID?: number | null) => {
|
||||
if (objID) return <Tag>{svLabel(objID)}</Tag>
|
||||
if (grpID) return <Tag color="purple">grp:{sgLabel(grpID)}</Tag>
|
||||
return <Tag>any</Tag>
|
||||
}
|
||||
|
||||
const [editing, setEditing] = useState<FwRule | null>(null)
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [form] = Form.useForm<FormValues>()
|
||||
|
||||
const create = useMutation({
|
||||
mutationFn: async (v: FormValues) => { await apiClient.post('/firewall/rules', buildPayload(v)) },
|
||||
onSuccess: () => {
|
||||
message.success(t('common.save')); setCreating(false); form.resetFields()
|
||||
void qc.invalidateQueries({ queryKey: ['fw', 'rules'] })
|
||||
},
|
||||
})
|
||||
const update = useMutation({
|
||||
mutationFn: async ({ id, v }: { id: number; v: FormValues }) => { await apiClient.put(`/firewall/rules/${id}`, buildPayload(v)) },
|
||||
onSuccess: () => {
|
||||
message.success(t('common.save')); setEditing(null); form.resetFields()
|
||||
void qc.invalidateQueries({ queryKey: ['fw', 'rules'] })
|
||||
},
|
||||
})
|
||||
const del = useMutation({
|
||||
mutationFn: async (id: number) => { await apiClient.delete(`/firewall/rules/${id}`) },
|
||||
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fw', 'rules'] }) },
|
||||
})
|
||||
|
||||
const editFromRow = (r: FwRule) => {
|
||||
setEditing(r)
|
||||
form.setFieldsValue({
|
||||
name: r.name ?? undefined,
|
||||
priority: r.priority, enabled: r.enabled, action: r.action,
|
||||
src_zone: r.src_zone, dst_zone: r.dst_zone, log: r.log, comment: r.comment ?? undefined,
|
||||
src_kind: r.src_address_object_id ? 'object' : r.src_address_group_id ? 'group' : r.src_cidr ? 'cidr' : 'any',
|
||||
src_address_object_id: r.src_address_object_id ?? undefined,
|
||||
src_address_group_id: r.src_address_group_id ?? undefined,
|
||||
src_cidr: r.src_cidr ?? undefined,
|
||||
dst_kind: r.dst_address_object_id ? 'object' : r.dst_address_group_id ? 'group' : r.dst_cidr ? 'cidr' : 'any',
|
||||
dst_address_object_id: r.dst_address_object_id ?? undefined,
|
||||
dst_address_group_id: r.dst_address_group_id ?? undefined,
|
||||
dst_cidr: r.dst_cidr ?? undefined,
|
||||
service_kind: r.service_object_id ? 'object' : r.service_group_id ? 'group' : 'any',
|
||||
service_object_id: r.service_object_id ?? undefined,
|
||||
service_group_id: r.service_group_id ?? undefined,
|
||||
})
|
||||
}
|
||||
|
||||
const columns: ColumnsType<FwRule> = [
|
||||
{ title: '#', dataIndex: 'priority', key: 'priority', width: 70 },
|
||||
{
|
||||
title: t('fw.rule.action'), dataIndex: 'action', key: 'action',
|
||||
render: (a: FwRule['action']) => <Tag color={ACTION_COLORS[a]}>{a.toUpperCase()}</Tag>,
|
||||
},
|
||||
{
|
||||
title: t('fw.rule.src'), key: 'src',
|
||||
render: (_, r) => <Space size={4}><Tag>{r.src_zone}</Tag>{renderSide(r.src_address_object_id, r.src_address_group_id, r.src_cidr)}</Space>,
|
||||
},
|
||||
{
|
||||
title: t('fw.rule.dst'), key: 'dst',
|
||||
render: (_, r) => <Space size={4}><Tag>{r.dst_zone}</Tag>{renderSide(r.dst_address_object_id, r.dst_address_group_id, r.dst_cidr)}</Space>,
|
||||
},
|
||||
{
|
||||
title: t('fw.rule.service'), key: 'svc',
|
||||
render: (_, r) => renderService(r.service_object_id, r.service_group_id),
|
||||
},
|
||||
{ title: t('fw.rule.enabled'), dataIndex: 'enabled', key: 'enabled', render: (v: boolean) => v ? '✓' : '—' },
|
||||
{ title: t('fw.rule.name'), dataIndex: 'name', key: 'name', render: (v?: string) => v ?? '—' },
|
||||
{
|
||||
title: t('common.edit'), key: 'actions',
|
||||
render: (_, row) => (
|
||||
<Space>
|
||||
<Button size="small" onClick={() => editFromRow(row)}>{t('common.edit')}</Button>
|
||||
<Popconfirm title={t('fw.rule.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, action: 'accept', log: false,
|
||||
src_zone: 'any', dst_zone: 'any',
|
||||
src_kind: 'any', dst_kind: 'any', service_kind: 'any',
|
||||
})
|
||||
}}>
|
||||
{t('fw.rule.add')}
|
||||
</Button>
|
||||
<Table rowKey="id" loading={isLoading} dataSource={rules ?? []} columns={columns} pagination={false} />
|
||||
<Modal
|
||||
title={editing ? t('fw.rule.edit') : t('fw.rule.add')}
|
||||
open={editing !== null || creating}
|
||||
onCancel={() => { setEditing(null); setCreating(false) }}
|
||||
onOk={() => { void form.submit() }}
|
||||
confirmLoading={create.isPending || update.isPending}
|
||||
width={620}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={(v) => { if (editing) update.mutate({ id: editing.id, v }); else create.mutate(v) }}
|
||||
>
|
||||
<Form.Item label={t('fw.rule.name')} name="name">
|
||||
<Input placeholder="SSH von Office" />
|
||||
</Form.Item>
|
||||
|
||||
<Space size="middle" style={{ display: 'flex', flexWrap: 'wrap' }}>
|
||||
<Form.Item label={t('fw.rule.priority')} name="priority" rules={[{ required: true }]}>
|
||||
<InputNumber min={0} max={9999} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('fw.rule.action')} name="action" rules={[{ required: true }]}>
|
||||
<Select style={{ width: 140 }} options={(['accept','drop','reject'] as const).map(a => ({ value: a, label: a }))} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('fw.rule.enabled')} name="enabled" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('fw.rule.log')} name="log" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
|
||||
{(['src', 'dst'] as const).map((side) => (
|
||||
<Space key={side} size="middle" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-start' }}>
|
||||
<Form.Item label={t(`fw.rule.${side}Zone`)} name={`${side}_zone`} rules={[{ required: true }]}>
|
||||
<Select style={{ width: 120 }} options={ZONES.map(z => ({ value: z, label: z }))} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t(`fw.rule.${side}Kind`)} name={`${side}_kind`} rules={[{ required: true }]}>
|
||||
<Select style={{ width: 120 }} options={(['any','object','group','cidr'] as const).map(k => ({ value: k, label: k }))} />
|
||||
</Form.Item>
|
||||
<Form.Item noStyle shouldUpdate={(p, c) => p[`${side}_kind`] !== c[`${side}_kind`]}>
|
||||
{({ getFieldValue }) => {
|
||||
const k = getFieldValue(`${side}_kind`)
|
||||
if (k === 'object') {
|
||||
return <Form.Item label={t('fw.rule.object')} name={`${side}_address_object_id`} rules={[{ required: true }]}>
|
||||
<Select style={{ width: 220 }} showSearch optionFilterProp="label"
|
||||
options={(aos ?? []).map(o => ({ value: o.id, label: `${o.name} (${o.kind}: ${o.value})` }))} />
|
||||
</Form.Item>
|
||||
}
|
||||
if (k === 'group') {
|
||||
return <Form.Item label={t('fw.rule.group')} name={`${side}_address_group_id`} rules={[{ required: true }]}>
|
||||
<Select style={{ width: 220 }} showSearch optionFilterProp="label"
|
||||
options={(ags ?? []).map(g => ({ value: g.id, label: g.name }))} />
|
||||
</Form.Item>
|
||||
}
|
||||
if (k === 'cidr') {
|
||||
return <Form.Item label="CIDR" name={`${side}_cidr`} rules={[{ required: true }]}>
|
||||
<Input placeholder="10.0.0.0/24" style={{ width: 200 }} />
|
||||
</Form.Item>
|
||||
}
|
||||
return null
|
||||
}}
|
||||
</Form.Item>
|
||||
</Space>
|
||||
))}
|
||||
|
||||
<Space size="middle" style={{ display: 'flex', flexWrap: 'wrap' }}>
|
||||
<Form.Item label={t('fw.rule.serviceKind')} name="service_kind" rules={[{ required: true }]}>
|
||||
<Select style={{ width: 120 }} options={(['any','object','group'] as const).map(k => ({ value: k, label: k }))} />
|
||||
</Form.Item>
|
||||
<Form.Item noStyle shouldUpdate={(p, c) => p.service_kind !== c.service_kind}>
|
||||
{({ getFieldValue }) => {
|
||||
const k = getFieldValue('service_kind')
|
||||
if (k === 'object') {
|
||||
return <Form.Item label={t('fw.rule.service')} name="service_object_id" rules={[{ required: true }]}>
|
||||
<Select style={{ width: 240 }} showSearch optionFilterProp="label"
|
||||
options={(svs ?? []).map(s => ({
|
||||
value: s.id,
|
||||
label: `${s.name} (${s.proto}${s.port_start ? ' '+s.port_start : ''})`,
|
||||
}))} />
|
||||
</Form.Item>
|
||||
}
|
||||
if (k === 'group') {
|
||||
return <Form.Item label={t('fw.rule.serviceGroup')} name="service_group_id" rules={[{ required: true }]}>
|
||||
<Select style={{ width: 240 }} showSearch optionFilterProp="label"
|
||||
options={(sgs ?? []).map(g => ({ value: g.id, label: g.name }))} />
|
||||
</Form.Item>
|
||||
}
|
||||
return null
|
||||
}}
|
||||
</Form.Item>
|
||||
</Space>
|
||||
|
||||
<Form.Item label={t('fw.rule.comment')} name="comment">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user