101 lines
4.4 KiB
HTML
101 lines
4.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{ hostname }}</title>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
<script src="/static/vendor/htmx.min.js"></script>
|
|
<script src="/static/vendor/chart.umd.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<h1>{{ hostname }}</h1>
|
|
<nav id="tabs">
|
|
<button class="tab-btn active" data-tab="overview">Overview</button>
|
|
<button class="tab-btn" data-tab="disks">Disks</button>
|
|
<button class="tab-btn" data-tab="processes">Processes</button>
|
|
<button class="tab-btn" data-tab="journal">Journal</button>
|
|
<button class="tab-btn" data-tab="services">Services</button>
|
|
<button class="tab-btn" data-tab="plugins">Plugins</button>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<section id="tab-overview" class="tab">
|
|
<div id="overview" class="panel" hx-get="/api/overview" hx-trigger="load, every 2s" hx-swap="outerHTML"></div>
|
|
<div class="charts-grid">
|
|
<div class="chart-card"><h3>CPU / GPU %</h3><canvas id="chart-cpu"></canvas></div>
|
|
<div class="chart-card"><h3>Memory / VRAM %</h3><canvas id="chart-mem"></canvas></div>
|
|
<div class="chart-card"><h3>Disk I/O</h3><canvas id="chart-io"></canvas></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tab-disks" class="tab hidden">
|
|
<div id="disks" class="panel" hx-get="/api/disks" hx-trigger="load, every 2s" hx-swap="outerHTML"></div>
|
|
</section>
|
|
|
|
<section id="tab-processes" class="tab hidden">
|
|
<form id="proc-controls" class="inline-form" hx-get="/api/processes" hx-target="#processes-body" hx-swap="outerHTML">
|
|
<input id="proc-q" name="q" placeholder="filter name / pid">
|
|
<select name="sort" id="proc-sort">
|
|
<option value="cpu">sort: CPU</option>
|
|
<option value="rss">sort: MEM</option>
|
|
<option value="mem_pct">sort: MEM%</option>
|
|
<option value="io_read">sort: IO read</option>
|
|
<option value="io_write">sort: IO write</option>
|
|
<option value="pid">sort: PID</option>
|
|
<option value="name">sort: Name</option>
|
|
</select>
|
|
<select name="order" id="proc-order">
|
|
<option value="desc">desc</option>
|
|
<option value="asc">asc</option>
|
|
</select>
|
|
<button type="submit">apply</button>
|
|
</form>
|
|
<div id="processes-body" class="panel" hx-get="/api/processes" hx-trigger="load, every 3s" hx-swap="outerHTML" hx-include="#proc-controls"></div>
|
|
</section>
|
|
|
|
<section id="tab-journal" class="tab hidden">
|
|
<div id="journal-status" class="muted small"></div>
|
|
<form id="journal-filters" class="inline-form" hx-get="/api/journal" hx-target="#journal-log" hx-swap="innerHTML">
|
|
<select name="level">
|
|
<option value="all">all</option>
|
|
<option value="warn">warn+</option>
|
|
<option value="err">err+</option>
|
|
</select>
|
|
<input name="unit" placeholder="unit (ssh.service)">
|
|
<input name="search" placeholder="search text">
|
|
<label class="chk"><input type="checkbox" name="hide_sudo" checked> hide sudo</label>
|
|
<button type="submit">filter</button>
|
|
</form>
|
|
<div id="journal-logwrap">
|
|
<input type="hidden" id="journal-cursor" value="">
|
|
<div id="journal-log" hx-get="/api/journal" hx-trigger="load, every 5s" hx-swap="beforeend" hx-include="#journal-filters, #journal-cursor"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tab-services" class="tab hidden">
|
|
<form id="svc-filters" class="inline-form" hx-get="/api/services" hx-target="#services" hx-swap="outerHTML">
|
|
<input id="svc-q" name="q" placeholder="filter units">
|
|
<select name="sort" id="svc-sort">
|
|
<option value="name">sort: name</option>
|
|
<option value="state">sort: state</option>
|
|
<option value="enabled">sort: enabled</option>
|
|
</select>
|
|
<select name="order" id="svc-order">
|
|
<option value="asc">asc</option>
|
|
<option value="desc">desc</option>
|
|
</select>
|
|
<button type="submit">filter</button>
|
|
</form>
|
|
<div id="services" class="panel" hx-get="/api/services" hx-trigger="load, every 5s" hx-swap="outerHTML" hx-include="#svc-filters"></div>
|
|
<div id="service-detail" class="detail-pane"></div>
|
|
</section>
|
|
|
|
<section id="tab-plugins" class="tab hidden">
|
|
<div id="plugins" class="panel" hx-get="/api/plugins" hx-trigger="load" hx-swap="outerHTML"></div>
|
|
</section>
|
|
</main>
|
|
<script src="/static/js/app.js"></script>
|
|
</body>
|
|
</html>
|