Rename directories (again)

2026-04-26 15:39:59 -07:00 · 2024-01-30 09:58:05 -08:00
parent c3d9fb742e
commit 87f18c0c8b
24 changed files with 0 additions and 0 deletions
--- a/bin/static/css/style.css
+++ b/bin/static/css/style.css
@@ -0,0 +1,40 @@
+td,
+th {
+  border: 1px solid rgb(190, 190, 190);
+  padding: 10px;
+}
+
+td {
+  text-align: center;
+}
+
+tr:nth-child(even) {
+  background-color: #eee;
+}
+
+th[scope='col'] {
+  background-color: #696969;
+  color: #fff;
+}
+
+th[scope='row'] {
+  background-color: #d7d9f2;
+}
+
+tr.current {
+  background-color: #fe537b;
+  font-weight: bold;
+}
+
+caption {
+  padding: 10px;
+  caption-side: bottom;
+}
+
+table {
+  border-collapse: collapse;
+  border: 2px solid rgb(200, 200, 200);
+  letter-spacing: 1px;
+  font-family: sans-serif;
+  font-size: 0.8rem;
+}
--- a/bin/static/index.html
+++ b/bin/static/index.html
@@ -0,0 +1,38 @@
+<html>
+<head>
+    <title>ORCA</title>
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <script src="js/main.js"></script>
+    <script>
+        async function repeatedlyPopulate() {
+            await populateDivs();
+            setTimeout(repeatedlyPopulate, 1000);
+        }
+        window.onload = function() {
+            repeatedlyPopulate();
+        }
+    </script>
+</head>
+<body>
+    <div>
+        <button onclick="startRecording()">Start Recording</button>
+        <button onclick="stopRecording()">Stop Recording</button>
+    </div>
+    <table id="qmdl-manifest-table">
+        <thead>
+            <tr>
+                <th scope="col">Name</th>
+                <th scope="col">Date Started</th>
+                <th scope="col">Date Stopped</th>
+                <th scope="col">Size (bytes)</th>
+                <th scope="col">PCAP</th>
+                <th scope="col">QMDL</th>
+            </tr>
+        </thead>
+    </table>
+    <div>
+        <h3>System stats</h3>
+        <pre id="system-stats">Loading...</pre>
+    </div>
+</body>
+</html>
--- a/bin/static/js/main.js
+++ b/bin/static/js/main.js
@@ -0,0 +1,90 @@
+async function populateDivs() {
+    const systemStats = await getSystemStats();
+    const systemStatsDiv = document.getElementById('system-stats');
+    systemStatsDiv.innerHTML = JSON.stringify(systemStats, null, 2);
+
+    const qmdlManifest = await getQmdlManifest();
+    updateQmdlManifestTable(qmdlManifest);
+}
+
+function updateQmdlManifestTable(manifest) {
+    const table = document.getElementById('qmdl-manifest-table');
+    const numRows = table.rows.length;
+    for (let i=1; i<numRows; i++) {
+        table.deleteRow(1);
+    }
+    if (manifest.current_entry) {
+        const row = createEntryRow(manifest.current_entry);
+        row.classList.add('current');
+        table.appendChild(row)
+    }
+    for (let entry of manifest.entries) {
+        table.appendChild(createEntryRow(entry));
+    }
+}
+
+function createEntryRow(entry) {
+    const row = document.createElement('tr');
+    const name = document.createElement('th');
+    name.scope = 'row';
+    name.innerText = entry.name;
+    row.appendChild(name);
+    for (const key of ['start_time', 'end_time', 'size_bytes']) {
+        const td = document.createElement('td');
+        td.innerText = entry[key];
+        row.appendChild(td);
+    }
+    const pcap_td = document.createElement('td');
+    const pcap_link = document.createElement('a');
+    pcap_link.href = `/api/pcap/${entry.name}`;
+    pcap_link.innerText = 'pcap';
+    pcap_td.appendChild(pcap_link);
+    row.appendChild(pcap_td);
+    const qmdl_td = document.createElement('td');
+    const qmdl_link = document.createElement('a');
+    qmdl_link.href = `/api/qmdl/${entry.name}`;
+    qmdl_link.innerText = 'qmdl';
+    qmdl_td.appendChild(qmdl_link);
+    row.appendChild(qmdl_td);
+    return row;
+}
+
+async function getSystemStats() {
+    return JSON.parse(await req('GET', '/api/system-stats'));
+}
+
+async function getQmdlManifest() {
+    const manifest = JSON.parse(await req('GET', '/api/qmdl-manifest'));
+    if (manifest.current_entry) {
+        manifest.current_entry.start_time = new Date(manifest.current_entry.start_time);
+    }
+    for (entry of manifest.entries) {
+        entry.start_time = new Date(entry.start_time);
+        entry.end_time = new Date(entry.end_time);
+    }
+    // sort them in reverse chronological order
+    manifest.entries.reverse();
+    return manifest;
+}
+
+async function startRecording() {
+    await req('POST', '/api/start-recording');
+    populateDivs();
+}
+
+async function stopRecording() {
+    await req('POST', '/api/stop-recording');
+    populateDivs();
+}
+
+async function req(method, url) {
+    const response = await fetch(url, {
+        method: method,
+    });
+    const body = await response.text();
+    if (response.status >= 200 && response.status < 300) {
+        return body;
+    } else {
+        throw new Error(body);
+    }
+}