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:42:50 +09:00
parent 1aeeab4d40
commit ce90c41f0c
2 changed files with 104 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/components/NetworkPortlet.vue
View File

@@ -1,14 +1,8 @@
<template>
<div :class="['network-card', statusClass]" @click="goToList">
<div class="card-icon">{{ icon }}</div>
<div class="card-title">{{ title }}</div>
<div class="card-status" v-if="status && status.last_checked_at">
<span class="status-icon">{{ status.is_healthy ? '✅' : '❌' }}</span>
<span class="status-text">{{ status.is_healthy ? '정상' : '오류' }}</span>
</div>
<div class="card-status" v-else>
<span class="status-icon">⚪</span>
<span class="status-text">대기</span>
<div class="card-row">
<span class="card-title">{{ icon }} {{ title }}</span>
<span class="status-badge">{{ status?.is_healthy ? '✅' : status?.last_checked_at ? '❌' : '⚪' }}</span>
</div>
<div class="card-time" v-if="status && status.last_checked_at">
{{ formatTimeAgo(status.last_checked_at) }}
@@ -55,30 +49,29 @@ function formatTimeAgo(datetime: string | null): string {
.network-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 8px;
padding: 8px 10px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 10px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.network-card:hover {
background: var(--bg-tertiary, #f8fafc);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.network-card.healthy { border-top: 4px solid #22c55e; }
.network-card.unhealthy { border-top: 4px solid #ef4444; }
.network-card.pending { border-top: 4px solid #9ca3af; }
.network-card.healthy { border-left: 3px solid #22c55e; }
.network-card.unhealthy { border-left: 3px solid #ef4444; }
.network-card.pending { border-left: 3px solid #9ca3af; }
.card-icon { font-size: 22px; margin-bottom: 4px; }
.card-title { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.card-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.card-status { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 2px; }
.status-icon { font-size: 14px; }
.status-text { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.card-title { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.status-badge { font-size: 12px; }
.card-time { font-size: 10px; color: var(--text-muted); }
.card-time { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
</style>