Bernt
bae705aa97
- Add NFC ePassport roadmap (ICAO 9303, eIDAS) - Add TensorFlow.js edge face detection (BlazeFace) - Add structured audit logger (GDPR-compliant) - Risk scoring support Part of KYC Apple Native UX v1.1.0
171 lines
5.8 KiB
HTML
171 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="sv">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>QUIXZOOM System Health</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, system-ui, sans-serif; background: #0a0e27; color: #fff; padding: 20px; }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 1400px; margin: 0 auto; }
|
|
.card { background: #1a1f3a; border-radius: 12px; padding: 20px; }
|
|
.card h2 { font-size: 14px; text-transform: uppercase; color: #8b92b4; margin-bottom: 16px; }
|
|
.metric { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #2a3050; }
|
|
.metric:last-child { border-bottom: none; }
|
|
.metric-label { font-size: 14px; color: #c5c9e0; }
|
|
.metric-value { font-size: 18px; font-weight: 600; }
|
|
.metric-value.good { color: #4ade80; }
|
|
.metric-value.warn { color: #fbbf24; }
|
|
.metric-value.critical { color: #f87171; }
|
|
.header { text-align: center; margin-bottom: 30px; }
|
|
.header h1 { font-size: 24px; margin-bottom: 8px; }
|
|
.header p { color: #8b92b4; font-size: 14px; }
|
|
.timestamp { font-size: 12px; color: #5a6090; margin-top: 20px; text-align: center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>QUIXZOOM System Health</h1>
|
|
<p>Real-time infrastructure monitoring</p>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="card">
|
|
<h2>Data Collection</h2>
|
|
<div class="metric">
|
|
<span class="metric-label">Observations/min</span>
|
|
<span class="metric-value good" id="obs-rate">0</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">Videos uploaded</span>
|
|
<span class="metric-value" id="videos">0</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">AI analyses/min</span>
|
|
<span class="metric-value good" id="ai-rate">0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Knowledge Graph</h2>
|
|
<div class="metric">
|
|
<span class="metric-label">Total objects</span>
|
|
<span class="metric-value" id="total-objects">0</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">Evidence per object</span>
|
|
<span class="metric-value" id="evidence-ratio">0</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">Uncertain objects</span>
|
|
<span class="metric-value warn" id="uncertain">0</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">Unverified</span>
|
|
<span class="metric-value warn" id="unverified">0</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">Duplicate suspects</span>
|
|
<span class="metric-value critical" id="duplicates">0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Identity Engine</h2>
|
|
<div class="metric">
|
|
<span class="metric-label">Auto-merge rate</span>
|
|
<span class="metric-value good" id="auto-merge">0%</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">Manual verification</span>
|
|
<span class="metric-value" id="manual">0%</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">Precision</span>
|
|
<span class="metric-value good" id="precision">0%</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">Recall</span>
|
|
<span class="metric-value good" id="recall">0%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Infrastructure Health</h2>
|
|
<div class="metric">
|
|
<span class="metric-label">Objects with changes</span>
|
|
<span class="metric-value warn" id="changes">0</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">New anomalies</span>
|
|
<span class="metric-value critical" id="anomalies">0</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">Priority missions</span>
|
|
<span class="metric-value critical" id="missions">0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Fleet</h2>
|
|
<div class="metric">
|
|
<span class="metric-label">Active Zoomers</span>
|
|
<span class="metric-value good" id="active-zoomers">0</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">Avg response time</span>
|
|
<span class="metric-value" id="response-time">0ms</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">Mission completion</span>
|
|
<span class="metric-value good" id="completion">0%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>System Resources</h2>
|
|
<div class="metric">
|
|
<span class="metric-label">Events/sec</span>
|
|
<span class="metric-value" id="events-sec">0</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">DB writes/sec</span>
|
|
<span class="metric-value" id="db-writes">0</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">CPU</span>
|
|
<span class="metric-value" id="cpu">0%</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">RAM</span>
|
|
<span class="metric-value" id="ram">0MB</span>
|
|
</div>
|
|
<div class="metric">
|
|
<span class="metric-label">P99 Latency</span>
|
|
<span class="metric-value" id="p99">0ms</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="timestamp" id="timestamp">Last updated: --</p>
|
|
|
|
<script>
|
|
async function fetchStats() {
|
|
try {
|
|
const res = await fetch('http://localhost:3001/stats');
|
|
const data = await res.json();
|
|
|
|
document.getElementById('total-objects').textContent = data.objects || 0;
|
|
document.getElementById('active-zoomers').textContent = data.zoomers || 0;
|
|
document.getElementById('timestamp').textContent = 'Last updated: ' + new Date().toISOString();
|
|
} catch (e) {
|
|
console.error('Failed to fetch stats:', e);
|
|
}
|
|
}
|
|
|
|
fetchStats();
|
|
setInterval(fetchStats, 5000);
|
|
</script>
|
|
</body>
|
|
</html>
|