feat: Zonen als first-class Entity + Domain↔Backend-Verknüpfung sichtbar

* Migration 0012: firewall_zones (id, name UNIQUE, description, builtin),
  Seed wan/lan/dmz/mgmt/cluster als builtin. CHECK-Constraints auf
  network_interfaces.role + firewall_rules.{src,dst}_zone +
  firewall_nat_rules.{in,out}_zone gedroppt — Validation lebt jetzt
  app-side (Handler prüft Existenz in firewall_zones).
* Backend: firewall.ZonesRepo (CRUD + Exists + References-Lookup),
  /api/v1/firewall/zones, builtin geschützt (Name nicht änderbar,
  Delete blockiert), Rename eines Custom-Zone aktuell ohne Cascade
  (Handler-Sorge bei Rules/NAT/Networks).
* Handler-Validation in CreateRule/UpdateRule/CreateNAT/UpdateNAT +
  NetworksHandler: Zone-Existence-Check pro Mutation, 400 bei Tippfehler.
* Frontend: Firewall-Tab "Zonen" (CRUD mit builtin-Schutz). Networks-
  Form lädt Rollen aus /firewall/zones (statt hardcoded Liste); Rules-
  und NAT-Forms ziehen die Zone-Auswahl ebenfalls aus der API.
* Domain-Form bekommt Primary-Backend-Picker (Field war im Modell,
  fehlte im UI). Backends-Tabelle zeigt umgekehrt welche Domains
  darauf zeigen — bidirektionale Sicht ohne Schemaänderung.
* HAProxy-Renderer: safeID-FuncMap escaped Server-Namen mit Whitespace
  ("Control Master 1" → "Control_Master_1"). Vorher ist haproxy beim
  Reload an Spaces im Backend-Namen kaputt gegangen.
* Version 1.0.3 → 1.0.6.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

management-ui/src/pages/Firewall/NATRules.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
 import DataTable from '../../components/DataTable'
 
 import apiClient, { isEnvelope } from '../../api/client'
-import type { NATRule } from './types'
+import type { FwZone, NATRule } from './types'
 
 interface FormValues {
   name?: string
@@ -26,13 +26,16 @@ interface FormValues {
   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 ?? []
 }
+async function listZones(): Promise<FwZone[]> {
+  const r = await apiClient.get('/firewall/zones')
+  if (!isEnvelope(r.data)) return []
+  return (r.data.data as { zones?: FwZone[] }).zones ?? []
+}
 
 const KIND_COLORS: Record<NATRule['kind'], string> = {
   dnat: 'blue',
@@ -44,6 +47,14 @@ export default function NATRulesTab() {
   const { t } = useTranslation()
   const qc = useQueryClient()
   const { data, isLoading } = useQuery({ queryKey: ['fw', 'nat'], queryFn: listNAT })
+  const { data: zones } = useQuery({ queryKey: ['fw', 'zones'], queryFn: listZones })
+
+  // NAT zones don't accept "any" — the renderer needs a concrete
+  // iface group to attach DNAT/SNAT/masq chains to. Fallback to the
+  // seed list while loading.
+  const zoneOptions: string[] = zones && zones.length > 0
+    ? zones.map((z) => z.name)
+    : ['wan', 'lan', 'dmz', 'mgmt', 'cluster']
 
   const [editing, setEditing] = useState<NATRule | null>(null)
   const [creating, setCreating] = useState(false)
@@ -165,12 +176,12 @@ export default function NATRulesTab() {
                 <>
                   {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 }))} />
+                      <Select options={zoneOptions.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 }))} />
+                      <Select options={zoneOptions.map(z => ({ value: z, label: z }))} />
                     </Form.Item>
                   )}
                   <Form.Item label={t('fw.nat.proto')} name="proto">

management-ui/src/pages/Firewall/Rules.tsx

@@ -7,8 +7,8 @@ import DataTable from '../../components/DataTable'
 import SystemRulesCard from './SystemRules'
 
 import apiClient, { isEnvelope } from '../../api/client'
