admin/CLICD
1
0
Fork 0
mirror of https://github.com/MengMengCode/CLICD.git synced 2026-08-07 22:24:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

网络流量、磁盘 IO 图表显示优化

Browse Source
This commit is contained in:
MengMengCode
2026-06-17 19:16:28 +08:00
parent 98ed716225
commit 49d8093f45
3 changed files with 211 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/ContainerDetail.tsx
+41 -17
View File
@@ -89,8 +89,12 @@ type MetricPoint = {
ts: number
cpu: number
memory: number
network: number
diskIO: number
network?: number
networkRx?: number
networkTx?: number
diskIO?: number
diskRead?: number
diskWrite?: number
}
type MappingDraft = {
index: number | null
@@ -214,15 +218,21 @@ export default function ContainerDetail() {
const memoryPct = memoryTotalBytes > 0
? (nextUsage.memory_usage_bytes / memoryTotalBytes) * 100
: 0
const networkBps = (nextUsage.network_rx_bps || 0) + (nextUsage.network_tx_bps || 0)
const diskIOBps = (nextUsage.disk_read_bps || 0) + (nextUsage.disk_write_bps || 0)
const networkRx = nextUsage.network_rx_bps || 0
const networkTx = nextUsage.network_tx_bps || 0
const diskRead = nextUsage.disk_read_bps || 0
const diskWrite = nextUsage.disk_write_bps || 0
const point: MetricPoint = {
ts: Date.now(),
cpu: clamp((nextUsage.cpu_usage_pct || 0) / (currentContainer.vcpu || 1)),
memory: clamp(memoryPct),
network: networkBps,
diskIO: diskIOBps,
network: networkRx + networkTx,
networkRx,
networkTx,
diskIO: diskRead + diskWrite,
diskRead,
diskWrite,
}
setHistory((prev) => {
@@ -907,20 +917,23 @@ export default function ContainerDetail() {
const ramPct = ramTotalBytes > 0 ? clamp(((usage?.memory_usage_bytes || 0) / ramTotalBytes) * 100) : 0
const loadPct = container.vcpu > 0 ? ((usage?.load1 || 0) / container.vcpu) * 100 : 0
const diskPct = container.disk_gb > 0 ? clamp(((usage?.disk_usage_bytes || 0) / (container.disk_gb * 1024 * 1024 * 1024)) * 100) : 0
const networkBps = (usage?.network_rx_bps || 0) + (usage?.network_tx_bps || 0)
const rx = usage?.network_rx_bps || 0
const networkRxBps = usage?.network_rx_bps || 0
const networkTxBps = usage?.network_tx_bps || 0
const networkBps = networkRxBps + networkTxBps
const networkDownLimit = resourceLimitValue(container.network_down_mbps, container.network_bw_mbps)
const networkUpLimit = resourceLimitValue(container.network_up_mbps, container.network_bw_mbps)
const netPct = Math.max(
directionUsagePercent(usage?.network_rx_bps || 0, networkDownLimit, 125000, 125000000),
directionUsagePercent(usage?.network_tx_bps || 0, networkUpLimit, 125000, 125000000),
directionUsagePercent(networkRxBps, networkDownLimit, 125000, 125000000),
directionUsagePercent(networkTxBps, networkUpLimit, 125000, 125000000),
)
const diskIOBps = (usage?.disk_read_bps || 0) + (usage?.disk_write_bps || 0)
const diskReadBps = usage?.disk_read_bps || 0
const diskWriteBps = usage?.disk_write_bps || 0
const diskIOBps = diskReadBps + diskWriteBps
const ioReadLimit = resourceLimitValue(container.io_read_mbps, container.io_speed_mbps)
const ioWriteLimit = resourceLimitValue(container.io_write_mbps, container.io_speed_mbps)
const diskIOPct = Math.max(
directionUsagePercent(usage?.disk_read_bps || 0, ioReadLimit, 1024 * 1024, 1024 * 1024 * 1024),
directionUsagePercent(usage?.disk_write_bps || 0, ioWriteLimit, 1024 * 1024, 1024 * 1024 * 1024),
directionUsagePercent(diskReadBps, ioReadLimit, 1024 * 1024, 1024 * 1024 * 1024),
directionUsagePercent(diskWriteBps, ioWriteLimit, 1024 * 1024, 1024 * 1024 * 1024),
)
const mappingCount = container.port_mappings?.length || 0
const mappingLimit = Math.max(container.port_mapping_limit || 0, mappingCount)
@@ -967,16 +980,24 @@ export default function ContainerDetail() {
icon: <Network className="w-5 h-5" />,
current: networkBps,
points: toChartPoints(filtered, 'network'),
series: [
{ label: '入', points: toChartPoints(filtered, 'networkRx'), current: networkRxBps, color: '#2563eb' },
{ label: '出', points: toChartPoints(filtered, 'networkTx'), current: networkTxBps, color: '#16a34a' },
],
formatValue: formatRate,
detail: `入 ${formatRate(usage?.network_rx_bps || 0)} / 出 ${formatRate(usage?.network_tx_bps || 0)}，限速占用 ${netPct.toFixed(1)}%，累计 ${formatBytes((usage?.network_rx_bytes || 0) + (usage?.network_tx_bytes || 0))}`,
detail: `入 ${formatRate(networkRxBps)} / 出 ${formatRate(networkTxBps)}，限速占用 ${netPct.toFixed(1)}%，累计 ${formatBytes((usage?.network_rx_bytes || 0) + (usage?.network_tx_bytes || 0))}`,
},
{
title: '磁盘IO',
icon: <HardDrive className="w-5 h-5" />,
current: diskIOBps,
points: toChartPoints(filtered, 'diskIO'),
series: [
{ label: '读', points: toChartPoints(filtered, 'diskRead'), current: diskReadBps, color: '#d97706' },
{ label: '写', points: toChartPoints(filtered, 'diskWrite'), current: diskWriteBps, color: '#dc2626' },
],
formatValue: formatRate,
detail: `读 ${formatRate(usage?.disk_read_bps || 0)} / 写 ${formatRate(usage?.disk_write_bps || 0)}，限速占用 ${diskIOPct.toFixed(1)}%，累计 ${formatBytes((usage?.disk_read_bytes || 0) + (usage?.disk_write_bytes || 0))}，容量 ${diskPct.toFixed(1)}%`,
detail: `读 ${formatRate(diskReadBps)} / 写 ${formatRate(diskWriteBps)}，限速占用 ${diskIOPct.toFixed(1)}%，累计 ${formatBytes((usage?.disk_read_bytes || 0) + (usage?.disk_write_bytes || 0))}，容量 ${diskPct.toFixed(1)}%`,
},
]
@@ -2514,8 +2535,11 @@ function formatDirectionalLimit(firstLabel: string, firstValue: number, secondLa
return `${firstLabel} ${formatLimit(firstValue, unit)} / ${secondLabel} ${formatLimit(secondValue, unit)}`
}
function toChartPoints<T extends keyof Omit<MetricPoint, 'ts'>>(history: MetricPoint[], key: T): ChartPoint[] {
return history.map((point) => ({ ts: point.ts, value: Number(point[key]) || 0 }))
function toChartPoints(history: MetricPoint[], key: keyof Omit<MetricPoint, 'ts'>): ChartPoint[] {
return history.flatMap((point) => {
const value = Number(point[key])
return Number.isFinite(value) ? [{ ts: point.ts, value }] : []
})
}
function formatPercent(value: number): string {
frontend/src/pages/Dashboard.tsx
+35 -8
View File
@@ -13,8 +13,12 @@ type HostMetricPoint = {
ts: number
cpu: number
memory: number
network: number
diskIO: number
network?: number
networkRx?: number
networkTx?: number
diskIO?: number
diskRead?: number
diskWrite?: number
}
const hostHistoryKey = 'clicd_host_metric_history_v2'
@@ -58,6 +62,10 @@ export default function Dashboard() {
const filtered = filterHistory(history, range)
const memoryPct = host && host.ram.total_mb > 0 ? (host.ram.used_mb / host.ram.total_mb) * 100 : 0
const networkRxBps = host?.network.rx_bps || 0
const networkTxBps = host?.network.tx_bps || 0
const diskReadBps = host?.disk_io.read_bps || 0
const diskWriteBps = host?.disk_io.write_bps || 0
const networkBps = (host?.network.rx_bps || 0) + (host?.network.tx_bps || 0)
const diskIOBps = (host?.disk_io.read_bps || 0) + (host?.disk_io.write_bps || 0)
@@ -85,16 +93,24 @@ export default function Dashboard() {
icon: <Network className="w-5 h-5" />,
current: networkBps,
points: toChartPoints(filtered, 'network'),
series: [
{ label: '入', points: toChartPoints(filtered, 'networkRx'), current: networkRxBps, color: '#2563eb' },
{ label: '出', points: toChartPoints(filtered, 'networkTx'), current: networkTxBps, color: '#16a34a' },
],
formatValue: formatRate,
detail: `入 ${formatRate(host?.network.rx_bps || 0)} / 出 ${formatRate(host?.network.tx_bps || 0)}`,
detail: `入 ${formatRate(networkRxBps)} / 出 ${formatRate(networkTxBps)}`,
},
{
title: '磁盘IO',
icon: <HardDrive className="w-5 h-5" />,
current: diskIOBps,
points: toChartPoints(filtered, 'diskIO'),
series: [
{ label: '读', points: toChartPoints(filtered, 'diskRead'), current: diskReadBps, color: '#d97706' },
{ label: '写', points: toChartPoints(filtered, 'diskWrite'), current: diskWriteBps, color: '#dc2626' },
],
formatValue: formatRate,
detail: `读 ${formatRate(host?.disk_io.read_bps || 0)} / 写 ${formatRate(host?.disk_io.write_bps || 0)}`,
detail: `读 ${formatRate(diskReadBps)} / 写 ${formatRate(diskWriteBps)}`,
},
]
@@ -157,12 +173,20 @@ function SummaryCard({
}
function appendHostPoint(host: HostInfo, setHistory: (updater: (prev: HostMetricPoint[]) => HostMetricPoint[]) => void) {
const networkRx = host.network.rx_bps || 0
const networkTx = host.network.tx_bps || 0
const diskRead = host.disk_io.read_bps || 0
const diskWrite = host.disk_io.write_bps || 0
const point: HostMetricPoint = {
ts: Date.now(),
cpu: clamp(host.cpu.usage_pct),
memory: host.ram.total_mb > 0 ? clamp((host.ram.used_mb / host.ram.total_mb) * 100) : 0,
network: (host.network.rx_bps || 0) + (host.network.tx_bps || 0),
diskIO: (host.disk_io.read_bps || 0) + (host.disk_io.write_bps || 0),
network: networkRx + networkTx,
networkRx,
networkTx,
diskIO: diskRead + diskWrite,
diskRead,
diskWrite,
}
setHistory((prev) => {
@@ -190,8 +214,11 @@ function filterHistory(history: HostMetricPoint[], range: StatsRangeKey) {
return history.filter((point) => point.ts >= cutoff)
}
function toChartPoints<T extends keyof Omit<HostMetricPoint, 'ts'>>(history: HostMetricPoint[], key: T): ChartPoint[] {
return history.map((point) => ({ ts: point.ts, value: Number(point[key]) || 0 }))
function toChartPoints(history: HostMetricPoint[], key: keyof Omit<HostMetricPoint, 'ts'>): ChartPoint[] {
return history.flatMap((point) => {
const value = Number(point[key])
return Number.isFinite(value) ? [{ ts: point.ts, value }] : []
})
}
function clamp(value: number) {