mirror of
https://github.com/MengMengCode/CLICD.git
synced 2026-08-06 05:52:19 +08:00
添加管理员端路由管理功能，查看当前系统剩余的NAT4或者V6地址剩余情况
This commit is contained in:
MengMengCode
@@ -0,0 +1,151 @@
|
||||
package api
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
"sort"
|
||||
"strconv"
|
||||
|
||||
"clicd/internal/config"
|
||||
"clicd/internal/lxc"
|
||||
)
|
||||
|
||||
type routeCapacity struct {
|
||||
Used int `json:"used"`
|
||||
Remaining string `json:"remaining"`
|
||||
Total string `json:"total"`
|
||||
}
|
||||
|
||||
type nat4Route struct {
|
||||
ContainerID int `json:"container_id"`
|
||||
ContainerName string `json:"container_name"`
|
||||
LXCName string `json:"lxc_name"`
|
||||
Status string `json:"status"`
|
||||
IP string `json:"ip"`
|
||||
HostPort int `json:"host_port"`
|
||||
ContainerPort int `json:"container_port"`
|
||||
Protocol string `json:"protocol"`
|
||||
Description string `json:"description"`
|
||||
}
|
||||
|
||||
type ipv6Route struct {
|
||||
ContainerID int `json:"container_id"`
|
||||
ContainerName string `json:"container_name"`
|
||||
LXCName string `json:"lxc_name"`
|
||||
Status string `json:"status"`
|
||||
Address string `json:"address"`
|
||||
PrefixLen int `json:"prefix_len"`
|
||||
Interface string `json:"interface"`
|
||||
}
|
||||
|
||||
type routingResponse struct {
|
||||
NAT4 routeCapacity `json:"nat4"`
|
||||
IPv6 routeCapacity `json:"ipv6"`
|
||||
NAT4Mappings []nat4Route `json:"nat4_mappings"`
|
||||
IPv6Assignments []ipv6Route `json:"ipv6_assignments"`
|
||||
IPv6Prefixes []lxc.IPv6PrefixInfo `json:"ipv6_prefixes"`
|
||||
}
|
||||
|
||||
func HandleRouting(w http.ResponseWriter, r *http.Request) {
|
||||
if r.Method != http.MethodGet {
|
||||
jsonResponse(w, http.StatusMethodNotAllowed, APIResponse{Success: false, Message: "Method not allowed"})
|
||||
return
|
||||
}
|
||||
|
||||
nat4Mappings := make([]nat4Route, 0)
|
||||
usedPorts := map[int]bool{}
|
||||
ipv6Assignments := make([]ipv6Route, 0)
|
||||
|
||||
const nat4StartPort = 20000
|
||||
const nat4EndPort = 65535
|
||||
|
||||
for _, c := range config.AppConfig.Containers {
|
||||
for _, pm := range c.PortMappings {
|
||||
if pm.HostPort >= nat4StartPort && pm.HostPort <= nat4EndPort {
|
||||
usedPorts[pm.HostPort] = true
|
||||
}
|
||||
nat4Mappings = append(nat4Mappings, nat4Route{
|
||||
ContainerID: c.ID,
|
||||
ContainerName: c.Name,
|
||||
LXCName: c.LxcName(),
|
||||
Status: c.Status,
|
||||
IP: c.IP,
|
||||
HostPort: pm.HostPort,
|
||||
ContainerPort: pm.ContainerPort,
|
||||
Protocol: pm.Protocol,
|
||||
Description: pm.Description,
|
||||
})
|
||||
}
|
||||
if c.IPv6 != "" {
|
||||
ipv6Assignments = append(ipv6Assignments, ipv6Route{
|
||||
ContainerID: c.ID,
|
||||
ContainerName: c.Name,
|
||||
LXCName: c.LxcName(),
|
||||
Status: c.Status,
|
||||
Address: c.IPv6,
|
||||
PrefixLen: c.IPv6PrefixLen,
|
||||
Interface: c.IPv6Interface,
|
||||
})
|
||||
}
|
||||
}
|
||||
sort.SliceStable(nat4Mappings, func(i, j int) bool {
|
||||
if nat4Mappings[i].HostPort == nat4Mappings[j].HostPort {
|
||||
return nat4Mappings[i].ContainerName < nat4Mappings[j].ContainerName
|
||||
}
|
||||
return nat4Mappings[i].HostPort < nat4Mappings[j].HostPort
|
||||
})
|
||||
sort.SliceStable(ipv6Assignments, func(i, j int) bool {
|
||||
return ipv6Assignments[i].Address < ipv6Assignments[j].Address
|
||||
})
|
||||
|
||||
const totalNAT4Ports = nat4EndPort - nat4StartPort + 1
|
||||
nat4Used := len(usedPorts)
|
||||
nat4Remaining := totalNAT4Ports - nat4Used
|
||||
if nat4Remaining < 0 {
|
||||
nat4Remaining = 0
|
||||
}
|
||||
|
||||
prefixes := lxc.DetectPublicIPv6Prefixes()
|
||||
ipv6Total := "0"
|
||||
ipv6Remaining := "0"
|
||||
if len(prefixes) > 0 {
|
||||
ipv6Total = lxc.IPv6PrefixCapacity(prefixes[0].PrefixLen)
|
||||
ipv6Remaining = subtractCapacity(ipv6Total, len(ipv6Assignments))
|
||||
}
|
||||
|
||||
jsonResponse(w, http.StatusOK, APIResponse{
|
||||
Success: true,
|
||||
Data: routingResponse{
|
||||
NAT4: routeCapacity{
|
||||
Used: nat4Used,
|
||||
Remaining: strconv.Itoa(nat4Remaining),
|
||||
Total: strconv.Itoa(totalNAT4Ports),
|
||||
},
|
||||
IPv6: routeCapacity{
|
||||
Used: len(ipv6Assignments),
|
||||
Remaining: ipv6Remaining,
|
||||
Total: ipv6Total,
|
||||
},
|
||||
NAT4Mappings: nat4Mappings,
|
||||
IPv6Assignments: ipv6Assignments,
|
||||
IPv6Prefixes: prefixes,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
func subtractCapacity(total string, used int) string {
|
||||
if total == "" || total == "0" {
|
||||
return "0"
|
||||
}
|
||||
if total == "large" {
|
||||
return "large"
|
||||
}
|
||||
parsed, err := strconv.ParseInt(total, 10, 64)
|
||||
if err != nil {
|
||||
return total
|
||||
}
|
||||
remaining := parsed - int64(used)
|
||||
if remaining < 0 {
|
||||
remaining = 0
|
||||
}
|
||||
return strconv.FormatInt(remaining, 10)
|
||||
}
|
||||
@@ -728,6 +728,27 @@ func ensureIPv6ForwardRules(ipv6 string) {
|
||||
}
|
||||
}
|
||||
|
||||
func removeHostIPv6Routing(ipv6, uplink string) {
|
||||
removeIPv6NAT66(ipv6, uplink)
|
||||
removeIPv6ForwardRules(ipv6)
|
||||
runQuiet("ip", "-6", "route", "del", ipv6+"/128", "dev", "lxcbr0")
|
||||
if uplink != "" {
|
||||
runQuiet("ip", "-6", "neigh", "del", "proxy", ipv6, "dev", uplink)
|
||||
}
|
||||
}
|
||||
|
||||
func removeIPv6ForwardRules(ipv6 string) {
|
||||
rules := [][]string{
|
||||
{"FORWARD", "-i", "lxcbr0", "-s", ipv6 + "/128", "-j", "ACCEPT"},
|
||||
{"FORWARD", "-o", "lxcbr0", "-d", ipv6 + "/128", "-j", "ACCEPT"},
|
||||
}
|
||||
for _, rule := range rules {
|
||||
del := append([]string{"-D"}, rule...)
|
||||
for exec.Command("ip6tables", del...).Run() == nil {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func containerIPv6ConnectivityOK(lxcName string) bool {
|
||||
targets := []string{"2606:4700:4700::1111", "2001:4860:4860::8888"}
|
||||
for _, target := range targets {
|
||||
|
||||
@@ -1425,7 +1425,7 @@ func (m *Manager) DestroyContainer(id int) error {
|
||||
}
|
||||
lxcName := c.LxcName()
|
||||
if c.IPv6 != "" && c.IPv6Interface != "" {
|
||||
removeIPv6NAT66(c.IPv6, c.IPv6Interface)
|
||||
removeHostIPv6Routing(c.IPv6, c.IPv6Interface)
|
||||
}
|
||||
|
||||
if err := m.StopContainer(id); err != nil {
|
||||
|
||||
@@ -88,6 +88,7 @@ func setupRoutes(mux *http.ServeMux) {
|
||||
mux.HandleFunc("/api/dashboard", corsMiddleware(api.AdminMiddleware(api.HandleDashboard)))
|
||||
mux.HandleFunc("/api/host-info", corsMiddleware(api.AdminMiddleware(api.HandleHostInfo)))
|
||||
mux.HandleFunc("/api/snapshots", corsMiddleware(api.AdminMiddleware(api.HandleSnapshots)))
|
||||
mux.HandleFunc("/api/routing", corsMiddleware(api.AdminMiddleware(api.HandleRouting)))
|
||||
mux.HandleFunc("/api/ipv6/status", corsMiddleware(api.AdminMiddleware(api.HandleIPv6Status)))
|
||||
mux.HandleFunc("/api/oversell", corsMiddleware(api.AdminMiddleware(api.HandleOversell)))
|
||||
mux.HandleFunc("/api/oversell/status", corsMiddleware(api.AdminMiddleware(api.HandleOversellStatus)))
|
||||
|
||||
@@ -11,6 +11,7 @@ import ApiIntegration from './pages/ApiIntegration'
|
||||
import Settings from './pages/Settings'
|
||||
import ImageManagement from './pages/ImageManagement'
|
||||
import Snapshots from './pages/Snapshots'
|
||||
import Routing from './pages/Routing'
|
||||
import Layout from './components/Layout'
|
||||
|
||||
function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
||||
@@ -59,6 +60,7 @@ function App() {
|
||||
<Route path="oversell" element={<Oversell />} />
|
||||
<Route path="security" element={<Security />} />
|
||||
<Route path="snapshots" element={<Snapshots />} />
|
||||
<Route path="routing" element={<Routing />} />
|
||||
<Route path="audit-logs" element={<AuditLogs />} />
|
||||
<Route path="api-integration" element={<ApiIntegration />} />
|
||||
<Route path="settings" element={<Settings />} />
|
||||
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
LayoutDashboard,
|
||||
LogOut,
|
||||
Package,
|
||||
Route,
|
||||
ScrollText,
|
||||
Server,
|
||||
Settings2,
|
||||
@@ -33,6 +34,7 @@ export default function Sidebar({ collapsed, onToggle }: SidebarProps) {
|
||||
const isImagesPage = location.pathname.startsWith('/images')
|
||||
const isOversellPage = location.pathname.startsWith('/oversell')
|
||||
const isSnapshotsPage = location.pathname.startsWith('/snapshots')
|
||||
const isRoutingPage = location.pathname.startsWith('/routing')
|
||||
const isAuditLogsPage = location.pathname.startsWith('/audit-logs')
|
||||
const isApiIntegrationPage = location.pathname.startsWith('/api-integration')
|
||||
const isSecurityPage = location.pathname.startsWith('/security')
|
||||
@@ -150,6 +152,18 @@ export default function Sidebar({ collapsed, onToggle }: SidebarProps) {
|
||||
{!collapsed && <span>快照管理</span>}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate('/routing')}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-colors ${
|
||||
isRoutingPage
|
||||
? 'bg-black text-white'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
<Route className="w-4 h-4" />
|
||||
{!collapsed && <span>路由管理</span>}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => navigate('/audit-logs')}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-colors ${
|
||||
|
||||
@@ -0,0 +1,289 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { Network, RefreshCw, Route, Server } from 'lucide-react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { getRoutingInfo, RoutingInfo } from '../services/api'
|
||||
|
||||
export default function Routing() {
|
||||
const navigate = useNavigate()
|
||||
const [routing, setRouting] = useState<RoutingInfo | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
const [nat4Page, setNat4Page] = useState(1)
|
||||
const [ipv6Page, setIPv6Page] = useState(1)
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
try {
|
||||
const res = await getRoutingInfo()
|
||||
setRouting(res.data.data || null)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setRefreshing(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => { fetchData() }, [fetchData])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-b-2 border-black" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const nat4Mappings = routing?.nat4_mappings || []
|
||||
const ipv6Assignments = routing?.ipv6_assignments || []
|
||||
const ipv6Prefix = routing?.ipv6_prefixes?.[0]?.prefix || '-'
|
||||
const pageSize = 10
|
||||
const nat4TotalPages = Math.max(1, Math.ceil(nat4Mappings.length / pageSize))
|
||||
const ipv6TotalPages = Math.max(1, Math.ceil(ipv6Assignments.length / pageSize))
|
||||
const currentNat4Page = Math.min(nat4Page, nat4TotalPages)
|
||||
const currentIPv6Page = Math.min(ipv6Page, ipv6TotalPages)
|
||||
const pagedNat4Mappings = nat4Mappings.slice((currentNat4Page - 1) * pageSize, currentNat4Page * pageSize)
|
||||
const pagedIPv6Assignments = ipv6Assignments.slice((currentIPv6Page - 1) * pageSize, currentIPv6Page * pageSize)
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold text-black">路由管理</h1>
|
||||
<p className="mt-1 text-sm text-gray-500">宿主机分配给 LXC 的 NAT4 端口和 IPv6 地址</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { setRefreshing(true); fetchData() }}
|
||||
disabled={refreshing}
|
||||
className="inline-flex items-center gap-2 rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />
|
||||
刷新
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<CapacityCard
|
||||
title="NAT4 端口"
|
||||
icon={<Route className="h-5 w-5 text-gray-600" />}
|
||||
remaining={routing?.nat4.remaining || '0'}
|
||||
total={routing?.nat4.total || '0'}
|
||||
used={routing?.nat4.used || 0}
|
||||
label="剩余端口 / 端口总数"
|
||||
/>
|
||||
<CapacityCard
|
||||
title="IPv6 地址"
|
||||
icon={<Network className="h-5 w-5 text-gray-600" />}
|
||||
remaining={formatCapacity(routing?.ipv6.remaining || '0')}
|
||||
total={formatCapacity(routing?.ipv6.total || '0')}
|
||||
used={routing?.ipv6.used || 0}
|
||||
label={`剩余地址 / 地址总数 · ${ipv6Prefix}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden rounded-lg border border-gray-200 bg-white">
|
||||
<div className="border-b border-gray-200 px-4 py-3">
|
||||
<div className="text-sm font-medium text-black">NAT4 端口分配</div>
|
||||
<div className="mt-1 text-xs text-gray-500">共 {nat4Mappings.length} 条映射</div>
|
||||
</div>
|
||||
{nat4Mappings.length === 0 ? (
|
||||
<EmptyState icon={<Route className="h-7 w-7 text-gray-400" />} text="暂无 NAT4 端口映射" />
|
||||
) : (
|
||||
<>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[900px] text-sm">
|
||||
<thead className="border-b border-gray-200 bg-gray-50 text-xs text-gray-500">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left font-medium">容器</th>
|
||||
<th className="px-4 py-3 text-left font-medium">LXC 名称</th>
|
||||
<th className="px-4 py-3 text-left font-medium">容器 IPv4</th>
|
||||
<th className="px-4 py-3 text-left font-medium">宿主机端口</th>
|
||||
<th className="px-4 py-3 text-left font-medium">容器端口</th>
|
||||
<th className="px-4 py-3 text-left font-medium">协议</th>
|
||||
<th className="px-4 py-3 text-left font-medium">说明</th>
|
||||
<th className="px-4 py-3 text-left font-medium">状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{pagedNat4Mappings.map((mapping, index) => (
|
||||
<tr key={`${mapping.container_id}-${mapping.host_port}-${mapping.protocol}-${index}`} className="hover:bg-gray-50">
|
||||
<td className="px-4 py-3">
|
||||
<button
|
||||
onClick={() => navigate(`/container/${mapping.container_id}`)}
|
||||
className="inline-flex items-center gap-2 text-left font-medium text-black hover:underline"
|
||||
>
|
||||
<Server className="h-4 w-4 text-gray-400" />
|
||||
{mapping.container_name}
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-xs text-gray-600">{mapping.lxc_name}</td>
|
||||
<td className="px-4 py-3 font-mono text-xs text-gray-600">{mapping.ip || '-'}</td>
|
||||
<td className="px-4 py-3 font-mono text-xs text-gray-700">{mapping.host_port}</td>
|
||||
<td className="px-4 py-3 font-mono text-xs text-gray-700">{mapping.container_port}</td>
|
||||
<td className="px-4 py-3 uppercase text-gray-600">{mapping.protocol || '-'}</td>
|
||||
<td className="px-4 py-3 text-gray-600">{mapping.description || '-'}</td>
|
||||
<td className="px-4 py-3"><StatusBadge status={mapping.status} /></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Pagination
|
||||
page={currentNat4Page}
|
||||
totalPages={nat4TotalPages}
|
||||
totalItems={nat4Mappings.length}
|
||||
pageSize={pageSize}
|
||||
onPageChange={setNat4Page}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden rounded-lg border border-gray-200 bg-white">
|
||||
<div className="border-b border-gray-200 px-4 py-3">
|
||||
<div className="text-sm font-medium text-black">IPv6 地址分配</div>
|
||||
<div className="mt-1 text-xs text-gray-500">共 {ipv6Assignments.length} 个地址</div>
|
||||
</div>
|
||||
{ipv6Assignments.length === 0 ? (
|
||||
<EmptyState icon={<Network className="h-7 w-7 text-gray-400" />} text="暂无 IPv6 地址分配" />
|
||||
) : (
|
||||
<>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[820px] text-sm">
|
||||
<thead className="border-b border-gray-200 bg-gray-50 text-xs text-gray-500">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left font-medium">容器</th>
|
||||
<th className="px-4 py-3 text-left font-medium">LXC 名称</th>
|
||||
<th className="px-4 py-3 text-left font-medium">IPv6 地址</th>
|
||||
<th className="px-4 py-3 text-left font-medium">前缀</th>
|
||||
<th className="px-4 py-3 text-left font-medium">出口网卡</th>
|
||||
<th className="px-4 py-3 text-left font-medium">状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{pagedIPv6Assignments.map((item) => (
|
||||
<tr key={`${item.container_id}-${item.address}`} className="hover:bg-gray-50">
|
||||
<td className="px-4 py-3">
|
||||
<button
|
||||
onClick={() => navigate(`/container/${item.container_id}`)}
|
||||
className="inline-flex items-center gap-2 text-left font-medium text-black hover:underline"
|
||||
>
|
||||
<Server className="h-4 w-4 text-gray-400" />
|
||||
{item.container_name}
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-xs text-gray-600">{item.lxc_name}</td>
|
||||
<td className="px-4 py-3 font-mono text-xs text-gray-700">{item.address}</td>
|
||||
<td className="px-4 py-3 font-mono text-xs text-gray-600">/{item.prefix_len || '-'}</td>
|
||||
<td className="px-4 py-3 font-mono text-xs text-gray-600">{item.interface || '-'}</td>
|
||||
<td className="px-4 py-3"><StatusBadge status={item.status} /></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Pagination
|
||||
page={currentIPv6Page}
|
||||
totalPages={ipv6TotalPages}
|
||||
totalItems={ipv6Assignments.length}
|
||||
pageSize={pageSize}
|
||||
onPageChange={setIPv6Page}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Pagination({ page, totalPages, totalItems, pageSize, onPageChange }: {
|
||||
page: number
|
||||
totalPages: number
|
||||
totalItems: number
|
||||
pageSize: number
|
||||
onPageChange: (page: number) => void
|
||||
}) {
|
||||
if (totalPages <= 1) return null
|
||||
|
||||
const start = (page - 1) * pageSize + 1
|
||||
const end = Math.min(page * pageSize, totalItems)
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-3 border-t border-gray-200 px-4 py-3 text-sm">
|
||||
<div className="text-xs text-gray-500">
|
||||
显示 {start}-{end}，共 {totalItems} 条
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => onPageChange(Math.max(1, page - 1))}
|
||||
disabled={page <= 1}
|
||||
className="rounded-md border border-gray-300 px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
上一页
|
||||
</button>
|
||||
<span className="min-w-16 text-center text-xs text-gray-500">
|
||||
{page} / {totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => onPageChange(Math.min(totalPages, page + 1))}
|
||||
disabled={page >= totalPages}
|
||||
className="rounded-md border border-gray-300 px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
下一页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CapacityCard({ title, icon, remaining, total, used, label }: {
|
||||
title: string
|
||||
icon: React.ReactNode
|
||||
remaining: string
|
||||
total: string
|
||||
used: number
|
||||
label: string
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-lg border border-gray-200 bg-white p-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-700">{title}</div>
|
||||
<div className="mt-2 flex items-end gap-2">
|
||||
<span className="text-2xl font-semibold text-black">{remaining}</span>
|
||||
<span className="pb-1 text-sm text-gray-400">/ {total}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-md bg-gray-100">
|
||||
{icon}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 text-xs text-gray-500">{label}</div>
|
||||
<div className="mt-1 text-xs text-gray-400">已分配 {used}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyState({ icon, text }: { icon: React.ReactNode; text: string }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center px-6 py-16 text-center">
|
||||
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-lg bg-gray-100">
|
||||
{icon}
|
||||
</div>
|
||||
<div className="text-sm font-medium text-gray-700">{text}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function StatusBadge({ status }: { status: string }) {
|
||||
const running = status === 'running'
|
||||
return (
|
||||
<span className={`rounded px-2 py-1 text-xs ${running ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-700'}`}>
|
||||
{running ? '运行中' : (status || '未知')}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function formatCapacity(value: string): string {
|
||||
if (value === 'large') return '充足'
|
||||
return value
|
||||
}
|
||||
@@ -283,6 +283,45 @@ export const getIPv6Status = () =>
|
||||
export const assignIPv6 = (id: ContainerIdentifier) =>
|
||||
api.post<APIResponse<Container>>(`/containers/${id}/ipv6`)
|
||||
|
||||
export interface RouteCapacity {
|
||||
used: number
|
||||
remaining: string
|
||||
total: string
|
||||
}
|
||||
|
||||
export interface NAT4Route {
|
||||
container_id: number
|
||||
container_name: string
|
||||
lxc_name: string
|
||||
status: string
|
||||
ip: string
|
||||
host_port: number
|
||||
container_port: number
|
||||
protocol: string
|
||||
description: string
|
||||
}
|
||||
|
||||
export interface IPv6Route {
|
||||
container_id: number
|
||||
container_name: string
|
||||
lxc_name: string
|
||||
status: string
|
||||
address: string
|
||||
prefix_len: number
|
||||
interface: string
|
||||
}
|
||||
|
||||
export interface RoutingInfo {
|
||||
nat4: RouteCapacity
|
||||
ipv6: RouteCapacity
|
||||
nat4_mappings: NAT4Route[]
|
||||
ipv6_assignments: IPv6Route[]
|
||||
ipv6_prefixes: IPv6PrefixInfo[]
|
||||
}
|
||||
|
||||
export const getRoutingInfo = () =>
|
||||
api.get<APIResponse<RoutingInfo>>('/routing')
|
||||
|
||||
// Templates
|
||||
export const getTemplates = () =>
|
||||
api.get<APIResponse<Template[]>>('/templates')
|
||||
|
||||
Reference in New Issue
Block a user