feat(routes): Static-Routes-Management + Live-View (Networks-Tab)
Migration 0019: static_routes (id, destination, gateway, dev, metric,
table_name, active, comment).
internal/services/staticroutes/:
- CRUD-Repo
- Generator schreibt /etc/edgeguard/routes.conf (pipe-format) und
triggert `sudo systemctl restart edgeguard-routes.service`
- LiveAll() ruft `ip -j route show table all` und parsed JSON
internal/handlers/routes.go:
GET /api/v1/routes — managed (DB)
POST/PUT/DELETE — CRUD (re-render + apply on mutate)
GET /api/v1/routes/live — kernel-state via ip(8)
postinst:
- /usr/sbin/edgeguard-apply-routes (root-owned shell-script). Liest
routes.conf, flusht `proto 250` (= edgeguard), setzt neue Routen
mit proto 250. Andere Quellen (kernel/dhcp/manuell) bleiben
unangetastet.
- /etc/systemd/system/edgeguard-routes.service (Type=oneshot,
After=network-online.target). Beim Boot automatisch via
multi-user.target.
- /etc/iproute2/rt_protos.d/edgeguard.conf — Symbol "edgeguard" =
250 damit `ip route show proto edgeguard` funktioniert.
(Debian 13 hat kein /etc/iproute2 default → .d-Pattern statt
rt_protos-Anhängen.)
- sudoers: edgeguard ALL=(root) NOPASSWD: /usr/bin/systemctl
restart edgeguard-routes.service
UI: Networks-Page jetzt mit Tabs (Interfaces + Routen). Routes-Tab
hat zwei Cards:
- Live-Routen (read-only, 30s refresh, `proto edgeguard` farblich
hervorgehoben)
- Verwaltete Routen (CRUD-Tabelle, Add/Edit-Modal mit destination/
gateway/dev/metric/table/active/comment)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Debian
277
management-ui/src/pages/Networks/Interfaces.tsx
Normal file
277
management-ui/src/pages/Networks/Interfaces.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
import { useState } from 'react'
|
||||
import { Button, Card, Form, Input, InputNumber, Modal, Select, Space, Switch, Tag, Tooltip, Typography, message } from 'antd'
|
||||
import type { ColumnsType } from 'antd/es/table'
|
||||
import { PlusOutlined } from '@ant-design/icons'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import DataTable from '../../components/DataTable'
|
||||
import ActionButtons from '../../components/ActionButtons'
|
||||
import StatusDot from '../../components/StatusDot'
|
||||
|
||||
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
|
||||
members: string[]
|
||||
role: string
|
||||
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
|
||||
members?: string[]
|
||||
role: string
|
||||
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 ?? []
|
||||
}
|
||||
|
||||
interface FwZone { id: number; name: string; description?: string | null; builtin: boolean }
|
||||
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 InterfacesTab() {
|
||||
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 { data: zones } = useQuery({ queryKey: ['fw-zones'], queryFn: listZones })
|
||||
|
||||
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'] }) },
|
||||
})
|
||||
|
||||
// Stable colour palette for role tags. Builtin zones get a fixed
|
||||
// colour; custom zones cycle through the palette by name hash so
|
||||
// the same custom zone always shows up in the same shade.
|
||||
const PALETTE = ['blue', 'green', 'orange', 'purple', 'magenta', 'cyan', 'gold', 'volcano', 'geekblue']
|
||||
const FIXED: Record<string, string> = { wan: 'blue', lan: 'green', dmz: 'orange', mgmt: 'purple', cluster: 'magenta' }
|
||||
const roleColor = (r: string): string => {
|
||||
if (FIXED[r]) return FIXED[r]
|
||||
let h = 0
|
||||
for (let i = 0; i < r.length; i++) h = (h * 31 + r.charCodeAt(i)) >>> 0
|
||||
return PALETTE[h % PALETTE.length]
|
||||
}
|
||||
|
||||
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.composition'), key: 'composition',
|
||||
render: (_, row) => {
|
||||
if (row.type === 'vlan') return <span><code>{row.parent}</code>.{row.vlan_id}</span>
|
||||
if (row.type === 'bridge' || row.type === 'bond') {
|
||||
return <Space size={4} wrap>{(row.members ?? []).map((m) => <Tag key={m}>{m}</Tag>)}</Space>
|
||||
}
|
||||
return '—'
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('networks.role'), dataIndex: 'role', key: 'role',
|
||||
render: (r: string) => <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) => <StatusDot active={v} /> },
|
||||
{
|
||||
title: t('common.actions'), key: 'actions',
|
||||
render: (_, row) => (
|
||||
<ActionButtons
|
||||
onEdit={() => {
|
||||
setEditing(row)
|
||||
form.setFieldsValue({
|
||||
name: row.name, type: row.type, parent: row.parent ?? undefined,
|
||||
vlan_id: row.vlan_id ?? undefined, members: row.members ?? [],
|
||||
role: row.role,
|
||||
mtu: row.mtu ?? undefined, active: row.active,
|
||||
description: row.description ?? undefined,
|
||||
})
|
||||
}}
|
||||
onDelete={() => del.mutate(row.id)}
|
||||
deleteConfirm={t('networks.deleteConfirm', { name: row.name })}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card title={t('networks.systemDiscovered')} className="mb-12" 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>
|
||||
|
||||
<DataTable
|
||||
rowKey="id"
|
||||
loading={isLoading}
|
||||
dataSource={ifs ?? []}
|
||||
columns={columns}
|
||||
extraActions={
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => {
|
||||
setCreating(true); form.resetFields()
|
||||
form.setFieldsValue({ type: 'ethernet', role: 'lan', active: true })
|
||||
}}>
|
||||
{t('networks.addInterface')}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<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 }) => {
|
||||
const tp = getFieldValue('type') as NetworkInterface['type'] | undefined
|
||||
const sysOptions = (sys ?? [])
|
||||
.filter((i) => i.ifname !== 'lo')
|
||||
.map((i) => ({ value: i.ifname, label: i.ifname }))
|
||||
if (tp === 'vlan') {
|
||||
return (
|
||||
<>
|
||||
<Form.Item label={t('networks.parent')} name="parent" rules={[{ required: true }]}>
|
||||
<Select placeholder={t('networks.selectParent')} showSearch options={sysOptions} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('networks.vlanId')} name="vlan_id" rules={[{ required: true }]}>
|
||||
<InputNumber min={1} max={4094} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
if (tp === 'bridge' || tp === 'bond') {
|
||||
return (
|
||||
<Form.Item
|
||||
label={t('networks.members')}
|
||||
name="members"
|
||||
rules={[{ required: true, type: 'array', min: 1, message: t('networks.membersRequired') }]}
|
||||
extra={tp === 'bridge' ? t('networks.membersHintBridge') : t('networks.membersHintBond')}
|
||||
>
|
||||
<Select
|
||||
mode="multiple"
|
||||
placeholder={t('networks.selectMembers')}
|
||||
showSearch
|
||||
options={sysOptions}
|
||||
/>
|
||||
</Form.Item>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}}
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('networks.role')}
|
||||
name="role"
|
||||
rules={[{ required: true }]}
|
||||
extra={t('networks.roleHint')}
|
||||
>
|
||||
<Select
|
||||
showSearch
|
||||
options={(zones ?? []).map(z => ({
|
||||
value: z.name,
|
||||
label: z.builtin ? z.name.toUpperCase() : `${z.name.toUpperCase()} (custom)`,
|
||||
}))}
|
||||
/>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
274
management-ui/src/pages/Networks/Routes.tsx
Normal file
274
management-ui/src/pages/Networks/Routes.tsx
Normal file
@@ -0,0 +1,274 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Button, Card, Form, Input, InputNumber, Modal, Popconfirm, Space, Switch, Table, Tag, Tooltip, Typography, message,
|
||||
} from 'antd'
|
||||
import type { ColumnsType } from 'antd/es/table'
|
||||
import {
|
||||
EnvironmentOutlined, PlusOutlined, ReloadOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import apiClient, { isEnvelope } from '../../api/client'
|
||||
|
||||
const { Text } = Typography
|
||||
|
||||
interface ManagedRoute {
|
||||
id: number
|
||||
destination: string
|
||||
gateway?: string | null
|
||||
dev?: string | null
|
||||
metric: number
|
||||
table_name: string
|
||||
active: boolean
|
||||
comment?: string | null
|
||||
}
|
||||
|
||||
interface LiveRoute {
|
||||
destination: string
|
||||
gateway?: string
|
||||
dev?: string
|
||||
protocol?: string
|
||||
scope?: string
|
||||
src?: string
|
||||
metric?: number
|
||||
table?: string
|
||||
flags?: string[]
|
||||
}
|
||||
|
||||
interface RouteFormValues {
|
||||
destination: string
|
||||
gateway?: string
|
||||
dev?: string
|
||||
metric: number
|
||||
table_name: string
|
||||
active: boolean
|
||||
comment?: string
|
||||
}
|
||||
|
||||
export default function RoutesTab() {
|
||||
const { t } = useTranslation()
|
||||
const qc = useQueryClient()
|
||||
|
||||
const managed = useQuery({
|
||||
queryKey: ['routes', 'managed'],
|
||||
queryFn: async () => {
|
||||
const r = await apiClient.get('/routes')
|
||||
return isEnvelope(r.data) ? (r.data.data as { routes: ManagedRoute[] }).routes : []
|
||||
},
|
||||
})
|
||||
|
||||
const live = useQuery({
|
||||
queryKey: ['routes', 'live'],
|
||||
queryFn: async () => {
|
||||
const r = await apiClient.get('/routes/live')
|
||||
return isEnvelope(r.data) ? (r.data.data as { routes: LiveRoute[] }).routes : []
|
||||
},
|
||||
refetchInterval: 30_000,
|
||||
})
|
||||
|
||||
const [edit, setEdit] = useState<ManagedRoute | null>(null)
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [form] = Form.useForm<RouteFormValues>()
|
||||
|
||||
const create = useMutation({
|
||||
mutationFn: async (v: RouteFormValues) => { await apiClient.post('/routes', v) },
|
||||
onSuccess: () => {
|
||||
message.success(t('common.save'))
|
||||
setCreating(false); form.resetFields()
|
||||
qc.invalidateQueries({ queryKey: ['routes'] })
|
||||
},
|
||||
onError: (e: Error) => message.error(e.message),
|
||||
})
|
||||
|
||||
const update = useMutation({
|
||||
mutationFn: async ({ id, v }: { id: number; v: RouteFormValues }) => {
|
||||
await apiClient.put(`/routes/${id}`, v)
|
||||
},
|
||||
onSuccess: () => {
|
||||
message.success(t('common.save'))
|
||||
setEdit(null); form.resetFields()
|
||||
qc.invalidateQueries({ queryKey: ['routes'] })
|
||||
},
|
||||
onError: (e: Error) => message.error(e.message),
|
||||
})
|
||||
|
||||
const del = useMutation({
|
||||
mutationFn: async (id: number) => { await apiClient.delete(`/routes/${id}`) },
|
||||
onSuccess: () => { qc.invalidateQueries({ queryKey: ['routes'] }) },
|
||||
onError: (e: Error) => message.error(e.message),
|
||||
})
|
||||
|
||||
const managedColumns: ColumnsType<ManagedRoute> = [
|
||||
{
|
||||
title: t('routes.col.destination'), dataIndex: 'destination',
|
||||
render: (v: string) => <Text style={{ fontFamily: 'monospace' }}>{v}</Text>,
|
||||
},
|
||||
{
|
||||
title: t('routes.col.gateway'), dataIndex: 'gateway',
|
||||
render: (v?: string) => v
|
||||
? <Text style={{ fontFamily: 'monospace' }}>{v}</Text>
|
||||
: <Text type="secondary">on-link</Text>,
|
||||
},
|
||||
{ title: t('routes.col.dev'), dataIndex: 'dev', width: 110,
|
||||
render: (v?: string) => v ? <Tag>{v}</Tag> : '—' },
|
||||
{ title: t('routes.col.metric'), dataIndex: 'metric', width: 80 },
|
||||
{ title: t('routes.col.table'), dataIndex: 'table_name', width: 90 },
|
||||
{ title: t('routes.col.active'), dataIndex: 'active', width: 80,
|
||||
render: (v: boolean) => v ? <Tag color="green">on</Tag> : <Tag>off</Tag> },
|
||||
{ title: t('routes.col.comment'), dataIndex: 'comment',
|
||||
render: (v?: string) => v || <Text type="secondary">—</Text> },
|
||||
{
|
||||
title: t('common.actions'), key: 'a', width: 160,
|
||||
render: (_, r) => (
|
||||
<Space size={4}>
|
||||
<Button size="small" onClick={() => {
|
||||
setEdit(r)
|
||||
form.setFieldsValue({
|
||||
destination: r.destination,
|
||||
gateway: r.gateway ?? undefined,
|
||||
dev: r.dev ?? undefined,
|
||||
metric: r.metric,
|
||||
table_name: r.table_name,
|
||||
active: r.active,
|
||||
comment: r.comment ?? undefined,
|
||||
})
|
||||
}}>{t('common.edit')}</Button>
|
||||
<Popconfirm title={t('routes.confirmDelete', { dest: r.destination })}
|
||||
onConfirm={() => del.mutate(r.id)}>
|
||||
<Button size="small" danger>{t('common.delete')}</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
const liveColumns: ColumnsType<LiveRoute> = [
|
||||
{ title: t('routes.col.destination'), dataIndex: 'destination',
|
||||
render: (v?: string) => (
|
||||
<Text style={{ fontFamily: 'monospace' }}>{v || 'default'}</Text>
|
||||
) },
|
||||
{ title: t('routes.col.gateway'), dataIndex: 'gateway',
|
||||
render: (v?: string) => v
|
||||
? <Text style={{ fontFamily: 'monospace' }}>{v}</Text>
|
||||
: <Text type="secondary">—</Text> },
|
||||
{ title: t('routes.col.dev'), dataIndex: 'dev', width: 110,
|
||||
render: (v?: string) => v ? <Tag>{v}</Tag> : '—' },
|
||||
{ title: t('routes.col.proto'), dataIndex: 'protocol', width: 110,
|
||||
render: (v?: string) => v
|
||||
? <Tag color={v === 'edgeguard' ? 'cyan' : 'default'}>{v}</Tag>
|
||||
: '—' },
|
||||
{ title: t('routes.col.scope'), dataIndex: 'scope', width: 90,
|
||||
render: (v?: string) => v ? <Tag>{v}</Tag> : '—' },
|
||||
{ title: t('routes.col.src'), dataIndex: 'src', width: 130,
|
||||
render: (v?: string) => v
|
||||
? <Text style={{ fontFamily: 'monospace', fontSize: 11 }}>{v}</Text>
|
||||
: <Text type="secondary">—</Text> },
|
||||
{ title: t('routes.col.metric'), dataIndex: 'metric', width: 80,
|
||||
render: (v?: number) => v ?? '—' },
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card
|
||||
size="small"
|
||||
title={
|
||||
<Space>
|
||||
<EnvironmentOutlined />
|
||||
{t('routes.liveTitle')}
|
||||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||||
({(live.data ?? []).length})
|
||||
</Text>
|
||||
</Space>
|
||||
}
|
||||
extra={
|
||||
<Tooltip title={t('routes.refreshTooltip')}>
|
||||
<Button size="small" icon={<ReloadOutlined />}
|
||||
loading={live.isFetching}
|
||||
onClick={() => live.refetch()}>{t('common.refresh')}</Button>
|
||||
</Tooltip>
|
||||
}
|
||||
className="mb-16"
|
||||
>
|
||||
<Text type="secondary">{t('routes.liveIntro')}</Text>
|
||||
<Table
|
||||
rowKey={(r, idx) => `${r.destination}-${r.dev}-${r.metric}-${idx}`}
|
||||
size="small"
|
||||
dataSource={live.data ?? []}
|
||||
columns={liveColumns}
|
||||
pagination={{ pageSize: 25, showSizeChanger: true, pageSizeOptions: [25, 50, 100] }}
|
||||
locale={{ emptyText: t('routes.liveEmpty') }}
|
||||
style={{ marginTop: 12 }}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
size="small"
|
||||
title={t('routes.managedTitle')}
|
||||
extra={
|
||||
<Button type="primary" size="small" icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
setCreating(true); form.resetFields()
|
||||
form.setFieldsValue({
|
||||
metric: 100, table_name: 'main', active: true,
|
||||
destination: '', gateway: '', dev: '',
|
||||
})
|
||||
}}>
|
||||
{t('routes.add')}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Text type="secondary">{t('routes.managedIntro')}</Text>
|
||||
<Table
|
||||
rowKey="id"
|
||||
size="small"
|
||||
loading={managed.isFetching}
|
||||
dataSource={managed.data ?? []}
|
||||
columns={managedColumns}
|
||||
pagination={false}
|
||||
locale={{ emptyText: t('routes.empty') }}
|
||||
style={{ marginTop: 12 }}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title={edit ? t('routes.editTitle') : t('routes.addTitle')}
|
||||
open={edit !== null || creating}
|
||||
onCancel={() => { setEdit(null); setCreating(false); form.resetFields() }}
|
||||
onOk={() => form.submit()}
|
||||
confirmLoading={create.isPending || update.isPending}
|
||||
width={560}
|
||||
>
|
||||
<Form form={form} layout="vertical"
|
||||
onFinish={(v) => edit ? update.mutate({ id: edit.id, v }) : create.mutate(v)}>
|
||||
<Form.Item label={t('routes.col.destination')} name="destination"
|
||||
rules={[{ required: true }]} extra={t('routes.destExtra')}>
|
||||
<Input placeholder="10.0.5.0/24" />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('routes.col.gateway')} name="gateway"
|
||||
extra={t('routes.gatewayExtra')}>
|
||||
<Input placeholder="192.168.1.1" />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('routes.col.dev')} name="dev"
|
||||
extra={t('routes.devExtra')}>
|
||||
<Input placeholder="ens18" />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('routes.col.metric')} name="metric"
|
||||
extra={t('routes.metricExtra')}>
|
||||
<InputNumber min={0} max={65535} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('routes.col.table')} name="table_name"
|
||||
extra={t('routes.tableExtra')}>
|
||||
<Input placeholder="main" />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('routes.col.comment')} name="comment">
|
||||
<Input.TextArea rows={2} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('routes.col.active')} name="active" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,153 +1,17 @@
|
||||
import { useState } from 'react'
|
||||
import { Button, Card, Form, Input, InputNumber, Modal, Select, Space, Switch, Tag, Tooltip, Typography, message } from 'antd'
|
||||
import type { ColumnsType } from 'antd/es/table'
|
||||
import { ClusterOutlined, PlusOutlined } from '@ant-design/icons'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { Tabs } from 'antd'
|
||||
import { ClusterOutlined } from '@ant-design/icons'
|
||||
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'
|
||||
|
||||
interface NetworkInterface {
|
||||
id: number
|
||||
name: string
|
||||
type: 'ethernet' | 'vlan' | 'bond' | 'bridge' | 'wireguard'
|
||||
parent?: string | null
|
||||
vlan_id?: number | null
|
||||
members: string[]
|
||||
role: string
|
||||
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
|
||||
members?: string[]
|
||||
role: string
|
||||
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 ?? []
|
||||
}
|
||||
|
||||
interface FwZone { id: number; name: string; description?: string | null; builtin: boolean }
|
||||
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 ?? []
|
||||
}
|
||||
import InterfacesTab from './Interfaces'
|
||||
import RoutesTab from './Routes'
|
||||
|
||||
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 { data: zones } = useQuery({ queryKey: ['fw-zones'], queryFn: listZones })
|
||||
|
||||
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'] }) },
|
||||
})
|
||||
|
||||
// Stable colour palette for role tags. Builtin zones get a fixed
|
||||
// colour; custom zones cycle through the palette by name hash so
|
||||
// the same custom zone always shows up in the same shade.
|
||||
const PALETTE = ['blue', 'green', 'orange', 'purple', 'magenta', 'cyan', 'gold', 'volcano', 'geekblue']
|
||||
const FIXED: Record<string, string> = { wan: 'blue', lan: 'green', dmz: 'orange', mgmt: 'purple', cluster: 'magenta' }
|
||||
const roleColor = (r: string): string => {
|
||||
if (FIXED[r]) return FIXED[r]
|
||||
let h = 0
|
||||
for (let i = 0; i < r.length; i++) h = (h * 31 + r.charCodeAt(i)) >>> 0
|
||||
return PALETTE[h % PALETTE.length]
|
||||
}
|
||||
|
||||
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.composition'), key: 'composition',
|
||||
render: (_, row) => {
|
||||
if (row.type === 'vlan') return <span><code>{row.parent}</code>.{row.vlan_id}</span>
|
||||
if (row.type === 'bridge' || row.type === 'bond') {
|
||||
return <Space size={4} wrap>{(row.members ?? []).map((m) => <Tag key={m}>{m}</Tag>)}</Space>
|
||||
}
|
||||
return '—'
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('networks.role'), dataIndex: 'role', key: 'role',
|
||||
render: (r: string) => <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) => <StatusDot active={v} /> },
|
||||
{
|
||||
title: t('common.actions'), key: 'actions',
|
||||
render: (_, row) => (
|
||||
<ActionButtons
|
||||
onEdit={() => {
|
||||
setEditing(row)
|
||||
form.setFieldsValue({
|
||||
name: row.name, type: row.type, parent: row.parent ?? undefined,
|
||||
vlan_id: row.vlan_id ?? undefined, members: row.members ?? [],
|
||||
role: row.role,
|
||||
mtu: row.mtu ?? undefined, active: row.active,
|
||||
description: row.description ?? undefined,
|
||||
})
|
||||
}}
|
||||
onDelete={() => del.mutate(row.id)}
|
||||
deleteConfirm={t('networks.deleteConfirm', { name: row.name })}
|
||||
/>
|
||||
),
|
||||
},
|
||||
const tabs = [
|
||||
{ key: 'interfaces', label: t('networks.tabs.interfaces'), children: <InterfacesTab /> },
|
||||
{ key: 'routes', label: t('networks.tabs.routes'), children: <RoutesTab /> },
|
||||
]
|
||||
|
||||
return (
|
||||
@@ -157,128 +21,7 @@ export default function NetworksPage() {
|
||||
title={t('networks.title')}
|
||||
subtitle={t('networks.intro')}
|
||||
/>
|
||||
|
||||
<Card title={t('networks.systemDiscovered')} className="mb-12" 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>
|
||||
|
||||
<DataTable
|
||||
rowKey="id"
|
||||
loading={isLoading}
|
||||
dataSource={ifs ?? []}
|
||||
columns={columns}
|
||||
extraActions={
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => {
|
||||
setCreating(true); form.resetFields()
|
||||
form.setFieldsValue({ type: 'ethernet', role: 'lan', active: true })
|
||||
}}>
|
||||
{t('networks.addInterface')}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<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 }) => {
|
||||
const tp = getFieldValue('type') as NetworkInterface['type'] | undefined
|
||||
const sysOptions = (sys ?? [])
|
||||
.filter((i) => i.ifname !== 'lo')
|
||||
.map((i) => ({ value: i.ifname, label: i.ifname }))
|
||||
if (tp === 'vlan') {
|
||||
return (
|
||||
<>
|
||||
<Form.Item label={t('networks.parent')} name="parent" rules={[{ required: true }]}>
|
||||
<Select placeholder={t('networks.selectParent')} showSearch options={sysOptions} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t('networks.vlanId')} name="vlan_id" rules={[{ required: true }]}>
|
||||
<InputNumber min={1} max={4094} style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
if (tp === 'bridge' || tp === 'bond') {
|
||||
return (
|
||||
<Form.Item
|
||||
label={t('networks.members')}
|
||||
name="members"
|
||||
rules={[{ required: true, type: 'array', min: 1, message: t('networks.membersRequired') }]}
|
||||
extra={tp === 'bridge' ? t('networks.membersHintBridge') : t('networks.membersHintBond')}
|
||||
>
|
||||
<Select
|
||||
mode="multiple"
|
||||
placeholder={t('networks.selectMembers')}
|
||||
showSearch
|
||||
options={sysOptions}
|
||||
/>
|
||||
</Form.Item>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}}
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('networks.role')}
|
||||
name="role"
|
||||
rules={[{ required: true }]}
|
||||
extra={t('networks.roleHint')}
|
||||
>
|
||||
<Select
|
||||
showSearch
|
||||
options={(zones ?? []).map(z => ({
|
||||
value: z.name,
|
||||
label: z.builtin ? z.name.toUpperCase() : `${z.name.toUpperCase()} (custom)`,
|
||||
}))}
|
||||
/>
|
||||
</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>
|
||||
<Tabs items={tabs} defaultActiveKey="interfaces" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user