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:35:46 +09:00
parent 24741e2445
commit 1aeeab4d40
6 changed files with 236 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/components/ServerPortlet.vue
View File

@@ -102,7 +102,7 @@
<div class="mini-bar">
<div :class="['mini-fill', getContainerMemLevel(container)]" :style="{ width: getMemPercent(container) + '%' }"></div>
</div>
<span class="value">{{ formatMemoryShort(container.memory_usage) }}</span>
<span :class="['value', { 'mem-highlight': isMemoryOver1GB(container.memory_usage) }]">{{ formatMemoryShort(container.memory_usage) }}</span>
</div>
<div class="card-metric">
<span class="label">↓RX</span>
@@ -211,9 +211,15 @@ function getMemPercent(c: ContainerStatus): number {
function formatMemoryShort(bytes: number | null): string {
if (bytes === null || bytes === undefined) return '-'
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}K`
if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(0)}M`
return `${(bytes / 1024 / 1024 / 1024).toFixed(1)}G`
const numBytes = Number(bytes)
if (numBytes < 1024 * 1024) return `${(numBytes / 1024).toFixed(0)}K`
if (numBytes < 1024 * 1024 * 1024) return `${(numBytes / 1024 / 1024).toFixed(0)}M`
return `${(numBytes / 1024 / 1024 / 1024).toFixed(1)}G`
}
function isMemoryOver1GB(bytes: number | null): boolean {
if (bytes === null || bytes === undefined) return false
return Number(bytes) >= 1024 * 1024 * 1024
}
function formatNetworkShort(bytes: number | null): string {
@@ -312,6 +318,7 @@ function formatTimeAgo(datetime: string | null): string {
.mini-fill.critical { background: #f97316; }
.mini-fill.danger { background: #ef4444; }
.card-metric .value { font-size: 11px; font-weight: 500; color: var(--text-secondary); width: 36px; text-align: right; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; }
.card-metric .value.mem-highlight { color: #dc2626; font-weight: 700; }
.card-stopped { font-size: 12px; color: var(--text-muted); font-style: italic; text-align: center; padding: 6px 0; }