projekte/edgeguard-native
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fw): Frontend /firewall mit 6 Tabs (Rules/NAT/Address-Objects/-Groups/Services/-Groups)

Browse Source 
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
2026-05-10 11:44:00 +02:00
parent c9dd0b4cb1
commit e2bdce9271
12 changed files with 1283 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
management-ui/src/App.tsx
View File

@@ -19,6 +19,7 @@ const RoutingRulesPage = lazy(() => import('./pages/RoutingRules'))
const NetworksPage = lazy(() => import('./pages/Networks'))
const IPAddressesPage = lazy(() => import('./pages/IPAddresses'))
const SSLPage = lazy(() => import('./pages/SSL'))
const FirewallPage = lazy(() => import('./pages/Firewall'))
const ClusterPage = lazy(() => import('./pages/Cluster'))
const SettingsPage = lazy(() => import('./pages/Settings'))
@@ -97,6 +98,7 @@ export default function App() {
<Route path="/networks" element={<NetworksPage />} />
<Route path="/ip-addresses" element={<IPAddressesPage />} />
<Route path="/ssl" element={<SSLPage />} />
<Route path="/firewall" element={<FirewallPage />} />
<Route path="/cluster" element={<ClusterPage />} />
<Route path="/settings" element={<SettingsPage />} />
</Route>

7
management-ui/src/components/Layout/Sidebar.tsx
View File

@@ -6,6 +6,7 @@ import {
ClusterOutlined,
DashboardOutlined,
DatabaseOutlined,
FireOutlined,
GlobalOutlined,
NodeIndexOutlined,
SafetyCertificateOutlined,
@@ -52,6 +53,12 @@ const NAV: NavSection[] = [
{ path: '/ssl', labelKey: 'nav.ssl', icon: <SafetyCertificateOutlined /> },
],
},
{
labelKey: 'nav.section.security',
items: [
{ path: '/firewall', labelKey: 'nav.firewall', icon: <FireOutlined /> },
],
},
{
labelKey: 'nav.section.system',
items: [

62
management-ui/src/i18n/locales/de/common.json
View File

@@ -12,16 +12,76 @@
"ipAddresses": "IP-Adressen",
"ssl": "SSL-Zertifikate",
"vpn": "VPN",
"firewall": "Firewall",
"firewall": "Firewall (v2)",
"cluster": "Cluster",
"settings": "Einstellungen",
"section": {
"overview": "Übersicht",
"routing": "Routing",
"network": "Netzwerk",
"security": "Sicherheit",
"system": "System"
}
},
"fw": {
"title": "Firewall",
"intro": "Fortigate-Style: Regeln aus Zonen × Adress-Objekten/Gruppen × Services/Service-Gruppen × Action. NAT separat. Top-down, first-match.",
"tabs": {
"rules": "Regeln",
"nat": "NAT",
"addrObj": "Adress-Objekte",
"addrGrp": "Adress-Gruppen",
"services": "Services",
"svcGrp": "Service-Gruppen"
},
"ao": {
"name": "Name", "kind": "Typ", "value": "Wert", "description": "Beschreibung",
"add": "Adress-Objekt hinzufügen", "edit": "Adress-Objekt bearbeiten",
"deleteConfirm": "Adress-Objekt {{name}} wirklich löschen?"
},
"ag": {
"name": "Name", "members": "Mitglieder", "description": "Beschreibung",
"add": "Adress-Gruppe hinzufügen", "edit": "Adress-Gruppe bearbeiten",
"selectMembers": "Adress-Objekte wählen",
"deleteConfirm": "Adress-Gruppe {{name}} wirklich löschen?"
},
"svc": {
"name": "Name", "proto": "Protokoll", "ports": "Ports",
"portStart": "Port (Start)", "portEnd": "Port (Ende)",
"description": "Beschreibung", "builtinHint": "Vordefiniert — nicht editierbar",
"add": "Service hinzufügen", "edit": "Service bearbeiten",
"deleteConfirm": "Service {{name}} wirklich löschen?"
},
"sg": {
"name": "Name", "members": "Mitglieder", "description": "Beschreibung",
"add": "Service-Gruppe hinzufügen", "edit": "Service-Gruppe bearbeiten",
"selectMembers": "Services wählen",
"deleteConfirm": "Service-Gruppe {{name}} wirklich löschen?"
},
"rule": {
"name": "Name", "priority": "Priority", "enabled": "Aktiv", "log": "Logging",
"action": "Aktion", "src": "Quelle", "dst": "Ziel", "service": "Service",
"srcZone": "Quell-Zone", "dstZone": "Ziel-Zone",
"srcKind": "Quell-Typ", "dstKind": "Ziel-Typ",
"object": "Adress-Objekt", "group": "Adress-Gruppe",
"serviceKind": "Service-Typ", "serviceGroup": "Service-Gruppe",
"comment": "Kommentar",
"add": "Regel hinzufügen", "edit": "Regel bearbeiten",
"deleteConfirm": "Diese Regel wirklich löschen?"
},
"nat": {
"name": "Name", "priority": "Priority", "kind": "Typ", "enabled": "Aktiv",
"match": "Match", "target": "Ziel",
"inZone": "Eingangs-Zone", "outZone": "Ausgangs-Zone", "proto": "Protokoll",
"matchSrcCidr": "Source-CIDR (Match)", "matchDstCidr": "Dest-CIDR (Match)",
"matchDstCidrHint": "leer = jede dest-IP (z.B. öffentliche IP der Box)",
"dportStart": "Port (Start)", "dportEnd": "Port (Ende)",
"targetAddr": "Ziel-Adresse", "targetPortStart": "Ziel-Port (Start)", "targetPortEnd": "Ziel-Port (Ende)",
"comment": "Kommentar",
"add": "NAT-Regel hinzufügen", "edit": "NAT-Regel bearbeiten",
"deleteConfirm": "Diese NAT-Regel wirklich löschen?"
}
},
"networks": {
"title": "Netzwerk-Interfaces",
"intro": "Verwalte WAN-, LAN-, VLAN- und Bond-Interfaces. Read-only-Discovery der Kernel-Interfaces oben; deklarierte Konfiguration unten — runtime-Apply via systemd-networkd folgt in einem späteren Release.",

60
management-ui/src/i18n/locales/en/common.json
View File

@@ -19,9 +19,69 @@
"overview": "Overview",
"routing": "Routing",
"network": "Network",
"security": "Security",
"system": "System"
}
},
"fw": {
"title": "Firewall",
"intro": "Fortigate-style: rules built from zones × address objects/groups × services/service groups × action. NAT is separate. Top-down, first-match.",
"tabs": {
"rules": "Rules",
"nat": "NAT",
"addrObj": "Address objects",
"addrGrp": "Address groups",
"services": "Services",
"svcGrp": "Service groups"
},
"ao": {
"name": "Name", "kind": "Kind", "value": "Value", "description": "Description",
"add": "Add address object", "edit": "Edit address object",
"deleteConfirm": "Really delete address object {{name}}?"
},
"ag": {
"name": "Name", "members": "Members", "description": "Description",
"add": "Add address group", "edit": "Edit address group",
"selectMembers": "Select address objects",
"deleteConfirm": "Really delete address group {{name}}?"
},
"svc": {
"name": "Name", "proto": "Protocol", "ports": "Ports",
"portStart": "Port (start)", "portEnd": "Port (end)",
"description": "Description", "builtinHint": "Built-in — not editable",
"add": "Add service", "edit": "Edit service",
"deleteConfirm": "Really delete service {{name}}?"
},
"sg": {
"name": "Name", "members": "Members", "description": "Description",
"add": "Add service group", "edit": "Edit service group",
"selectMembers": "Select services",
"deleteConfirm": "Really delete service group {{name}}?"
},
"rule": {
"name": "Name", "priority": "Priority", "enabled": "Enabled", "log": "Log",
"action": "Action", "src": "Source", "dst": "Destination", "service": "Service",
"srcZone": "Source zone", "dstZone": "Dest. zone",
"srcKind": "Source kind", "dstKind": "Dest. kind",
"object": "Address object", "group": "Address group",
"serviceKind": "Service kind", "serviceGroup": "Service group",
"comment": "Comment",
"add": "Add rule", "edit": "Edit rule",
"deleteConfirm": "Really delete this rule?"
},
"nat": {
"name": "Name", "priority": "Priority", "kind": "Kind", "enabled": "Enabled",
"match": "Match", "target": "Target",
"inZone": "Ingress zone", "outZone": "Egress zone", "proto": "Protocol",
"matchSrcCidr": "Source CIDR (match)", "matchDstCidr": "Dest. CIDR (match)",
"matchDstCidrHint": "empty = any dest IP (e.g. box's public IP)",
"dportStart": "Port (start)", "dportEnd": "Port (end)",
"targetAddr": "Target address", "targetPortStart": "Target port (start)", "targetPortEnd": "Target port (end)",
"comment": "Comment",
"add": "Add NAT rule", "edit": "Edit NAT rule",
"deleteConfirm": "Really delete this NAT rule?"
}
},
"networks": {
"title": "Network interfaces",
"intro": "Manage WAN, LAN, VLAN and bond interfaces. Read-only kernel discovery above; declared configuration below — runtime apply via systemd-networkd lands in a later release.",

126
management-ui/src/pages/Firewall/AddressGroups.tsx Normal file
View File

@@ -0,0 +1,126 @@
import { useState } from 'react'
import { Button, Form, Input, Modal, Popconfirm, Select, Space, 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 } from './types'
interface FormValues {
name: string
description?: string
member_ids?: number[]
}
async function listGroups(): 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 listObjects(): 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 ?? []
}
export default function AddressGroupsTab() {
const { t } = useTranslation()
const qc = useQueryClient()
const { data: groups, isLoading } = useQuery({ queryKey: ['fw', 'addr-grp'], queryFn: listGroups })
const { data: objects } = useQuery({ queryKey: ['fw', 'addr-obj'], queryFn: listObjects })
const objLabel = (id: number) => objects?.find(o => o.id === id)?.name ?? `#${id}`
const [editing, setEditing] = useState<AddressGroup | null>(null)
const [creating, setCreating] = useState(false)
const [form] = Form.useForm<FormValues>()
const create = useMutation({
mutationFn: async (v: FormValues) => { await apiClient.post('/firewall/address-groups', v) },
onSuccess: () => {
message.success(t('common.save')); setCreating(false); form.resetFields()
void qc.invalidateQueries({ queryKey: ['fw', 'addr-grp'] })
},
})
const update = useMutation({
mutationFn: async ({ id, v }: { id: number; v: FormValues }) => { await apiClient.put(`/firewall/address-groups/${id}`, v) },
onSuccess: () => {
message.success(t('common.save')); setEditing(null); form.resetFields()
void qc.invalidateQueries({ queryKey: ['fw', 'addr-grp'] })
},
})
const del = useMutation({
mutationFn: async (id: number) => { await apiClient.delete(`/firewall/address-groups/${id}`) },
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fw', 'addr-grp'] }) },
})
const columns: ColumnsType<AddressGroup> = [
{ title: t('fw.ag.name'), dataIndex: 'name', key: 'name' },
{
title: t('fw.ag.members'), key: 'members',
render: (_, row) => (
<Space wrap>
{(row.member_ids ?? []).map((id) => <Tag key={id}>{objLabel(id)}</Tag>)}
{(row.member_ids?.length ?? 0) === 0 && <span>—</span>}
</Space>
),
},
{ title: t('fw.ag.description'), dataIndex: 'description', key: 'desc', render: (v?: string) => v ?? '—' },
{
title: t('common.edit'), key: 'actions',
render: (_, row) => (
<Space>
<Button size="small" onClick={() => {
setEditing(row)
form.setFieldsValue({ name: row.name, description: row.description ?? undefined, member_ids: row.member_ids ?? [] })
}}>{t('common.edit')}</Button>
<Popconfirm title={t('fw.ag.deleteConfirm', { name: row.name })} 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({ member_ids: [] })
}}>
{t('fw.ag.add')}
</Button>
<Table rowKey="id" loading={isLoading} dataSource={groups ?? []} columns={columns} pagination={false} />
<Modal
title={editing ? t('fw.ag.edit') : t('fw.ag.add')}
open={editing !== null || creating}
onCancel={() => { setEditing(null); setCreating(false) }}
onOk={() => { void form.submit() }}
confirmLoading={create.isPending || update.isPending}
>
<Form
form={form}
layout="vertical"
onFinish={(v) => { if (editing) update.mutate({ id: editing.id, v }); else create.mutate(v) }}
>
<Form.Item label={t('fw.ag.name')} name="name" rules={[{ required: true }]}>
<Input placeholder="OfficeNetwork" />
</Form.Item>
<Form.Item label={t('fw.ag.members')} name="member_ids">
<Select
mode="multiple"
showSearch
optionFilterProp="label"
placeholder={t('fw.ag.selectMembers')}
options={(objects ?? []).map(o => ({ value: o.id, label: `${o.name} (${o.kind}: ${o.value})` }))}
/>
</Form.Item>
<Form.Item label={t('fw.ag.description')} name="description">
<Input />
</Form.Item>
</Form>
</Modal>
</>
)
}

120
management-ui/src/pages/Firewall/AddressObjects.tsx Normal file
View File

@@ -0,0 +1,120 @@
import { useState } from 'react'
import { Button, Form, Input, Modal, Popconfirm, Select, Space, 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 { AddressObject } from './types'
interface FormValues {
name: string
kind: AddressObject['kind']
value: string
description?: string
}
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 ?? []
}
const KIND_PLACEHOLDER: Record<AddressObject['kind'], string> = {
host: '192.0.2.10',
network: '10.0.0.0/24',
range: '10.0.0.10-10.0.0.50',
fqdn: 'webhook.example.com',
}
export default function AddressObjectsTab() {
const { t } = useTranslation()
const qc = useQueryClient()
const { data, isLoading } = useQuery({ queryKey: ['fw', 'addr-obj'], queryFn: listAO })
const [editing, setEditing] = useState<AddressObject | null>(null)
const [creating, setCreating] = useState(false)
const [form] = Form.useForm<FormValues>()
const create = useMutation({
mutationFn: async (v: FormValues) => { await apiClient.post('/firewall/address-objects', v) },
onSuccess: () => {
message.success(t('common.save')); setCreating(false); form.resetFields()
void qc.invalidateQueries({ queryKey: ['fw', 'addr-obj'] })
},
})
const update = useMutation({
mutationFn: async ({ id, v }: { id: number; v: FormValues }) => { await apiClient.put(`/firewall/address-objects/${id}`, v) },
onSuccess: () => {
message.success(t('common.save')); setEditing(null); form.resetFields()
void qc.invalidateQueries({ queryKey: ['fw', 'addr-obj'] })
},
})
const del = useMutation({
mutationFn: async (id: number) => { await apiClient.delete(`/firewall/address-objects/${id}`) },
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fw', 'addr-obj'] }) },
})
const columns: ColumnsType<AddressObject> = [
{ title: t('fw.ao.name'), dataIndex: 'name', key: 'name' },
{ title: t('fw.ao.kind'), dataIndex: 'kind', key: 'kind', render: (k: string) => <Tag>{k}</Tag> },
{ title: t('fw.ao.value'), dataIndex: 'value', key: 'value', render: (v: string) => <code>{v}</code> },
{ title: t('fw.ao.description'), dataIndex: 'description', key: 'desc', render: (v?: string) => v ?? '—' },
{
title: t('common.edit'), key: 'actions',
render: (_, row) => (
<Space>
<Button size="small" onClick={() => {
setEditing(row)
form.setFieldsValue({ name: row.name, kind: row.kind, value: row.value, description: row.description ?? undefined })
}}>{t('common.edit')}</Button>
<Popconfirm title={t('fw.ao.deleteConfirm', { name: row.name })} 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({ kind: 'host' })
}}>
{t('fw.ao.add')}
</Button>
<Table rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} pagination={false} />
<Modal
title={editing ? t('fw.ao.edit') : t('fw.ao.add')}
open={editing !== null || creating}
onCancel={() => { setEditing(null); setCreating(false) }}
onOk={() => { void form.submit() }}
confirmLoading={create.isPending || update.isPending}
>
<Form
form={form}
layout="vertical"
onFinish={(v) => { if (editing) update.mutate({ id: editing.id, v }); else create.mutate(v) }}
>
<Form.Item label={t('fw.ao.name')} name="name" rules={[{ required: true }]}>
<Input placeholder="Office_IPs" />
</Form.Item>
<Form.Item label={t('fw.ao.kind')} name="kind" rules={[{ required: true }]}>
<Select options={(['host','network','range','fqdn'] as const).map(k => ({ value: k, label: k }))} />
</Form.Item>
<Form.Item noStyle shouldUpdate={(p, c) => p.kind !== c.kind}>
{({ getFieldValue }) => (
<Form.Item label={t('fw.ao.value')} name="value" rules={[{ required: true }]}>
<Input placeholder={KIND_PLACEHOLDER[(getFieldValue('kind') as AddressObject['kind']) ?? 'host']} />
</Form.Item>
)}
</Form.Item>
<Form.Item label={t('fw.ao.description')} name="description">
<Input />
</Form.Item>
</Form>
</Modal>
</>
)
}

