Add Linux server monitor dashboard
This commit is contained in:
1 parent
0446648ed1
commit
315cb36a21
19 files changed
+5997
-1
No files matched your search
+1273
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,12 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#59f2d8"/>
|
||||
<stop offset="1" stop-color="#4d9dff"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="64" height="64" rx="14" fill="#07111c"/>
|
||||
<circle cx="32" cy="32" r="25" fill="none" stroke="#2b6d77" stroke-opacity=".45"/>
|
||||
<path d="M6 33h9l5-13 8 26 7-18 4 9h19" fill="none" stroke="url(#g)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="32" cy="32" r="2.4" fill="#65f5d8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 586 B |
+485
@@ -0,0 +1,485 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="dark">
|
||||
<meta name="theme-color" content="#05080e">
|
||||
<title>Server Monitor</title>
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<svg class="svg-defs" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="brand-gradient" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#59f2d8"/>
|
||||
<stop offset="100%" stop-color="#4d9dff"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="viewport">
|
||||
<main class="stage" id="stage">
|
||||
<div class="stage-grid" aria-hidden="true"></div>
|
||||
<div class="stage-glow glow-a" aria-hidden="true"></div>
|
||||
<div class="stage-glow glow-b" aria-hidden="true"></div>
|
||||
|
||||
<header class="topbar panel">
|
||||
<div class="identity">
|
||||
<div class="brand-mark" aria-hidden="true">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<circle cx="24" cy="24" r="21" fill="none" stroke="rgba(96, 226, 212, .18)" stroke-width="1"/>
|
||||
<circle cx="24" cy="24" r="15" fill="none" stroke="rgba(96, 226, 212, .10)" stroke-width="1" stroke-dasharray="2 5"/>
|
||||
<path d="M5 25h7.5l3.7-9.5 6.3 19 5.4-13.4 3.5 7.2h11.6" fill="none" stroke="url(#brand-gradient)" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="24" cy="24" r="2.6" fill="#65f5d8"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="identity-copy">
|
||||
<div class="hostline">
|
||||
<h1 id="hostname">---</h1>
|
||||
<span class="live-pill" id="live-pill" data-state="connecting"><i></i><span id="live-text">连接中</span></span>
|
||||
<span class="demo-pill" id="demo-pill" hidden>DEMO</span>
|
||||
</div>
|
||||
<div class="host-meta">
|
||||
<span id="os-name">--</span>
|
||||
<i class="sep"></i>
|
||||
<span id="kernel">--</span>
|
||||
<i class="sep"></i>
|
||||
<span id="arch">--</span>
|
||||
<i class="sep"></i>
|
||||
<span class="host-ip"><span class="ip-dot"></span><b id="primary-ip">--</b></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clock-block">
|
||||
<div class="clock" id="clock">--:--:--</div>
|
||||
<div class="clock-meta"><span id="date">----</span><i class="sep"></i><span id="timezone">UTC</span></div>
|
||||
</div>
|
||||
|
||||
<div class="uptime-block">
|
||||
<div class="eyebrow">UPTIME</div>
|
||||
<div class="uptime" id="uptime">--</div>
|
||||
<div class="boot" id="boot-time">BOOT --</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="nav" aria-label="面板导航">
|
||||
<div class="nav-current">
|
||||
<span class="page-index" id="page-index">01</span>
|
||||
<div class="nav-titles">
|
||||
<strong id="page-title">系统概览</strong>
|
||||
<span id="page-sub">SYSTEM OVERVIEW</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dots" id="dots" role="tablist" aria-label="切换面板"></div>
|
||||
<div class="nav-state">
|
||||
<i class="state-led" id="state-led"></i>
|
||||
<span id="rotation-state">自动轮播</span>
|
||||
<span class="key-hint">SPACE</span>
|
||||
</div>
|
||||
<div class="progress" aria-hidden="true"><i id="page-progress"></i></div>
|
||||
</nav>
|
||||
|
||||
<main class="pages" id="pages">
|
||||
|
||||
<!-- 01 · OVERVIEW -->
|
||||
<article class="page page-overview" data-page="0" aria-label="系统概览">
|
||||
<section class="card card-cpu">
|
||||
<header class="card-head">
|
||||
<div class="card-title"><span class="cn">处理器</span><span class="en">CPU</span></div>
|
||||
<span class="card-badge" id="cpu-badge">-- THREADS</span>
|
||||
</header>
|
||||
<div class="cpu-main">
|
||||
<div class="ring ring-cpu" id="cpu-ring" style="--pct:0">
|
||||
<svg viewBox="0 0 120 120" aria-hidden="true">
|
||||
<circle class="ring-track" cx="60" cy="60" r="52"></circle>
|
||||
<circle class="ring-value" cx="60" cy="60" r="52" pathLength="100"></circle>
|
||||
</svg>
|
||||
<div class="ring-center"><b id="cpu-percent">0<span>%</span></b><small>UTIL</small></div>
|
||||
</div>
|
||||
<div class="cpu-facts">
|
||||
<p class="cpu-model" id="cpu-model">--</p>
|
||||
<div class="fact-row"><span>频率</span><b id="cpu-freq">--</b></div>
|
||||
<div class="fact-row"><span>温度</span><b id="cpu-temp">--</b></div>
|
||||
<div class="fact-row"><span>核心</span><b id="cpu-cores">--</b></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spark-wrap">
|
||||
<div class="spark-head"><span>60S 使用率</span><span class="spark-peak" id="cpu-peak">PEAK --</span></div>
|
||||
<canvas id="cpu-spark" class="spark" aria-label="CPU 使用率趋势"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card card-mem">
|
||||
<header class="card-head">
|
||||
<div class="card-title"><span class="cn">内存</span><span class="en">MEMORY</span></div>
|
||||
<span class="card-badge" id="mem-badge">--</span>
|
||||
</header>
|
||||
<div class="mem-main">
|
||||
<div class="ring ring-mem" id="mem-ring" style="--pct:0">
|
||||
<svg viewBox="0 0 120 120" aria-hidden="true">
|
||||
<circle class="ring-track" cx="60" cy="60" r="52"></circle>
|
||||
<circle class="ring-value" cx="60" cy="60" r="52" pathLength="100"></circle>
|
||||
</svg>
|
||||
<div class="ring-center"><b id="mem-percent">0<span>%</span></b><small>USED</small></div>
|
||||
</div>
|
||||
<div class="mem-facts">
|
||||
<div class="mem-total"><b id="mem-used">--</b><span>/ <em id="mem-total">--</em></span></div>
|
||||
<div class="kv-line"><span>可用 AVAIL</span><b id="mem-available">--</b></div>
|
||||
<div class="kv-line"><span>缓存 CACHE</span><b id="mem-cache">--</b></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="composition" id="mem-composition">
|
||||
<i class="seg seg-apps" id="mem-seg-apps"></i>
|
||||
<i class="seg seg-cache" id="mem-seg-cache"></i>
|
||||
<i class="seg seg-buffers" id="mem-seg-buffers"></i>
|
||||
<i class="seg seg-free" id="mem-seg-free"></i>
|
||||
</div>
|
||||
<div class="composition-legend">
|
||||
<span><i class="legend-dot apps"></i>进程</span>
|
||||
<span><i class="legend-dot cache"></i>缓存</span>
|
||||
<span><i class="legend-dot free"></i>空闲</span>
|
||||
</div>
|
||||
<div class="swap-line">
|
||||
<span class="swap-label">SWAP</span>
|
||||
<div class="mini-bar"><i id="swap-bar"></i></div>
|
||||
<b id="swap-text">--</b>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card card-sys">
|
||||
<header class="card-head">
|
||||
<div class="card-title"><span class="cn">节点</span><span class="en">NODE</span></div>
|
||||
<span class="card-badge">HOST</span>
|
||||
</header>
|
||||
<div class="sys-list">
|
||||
<div class="sys-row"><span>系统</span><b id="sys-os">--</b></div>
|
||||
<div class="sys-row"><span>内核</span><b id="sys-kernel">--</b></div>
|
||||
<div class="sys-row"><span>架构</span><b id="sys-arch">--</b></div>
|
||||
<div class="sys-row"><span>地址</span><b id="sys-ip">--</b></div>
|
||||
<div class="sys-row"><span>启动</span><b id="sys-boot">--</b></div>
|
||||
<div class="sys-row"><span>进程</span><b id="sys-procs">--</b></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card card-load">
|
||||
<header class="card-head">
|
||||
<div class="card-title"><span class="cn">负载</span><span class="en">LOAD</span></div>
|
||||
<span class="card-badge" id="load-badge">-- CORES</span>
|
||||
</header>
|
||||
<div class="load-stats">
|
||||
<div class="load-stat">
|
||||
<span>1 MIN</span><b id="load1">--</b>
|
||||
<div class="mini-bar"><i id="load1-bar"></i></div>
|
||||
</div>
|
||||
<div class="load-stat">
|
||||
<span>5 MIN</span><b id="load5">--</b>
|
||||
<div class="mini-bar"><i id="load5-bar"></i></div>
|
||||
</div>
|
||||
<div class="load-stat">
|
||||
<span>15 MIN</span><b id="load15">--</b>
|
||||
<div class="mini-bar"><i id="load15-bar"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="load-foot">
|
||||
<span>运行中 <b id="load-running">--</b></span>
|
||||
<span>线程 <b id="load-threads">--</b></span>
|
||||
<span>规范值 <b id="load-pct">--</b></span>
|
||||
</div>
|
||||
<div class="spark-wrap spark-wrap-load">
|
||||
<div class="spark-head"><span>LOAD 1M · 60S</span><span class="spark-peak" id="load-peak">PEAK --</span></div>
|
||||
<canvas id="load-spark" class="spark" aria-label="负载趋势"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card card-disk">
|
||||
<header class="card-head">
|
||||
<div class="card-title"><span class="cn">文件系统</span><span class="en">DISK</span></div>
|
||||
<span class="card-badge" id="disk-count">-- FS</span>
|
||||
</header>
|
||||
<div class="disk-list" id="disk-overview"></div>
|
||||
</section>
|
||||
|
||||
<section class="card card-net">
|
||||
<header class="card-head">
|
||||
<div class="card-title"><span class="cn">网络</span><span class="en">NETWORK</span></div>
|
||||
<span class="card-badge live-badge"><i></i>LIVE</span>
|
||||
</header>
|
||||
<div class="net-rates">
|
||||
<div class="net-rate rx">
|
||||
<span>↓ 下行 RX</span>
|
||||
<b id="net-rx">--</b>
|
||||
</div>
|
||||
<div class="net-rate tx">
|
||||
<span>↑ 上行 TX</span>
|
||||
<b id="net-tx">--</b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spark-wrap spark-wrap-net">
|
||||
<canvas id="net-spark" class="spark" aria-label="网络吞吐趋势"></canvas>
|
||||
</div>
|
||||
<div class="net-foot">
|
||||
<span><b id="net-ifaces">--</b> 个接口</span>
|
||||
<span id="net-errors">0 错误</span>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<!-- 02 · CPU & LOAD -->
|
||||
<article class="page page-cpu" data-page="1" aria-label="处理器与负载">
|
||||
<section class="card cpu-hero">
|
||||
<header class="card-head">
|
||||
<div class="card-title"><span class="cn">处理器详情</span><span class="en">CPU DETAIL</span></div>
|
||||
<span class="card-badge" id="cpu-badge-2">--</span>
|
||||
</header>
|
||||
<div class="hero-ring">
|
||||
<div class="ring ring-hero ring-cpu" id="cpu-ring-2" style="--pct:0">
|
||||
<svg viewBox="0 0 120 120" aria-hidden="true">
|
||||
<circle class="ring-track" cx="60" cy="60" r="52"></circle>
|
||||
<circle class="ring-value" cx="60" cy="60" r="52" pathLength="100"></circle>
|
||||
</svg>
|
||||
<div class="ring-center"><b id="cpu-percent-2">0<span>%</span></b><small>CPU UTIL</small></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="hero-model" id="cpu-model-2">--</p>
|
||||
<div class="hero-facts">
|
||||
<div><span>频率</span><b id="cpu-freq-2">--</b></div>
|
||||
<div><span>温度</span><b id="cpu-temp-2">--</b></div>
|
||||
<div><span>逻辑核心</span><b id="cpu-cores-2">--</b></div>
|
||||
<div><span>采样</span><b id="sample-interval">--</b></div>
|
||||
</div>
|
||||
<div class="breakdown" id="cpu-breakdown">
|
||||
<div class="breakdown-row"><span>USER</span><div class="mini-bar"><i id="bd-user"></i></div><b id="bd-user-val">--</b></div>
|
||||
<div class="breakdown-row"><span>SYSTEM</span><div class="mini-bar"><i id="bd-system"></i></div><b id="bd-system-val">--</b></div>
|
||||
<div class="breakdown-row"><span>IOWAIT</span><div class="mini-bar"><i id="bd-iowait"></i></div><b id="bd-iowait-val">--</b></div>
|
||||
<div class="breakdown-row"><span>STEAL</span><div class="mini-bar"><i id="bd-steal"></i></div><b id="bd-steal-val">--</b></div>
|
||||
</div>
|
||||
<div class="spark-wrap spark-wrap-hero">
|
||||
<div class="spark-head"><span>60S 使用率</span><span class="spark-peak" id="cpu-peak-2">PEAK --</span></div>
|
||||
<canvas id="cpu-spark-2" class="spark" aria-label="CPU 使用率趋势"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card core-card">
|
||||
<header class="card-head">
|
||||
<div class="card-title"><span class="cn">每核心</span><span class="en">PER CORE</span></div>
|
||||
<span class="card-badge" id="core-count">-- CORES</span>
|
||||
</header>
|
||||
<div class="core-grid" id="core-grid"></div>
|
||||
</section>
|
||||
|
||||
<section class="card proc-card">
|
||||
<header class="card-head">
|
||||
<div class="card-title"><span class="cn">进程 TOP</span><span class="en">BY CPU</span></div>
|
||||
<span class="card-badge" id="proc-count">-- PROCS</span>
|
||||
</header>
|
||||
<table class="data-table proc-table">
|
||||
<thead><tr><th class="col-pid">PID</th><th>进程 / PROCESS</th><th class="num">CPU</th><th class="num">MEM</th><th class="num">RSS</th></tr></thead>
|
||||
<tbody id="proc-cpu-body"></tbody>
|
||||
</table>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<!-- 03 · MEMORY -->
|
||||
<article class="page page-memory" data-page="2" aria-label="内存">
|
||||
<section class="card mem-hero">
|
||||
<header class="card-head">
|
||||
<div class="card-title"><span class="cn">物理内存</span><span class="en">MEMORY</span></div>
|
||||
<span class="card-badge" id="mem-badge-2">--</span>
|
||||
</header>
|
||||
<div class="hero-ring">
|
||||
<div class="ring ring-hero ring-mem" id="mem-ring-2" style="--pct:0">
|
||||
<svg viewBox="0 0 120 120" aria-hidden="true">
|
||||
<circle class="ring-track" cx="60" cy="60" r="52"></circle>
|
||||
<circle class="ring-value" cx="60" cy="60" r="52" pathLength="100"></circle>
|
||||
</svg>
|
||||
<div class="ring-center"><b id="mem-percent-2">0<span>%</span></b><small>USED</small></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mem-total-line"><b id="mem-used-2">--</b><span>/ <em id="mem-total-2">--</em> 已用</span></div>
|
||||
<div class="composition composition-large" id="mem-composition-2">
|
||||
<i class="seg seg-apps" id="mem-seg-apps-2"></i>
|
||||
<i class="seg seg-cache" id="mem-seg-cache-2"></i>
|
||||
<i class="seg seg-buffers" id="mem-seg-buffers-2"></i>
|
||||
<i class="seg seg-free" id="mem-seg-free-2"></i>
|
||||
</div>
|
||||
<div class="mem-stats">
|
||||
<div><span>可用 AVAILABLE</span><b id="mem-available-2">--</b></div>
|
||||
<div><span>缓存 CACHED</span><b id="mem-cache-2">--</b></div>
|
||||
<div><span>缓冲 BUFFERS</span><b id="mem-buffers-2">--</b></div>
|
||||
<div><span>SWAP</span><b id="swap-text-2">--</b></div>
|
||||
</div>
|
||||
<div class="mem-breakdown">
|
||||
<div class="mem-bd-head"><span>内存构成</span><span>COMPOSITION</span></div>
|
||||
<div class="mem-bd-row"><span><i class="mem-key apps"></i>进程</span><div class="mini-bar"><i id="mem-bd-apps"></i></div><b id="mem-bd-apps-val">--</b></div>
|
||||
<div class="mem-bd-row"><span><i class="mem-key cache"></i>缓存</span><div class="mini-bar"><i id="mem-bd-cache"></i></div><b id="mem-bd-cache-val">--</b></div>
|
||||
<div class="mem-bd-row"><span><i class="mem-key buffers"></i>缓冲</span><div class="mini-bar"><i id="mem-bd-buffers"></i></div><b id="mem-bd-buffers-val">--</b></div>
|
||||
<div class="mem-bd-row"><span><i class="mem-key free"></i>空闲</span><div class="mini-bar"><i id="mem-bd-free"></i></div><b id="mem-bd-free-val">--</b></div>
|
||||
</div>
|
||||
<div class="spark-wrap spark-wrap-mem">
|
||||
<div class="spark-head"><span>60S 使用率</span><span class="spark-peak" id="mem-peak-2">PEAK --</span></div>
|
||||
<canvas id="mem-spark-2" class="spark" aria-label="内存使用率趋势"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card mem-trend">
|
||||
<header class="card-head">
|
||||
<div class="card-title"><span class="cn">内存趋势</span><span class="en">60 SECONDS</span></div>
|
||||
<span class="card-badge" id="mem-trend-badge">--</span>
|
||||
</header>
|
||||
<div class="trend-chart"><canvas id="mem-spark-large" class="spark" aria-label="内存使用率趋势"></canvas></div>
|
||||
<div class="trend-stats">
|
||||
<div><span>当前 CURRENT</span><b id="mem-trend-current">--</b></div>
|
||||
<div><span>峰值 PEAK</span><b id="mem-trend-peak">--</b></div>
|
||||
<div><span>均值 AVG</span><b id="mem-trend-avg">--</b></div>
|
||||
<div><span>交换 SWAP</span><b id="mem-trend-swap">--</b></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card proc-card mem-proc-card">
|
||||
<header class="card-head">
|
||||
<div class="card-title"><span class="cn">进程 TOP</span><span class="en">BY MEMORY</span></div>
|
||||
<span class="card-badge" id="mem-proc-count">-- PROCS</span>
|
||||
</header>
|
||||
<table class="data-table proc-table">
|
||||
<thead><tr><th class="col-pid">PID</th><th>进程 / PROCESS</th><th class="num">MEM</th><th class="num">RSS</th><th class="num">CPU</th></tr></thead>
|
||||
<tbody id="proc-mem-body"></tbody>
|
||||
</table>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<!-- 04 · STORAGE -->
|
||||
<article class="page page-storage" data-page="3" aria-label="存储">
|
||||
<section class="card fs-card">
|
||||
<header class="card-head">
|
||||
<div class="card-title"><span class="cn">文件系统</span><span class="en">FILESYSTEMS</span></div>
|
||||
<span class="card-badge" id="fs-badge">-- FS</span>
|
||||
</header>
|
||||
<table class="data-table fs-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>挂载点 / MOUNT</th>
|
||||
<th>设备 / DEVICE</th>
|
||||
<th>类型</th>
|
||||
<th class="num">容量</th>
|
||||
<th class="num">已用</th>
|
||||
<th class="num">可用</th>
|
||||
<th class="bar-col">使用率</th>
|
||||
<th class="num">%</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="fs-body"></tbody>
|
||||
</table>
|
||||
<div class="fs-summary">
|
||||
<div class="fs-sum-item"><span>总容量</span><b id="fs-total">--</b></div>
|
||||
<div class="fs-sum-item"><span>已用</span><b id="fs-used">--</b></div>
|
||||
<div class="fs-sum-item"><span>可用</span><b id="fs-free">--</b></div>
|
||||
<div class="fs-sum-bar"><div class="mini-bar"><i id="fs-total-bar"></i></div><b id="fs-total-pct">--</b></div>
|
||||
<div class="fs-sum-more" id="fs-more">--</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card io-card">
|
||||
<header class="card-head">
|
||||
<div class="card-title"><span class="cn">磁盘 I/O</span><span class="en">DEVICE THROUGHPUT</span></div>
|
||||
<span class="card-badge" id="io-badge">R -- · W --</span>
|
||||
</header>
|
||||
<div class="io-grid">
|
||||
<div class="io-main">
|
||||
<table class="data-table io-table">
|
||||
<thead>
|
||||
<tr><th>设备 / DEVICE</th><th class="num">读 READ</th><th class="num">写 WRITE</th><th class="num">IOPS R/W</th><th class="num">延迟 AWAIT</th><th class="bar-col">忙碌 BUSY</th><th class="num">%</th></tr>
|
||||
</thead>
|
||||
<tbody id="io-body"></tbody>
|
||||
</table>
|
||||
<div class="io-footer">
|
||||
<span>设备 <b id="io-device-count">--</b></span>
|
||||
<span>最忙 <b id="io-busiest">--</b></span>
|
||||
<span>累计读 <b id="io-total-read">--</b></span>
|
||||
<span>累计写 <b id="io-total-write">--</b></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="io-side">
|
||||
<div class="io-side-head"><span>I/O 趋势 · 60S</span><b id="io-side-rate">--</b></div>
|
||||
<canvas id="io-spark" class="spark" aria-label="磁盘 I/O 趋势"></canvas>
|
||||
<div class="io-legend"><span class="read">READ</span><span class="write">WRITE</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<!-- 05 · NETWORK -->
|
||||
<article class="page page-network" data-page="4" aria-label="网络">
|
||||
<section class="card net-hero-card">
|
||||
<header class="card-head">
|
||||
<div class="card-title"><span class="cn">网络吞吐</span><span class="en">THROUGHPUT</span></div>
|
||||
<span class="card-badge" id="net-badge">-- IFACES</span>
|
||||
</header>
|
||||
<div class="net-hero-body">
|
||||
<div class="net-big rx">
|
||||
<span class="net-direction">↓ 下行 RX</span>
|
||||
<b id="net-rx-big">--</b>
|
||||
<small id="net-rx-total">累计 --</small>
|
||||
</div>
|
||||
<div class="net-big-chart">
|
||||
<canvas id="net-spark-big" class="spark" aria-label="网络吞吐趋势"></canvas>
|
||||
<div class="chart-legend"><span class="rx">RX</span><span class="tx">TX</span><span class="window">60S WINDOW</span></div>
|
||||
</div>
|
||||
<div class="net-big tx">
|
||||
<span class="net-direction">↑ 上行 TX</span>
|
||||
<b id="net-tx-big">--</b>
|
||||
<small id="net-tx-total">累计 --</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="net-summary">
|
||||
<span>接口 <b id="net-sum-ifaces">--</b></span>
|
||||
<span>错误 <b id="net-sum-errors">--</b></span>
|
||||
<span>丢包 <b id="net-sum-drops">--</b></span>
|
||||
<span>主接口 <b id="net-sum-primary">--</b></span>
|
||||
<span class="net-sum-live"><i></i>LIVE</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card iface-card">
|
||||
<header class="card-head">
|
||||
<div class="card-title"><span class="cn">网卡</span><span class="en">INTERFACES</span></div>
|
||||
<span class="card-badge" id="iface-badge">--</span>
|
||||
</header>
|
||||
<table class="data-table iface-table">
|
||||
<thead>
|
||||
<tr><th>接口 / IFACE</th><th>IP</th><th class="num">下行 RX</th><th class="num">上行 TX</th><th class="num">累计 RX/TX</th><th class="num">错误/丢包</th><th class="num">链路</th></tr>
|
||||
</thead>
|
||||
<tbody id="iface-body"></tbody>
|
||||
</table>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="ticker">
|
||||
<div class="ticker-label">
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M1 8h3l2-5 3.4 10L12 8h3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>STATUS</span>
|
||||
</div>
|
||||
<div class="ticker-window">
|
||||
<div class="ticker-track" id="ticker-track">
|
||||
<span class="ticker-copy" id="ticker-a">正在连接服务器 · SERVER MONITOR INITIALIZING</span>
|
||||
<span class="ticker-copy" id="ticker-b" aria-hidden="true">正在连接服务器 · SERVER MONITOR INITIALIZING</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ticker-side"><span id="ticker-sample">SAMPLE --</span><i class="sep"></i><span id="ticker-update">--</span></div>
|
||||
</footer>
|
||||
|
||||
<div class="footline">
|
||||
<span class="foot-left"><i class="foot-led" id="foot-led"></i> SERVER MONITOR <b id="version">v--</b><span class="sep"></span><span id="foot-mode">--</span></span>
|
||||
<span class="foot-hint">← → 切换 <i class="sep"></i> SPACE 暂停 <i class="sep"></i> F 全屏</span>
|
||||
<span class="foot-right" id="foot-sample">等待采样…</span>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,2 @@
|
||||
User-agent: *
|
||||
Disallow: /
|
||||
+1677
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user