feat: Network/IP-Verwaltung + Mailguard-Design-Übernahme
Backend: * Migration 0009_networks: network_interfaces (ethernet|vlan|bond| bridge|wireguard, role wan|lan|dmz|mgmt|cluster, parent + vlan_id für VLANs) + ip_addresses (interface_id FK, address+prefix, is_vip + vip_priority für Cluster-Failover-VIPs). * Repos services/networkifs + services/ipaddresses + Models + Handler /api/v1/network-interfaces (CRUD + /:id/ip-addresses) und /api/v1/ip-addresses (CRUD). * /api/v1/system/interfaces refactored auf Go-natives net.Interfaces() statt `ip -j addr show` shell-out — die systemd-Sandbox blockt AF_NETLINK auch für Go's runtime, deswegen edgeguard-api.service RestrictAddressFamilies um AF_NETLINK ergänzt. Output-Shape bleibt identisch (ifindex, ifname, flags[], mtu, link_type, address, addr_info[]) — Frontend muss nicht angepasst werden. Frontend: * Networks-Page (/networks): "System-discovered Interfaces" read-only Tags-Card oben, deklarierte Interfaces unten als Tabelle mit Modal-CRUD; Type-Switch zeigt parent+vlan_id-Felder bei type=vlan; Role-Tags farbig (wan blau, lan grün, dmz orange, mgmt purple, cluster magenta). * IPAddresses-Page (/ip-addresses): Tabelle pro Interface, VIP- Toggle blendet vip_priority-Eingabe ein. Goldenes VIP-Tag in der Liste. * Sidebar erweitert um Networks + IP-Adressen + section-grouping. Design 1:1 von mail-gateway/management-ui/ übernommen: * enterprise.css verbatim (Inter-Font via Google CDN statt local woff2), Sidebar 240px dunkler Gradient #0B1426→#101D33→#0D1829, branding-accent #1677ff für Active-State, abgerundete Cards mit shadow-Token, Header weiß mit subtilem backdrop-filter. * AntD-Theme-Tokens: colorPrimary #0EA5E9, fontSize 13, fontFamily 'Inter', controlHeight 34, borderRadius 6. * Layout-Komponenten neu strukturiert: AppLayout/Sidebar/Header matchen mailguard-Klassen-Naming (.app-layout, .main-content, .sidebar-section, .sidebar-menu-item.active, .header-left, …). * Sidebar mit 4 Sektionen (Übersicht / Routing / Netzwerk / System) + Logo-Header + Versions-Footer. Live-deployed auf 89.163.205.6: Networks-Endpoint listet eth0 (89.163.205.6/24, MAC bc:24:11:64:29:e8) + lo, frontend zeigt sie als System-Tags in der Networks-Page. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Debian
179
management-ui/src/pages/IPAddresses/index.tsx
Normal file
179
management-ui/src/pages/IPAddresses/index.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import { useState } from 'react'
|
||||
import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Tag, Typography, 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'
|
||||
|
||||
interface IPAddress {
|
||||
id: number
|
||||
interface_id: number
|
||||
address: string
|
||||
prefix: number
|
||||
is_vip: boolean
|
||||
vip_priority?: number | null
|
||||
description?: string | null
|
||||
active: boolean
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
interface IPFormValues {
|
||||
interface_id: number
|
||||
address: string
|
||||
prefix: number
|
||||
is_vip: boolean
|
||||
vip_priority?: number
|
||||
description?: string
|
||||
active: boolean
|
||||
}
|
||||
|
||||
interface NetworkInterface { id: number; name: string; role: string }
|
||||
|
||||
async function listIPs(): Promise<IPAddress[]> {
|
||||
const r = await apiClient.get('/ip-addresses')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { ip_addresses?: IPAddress[] }).ip_addresses ?? []
|
||||
}
|
||||
async function listIfaces(): Promise<NetworkInterface[]> {
|
||||
const r = await apiClient.get('/network-interfaces')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { interfaces?: NetworkInterface[] }).interfaces ?? []
|
||||
}
|
||||
|
||||
export default function IPAddressesPage() {
|
||||
const { t } = useTranslation()
|
||||
const qc = useQueryClient()
|
||||
|
||||
const { data: ips, isLoading } = useQuery({ queryKey: ['ip-addresses'], queryFn: listIPs })
|
||||
const { data: ifs } = useQuery({ queryKey: ['network-interfaces'], queryFn: listIfaces })
|
||||
|
||||
const ifaceLabel = (id: number) => {
|
||||
const i = ifs?.find((x) => x.id === id)
|
||||
return i ? `${i.name} (${i.role})` : `#${id}`
|
||||
}
|
||||
|
||||
const [editing, setEditing] = useState<IPAddress | null>(null)
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [form] = Form.useForm<IPFormValues>()
|
||||
|
||||
const create = useMutation({
|
||||
mutationFn: async (v: IPFormValues) => { await apiClient.post('/ip-addresses', v) },
|
||||
onSuccess: () => {
|
||||
message.success(t('common.save'))
|
||||
setCreating(false); form.resetFields()
|
||||
void qc.invalidateQueries({ queryKey: ['ip-addresses'] })
|
||||
},
|
||||
})
|
||||
const update = useMutation({
|
||||
mutationFn: async ({ id, v }: { id: number; v: IPFormValues }) => { await apiClient.put(`/ip-addresses/${id}`, v) },
|
||||
onSuccess: () => {
|
||||
message.success(t('common.save'))
|
||||
setEditing(null); form.resetFields()
|
||||
void qc.invalidateQueries({ queryKey: ['ip-addresses'] })
|
||||
},
|
||||
})
|
||||
const del = useMutation({
|
||||
mutationFn: async (id: number) => { await apiClient.delete(`/ip-addresses/${id}`) },
|
||||
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['ip-addresses'] }) },
|
||||
})
|
||||
|
||||
const columns: ColumnsType<IPAddress> = [
|
||||
{ title: t('ips.interface'), dataIndex: 'interface_id', key: 'iface', render: (id: number) => ifaceLabel(id) },
|
||||
{
|
||||
title: t('ips.address'), key: 'addr',
|
||||
render: (_, row) => <code>{row.address}/{row.prefix}</code>,
|
||||
},
|
||||
{
|
||||
title: t('ips.vip'), key: 'vip',
|
||||
render: (_, row) => row.is_vip
|
||||
? <Tag color="gold">VIP{row.vip_priority != null ? ` · prio ${row.vip_priority}` : ''}</Tag>
|
||||
: '—',
|
||||
},
|
||||
{ title: t('ips.active'), dataIndex: 'active', key: 'active', render: (v: boolean) => v ? t('common.yes') : t('common.no') },
|
||||
{ title: t('ips.description'), dataIndex: 'description', key: 'desc', render: (v?: string) => v ?? '—' },
|
||||
{
|
||||
title: t('ips.actions'), key: 'actions',
|
||||
render: (_, row) => (
|
||||
<Space>
|
||||
<Button size="small" onClick={() => {
|
||||
setEditing(row)
|
||||
form.setFieldsValue({
|
||||
interface_id: row.interface_id,
|
||||
address: row.address, prefix: row.prefix,
|
||||
is_vip: row.is_vip, vip_priority: row.vip_priority ?? undefined,
|
||||
description: row.description ?? undefined,
|
||||
active: row.active,
|
||||
})
|
||||
}}>{t('common.edit')}</Button>
|
||||
<Popconfirm
|
||||
title={t('ips.deleteConfirm', { addr: row.address })}
|
||||
onConfirm={() => del.mutate(row.id)}
|
||||
>
|
||||
<Button size="small" danger>{t('common.delete')}</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Typography.Title level={3}>{t('ips.title')}</Typography.Title>
|
||||
<Typography.Paragraph type="secondary">{t('ips.intro')}</Typography.Paragraph>
|
||||
<Button type="primary" style={{ marginBottom: 16 }} onClick={() => {
|
||||
setCreating(true); form.resetFields()
|
||||
form.setFieldsValue({ prefix: 24, is_vip: false, active: true })
|
||||
}}>
|
||||
{t('ips.addAddress')}
|
||||
</Button>
|
||||
<Table rowKey="id" loading={isLoading} dataSource={ips ?? []} columns={columns} pagination={false} />
|
||||
<Modal
|
||||
title={editing ? t('ips.editAddress') : t('ips.addAddress')}
|
||||
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) => {
|
||||
if (editing) update.mutate({ id: editing.id, v })
|
||||
else create.mutate(v)
|
||||
}}
|
||||
>
|
||||
<Form.Item label={t('ips.interface')} name="interface_id" rules={[{ required: true }]}>
|
||||
<Select
|
||||
options={(ifs ?? []).map((i) => ({ value: i.id, label: ifaceLabel(i.id) }))}
|
||||
placeholder={t('ips.selectInterface')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label={t('ips.address')} name="address" rules={[{ required: true }]}>
|
||||
<Input placeholder="192.0.2.10 oder fd00::1" />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('ips.prefix')} name="prefix" rules={[{ required: true }]}>
|
||||
<InputNumber min={0} max={128} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('ips.vipFlag')} name="is_vip" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item noStyle shouldUpdate={(p, c) => p.is_vip !== c.is_vip}>
|
||||
{({ getFieldValue }) => getFieldValue('is_vip') ? (
|
||||
<Form.Item label={t('ips.vipPriority')} name="vip_priority">
|
||||
<InputNumber min={0} max={255} style={{ width: '100%' }} placeholder="100" />
|
||||
</Form.Item>
|
||||
) : null}
|
||||
</Form.Item>
|
||||
<Form.Item label={t('ips.description')} name="description">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('ips.active')} name="active" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
212
management-ui/src/pages/Networks/index.tsx
Normal file
212
management-ui/src/pages/Networks/index.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
import { useState } from 'react'
|
||||
import { Button, Card, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Tag, Tooltip, Typography, 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'
|
||||
|
||||
interface NetworkInterface {
|
||||
id: number
|
||||
name: string
|
||||
type: 'ethernet' | 'vlan' | 'bond' | 'bridge' | 'wireguard'
|
||||
parent?: string | null
|
||||
vlan_id?: number | null
|
||||
role: 'wan' | 'lan' | 'dmz' | 'mgmt' | 'cluster'
|
||||
mtu?: number | null
|
||||
active: boolean
|
||||
description?: string | null
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
interface IfaceFormValues {
|
||||
name: string
|
||||
type: NetworkInterface['type']
|
||||
parent?: string
|
||||
vlan_id?: number
|
||||
role: NetworkInterface['role']
|
||||
mtu?: number
|
||||
active: boolean
|
||||
description?: string
|
||||
}
|
||||
|
||||
interface SystemInterface {
|
||||
ifname: string
|
||||
link_type?: string
|
||||
address?: string
|
||||
flags?: string[]
|
||||
addr_info?: Array<{ family: 'inet' | 'inet6'; local: string; prefixlen: number }>
|
||||
}
|
||||
|
||||
async function listInterfaces(): Promise<NetworkInterface[]> {
|
||||
const r = await apiClient.get('/network-interfaces')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { interfaces?: NetworkInterface[] }).interfaces ?? []
|
||||
}
|
||||
|
||||
async function listSystemInterfaces(): Promise<SystemInterface[]> {
|
||||
const r = await apiClient.get('/system/interfaces')
|
||||
if (!isEnvelope(r.data)) return []
|
||||
return (r.data.data as { interfaces?: SystemInterface[] }).interfaces ?? []
|
||||
}
|
||||
|
||||
export default function NetworksPage() {
|
||||
const { t } = useTranslation()
|
||||
const qc = useQueryClient()
|
||||
|
||||
const { data: ifs, isLoading } = useQuery({ queryKey: ['network-interfaces'], queryFn: listInterfaces })
|
||||
const { data: sys } = useQuery({ queryKey: ['system', 'interfaces'], queryFn: listSystemInterfaces, refetchInterval: 60_000 })
|
||||
|
||||
const [editing, setEditing] = useState<NetworkInterface | null>(null)
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [form] = Form.useForm<IfaceFormValues>()
|
||||
|
||||
const create = useMutation({
|
||||
mutationFn: async (v: IfaceFormValues) => { await apiClient.post('/network-interfaces', v) },
|
||||
onSuccess: () => {
|
||||
message.success(t('common.save'))
|
||||
setCreating(false); form.resetFields()
|
||||
void qc.invalidateQueries({ queryKey: ['network-interfaces'] })
|
||||
},
|
||||
})
|
||||
const update = useMutation({
|
||||
mutationFn: async ({ id, v }: { id: number; v: IfaceFormValues }) => { await apiClient.put(`/network-interfaces/${id}`, v) },
|
||||
onSuccess: () => {
|
||||
message.success(t('common.save'))
|
||||
setEditing(null); form.resetFields()
|
||||
void qc.invalidateQueries({ queryKey: ['network-interfaces'] })
|
||||
},
|
||||
})
|
||||
const del = useMutation({
|
||||
mutationFn: async (id: number) => { await apiClient.delete(`/network-interfaces/${id}`) },
|
||||
onSuccess: () => { void qc.invalidateQueries({ queryKey: ['network-interfaces'] }) },
|
||||
})
|
||||
|
||||
const roleColor: Record<NetworkInterface['role'], string> = {
|
||||
wan: 'blue', lan: 'green', dmz: 'orange', mgmt: 'purple', cluster: 'magenta',
|
||||
}
|
||||
|
||||
const columns: ColumnsType<NetworkInterface> = [
|
||||
{ title: t('networks.name'), dataIndex: 'name', key: 'name', render: (s: string) => <code>{s}</code> },
|
||||
{ title: t('networks.type'), dataIndex: 'type', key: 'type' },
|
||||
{
|
||||
title: t('networks.vlan'), key: 'vlan',
|
||||
render: (_, row) => row.type === 'vlan' ? <span>{row.parent}.{row.vlan_id}</span> : '—',
|
||||
},
|
||||
{
|
||||
title: t('networks.role'), dataIndex: 'role', key: 'role',
|
||||
render: (r: NetworkInterface['role']) => <Tag color={roleColor[r]}>{r.toUpperCase()}</Tag>,
|
||||
},
|
||||
{ title: t('networks.mtu'), dataIndex: 'mtu', key: 'mtu', render: (v?: number) => v ?? '—' },
|
||||
{ title: t('networks.active'), dataIndex: 'active', key: 'active', render: (v: boolean) => v ? t('common.yes') : t('common.no') },
|
||||
{
|
||||
title: t('networks.actions'), key: 'actions',
|
||||
render: (_, row) => (
|
||||
<Space>
|
||||
<Button size="small" onClick={() => {
|
||||
setEditing(row)
|
||||
form.setFieldsValue({
|
||||
name: row.name, type: row.type, parent: row.parent ?? undefined,
|
||||
vlan_id: row.vlan_id ?? undefined, role: row.role,
|
||||
mtu: row.mtu ?? undefined, active: row.active,
|
||||
description: row.description ?? undefined,
|
||||
})
|
||||
}}>{t('common.edit')}</Button>
|
||||
<Popconfirm
|
||||
title={t('networks.deleteConfirm', { name: row.name })}
|
||||
onConfirm={() => del.mutate(row.id)}
|
||||
>
|
||||
<Button size="small" danger>{t('common.delete')}</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Typography.Title level={3}>{t('networks.title')}</Typography.Title>
|
||||
<Typography.Paragraph type="secondary">{t('networks.intro')}</Typography.Paragraph>
|
||||
|
||||
<Card title={t('networks.systemDiscovered')} style={{ marginBottom: 16 }} size="small">
|
||||
<Space wrap>
|
||||
{(sys ?? []).map((i) => {
|
||||
const v4 = (i.addr_info ?? []).filter((a) => a.family === 'inet').map((a) => `${a.local}/${a.prefixlen}`)
|
||||
const v6 = (i.addr_info ?? []).filter((a) => a.family === 'inet6').map((a) => `${a.local}/${a.prefixlen}`)
|
||||
return (
|
||||
<Tooltip key={i.ifname} title={[...v4, ...v6].join(' · ') || '—'}>
|
||||
<Tag>{i.ifname}{v4[0] ? ` · ${v4[0]}` : ''}</Tag>
|
||||
</Tooltip>
|
||||
)
|
||||
})}
|
||||
{(sys ?? []).length === 0 && <Typography.Text type="secondary">—</Typography.Text>}
|
||||
</Space>
|
||||
</Card>
|
||||
|
||||
<Button type="primary" style={{ marginBottom: 16 }} onClick={() => {
|
||||
setCreating(true); form.resetFields()
|
||||
form.setFieldsValue({ type: 'ethernet', role: 'lan', active: true })
|
||||
}}>
|
||||
{t('networks.addInterface')}
|
||||
</Button>
|
||||
|
||||
<Table rowKey="id" loading={isLoading} dataSource={ifs ?? []} columns={columns} pagination={false} />
|
||||
|
||||
<Modal
|
||||
title={editing ? t('networks.editInterface') : t('networks.addInterface')}
|
||||
open={editing !== null || creating}
|
||||
onCancel={() => { setEditing(null); setCreating(false) }}
|
||||
onOk={() => { void form.submit() }}
|
||||
confirmLoading={create.isPending || update.isPending}
|
||||
width={560}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={(v) => {
|
||||
if (editing) update.mutate({ id: editing.id, v })
|
||||
else create.mutate(v)
|
||||
}}
|
||||
>
|
||||
<Form.Item label={t('networks.name')} name="name" rules={[{ required: true }]}>
|
||||
<Input placeholder="eth0 / eth0.100 / bond0" />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('networks.type')} name="type" rules={[{ required: true }]}>
|
||||
<Select options={[
|
||||
{ value: 'ethernet', label: 'ethernet' },
|
||||
{ value: 'vlan', label: 'vlan' },
|
||||
{ value: 'bond', label: 'bond' },
|
||||
{ value: 'bridge', label: 'bridge' },
|
||||
{ value: 'wireguard',label: 'wireguard' },
|
||||
]} />
|
||||
</Form.Item>
|
||||
<Form.Item noStyle shouldUpdate={(p, c) => p.type !== c.type}>
|
||||
{({ getFieldValue }) => getFieldValue('type') === 'vlan' ? (
|
||||
<>
|
||||
<Form.Item label={t('networks.parent')} name="parent" rules={[{ required: true }]}>
|
||||
<Input placeholder="eth0" />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('networks.vlanId')} name="vlan_id" rules={[{ required: true }]}>
|
||||
<InputNumber min={1} max={4094} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</>
|
||||
) : null}
|
||||
</Form.Item>
|
||||
<Form.Item label={t('networks.role')} name="role" rules={[{ required: true }]}>
|
||||
<Select options={(['wan','lan','dmz','mgmt','cluster'] as const).map(r => ({ value: r, label: r.toUpperCase() }))} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('networks.mtu')} name="mtu">
|
||||
<InputNumber min={68} max={9216} style={{ width: '100%' }} placeholder="1500" />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('networks.description')} name="description">
|
||||
<Input.TextArea rows={2} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('networks.active')} name="active" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user