225
management-ui/src/pages/Firewall/NATRules.tsx Normal file
View 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>
</>
)
}

299
management-ui/src/pages/Firewall/Rules.tsx Normal file
View 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>
</>
)
}

129
management-ui/src/pages/Firewall/ServiceGroups.tsx Normal file
View File

@@ -0,0 +1,129 @@
import { useState } from 'react'
import { Button, Form, Input, Modal, Popconfirm, Select, Space, 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 { FwService, ServiceGroup } from './types'
interface FormValues {
name: string
description?: string
member_ids?: number[]
}
async function listGroups(): 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 ?? []
}
async function listServices(): Promise<FwService[]> {
const r = await apiClient.get('/firewall/services')
if (!isEnvelope(r.data)) return []
return (r.data.data as { services?: FwService[] }).services ?? []
}
export default function ServiceGroupsTab() {
const { t } = useTranslation()
const qc = useQueryClient()
const { data: groups, isLoading } = useQuery({ queryKey: ['fw', 'svc-grp'], queryFn: listGroups })
const { data: services } = useQuery({ queryKey: ['fw', 'svc'], queryFn: listServices })
const svcLabel = (id: number) => services?.find(s => s.id === id)?.name ?? `#${id}`
const [editing, setEditing] = useState<ServiceGroup | null>(null)
const [creating, setCreating] = useState(false)
const [form] = Form.useForm<FormValues>()
const create = useMutation({
mutationFn: async (v: FormValues) => { await apiClient.post('/firewall/service-groups', v) },
onSuccess: () => {
message.success(t('common.save')); setCreating(false); form.resetFields()
void qc.invalidateQueries({ queryKey: ['fw', 'svc-grp'] })
},
})
const update = useMutation({
mutationFn: async ({ id, v }: { id: number; v: FormValues }) => { await apiClient.put(`/firewall/service-groups/${id}`, v) },
onSuccess: () => {
message.success(t('common.save')); setEditing(null); form.resetFields()
void qc.invalidateQueries({ queryKey: ['fw', 'svc-grp'] })
},
})
const del = useMutation({
mutationFn: async (id: number) => { await apiClient.delete(`/firewall/service-groups/${id}`) },
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fw', 'svc-grp'] }) },
})
const columns: ColumnsType<ServiceGroup> = [
{ title: t('fw.sg.name'), dataIndex: 'name', key: 'name' },
{
title: t('fw.sg.members'), key: 'members',
render: (_, row) => (
<Space wrap>
{(row.member_ids ?? []).map((id) => <Tag key={id}>{svcLabel(id)}</Tag>)}
{(row.member_ids?.length ?? 0) === 0 && <span>—</span>}
</Space>
),
},
{ title: t('fw.sg.description'), dataIndex: 'description', key: 'desc', render: (v?: string) => v ?? '—' },
{
title: t('common.edit'), key: 'actions',
render: (_, row) => (
<Space>
<Button size="small" onClick={() => {
setEditing(row)
form.setFieldsValue({ name: row.name, description: row.description ?? undefined, member_ids: row.member_ids ?? [] })
}}>{t('common.edit')}</Button>
<Popconfirm title={t('fw.sg.deleteConfirm', { name: row.name })} 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({ member_ids: [] })
}}>
{t('fw.sg.add')}
</Button>
<Table rowKey="id" loading={isLoading} dataSource={groups ?? []} columns={columns} pagination={false} />
<Modal
title={editing ? t('fw.sg.edit') : t('fw.sg.add')}
open={editing !== null || creating}
onCancel={() => { setEditing(null); setCreating(false) }}
onOk={() => { void form.submit() }}
confirmLoading={create.isPending || update.isPending}
>
<Form
form={form}
layout="vertical"
onFinish={(v) => { if (editing) update.mutate({ id: editing.id, v }); else create.mutate(v) }}
>
<Form.Item label={t('fw.sg.name')} name="name" rules={[{ required: true }]}>
<Input placeholder="Web-Stack" />
</Form.Item>
<Form.Item label={t('fw.sg.members')} name="member_ids">
<Select
mode="multiple"
showSearch
optionFilterProp="label"
placeholder={t('fw.sg.selectMembers')}
options={(services ?? []).map(s => ({
value: s.id,
label: `${s.name} (${s.proto}${s.port_start ? ' '+s.port_start : ''})`,
}))}
/>
</Form.Item>
<Form.Item label={t('fw.sg.description')} name="description">
<Input />
</Form.Item>
</Form>
</Modal>
</>
)
}

