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>
2026-05-10 11:44:00 +02:00
parent c9dd0b4cb1
commit e2bdce9271
12 changed files with 1283 additions and 1 deletions
--- a/management-ui/src/pages/Firewall/Services.tsx
+++ b/management-ui/src/pages/Firewall/Services.tsx
@@ -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>
+    </>
+  )
+}