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 18:09:04 +09:00
parent e6370601d4
commit 99db3acc20
1 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/components/ServerPortlet.vue
View File

@@ -99,7 +99,7 @@
<div :class="['mini-fill', getContainerCpuLevel(container)]" :style="{ width: Math.min(container.cpu_percent || 0, 100) + '%' }"></div>
</div>
<span :class="['value', { 'value-changed': isContainerChanged(server.target_id, container.name, 'cpu') }]">
{{ container.cpu_percent?.toFixed(0) || '-' }}%
{{ formatCpuPercent(container.cpu_percent) }}
</span>
</div>
<div class="card-metric">
@@ -301,6 +301,15 @@ function getMemPercent(c: ContainerStatus): number {
return (Number(c.memory_usage) / Number(c.memory_limit)) * 100
}
function formatCpuPercent(value: number | null): string {
if (value === null || value === undefined) return '-'
// 10% 이상이면 정수로, 미만이면 소수점 1자리
if (value >= 10) return `${value.toFixed(0)}%`
if (value >= 1) return `${value.toFixed(1)}%`
if (value >= 0.1) return `${value.toFixed(1)}%`
return `${value.toFixed(2)}%`
}
function formatMemoryShort(bytes: number | null): string {
if (bytes === null || bytes === undefined) return '-'
const numBytes = Number(bytes)
@@ -379,9 +388,9 @@ function formatTimeAgo(datetime: string | null): string {
.offline-text { font-size: 18px; margin-bottom: 8px; }
.offline-time { font-size: 15px; opacity: 0.7; }
.container-area { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px; align-content: flex-start; min-width: 140px; }
.container-area { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; align-content: flex-start; min-width: 140px; }
.container-card { width: 260px; padding: 14px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-secondary); cursor: pointer; transition: all 0.15s; overflow: hidden; }
.container-card { width: 200px; padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary); cursor: pointer; transition: all 0.15s; overflow: hidden; }
.container-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.container-card.normal { background: var(--container-normal-bg, #f0fdf4); border-color: var(--container-normal-border, #86efac); }
.container-card.warning { background: var(--container-warning-bg, #fefce8); border-color: var(--container-warning-border, #fde047); }
@@ -389,22 +398,22 @@ function formatTimeAgo(datetime: string | null): string {
.container-card.danger { background: var(--container-danger-bg, #fef2f2); border-color: var(--container-danger-border, #fca5a5); }
.container-card.stopped { background: var(--container-danger-bg, #fef2f2); border-color: var(--container-danger-border, #fca5a5); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; overflow: hidden; }
.card-name { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; }
.card-name .card-level { font-size: 14px; flex-shrink: 0; }
.card-name .name { font-size: 17px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-uptime { font-size: 14px; color: var(--text-muted); flex-shrink: 0; margin-left: 12px; white-space: nowrap; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; overflow: hidden; }
.card-name { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; }
.card-name .card-level { font-size: 12px; flex-shrink: 0; }
.card-name .name { font-size: 15px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-uptime { font-size: 12px; color: var(--text-muted); flex-shrink: 0; margin-left: 8px; white-space: nowrap; }
.card-metrics { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.card-metric { display: flex; align-items: center; gap: 8px; width: calc(50% - 6px); overflow: hidden; }
.card-metric .label { font-size: 13px; color: var(--text-muted); width: 28px; flex-shrink: 0; font-weight: 500; }
.mini-bar { flex: 1; height: 8px; background: rgba(0,0,0,0.1); border-radius: 4px; overflow: hidden; min-width: 28px; }
.mini-fill { height: 100%; border-radius: 4px; }
.card-metrics { display: flex; flex-wrap: wrap; gap: 5px 8px; }
.card-metric { display: flex; align-items: center; gap: 4px; width: calc(50% - 4px); overflow: hidden; }
.card-metric .label { font-size: 11px; color: var(--text-muted); width: 22px; flex-shrink: 0; font-weight: 500; }
.mini-bar { flex: 1; height: 6px; background: rgba(0,0,0,0.1); border-radius: 3px; overflow: hidden; min-width: 20px; }
.mini-fill { height: 100%; border-radius: 3px; }
.mini-fill.normal { background: #22c55e; }
.mini-fill.warning { background: #eab308; }
.mini-fill.critical { background: #f97316; }
.mini-fill.danger { background: #ef4444; }
.card-metric .value { font-size: 15px; font-weight: 700; color: var(--text-secondary); width: 50px; text-align: right; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; transition: all 0.3s; padding: 2px 4px; border-radius: 4px; }
.card-metric .value { font-size: 13px; font-weight: 700; color: var(--text-secondary); min-width: 38px; text-align: right; flex-shrink: 0; transition: all 0.3s; padding: 1px 2px; border-radius: 3px; }
.card-metric .value.mem-highlight { color: #dc2626; font-weight: 800; }
.card-metric .value.net { color: var(--text-muted); font-weight: 600; }