138 lines
4.5 KiB
HTML
138 lines
4.5 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Ingest Monitor</title>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="shell">
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<div class="mark" aria-hidden="true">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div>
|
|
<p class="eyebrow">greact.drill</p>
|
|
<h1>Ingest Monitor</h1>
|
|
</div>
|
|
</div>
|
|
<div class="top-actions">
|
|
<div class="endpoint">
|
|
<span>POST</span>
|
|
<code>/api/ingest</code>
|
|
</div>
|
|
<div class="status" id="connectionStatus">
|
|
<span class="dot"></span>
|
|
<span>connecting</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="layout">
|
|
<section class="metrics" aria-label="Summary">
|
|
<article>
|
|
<span>Packets</span>
|
|
<strong id="batchCount">0</strong>
|
|
</article>
|
|
<article>
|
|
<span>Items</span>
|
|
<strong id="itemCount">0</strong>
|
|
</article>
|
|
<article>
|
|
<span>Bytes</span>
|
|
<strong id="byteCount">0 B</strong>
|
|
</article>
|
|
<article>
|
|
<span>Last batch</span>
|
|
<strong id="lastBatch">none</strong>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="toolbar">
|
|
<label class="search">
|
|
<span>Filter</span>
|
|
<input id="filterInput" type="search" placeholder="tag, edge, value" />
|
|
</label>
|
|
<div class="actions">
|
|
<button id="followButton" type="button" title="Follow newest packet">Follow latest</button>
|
|
<button id="copyButton" type="button" title="Copy selected payload">Copy JSON</button>
|
|
<button id="clearButton" type="button" title="Clear monitor memory">Clear</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="content">
|
|
<aside class="packets">
|
|
<div class="section-head">
|
|
<div>
|
|
<p class="section-kicker">Live feed</p>
|
|
<h2>Packets</h2>
|
|
</div>
|
|
<span id="packetRate">0/min</span>
|
|
</div>
|
|
<div id="packetList" class="packet-list"></div>
|
|
</aside>
|
|
|
|
<section class="details">
|
|
<div class="section-head">
|
|
<div>
|
|
<p class="section-kicker">Selected packet</p>
|
|
<h2 id="detailTitle">Waiting for ingest</h2>
|
|
</div>
|
|
<span id="detailMeta">POST /api/ingest</span>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Tag</th>
|
|
<th>Edge</th>
|
|
<th>Value</th>
|
|
<th>Timestamp</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="itemTable"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="json-panel">
|
|
<div class="json-panel-head">
|
|
<div>
|
|
<p class="section-kicker">Raw JSON</p>
|
|
<strong id="jsonMeta">No payload selected</strong>
|
|
</div>
|
|
<div class="json-actions">
|
|
<button id="expandJsonButton" type="button">Expand</button>
|
|
<button id="copyRawButton" type="button">Copy</button>
|
|
</div>
|
|
</div>
|
|
<pre id="rawPayload" class="raw">No payload yet.</pre>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<div id="jsonModal" class="modal" aria-hidden="true">
|
|
<div class="modal-backdrop" id="jsonModalBackdrop"></div>
|
|
<section class="modal-card" role="dialog" aria-modal="true" aria-labelledby="jsonModalTitle">
|
|
<header class="modal-head">
|
|
<div>
|
|
<p class="section-kicker">Expanded JSON</p>
|
|
<h2 id="jsonModalTitle">Selected payload</h2>
|
|
</div>
|
|
<div class="json-actions">
|
|
<button id="copyModalJsonButton" type="button">Copy JSON</button>
|
|
<button id="closeJsonModalButton" type="button">Close</button>
|
|
</div>
|
|
</header>
|
|
<pre id="jsonModalPayload" class="modal-raw">No payload yet.</pre>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="/app.js" type="module"></script>
|
|
</body>
|
|
</html>
|