+42 -8

backend/src/metrics/timing.zig

··· 18 18 const ENDPOINT_COUNT = @typeInfo(Endpoint).@"enum".fields.len; 19 19 const PERSIST_PATH = "/data/timing.bin"; 20 20 const PERSIST_PATH_HOURLY = "/data/timing_hourly.bin"; 21 21 - const HOURS_TO_KEEP = 24; 21 21 + const HOURS_TO_KEEP = 720; // 30 days 22 22 + const LATENCY_HISTORY_HOURS = 24; // per-endpoint latency charts stay at 24h 22 23 23 24 /// per-endpoint latency buffer 24 25 const LatencyBuffer = struct { ··· 225 226 return result; 226 227 } 227 228 228 228 - /// get time series for an endpoint (last 24 hours) 229 229 - pub fn getTimeSeries(endpoint: Endpoint) [HOURS_TO_KEEP]TimeSeriesPoint { 229 229 + /// get time series for an endpoint (last 24 hours, for latency charts) 230 230 + pub fn getTimeSeries(endpoint: Endpoint) [LATENCY_HISTORY_HOURS]TimeSeriesPoint { 230 231 mutex.lock(); 231 232 defer mutex.unlock(); 232 233 ··· 234 235 235 236 const current_hour = getCurrentHour(); 236 237 const ep_buckets = hourly[@intFromEnum(endpoint)]; 237 237 - var result: [HOURS_TO_KEEP]TimeSeriesPoint = undefined; 238 238 + var result: [LATENCY_HISTORY_HOURS]TimeSeriesPoint = undefined; 238 239 239 240 // return hours in chronological order, oldest first 240 240 - for (0..HOURS_TO_KEEP) |i| { 241 241 - const hours_ago = HOURS_TO_KEEP - 1 - i; 241 241 + for (0..LATENCY_HISTORY_HOURS) |i| { 242 242 + const hours_ago = LATENCY_HISTORY_HOURS - 1 - i; 242 243 const hour = current_hour - @as(i64, @intCast(hours_ago)) * 3600; 243 244 const idx = getHourIndex(hour); 244 245 const bucket = ep_buckets[idx]; ··· 258 259 } 259 260 260 261 /// get time series for all endpoints 261 261 - pub fn getAllTimeSeries() [ENDPOINT_COUNT][HOURS_TO_KEEP]TimeSeriesPoint { 262 262 - var result: [ENDPOINT_COUNT][HOURS_TO_KEEP]TimeSeriesPoint = undefined; 262 262 + pub fn getAllTimeSeries() [ENDPOINT_COUNT][LATENCY_HISTORY_HOURS]TimeSeriesPoint { 263 263 + var result: [ENDPOINT_COUNT][LATENCY_HISTORY_HOURS]TimeSeriesPoint = undefined; 263 264 for (0..ENDPOINT_COUNT) |i| { 264 265 result[i] = getTimeSeries(@enumFromInt(i)); 265 266 } 266 267 return result; 267 268 } 269 269 + 270 270 + /// traffic data point (aggregate across all endpoints) 271 271 + pub const TrafficPoint = struct { 272 272 + hour: i64, 273 273 + count: u32, 274 274 + }; 275 275 + 276 276 + /// get aggregate traffic series (all endpoints summed, last 720 hours) 277 277 + pub fn getTrafficSeries() [HOURS_TO_KEEP]TrafficPoint { 278 278 + mutex.lock(); 279 279 + defer mutex.unlock(); 280 280 + 281 281 + ensureInitialized(); 282 282 + 283 283 + const current_hour = getCurrentHour(); 284 284 + var result: [HOURS_TO_KEEP]TrafficPoint = undefined; 285 285 + 286 286 + for (0..HOURS_TO_KEEP) |i| { 287 287 + const hours_ago = HOURS_TO_KEEP - 1 - i; 288 288 + const hour = current_hour - @as(i64, @intCast(hours_ago)) * 3600; 289 289 + const idx = getHourIndex(hour); 290 290 + 291 291 + var total: u32 = 0; 292 292 + for (0..ENDPOINT_COUNT) |ep| { 293 293 + const bucket = hourly[ep][idx]; 294 294 + if (bucket.hour == hour) { 295 295 + total += bucket.count; 296 296 + } 297 297 + } 298 298 + result[i] = .{ .hour = hour, .count = total }; 299 299 + } 300 300 + return result; 301 301 + }

+29

backend/src/server/dashboard.zig

