111 lines
4.0 KiB
HTML
111 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>PearData — P2P Fleet Monitoring</title>
|
|
<link rel="stylesheet" href="./ui/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div id="titlebar" role="banner">
|
|
<div class="titlebar-left">
|
|
<pear-ctrl></pear-ctrl>
|
|
<div class="app-brand" aria-hidden="true">
|
|
<span class="logo">◈</span>
|
|
<div class="app-brand-text">
|
|
<strong>PearData</strong>
|
|
<span class="muted">P2P · Netdata-class observability</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="titlebar-right">
|
|
<span id="role-badge" class="badge">—</span>
|
|
<div id="status-chip" class="chip offline">offline</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="app">
|
|
<aside class="fleet-rail panel">
|
|
<h2>Fleet</h2>
|
|
<p class="hint">Connect agents by public key or <code>pd1.</code> invite.</p>
|
|
<label>
|
|
Agent / invite
|
|
<textarea id="connect-input" rows="2" placeholder="64-hex key or pd1.…"></textarea>
|
|
</label>
|
|
<label>
|
|
Admin seed (optional)
|
|
<input id="admin-seed" type="password" autocomplete="off" placeholder="SERVER_SEED" />
|
|
</label>
|
|
<div class="row">
|
|
<button id="btn-connect" class="primary">Connect</button>
|
|
<button id="btn-disconnect" class="ghost" disabled>Disconnect</button>
|
|
</div>
|
|
<ul id="peer-list" class="peer-list"></ul>
|
|
<div id="conn-meta" class="meta muted"></div>
|
|
<div class="admin-block">
|
|
<button id="btn-invite" class="ghost" disabled>Mint invite</button>
|
|
<pre id="invite-out" class="invite-out hidden"></pre>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="dash-main">
|
|
<section class="overview-strip panel">
|
|
<div class="stat" data-stat="cpu">
|
|
<span class="stat-label">CPU</span>
|
|
<strong id="stat-cpu">—</strong>
|
|
</div>
|
|
<div class="stat" data-stat="ram">
|
|
<span class="stat-label">RAM used</span>
|
|
<strong id="stat-ram">—</strong>
|
|
</div>
|
|
<div class="stat" data-stat="load">
|
|
<span class="stat-label">Load 1m</span>
|
|
<strong id="stat-load">—</strong>
|
|
</div>
|
|
<div class="stat" data-stat="net">
|
|
<span class="stat-label">Net RX</span>
|
|
<strong id="stat-net">—</strong>
|
|
</div>
|
|
<div class="stat" data-stat="health">
|
|
<span class="stat-label">Health</span>
|
|
<strong id="stat-health">—</strong>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="charts-grid">
|
|
<article class="panel chart-panel">
|
|
<header><h3>CPU</h3><span class="muted">system.cpu</span></header>
|
|
<canvas id="chart-cpu" height="140"></canvas>
|
|
</article>
|
|
<article class="panel chart-panel">
|
|
<header><h3>Memory</h3><span class="muted">system.ram</span></header>
|
|
<canvas id="chart-ram" height="140"></canvas>
|
|
</article>
|
|
<article class="panel chart-panel">
|
|
<header><h3>Network</h3><span class="muted">system.net</span></header>
|
|
<canvas id="chart-net" height="140"></canvas>
|
|
</article>
|
|
<article class="panel chart-panel">
|
|
<header><h3>Disk I/O</h3><span class="muted">system.io</span></header>
|
|
<canvas id="chart-io" height="140"></canvas>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="bottom-row">
|
|
<div class="panel">
|
|
<h3>Anomalies</h3>
|
|
<ul id="anomaly-list" class="event-list"></ul>
|
|
</div>
|
|
<div class="panel">
|
|
<h3>Node</h3>
|
|
<pre id="server-info" class="server-info muted">Not connected</pre>
|
|
<h3>Log</h3>
|
|
<pre id="log" class="log"></pre>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
<script type="module" src="./app.js"></script>
|
|
</body>
|
|
</html>
|