Files
adam-acs/docs/tr06_sequence/code.html
T
Kevin L'Hereec 0c83a4ccb2 feat: TR-069 Exchange Viewer - structured MongoDB storage with SSE streaming and sequence diagram UI
- MongoDB storage: cwmp_exchanges collection with indexes (deviceId+timestamp, deviceId+sequenceNumber unique, TTL 24h)
- ExchangeStoreService: CWMP method extraction, per-device queue for ordering, retry logic, message cap (5000/device)
- Exchange API: GET/DELETE/SSE stream endpoints with Last-Event-ID reconnection
- CwmpLoggerMiddleware: dual-write (MongoDB + legacy files) with fire-and-forget
- Frontend: SequenceViewer (CPE↔ACS lifelines, arrows, auto-scroll, virtual scroll) + InspectorPanel (formatted XML, copy, syntax highlighting)
- Tr069Trace page: integrated new viewer with col-6/col-6 layout
- DeviceDetail page: collapsible exchange section when device is traced
- 14 property-based tests, 40+ unit tests, 5 integration tests
- Health check includes index verification
- Config: feature flags, SSE timeouts, retry policy
2026-06-03 15:52:44 +02:00

367 lines
20 KiB
HTML

<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>TR-069 Protocol Analyzer</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=JetBrains+Mono:wght@400;500&amp;family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&amp;display=swap" rel="stylesheet"/>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
/* Custom scrollbar for technical look */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.lifeline-gradient {
background: linear-gradient(to bottom, #000 0%, #000 5%, transparent 5%, transparent 100%);
background-size: 1px 20px;
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary-fixed-dim": "#c3c0ff",
"surface-container-high": "#dce9ff",
"surface-container-lowest": "#ffffff",
"on-background": "#0b1c30",
"on-tertiary": "#ffffff",
"error": "#ba1a1a",
"on-primary-fixed": "#131b2e",
"surface-tint": "#565e74",
"secondary-fixed-dim": "#6bd8cb",
"secondary-container": "#86f2e4",
"surface-container": "#e5eeff",
"on-primary-fixed-variant": "#3f465c",
"outline-variant": "#c6c6cd",
"on-secondary-fixed": "#00201d",
"on-surface-variant": "#45464d",
"surface-bright": "#f8f9ff",
"on-primary": "#ffffff",
"tertiary": "#000000",
"primary-fixed-dim": "#bec6e0",
"on-tertiary-container": "#7671ff",
"surface-container-low": "#eff4ff",
"surface-container-highest": "#d3e4fe",
"surface-variant": "#d3e4fe",
"inverse-on-surface": "#eaf1ff",
"secondary": "#006a61",
"primary-fixed": "#dae2fd",
"primary": "#000000",
"tertiary-container": "#0f0069",
"on-error-container": "#93000a",
"on-tertiary-fixed-variant": "#3323cc",
"on-surface": "#0b1c30",
"on-error": "#ffffff",
"on-secondary": "#ffffff",
"surface-dim": "#cbdbf5",
"error-container": "#ffdad6",
"tertiary-fixed": "#e2dfff",
"secondary-fixed": "#89f5e7",
"background": "#f8f9ff",
"primary-container": "#131b2e",
"on-secondary-fixed-variant": "#005049",
"on-tertiary-fixed": "#0f0069",
"on-secondary-container": "#006f66",
"surface": "#f8f9ff",
"inverse-surface": "#213145",
"inverse-primary": "#bec6e0",
"outline": "#76777d"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"gutter": "16px",
"stack-md": "16px",
"stack-sm": "8px",
"unit": "4px",
"stack-lg": "32px",
"sidebar-width": "260px",
"container-padding": "24px"
},
"fontFamily": {
"mono-sm": ["JetBrains Mono"],
"headline-md": ["Inter"],
"mono-md": ["JetBrains Mono"],
"headline-lg": ["Inter"],
"body-md": ["Inter"],
"body-sm": ["Inter"],
"body-lg": ["Inter"],
"label-md": ["Inter"],
"headline-sm": ["Inter"]
},
"fontSize": {
"mono-sm": ["11px", { "lineHeight": "16px", "fontWeight": "400" }],
"headline-md": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600" }],
"mono-md": ["13px", { "lineHeight": "20px", "fontWeight": "400" }],
"headline-lg": ["30px", { "lineHeight": "38px", "letterSpacing": "-0.02em", "fontWeight": "600" }],
"body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
"body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
"body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
"label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500" }],
"headline-sm": ["18px", { "lineHeight": "26px", "fontWeight": "600" }]
}
},
},
}
</script>
</head>
<body class="bg-background text-on-background font-body-md overflow-hidden">
<!-- Top Navigation Shell -->
<header class="bg-surface text-on-surface font-headline-sm text-headline-sm docked full-width top-0 border-b border-outline-variant flex justify-between items-center px-gutter w-full h-16 z-50">
<div class="flex items-center gap-stack-lg">
<span class="font-headline-sm text-headline-sm font-bold text-on-surface">TR-069 Protocol Analyzer</span>
<nav class="hidden md:flex items-center h-16 gap-6">
<a class="text-on-surface-variant font-label-md text-label-md h-full flex items-center px-2 hover:bg-surface-container transition-colors duration-200" href="#">Dashboard</a>
<a class="text-on-surface-variant font-label-md text-label-md h-full flex items-center px-2 hover:bg-surface-container transition-colors duration-200" href="#">Live Stream</a>
<a class="text-primary font-bold border-b-2 border-primary h-full flex items-center px-2" href="#">Analysis</a>
<a class="text-on-surface-variant font-label-md text-label-md h-full flex items-center px-2 hover:bg-surface-container transition-colors duration-200" href="#">Config</a>
</nav>
</div>
<div class="flex items-center gap-4">
<div class="relative group">
<span class="material-symbols-outlined cursor-pointer p-2 hover:bg-surface-container-high rounded-full transition-colors duration-150" data-icon="filter_list">filter_list</span>
</div>
<span class="material-symbols-outlined cursor-pointer p-2 hover:bg-surface-container-high rounded-full transition-colors duration-150" data-icon="settings">settings</span>
<span class="material-symbols-outlined cursor-pointer p-2 hover:bg-surface-container-high rounded-full transition-colors duration-150" data-icon="help">help</span>
</div>
</header>
<div class="flex h-[calc(100vh-64px)] overflow-hidden">
<!-- Side Navigation Shell -->
<aside class="bg-surface-container-low text-primary font-label-md text-label-md docked left-0 h-full w-sidebar-width border-r border-outline-variant flex flex-col sticky top-0">
<div class="p-6">
<div class="flex items-center gap-3 mb-8">
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center">
<span class="material-symbols-outlined text-surface" data-icon="router">router</span>
</div>
<div>
<div class="font-headline-sm text-[14px] font-bold text-primary">Network Monitor</div>
<div class="text-[11px] text-on-surface-variant">Active Nodes: 1,240</div>
</div>
</div>
<button class="w-full bg-primary text-on-primary py-2.5 rounded-lg font-label-md text-label-md mb-8 hover:opacity-90 transition-opacity">
New Capture
</button>
<nav class="space-y-1">
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container font-semibold rounded-lg transition-all duration-150" href="#">
<span class="material-symbols-outlined" data-icon="history">history</span>
<span>Sessions</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high rounded-lg transition-all duration-150" href="#">
<span class="material-symbols-outlined" data-icon="router">router</span>
<span>Devices</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high rounded-lg transition-all duration-150" href="#">
<span class="material-symbols-outlined" data-icon="analytics">analytics</span>
<span>Diagnostics</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high rounded-lg transition-all duration-150" href="#">
<span class="material-symbols-outlined" data-icon="list_alt">list_alt</span>
<span>Logs</span>
</a>
</nav>
</div>
<div class="mt-auto p-6 border-t border-outline-variant">
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high rounded-lg transition-all duration-150" href="#">
<span class="material-symbols-outlined" data-icon="logout">logout</span>
<span>Logout</span>
</a>
</div>
</aside>
<!-- Main Content Area -->
<main class="flex-1 flex flex-col overflow-hidden bg-white">
<!-- Session Status Header -->
<div class="flex items-center justify-between px-8 py-4 bg-surface-container-low border-b border-outline-variant">
<div class="flex gap-8">
<div>
<span class="text-label-md font-label-md text-on-surface-variant block uppercase tracking-wider mb-1">Device Serial</span>
<span class="text-body-md font-mono-md font-medium text-on-surface">TR069-NODE-550291-B</span>
</div>
<div class="h-10 w-px bg-outline-variant"></div>
<div>
<span class="text-label-md font-label-md text-on-surface-variant block uppercase tracking-wider mb-1">IP Address</span>
<span class="text-body-md font-mono-md font-medium text-on-surface">192.168.100.42</span>
</div>
<div class="h-10 w-px bg-outline-variant"></div>
<div>
<span class="text-label-md font-label-md text-on-surface-variant block uppercase tracking-wider mb-1">Connection Status</span>
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-secondary"></span>
<span class="text-body-md font-medium text-on-surface">CWMP Session Established</span>
</div>
</div>
</div>
<div class="flex items-center gap-2">
<span class="px-3 py-1 bg-surface-container text-on-surface-variant rounded-full text-label-md font-label-md border border-outline-variant">Session ID: 88241</span>
<button class="material-symbols-outlined text-on-surface-variant p-1" data-icon="more_vert">more_vert</button>
</div>
</div>
<!-- Sequence Diagram Content -->
<div class="flex-1 flex overflow-hidden">
<div class="flex-1 overflow-y-auto relative bg-slate-50 p-12">
<!-- Lifeline Headers -->
<div class="sticky top-0 z-10 flex justify-around mb-12 pointer-events-none">
<div class="px-10 py-3 bg-primary text-on-primary rounded font-bold shadow-sm border border-primary min-w-[120px] text-center">CPE</div>
<div class="px-10 py-3 bg-primary text-on-primary rounded font-bold shadow-sm border border-primary min-w-[120px] text-center">ACS</div>
</div>
<!-- Vertical Lifelines -->
<div class="absolute top-0 bottom-0 left-1/4 w-px bg-outline pointer-events-none opacity-20"></div>
<div class="absolute top-0 bottom-0 right-1/4 w-px bg-outline pointer-events-none opacity-20"></div>
<!-- Messages -->
<div class="relative space-y-10 pb-20">
<!-- Row: Inform -->
<div class="relative group cursor-pointer" onclick="selectMessage('inform')">
<div class="absolute left-[25%] right-[25%] flex items-center">
<div class="flex-1 h-px bg-secondary relative">
<div class="absolute right-0 -top-[5px] border-y-[6px] border-y-transparent border-l-[10px] border-l-secondary"></div>
</div>
<div class="absolute left-1/2 -translate-x-1/2 -top-6 text-center">
<span class="px-2 py-0.5 bg-secondary-container text-on-secondary-container text-label-md font-label-md rounded border border-secondary/20">Inform</span>
<span class="block text-[10px] font-mono-sm text-on-surface-variant mt-1">10:05:22.450</span>
</div>
</div>
<div class="h-8 invisible">spacer</div>
</div>
<!-- Row: InformResponse -->
<div class="relative group cursor-pointer" onclick="selectMessage('inform-response')">
<div class="absolute left-[25%] right-[25%] flex items-center">
<div class="flex-1 h-px bg-tertiary-container relative">
<div class="absolute left-0 -top-[5px] border-y-[6px] border-y-transparent border-r-[10px] border-r-tertiary-container"></div>
</div>
<div class="absolute left-1/2 -translate-x-1/2 -top-6 text-center">
<span class="px-2 py-0.5 bg-surface-container-high text-on-tertiary-fixed-variant text-label-md font-label-md rounded border border-outline">InformResponse</span>
<span class="block text-[10px] font-mono-sm text-on-surface-variant mt-1">10:05:22.612</span>
</div>
</div>
<div class="h-8 invisible">spacer</div>
</div>
<!-- Selected Row: GetParameterValues -->
<div class="relative group cursor-pointer" onclick="selectMessage('get-params')">
<!-- Selection Highlight -->
<div class="absolute -left-12 -right-12 h-16 bg-surface-container border-y border-outline-variant -mt-4 opacity-50 z-0"></div>
<div class="absolute left-[25%] right-[25%] flex items-center z-10">
<div class="flex-1 h-[2px] bg-primary relative">
<div class="absolute left-0 -top-[6px] border-y-[7px] border-y-transparent border-r-[12px] border-r-primary"></div>
</div>
<div class="absolute left-1/2 -translate-x-1/2 -top-6 text-center">
<span class="px-2 py-0.5 bg-primary text-on-primary text-label-md font-label-md rounded shadow-sm">GetParameterValues</span>
<span class="block text-[10px] font-mono-sm font-bold text-primary mt-1">10:05:23.002</span>
</div>
</div>
<div class="h-8 invisible">spacer</div>
</div>
<!-- Row: GetParameterValuesResponse -->
<div class="relative group cursor-pointer" onclick="selectMessage('get-params-response')">
<div class="absolute left-[25%] right-[25%] flex items-center">
<div class="flex-1 h-px bg-secondary relative">
<div class="absolute right-0 -top-[5px] border-y-[6px] border-y-transparent border-l-[10px] border-l-secondary"></div>
</div>
<div class="absolute left-1/2 -translate-x-1/2 -top-6 text-center">
<span class="px-2 py-0.5 bg-secondary-container text-on-secondary-container text-label-md font-label-md rounded border border-secondary/20">GetParameterValuesResponse</span>
<span class="block text-[10px] font-mono-sm text-on-surface-variant mt-1">10:05:23.189</span>
</div>
</div>
<div class="h-8 invisible">spacer</div>
</div>
<!-- Row: SetParameterValues -->
<div class="relative group cursor-pointer">
<div class="absolute left-[25%] right-[25%] flex items-center">
<div class="flex-1 h-px bg-tertiary-container relative">
<div class="absolute left-0 -top-[5px] border-y-[6px] border-y-transparent border-r-[10px] border-r-tertiary-container"></div>
</div>
<div class="absolute left-1/2 -translate-x-1/2 -top-6 text-center">
<span class="px-2 py-0.5 bg-surface-container-high text-on-tertiary-fixed-variant text-label-md font-label-md rounded border border-outline">SetParameterValues</span>
<span class="block text-[10px] font-mono-sm text-on-surface-variant mt-1">10:05:23.441</span>
</div>
</div>
<div class="h-8 invisible">spacer</div>
</div>
</div>
</div>
<!-- Inspector Panel (Right) -->
<div class="w-[450px] bg-white border-l border-outline-variant flex flex-col shadow-xl z-20">
<div class="p-4 border-b border-outline-variant bg-surface flex justify-between items-center">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-on-surface-variant" data-icon="description">description</span>
<span class="font-headline-sm text-[16px] font-bold text-on-surface">Message Detail</span>
</div>
<div class="flex gap-2">
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors" data-icon="content_copy">content_copy</button>
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors" data-icon="close">close</button>
</div>
</div>
<div class="flex-1 overflow-auto bg-surface-container-low p-4">
<div class="flex items-center gap-2 mb-4">
<span class="text-label-md font-label-md bg-primary-container text-on-primary-container px-2 py-1 rounded">CWMP:GetParameterValues</span>
<span class="text-mono-sm text-on-surface-variant">ID: 1024_A</span>
</div>
<!-- Code Block Display -->
<div class="rounded-lg border border-outline-variant bg-white p-4 font-mono-md text-mono-md leading-relaxed shadow-inner overflow-hidden">
<pre class="whitespace-pre-wrap"><span class="text-secondary">&lt;soap:Envelope</span> <span class="text-tertiary-fixed-variant">xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"</span><span class="text-secondary">&gt;</span>
<span class="text-secondary">&lt;soap:Header&gt;</span>
<span class="text-secondary">&lt;cwmp:ID</span> <span class="text-tertiary-fixed-variant">soap:mustUnderstand="1"</span><span class="text-secondary">&gt;</span>1024_A<span class="text-secondary">&lt;/cwmp:ID&gt;</span>
<span class="text-secondary">&lt;/soap:Header&gt;</span>
<span class="text-secondary">&lt;soap:Body&gt;</span>
<span class="text-secondary">&lt;cwmp:GetParameterValues&gt;</span>
<span class="text-secondary">&lt;ParameterNames</span> <span class="text-tertiary-fixed-variant">soap:arrayType="xsd:string[3]"</span><span class="text-secondary">&gt;</span>
<span class="text-secondary">&lt;string&gt;</span>InternetGatewayDevice.DeviceInfo.HardwareVersion<span class="text-secondary">&lt;/string&gt;</span>
<span class="text-secondary">&lt;string&gt;</span>InternetGatewayDevice.DeviceInfo.SoftwareVersion<span class="text-secondary">&lt;/string&gt;</span>
<span class="text-secondary">&lt;string&gt;</span>InternetGatewayDevice.ManagementServer.ConnectionRequestURL<span class="text-secondary">&lt;/string&gt;</span>
<span class="text-secondary">&lt;/ParameterNames&gt;</span>
<span class="text-secondary">&lt;/cwmp:GetParameterValues&gt;</span>
<span class="text-secondary">&lt;/soap:Body&gt;</span>
<span class="text-secondary">&lt;/soap:Envelope&gt;</span></pre>
</div>
<div class="mt-6 space-y-4">
<h4 class="text-label-md font-label-md text-on-surface-variant uppercase tracking-wider">Analysis Summary</h4>
<div class="p-3 bg-secondary-container/20 border-l-4 border-secondary rounded-r">
<p class="text-body-sm text-on-surface">ACS is requesting device hardware and software versioning information to determine compatible firmware upgrade paths.</p>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-white p-3 border border-outline-variant rounded">
<span class="text-label-md font-label-md text-on-surface-variant block mb-1">MTU Size</span>
<span class="text-body-md font-medium">1500 Bytes</span>
</div>
<div class="bg-white p-3 border border-outline-variant rounded">
<span class="text-label-md font-label-md text-on-surface-variant block mb-1">Latency</span>
<span class="text-body-md font-medium text-secondary">42ms</span>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Micro-interaction script -->
<script>
function selectMessage(id) {
// Placeholder logic for visual feedback in a prototype
console.log('Selected message context:', id);
}
// Add subtle hover tracking for interactive feel
document.querySelectorAll('.group').forEach(item => {
item.addEventListener('mouseenter', () => {
item.style.transform = 'translateX(2px)';
item.style.transition = 'transform 0.1s ease-out';
});
item.addEventListener('mouseleave', () => {
item.style.transform = 'translateX(0)';
});
});
</script>
</body></html>