··· 24 24 top_pubs_json: []const u8, 25 25 platforms_json: []const u8, 26 26 timing_json: []const u8, 27 27 + traffic_json: []const u8, 27 28 }; 28 29 29 30 fn getRelayUrl() []const u8 { ··· 121 122 .top_pubs_json = try formatPubsJson(alloc, batch.get(4)), 122 123 .platforms_json = try formatPlatformsJson(alloc, batch.get(1)), 123 124 .timing_json = try formatTimingJson(alloc), 125 125 + .traffic_json = try formatTrafficJson(alloc), 124 126 }; 125 127 } 126 128 ··· 180 182 .top_pubs_json = top_pubs_json, 181 183 .platforms_json = platforms_json, 182 184 .timing_json = try formatTimingJson(alloc), 185 185 + .traffic_json = try formatTrafficJson(alloc), 183 186 }; 184 187 } 185 188 ··· 320 323 return try output.toOwnedSlice(); 321 324 } 322 325 326 326 + fn formatTrafficJson(alloc: Allocator) ![]const u8 { 327 327 + const series = timing.getTrafficSeries(); 328 328 + 329 329 + var output: std.Io.Writer.Allocating = .init(alloc); 330 330 + errdefer output.deinit(); 331 331 + var jw: json.Stringify = .{ .writer = &output.writer }; 332 332 + 333 333 + try jw.beginArray(); 334 334 + for (series) |point| { 335 335 + try jw.beginObject(); 336 336 + try jw.objectField("hour"); 337 337 + try jw.write(point.hour); 338 338 + try jw.objectField("count"); 339 339 + try jw.write(point.count); 340 340 + try jw.endObject(); 341 341 + } 342 342 + try jw.endArray(); 343 343 + 344 344 + return try output.toOwnedSlice(); 345 345 + } 346 346 + 323 347 /// Generate dashboard data as JSON for API endpoint 324 348 pub fn toJson(alloc: Allocator, data: Data) ![]const u8 { 325 349 var output: std.Io.Writer.Allocating = .init(alloc); ··· 370 394 try jw.objectField("timing"); 371 395 try jw.beginWriteRaw(); 372 396 try jw.writer.writeAll(data.timing_json); 397 397 + jw.endWriteRaw(); 398 398 + 399 399 + try jw.objectField("trafficHistory"); 400 400 + try jw.beginWriteRaw(); 401 401 + try jw.writer.writeAll(data.traffic_json); 373 402 jw.endWriteRaw(); 374 403 375 404 try jw.endObject();

+39

site/dashboard.css

