osolit-research/system-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

소스 수정

Browse Source
This commit is contained in:
Hyoseong Jo
2025-12-28 17:26:32 +09:00
parent 4312a942dc
commit 24741e2445
3 changed files with 37 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/server/history.vue
View File

@@ -413,15 +413,21 @@ async function fetchSnapshots() {
{ label: 'Swap %', data: swapData, borderColor: chartColors[2] }
])
// 평균 계산 (Memory, Swap) + 사용량/전체용량
// 평균 계산 (Memory, Swap) + 사용량/전체용량 (BigInt는 문자열로 반환되므로 Number로 변환)
// 메모리 사용량 = total - free (free가 있으면 사용, 없으면 used 사용)
const validMem = memData.filter((v: number) => v > 0)
const validSwap = swapData.filter((v: number) => v >= 0)
const memUsedData = data.map((d: any) => d.memory_used || 0).filter((v: number) => v > 0)
const memUsedData = data.map((d: any) => {
const total = Number(d.memory_total) || 0
const free = Number(d.memory_free) || 0
const used = Number(d.memory_used) || 0
return free > 0 ? (total - free) : used
}).filter((v: number) => v > 0)
const avgMemUsedGB = memUsedData.length ? (memUsedData.reduce((a: number, b: number) => a + b, 0) / memUsedData.length / (1024 * 1024 * 1024)).toFixed(1) : '-'
const memTotalGB = data[0]?.memory_total ? (data[0].memory_total / (1024 * 1024 * 1024)).toFixed(1) : '-'
const swapUsedData = data.map((d: any) => d.swap_used || 0).filter((v: number) => v >= 0)
const memTotalGB = data[0]?.memory_total ? (Number(data[0].memory_total) / (1024 * 1024 * 1024)).toFixed(1) : '-'
const swapUsedData = data.map((d: any) => Number(d.swap_used) || 0).filter((v: number) => v >= 0)
const avgSwapUsedGB = swapUsedData.length ? (swapUsedData.reduce((a: number, b: number) => a + b, 0) / swapUsedData.length / (1024 * 1024 * 1024)).toFixed(1) : '0'
const swapTotalGB = data[0]?.swap_total ? (data[0].swap_total / (1024 * 1024 * 1024)).toFixed(1) : '0'
const swapTotalGB = data[0]?.swap_total ? (Number(data[0].swap_total) / (1024 * 1024 * 1024)).toFixed(1) : '0'
memAvg.value = {
mem: validMem.length ? (validMem.reduce((a: number, b: number) => a + b, 0) / validMem.length).toFixed(1) : '-',
swap: validSwap.length ? (validSwap.reduce((a: number, b: number) => a + b, 0) / validSwap.length).toFixed(1) : '-',
@@ -449,10 +455,10 @@ async function fetchDisks() {
diskChart?.destroy()
diskChart = createLineChart(diskChartRef.value!, timeLabels, datasets)
// 평균 계산 (전체 디스크) + 사용량/전체용량
// 평균 계산 (전체 디스크) + 사용량/전체용량 (BigInt는 문자열로 반환되므로 Number로 변환)
const allPercents = data.map((d: any) => d.disk_percent || 0).filter((v: number) => v > 0)
const allUsed = data.map((d: any) => d.disk_used || 0).filter((v: number) => v > 0)
const allTotal = data.map((d: any) => d.disk_total || 0).filter((v: number) => v > 0)
const allUsed = data.map((d: any) => Number(d.disk_used) || 0).filter((v: number) => v > 0)
const allTotal = data.map((d: any) => Number(d.disk_total) || 0).filter((v: number) => v > 0)
const avgUsedGB = allUsed.length ? (allUsed.reduce((a: number, b: number) => a + b, 0) / allUsed.length / (1024 * 1024 * 1024)).toFixed(1) : '-'
const avgTotalGB = allTotal.length ? (allTotal.reduce((a: number, b: number) => a + b, 0) / allTotal.length / (1024 * 1024 * 1024)).toFixed(1) : '-'
diskAvg.value = {
@@ -489,14 +495,14 @@ async function fetchContainers() {
const cpuValues = containerRows.map((d: any) => d.cpu_percent || 0)
const cpuAvgVal = cpuValues.length ? (cpuValues.reduce((a: number, b: number) => a + b, 0) / cpuValues.length).toFixed(1) : '0'
// Memory 평균 (bytes -> MB)
const memValues = containerRows.map((d: any) => (d.memory_usage || 0) / 1024 / 1024)
// Memory 평균 (bytes -> MB, BigInt는 문자열로 반환되므로 Number로 변환)
const memValues = containerRows.map((d: any) => (Number(d.memory_usage) || 0) / 1024 / 1024)
const memAvgVal = memValues.length ? (memValues.reduce((a: number, b: number) => a + b, 0) / memValues.length) : 0
const memLimit = latest.memory_limit ? (latest.memory_limit / 1024 / 1024 / 1024).toFixed(1) + ' GB' : '-'
const memLimit = latest.memory_limit ? (Number(latest.memory_limit) / 1024 / 1024 / 1024).toFixed(1) + ' GB' : '-'
// Network 평균 (bytes/s -> KB/s)
const rxValues = containerRows.map((d: any) => (d.network_rx || 0) / 1024)
const txValues = containerRows.map((d: any) => (d.network_tx || 0) / 1024)
const rxValues = containerRows.map((d: any) => (Number(d.network_rx) || 0) / 1024)
const txValues = containerRows.map((d: any) => (Number(d.network_tx) || 0) / 1024)
const rxAvgVal = rxValues.length ? (rxValues.reduce((a: number, b: number) => a + b, 0) / rxValues.length) : 0
const txAvgVal = txValues.length ? (txValues.reduce((a: number, b: number) => a + b, 0) / txValues.length) : 0
@@ -526,22 +532,22 @@ async function fetchContainers() {
if (!containerCharts[name]) containerCharts[name] = {}
// CPU 차트 (0-100%)
// CPU 차트 (0-200% - 컨테이너는 멀티코어로 100% 초과 가능)
if (refs.cpu) {
const cpuData = containerRows.map((d: any) => d.cpu_percent || 0)
containerCharts[name].cpu = createLineChart(refs.cpu, timeLabels, [{ label: 'CPU %', data: cpuData, borderColor: '#3b82f6' }], 100)
containerCharts[name].cpu = createLineChart(refs.cpu, timeLabels, [{ label: 'CPU %', data: cpuData, borderColor: '#3b82f6' }], 200)
}
// Memory 차트 (MB 단위) - 자동 스케일
// Memory 차트 (MB 단위) - 자동 스케일 (BigInt 문자열 변환)
if (refs.mem) {
const memData = containerRows.map((d: any) => (d.memory_usage || 0) / 1024 / 1024)
const memData = containerRows.map((d: any) => (Number(d.memory_usage) || 0) / 1024 / 1024)
containerCharts[name].mem = createLineChart(refs.mem, timeLabels, [{ label: 'Memory MB', data: memData, borderColor: '#22c55e' }], null)
}
// Network 차트 (KB/s 단위) - 자동 스케일
// Network 차트 (KB/s 단위) - 자동 스케일 (BigInt 문자열 변환)
if (refs.net) {
const rxData = containerRows.map((d: any) => (d.network_rx || 0) / 1024)
const txData = containerRows.map((d: any) => (d.network_tx || 0) / 1024)
const rxData = containerRows.map((d: any) => (Number(d.network_rx) || 0) / 1024)
const txData = containerRows.map((d: any) => (Number(d.network_tx) || 0) / 1024)
containerCharts[name].net = createLineChart(refs.net, timeLabels, [
{ label: 'RX KB/s', data: rxData, borderColor: '#06b6d4' },
{ label: 'TX KB/s', data: txData, borderColor: '#f59e0b' }