feat(ui): Pages auf neues Design + Dashboard + WG-Live-Status + Routing-Rules-Verstecken

Pages auf PageHeader/StatusDot/ActionButtons-Pattern migriert:
* Dashboard — Komplett-Rewrite. KPI-Tiles (Domains, Backends, Iface,
  FW-Rules, NAT, WG), Detail-Cards (WireGuard live status, Firewall
  zone overview, SSL expiring soon, Cluster nodes, Routing summary,
  System info). Polled queries pro Card.
* Domains, Backends, RoutingRules, Networks, IPAddresses, SSL,
  Cluster, Settings, Firewall (index) — alle inline Action-Buttons
  → ActionButtons; alle Yes/No-Renders → StatusDot; Add-Button in
  DataTable.extraActions; PageHeader oben.

WireGuard
---------
* Neuer /wireguard/status-Endpoint parsed `wg show all dump`,
  liefert {iface, peer_pubkey, endpoint, last_handshake_unix, rx, tx}.
  Sudoers im postinst um `wg show` erweitert.
* Server-Drawer Peer-Liste zeigt jetzt Live-Status (Online/Offline-
  Dot, "vor Xs", Traffic-Counter) per 10s-Polling. Importierte
  "Unify Home" peer kann jetzt im UI verifiziert werden.
* Importer-Bug fixed: nextName ("# Unify Home" comment) wurde beim
  Sektionswechsel zu früh geresettet — jetzt nur nach echtem
  flushPeer.

Routing-Rules
-------------
* Aus Sidebar entfernt. URL bleibt funktional, aber für 90% der
  Setups reicht domains.primary_backend_id (das HAProxy ohnehin
  als default_backend rendert). Path-basiertes Routing ist ein
  Advanced-Feature und kommt später als Domain-Modal-Tab zurück.
* nav.routing-Sidebar-Eintrag + BranchesOutlined-Import entfernt.

Misc
----
* "Firewall (v2)" → "Firewall" im Nav (DE).
* Dashboard-i18n Block in DE+EN.
* Version 1.0.11 → 1.0.12.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Debian
2026-05-10 21:07:38 +02:00
parent 85904d0c36
commit fd294a273e
21 changed files with 439 additions and 162 deletions

View File

@@ -1,9 +1,13 @@
import { useState } from 'react'
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Tag, Typography, message } from 'antd'
import { Button, Form, Input, InputNumber, Modal, Select, Space, Switch, Tag, 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'
@@ -165,12 +169,12 @@ export default function BackendsPage() {
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) => v ? t('common.yes') : t('common.no') },
{ title: t('backends.active'), dataIndex: 'active', key: 'active', render: (v: boolean) => <StatusDot active={v} /> },
{
title: t('backends.actions'), key: 'actions',
title: t('common.actions'), key: 'actions',
render: (_, row) => (
<Space>
<Button size="small" onClick={() => {
<ActionButtons
onEdit={() => {
setEditing(row)
form.setFieldsValue({
name: row.name,
@@ -181,29 +185,35 @@ export default function BackendsPage() {
active: row.active,
domain_ids: domainsForBackend(row.id).map(d => d.id),
})
}}>{t('common.edit')}</Button>
<Popconfirm
title={t('backends.deleteConfirm', { name: row.name })}
onConfirm={() => del.mutate(row.id)}
>
<Button size="small" danger>{t('common.delete')}</Button>
</Popconfirm>
</Space>
}}
onDelete={() => del.mutate(row.id)}
deleteConfirm={t('backends.deleteConfirm', { name: row.name })}
/>
),
},
]
return (
<div>
<Typography.Title level={3}>{t('backends.title')}</Typography.Title>
<Button type="primary" style={{ marginBottom: 16 }} onClick={() => {
setCreating(true)
form.resetFields()
form.setFieldsValue({ scheme: 'http', port: 8080, active: true })
}}>
{t('backends.addBackend')}
</Button>
<DataTable rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} />
<PageHeader
icon={<DatabaseOutlined />}
title={t('backends.title')}
subtitle={t('backends.intro')}
/>
<DataTable
rowKey="id"
loading={isLoading}
dataSource={data ?? []}
columns={columns}
extraActions={
<Button type="primary" icon={<PlusOutlined />} onClick={() => {
setCreating(true); form.resetFields()
form.setFieldsValue({ scheme: 'http', port: 8080, active: true })
}}>
{t('backends.addBackend')}
</Button>
}
/>
<Modal
title={editing ? t('backends.editBackend') : t('backends.addBackend')}
open={editing !== null || creating}