144
management-ui/src/pages/Firewall/Services.tsx Normal file
View File

@@ -0,0 +1,144 @@
import { useState } from 'react'
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Table, Tag, Tooltip, 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 { FwService } from './types'
interface FormValues {
name: string
proto: FwService['proto']
port_start?: number
port_end?: number
description?: string
}
async function listServices(): Promise<FwService[]> {
const r = await apiClient.get('/firewall/services')
if (!isEnvelope(r.data)) return []
return (r.data.data as { services?: FwService[] }).services ?? []
}
export default function ServicesTab() {
const { t } = useTranslation()
const qc = useQueryClient()
const { data, isLoading } = useQuery({ queryKey: ['fw', 'svc'], queryFn: listServices })
const [editing, setEditing] = useState<FwService | null>(null)
const [creating, setCreating] = useState(false)
const [form] = Form.useForm<FormValues>()
const create = useMutation({
mutationFn: async (v: FormValues) => { await apiClient.post('/firewall/services', v) },
onSuccess: () => {
message.success(t('common.save')); setCreating(false); form.resetFields()
void qc.invalidateQueries({ queryKey: ['fw', 'svc'] })
},
})
const update = useMutation({
mutationFn: async ({ id, v }: { id: number; v: FormValues }) => { await apiClient.put(`/firewall/services/${id}`, v) },
onSuccess: () => {
message.success(t('common.save')); setEditing(null); form.resetFields()
void qc.invalidateQueries({ queryKey: ['fw', 'svc'] })
},
})
const del = useMutation({
mutationFn: async (id: number) => { await apiClient.delete(`/firewall/services/${id}`) },
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fw', 'svc'] }) },
})
const columns: ColumnsType<FwService> = [
{
title: t('fw.svc.name'), dataIndex: 'name', key: 'name',
render: (s: string, row) => <Space>{s}{row.builtin && <Tooltip title={t('fw.svc.builtinHint')}><Tag color="default">builtin</Tag></Tooltip>}</Space>,
},
{ title: t('fw.svc.proto'), dataIndex: 'proto', key: 'proto', render: (p: string) => <Tag>{p}</Tag> },
{
title: t('fw.svc.ports'), key: 'ports',
render: (_, row) => row.proto === 'tcp' || row.proto === 'udp'
? <code>{row.port_start === row.port_end ? row.port_start : `${row.port_start}-${row.port_end}`}</code>
: '—',
},
{ title: t('fw.svc.description'), dataIndex: 'description', key: 'desc', render: (v?: string) => v ?? '—' },
{
title: t('common.edit'), key: 'actions',
render: (_, row) => (
<Space>
<Button size="small" disabled={row.builtin} onClick={() => {
setEditing(row)
form.setFieldsValue({
name: row.name, proto: row.proto,
port_start: row.port_start ?? undefined,
port_end: row.port_end ?? undefined,
description: row.description ?? undefined,
})
}}>{t('common.edit')}</Button>
<Popconfirm
title={t('fw.svc.deleteConfirm', { name: row.name })}
onConfirm={() => del.mutate(row.id)}
disabled={row.builtin}
>
<Button size="small" danger disabled={row.builtin}>{t('common.delete')}</Button>
</Popconfirm>
</Space>
),
},
]
return (
<>
<Button type="primary" style={{ marginBottom: 16 }} onClick={() => {
setCreating(true); form.resetFields()
form.setFieldsValue({ proto: 'tcp' })
}}>
{t('fw.svc.add')}
</Button>
<Table rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} pagination={false} />
<Modal
title={editing ? t('fw.svc.edit') : t('fw.svc.add')}
open={editing !== null || creating}
onCancel={() => { setEditing(null); setCreating(false) }}
onOk={() => { void form.submit() }}
confirmLoading={create.isPending || update.isPending}
>
<Form
form={form}
layout="vertical"
onFinish={(v) => {
// For non-tcp/udp protocols, leave ports empty
const cleaned = (v.proto === 'tcp' || v.proto === 'udp') ? v : { ...v, port_start: undefined, port_end: undefined }
if (editing) update.mutate({ id: editing.id, v: cleaned }); else create.mutate(cleaned)
}}
>
<Form.Item label={t('fw.svc.name')} name="name" rules={[{ required: true }]}>
<Input placeholder="My-Custom-App" />
</Form.Item>
<Form.Item label={t('fw.svc.proto')} name="proto" rules={[{ required: true }]}>
<Select options={(['tcp','udp','icmp','icmpv6','any'] as const).map(p => ({ value: p, label: p }))} />
</Form.Item>
<Form.Item noStyle shouldUpdate={(p, c) => p.proto !== c.proto}>
{({ getFieldValue }) => {
const proto = getFieldValue('proto') as FwService['proto']
if (proto !== 'tcp' && proto !== 'udp') return null
return (
<Space>
<Form.Item label={t('fw.svc.portStart')} name="port_start" rules={[{ required: true }]}>
<InputNumber min={1} max={65535} />
</Form.Item>
<Form.Item label={t('fw.svc.portEnd')} name="port_end" rules={[{ required: true }]}>
<InputNumber min={1} max={65535} />
</Form.Item>
</Space>
)
}}
</Form.Item>
<Form.Item label={t('fw.svc.description')} name="description">
<Input />
</Form.Item>
</Form>
</Modal>
</>
)
}

