feat(backends): Pool-Modell — Backend = Pool, N Server pro Backend

Migration 0016: backend_servers (id, backend_id, name, address, port, weight, backup, active) + backends.lb_algorithm. Daten-Migration kopiert bestehende backends.address/port als ersten Server, dann DROP COLUMN. HAProxy-Renderer: rendert pro Backend einen Block mit `balance <algo>` + N `server`-Zeilen (weight, backup-Flag, optional check inter 5s). LB-Algorithmen: roundrobin / leastconn / source. REST: /backends/:id/servers (GET/POST), /backend-servers/:id (PUT/DELETE). Re-rendert HAProxy nach jeder Server-Mutation. UI: address/port aus Backend-Form raus, lb_algorithm-Select rein. Server verwaltet ein expandable Sub-Panel pro Backend-Row (Tabelle + Add/Edit/ Delete-Modal). Domain-Attachment-Multi-Select bleibt. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 20:55:47 +02:00
parent 05850934fb
commit 8aac24b566
16 changed files with 784 additions and 85 deletions
--- a/management-ui/src/components/Layout/Sidebar.tsx
+++ b/management-ui/src/components/Layout/Sidebar.tsx
@@ -77,7 +77,7 @@ const NAV: NavSection[] = [
  },
 ]

-const VERSION = '1.0.48'
+const VERSION = '1.0.49'

 export default function Sidebar({ isOpen, onClose }: SidebarProps) {
  const { t } = useTranslation()
--- a/management-ui/src/i18n/locales/de/common.json
+++ b/management-ui/src/i18n/locales/de/common.json
@@ -202,13 +202,11 @@
  },
  "backends": {
    "title": "Backends",
-    "intro": "Upstream-Server, an die HAProxy weiterroutet. Health-Check-Pfad optional aktiviert TCP+HTTP-Probes alle 5s.",
-    "addBackend": "Backend hinzufügen",
-    "editBackend": "Backend bearbeiten",
+    "intro": "Upstream-Pools (Backend = N Server). HAProxy verteilt laut LB-Algorithmus; Health-Check-Pfad aktiviert HTTP-Probes alle 5s pro Server.",
+    "addBackend": "Backend-Pool hinzufügen",
+    "editBackend": "Backend-Pool bearbeiten",
    "name": "Name",
    "scheme": "Schema",
-    "address": "Adresse",
-    "port": "Port",
    "target": "Ziel",
    "healthCheck": "Health-Check-Pfad",
    "active": "Aktiv",
@@ -217,8 +215,30 @@
    "attachedDomains": "Domains",
    "attachedDomainsHint": "Domains, die dieses Backend als Primary verwenden. Auswahl umkonfiguriert die Domains direkt — gleiche Quelle wie der Backend-Picker im Domain-Modal.",
    "selectDomains": "Domains wählen",
+    "lbAlgo": "Load-Balancing",
+    "lbAlgoHint": "roundrobin = gleichmäßig, leastconn = an den Server mit wenigsten Verbindungen, source = sticky per Client-IP (für stateful Apps ohne shared session).",
+    "servers": "Server",
+    "noServers": "kein Server",
+    "nServers": "{{n}} Server",
+    "serversIn": "Server in „{{name}}\"",
+    "serverHintCreate": "Speichern legt nur den Pool an. Server kommen im nächsten Schritt — Pool öffnen → „Server hinzufügen\".",
    "actions": "Aktionen",
-    "deleteConfirm": "Backend {{name}} wirklich löschen?"
+    "deleteConfirm": "Backend-Pool {{name}} wirklich löschen? Alle Server im Pool werden mitentfernt.",
+    "server": {
+      "intro": "Upstream-Server im Pool. Reihenfolge in HAProxy egal — der LB-Algorithmus entscheidet.",
+      "add": "Server hinzufügen",
+      "edit": "Server bearbeiten",
+      "name": "Server-Name",
+      "address": "Adresse",
+      "port": "Port",
+      "target": "Endpoint",
+      "weight": "Gewicht",
+      "weightHint": "0–256. Höher = mehr Traffic. 100 = Standard.",
+      "backup": "Backup",
+      "backupHint": "Backup-Server werden nur angesprochen, wenn alle primären Server (non-backup) down sind.",
+      "empty": "Noch keine Server im Pool. „Server hinzufügen\" startet damit.",
+      "deleteConfirm": "Server {{name}} wirklich löschen?"
+    }
  },
  "routing": {
    "title": "Routing-Regeln",
--- a/management-ui/src/i18n/locales/en/common.json
+++ b/management-ui/src/i18n/locales/en/common.json
@@ -202,13 +202,11 @@
  },
  "backends": {
    "title": "Backends",
-    "intro": "Upstream servers HAProxy proxies to. Optional health-check path enables TCP + HTTP probes every 5s.",
-    "addBackend": "Add backend",
-    "editBackend": "Edit backend",
+    "intro": "Upstream pools (one backend = N servers). HAProxy balances load by the chosen algorithm; health-check path enables HTTP probes every 5s per server.",
+    "addBackend": "Add backend pool",
+    "editBackend": "Edit backend pool",
    "name": "Name",
    "scheme": "Scheme",
-    "address": "Address",
-    "port": "Port",
    "target": "Target",
    "healthCheck": "Health check path",
    "active": "Active",
@@ -217,8 +215,30 @@
    "attachedDomains": "Domains",
    "attachedDomainsHint": "Domains that use this backend as their primary. Selecting domains here reconfigures them directly — same source of truth as the Domain modal's backend picker.",
    "selectDomains": "Select domains",
+    "lbAlgo": "Load balancing",
+    "lbAlgoHint": "roundrobin = evenly, leastconn = pick the server with fewest active connections, source = sticky per client-IP hash (for stateful apps without shared session).",
+    "servers": "Servers",
+    "noServers": "no server",
+    "nServers": "{{n}} servers",
+    "serversIn": "Servers in “{{name}}”",
+    "serverHintCreate": "Saving creates the pool only. Add servers in the next step — open the pool and click “Add server”.",
    "actions": "Actions",
-    "deleteConfirm": "Really delete backend {{name}}?"
+    "deleteConfirm": "Really delete backend pool {{name}}? All servers in the pool will be removed too.",
+    "server": {
+      "intro": "Upstream servers in this pool. Order doesn't matter — the LB algorithm decides.",
+      "add": "Add server",
+      "edit": "Edit server",
+      "name": "Server name",
+      "address": "Address",
+      "port": "Port",
+      "target": "Endpoint",
+      "weight": "Weight",
+      "weightHint": "0–256. Higher = more traffic. 100 = default.",
+      "backup": "Backup",
+      "backupHint": "Backup servers receive traffic only when every primary (non-backup) server is down.",
+      "empty": "No servers in the pool yet. Click “Add server” to get started.",
+      "deleteConfirm": "Really delete server {{name}}?"
+    }
  },
  "routing": {
    "title": "Routing rules",
--- a/management-ui/src/pages/Backends/index.tsx
+++ b/management-ui/src/pages/Backends/index.tsx
@@ -1,5 +1,8 @@
 import { useState } from 'react'
-import { Button, Form, Input, InputNumber, Modal, Select, Space, Switch, Tag, message } from 'antd'
+import {
+  Alert, Button, Card, Form, Input, InputNumber, Modal, Popconfirm,
+  Select, Space, Switch, Table, Tag, Typography, message,
+} from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { DatabaseOutlined, PlusOutlined } from '@ant-design/icons'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
@@ -11,39 +14,60 @@ import StatusDot from '../../components/StatusDot'

 import apiClient, { isEnvelope } from '../../api/client'

+const { Text } = Typography
+
 interface Backend {
  id: number
  name: string
  scheme: string
-  address: string
-  port: number
  health_check_path?: string | null
+  lb_algorithm: 'roundrobin' | 'leastconn' | 'source'
  active: boolean
  created_at: string
  updated_at: string
 }

+interface BackendServer {
+  id: number
+  backend_id: number
+  name: string
+  address: string
+  port: number
+  weight: number
+  backup: boolean
+  active: boolean
+}
+
 interface BackendFormValues {
  name: string
  scheme: 'http' | 'https'
-  address: string
-  port: number
  health_check_path?: string
+  lb_algorithm: 'roundrobin' | 'leastconn' | 'source'
  active: boolean
  domain_ids?: number[]
 }

+interface ServerFormValues {
+  name: string
+  address: string
+  port: number
+  weight: number
+  backup: boolean
+  active: boolean
+}
+
 async function listBackends(): Promise<Backend[]> {
  const r = await apiClient.get('/backends')
  if (!isEnvelope(r.data)) return []
-  const payload = r.data.data as { backends?: Backend[] }
-  return payload.backends ?? []
+  return (r.data.data as { backends?: Backend[] }).backends ?? []
+}
+
+async function listServers(backendID: number): Promise<BackendServer[]> {
+  const r = await apiClient.get(`/backends/${backendID}/servers`)
+  if (!isEnvelope(r.data)) return []
+  return (r.data.data as { servers?: BackendServer[] }).servers ?? []
 }

-// DomainFull mirrors the API contract; we need the full body to PUT
-// the domain back when re-attaching/detaching it (the handler does
-// a full-row replace, not a patch). Fields beyond what the form
-// shows are passed through verbatim.
 interface DomainFull {
  id: number
  name: string
@@ -52,8 +76,6 @@ interface DomainFull {
  http_to_https: boolean
  hsts_enabled: boolean
  notes?: string | null
-  created_at?: string
-  updated_at?: string
 }
 async function listDomains(): Promise<DomainFull[]> {
  const r = await apiClient.get('/domains')
@@ -68,10 +90,20 @@ export default function BackendsPage() {
  const { data, isLoading } = useQuery({ queryKey: ['backends'], queryFn: listBackends })
  const { data: domains } = useQuery({ queryKey: ['domains'], queryFn: listDomains })

-  // Reverse-lookup: which domains have this backend as primary?
-  // Read-only — domain ↔ backend coupling is owned by the Domains
-  // page, but showing it here makes the connection bi-directional
-  // in the UI.
+  // server-counts pro Backend laden wir lazy bei Expansion; in der
+  // Tabelle reicht ein Hinweis ob 0 / N Server.
+  const { data: serverCounts } = useQuery({
+    queryKey: ['backend-server-counts', (data ?? []).map(b => b.id).join(',')],
+    queryFn: async () => {
+      const out: Record<number, number> = {}
+      await Promise.all((data ?? []).map(async (b) => {
+        out[b.id] = (await listServers(b.id)).length
+      }))
+      return out
+    },
+    enabled: !!data && data.length > 0,
+  })
+
  const domainsForBackend = (id: number) =>
    (domains ?? []).filter(d => d.primary_backend_id === id)

@@ -79,12 +111,6 @@ export default function BackendsPage() {
  const [creating, setCreating] = useState(false)
  const [form] = Form.useForm<BackendFormValues>()

-  // syncDomainAttachments diff-applies the multi-select to the
-  // domains table — domains that should now point at this backend
-  // get a PUT with primary_backend_id=backend.id; domains that used
-  // to point at it but were unchecked get a PUT with null.
-  // Domains are kept canonical in their own table; this is just the
-  // reverse-edit affordance the operator asked for.
  async function syncDomainAttachments(backendID: number, selected: number[]) {
    const all = domains ?? []
    const wasAttached = new Set(all.filter(d => d.primary_backend_id === backendID).map(d => d.id))
@@ -157,8 +183,17 @@ export default function BackendsPage() {
    { title: t('backends.name'), dataIndex: 'name', key: 'name' },
    { title: t('backends.scheme'), dataIndex: 'scheme', key: 'scheme' },
    {
-      title: t('backends.target'), key: 'target',
-      render: (_, row) => `${row.address}:${row.port}`,
+      title: t('backends.servers'), key: 'srvcount',
+      render: (_, row) => {
+        const n = serverCounts?.[row.id] ?? 0
+        return n === 0
+          ? <Tag color="orange">{t('backends.noServers')}</Tag>
+          : <Tag color="blue">{t('backends.nServers', { n })}</Tag>
+      },
+    },
+    {
+      title: t('backends.lbAlgo'), dataIndex: 'lb_algorithm', key: 'lb',
+      render: (v: string) => <Tag>{v}</Tag>,
    },
    { title: t('backends.healthCheck'), dataIndex: 'health_check_path', key: 'hc', render: (v?: string) => v ?? '—' },
    {
@@ -179,9 +214,8 @@ export default function BackendsPage() {
            form.setFieldsValue({
              name: row.name,
              scheme: row.scheme as 'http' | 'https',
-              address: row.address,
-              port: row.port,
              health_check_path: row.health_check_path ?? undefined,
+              lb_algorithm: row.lb_algorithm,
              active: row.active,
              domain_ids: domainsForBackend(row.id).map(d => d.id),
            })
@@ -205,10 +239,14 @@ export default function BackendsPage() {
        loading={isLoading}
        dataSource={data ?? []}
        columns={columns}
+        expandable={{
+          expandedRowRender: (record) => <ServerPanel backendID={record.id} />,
+          rowExpandable: (record) => !!record.id,
+        }}
        extraActions={
          <Button type="primary" icon={<PlusOutlined />} onClick={() => {
            setCreating(true); form.resetFields()
-            form.setFieldsValue({ scheme: 'http', port: 8080, active: true })
+            form.setFieldsValue({ scheme: 'http', lb_algorithm: 'roundrobin', active: true })
          }}>
            {t('backends.addBackend')}
          </Button>
@@ -220,7 +258,15 @@ export default function BackendsPage() {
        onCancel={() => { setEditing(null); setCreating(false) }}
        onOk={() => { void form.submit() }}
        confirmLoading={create.isPending || update.isPending}
+        width={640}
      >
+        {creating && (
+          <Alert
+            type="info" showIcon
+            message={t('backends.serverHintCreate')}
+            className="mb-16"
+          />
+        )}
        <Form
          form={form}
          layout="vertical"
@@ -230,16 +276,20 @@ export default function BackendsPage() {
          }}
        >
          <Form.Item label={t('backends.name')} name="name" rules={[{ required: true }]}>
-            <Input placeholder="upstream-app" />
+            <Input placeholder="vmm-pool" />
          </Form.Item>
          <Form.Item label={t('backends.scheme')} name="scheme" rules={[{ required: true }]}>
            <Select options={[{ value: 'http', label: 'http' }, { value: 'https', label: 'https' }]} />
          </Form.Item>
-          <Form.Item label={t('backends.address')} name="address" rules={[{ required: true }]}>
-            <Input placeholder="10.0.0.10" />
-          </Form.Item>
-          <Form.Item label={t('backends.port')} name="port" rules={[{ required: true }]}>
-            <InputNumber min={1} max={65535} style={{ width: '100%' }} />
+          <Form.Item label={t('backends.lbAlgo')} name="lb_algorithm" rules={[{ required: true }]}
+            extra={t('backends.lbAlgoHint')}>
+            <Select
+              options={[
+                { value: 'roundrobin', label: 'roundrobin — gleichmäßige Verteilung' },
+                { value: 'leastconn',  label: 'leastconn — wenigste aktive Verbindungen' },
+                { value: 'source',     label: 'source — sticky per Source-IP-Hash' },
+              ]}
+            />
          </Form.Item>
          <Form.Item label={t('backends.healthCheck')} name="health_check_path">
            <Input placeholder="/health" />
@@ -267,6 +317,147 @@ export default function BackendsPage() {
            />
          </Form.Item>
        </Form>
+        {editing && (
+          <Card size="small" title={t('backends.serversIn', { name: editing.name })} className="mt-16">
+            <ServerPanel backendID={editing.id} />
+          </Card>
+        )}
+      </Modal>
+    </div>
+  )
+}
+
+// ServerPanel ist sowohl das Expand-Panel in der Tabelle als auch der
+// Server-Editor im Backend-Edit-Modal. Eigene Mutation/Query damit Edit
+// und Expand unabhängig voneinander einklappen können.
+function ServerPanel({ backendID }: { backendID: number }) {
+  const { t } = useTranslation()
+  const qc = useQueryClient()
+  const [open, setOpen] = useState(false)
+  const [editing, setEditing] = useState<BackendServer | null>(null)
+  const [form] = Form.useForm<ServerFormValues>()
+
+  const { data: servers, isLoading } = useQuery({
+    queryKey: ['backend-servers', backendID],
+    queryFn: () => listServers(backendID),
+  })
+
+  const create = useMutation({
+    mutationFn: async (v: ServerFormValues) => {
+      await apiClient.post(`/backends/${backendID}/servers`, v)
+    },
+    onSuccess: () => {
+      message.success(t('common.save'))
+      setOpen(false); form.resetFields()
+      void qc.invalidateQueries({ queryKey: ['backend-servers', backendID] })
+      void qc.invalidateQueries({ queryKey: ['backend-server-counts'] })
+    },
+    onError: (e: Error) => message.error(e.message),
+  })
+
+  const update = useMutation({
+    mutationFn: async ({ id, v }: { id: number; v: ServerFormValues }) => {
+      await apiClient.put(`/backend-servers/${id}`, { ...v, backend_id: backendID })
+    },
+    onSuccess: () => {
+      message.success(t('common.save'))
+      setEditing(null); form.resetFields()
+      void qc.invalidateQueries({ queryKey: ['backend-servers', backendID] })
+    },
+    onError: (e: Error) => message.error(e.message),
+  })
+
+  const del = useMutation({
+    mutationFn: async (id: number) => { await apiClient.delete(`/backend-servers/${id}`) },
+    onSuccess: () => {
+      void qc.invalidateQueries({ queryKey: ['backend-servers', backendID] })
+      void qc.invalidateQueries({ queryKey: ['backend-server-counts'] })
+    },
+    onError: (e: Error) => message.error(e.message),
+  })
+
+  const cols: ColumnsType<BackendServer> = [
+    { title: t('backends.server.name'), dataIndex: 'name' },
+    {
+      title: t('backends.server.target'), key: 'tgt',
+      render: (_, r) => <Text code>{r.address}:{r.port}</Text>,
+    },
+    { title: t('backends.server.weight'), dataIndex: 'weight', width: 80 },
+    { title: t('backends.server.backup'), dataIndex: 'backup',
+      render: (v: boolean) => v ? <Tag color="purple">Backup</Tag> : '—', width: 100 },
+    { title: t('backends.active'), dataIndex: 'active',
+      render: (v: boolean) => <StatusDot active={v} />, width: 80 },
+    {
+      title: t('common.actions'), key: 'a', width: 160,
+      render: (_, r) => (
+        <Space size={4}>
+          <Button size="small" onClick={() => {
+            setEditing(r)
+            form.setFieldsValue({
+              name: r.name, address: r.address, port: r.port,
+              weight: r.weight, backup: r.backup, active: r.active,
+            })
+          }}>{t('common.edit')}</Button>
+          <Popconfirm title={t('backends.server.deleteConfirm', { name: r.name })}
+            onConfirm={() => del.mutate(r.id)}>
+            <Button size="small" danger>{t('common.delete')}</Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <div>
+      <div className="mb-8" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <Text type="secondary">{t('backends.server.intro')}</Text>
+        <Button size="small" type="primary" icon={<PlusOutlined />} onClick={() => {
+          setOpen(true)
+          form.resetFields()
+          form.setFieldsValue({ weight: 100, backup: false, active: true, port: 8080 })
+        }}>
+          {t('backends.server.add')}
+        </Button>
+      </div>
+      <Table
+        size="small"
+        rowKey="id"
+        loading={isLoading}
+        dataSource={servers ?? []}
+        columns={cols}
+        pagination={false}
+        locale={{ emptyText: t('backends.server.empty') }}
+      />
+      <Modal
+        title={editing ? t('backends.server.edit') : t('backends.server.add')}
+        open={open || editing !== null}
+        onCancel={() => { setOpen(false); setEditing(null); form.resetFields() }}
+        onOk={() => { void form.submit() }}
+        confirmLoading={create.isPending || update.isPending}
+        destroyOnHidden
+      >
+        <Form form={form} layout="vertical"
+          onFinish={(v) => editing ? update.mutate({ id: editing.id, v }) : create.mutate(v)}>
+          <Form.Item label={t('backends.server.name')} name="name" rules={[{ required: true }]}>
+            <Input placeholder="vmm-1" />
+          </Form.Item>
+          <Form.Item label={t('backends.server.address')} name="address" rules={[{ required: true }]}>
+            <Input placeholder="10.0.0.11" />
+          </Form.Item>
+          <Form.Item label={t('backends.server.port')} name="port" rules={[{ required: true }]}>
+            <InputNumber min={1} max={65535} style={{ width: '100%' }} />
+          </Form.Item>
+          <Form.Item label={t('backends.server.weight')} name="weight" extra={t('backends.server.weightHint')}>
+            <InputNumber min={0} max={256} style={{ width: '100%' }} />
+          </Form.Item>
+          <Form.Item label={t('backends.server.backup')} name="backup" valuePropName="checked"
+            extra={t('backends.server.backupHint')}>
+            <Switch />
+          </Form.Item>
+          <Form.Item label={t('backends.active')} name="active" valuePropName="checked">
+            <Switch />
+          </Form.Item>
+        </Form>
      </Modal>
    </div>
  )