-import type { AddressGroup, AddressObject, FwRule, FwService, ServiceGroup, Zone } from './types'
-import { ZONES } from './types'
+import type { AddressGroup, AddressObject, FwRule, FwService, FwZone, ServiceGroup, Zone } from './types'
+import { ZONES_FALLBACK } from './types'
 
 interface FormValues {
   name?: string
@@ -63,6 +63,11 @@ async function listSG(): Promise<ServiceGroup[]> {
   if (!isEnvelope(r.data)) return []
   return (r.data.data as { service_groups?: ServiceGroup[] }).service_groups ?? []
 }
+async function listZones(): Promise<FwZone[]> {
+  const r = await apiClient.get('/firewall/zones')
+  if (!isEnvelope(r.data)) return []
+  return (r.data.data as { zones?: FwZone[] }).zones ?? []
+}
 
 function buildPayload(v: FormValues) {
   const out: Partial<FwRule> = {
@@ -91,6 +96,13 @@ export default function RulesTab() {
   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 { data: zones } = useQuery({ queryKey: ['fw', 'zones'], queryFn: listZones })
+
+  // Picker options: 'any' (special) + every zone the operator has
+  // declared. Fallback to the seed list while the query is loading.
+  const zoneOptions: Zone[] = zones && zones.length > 0
+    ? ['any', ...zones.map((z) => z.name)]
+    : ZONES_FALLBACK
 
   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}`
@@ -234,7 +246,7 @@ export default function RulesTab() {
           {(['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 }))} />
+                <Select style={{ width: 140 }} options={zoneOptions.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 }))} />

management-ui/src/pages/Firewall/Zones.tsx

@@ -0,0 +1,116 @@
+import { useState } from 'react'
+import { Button, Form, Input, Modal, Popconfirm, Space, 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 DataTable from '../../components/DataTable'
+import type { FwZone } from './types'
+
+interface FormValues {
+  name: string
+  description?: string
+}
+
+async function listZones(): Promise<FwZone[]> {
+  const r = await apiClient.get('/firewall/zones')
+  if (!isEnvelope(r.data)) return []
+  return (r.data.data as { zones?: FwZone[] }).zones ?? []
+}
+
+export default function ZonesTab() {
+  const { t } = useTranslation()
+  const qc = useQueryClient()
+  const [editing, setEditing] = useState<FwZone | null>(null)
+  const [creating, setCreating] = useState(false)
+  const [form] = Form.useForm<FormValues>()
+
+  const { data, isLoading } = useQuery({ queryKey: ['fw-zones'], queryFn: listZones })
+
+  const upsert = useMutation({
+    mutationFn: async (vals: FormValues) => {
+      if (editing) return (await apiClient.put(`/firewall/zones/${editing.id}`, vals)).data
+      return (await apiClient.post('/firewall/zones', vals)).data
+    },
+    onSuccess: () => {
+      message.success(t('common.save'))
+      setEditing(null); setCreating(false); form.resetFields()
+      void qc.invalidateQueries({ queryKey: ['fw-zones'] })
+    },
+    onError: (e: Error) => message.error(e.message),
+  })
+  const del = useMutation({
+    mutationFn: async (id: number) => { await apiClient.delete(`/firewall/zones/${id}`) },
+    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fw-zones'] }) },
+    onError: (e: Error) => message.error(e.message),
+  })
+
+  const columns: ColumnsType<FwZone> = [
+    { title: t('fw.zone.name'), dataIndex: 'name', key: 'name',
+      render: (s: string, row) => row.builtin
+        ? <Space><code>{s}</code><Tag color="blue">{t('fw.zone.builtin')}</Tag></Space>
+        : <code>{s}</code>,
+    },
+    { title: t('fw.zone.description'), dataIndex: 'description', key: 'description',
+      render: (v?: string | null) => v ?? '—' },
+    {
+      title: t('common.actions'), key: 'actions',
+      render: (_, row) => (
+        <Space>
+          <Button size="small" onClick={() => {
+            setEditing(row)
+            form.setFieldsValue({ name: row.name, description: row.description ?? undefined })
+          }}>{t('common.edit')}</Button>
+          {row.builtin
+            ? <Tooltip title={t('fw.zone.builtinHint')}>
+                <Button size="small" danger disabled>{t('common.delete')}</Button>
+              </Tooltip>
+            : <Popconfirm
+                title={t('fw.zone.deleteConfirm', { name: row.name })}
+                onConfirm={() => del.mutate(row.id)}
+              >
+                <Button size="small" danger>{t('common.delete')}</Button>
+              </Popconfirm>}
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <>
+      <Button type="primary" className="mb-16" onClick={() => {
+        setCreating(true); form.resetFields()
+      }}>
+        {t('fw.zone.add')}
+      </Button>
+      <DataTable rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns}  />
+
+      <Modal
+        title={editing ? t('fw.zone.edit') : t('fw.zone.add')}
+        open={editing !== null || creating}
+        onCancel={() => { setEditing(null); setCreating(false); form.resetFields() }}
+        onOk={() => { void form.submit() }}
+        confirmLoading={upsert.isPending}
+        width={520}
+      >
+        <Form form={form} layout="vertical" onFinish={(v) => upsert.mutate(v)}>
+          <Form.Item
+            label={t('fw.zone.name')}
+            name="name"
+            rules={[
+              { required: true },
+              { pattern: /^[a-z][a-z0-9_-]{0,31}$/, message: t('fw.zone.namePattern') },
+            ]}
+            extra={editing?.builtin ? t('fw.zone.builtinNameLocked') : undefined}
+          >
+            <Input disabled={editing?.builtin} />
+          </Form.Item>
+          <Form.Item label={t('fw.zone.description')} name="description">
+            <Input.TextArea rows={2} />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </>
+  )
+}

management-ui/src/pages/Firewall/index.tsx

@@ -7,6 +7,7 @@ import ServicesTab from './Services'
 import ServiceGroupsTab from './ServiceGroups'
 import RulesTab from './Rules'
 import NATRulesTab from './NATRules'
+import ZonesTab from './Zones'
 
 export default function FirewallPage() {
   const { t } = useTranslation()
@@ -14,6 +15,7 @@ export default function FirewallPage() {
   const tabs = [
     { key: 'rules',    label: t('fw.tabs.rules'),    children: <RulesTab /> },
     { key: 'nat',      label: t('fw.tabs.nat'),      children: <NATRulesTab /> },
+    { key: 'zones',    label: t('fw.tabs.zones'),    children: <ZonesTab /> },
     { 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 /> },

management-ui/src/pages/Firewall/types.ts

@@ -36,7 +36,20 @@ export interface ServiceGroup {
   member_ids?: number[]
 }
 
-export type Zone = 'wan' | 'lan' | 'dmz' | 'mgmt' | 'cluster' | 'any'
+// Zone is now a free-form string — operator-managed via the Zones
+// tab. 'any' is the special value the firewall_rules layer accepts
+// to mean "match any zone". The list at runtime is loaded from
+// /api/v1/firewall/zones.
+export type Zone = string
+
+export interface FwZone {
+  id: number
+  name: string
+  description?: string | null
+  builtin: boolean
+  created_at: string
+  updated_at: string
+}
 
 export interface FwRule {
   id: number
@@ -77,4 +90,7 @@ export interface NATRule {
   comment?: string | null
 }
 
-export const ZONES: Zone[] = ['any', 'wan', 'lan', 'dmz', 'mgmt', 'cluster']
+// Fallback list — used only while /firewall/zones hasn't loaded
+// yet (initial render of the rule modal). Real list comes from the
+// API.
+export const ZONES_FALLBACK: Zone[] = ['any', 'wan', 'lan', 'dmz', 'mgmt', 'cluster']