edgeguard-native/management-ui/src/pages/Backends/index.tsx

import { useState } from 'react'
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'
import { useTranslation } from 'react-i18next'
import DataTable from '../../components/DataTable'
import PageHeader from '../../components/PageHeader'
import ActionButtons from '../../components/ActionButtons'
import StatusDot from '../../components/StatusDot'

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

const { Text } = Typography

interface Backend {
  id: number
  name: string
  scheme: string
  health_check_path?: string | null
  lb_algorithm: 'roundrobin' | 'leastconn' | 'source'
  websocket: boolean
  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'
  health_check_path?: string
  lb_algorithm: 'roundrobin' | 'leastconn' | 'source'
  websocket: boolean
  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 []
  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 ?? []
}

interface DomainFull {
  id: number
  name: string
  active: boolean
  primary_backend_id?: number | null
  http_to_https: boolean
  hsts_enabled: boolean
  notes?: string | null
}
async function listDomains(): Promise<DomainFull[]> {
  const r = await apiClient.get('/domains')
  if (!isEnvelope(r.data)) return []
  return (r.data.data as { domains?: DomainFull[] }).domains ?? []
}

export default function BackendsPage() {
  const { t } = useTranslation()
  const qc = useQueryClient()

  const { data, isLoading } = useQuery({ queryKey: ['backends'], queryFn: listBackends })
  const { data: domains } = useQuery({ queryKey: ['domains'], queryFn: listDomains })

  // 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)

  const [editing, setEditing] = useState<Backend | null>(null)
  const [creating, setCreating] = useState(false)
  const [form] = Form.useForm<BackendFormValues>()

  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))
    const want = new Set(selected)
    const adds = [...want].filter(id => !wasAttached.has(id))
    const removes = [...wasAttached].filter(id => !want.has(id))

    const puts: Promise<unknown>[] = []
    for (const id of adds) {
      const d = all.find(x => x.id === id)
      if (!d) continue
      puts.push(apiClient.put(`/domains/${id}`, {
        name: d.name, active: d.active,
        http_to_https: d.http_to_https, hsts_enabled: d.hsts_enabled,
        notes: d.notes ?? '', primary_backend_id: backendID,
      }))
    }
    for (const id of removes) {
      const d = all.find(x => x.id === id)
      if (!d) continue
      puts.push(apiClient.put(`/domains/${id}`, {
        name: d.name, active: d.active,
        http_to_https: d.http_to_https, hsts_enabled: d.hsts_enabled,
        notes: d.notes ?? '', primary_backend_id: null,
      }))
    }
    if (puts.length > 0) await Promise.all(puts)
  }

  const create = useMutation({
    mutationFn: async (v: BackendFormValues) => {
      const { domain_ids, ...body } = v
      const r = await apiClient.post('/backends', body)
      const env = r.data
      const created = isEnvelope(env) ? (env.data as Backend) : null
      if (created && domain_ids && domain_ids.length > 0) {
        await syncDomainAttachments(created.id, domain_ids)
      }
    },
    onSuccess: () => {
      message.success(t('common.save'))
      setCreating(false)
      form.resetFields()
      void qc.invalidateQueries({ queryKey: ['backends'] })
      void qc.invalidateQueries({ queryKey: ['domains'] })
    },
  })

  const update = useMutation({
    mutationFn: async ({ id, v }: { id: number; v: BackendFormValues }) => {
      const { domain_ids, ...body } = v
      await apiClient.put(`/backends/${id}`, body)
      await syncDomainAttachments(id, domain_ids ?? [])
    },
    onSuccess: () => {
      message.success(t('common.save'))
      setEditing(null)
      form.resetFields()
      void qc.invalidateQueries({ queryKey: ['backends'] })
      void qc.invalidateQueries({ queryKey: ['domains'] })
    },
  })

  const del = useMutation({
    mutationFn: async (id: number) => { await apiClient.delete(`/backends/${id}`) },
    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['backends'] }) },
  })

  const columns: ColumnsType<Backend> = [
    { title: t('backends.name'), dataIndex: 'name', key: 'name' },
    { title: t('backends.scheme'), dataIndex: 'scheme', key: 'scheme' },
    {
      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, row) => (
        <Space size={4}>
          <Tag>{v}</Tag>
          {row.websocket && <Tag color="cyan">WS</Tag>}
        </Space>
      ),
    },
    { title: t('backends.healthCheck'), dataIndex: 'health_check_path', key: 'hc', render: (v?: string) => v ?? '—' },
    {
      title: t('backends.usedBy'), key: 'used_by',
      render: (_, row) => {
        const ds = domainsForBackend(row.id)
        if (ds.length === 0) return <Tag color="default">{t('backends.noDomain')}</Tag>
        return <Space size={4} wrap>{ds.map(d => <Tag key={d.id} color="blue">{d.name}</Tag>)}</Space>
      },
    },
    { title: t('backends.active'), dataIndex: 'active', key: 'active', render: (v: boolean) => <StatusDot active={v} /> },
    {
      title: t('common.actions'), key: 'actions',
      render: (_, row) => (
        <ActionButtons
          onEdit={() => {
            setEditing(row)
            form.setFieldsValue({
              name: row.name,
              scheme: row.scheme as 'http' | 'https',
              health_check_path: row.health_check_path ?? undefined,
              lb_algorithm: row.lb_algorithm,
              websocket: row.websocket,
              active: row.active,
              domain_ids: domainsForBackend(row.id).map(d => d.id),
            })
          }}
          onDelete={() => del.mutate(row.id)}
          deleteConfirm={t('backends.deleteConfirm', { name: row.name })}
        />
      ),
    },
  ]

  return (
    <div>
      <PageHeader
        icon={<DatabaseOutlined />}
        title={t('backends.title')}
        subtitle={t('backends.intro')}
      />
      <DataTable
        rowKey="id"
        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', lb_algorithm: 'roundrobin', websocket: false, active: true })
          }}>
            {t('backends.addBackend')}
          </Button>
        }
      />
      <Modal
        title={editing ? t('backends.editBackend') : t('backends.addBackend')}
        open={editing !== null || creating}
        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"
          onFinish={(v) => {
            if (editing) update.mutate({ id: editing.id, v })
            else create.mutate(v)
          }}
        >
          <Form.Item label={t('backends.name')} name="name" rules={[{ required: true }]}>
            <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.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" />
          </Form.Item>
          <Form.Item label={t('backends.websocket')} name="websocket" valuePropName="checked"
            extra={t('backends.websocketHint')}>
            <Switch />
          </Form.Item>
          <Form.Item label={t('backends.active')} name="active" valuePropName="checked">
            <Switch />
          </Form.Item>
          <Form.Item
            label={t('backends.attachedDomains')}
            name="domain_ids"
            extra={t('backends.attachedDomainsHint')}
          >
            <Select
              mode="multiple"
              allowClear
              showSearch
              optionFilterProp="label"
              placeholder={t('backends.selectDomains')}
              options={(domains ?? []).map(d => ({
                value: d.id,
                label: d.primary_backend_id && d.primary_backend_id !== editing?.id
                  ? `${d.name} (zur Zeit: #${d.primary_backend_id})`
                  : d.name,
              }))}
            />
          </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>
  )
}