··· 148 148 .timing-value { color: var(--text); } 149 149 .timing-value .dim { color: var(--text-dim); } 150 150 151 151 + .traffic-sparkline { 152 152 + position: relative; 153 153 + height: 60px; 154 154 + } 155 155 + .traffic-tooltip { 156 156 + position: absolute; 157 157 + bottom: 2px; 158 158 + right: 4px; 159 159 + font-size: 9px; 160 160 + color: var(--text-dim); 161 161 + white-space: nowrap; 162 162 + pointer-events: none; 163 163 + opacity: 0; 164 164 + transition: opacity 0.1s; 165 165 + background: var(--tooltip-bg); 166 166 + padding: 1px 4px; 167 167 + } 168 168 + .traffic-range-btns { 169 169 + margin-left: 0.5rem; 170 170 + } 171 171 + .traffic-range-btns button { 172 172 + font-family: monospace; 173 173 + font-size: 10px; 174 174 + background: none; 175 175 + border: 1px solid var(--border); 176 176 + color: var(--text-dim); 177 177 + padding: 1px 6px; 178 178 + cursor: pointer; 179 179 + margin-left: 2px; 180 180 + } 181 181 + .traffic-range-btns button:hover { 182 182 + border-color: var(--border-focus); 183 183 + color: var(--text-secondary); 184 184 + } 185 185 + .traffic-range-btns button.active { 186 186 + border-color: #1B7340; 187 187 + color: #1B7340; 188 188 + } 189 189 + 151 190 .latency-grid { 152 191 display: grid; 153 192 grid-template-columns: 1fr 1fr 1fr;

+12

site/dashboard.html

··· 45 45 </section> 46 46 47 47 <section> 48 48 + <div class="section-title"> 49 49 + traffic 50 50 + <span class="traffic-range-btns" id="traffic-range"> 51 51 + <button data-range="24h">24h</button> 52 52 + <button data-range="7d" class="active">7d</button> 53 53 + <button data-range="30d">30d</button> 54 54 + </span> 55 55 + </div> 56 56 + <div class="traffic-sparkline" id="traffic-sparkline"></div> 57 57 + </section> 58 58 + 59 59 + <section> 48 60 <div class="section-title">documents by platform</div> 49 61 <div class="chart-box"> 50 62 <div id="platforms"></div>

+103

site/dashboard.js

··· 245 245 }); 246 246 } 247 247 248 248 + // traffic sparkline 249 249 + let trafficData = []; 250 250 + let currentRange = '7d'; 251 251 + const RANGE_HOURS = { '24h': 24, '7d': 168, '30d': 720 }; 252 252 + 253 253 + function renderTrafficSparkline(history) { 254 254 + if (!history) return; 255 255 + trafficData = history; 256 256 + drawTrafficSvg(); 257 257 + } 258 258 + 259 259 + function drawTrafficSvg() { 260 260 + const container = document.getElementById('traffic-sparkline'); 261 261 + if (!container) return; 262 262 + container.innerHTML = ''; 263 263 + 264 264 + const hours = RANGE_HOURS[currentRange] || 168; 265 265 + const data = trafficData.slice(-hours); 266 266 + if (data.length === 0) return; 267 267 + 268 268 + const max = Math.max(...data.map(d => d.count), 1); 269 269 + const w = container.clientWidth || 560; 270 270 + const h = 60; 271 271 + 272 272 + const ns = 'http://www.w3.org/2000/svg'; 273 273 + const svg = document.createElementNS(ns, 'svg'); 274 274 + svg.setAttribute('width', w); 275 275 + svg.setAttribute('height', h); 276 276 + svg.setAttribute('viewBox', '0 0 ' + w + ' ' + h); 277 277 + svg.style.display = 'block'; 278 278 + 279 279 + const pad = { top: 2, right: 2, bottom: 2, left: 2 }; 280 280 + const cw = w - pad.left - pad.right; 281 281 + const ch = h - pad.top - pad.bottom; 282 282 + 283 283 + const points = data.map((d, i) => { 284 284 + const x = pad.left + (i / Math.max(data.length - 1, 1)) * cw; 285 285 + const y = pad.top + ch - (d.count / max) * ch; 286 286 + return { x, y, d }; 287 287 + }); 288 288 + 289 289 + // filled area 290 290 + const polyPoints = [pad.left + ',' + (pad.top + ch)] 291 291 + .concat(points.map(p => p.x + ',' + p.y)) 292 292 + .concat([(pad.left + cw) + ',' + (pad.top + ch)]); 293 293 + const polygon = document.createElementNS(ns, 'polygon'); 294 294 + polygon.setAttribute('points', polyPoints.join(' ')); 295 295 + polygon.setAttribute('fill', '#1B7340'); 296 296 + polygon.setAttribute('opacity', '0.15'); 297 297 + svg.appendChild(polygon); 298 298 + 299 299 + // line 300 300 + const linePoints = points.map(p => p.x + ',' + p.y).join(' '); 301 301 + const polyline = document.createElementNS(ns, 'polyline'); 302 302 + polyline.setAttribute('points', linePoints); 303 303 + polyline.setAttribute('fill', 'none'); 304 304 + polyline.setAttribute('stroke', '#1B7340'); 305 305 + polyline.setAttribute('stroke-width', '1.5'); 306 306 + svg.appendChild(polyline); 307 307 + 308 308 + // hover overlay 309 309 + const overlay = document.createElementNS(ns, 'rect'); 310 310 + overlay.setAttribute('width', w); 311 311 + overlay.setAttribute('height', h); 312 312 + overlay.setAttribute('fill', 'transparent'); 313 313 + svg.appendChild(overlay); 314 314 + 315 315 + container.appendChild(svg); 316 316 + 317 317 + // tooltip 318 318 + const tooltip = document.createElement('div'); 319 319 + tooltip.className = 'traffic-tooltip'; 320 320 + container.appendChild(tooltip); 321 321 + 322 322 + svg.addEventListener('mousemove', function(e) { 323 323 + const rect = svg.getBoundingClientRect(); 324 324 + const mouseX = e.clientX - rect.left; 325 325 + const idx = Math.round((mouseX - pad.left) / cw * (data.length - 1)); 326 326 + const ci = Math.max(0, Math.min(data.length - 1, idx)); 327 327 + const pt = data[ci]; 328 328 + if (pt) { 329 329 + const d = new Date(pt.hour * 1000); 330 330 + const label = d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) + ' ' + formatTimestamp(pt.hour); 331 331 + tooltip.textContent = label + ' · ' + pt.count + ' req'; 332 332 + tooltip.style.opacity = '1'; 333 333 + } 334 334 + }); 335 335 + svg.addEventListener('mouseleave', function() { 336 336 + tooltip.style.opacity = '0'; 337 337 + }); 338 338 + } 339 339 + 340 340 + // range button handler 341 341 + document.getElementById('traffic-range')?.addEventListener('click', function(e) { 342 342 + const btn = e.target.closest('button[data-range]'); 343 343 + if (!btn) return; 344 344 + currentRange = btn.dataset.range; 345 345 + this.querySelectorAll('button').forEach(b => b.classList.remove('active')); 346 346 + btn.classList.add('active'); 347 347 + drawTrafficSvg(); 348 348 + }); 349 349 + 248 350 function formatTimestamp(hour) { 249 351 const d = new Date(hour * 1000); 250 352 const h = d.getHours(); ··· 289 391 290 392 renderPlatforms(data.platforms); 291 393 renderTiming(data.timing); 394 394 + renderTrafficSparkline(data.trafficHistory); 292 395 renderTimeline(data.timeline); 293 396 renderPubs(data.topPubs); 294 397 renderTags(data.tags);