30
management-ui/src/pages/Firewall/index.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { Tabs, Typography } from 'antd'
import { useTranslation } from 'react-i18next'
import AddressObjectsTab from './AddressObjects'
import AddressGroupsTab from './AddressGroups'
import ServicesTab from './Services'
import ServiceGroupsTab from './ServiceGroups'
import RulesTab from './Rules'
import NATRulesTab from './NATRules'
export default function FirewallPage() {
const { t } = useTranslation()
const tabs = [
{ key: 'rules', label: t('fw.tabs.rules'), children: <RulesTab /> },
{ key: 'nat', label: t('fw.tabs.nat'), children: <NATRulesTab /> },
{ key: 'addrObj', label: t('fw.tabs.addrObj'), children: <AddressObjectsTab /> },
{ key: 'addrGrp', label: t('fw.tabs.addrGrp'), children: <AddressGroupsTab /> },
{ key: 'services', label: t('fw.tabs.services'), children: <ServicesTab /> },
{ key: 'svcGrp', label: t('fw.tabs.svcGrp'), children: <ServiceGroupsTab /> },
]
return (
<div>
<Typography.Title level={3}>{t('fw.title')}</Typography.Title>
<Typography.Paragraph type="secondary">{t('fw.intro')}</Typography.Paragraph>
<Tabs items={tabs} defaultActiveKey="rules" />
</div>
)
}

