fix(hub): improve monitor host status bar layout and document psutil setup
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -652,11 +652,10 @@ button:disabled {
|
||||
|
||||
.host-status-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px 16px;
|
||||
margin: 0 0 10px;
|
||||
padding: 10px 12px;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin: 0 0 12px;
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border-soft);
|
||||
background: var(--panel);
|
||||
@@ -667,12 +666,20 @@ button:disabled {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.host-status-top {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px 16px;
|
||||
}
|
||||
|
||||
.host-status-head {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
flex: 0 0 auto;
|
||||
flex: 1 1 220px;
|
||||
}
|
||||
|
||||
.host-status-dot {
|
||||
@@ -701,36 +708,54 @@ button:disabled {
|
||||
.host-status-name {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.host-status-uptime {
|
||||
.host-status-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 6px 14px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.host-status-uptime,
|
||||
.host-status-updated {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.host-status-metrics {
|
||||
display: flex;
|
||||
flex: 1 1 520px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px 14px;
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.host-metric {
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(72px, 1fr) auto;
|
||||
align-items: center;
|
||||
.host-metric-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
flex: 1 1 180px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-soft);
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
|
||||
.host-metric-net {
|
||||
grid-template-columns: 42px auto;
|
||||
flex: 1 1 220px;
|
||||
html[data-theme="light"] .host-metric-card {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.host-metric-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.host-metric-label {
|
||||
@@ -740,7 +765,7 @@ button:disabled {
|
||||
}
|
||||
|
||||
.host-metric-bar {
|
||||
height: 6px;
|
||||
height: 7px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
overflow: hidden;
|
||||
@@ -771,7 +796,36 @@ html[data-theme="light"] .host-metric-bar {
|
||||
color: var(--text);
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.host-metric-val-net {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.host-metric-sub,
|
||||
.host-net-line {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.host-net-lines {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.host-status-metrics {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.grid-monitor.grid-monitor-tiles {
|
||||
@@ -2738,22 +2792,22 @@ body.login-page {
|
||||
}
|
||||
|
||||
.host-status-bar {
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.host-status-top {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.host-status-meta {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.host-status-metrics {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.host-metric,
|
||||
.host-metric-net {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
|
||||
@@ -112,24 +112,35 @@
|
||||
function renderHostStatusBar(data) {
|
||||
const bar = document.getElementById("host-status-bar");
|
||||
if (!bar) return;
|
||||
const dot = document.getElementById("host-status-dot");
|
||||
const name = document.getElementById("host-status-name");
|
||||
const uptime = document.getElementById("host-status-uptime");
|
||||
const updated = document.getElementById("host-status-updated");
|
||||
const cpuVal = document.getElementById("host-cpu-val");
|
||||
const cpuSub = document.getElementById("host-cpu-sub");
|
||||
const memVal = document.getElementById("host-mem-val");
|
||||
const memSub = document.getElementById("host-mem-sub");
|
||||
const diskVal = document.getElementById("host-disk-val");
|
||||
const diskSub = document.getElementById("host-disk-sub");
|
||||
const netUp = document.getElementById("host-net-up");
|
||||
const netDown = document.getElementById("host-net-down");
|
||||
if (!data || !data.ok) {
|
||||
bar.classList.remove("hidden");
|
||||
const dot = document.getElementById("host-status-dot");
|
||||
const name = document.getElementById("host-status-name");
|
||||
const uptime = document.getElementById("host-status-uptime");
|
||||
if (dot) {
|
||||
dot.className = "host-status-dot bad";
|
||||
if (dot) dot.className = "host-status-dot bad";
|
||||
if (name) {
|
||||
name.textContent = "服务器";
|
||||
name.title = "";
|
||||
}
|
||||
if (name) name.textContent = "服务器";
|
||||
if (uptime) uptime.textContent = (data && data.msg) || "状态不可用";
|
||||
const cpuVal = document.getElementById("host-cpu-val");
|
||||
const memVal = document.getElementById("host-mem-val");
|
||||
const diskVal = document.getElementById("host-disk-val");
|
||||
const netVal = document.getElementById("host-net-val");
|
||||
if (updated) updated.textContent = "";
|
||||
if (cpuVal) cpuVal.textContent = "—";
|
||||
if (cpuSub) cpuSub.textContent = "";
|
||||
if (memVal) memVal.textContent = "—";
|
||||
if (memSub) memSub.textContent = "";
|
||||
if (diskVal) diskVal.textContent = "—";
|
||||
if (netVal) netVal.textContent = "—";
|
||||
if (diskSub) diskSub.textContent = "";
|
||||
if (netUp) netUp.textContent = "↑ —";
|
||||
if (netDown) netDown.textContent = "↓ —";
|
||||
return;
|
||||
}
|
||||
bar.classList.remove("hidden");
|
||||
@@ -145,50 +156,31 @@
|
||||
let overall = "ok";
|
||||
if (levels.includes("bad")) overall = "bad";
|
||||
else if (levels.includes("warn")) overall = "warn";
|
||||
const dot = document.getElementById("host-status-dot");
|
||||
const name = document.getElementById("host-status-name");
|
||||
const uptime = document.getElementById("host-status-uptime");
|
||||
if (dot) dot.className = "host-status-dot " + overall;
|
||||
if (name) name.textContent = data.hostname || "服务器";
|
||||
if (uptime) {
|
||||
uptime.textContent =
|
||||
"运行 " +
|
||||
fmtHostUptime(data.uptime_sec) +
|
||||
(data.updated_at ? " · " + data.updated_at : "");
|
||||
const hostname = data.hostname || "服务器";
|
||||
if (name) {
|
||||
name.textContent = hostname;
|
||||
name.title = hostname;
|
||||
}
|
||||
if (uptime) uptime.textContent = "运行 " + fmtHostUptime(data.uptime_sec);
|
||||
if (updated) updated.textContent = data.updated_at ? "更新 " + data.updated_at : "";
|
||||
setHostMetricBar(document.getElementById("host-cpu-fill"), cpu.percent);
|
||||
setHostMetricBar(document.getElementById("host-mem-fill"), mem.percent);
|
||||
setHostMetricBar(document.getElementById("host-disk-fill"), disk.percent);
|
||||
const cpuVal = document.getElementById("host-cpu-val");
|
||||
const memVal = document.getElementById("host-mem-val");
|
||||
const diskVal = document.getElementById("host-disk-val");
|
||||
const netVal = document.getElementById("host-net-val");
|
||||
if (cpuVal) {
|
||||
cpuVal.textContent =
|
||||
(cpu.percent != null ? cpu.percent + "%" : "—") +
|
||||
(cpu.count ? " · " + cpu.count + "核" : "");
|
||||
if (cpuVal) cpuVal.textContent = cpu.percent != null ? cpu.percent + "%" : "—";
|
||||
if (cpuSub) cpuSub.textContent = cpu.count ? cpu.count + " 核" : "";
|
||||
if (memVal) memVal.textContent = mem.percent != null ? mem.percent + "%" : "—";
|
||||
if (memSub) {
|
||||
memSub.textContent =
|
||||
fmtHostBytes(mem.used_bytes) + " / " + fmtHostBytes(mem.total_bytes);
|
||||
}
|
||||
if (memVal) {
|
||||
memVal.textContent =
|
||||
(mem.percent != null ? mem.percent + "%" : "—") +
|
||||
" · " +
|
||||
fmtHostBytes(mem.used_bytes) +
|
||||
"/" +
|
||||
fmtHostBytes(mem.total_bytes);
|
||||
}
|
||||
if (diskVal) {
|
||||
diskVal.textContent =
|
||||
(disk.percent != null ? disk.percent + "%" : "—") +
|
||||
" · " +
|
||||
fmtHostBytes(disk.used_bytes) +
|
||||
"/" +
|
||||
fmtHostBytes(disk.total_bytes);
|
||||
}
|
||||
if (netVal) {
|
||||
const up = fmtHostBytes(net.sent_rate_bps) + "/s";
|
||||
const down = fmtHostBytes(net.recv_rate_bps) + "/s";
|
||||
netVal.textContent = "↑" + up + " ↓" + down;
|
||||
if (diskVal) diskVal.textContent = disk.percent != null ? disk.percent + "%" : "—";
|
||||
if (diskSub) {
|
||||
diskSub.textContent =
|
||||
fmtHostBytes(disk.used_bytes) + " / " + fmtHostBytes(disk.total_bytes);
|
||||
}
|
||||
if (netUp) netUp.textContent = "↑ " + fmtHostBytes(net.sent_rate_bps) + "/s";
|
||||
if (netDown) netDown.textContent = "↓ " + fmtHostBytes(net.recv_rate_bps) + "/s";
|
||||
}
|
||||
|
||||
async function fetchHostStatus() {
|
||||
|
||||
@@ -62,30 +62,50 @@
|
||||
<h1><span class="head-tag">MON</span> 监控区</h1>
|
||||
</div>
|
||||
<div id="host-status-bar" class="host-status-bar hidden" aria-label="服务器运行状态" aria-live="polite">
|
||||
<div class="host-status-head">
|
||||
<span class="host-status-dot ok" id="host-status-dot" aria-hidden="true"></span>
|
||||
<span class="host-status-name" id="host-status-name">服务器</span>
|
||||
<span class="host-status-uptime" id="host-status-uptime"></span>
|
||||
<div class="host-status-top">
|
||||
<div class="host-status-head">
|
||||
<span class="host-status-dot ok" id="host-status-dot" aria-hidden="true"></span>
|
||||
<span class="host-status-name" id="host-status-name" title="">服务器</span>
|
||||
</div>
|
||||
<div class="host-status-meta">
|
||||
<span class="host-status-uptime" id="host-status-uptime"></span>
|
||||
<span class="host-status-updated" id="host-status-updated"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="host-status-metrics">
|
||||
<div class="host-metric" id="host-metric-cpu">
|
||||
<span class="host-metric-label">CPU</span>
|
||||
<div class="host-metric-card" id="host-metric-cpu">
|
||||
<div class="host-metric-head">
|
||||
<span class="host-metric-label">CPU</span>
|
||||
<span class="host-metric-val" id="host-cpu-val">—</span>
|
||||
</div>
|
||||
<div class="host-metric-bar"><span class="host-metric-fill" id="host-cpu-fill"></span></div>
|
||||
<span class="host-metric-val" id="host-cpu-val">—</span>
|
||||
<span class="host-metric-sub" id="host-cpu-sub">—</span>
|
||||
</div>
|
||||
<div class="host-metric" id="host-metric-mem">
|
||||
<span class="host-metric-label">内存</span>
|
||||
<div class="host-metric-card" id="host-metric-mem">
|
||||
<div class="host-metric-head">
|
||||
<span class="host-metric-label">内存</span>
|
||||
<span class="host-metric-val" id="host-mem-val">—</span>
|
||||
</div>
|
||||
<div class="host-metric-bar"><span class="host-metric-fill" id="host-mem-fill"></span></div>
|
||||
<span class="host-metric-val" id="host-mem-val">—</span>
|
||||
<span class="host-metric-sub" id="host-mem-sub">—</span>
|
||||
</div>
|
||||
<div class="host-metric" id="host-metric-disk">
|
||||
<span class="host-metric-label">硬盘</span>
|
||||
<div class="host-metric-card" id="host-metric-disk">
|
||||
<div class="host-metric-head">
|
||||
<span class="host-metric-label">硬盘</span>
|
||||
<span class="host-metric-val" id="host-disk-val">—</span>
|
||||
</div>
|
||||
<div class="host-metric-bar"><span class="host-metric-fill" id="host-disk-fill"></span></div>
|
||||
<span class="host-metric-val" id="host-disk-val">—</span>
|
||||
<span class="host-metric-sub" id="host-disk-sub">—</span>
|
||||
</div>
|
||||
<div class="host-metric host-metric-net" id="host-metric-net">
|
||||
<span class="host-metric-label">网络</span>
|
||||
<span class="host-metric-val" id="host-net-val">—</span>
|
||||
<div class="host-metric-card host-metric-card-net" id="host-metric-net">
|
||||
<div class="host-metric-head">
|
||||
<span class="host-metric-label">网络</span>
|
||||
<span class="host-metric-val host-metric-val-net" id="host-net-val">实时</span>
|
||||
</div>
|
||||
<div class="host-net-lines">
|
||||
<span class="host-net-line" id="host-net-up">↑ —</span>
|
||||
<span class="host-net-line" id="host-net-down">↓ —</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -628,6 +648,6 @@
|
||||
<script src="/assets/dashboard.js?v=20260612-dash-monitor-count"></script>
|
||||
<script src="/assets/ai_review_render.js?v=3"></script>
|
||||
<script src="/assets/time_close_ui.js?v=2"></script>
|
||||
<script src="/assets/app.js?v=20260612-host-status"></script>
|
||||
<script src="/assets/app.js?v=20260613-host-status-layout"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user