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
@@ -24,6 +24,8 @@ import (
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/services/audit"
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/services/backends"
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/services/domains"
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/services/ipaddresses"
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/services/networkifs"
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/services/routingrules"
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/services/session"
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/services/setup"
|
||||
@@ -118,12 +120,16 @@ func main() {
|
||||
domainsRepo := domains.New(pool)
|
||||
backendsRepo := backends.New(pool)
|
||||
routingRepo := routingrules.New(pool)
|
||||
ifsRepo := networkifs.New(pool)
|
||||
ipsRepo := ipaddresses.New(pool)
|
||||
|
||||
authed := v1.Group("")
|
||||
authed.Use(requireAuth)
|
||||
handlers.NewDomainsHandler(domainsRepo, routingRepo, auditRepo, nodeID).Register(authed)
|
||||
handlers.NewBackendsHandler(backendsRepo, auditRepo, nodeID).Register(authed)
|
||||
handlers.NewRoutingRulesHandler(routingRepo, auditRepo, nodeID).Register(authed)
|
||||
handlers.NewNetworksHandler(ifsRepo, ipsRepo, auditRepo, nodeID).Register(authed)
|
||||
handlers.NewIPAddressesHandler(ipsRepo, auditRepo, nodeID).Register(authed)
|
||||
handlers.NewClusterHandler(clusterStore, nodeID).Register(authed)
|
||||
}
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ ProtectKernelModules=true
|
||||
ProtectControlGroups=true
|
||||
PrivateTmp=true
|
||||
PrivateDevices=true
|
||||
RestrictAddressFamilies=AF_UNIX AF_INET AF_INET6
|
||||
RestrictAddressFamilies=AF_UNIX AF_INET AF_INET6 AF_NETLINK
|
||||
SystemCallFilter=@system-service
|
||||
ReadWritePaths=/etc/edgeguard /var/lib/edgeguard /var/log/edgeguard
|
||||
|
||||
|
||||
72
internal/database/migrations/0009_networks.sql
Normal file
72
internal/database/migrations/0009_networks.sql
Normal file
@@ -0,0 +1,72 @@
|
||||
-- +goose Up
|
||||
-- +goose StatementBegin
|
||||
|
||||
-- Network interfaces declared by the operator. The kernel-side
|
||||
-- interfaces (eth0, eth1, ...) appear here via "discovery" — same
|
||||
-- name as the OS device. VLAN/bond/bridge interfaces are operator-
|
||||
-- created and the runtime renderer (Phase-3) will translate them
|
||||
-- into /etc/systemd/network/*.network files.
|
||||
--
|
||||
-- role drives where the firewall/HAProxy generators expect this
|
||||
-- interface to live: 'wan' = public-facing, 'lan' = internal,
|
||||
-- 'dmz' = quarantined, 'mgmt' = admin-only, 'cluster' = peer-mTLS.
|
||||
CREATE TABLE IF NOT EXISTS network_interfaces (
|
||||
id BIGSERIAL PRIMARY KEY,
|
||||
name TEXT NOT NULL,
|
||||
type TEXT NOT NULL DEFAULT 'ethernet',
|
||||
parent TEXT,
|
||||
vlan_id INTEGER,
|
||||
role TEXT NOT NULL DEFAULT 'lan',
|
||||
mtu INTEGER,
|
||||
active BOOLEAN NOT NULL DEFAULT TRUE,
|
||||
description TEXT,
|
||||
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
|
||||
updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
|
||||
CONSTRAINT network_interfaces_name_unique UNIQUE (name),
|
||||
CONSTRAINT network_interfaces_type_check CHECK (type IN ('ethernet', 'vlan', 'bond', 'bridge', 'wireguard')),
|
||||
CONSTRAINT network_interfaces_role_check CHECK (role IN ('wan', 'lan', 'dmz', 'mgmt', 'cluster')),
|
||||
CONSTRAINT network_interfaces_vlan_check CHECK (
|
||||
(type = 'vlan' AND vlan_id BETWEEN 1 AND 4094 AND parent IS NOT NULL)
|
||||
OR (type <> 'vlan')
|
||||
)
|
||||
);
|
||||
|
||||
CREATE INDEX IF NOT EXISTS idx_network_interfaces_role ON network_interfaces (role);
|
||||
CREATE INDEX IF NOT EXISTS idx_network_interfaces_active ON network_interfaces (active) WHERE active;
|
||||
|
||||
-- IP addresses bound to a declared interface.
|
||||
--
|
||||
-- is_vip flags addresses that should follow the cluster's active
|
||||
-- node (Phase-3 floating-IP / VRRP-via-hoster-API logic). vip_priority
|
||||
-- gives the failover preference (higher wins); ignored for non-VIP
|
||||
-- rows.
|
||||
--
|
||||
-- The same address can live on the same interface only once
|
||||
-- (UNIQUE), but the same address may legitimately appear on
|
||||
-- different interfaces (e.g. as anycast endpoint).
|
||||
CREATE TABLE IF NOT EXISTS ip_addresses (
|
||||
id BIGSERIAL PRIMARY KEY,
|
||||
interface_id BIGINT NOT NULL REFERENCES network_interfaces(id) ON DELETE CASCADE,
|
||||
address TEXT NOT NULL,
|
||||
prefix INTEGER NOT NULL,
|
||||
is_vip BOOLEAN NOT NULL DEFAULT FALSE,
|
||||
vip_priority INTEGER,
|
||||
description TEXT,
|
||||
active BOOLEAN NOT NULL DEFAULT TRUE,
|
||||
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
|
||||
updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
|
||||
CONSTRAINT ip_addresses_iface_addr_unique UNIQUE (interface_id, address),
|
||||
CONSTRAINT ip_addresses_prefix_check CHECK (prefix BETWEEN 0 AND 128)
|
||||
);
|
||||
|
||||
CREATE INDEX IF NOT EXISTS idx_ip_addresses_iface ON ip_addresses (interface_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_ip_addresses_vip ON ip_addresses (is_vip) WHERE is_vip;
|
||||
CREATE INDEX IF NOT EXISTS idx_ip_addresses_active ON ip_addresses (active) WHERE active;
|
||||
|
||||
-- +goose StatementEnd
|
||||
|
||||
-- +goose Down
|
||||
-- +goose StatementBegin
|
||||
DROP TABLE IF EXISTS ip_addresses;
|
||||
DROP TABLE IF EXISTS network_interfaces;
|
||||
-- +goose StatementEnd
|
||||
116
internal/handlers/ipaddresses.go
Normal file
116
internal/handlers/ipaddresses.go
Normal file
@@ -0,0 +1,116 @@
|
||||
package handlers
|
||||
|
||||
import (
|
||||
"errors"
|
||||
"strconv"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/handlers/response"
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/models"
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/services/audit"
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/services/ipaddresses"
|
||||
)
|
||||
|
||||
type IPAddressesHandler struct {
|
||||
Repo *ipaddresses.Repo
|
||||
Audit *audit.Repo
|
||||
NodeID string
|
||||
}
|
||||
|
||||
func NewIPAddressesHandler(repo *ipaddresses.Repo, a *audit.Repo, nodeID string) *IPAddressesHandler {
|
||||
return &IPAddressesHandler{Repo: repo, Audit: a, NodeID: nodeID}
|
||||
}
|
||||
|
||||
func (h *IPAddressesHandler) Register(rg *gin.RouterGroup) {
|
||||
g := rg.Group("/ip-addresses")
|
||||
g.GET("", h.List)
|
||||
g.POST("", h.Create)
|
||||
g.GET("/:id", h.Get)
|
||||
g.PUT("/:id", h.Update)
|
||||
g.DELETE("/:id", h.Delete)
|
||||
}
|
||||
|
||||
func (h *IPAddressesHandler) List(c *gin.Context) {
|
||||
out, err := h.Repo.List(c.Request.Context())
|
||||
if err != nil {
|
||||
response.Internal(c, err)
|
||||
return
|
||||
}
|
||||
response.OK(c, gin.H{"ip_addresses": out})
|
||||
}
|
||||
|
||||
func (h *IPAddressesHandler) Get(c *gin.Context) {
|
||||
id, ok := parseID(c)
|
||||
if !ok {
|
||||
return
|
||||
}
|
||||
x, err := h.Repo.Get(c.Request.Context(), id)
|
||||
if err != nil {
|
||||
if errors.Is(err, ipaddresses.ErrNotFound) {
|
||||
response.NotFound(c, err)
|
||||
return
|
||||
}
|
||||
response.Internal(c, err)
|
||||
return
|
||||
}
|
||||
response.OK(c, x)
|
||||
}
|
||||
|
||||
func (h *IPAddressesHandler) Create(c *gin.Context) {
|
||||
var req models.IPAddress
|
||||
if err := c.ShouldBindJSON(&req); err != nil {
|
||||
response.BadRequest(c, err)
|
||||
return
|
||||
}
|
||||
out, err := h.Repo.Create(c.Request.Context(), req)
|
||||
if err != nil {
|
||||
response.Internal(c, err)
|
||||
return
|
||||
}
|
||||
_ = h.Audit.Log(c.Request.Context(), actorOf(c), "ip_address.create",
|
||||
req.Address, out, h.NodeID)
|
||||
response.Created(c, out)
|
||||
}
|
||||
|
||||
func (h *IPAddressesHandler) Update(c *gin.Context) {
|
||||
id, ok := parseID(c)
|
||||
if !ok {
|
||||
return
|
||||
}
|
||||
var req models.IPAddress
|
||||
if err := c.ShouldBindJSON(&req); err != nil {
|
||||
response.BadRequest(c, err)
|
||||
return
|
||||
}
|
||||
out, err := h.Repo.Update(c.Request.Context(), id, req)
|
||||
if err != nil {
|
||||
if errors.Is(err, ipaddresses.ErrNotFound) {
|
||||
response.NotFound(c, err)
|
||||
return
|
||||
}
|
||||
response.Internal(c, err)
|
||||
return
|
||||
}
|
||||
_ = h.Audit.Log(c.Request.Context(), actorOf(c), "ip_address.update",
|
||||
out.Address, out, h.NodeID)
|
||||
response.OK(c, out)
|
||||
}
|
||||
|
||||
func (h *IPAddressesHandler) Delete(c *gin.Context) {
|
||||
id, ok := parseID(c)
|
||||
if !ok {
|
||||
return
|
||||
}
|
||||
if err := h.Repo.Delete(c.Request.Context(), id); err != nil {
|
||||
if errors.Is(err, ipaddresses.ErrNotFound) {
|
||||
response.NotFound(c, err)
|
||||
return
|
||||
}
|
||||
response.Internal(c, err)
|
||||
return
|
||||
}
|
||||
_ = h.Audit.Log(c.Request.Context(), actorOf(c), "ip_address.delete",
|
||||
strconv.FormatInt(id, 10), gin.H{"id": id}, h.NodeID)
|
||||
response.NoContent(c)
|
||||
}
|
||||
132
internal/handlers/networks.go
Normal file
132
internal/handlers/networks.go
Normal file
@@ -0,0 +1,132 @@
|
||||
package handlers
|
||||
|
||||
import (
|
||||
"errors"
|
||||
"strconv"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/handlers/response"
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/models"
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/services/audit"
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/services/ipaddresses"
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/services/networkifs"
|
||||
)
|
||||
|
||||
type NetworksHandler struct {
|
||||
Repo *networkifs.Repo
|
||||
IPs *ipaddresses.Repo
|
||||
Audit *audit.Repo
|
||||
NodeID string
|
||||
}
|
||||
|
||||
func NewNetworksHandler(repo *networkifs.Repo, ips *ipaddresses.Repo, a *audit.Repo, nodeID string) *NetworksHandler {
|
||||
return &NetworksHandler{Repo: repo, IPs: ips, Audit: a, NodeID: nodeID}
|
||||
}
|
||||
|
||||
func (h *NetworksHandler) Register(rg *gin.RouterGroup) {
|
||||
g := rg.Group("/network-interfaces")
|
||||
g.GET("", h.List)
|
||||
g.POST("", h.Create)
|
||||
g.GET("/:id", h.Get)
|
||||
g.PUT("/:id", h.Update)
|
||||
g.DELETE("/:id", h.Delete)
|
||||
g.GET("/:id/ip-addresses", h.ListIPs)
|
||||
}
|
||||
|
||||
func (h *NetworksHandler) List(c *gin.Context) {
|
||||
out, err := h.Repo.List(c.Request.Context())
|
||||
if err != nil {
|
||||
response.Internal(c, err)
|
||||
return
|
||||
}
|
||||
response.OK(c, gin.H{"interfaces": out})
|
||||
}
|
||||
|
||||
func (h *NetworksHandler) Get(c *gin.Context) {
|
||||
id, ok := parseID(c)
|
||||
if !ok {
|
||||
return
|
||||
}
|
||||
x, err := h.Repo.Get(c.Request.Context(), id)
|
||||
if err != nil {
|
||||
if errors.Is(err, networkifs.ErrNotFound) {
|
||||
response.NotFound(c, err)
|
||||
return
|
||||
}
|
||||
response.Internal(c, err)
|
||||
return
|
||||
}
|
||||
response.OK(c, x)
|
||||
}
|
||||
|
||||
func (h *NetworksHandler) Create(c *gin.Context) {
|
||||
var req models.NetworkInterface
|
||||
if err := c.ShouldBindJSON(&req); err != nil {
|
||||
response.BadRequest(c, err)
|
||||
return
|
||||
}
|
||||
out, err := h.Repo.Create(c.Request.Context(), req)
|
||||
if err != nil {
|
||||
response.Internal(c, err)
|
||||
return
|
||||
}
|
||||
_ = h.Audit.Log(c.Request.Context(), actorOf(c), "network_interface.create", req.Name, out, h.NodeID)
|
||||
response.Created(c, out)
|
||||
}
|
||||
|
||||
func (h *NetworksHandler) Update(c *gin.Context) {
|
||||
id, ok := parseID(c)
|
||||
if !ok {
|
||||
return
|
||||
}
|
||||
var req models.NetworkInterface
|
||||
if err := c.ShouldBindJSON(&req); err != nil {
|
||||
response.BadRequest(c, err)
|
||||
return
|
||||
}
|
||||
out, err := h.Repo.Update(c.Request.Context(), id, req)
|
||||
if err != nil {
|
||||
if errors.Is(err, networkifs.ErrNotFound) {
|
||||
response.NotFound(c, err)
|
||||
return
|
||||
}
|
||||
response.Internal(c, err)
|
||||
return
|
||||
}
|
||||
_ = h.Audit.Log(c.Request.Context(), actorOf(c), "network_interface.update", out.Name, out, h.NodeID)
|
||||
response.OK(c, out)
|
||||
}
|
||||
|
||||
func (h *NetworksHandler) Delete(c *gin.Context) {
|
||||
id, ok := parseID(c)
|
||||
if !ok {
|
||||
return
|
||||
}
|
||||
if err := h.Repo.Delete(c.Request.Context(), id); err != nil {
|
||||
if errors.Is(err, networkifs.ErrNotFound) {
|
||||
response.NotFound(c, err)
|
||||
return
|
||||
}
|
||||
response.Internal(c, err)
|
||||
return
|
||||
}
|
||||
_ = h.Audit.Log(c.Request.Context(), actorOf(c), "network_interface.delete",
|
||||
strconv.FormatInt(id, 10), gin.H{"id": id}, h.NodeID)
|
||||
response.NoContent(c)
|
||||
}
|
||||
|
||||
// ListIPs surfaces the addresses bound to a single interface — UI
|
||||
// uses this for the per-interface IP-list tab.
|
||||
func (h *NetworksHandler) ListIPs(c *gin.Context) {
|
||||
id, ok := parseID(c)
|
||||
if !ok {
|
||||
return
|
||||
}
|
||||
out, err := h.IPs.ListForInterface(c.Request.Context(), id)
|
||||
if err != nil {
|
||||
response.Internal(c, err)
|
||||
return
|
||||
}
|
||||
response.OK(c, gin.H{"ip_addresses": out})
|
||||
}
|
||||
@@ -2,6 +2,7 @@ package handlers
|
||||
|
||||
import (
|
||||
"log/slog"
|
||||
"net"
|
||||
"net/http"
|
||||
"os"
|
||||
"os/exec"
|
||||
@@ -30,6 +31,7 @@ func (h *SystemHandler) Register(rg *gin.RouterGroup) {
|
||||
g.GET("/health", h.Health)
|
||||
g.GET("/package-versions", h.PackageVersions)
|
||||
g.POST("/upgrade", h.Upgrade)
|
||||
g.GET("/interfaces", h.Interfaces)
|
||||
}
|
||||
|
||||
func (h *SystemHandler) Health(c *gin.Context) {
|
||||
@@ -116,6 +118,108 @@ rm -f /tmp/edgeguard-upgrade.sh
|
||||
})
|
||||
}
|
||||
|
||||
// addrInfo + interfaceInfo mirror the relevant subset of `ip -j addr
|
||||
// show` so the frontend keeps its existing parsing code.
|
||||
type addrInfo struct {
|
||||
Family string `json:"family"` // "inet" | "inet6"
|
||||
Local string `json:"local"`
|
||||
PrefixLen int `json:"prefixlen"`
|
||||
}
|
||||
|
||||
type interfaceInfo struct {
|
||||
IfIndex int `json:"ifindex"`
|
||||
IfName string `json:"ifname"`
|
||||
Flags []string `json:"flags"`
|
||||
MTU int `json:"mtu"`
|
||||
LinkType string `json:"link_type,omitempty"`
|
||||
Address string `json:"address,omitempty"`
|
||||
AddrInfo []addrInfo `json:"addr_info"`
|
||||
}
|
||||
|
||||
// Interfaces enumerates the kernel-side network interfaces using
|
||||
// Go's net.Interfaces() — no shell-out, no AF_NETLINK exception
|
||||
// in the systemd hardening required (the original `ip -j addr`
|
||||
// approach was blocked by RestrictAddressFamilies).
|
||||
//
|
||||
// Output shape mirrors `ip -j addr show` enough for the UI's
|
||||
// Networks "system-discovered" card.
|
||||
func (h *SystemHandler) Interfaces(c *gin.Context) {
|
||||
ifaces, err := net.Interfaces()
|
||||
if err != nil {
|
||||
slog.Warn("system/interfaces: net.Interfaces failed", "error", err)
|
||||
response.OK(c, gin.H{"interfaces": []interfaceInfo{}})
|
||||
return
|
||||
}
|
||||
out := make([]interfaceInfo, 0, len(ifaces))
|
||||
for _, ifc := range ifaces {
|
||||
info := interfaceInfo{
|
||||
IfIndex: ifc.Index,
|
||||
IfName: ifc.Name,
|
||||
MTU: ifc.MTU,
|
||||
Address: ifc.HardwareAddr.String(),
|
||||
LinkType: classifyLinkType(ifc),
|
||||
Flags: flagsToList(ifc.Flags),
|
||||
AddrInfo: []addrInfo{},
|
||||
}
|
||||
addrs, err := ifc.Addrs()
|
||||
if err != nil {
|
||||
out = append(out, info)
|
||||
continue
|
||||
}
|
||||
for _, a := range addrs {
|
||||
ipnet, ok := a.(*net.IPNet)
|
||||
if !ok {
|
||||
continue
|
||||
}
|
||||
family := "inet"
|
||||
if ipnet.IP.To4() == nil {
|
||||
family = "inet6"
|
||||
}
|
||||
ones, _ := ipnet.Mask.Size()
|
||||
info.AddrInfo = append(info.AddrInfo, addrInfo{
|
||||
Family: family,
|
||||
Local: ipnet.IP.String(),
|
||||
PrefixLen: ones,
|
||||
})
|
||||
}
|
||||
out = append(out, info)
|
||||
}
|
||||
response.OK(c, gin.H{"interfaces": out})
|
||||
}
|
||||
|
||||
func classifyLinkType(ifc net.Interface) string {
|
||||
if ifc.Flags&net.FlagLoopback != 0 {
|
||||
return "loopback"
|
||||
}
|
||||
if len(ifc.HardwareAddr) > 0 {
|
||||
return "ether"
|
||||
}
|
||||
return ""
|
||||
}
|
||||
|
||||
func flagsToList(f net.Flags) []string {
|
||||
var out []string
|
||||
if f&net.FlagUp != 0 {
|
||||
out = append(out, "UP")
|
||||
}
|
||||
if f&net.FlagBroadcast != 0 {
|
||||
out = append(out, "BROADCAST")
|
||||
}
|
||||
if f&net.FlagLoopback != 0 {
|
||||
out = append(out, "LOOPBACK")
|
||||
}
|
||||
if f&net.FlagPointToPoint != 0 {
|
||||
out = append(out, "POINTOPOINT")
|
||||
}
|
||||
if f&net.FlagMulticast != 0 {
|
||||
out = append(out, "MULTICAST")
|
||||
}
|
||||
if f&net.FlagRunning != 0 {
|
||||
out = append(out, "LOWER_UP")
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
// parseAptPolicy extracts "Installed: x" and "Candidate: y" from
|
||||
// apt-cache policy output. Both can be "(none)"; we normalise that to
|
||||
// empty string.
|
||||
|
||||
18
internal/models/ip_address.go
Normal file
18
internal/models/ip_address.go
Normal file
@@ -0,0 +1,18 @@
|
||||
package models
|
||||
|
||||
import "time"
|
||||
|
||||
type IPAddress struct {
|
||||
ID int64 `gorm:"primaryKey" json:"id"`
|
||||
InterfaceID int64 `gorm:"column:interface_id" json:"interface_id"`
|
||||
Address string `gorm:"column:address" json:"address"`
|
||||
Prefix int `gorm:"column:prefix" json:"prefix"`
|
||||
IsVIP bool `gorm:"column:is_vip" json:"is_vip"`
|
||||
VIPPriority *int `gorm:"column:vip_priority" json:"vip_priority,omitempty"`
|
||||
Description *string `gorm:"column:description" json:"description,omitempty"`
|
||||
Active bool `gorm:"column:active" json:"active"`
|
||||
CreatedAt time.Time `gorm:"column:created_at" json:"created_at"`
|
||||
UpdatedAt time.Time `gorm:"column:updated_at" json:"updated_at"`
|
||||
}
|
||||
|
||||
func (IPAddress) TableName() string { return "ip_addresses" }
|
||||
19
internal/models/network_interface.go
Normal file
19
internal/models/network_interface.go
Normal file
@@ -0,0 +1,19 @@
|
||||
package models
|
||||
|
||||
import "time"
|
||||
|
||||
type NetworkInterface struct {
|
||||
ID int64 `gorm:"primaryKey" json:"id"`
|
||||
Name string `gorm:"column:name;uniqueIndex" json:"name"`
|
||||
Type string `gorm:"column:type" json:"type"`
|
||||
Parent *string `gorm:"column:parent" json:"parent,omitempty"`
|
||||
VLANID *int `gorm:"column:vlan_id" json:"vlan_id,omitempty"`
|
||||
Role string `gorm:"column:role" json:"role"`
|
||||
MTU *int `gorm:"column:mtu" json:"mtu,omitempty"`
|
||||
Active bool `gorm:"column:active" json:"active"`
|
||||
Description *string `gorm:"column:description" json:"description,omitempty"`
|
||||
CreatedAt time.Time `gorm:"column:created_at" json:"created_at"`
|
||||
UpdatedAt time.Time `gorm:"column:updated_at" json:"updated_at"`
|
||||
}
|
||||
|
||||
func (NetworkInterface) TableName() string { return "network_interfaces" }
|
||||
129
internal/services/ipaddresses/ipaddresses.go
Normal file
129
internal/services/ipaddresses/ipaddresses.go
Normal file
@@ -0,0 +1,129 @@
|
||||
// Package ipaddresses implements CRUD against the `ip_addresses`
|
||||
// table — addresses bound to operator-declared network interfaces,
|
||||
// with is_vip + vip_priority for cluster-failover semantics.
|
||||
package ipaddresses
|
||||
|
||||
import (
|
||||
"context"
|
||||
"errors"
|
||||
|
||||
"github.com/jackc/pgx/v5"
|
||||
"github.com/jackc/pgx/v5/pgxpool"
|
||||
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/models"
|
||||
)
|
||||
|
||||
var ErrNotFound = errors.New("ip address not found")
|
||||
|
||||
type Repo struct {
|
||||
Pool *pgxpool.Pool
|
||||
}
|
||||
|
||||
func New(pool *pgxpool.Pool) *Repo { return &Repo{Pool: pool} }
|
||||
|
||||
const baseSelect = `
|
||||
SELECT id, interface_id, address, prefix, is_vip, vip_priority,
|
||||
description, active, created_at, updated_at
|
||||
FROM ip_addresses
|
||||
`
|
||||
|
||||
func (r *Repo) List(ctx context.Context) ([]models.IPAddress, error) {
|
||||
rows, err := r.Pool.Query(ctx, baseSelect+" ORDER BY interface_id ASC, address ASC")
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
defer rows.Close()
|
||||
out := make([]models.IPAddress, 0, 8)
|
||||
for rows.Next() {
|
||||
a, err := scan(rows)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
out = append(out, *a)
|
||||
}
|
||||
return out, rows.Err()
|
||||
}
|
||||
|
||||
func (r *Repo) ListForInterface(ctx context.Context, ifaceID int64) ([]models.IPAddress, error) {
|
||||
rows, err := r.Pool.Query(ctx, baseSelect+
|
||||
" WHERE interface_id = $1 ORDER BY address ASC", ifaceID)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
defer rows.Close()
|
||||
out := make([]models.IPAddress, 0, 4)
|
||||
for rows.Next() {
|
||||
a, err := scan(rows)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
out = append(out, *a)
|
||||
}
|
||||
return out, rows.Err()
|
||||
}
|
||||
|
||||
func (r *Repo) Get(ctx context.Context, id int64) (*models.IPAddress, error) {
|
||||
row := r.Pool.QueryRow(ctx, baseSelect+" WHERE id = $1", id)
|
||||
a, err := scan(row)
|
||||
if err != nil {
|
||||
if errors.Is(err, pgx.ErrNoRows) {
|
||||
return nil, ErrNotFound
|
||||
}
|
||||
return nil, err
|
||||
}
|
||||
return a, nil
|
||||
}
|
||||
|
||||
func (r *Repo) Create(ctx context.Context, a models.IPAddress) (*models.IPAddress, error) {
|
||||
row := r.Pool.QueryRow(ctx, `
|
||||
INSERT INTO ip_addresses (interface_id, address, prefix, is_vip, vip_priority, description, active)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7)
|
||||
RETURNING id, interface_id, address, prefix, is_vip, vip_priority,
|
||||
description, active, created_at, updated_at`,
|
||||
a.InterfaceID, a.Address, a.Prefix, a.IsVIP, a.VIPPriority, a.Description, a.Active)
|
||||
return scan(row)
|
||||
}
|
||||
|
||||
func (r *Repo) Update(ctx context.Context, id int64, a models.IPAddress) (*models.IPAddress, error) {
|
||||
row := r.Pool.QueryRow(ctx, `
|
||||
UPDATE ip_addresses SET
|
||||
interface_id = $1, address = $2, prefix = $3,
|
||||
is_vip = $4, vip_priority = $5, description = $6, active = $7,
|
||||
updated_at = NOW()
|
||||
WHERE id = $8
|
||||
RETURNING id, interface_id, address, prefix, is_vip, vip_priority,
|
||||
description, active, created_at, updated_at`,
|
||||
a.InterfaceID, a.Address, a.Prefix, a.IsVIP, a.VIPPriority, a.Description, a.Active, id)
|
||||
out, err := scan(row)
|
||||
if err != nil {
|
||||
if errors.Is(err, pgx.ErrNoRows) {
|
||||
return nil, ErrNotFound
|
||||
}
|
||||
return nil, err
|
||||
}
|
||||
return out, nil
|
||||
}
|
||||
|
||||
func (r *Repo) Delete(ctx context.Context, id int64) error {
|
||||
tag, err := r.Pool.Exec(ctx, `DELETE FROM ip_addresses WHERE id = $1`, id)
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
if tag.RowsAffected() == 0 {
|
||||
return ErrNotFound
|
||||
}
|
||||
return nil
|
||||
}
|
||||
|
||||
func scan(row interface{ Scan(...any) error }) (*models.IPAddress, error) {
|
||||
var a models.IPAddress
|
||||
if err := row.Scan(
|
||||
&a.ID, &a.InterfaceID, &a.Address, &a.Prefix,
|
||||
&a.IsVIP, &a.VIPPriority,
|
||||
&a.Description, &a.Active,
|
||||
&a.CreatedAt, &a.UpdatedAt,
|
||||
); err != nil {
|
||||
return nil, err
|
||||
}
|
||||
return &a, nil
|
||||
}
|
||||
110
internal/services/networkifs/networkifs.go
Normal file
110
internal/services/networkifs/networkifs.go
Normal file
@@ -0,0 +1,110 @@
|
||||
// Package networkifs implements CRUD against the
|
||||
// `network_interfaces` table — operator-declared interfaces
|
||||
// (ethernet, vlan, bond, bridge, wireguard).
|
||||
package networkifs
|
||||
|
||||
import (
|
||||
"context"
|
||||
"errors"
|
||||
|
||||
"github.com/jackc/pgx/v5"
|
||||
"github.com/jackc/pgx/v5/pgxpool"
|
||||
|
||||
"git.netcell-it.de/projekte/edgeguard-native/internal/models"
|
||||
)
|
||||
|
||||
var ErrNotFound = errors.New("network interface not found")
|
||||
|
||||
type Repo struct {
|
||||
Pool *pgxpool.Pool
|
||||
}
|
||||
|
||||
func New(pool *pgxpool.Pool) *Repo { return &Repo{Pool: pool} }
|
||||
|
||||
const baseSelect = `
|
||||
SELECT id, name, type, parent, vlan_id, role, mtu, active, description,
|
||||
created_at, updated_at
|
||||
FROM network_interfaces
|
||||
`
|
||||
|
||||
func (r *Repo) List(ctx context.Context) ([]models.NetworkInterface, error) {
|
||||
rows, err := r.Pool.Query(ctx, baseSelect+" ORDER BY name ASC")
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
defer rows.Close()
|
||||
out := make([]models.NetworkInterface, 0, 8)
|
||||
for rows.Next() {
|
||||
i, err := scan(rows)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
out = append(out, *i)
|
||||
}
|
||||
return out, rows.Err()
|
||||
}
|
||||
|
||||
func (r *Repo) Get(ctx context.Context, id int64) (*models.NetworkInterface, error) {
|
||||
row := r.Pool.QueryRow(ctx, baseSelect+" WHERE id = $1", id)
|
||||
i, err := scan(row)
|
||||
if err != nil {
|
||||
if errors.Is(err, pgx.ErrNoRows) {
|
||||
return nil, ErrNotFound
|
||||
}
|
||||
return nil, err
|
||||
}
|
||||
return i, nil
|
||||
}
|
||||
|
||||
func (r *Repo) Create(ctx context.Context, i models.NetworkInterface) (*models.NetworkInterface, error) {
|
||||
row := r.Pool.QueryRow(ctx, `
|
||||
INSERT INTO network_interfaces (name, type, parent, vlan_id, role, mtu, active, description)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
|
||||
RETURNING id, name, type, parent, vlan_id, role, mtu, active, description,
|
||||
created_at, updated_at`,
|
||||
i.Name, i.Type, i.Parent, i.VLANID, i.Role, i.MTU, i.Active, i.Description)
|
||||
return scan(row)
|
||||
}
|
||||
|
||||
func (r *Repo) Update(ctx context.Context, id int64, i models.NetworkInterface) (*models.NetworkInterface, error) {
|
||||
row := r.Pool.QueryRow(ctx, `
|
||||
UPDATE network_interfaces SET
|
||||
name = $1, type = $2, parent = $3, vlan_id = $4,
|
||||
role = $5, mtu = $6, active = $7, description = $8,
|
||||
updated_at = NOW()
|
||||
WHERE id = $9
|
||||
RETURNING id, name, type, parent, vlan_id, role, mtu, active, description,
|
||||
created_at, updated_at`,
|
||||
i.Name, i.Type, i.Parent, i.VLANID, i.Role, i.MTU, i.Active, i.Description, id)
|
||||
out, err := scan(row)
|
||||
if err != nil {
|
||||
if errors.Is(err, pgx.ErrNoRows) {
|
||||
return nil, ErrNotFound
|
||||
}
|
||||
return nil, err
|
||||
}
|
||||
return out, nil
|
||||
}
|
||||
|
||||
func (r *Repo) Delete(ctx context.Context, id int64) error {
|
||||
tag, err := r.Pool.Exec(ctx, `DELETE FROM network_interfaces WHERE id = $1`, id)
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
if tag.RowsAffected() == 0 {
|
||||
return ErrNotFound
|
||||
}
|
||||
return nil
|
||||
}
|
||||
|
||||
func scan(row interface{ Scan(...any) error }) (*models.NetworkInterface, error) {
|
||||
var i models.NetworkInterface
|
||||
if err := row.Scan(
|
||||
&i.ID, &i.Name, &i.Type, &i.Parent, &i.VLANID,
|
||||
&i.Role, &i.MTU, &i.Active, &i.Description,
|
||||
&i.CreatedAt, &i.UpdatedAt,
|
||||
); err != nil {
|
||||
return nil, err
|
||||
}
|
||||
return &i, nil
|
||||
}
|
||||
@@ -16,21 +16,37 @@ const DashboardPage = lazy(() => import('./pages/Dashboard'))
|
||||
const DomainsPage = lazy(() => import('./pages/Domains'))
|
||||
const BackendsPage = lazy(() => import('./pages/Backends'))
|
||||
const RoutingRulesPage = lazy(() => import('./pages/RoutingRules'))
|
||||
const NetworksPage = lazy(() => import('./pages/Networks'))
|
||||
const IPAddressesPage = lazy(() => import('./pages/IPAddresses'))
|
||||
const ClusterPage = lazy(() => import('./pages/Cluster'))
|
||||
const SettingsPage = lazy(() => import('./pages/Settings'))
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
retry: 1,
|
||||
refetchOnWindowFocus: false,
|
||||
},
|
||||
queries: { retry: 1, refetchOnWindowFocus: false },
|
||||
},
|
||||
})
|
||||
|
||||
// RequireAuth wraps protected routes. If we have a cached user but
|
||||
// the cookie is stale, the first API call will 401 and the global
|
||||
// interceptor in api/client.ts boots the user back to /login.
|
||||
// Theme tokens 1:1 wie mail-gateway/enconf — colorPrimary, font,
|
||||
// borderRadius, controlHeight. enterprise.css ergänzt mit eigenen
|
||||
// Layout-Klassen (.app-layout, .sidebar, .header, …).
|
||||
const antdTheme = {
|
||||
token: {
|
||||
colorPrimary: '#0EA5E9',
|
||||
borderRadius: 6,
|
||||
borderRadiusLG: 8,
|
||||
fontSize: 13,
|
||||
fontWeightStrong: 600,
|
||||
fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
|
||||
colorBgContainer: '#FFFFFF',
|
||||
colorBgLayout: '#F8FAFC',
|
||||
colorBorder: '#E2E8F0',
|
||||
colorText: '#0F172A',
|
||||
colorTextSecondary: '#64748B',
|
||||
controlHeight: 34,
|
||||
},
|
||||
}
|
||||
|
||||
function RequireAuth({ children }: { children: ReactNode }) {
|
||||
const user = useAuthStore((s) => s.user)
|
||||
const location = useLocation()
|
||||
@@ -40,9 +56,6 @@ function RequireAuth({ children }: { children: ReactNode }) {
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
// SetupGate fetches /setup/status on mount; if the server says
|
||||
// !completed, hard-redirect to /setup. This catches the case of a
|
||||
// fresh install where the user goes straight to /dashboard.
|
||||
function SetupGate({ children }: { children: ReactNode }) {
|
||||
const location = useLocation()
|
||||
useEffect(() => {
|
||||
@@ -65,11 +78,11 @@ export default function App() {
|
||||
const antdLocale = i18n.language?.startsWith('de') ? deDE : enUS
|
||||
|
||||
return (
|
||||
<ConfigProvider locale={antdLocale}>
|
||||
<ConfigProvider theme={antdTheme} locale={antdLocale}>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<BrowserRouter>
|
||||
<SetupGate>
|
||||
<Suspense fallback={<Spin size="large" style={{ margin: '40vh auto', display: 'block' }} />}>
|
||||
<Suspense fallback={<div className="loader-center"><Spin size="large" /></div>}>
|
||||
<Routes>
|
||||
<Route path="/setup" element={<SetupPage onComplete={(u: SessionUser) => useAuthStore.getState().set(u)} />} />
|
||||
<Route path="/login" element={<LoginPage onLogin={(u: SessionUser) => useAuthStore.getState().set(u)} />} />
|
||||
@@ -80,6 +93,8 @@ export default function App() {
|
||||
<Route path="/domains" element={<DomainsPage />} />
|
||||
<Route path="/backends" element={<BackendsPage />} />
|
||||
<Route path="/routing-rules" element={<RoutingRulesPage />} />
|
||||
<Route path="/networks" element={<NetworksPage />} />
|
||||
<Route path="/ip-addresses" element={<IPAddressesPage />} />
|
||||
<Route path="/cluster" element={<ClusterPage />} />
|
||||
<Route path="/settings" element={<SettingsPage />} />
|
||||
</Route>
|
||||
|
||||
@@ -1,25 +1,52 @@
|
||||
import { Layout } from 'antd'
|
||||
import { Outlet } from 'react-router-dom'
|
||||
import { useState } from 'react'
|
||||
import { Outlet, useLocation } from 'react-router-dom'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import Header from './Header'
|
||||
import Sidebar from './Sidebar'
|
||||
import Header from './Header'
|
||||
import UpdateBanner from '../UpdateBanner'
|
||||
|
||||
const { Sider, Content } = Layout
|
||||
// PAGE_TITLES maps the pathname to an i18n nav key. Header reads
|
||||
// this to render "where you are". Empty fallback = app.title.
|
||||
const PAGE_TITLES: Record<string, string> = {
|
||||
'/dashboard': 'nav.dashboard',
|
||||
'/domains': 'nav.domains',
|
||||
'/backends': 'nav.backends',
|
||||
'/routing-rules': 'nav.routing',
|
||||
'/networks': 'nav.networks',
|
||||
'/ip-addresses': 'nav.ipAddresses',
|
||||
'/cluster': 'nav.cluster',
|
||||
'/settings': 'nav.settings',
|
||||
}
|
||||
|
||||
export default function AppLayout() {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false)
|
||||
const location = useLocation()
|
||||
const { t } = useTranslation()
|
||||
|
||||
const titleKey = Object.entries(PAGE_TITLES)
|
||||
.find(([p]) => location.pathname === p || location.pathname.startsWith(p + '/'))?.[1]
|
||||
const title = titleKey ? t(titleKey) : t('app.title')
|
||||
|
||||
return (
|
||||
<Layout style={{ minHeight: '100vh' }}>
|
||||
<Sider width={220} theme="dark">
|
||||
<Sidebar />
|
||||
</Sider>
|
||||
<Layout>
|
||||
<Header />
|
||||
<div className="app-layout">
|
||||
{sidebarOpen && (
|
||||
<div
|
||||
className="sidebar-overlay"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
|
||||
<Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
|
||||
|
||||
<main className="main-content">
|
||||
<Header pageTitle={title} onMenuToggle={() => setSidebarOpen(true)} />
|
||||
<UpdateBanner />
|
||||
<Content style={{ padding: '24px', background: '#f5f5f5' }}>
|
||||
<div className="content-area">
|
||||
<Outlet />
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
import { LogoutOutlined, UserOutlined } from '@ant-design/icons'
|
||||
import { Dropdown, Layout, Space, Typography } from 'antd'
|
||||
import { Button, Dropdown, Select, Space } from 'antd'
|
||||
import { GlobalOutlined, LogoutOutlined, MenuOutlined, UserOutlined } from '@ant-design/icons'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import apiClient from '../../api/client'
|
||||
import { useAuthStore } from '../../stores/auth'
|
||||
|
||||
const { Header: AntHeader } = Layout
|
||||
interface HeaderProps {
|
||||
pageTitle: string
|
||||
onMenuToggle: () => void
|
||||
}
|
||||
|
||||
export default function Header() {
|
||||
const { t } = useTranslation()
|
||||
export default function Header({ pageTitle, onMenuToggle }: HeaderProps) {
|
||||
const { t, i18n } = useTranslation()
|
||||
const navigate = useNavigate()
|
||||
const user = useAuthStore((s) => s.user)
|
||||
const clear = useAuthStore((s) => s.clear)
|
||||
@@ -20,8 +23,36 @@ export default function Header() {
|
||||
navigate('/login', { replace: true })
|
||||
}
|
||||
|
||||
const onLangChange = (value: string) => {
|
||||
void i18n.changeLanguage(value)
|
||||
}
|
||||
|
||||
return (
|
||||
<AntHeader style={{ background: '#fff', padding: '0 24px', display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<header className="header">
|
||||
<div className="header-left">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<MenuOutlined />}
|
||||
onClick={onMenuToggle}
|
||||
className="header-menu-toggle"
|
||||
aria-label="Toggle navigation"
|
||||
/>
|
||||
<h1 className="header-title">{pageTitle}</h1>
|
||||
</div>
|
||||
<div className="header-actions">
|
||||
<Select
|
||||
size="small"
|
||||
value={i18n.resolvedLanguage ?? 'de'}
|
||||
onChange={onLangChange}
|
||||
suffixIcon={<GlobalOutlined />}
|
||||
variant="borderless"
|
||||
options={[
|
||||
{ value: 'de', label: 'DE' },
|
||||
{ value: 'en', label: 'EN' },
|
||||
]}
|
||||
popupMatchSelectWidth={false}
|
||||
/>
|
||||
{user && (
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: [
|
||||
@@ -33,12 +64,14 @@ export default function Header() {
|
||||
},
|
||||
],
|
||||
}}
|
||||
placement="bottomRight"
|
||||
>
|
||||
<Space style={{ cursor: 'pointer' }}>
|
||||
<UserOutlined />
|
||||
<Typography.Text>{user?.actor ?? '—'}</Typography.Text>
|
||||
</Space>
|
||||
<Button type="text" className="header-user">
|
||||
<Space><UserOutlined />{user.actor}</Space>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</AntHeader>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,34 +1,100 @@
|
||||
import { ApartmentOutlined, BranchesOutlined, DashboardOutlined, DatabaseOutlined, GlobalOutlined, SettingOutlined } from '@ant-design/icons'
|
||||
import { Menu, Typography } from 'antd'
|
||||
import { useNavigate, useLocation } from 'react-router-dom'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
import type { ReactNode } from 'react'
|
||||
import {
|
||||
ApartmentOutlined,
|
||||
BranchesOutlined,
|
||||
ClusterOutlined,
|
||||
DashboardOutlined,
|
||||
DatabaseOutlined,
|
||||
GlobalOutlined,
|
||||
NodeIndexOutlined,
|
||||
SettingOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function Sidebar() {
|
||||
const { t } = useTranslation()
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
interface SidebarProps {
|
||||
isOpen: boolean
|
||||
onClose?: () => void
|
||||
}
|
||||
|
||||
const items = [
|
||||
{ key: '/dashboard', icon: <DashboardOutlined />, label: t('nav.dashboard') },
|
||||
{ key: '/domains', icon: <GlobalOutlined />, label: t('nav.domains') },
|
||||
{ key: '/backends', icon: <DatabaseOutlined />, label: t('nav.backends') },
|
||||
{ key: '/routing-rules', icon: <BranchesOutlined />, label: t('nav.routing') },
|
||||
{ key: '/cluster', icon: <ApartmentOutlined />, label: t('nav.cluster') },
|
||||
{ key: '/settings', icon: <SettingOutlined />, label: t('nav.settings') },
|
||||
interface NavItem {
|
||||
path: string
|
||||
labelKey: string
|
||||
icon: ReactNode
|
||||
}
|
||||
|
||||
interface NavSection {
|
||||
labelKey: string
|
||||
items: NavItem[]
|
||||
}
|
||||
|
||||
const NAV: NavSection[] = [
|
||||
{
|
||||
labelKey: 'nav.section.overview',
|
||||
items: [
|
||||
{ path: '/dashboard', labelKey: 'nav.dashboard', icon: <DashboardOutlined /> },
|
||||
],
|
||||
},
|
||||
{
|
||||
labelKey: 'nav.section.routing',
|
||||
items: [
|
||||
{ path: '/domains', labelKey: 'nav.domains', icon: <GlobalOutlined /> },
|
||||
{ path: '/backends', labelKey: 'nav.backends', icon: <DatabaseOutlined /> },
|
||||
{ path: '/routing-rules', labelKey: 'nav.routing', icon: <BranchesOutlined /> },
|
||||
],
|
||||
},
|
||||
{
|
||||
labelKey: 'nav.section.network',
|
||||
items: [
|
||||
{ path: '/networks', labelKey: 'nav.networks', icon: <ClusterOutlined /> },
|
||||
{ path: '/ip-addresses', labelKey: 'nav.ipAddresses', icon: <NodeIndexOutlined /> },
|
||||
],
|
||||
},
|
||||
{
|
||||
labelKey: 'nav.section.system',
|
||||
items: [
|
||||
{ path: '/cluster', labelKey: 'nav.cluster', icon: <ApartmentOutlined /> },
|
||||
{ path: '/settings', labelKey: 'nav.settings', icon: <SettingOutlined /> },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const VERSION = '0.0.1-dev'
|
||||
|
||||
export default function Sidebar({ isOpen, onClose }: SidebarProps) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Typography.Title level={4} style={{ color: '#fff', padding: '16px', margin: 0 }}>
|
||||
{t('app.title')}
|
||||
</Typography.Title>
|
||||
<Menu
|
||||
theme="dark"
|
||||
mode="inline"
|
||||
selectedKeys={[location.pathname]}
|
||||
items={items}
|
||||
onClick={(e) => navigate(e.key)}
|
||||
/>
|
||||
<aside className={`sidebar${isOpen ? ' open' : ''}`}>
|
||||
<div className="sidebar-logo">
|
||||
<div className="sidebar-logo-icon">EG</div>
|
||||
<span className="sidebar-logo-text">{t('app.title')}</span>
|
||||
</div>
|
||||
|
||||
{NAV.map((section) => (
|
||||
<div key={section.labelKey} className="sidebar-section">
|
||||
<div className="sidebar-section-label">{t(section.labelKey)}</div>
|
||||
<ul className="sidebar-menu">
|
||||
{section.items.map((item) => (
|
||||
<li key={item.path} className="sidebar-menu-item">
|
||||
<NavLink
|
||||
to={item.path}
|
||||
onClick={onClose}
|
||||
className={({ isActive }) =>
|
||||
isActive ? 'sidebar-menu-item active' : ''
|
||||
}
|
||||
end
|
||||
>
|
||||
{item.icon}
|
||||
<span>{t(item.labelKey)}</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="sidebar-version">v{VERSION}</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -8,11 +8,54 @@
|
||||
"domains": "Domains",
|
||||
"backends": "Backends",
|
||||
"routing": "Routing",
|
||||
"networks": "Netzwerk-Interfaces",
|
||||
"ipAddresses": "IP-Adressen",
|
||||
"ssl": "SSL-Zertifikate",
|
||||
"vpn": "VPN",
|
||||
"firewall": "Firewall",
|
||||
"cluster": "Cluster",
|
||||
"settings": "Einstellungen"
|
||||
"settings": "Einstellungen",
|
||||
"section": {
|
||||
"overview": "Übersicht",
|
||||
"routing": "Routing",
|
||||
"network": "Netzwerk",
|
||||
"system": "System"
|
||||
}
|
||||
},
|
||||
"networks": {
|
||||
"title": "Netzwerk-Interfaces",
|
||||
"intro": "Verwalte WAN-, LAN-, VLAN- und Bond-Interfaces. Read-only-Discovery der Kernel-Interfaces oben; deklarierte Konfiguration unten — runtime-Apply via systemd-networkd folgt in einem späteren Release.",
|
||||
"systemDiscovered": "System-Interfaces (read-only)",
|
||||
"addInterface": "Interface hinzufügen",
|
||||
"editInterface": "Interface bearbeiten",
|
||||
"name": "Name",
|
||||
"type": "Typ",
|
||||
"parent": "Parent-Interface",
|
||||
"vlan": "VLAN",
|
||||
"vlanId": "VLAN-ID",
|
||||
"role": "Rolle",
|
||||
"mtu": "MTU",
|
||||
"active": "Aktiv",
|
||||
"description": "Beschreibung",
|
||||
"actions": "Aktionen",
|
||||
"deleteConfirm": "Interface {{name}} wirklich löschen?"
|
||||
},
|
||||
"ips": {
|
||||
"title": "IP-Adressen",
|
||||
"intro": "Adressen, die EdgeGuard verwaltet — inklusive VIPs für Cluster-Failover. Bindung an die deklarierten Interfaces oben.",
|
||||
"addAddress": "Adresse hinzufügen",
|
||||
"editAddress": "Adresse bearbeiten",
|
||||
"interface": "Interface",
|
||||
"selectInterface": "Interface wählen",
|
||||
"address": "Adresse",
|
||||
"prefix": "Prefix",
|
||||
"vip": "VIP",
|
||||
"vipFlag": "Als VIP markieren",
|
||||
"vipPriority": "VIP-Priorität (Cluster-Failover)",
|
||||
"active": "Aktiv",
|
||||
"description": "Beschreibung",
|
||||
"actions": "Aktionen",
|
||||
"deleteConfirm": "Adresse {{addr}} wirklich löschen?"
|
||||
},
|
||||
"auth": {
|
||||
"loginTitle": "Anmelden",
|
||||
|
||||
@@ -8,11 +8,54 @@
|
||||
"domains": "Domains",
|
||||
"backends": "Backends",
|
||||
"routing": "Routing",
|
||||
"networks": "Network interfaces",
|
||||
"ipAddresses": "IP addresses",
|
||||
"ssl": "SSL certificates",
|
||||
"vpn": "VPN",
|
||||
"firewall": "Firewall",
|
||||
"cluster": "Cluster",
|
||||
"settings": "Settings"
|
||||
"settings": "Settings",
|
||||
"section": {
|
||||
"overview": "Overview",
|
||||
"routing": "Routing",
|
||||
"network": "Network",
|
||||
"system": "System"
|
||||
}
|
||||
},
|
||||
"networks": {
|
||||
"title": "Network interfaces",
|
||||
"intro": "Manage WAN, LAN, VLAN and bond interfaces. Read-only kernel discovery above; declared configuration below — runtime apply via systemd-networkd lands in a later release.",
|
||||
"systemDiscovered": "System interfaces (read-only)",
|
||||
"addInterface": "Add interface",
|
||||
"editInterface": "Edit interface",
|
||||
"name": "Name",
|
||||
"type": "Type",
|
||||
"parent": "Parent interface",
|
||||
"vlan": "VLAN",
|
||||
"vlanId": "VLAN ID",
|
||||
"role": "Role",
|
||||
"mtu": "MTU",
|
||||
"active": "Active",
|
||||
"description": "Description",
|
||||
"actions": "Actions",
|
||||
"deleteConfirm": "Really delete interface {{name}}?"
|
||||
},
|
||||
"ips": {
|
||||
"title": "IP addresses",
|
||||
"intro": "Addresses managed by EdgeGuard — including VIPs that follow the active cluster node on failover.",
|
||||
"addAddress": "Add address",
|
||||
"editAddress": "Edit address",
|
||||
"interface": "Interface",
|
||||
"selectInterface": "Select interface",
|
||||
"address": "Address",
|
||||
"prefix": "Prefix",
|
||||
"vip": "VIP",
|
||||
"vipFlag": "Mark as VIP",
|
||||
"vipPriority": "VIP priority (cluster failover)",
|
||||
"active": "Active",
|
||||
"description": "Description",
|
||||
"actions": "Actions",
|
||||
"deleteConfirm": "Really delete address {{addr}}?"
|
||||
},
|
||||
"auth": {
|
||||
"loginTitle": "Sign in",
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
html, body, #root {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import './styles/enterprise.css'
|
||||
import './i18n'
|
||||
import App from './App.tsx'
|
||||
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
2710
management-ui/src/styles/enterprise.css
Normal file
2710
management-ui/src/styles/enterprise.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user