80
management-ui/src/pages/Firewall/types.ts Normal file
View File

@@ -0,0 +1,80 @@
// Shared types for the Firewall page tabs.
export interface AddressObject {
id: number
name: string
kind: 'host' | 'network' | 'range' | 'fqdn'
value: string
description?: string | null
created_at: string
updated_at: string
}
export interface AddressGroup {
id: number
name: string
description?: string | null
member_ids?: number[]
created_at: string
updated_at: string
}
export interface FwService {
id: number
name: string
proto: 'tcp' | 'udp' | 'icmp' | 'icmpv6' | 'any'
port_start?: number | null
port_end?: number | null
builtin: boolean
description?: string | null
}
export interface ServiceGroup {
id: number
name: string
description?: string | null
member_ids?: number[]
}
export type Zone = 'wan' | 'lan' | 'dmz' | 'mgmt' | 'cluster' | 'any'
export interface FwRule {
id: number
name?: string | null
priority: number
enabled: boolean
action: 'accept' | 'drop' | 'reject'
src_zone: Zone
src_address_object_id?: number | null
src_address_group_id?: number | null
src_cidr?: string | null
dst_zone: Zone
dst_address_object_id?: number | null
dst_address_group_id?: number | null
dst_cidr?: string | null
service_object_id?: number | null
service_group_id?: number | null
log: boolean
comment?: string | null
}
export interface NATRule {
id: number
name?: string | null
priority: number
enabled: boolean
kind: 'dnat' | 'snat' | 'masquerade'
in_zone?: string | null
out_zone?: string | null
proto?: 'tcp' | 'udp' | 'any' | null
match_src_cidr?: string | null
match_dst_cidr?: string | null
match_dport_start?: number | null
match_dport_end?: number | null
target_addr?: string | null
target_port_start?: number | null
target_port_end?: number | null
comment?: string | null
}
export const ZONES: Zone[] = ['any', 'wan', 'lan', 'dmz', 'mgmt', 'cluster']