mirror of
https://github.com/dz0ny/meshcore-sar.git
synced 2026-08-11 16:30:28 +00:00
feat: Add shadcn worker UI
This commit is contained in:
Janez T
28
worker/README.md
Normal file
28
worker/README.md
Normal file
@@ -0,0 +1,28 @@
|
||||
# MeshCore SAR RX Stats Worker
|
||||
|
||||
This worker follows the same split as `/Users/dz0ny/site-vendorvigilance`:
|
||||
|
||||
- Astro builds the dashboard UI into `dist`
|
||||
- a small Cloudflare Worker handles `/api/*` before assets are served
|
||||
|
||||
## Layout
|
||||
|
||||
- `src/pages/index.astro` - dashboard shell
|
||||
- `worker/index.ts` - Cloudflare Worker entrypoint
|
||||
- `worker/stats.ts` - D1 queries, payload validation, and aggregation helpers
|
||||
- `schema.sql` - D1 schema
|
||||
|
||||
## Setup
|
||||
|
||||
1. Install dependencies with `bun install`.
|
||||
2. Create a D1 database with `bunx wrangler d1 create meshcore_sar_rx_stats`.
|
||||
3. Apply the schema with `bunx wrangler d1 execute meshcore_sar_rx_stats --remote --file=./schema.sql`.
|
||||
4. Add the real D1 binding id to `wrangler.toml` when deploying.
|
||||
5. Build the dashboard with `bun run build`.
|
||||
6. Run checks with `bun run check`, `bun run test`, and `bun run typecheck`.
|
||||
|
||||
## Routes
|
||||
|
||||
- `GET /` - static Astro dashboard
|
||||
- `GET /api/dashboard?window=24h|7d|30d` - aggregated dashboard JSON
|
||||
- `POST /api/ingest` - anonymous RX stats ingest
|
||||
26
worker/astro.config.mjs
Normal file
26
worker/astro.config.mjs
Normal file
@@ -0,0 +1,26 @@
|
||||
import { defineConfig } from "astro/config";
|
||||
import cloudflare from "@astrojs/cloudflare";
|
||||
|
||||
export default defineConfig({
|
||||
imageService: "compile",
|
||||
vite: {
|
||||
cacheDir: ".astro/vite",
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": "/src",
|
||||
},
|
||||
},
|
||||
},
|
||||
build: {
|
||||
concurrency: 4,
|
||||
},
|
||||
server: {
|
||||
port: 4321,
|
||||
host: "0.0.0.0",
|
||||
allowedHosts: true,
|
||||
},
|
||||
devToolbar: {
|
||||
enabled: false,
|
||||
},
|
||||
adapter: cloudflare(),
|
||||
});
|
||||
1067
worker/bun.lock
Normal file
1067
worker/bun.lock
Normal file
File diff suppressed because it is too large
Load Diff
26
worker/package.json
Normal file
26
worker/package.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "meshcore-sar-rx-stats-worker",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"packageManager": "bun@1.3.8",
|
||||
"scripts": {
|
||||
"dev": "astro dev --host 0.0.0.0",
|
||||
"build": "astro build",
|
||||
"check": "astro check",
|
||||
"test": "bun test",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"deploy": "wrangler deploy"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.9.6",
|
||||
"@astrojs/cloudflare": "^12.6.12",
|
||||
"astro": "^5.17.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@cloudflare/workers-types": "^4.20260403.1",
|
||||
"@types/bun": "^1.3.11",
|
||||
"typescript": "^5.9.3",
|
||||
"wrangler": "^4.80.0"
|
||||
}
|
||||
}
|
||||
42
worker/schema.sql
Normal file
42
worker/schema.sql
Normal file
@@ -0,0 +1,42 @@
|
||||
CREATE TABLE IF NOT EXISTS reports (
|
||||
report_id TEXT PRIMARY KEY,
|
||||
device_key6 TEXT NOT NULL,
|
||||
window_start TEXT NOT NULL,
|
||||
window_end TEXT NOT NULL,
|
||||
received_at TEXT NOT NULL,
|
||||
app_version TEXT,
|
||||
cf_country TEXT,
|
||||
cf_region TEXT,
|
||||
cf_city TEXT,
|
||||
cf_latitude REAL,
|
||||
cf_longitude REAL,
|
||||
cf_colo TEXT,
|
||||
pt_00 INTEGER NOT NULL DEFAULT 0,
|
||||
pt_01 INTEGER NOT NULL DEFAULT 0,
|
||||
pt_02 INTEGER NOT NULL DEFAULT 0,
|
||||
pt_03 INTEGER NOT NULL DEFAULT 0,
|
||||
pt_04 INTEGER NOT NULL DEFAULT 0,
|
||||
pt_05 INTEGER NOT NULL DEFAULT 0,
|
||||
pt_06 INTEGER NOT NULL DEFAULT 0,
|
||||
pt_07 INTEGER NOT NULL DEFAULT 0,
|
||||
pt_08 INTEGER NOT NULL DEFAULT 0,
|
||||
pt_09 INTEGER NOT NULL DEFAULT 0,
|
||||
pt_0a INTEGER NOT NULL DEFAULT 0,
|
||||
pt_0b INTEGER NOT NULL DEFAULT 0,
|
||||
pt_0c INTEGER NOT NULL DEFAULT 0,
|
||||
pt_0d INTEGER NOT NULL DEFAULT 0,
|
||||
pt_0e INTEGER NOT NULL DEFAULT 0,
|
||||
pt_0f INTEGER NOT NULL DEFAULT 0,
|
||||
decode_fail INTEGER NOT NULL DEFAULT 0,
|
||||
path_mode_1b INTEGER NOT NULL DEFAULT 0,
|
||||
path_mode_2b INTEGER NOT NULL DEFAULT 0,
|
||||
path_mode_3b INTEGER NOT NULL DEFAULT 0,
|
||||
path_mode_none INTEGER NOT NULL DEFAULT 0,
|
||||
path_mode_unknown INTEGER NOT NULL DEFAULT 0
|
||||
);
|
||||
|
||||
CREATE INDEX IF NOT EXISTS idx_reports_device_window_end
|
||||
ON reports (device_key6, window_end);
|
||||
|
||||
CREATE INDEX IF NOT EXISTS idx_reports_window_end
|
||||
ON reports (window_end);
|
||||
341
worker/src/layouts/BaseLayout.astro
Normal file
341
worker/src/layouts/BaseLayout.astro
Normal file
@@ -0,0 +1,341 @@
|
||||
---
|
||||
interface Props {
|
||||
title?: string;
|
||||
}
|
||||
|
||||
const { title = "MeshCore SAR RX Stats" } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{title}</title>
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #ecf2f7;
|
||||
--panel: rgba(255, 255, 255, 0.86);
|
||||
--panel-strong: #ffffff;
|
||||
--text: #10212f;
|
||||
--muted: #607284;
|
||||
--line: rgba(16, 33, 47, 0.1);
|
||||
--brand: #0d8f8a;
|
||||
--brand-2: #235fa4;
|
||||
--accent: #ff8f3c;
|
||||
--danger: #b9384f;
|
||||
--shadow: 0 18px 48px rgba(16, 33, 47, 0.08);
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(13, 143, 138, 0.16), transparent 32%),
|
||||
radial-gradient(circle at top right, rgba(35, 95, 164, 0.12), transparent 26%),
|
||||
linear-gradient(180deg, #f7fafc 0%, var(--bg) 100%);
|
||||
color: var(--text);
|
||||
}
|
||||
.shell {
|
||||
max-width: 1320px;
|
||||
margin: 0 auto;
|
||||
padding: 28px 20px 44px;
|
||||
}
|
||||
.hero,
|
||||
.kpi-grid,
|
||||
.content-grid {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
.hero {
|
||||
grid-template-columns: 1.8fr 1fr;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.kpi-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.content-grid {
|
||||
grid-template-columns: 1.25fr 0.95fr;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.panel,
|
||||
.hero-card,
|
||||
.kpi {
|
||||
background: var(--panel);
|
||||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||
border-radius: 28px;
|
||||
backdrop-filter: blur(18px);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.hero-card,
|
||||
.panel,
|
||||
.kpi {
|
||||
padding: 24px;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2rem, 4vw, 3.4rem);
|
||||
line-height: 0.94;
|
||||
max-width: 10ch;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.eyebrow {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.hero-copy {
|
||||
max-width: 58ch;
|
||||
color: var(--muted);
|
||||
line-height: 1.55;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.window-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
.window-tab {
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.48);
|
||||
color: var(--text);
|
||||
border-radius: 999px;
|
||||
padding: 10px 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.window-tab[data-active="true"] {
|
||||
background: linear-gradient(135deg, var(--brand), var(--brand-2));
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
}
|
||||
.hero-value,
|
||||
.kpi-value {
|
||||
font-weight: 700;
|
||||
}
|
||||
.hero-value {
|
||||
font-size: 2.3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.hero-note,
|
||||
.kpi-note,
|
||||
.empty,
|
||||
.legend {
|
||||
color: var(--muted);
|
||||
}
|
||||
.hero-note,
|
||||
.kpi-note,
|
||||
.legend,
|
||||
.table-note,
|
||||
.empty {
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.kpi-value {
|
||||
font-size: 2rem;
|
||||
margin: 8px 0 4px;
|
||||
}
|
||||
.bars {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(26px, 1fr));
|
||||
gap: 8px;
|
||||
align-items: end;
|
||||
min-height: 220px;
|
||||
}
|
||||
.bar-card {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
align-content: end;
|
||||
min-height: 220px;
|
||||
}
|
||||
.bar {
|
||||
min-height: 6px;
|
||||
border-radius: 14px 14px 8px 8px;
|
||||
background: linear-gradient(180deg, #235fa4 0%, #0d8f8a 100%);
|
||||
}
|
||||
.bar-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
writing-mode: vertical-rl;
|
||||
transform: rotate(180deg);
|
||||
height: 72px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.bar-value {
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.pill-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.pill {
|
||||
min-width: 150px;
|
||||
border-radius: 20px;
|
||||
padding: 12px 14px;
|
||||
background: rgba(13, 143, 138, 0.08);
|
||||
}
|
||||
.pill strong {
|
||||
display: block;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
th {
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
code {
|
||||
font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
.meter-stack {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
.meter-row {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
.meter-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.meter-track {
|
||||
height: 12px;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
background: rgba(35, 95, 164, 0.1);
|
||||
}
|
||||
.meter-fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #235fa4, #0d8f8a);
|
||||
}
|
||||
.map {
|
||||
position: relative;
|
||||
min-height: 320px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 25% 35%, rgba(255, 255, 255, 0.14), transparent 16%),
|
||||
radial-gradient(circle at 72% 48%, rgba(255, 255, 255, 0.12), transparent 18%),
|
||||
linear-gradient(180deg, #10263d 0%, #173858 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.map::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(transparent 49.5%, rgba(255, 255, 255, 0.05) 50%, transparent 50.5%),
|
||||
linear-gradient(90deg, transparent 49.5%, rgba(255, 255, 255, 0.05) 50%, transparent 50.5%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.continent {
|
||||
position: absolute;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
filter: blur(1px);
|
||||
}
|
||||
.continent.one {
|
||||
inset: 18% auto auto 8%;
|
||||
width: 26%;
|
||||
height: 22%;
|
||||
}
|
||||
.continent.two {
|
||||
inset: 20% auto auto 38%;
|
||||
width: 20%;
|
||||
height: 18%;
|
||||
}
|
||||
.continent.three {
|
||||
inset: 30% 10% auto auto;
|
||||
width: 26%;
|
||||
height: 26%;
|
||||
}
|
||||
.continent.four {
|
||||
inset: auto auto 12% 34%;
|
||||
width: 18%;
|
||||
height: 20%;
|
||||
}
|
||||
.map-dot {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
border: 2px solid rgba(255, 255, 255, 0.92);
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 0 0 8px rgba(255, 143, 60, 0.16);
|
||||
}
|
||||
.map-dot::after {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: -8px;
|
||||
padding: 5px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(16, 33, 47, 0.74);
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
.banner {
|
||||
margin-bottom: 16px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 18px;
|
||||
background: rgba(185, 56, 79, 0.1);
|
||||
color: var(--danger);
|
||||
border: 1px solid rgba(185, 56, 79, 0.16);
|
||||
}
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
@media (max-width: 1040px) {
|
||||
.hero,
|
||||
.kpi-grid,
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.bar-label {
|
||||
writing-mode: initial;
|
||||
transform: none;
|
||||
height: auto;
|
||||
}
|
||||
.bars {
|
||||
grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
333
worker/src/pages/index.astro
Normal file
333
worker/src/pages/index.astro
Normal file
@@ -0,0 +1,333 @@
|
||||
---
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
|
||||
const windowOptions = [
|
||||
{ key: "24h", label: "Last 24 hours" },
|
||||
{ key: "7d", label: "Last 7 days" },
|
||||
{ key: "30d", label: "Last 30 days" },
|
||||
];
|
||||
---
|
||||
|
||||
<BaseLayout title="MeshCore SAR RX Stats">
|
||||
<div class="shell">
|
||||
<div class="banner" id="error-banner" hidden></div>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-card">
|
||||
<div class="eyebrow">MeshCore SAR</div>
|
||||
<h1>Anonymous RX traffic stats</h1>
|
||||
<p class="hero-copy">
|
||||
Static Astro dashboard for RX live-traffic packet types and path-hash modes.
|
||||
Location comes from Cloudflare ingress metadata, while device identity is reduced to key6.
|
||||
</p>
|
||||
<div class="window-tabs">
|
||||
{windowOptions.map((option) => (
|
||||
<button class="window-tab" data-window={option.key} data-active={option.key === "24h"}>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="hero-card">
|
||||
<div class="eyebrow">Current range</div>
|
||||
<div class="hero-value" id="range-label">Loading…</div>
|
||||
<p class="hero-note" id="range-note">Fetching dashboard data from D1.</p>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section class="kpi-grid">
|
||||
<article class="kpi">
|
||||
<div class="eyebrow">Reports</div>
|
||||
<div class="kpi-value" id="kpi-reports">0</div>
|
||||
<p class="kpi-note">Accepted upload windows in this range.</p>
|
||||
</article>
|
||||
<article class="kpi">
|
||||
<div class="eyebrow">Reporters</div>
|
||||
<div class="kpi-value" id="kpi-reporters">0</div>
|
||||
<p class="kpi-note">Unique key6 reporters.</p>
|
||||
</article>
|
||||
<article class="kpi">
|
||||
<div class="eyebrow">Decoded RX</div>
|
||||
<div class="kpi-value" id="kpi-decoded">0</div>
|
||||
<p class="kpi-note">Packets grouped by known payload type.</p>
|
||||
</article>
|
||||
<article class="kpi">
|
||||
<div class="eyebrow">Decode Fail</div>
|
||||
<div class="kpi-value" id="kpi-failures">0</div>
|
||||
<p class="kpi-note">Malformed or undecodable RX packets.</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="content-grid">
|
||||
<article class="panel">
|
||||
<h2>Traffic trend</h2>
|
||||
<div id="trend-chart" class="empty">No data yet.</div>
|
||||
</article>
|
||||
<article class="panel">
|
||||
<h2>Path mode distribution</h2>
|
||||
<div id="path-mode-list" class="pill-row"></div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="content-grid">
|
||||
<article class="panel">
|
||||
<h2>Top packet types</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Label</th>
|
||||
<th>Column</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="packet-type-table"></tbody>
|
||||
</table>
|
||||
</article>
|
||||
<article class="panel">
|
||||
<h2>Recent reporters</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>key6</th>
|
||||
<th>City</th>
|
||||
<th>Country</th>
|
||||
<th>Packets</th>
|
||||
<th>Last seen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="reporter-table"></tbody>
|
||||
</table>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="content-grid">
|
||||
<article class="panel">
|
||||
<h2>Cloudflare geo map</h2>
|
||||
<div class="map" id="geo-map">
|
||||
<div class="continent one"></div>
|
||||
<div class="continent two"></div>
|
||||
<div class="continent three"></div>
|
||||
<div class="continent four"></div>
|
||||
</div>
|
||||
<p class="legend">
|
||||
Dots reflect Cloudflare ingress latitude and longitude, not device GPS coordinates.
|
||||
</p>
|
||||
</article>
|
||||
<article class="panel">
|
||||
<h2>Packet type mix</h2>
|
||||
<div id="packet-mix" class="meter-stack"></div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script is:inline>
|
||||
const state = { windowKey: "24h" };
|
||||
const elements = {
|
||||
errorBanner: document.getElementById("error-banner"),
|
||||
rangeLabel: document.getElementById("range-label"),
|
||||
rangeNote: document.getElementById("range-note"),
|
||||
reports: document.getElementById("kpi-reports"),
|
||||
reporters: document.getElementById("kpi-reporters"),
|
||||
decoded: document.getElementById("kpi-decoded"),
|
||||
failures: document.getElementById("kpi-failures"),
|
||||
trendChart: document.getElementById("trend-chart"),
|
||||
pathModeList: document.getElementById("path-mode-list"),
|
||||
packetTypeTable: document.getElementById("packet-type-table"),
|
||||
reporterTable: document.getElementById("reporter-table"),
|
||||
packetMix: document.getElementById("packet-mix"),
|
||||
geoMap: document.getElementById("geo-map"),
|
||||
};
|
||||
|
||||
const windowButtons = [...document.querySelectorAll("[data-window]")];
|
||||
|
||||
function setActiveWindow(windowKey) {
|
||||
state.windowKey = windowKey;
|
||||
for (const button of windowButtons) {
|
||||
button.dataset.active = String(button.dataset.window === windowKey);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadDashboard(windowKey) {
|
||||
setActiveWindow(windowKey);
|
||||
elements.errorBanner.hidden = true;
|
||||
elements.rangeLabel.textContent = "Loading…";
|
||||
elements.rangeNote.textContent = "Fetching dashboard data from D1.";
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/dashboard?window=${windowKey}`, {
|
||||
headers: {
|
||||
accept: "application/json",
|
||||
},
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`Dashboard request failed (${response.status})`);
|
||||
}
|
||||
const summary = await response.json();
|
||||
renderDashboard(summary);
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
elements.errorBanner.hidden = false;
|
||||
elements.errorBanner.textContent = `Unable to load dashboard data: ${message}`;
|
||||
elements.rangeLabel.textContent = "Unavailable";
|
||||
elements.rangeNote.textContent = "The dashboard API did not return data.";
|
||||
}
|
||||
}
|
||||
|
||||
function renderDashboard(summary) {
|
||||
elements.rangeLabel.textContent = summary.filter.label;
|
||||
elements.rangeNote.textContent = `Showing reports with window end after ${formatTimestamp(summary.filter.sinceIso)}. Generated ${formatTimestamp(summary.generatedAt)}.`;
|
||||
elements.reports.textContent = String(summary.reportCount);
|
||||
elements.reporters.textContent = String(summary.uniqueDevices);
|
||||
elements.decoded.textContent = String(summary.decodedPackets);
|
||||
elements.failures.textContent = String(summary.decodeFailures);
|
||||
|
||||
renderTrend(summary.chartPoints);
|
||||
renderPathModes(summary.pathModeTotals);
|
||||
renderPacketTypes(summary.packetTypeTotals);
|
||||
renderReporters(summary.recentReporters);
|
||||
renderPacketMix(summary.packetTypeTotals);
|
||||
renderMap(summary.locationPoints);
|
||||
}
|
||||
|
||||
function renderTrend(points) {
|
||||
if (!points.length) {
|
||||
elements.trendChart.innerHTML = '<div class="empty">No data yet for this window.</div>';
|
||||
return;
|
||||
}
|
||||
const maxValue = Math.max(...points.map((point) => point.totalPackets), 1);
|
||||
elements.trendChart.innerHTML = `
|
||||
<div class="bars">
|
||||
${points
|
||||
.map((point) => {
|
||||
const height = Math.max((point.totalPackets / maxValue) * 180, 6);
|
||||
return `
|
||||
<div class="bar-card">
|
||||
<div class="bar-value">${point.totalPackets}</div>
|
||||
<div class="bar" style="height:${height}px"></div>
|
||||
<div class="bar-label">${escapeHtml(point.label.slice(5))}</div>
|
||||
</div>`;
|
||||
})
|
||||
.join("")}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function renderPathModes(entries) {
|
||||
const rows = entries.filter((entry) => entry.total > 0);
|
||||
if (!rows.length) {
|
||||
elements.pathModeList.innerHTML = '<div class="empty">No path mode samples yet.</div>';
|
||||
return;
|
||||
}
|
||||
elements.pathModeList.innerHTML = rows
|
||||
.map(
|
||||
(entry) => `
|
||||
<div class="pill">
|
||||
<strong>${entry.total}</strong>
|
||||
${escapeHtml(entry.label)}
|
||||
</div>`,
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function renderPacketTypes(entries) {
|
||||
const rows = entries.filter((entry) => entry.total > 0).slice(0, 8);
|
||||
if (!rows.length) {
|
||||
elements.packetTypeTable.innerHTML = '<tr><td colspan="3" class="empty">No packet data yet.</td></tr>';
|
||||
return;
|
||||
}
|
||||
elements.packetTypeTable.innerHTML = rows
|
||||
.map(
|
||||
(entry) => `
|
||||
<tr>
|
||||
<td>${escapeHtml(entry.label)}</td>
|
||||
<td><code>${entry.key}</code></td>
|
||||
<td>${entry.total}</td>
|
||||
</tr>`,
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function renderReporters(reporters) {
|
||||
if (!reporters.length) {
|
||||
elements.reporterTable.innerHTML = '<tr><td colspan="5" class="empty">No reporter activity yet.</td></tr>';
|
||||
return;
|
||||
}
|
||||
elements.reporterTable.innerHTML = reporters
|
||||
.map(
|
||||
(reporter) => `
|
||||
<tr>
|
||||
<td><code>${escapeHtml(reporter.key6)}</code></td>
|
||||
<td>${escapeHtml(reporter.city)}</td>
|
||||
<td>${escapeHtml(reporter.country)}</td>
|
||||
<td>${reporter.packetTotal}</td>
|
||||
<td>${escapeHtml(formatTimestamp(reporter.lastSeen))}</td>
|
||||
</tr>`,
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function renderPacketMix(entries) {
|
||||
const rows = entries.filter((entry) => entry.total > 0).slice(0, 6);
|
||||
if (!rows.length) {
|
||||
elements.packetMix.innerHTML = '<div class="empty">No packet mix data yet.</div>';
|
||||
return;
|
||||
}
|
||||
const maxValue = Math.max(...rows.map((entry) => entry.total), 1);
|
||||
elements.packetMix.innerHTML = rows
|
||||
.map(
|
||||
(entry) => `
|
||||
<div class="meter-row">
|
||||
<div class="meter-head">
|
||||
<span>${escapeHtml(entry.label)}</span>
|
||||
<strong>${entry.total}</strong>
|
||||
</div>
|
||||
<div class="meter-track">
|
||||
<div class="meter-fill" style="width:${(entry.total / maxValue) * 100}%"></div>
|
||||
</div>
|
||||
</div>`,
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function renderMap(points) {
|
||||
const dots = [...elements.geoMap.querySelectorAll(".map-dot")];
|
||||
for (const dot of dots) {
|
||||
dot.remove();
|
||||
}
|
||||
for (const point of points) {
|
||||
const dot = document.createElement("div");
|
||||
dot.className = "map-dot";
|
||||
dot.style.left = `${((point.longitude + 180) / 360) * 100}%`;
|
||||
dot.style.top = `${((90 - point.latitude) / 180) * 100}%`;
|
||||
dot.dataset.label = `${point.key6} · ${point.city}`;
|
||||
elements.geoMap.appendChild(dot);
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value)
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
|
||||
function formatTimestamp(value) {
|
||||
const date = new Date(value);
|
||||
const month = `${date.getUTCMonth() + 1}`.padStart(2, "0");
|
||||
const day = `${date.getUTCDate()}`.padStart(2, "0");
|
||||
const hour = `${date.getUTCHours()}`.padStart(2, "0");
|
||||
const minute = `${date.getUTCMinutes()}`.padStart(2, "0");
|
||||
return `${date.getUTCFullYear()}-${month}-${day} ${hour}:${minute} UTC`;
|
||||
}
|
||||
|
||||
for (const button of windowButtons) {
|
||||
button.addEventListener("click", () => {
|
||||
loadDashboard(button.dataset.window ?? "24h");
|
||||
});
|
||||
}
|
||||
|
||||
loadDashboard(state.windowKey);
|
||||
</script>
|
||||
</BaseLayout>
|
||||
169
worker/test/index.test.ts
Normal file
169
worker/test/index.test.ts
Normal file
@@ -0,0 +1,169 @@
|
||||
import { describe, expect, test } from 'bun:test';
|
||||
|
||||
import {
|
||||
REPORT_INSERT_SQL,
|
||||
buildWindowFilter,
|
||||
createEmptyCounts,
|
||||
extractCfGeo,
|
||||
loadDashboardSummary,
|
||||
summarizeRows,
|
||||
validateIngestPayload,
|
||||
} from '../worker/stats';
|
||||
|
||||
describe('validateIngestPayload', () => {
|
||||
test('accepts a complete payload with fixed columns', () => {
|
||||
const counts = createEmptyCounts();
|
||||
counts.pt_04 = 12;
|
||||
counts.path_mode_2b = 4;
|
||||
|
||||
const payload = validateIngestPayload({
|
||||
reportId: 'a1b2c3d4e5f6:2026-04-03T10:00:00.000Z',
|
||||
deviceKey6: 'a1b2c3d4e5f6',
|
||||
windowStart: '2026-04-03T10:00:00.000Z',
|
||||
windowEnd: '2026-04-03T10:05:00.000Z',
|
||||
appVersion: '2026.0402.1+44',
|
||||
counts,
|
||||
});
|
||||
|
||||
expect(payload.counts.pt_04).toBe(12);
|
||||
expect(payload.counts.path_mode_2b).toBe(4);
|
||||
});
|
||||
|
||||
test('rejects missing fixed count keys', () => {
|
||||
expect(() =>
|
||||
validateIngestPayload({
|
||||
reportId: 'a1b2c3d4e5f6:2026-04-03T10:00:00.000Z',
|
||||
deviceKey6: 'a1b2c3d4e5f6',
|
||||
windowStart: '2026-04-03T10:00:00.000Z',
|
||||
windowEnd: '2026-04-03T10:05:00.000Z',
|
||||
appVersion: '2026.0402.1+44',
|
||||
counts: {},
|
||||
}),
|
||||
).toThrow('counts.pt_00 must be a number.');
|
||||
});
|
||||
});
|
||||
|
||||
describe('worker helpers', () => {
|
||||
test('uses insert-or-ignore semantics for idempotent reports', () => {
|
||||
expect(REPORT_INSERT_SQL).toContain('INSERT OR IGNORE INTO reports');
|
||||
});
|
||||
|
||||
test('extractCfGeo reads Cloudflare request metadata', () => {
|
||||
const request = new Request('https://example.com/') as Request & {
|
||||
cf?: Record<string, unknown>;
|
||||
};
|
||||
request.cf = {
|
||||
country: 'SI',
|
||||
region: 'Ljubljana',
|
||||
city: 'Ljubljana',
|
||||
latitude: '46.0569',
|
||||
longitude: '14.5058',
|
||||
colo: 'LJU',
|
||||
};
|
||||
|
||||
const geo = extractCfGeo(request);
|
||||
|
||||
expect(geo.country).toBe('SI');
|
||||
expect(geo.latitude).toBe(46.0569);
|
||||
expect(geo.longitude).toBe(14.5058);
|
||||
expect(geo.colo).toBe('LJU');
|
||||
});
|
||||
|
||||
test('summarizeRows aggregates packet and path mode totals', () => {
|
||||
const filter = buildWindowFilter('24h', new Date('2026-04-03T12:00:00.000Z'));
|
||||
const rows = [
|
||||
{
|
||||
...createEmptyCounts(),
|
||||
report_id: 'a1',
|
||||
device_key6: 'a1b2c3d4e5f6',
|
||||
window_start: '2026-04-03T10:00:00.000Z',
|
||||
window_end: '2026-04-03T10:05:00.000Z',
|
||||
received_at: '2026-04-03T10:05:03.000Z',
|
||||
app_version: '2026.0402.1+44',
|
||||
cf_country: 'SI',
|
||||
cf_region: 'Ljubljana',
|
||||
cf_city: 'Ljubljana',
|
||||
cf_latitude: 46.0569,
|
||||
cf_longitude: 14.5058,
|
||||
cf_colo: 'LJU',
|
||||
pt_04: 12,
|
||||
path_mode_2b: 12,
|
||||
},
|
||||
{
|
||||
...createEmptyCounts(),
|
||||
report_id: 'a2',
|
||||
device_key6: '001122334455',
|
||||
window_start: '2026-04-03T11:00:00.000Z',
|
||||
window_end: '2026-04-03T11:05:00.000Z',
|
||||
received_at: '2026-04-03T11:05:02.000Z',
|
||||
app_version: '2026.0402.1+44',
|
||||
cf_country: 'DE',
|
||||
cf_region: 'Berlin',
|
||||
cf_city: 'Berlin',
|
||||
cf_latitude: 52.52,
|
||||
cf_longitude: 13.405,
|
||||
cf_colo: 'FRA',
|
||||
pt_05: 3,
|
||||
decode_fail: 1,
|
||||
path_mode_none: 1,
|
||||
path_mode_3b: 2,
|
||||
},
|
||||
];
|
||||
|
||||
const summary = summarizeRows(rows, filter);
|
||||
|
||||
expect(summary.reportCount).toBe(2);
|
||||
expect(summary.uniqueDevices).toBe(2);
|
||||
expect(summary.decodedPackets).toBe(15);
|
||||
expect(summary.decodeFailures).toBe(1);
|
||||
expect(summary.pathModeTotals[0]?.total).toBe(12);
|
||||
expect(summary.locationPoints).toHaveLength(2);
|
||||
});
|
||||
|
||||
test('loadDashboardSummary reads D1 rows for the selected window', async () => {
|
||||
const rows = [
|
||||
{
|
||||
...createEmptyCounts(),
|
||||
report_id: 'a1',
|
||||
device_key6: 'a1b2c3d4e5f6',
|
||||
window_start: '2026-04-03T10:00:00.000Z',
|
||||
window_end: '2026-04-03T10:05:00.000Z',
|
||||
received_at: '2026-04-03T10:05:03.000Z',
|
||||
app_version: '2026.0402.1+44',
|
||||
cf_country: 'SI',
|
||||
cf_region: 'Ljubljana',
|
||||
cf_city: 'Ljubljana',
|
||||
cf_latitude: 46.0569,
|
||||
cf_longitude: 14.5058,
|
||||
cf_colo: 'LJU',
|
||||
pt_04: 5,
|
||||
},
|
||||
];
|
||||
|
||||
const env = {
|
||||
DB: {
|
||||
prepare() {
|
||||
return {
|
||||
bind() {
|
||||
return {
|
||||
async all() {
|
||||
return { results: rows };
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
} as any;
|
||||
|
||||
const summary = await loadDashboardSummary(
|
||||
env,
|
||||
'24h',
|
||||
new Date('2026-04-03T12:00:00.000Z'),
|
||||
);
|
||||
|
||||
expect(summary.reportCount).toBe(1);
|
||||
expect(summary.packetTypeTotals[0]?.key).toBe('pt_04');
|
||||
expect(summary.packetTypeTotals[0]?.total).toBe(5);
|
||||
});
|
||||
});
|
||||
18
worker/tsconfig.json
Normal file
18
worker/tsconfig.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"include": [
|
||||
".astro/types.d.ts",
|
||||
"**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"dist",
|
||||
"node_modules"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
"types": ["@cloudflare/workers-types", "bun-types"]
|
||||
}
|
||||
}
|
||||
121
worker/worker/index.ts
Normal file
121
worker/worker/index.ts
Normal file
@@ -0,0 +1,121 @@
|
||||
import {
|
||||
COUNT_KEYS,
|
||||
REPORT_INSERT_SQL,
|
||||
extractCfGeo,
|
||||
jsonHeaders,
|
||||
loadDashboardSummary,
|
||||
validateIngestPayload,
|
||||
type Env,
|
||||
type IngestPayload,
|
||||
} from "./stats";
|
||||
|
||||
const ROUTES = {
|
||||
"/api/ingest": handleIngest,
|
||||
"/api/dashboard": handleDashboard,
|
||||
} as const;
|
||||
|
||||
export default {
|
||||
async fetch(request: Request, env: Env): Promise<Response> {
|
||||
const pathname = new URL(request.url).pathname;
|
||||
const route = Object.entries(ROUTES).find(([prefix]) =>
|
||||
pathname.startsWith(prefix),
|
||||
);
|
||||
if (!route) {
|
||||
return new Response("Not Found", { status: 404 });
|
||||
}
|
||||
try {
|
||||
return await route[1](request, env);
|
||||
} catch (error) {
|
||||
console.error(`Worker route failed for ${pathname}:`, error);
|
||||
return Response.json(
|
||||
{ error: "Internal Server Error" },
|
||||
{
|
||||
headers: jsonHeaders,
|
||||
status: 500,
|
||||
},
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
async function handleIngest(request: Request, env: Env): Promise<Response> {
|
||||
if (request.method !== "POST") {
|
||||
return Response.json(
|
||||
{ error: "Method not allowed" },
|
||||
{
|
||||
headers: jsonHeaders,
|
||||
status: 405,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
let payload: IngestPayload;
|
||||
try {
|
||||
payload = validateIngestPayload(await request.json());
|
||||
} catch (error) {
|
||||
return Response.json(
|
||||
{ error: error instanceof Error ? error.message : "Invalid payload" },
|
||||
{
|
||||
headers: jsonHeaders,
|
||||
status: 400,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const geo = extractCfGeo(request);
|
||||
const values = [
|
||||
payload.reportId,
|
||||
payload.deviceKey6,
|
||||
payload.windowStart,
|
||||
payload.windowEnd,
|
||||
new Date().toISOString(),
|
||||
payload.appVersion,
|
||||
geo.country,
|
||||
geo.region,
|
||||
geo.city,
|
||||
geo.latitude,
|
||||
geo.longitude,
|
||||
geo.colo,
|
||||
...COUNT_KEYS.map((key) => payload.counts[key]),
|
||||
];
|
||||
|
||||
const result = await env.DB.prepare(REPORT_INSERT_SQL).bind(...values).run();
|
||||
const changes = Number((result.meta as { changes?: number }).changes ?? 0);
|
||||
|
||||
return Response.json(
|
||||
{
|
||||
ok: true,
|
||||
duplicate: changes === 0,
|
||||
},
|
||||
{
|
||||
headers: jsonHeaders,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
async function handleDashboard(request: Request, env: Env): Promise<Response> {
|
||||
if (request.method !== "GET") {
|
||||
return Response.json(
|
||||
{ error: "Method not allowed" },
|
||||
{
|
||||
headers: jsonHeaders,
|
||||
status: 405,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const url = new URL(request.url);
|
||||
const summary = await loadDashboardSummary(env, url.searchParams.get("window"));
|
||||
return Response.json(
|
||||
{
|
||||
generatedAt: new Date().toISOString(),
|
||||
...summary,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
...jsonHeaders,
|
||||
"cache-control": "no-store",
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
438
worker/worker/stats.ts
Normal file
438
worker/worker/stats.ts
Normal file
@@ -0,0 +1,438 @@
|
||||
export const PACKET_TYPE_KEYS = [
|
||||
"pt_00",
|
||||
"pt_01",
|
||||
"pt_02",
|
||||
"pt_03",
|
||||
"pt_04",
|
||||
"pt_05",
|
||||
"pt_06",
|
||||
"pt_07",
|
||||
"pt_08",
|
||||
"pt_09",
|
||||
"pt_0a",
|
||||
"pt_0b",
|
||||
"pt_0c",
|
||||
"pt_0d",
|
||||
"pt_0e",
|
||||
"pt_0f",
|
||||
] as const;
|
||||
|
||||
export const PATH_MODE_KEYS = [
|
||||
"path_mode_1b",
|
||||
"path_mode_2b",
|
||||
"path_mode_3b",
|
||||
"path_mode_none",
|
||||
"path_mode_unknown",
|
||||
] as const;
|
||||
|
||||
export const COUNT_KEYS = [
|
||||
...PACKET_TYPE_KEYS,
|
||||
"decode_fail",
|
||||
...PATH_MODE_KEYS,
|
||||
] as const;
|
||||
|
||||
const REPORT_COLUMNS = [
|
||||
"report_id",
|
||||
"device_key6",
|
||||
"window_start",
|
||||
"window_end",
|
||||
"received_at",
|
||||
"app_version",
|
||||
"cf_country",
|
||||
"cf_region",
|
||||
"cf_city",
|
||||
"cf_latitude",
|
||||
"cf_longitude",
|
||||
"cf_colo",
|
||||
...COUNT_KEYS,
|
||||
] as const;
|
||||
|
||||
const PACKET_TYPE_LABELS: Record<(typeof PACKET_TYPE_KEYS)[number], string> = {
|
||||
pt_00: "Request",
|
||||
pt_01: "Response",
|
||||
pt_02: "Text message",
|
||||
pt_03: "Ack",
|
||||
pt_04: "Advertisement",
|
||||
pt_05: "Group text",
|
||||
pt_06: "Group datagram",
|
||||
pt_07: "Anonymous request",
|
||||
pt_08: "Returned path",
|
||||
pt_09: "Trace path",
|
||||
pt_0a: "Multipart packet",
|
||||
pt_0b: "Control packet",
|
||||
pt_0c: "Reserved 0x0C",
|
||||
pt_0d: "Reserved 0x0D",
|
||||
pt_0e: "Reserved 0x0E",
|
||||
pt_0f: "Custom packet",
|
||||
};
|
||||
|
||||
const PATH_MODE_LABELS: Record<(typeof PATH_MODE_KEYS)[number], string> = {
|
||||
path_mode_1b: "1-byte path hash",
|
||||
path_mode_2b: "2-byte path hash",
|
||||
path_mode_3b: "3-byte path hash",
|
||||
path_mode_none: "No path bytes",
|
||||
path_mode_unknown: "Unknown path mode",
|
||||
};
|
||||
|
||||
const WINDOW_OPTIONS = {
|
||||
"24h": {
|
||||
label: "Last 24 hours",
|
||||
durationMs: 24 * 60 * 60 * 1000,
|
||||
bucket: "hour",
|
||||
},
|
||||
"7d": {
|
||||
label: "Last 7 days",
|
||||
durationMs: 7 * 24 * 60 * 60 * 1000,
|
||||
bucket: "day",
|
||||
},
|
||||
"30d": {
|
||||
label: "Last 30 days",
|
||||
durationMs: 30 * 24 * 60 * 60 * 1000,
|
||||
bucket: "day",
|
||||
},
|
||||
} as const;
|
||||
|
||||
export const jsonHeaders = {
|
||||
"content-type": "application/json; charset=utf-8",
|
||||
} as const;
|
||||
|
||||
type CountKey = (typeof COUNT_KEYS)[number];
|
||||
type PacketTypeKey = (typeof PACKET_TYPE_KEYS)[number];
|
||||
type PathModeKey = (typeof PATH_MODE_KEYS)[number];
|
||||
type WindowKey = keyof typeof WINDOW_OPTIONS;
|
||||
|
||||
export type Counts = Record<CountKey, number>;
|
||||
|
||||
export interface Env {
|
||||
DB: D1Database;
|
||||
}
|
||||
|
||||
export interface IngestPayload {
|
||||
reportId: string;
|
||||
deviceKey6: string;
|
||||
windowStart: string;
|
||||
windowEnd: string;
|
||||
appVersion: string;
|
||||
counts: Counts;
|
||||
}
|
||||
|
||||
export interface CfGeo {
|
||||
country: string | null;
|
||||
region: string | null;
|
||||
city: string | null;
|
||||
latitude: number | null;
|
||||
longitude: number | null;
|
||||
colo: string | null;
|
||||
}
|
||||
|
||||
export interface ReportRow extends Counts {
|
||||
report_id: string;
|
||||
device_key6: string;
|
||||
window_start: string;
|
||||
window_end: string;
|
||||
received_at: string;
|
||||
app_version: string | null;
|
||||
cf_country: string | null;
|
||||
cf_region: string | null;
|
||||
cf_city: string | null;
|
||||
cf_latitude: number | null;
|
||||
cf_longitude: number | null;
|
||||
cf_colo: string | null;
|
||||
}
|
||||
|
||||
export interface WindowFilter {
|
||||
windowKey: WindowKey;
|
||||
label: string;
|
||||
sinceIso: string;
|
||||
bucket: "hour" | "day";
|
||||
}
|
||||
|
||||
export interface ChartPoint {
|
||||
label: string;
|
||||
totalPackets: number;
|
||||
reports: number;
|
||||
}
|
||||
|
||||
export interface LocationPoint {
|
||||
key6: string;
|
||||
city: string;
|
||||
country: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
}
|
||||
|
||||
export interface ReporterSummary {
|
||||
key6: string;
|
||||
lastSeen: string;
|
||||
packetTotal: number;
|
||||
country: string;
|
||||
city: string;
|
||||
latitude: number | null;
|
||||
longitude: number | null;
|
||||
}
|
||||
|
||||
export interface DashboardSummary {
|
||||
filter: WindowFilter;
|
||||
reportCount: number;
|
||||
uniqueDevices: number;
|
||||
decodedPackets: number;
|
||||
decodeFailures: number;
|
||||
packetTypeTotals: Array<{ key: PacketTypeKey; label: string; total: number }>;
|
||||
pathModeTotals: Array<{ key: PathModeKey; label: string; total: number }>;
|
||||
recentReporters: ReporterSummary[];
|
||||
chartPoints: ChartPoint[];
|
||||
locationPoints: LocationPoint[];
|
||||
}
|
||||
|
||||
export const REPORT_INSERT_SQL = `
|
||||
INSERT OR IGNORE INTO reports (
|
||||
${REPORT_COLUMNS.join(", ")}
|
||||
) VALUES (
|
||||
${REPORT_COLUMNS.map(() => "?").join(", ")}
|
||||
)`.trim();
|
||||
|
||||
export function createEmptyCounts(): Counts {
|
||||
return Object.fromEntries(
|
||||
COUNT_KEYS.map((key) => [key, 0]),
|
||||
) as Counts;
|
||||
}
|
||||
|
||||
export function validateIngestPayload(payload: unknown): IngestPayload {
|
||||
if (typeof payload !== "object" || payload === null) {
|
||||
throw new Error("Body must be a JSON object.");
|
||||
}
|
||||
const record = payload as Record<string, unknown>;
|
||||
const reportId = asTrimmedString(record.reportId, "reportId");
|
||||
const deviceKey6 = asTrimmedString(record.deviceKey6, "deviceKey6");
|
||||
if (!/^[0-9a-f]{12}$/.test(deviceKey6)) {
|
||||
throw new Error("deviceKey6 must be 12 lowercase hex characters.");
|
||||
}
|
||||
const windowStart = asIsoString(record.windowStart, "windowStart");
|
||||
const windowEnd = asIsoString(record.windowEnd, "windowEnd");
|
||||
if (Date.parse(windowEnd) < Date.parse(windowStart)) {
|
||||
throw new Error("windowEnd must not be earlier than windowStart.");
|
||||
}
|
||||
const appVersion = asTrimmedString(record.appVersion, "appVersion");
|
||||
const counts = validateCounts(record.counts);
|
||||
return {
|
||||
reportId,
|
||||
deviceKey6,
|
||||
windowStart,
|
||||
windowEnd,
|
||||
appVersion,
|
||||
counts,
|
||||
};
|
||||
}
|
||||
|
||||
export function extractCfGeo(request: Request): CfGeo {
|
||||
const cf = (request as Request & { cf?: Record<string, unknown> }).cf;
|
||||
return {
|
||||
country: asNullableString(cf?.country),
|
||||
region: asNullableString(cf?.region),
|
||||
city: asNullableString(cf?.city),
|
||||
latitude: asNullableNumber(cf?.latitude),
|
||||
longitude: asNullableNumber(cf?.longitude),
|
||||
colo: asNullableString(cf?.colo),
|
||||
};
|
||||
}
|
||||
|
||||
export function buildWindowFilter(
|
||||
requestedWindow: string | null,
|
||||
now: Date = new Date(),
|
||||
): WindowFilter {
|
||||
const windowKey =
|
||||
requestedWindow === "24h" ||
|
||||
requestedWindow === "7d" ||
|
||||
requestedWindow === "30d"
|
||||
? requestedWindow
|
||||
: "24h";
|
||||
const option = WINDOW_OPTIONS[windowKey];
|
||||
return {
|
||||
windowKey,
|
||||
label: option.label,
|
||||
sinceIso: new Date(now.getTime() - option.durationMs).toISOString(),
|
||||
bucket: option.bucket,
|
||||
};
|
||||
}
|
||||
|
||||
export async function loadDashboardSummary(
|
||||
env: Env,
|
||||
requestedWindow: string | null,
|
||||
now: Date = new Date(),
|
||||
): Promise<DashboardSummary> {
|
||||
const filter = buildWindowFilter(requestedWindow, now);
|
||||
const query = await env.DB.prepare(
|
||||
"SELECT * FROM reports WHERE window_end >= ? ORDER BY window_end DESC",
|
||||
)
|
||||
.bind(filter.sinceIso)
|
||||
.all<ReportRow>();
|
||||
const rows = (query.results ?? []) as ReportRow[];
|
||||
return summarizeRows(rows, filter);
|
||||
}
|
||||
|
||||
export function summarizeRows(
|
||||
rows: ReportRow[],
|
||||
filter: WindowFilter,
|
||||
): DashboardSummary {
|
||||
const packetTypeTotals = PACKET_TYPE_KEYS.map((key) => ({
|
||||
key,
|
||||
label: PACKET_TYPE_LABELS[key],
|
||||
total: sumRows(rows, key),
|
||||
})).sort((left, right) => right.total - left.total);
|
||||
const pathModeTotals = PATH_MODE_KEYS.map((key) => ({
|
||||
key,
|
||||
label: PATH_MODE_LABELS[key],
|
||||
total: sumRows(rows, key),
|
||||
})).sort((left, right) => right.total - left.total);
|
||||
const decodedPackets = PACKET_TYPE_KEYS.reduce(
|
||||
(total, key) => total + sumRows(rows, key),
|
||||
0,
|
||||
);
|
||||
const decodeFailures = sumRows(rows, "decode_fail");
|
||||
const reporterMap = new Map<string, ReporterSummary>();
|
||||
const chartBuckets = new Map<string, ChartPoint>();
|
||||
|
||||
for (const row of rows) {
|
||||
const packetTotal =
|
||||
decodeFailuresForRow(row) +
|
||||
PACKET_TYPE_KEYS.reduce((total, key) => total + row[key], 0);
|
||||
const existingReporter = reporterMap.get(row.device_key6);
|
||||
if (!existingReporter) {
|
||||
reporterMap.set(row.device_key6, {
|
||||
key6: row.device_key6,
|
||||
lastSeen: row.window_end,
|
||||
packetTotal,
|
||||
country: row.cf_country ?? "Unknown",
|
||||
city: row.cf_city ?? row.cf_region ?? "Unknown",
|
||||
latitude: row.cf_latitude,
|
||||
longitude: row.cf_longitude,
|
||||
});
|
||||
} else {
|
||||
existingReporter.packetTotal += packetTotal;
|
||||
if (row.window_end > existingReporter.lastSeen) {
|
||||
existingReporter.lastSeen = row.window_end;
|
||||
existingReporter.country = row.cf_country ?? existingReporter.country;
|
||||
existingReporter.city =
|
||||
row.cf_city ?? row.cf_region ?? existingReporter.city;
|
||||
existingReporter.latitude = row.cf_latitude;
|
||||
existingReporter.longitude = row.cf_longitude;
|
||||
}
|
||||
}
|
||||
|
||||
const bucketKey = formatBucket(row.window_end, filter.bucket);
|
||||
const existingBucket = chartBuckets.get(bucketKey);
|
||||
if (existingBucket) {
|
||||
existingBucket.totalPackets += packetTotal;
|
||||
existingBucket.reports += 1;
|
||||
} else {
|
||||
chartBuckets.set(bucketKey, {
|
||||
label: bucketKey,
|
||||
totalPackets: packetTotal,
|
||||
reports: 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const recentReporters = [...reporterMap.values()]
|
||||
.sort((left, right) => right.lastSeen.localeCompare(left.lastSeen))
|
||||
.slice(0, 12);
|
||||
const locationPoints = recentReporters
|
||||
.filter(
|
||||
(
|
||||
reporter,
|
||||
): reporter is ReporterSummary & { latitude: number; longitude: number } =>
|
||||
reporter.latitude !== null && reporter.longitude !== null,
|
||||
)
|
||||
.map((reporter) => ({
|
||||
key6: reporter.key6,
|
||||
city: reporter.city,
|
||||
country: reporter.country,
|
||||
latitude: reporter.latitude,
|
||||
longitude: reporter.longitude,
|
||||
}));
|
||||
|
||||
return {
|
||||
filter,
|
||||
reportCount: rows.length,
|
||||
uniqueDevices: reporterMap.size,
|
||||
decodedPackets,
|
||||
decodeFailures,
|
||||
packetTypeTotals,
|
||||
pathModeTotals,
|
||||
recentReporters,
|
||||
chartPoints: [...chartBuckets.values()].sort((left, right) =>
|
||||
left.label.localeCompare(right.label),
|
||||
),
|
||||
locationPoints,
|
||||
};
|
||||
}
|
||||
|
||||
function validateCounts(value: unknown): Counts {
|
||||
if (typeof value !== "object" || value === null) {
|
||||
throw new Error("counts must be an object.");
|
||||
}
|
||||
const record = value as Record<string, unknown>;
|
||||
const counts = createEmptyCounts();
|
||||
for (const key of COUNT_KEYS) {
|
||||
const rawValue = record[key];
|
||||
if (typeof rawValue !== "number" || !Number.isFinite(rawValue)) {
|
||||
throw new Error(`counts.${key} must be a number.`);
|
||||
}
|
||||
if (rawValue < 0) {
|
||||
throw new Error(`counts.${key} must be zero or greater.`);
|
||||
}
|
||||
counts[key] = Math.trunc(rawValue);
|
||||
}
|
||||
return counts;
|
||||
}
|
||||
|
||||
function sumRows(rows: ReportRow[], key: CountKey): number {
|
||||
return rows.reduce((total, row) => total + (row[key] ?? 0), 0);
|
||||
}
|
||||
|
||||
function decodeFailuresForRow(row: ReportRow): number {
|
||||
return row.decode_fail ?? 0;
|
||||
}
|
||||
|
||||
function formatBucket(value: string, bucket: "hour" | "day"): string {
|
||||
const date = new Date(value);
|
||||
const month = `${date.getUTCMonth() + 1}`.padStart(2, "0");
|
||||
const day = `${date.getUTCDate()}`.padStart(2, "0");
|
||||
if (bucket === "day") {
|
||||
return `${date.getUTCFullYear()}-${month}-${day}`;
|
||||
}
|
||||
const hour = `${date.getUTCHours()}`.padStart(2, "0");
|
||||
return `${date.getUTCFullYear()}-${month}-${day} ${hour}:00`;
|
||||
}
|
||||
|
||||
function asTrimmedString(value: unknown, fieldName: string): string {
|
||||
if (typeof value !== "string" || value.trim().length === 0) {
|
||||
throw new Error(`${fieldName} must be a non-empty string.`);
|
||||
}
|
||||
return value.trim();
|
||||
}
|
||||
|
||||
function asIsoString(value: unknown, fieldName: string): string {
|
||||
const stringValue = asTrimmedString(value, fieldName);
|
||||
if (Number.isNaN(Date.parse(stringValue))) {
|
||||
throw new Error(`${fieldName} must be a valid ISO-8601 timestamp.`);
|
||||
}
|
||||
return new Date(stringValue).toISOString();
|
||||
}
|
||||
|
||||
function asNullableString(value: unknown): string | null {
|
||||
return typeof value === "string" && value.trim().length > 0
|
||||
? value.trim()
|
||||
: null;
|
||||
}
|
||||
|
||||
function asNullableNumber(value: unknown): number | null {
|
||||
if (typeof value === "number" && Number.isFinite(value)) {
|
||||
return value;
|
||||
}
|
||||
if (typeof value === "string" && value.trim().length > 0) {
|
||||
const parsed = Number(value);
|
||||
return Number.isFinite(parsed) ? parsed : null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
19
worker/wrangler.toml
Normal file
19
worker/wrangler.toml
Normal file
@@ -0,0 +1,19 @@
|
||||
name = "meshcore-sar-rx-stats"
|
||||
main = "worker/index.ts"
|
||||
compatibility_date = "2026-04-03"
|
||||
compatibility_flags = ["nodejs_compat"]
|
||||
|
||||
[observability.logs]
|
||||
enabled = false
|
||||
|
||||
[placement]
|
||||
mode = "smart"
|
||||
|
||||
[assets]
|
||||
directory = "./dist"
|
||||
not_found_handling = "404-page"
|
||||
run_worker_first = ["/api/*"]
|
||||
|
||||
[[d1_databases]]
|
||||
binding = "DB"
|
||||
database_name = "meshcore_sar_rx_stats"
|
||||
Reference in New Issue
Block a user