Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>T-Mobile 5G Core · NOC Command Center</title> | |
| <style> | |
| :root { | |
| --magenta: #E20074; | |
| --magenta-dark: #a8004f; | |
| --magenta-glow: rgba(226,0,116,0.4); | |
| --bg: #060810; | |
| --panel: #0b0f1e; | |
| --panel-border: #1a2040; | |
| --text: #e0e8ff; | |
| --text-dim: #6a7a9a; | |
| --green: #00ff88; | |
| --green-glow: rgba(0,255,136,0.3); | |
| --yellow: #ffd700; | |
| --orange: #ff8c00; | |
| --red: #ff2244; | |
| --red-glow: rgba(255,34,68,0.4); | |
| --cyan: #00d4ff; | |
| --gold: #fbbf24; | |
| --font: 'Courier New', monospace; | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--font); | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| /* HEADER */ | |
| header { | |
| background: linear-gradient(90deg, #0d0018 0%, #1a0030 50%, #0d0018 100%); | |
| border-bottom: 2px solid var(--magenta); | |
| padding: 6px 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| flex-shrink: 0; | |
| box-shadow: 0 0 24px var(--magenta-glow); | |
| } | |
| .logo { display: flex; align-items: center; gap: 10px; } | |
| .logo-tm { font-size: 24px; font-weight: 900; color: var(--magenta); text-shadow: 0 0 16px var(--magenta-glow); letter-spacing: -1px; } | |
| .logo-sub { font-size: 10px; color: var(--text-dim); line-height: 1.4; } | |
| .logo-sub span { color: var(--cyan); } | |
| .header-stats { display: flex; gap: 20px; } | |
| .hstat { text-align: center; } | |
| .hstat-val { font-size: 16px; font-weight: bold; color: var(--cyan); text-shadow: 0 0 8px rgba(0,212,255,0.5); } | |
| .hstat-lbl { font-size: 8px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; } | |
| .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green-glow); animation: pdot 1.5s ease-in-out infinite; } | |
| @keyframes pdot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} } | |
| .system-time { font-size: 10px; color: var(--text-dim); } | |
| /* MAIN GRID */ | |
| main { display: grid; grid-template-columns: 1fr 300px 320px; flex: 1; overflow: hidden; } | |
| .panel { border-right: 1px solid var(--panel-border); display: flex; flex-direction: column; overflow: hidden; } | |
| .panel:last-child { border-right: none; } | |
| .panel-header { | |
| background: linear-gradient(90deg, rgba(226,0,116,0.08), transparent); | |
| border-bottom: 1px solid var(--panel-border); | |
| padding: 6px 12px; font-size: 9px; text-transform: uppercase; | |
| letter-spacing: 2px; color: var(--magenta); flex-shrink: 0; | |
| display: flex; align-items: center; gap: 6px; | |
| } | |
| .panel-header::before { content:''; width:5px; height:5px; background:var(--magenta); border-radius:1px; box-shadow:0 0 6px var(--magenta-glow); } | |
| /* TOPOLOGY */ | |
| #topology-panel { background: var(--panel); } | |
| #topology-svg { flex: 1; width: 100%; } | |
| /* ORCHESTRATOR CARD */ | |
| #orchestrator-card { | |
| margin: 6px 8px 4px; | |
| background: linear-gradient(135deg, rgba(251,191,36,0.06), rgba(226,0,116,0.06)); | |
| border: 1px solid var(--gold); | |
| border-radius: 8px; | |
| padding: 8px 10px; | |
| flex-shrink: 0; | |
| box-shadow: 0 0 16px rgba(251,191,36,0.1); | |
| } | |
| .orch-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } | |
| .orch-icon { | |
| width: 28px; height: 28px; border-radius: 6px; | |
| background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(226,0,116,0.2)); | |
| border: 1.5px solid var(--gold); | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 14px; flex-shrink: 0; | |
| } | |
| .orch-name { font-size: 11px; font-weight: bold; color: var(--gold); } | |
| .orch-role { font-size: 8px; color: var(--text-dim); } | |
| .orch-badge { | |
| margin-left: auto; font-size: 8px; padding: 2px 6px; border-radius: 10px; | |
| font-weight: bold; text-transform: uppercase; letter-spacing: 1px; | |
| background: rgba(251,191,36,0.15); color: var(--gold); border: 1px solid var(--gold); | |
| } | |
| #orch-decision { | |
| font-size: 9px; color: var(--text-dim); line-height: 1.4; | |
| min-height: 12px; font-style: italic; | |
| } | |
| #orch-decision span { color: var(--gold); font-style: normal; } | |
| /* AGENT LIST */ | |
| #agent-panel { background: var(--panel); overflow: hidden; } | |
| #agent-list { flex: 1; overflow-y: auto; padding: 3px 8px; display: flex; flex-direction: column; gap: 3px; } | |
| #agent-list::-webkit-scrollbar { width: 3px; } | |
| #agent-list::-webkit-scrollbar-thumb { background: var(--magenta-dark); border-radius: 2px; } | |
| .agent-card { | |
| background: rgba(255,255,255,0.025); | |
| border: 1px solid var(--panel-border); | |
| border-radius: 5px; padding: 5px 9px; | |
| transition: border-color 0.3s, box-shadow 0.3s; | |
| flex-shrink: 0; | |
| } | |
| .agent-card.working { border-color: var(--magenta); box-shadow: 0 0 10px rgba(226,0,116,0.12); } | |
| .agent-card.resolving{ border-color: var(--yellow); box-shadow: 0 0 10px rgba(255,215,0,0.12); } | |
| .agent-card.done { border-color: var(--green); box-shadow: 0 0 10px var(--green-glow); } | |
| .agent-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } | |
| .agent-avatar { | |
| width: 24px; height: 24px; border-radius: 50%; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 8px; font-weight: bold; flex-shrink: 0; border: 1.5px solid; | |
| } | |
| .agent-name { font-size: 11px; font-weight: bold; color: var(--text); } | |
| .agent-spec { font-size: 8px; color: var(--text-dim); } | |
| .agent-badge { | |
| margin-left: auto; font-size: 8px; padding: 1px 6px; border-radius: 8px; | |
| font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; | |
| } | |
| .badge-idle { background: rgba(106,122,154,0.15); color: var(--text-dim); border: 1px solid #2a3050; } | |
| .badge-analyzing { background: rgba(226,0,116,0.15); color: var(--magenta); border: 1px solid var(--magenta); animation: bb 1s infinite; } | |
| .badge-resolving { background: rgba(255,215,0,0.15); color: var(--yellow); border: 1px solid var(--yellow); animation: bb 0.7s infinite; } | |
| .badge-done { background: rgba(0,255,136,0.15); color: var(--green); border: 1px solid var(--green); } | |
| @keyframes bb { 0%,100%{opacity:1} 50%{opacity:0.4} } | |
| .agent-task { font-size: 9px; color: var(--text-dim); margin-bottom: 4px; min-height: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .progress-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; } | |
| .progress-fill { height: 100%; border-radius: 2px; width: 0%; transition: width 0.3s linear; } | |
| .fill-a { background: linear-gradient(90deg, var(--magenta), #ff66b3); } | |
| .fill-r { background: linear-gradient(90deg, var(--yellow), #ffaa00); } | |
| .fill-d { background: linear-gradient(90deg, var(--green), #00cc66); } | |
| /* ERROR QUEUE */ | |
| #error-queue-section { border-top: 1px solid var(--panel-border); display: flex; flex-direction: column; height: 140px; flex-shrink: 0; } | |
| #eq-header { padding: 4px 12px; font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--panel-border); flex-shrink: 0; } | |
| #queue-count { font-size: 13px; font-weight: bold; color: var(--red); text-shadow: 0 0 8px var(--red-glow); } | |
| #error-queue { flex: 1; overflow-y: auto; padding: 3px 8px; } | |
| #error-queue::-webkit-scrollbar { width: 3px; } | |
| #error-queue::-webkit-scrollbar-thumb { background: #2a1030; border-radius: 2px; } | |
| .queue-item { display: flex; align-items: center; gap: 6px; padding: 4px 5px; border-radius: 3px; margin-bottom: 2px; font-size: 9px; animation: slideIn 0.3s ease; border-left: 2px solid; } | |
| @keyframes slideIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} } | |
| .queue-item.CRITICAL { border-color: var(--red); background: rgba(255,34,68,0.05); } | |
| .queue-item.HIGH { border-color: var(--orange); background: rgba(255,140,0,0.05); } | |
| .queue-item.MEDIUM { border-color: var(--yellow); background: rgba(255,215,0,0.05); } | |
| .queue-item.LOW { border-color: var(--text-dim); background: rgba(255,255,255,0.02); } | |
| .sev-badge { font-size: 7px; font-weight: bold; padding: 1px 4px; border-radius: 2px; flex-shrink: 0; } | |
| .sev-CRITICAL { background: rgba(255,34,68,0.25); color: var(--red); } | |
| .sev-HIGH { background: rgba(255,140,0,0.25); color: var(--orange); } | |
| .sev-MEDIUM { background: rgba(255,215,0,0.25); color: var(--yellow); } | |
| .sev-LOW { background: rgba(106,122,154,0.2); color: var(--text-dim); } | |
| .queue-nf { color: var(--cyan); font-weight: bold; } | |
| /* METRICS PANEL */ | |
| #metrics-panel { background: var(--panel); overflow: hidden; } | |
| #kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--panel-border); border-bottom: 1px solid var(--panel-border); flex-shrink: 0; } | |
| .kpi-card { background: var(--panel); padding: 8px 12px; position: relative; overflow: hidden; } | |
| .kpi-card::after { content:''; position:absolute; bottom:0;left:0;right:0;height:1px; background: linear-gradient(90deg,transparent,var(--magenta),transparent); opacity:0.25; } | |
| .kpi-val { font-size: 19px; font-weight: bold; color: var(--cyan); text-shadow: 0 0 8px rgba(0,212,255,0.4); line-height: 1; } | |
| .kpi-val.danger { color: var(--red); text-shadow: 0 0 8px var(--red-glow); } | |
| .kpi-val.warn { color: var(--yellow); text-shadow: 0 0 8px rgba(255,215,0,0.4); } | |
| .kpi-lbl { font-size: 8px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; } | |
| .kpi-trend { position:absolute; top:8px; right:10px; font-size:12px; } | |
| canvas.sparkline { display:block; margin-top:3px; opacity:0.7; } | |
| #event-log-section { flex: 1; display: flex; flex-direction: column; overflow: hidden; } | |
| #el-header { padding: 5px 12px; font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--panel-border); flex-shrink: 0; } | |
| #event-log { flex: 1; overflow-y: auto; padding: 4px 8px; font-size: 9px; line-height: 1.6; } | |
| #event-log::-webkit-scrollbar { width: 3px; } | |
| #event-log::-webkit-scrollbar-thumb { background: #1a2040; border-radius: 2px; } | |
| .log-entry { display: flex; gap: 6px; padding: 1px 0; border-bottom: 1px solid rgba(255,255,255,0.02); animation: fadeIn 0.4s ease; } | |
| @keyframes fadeIn { from{opacity:0} to{opacity:1} } | |
| .log-time { color: var(--text-dim); flex-shrink: 0; } | |
| .log-type-ERROR { color: var(--red); } | |
| .log-type-WARN { color: var(--orange); } | |
| .log-type-RESOLVE { color: var(--green); } | |
| .log-type-INFO { color: var(--cyan); } | |
| .log-type-ORCH { color: var(--gold); } | |
| .log-msg { color: var(--text); flex: 1; } | |
| /* SVG */ | |
| .link-line { stroke-dasharray: 6 4; animation: flow 1.5s linear infinite; } | |
| @keyframes flow { to { stroke-dashoffset: -20; } } | |
| /* Scanlines */ | |
| body::after { | |
| content:''; position:fixed; top:0;left:0;right:0;bottom:0; pointer-events:none; z-index:9999; | |
| background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.06) 2px,rgba(0,0,0,0.06) 4px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="logo"> | |
| <div class="logo-tm">T‑Mobile</div> | |
| <div class="logo-sub"><span>5G CORE NETWORK</span><br>NOC COMMAND CENTER</div> | |
| </div> | |
| <div class="header-stats"> | |
| <div class="hstat"><div class="hstat-val" id="h-ues">0</div><div class="hstat-lbl">Active UEs</div></div> | |
| <div class="hstat"><div class="hstat-val" id="h-throughput">0</div><div class="hstat-lbl">Gbps</div></div> | |
| <div class="hstat"><div class="hstat-val" id="h-latency">0</div><div class="hstat-lbl">Latency ms</div></div> | |
| <div class="hstat"><div class="hstat-val" id="h-resolved">0</div><div class="hstat-lbl">Resolved</div></div> | |
| <div class="hstat"><div class="hstat-val" id="h-errors">0</div><div class="hstat-lbl">Active Errors</div></div> | |
| </div> | |
| <div style="display:flex;flex-direction:column;align-items:flex-end;gap:4px"> | |
| <div style="display:flex;align-items:center;gap:6px;font-size:10px"> | |
| <div class="pulse-dot"></div> | |
| <span style="color:var(--green)">SYSTEM OPERATIONAL</span> | |
| </div> | |
| <div class="system-time" id="system-time">--:--:--</div> | |
| </div> | |
| </header> | |
| <main> | |
| <!-- PANEL 1: TOPOLOGY --> | |
| <div class="panel" id="topology-panel"> | |
| <div class="panel-header">5G Core Network Topology</div> | |
| <svg id="topology-svg" viewBox="0 0 700 560" preserveAspectRatio="xMidYMid meet"> | |
| <defs> | |
| <filter id="glow-g"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter> | |
| <filter id="glow-r"><feGaussianBlur stdDeviation="5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter> | |
| <filter id="glow-o"><feGaussianBlur stdDeviation="4" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter> | |
| <radialGradient id="bg-grad" cx="50%" cy="50%" r="50%"> | |
| <stop offset="0%" stop-color="#0a1428"/><stop offset="100%" stop-color="#060810"/> | |
| </radialGradient> | |
| </defs> | |
| <rect width="700" height="560" fill="url(#bg-grad)"/> | |
| <g stroke="#1a2040" stroke-width="0.5" opacity="0.3"> | |
| <line x1="0" y1="140" x2="700" y2="140"/><line x1="0" y1="280" x2="700" y2="280"/> | |
| <line x1="0" y1="420" x2="700" y2="420"/><line x1="175" y1="0" x2="175" y2="560"/> | |
| <line x1="350" y1="0" x2="350" y2="560"/><line x1="525" y1="0" x2="525" y2="560"/> | |
| </g> | |
| <g id="links-layer"></g> | |
| <g id="nodes-layer"></g> | |
| <g transform="translate(12,514)"> | |
| <circle cx="5" cy="5" r="4" fill="#0d1a30" stroke="#00ff88" stroke-width="1.5"/> | |
| <text x="13" y="9" font-family="Courier New" font-size="8" fill="#6a7a9a">Healthy</text> | |
| <circle cx="65" cy="5" r="4" fill="#2a0010" stroke="#ff2244" stroke-width="1.5"/> | |
| <text x="73" y="9" font-family="Courier New" font-size="8" fill="#6a7a9a">Alert</text> | |
| <line x1="112" y1="5" x2="134" y2="5" stroke="#00d4ff" stroke-width="1.5" stroke-dasharray="4 2"/> | |
| <text x="138" y="9" font-family="Courier New" font-size="8" fill="#6a7a9a">Data Flow</text> | |
| <rect x="200" y="0" width="8" height="10" fill="none" stroke="#e20074" stroke-width="1" rx="1"/> | |
| <text x="212" y="9" font-family="Courier New" font-size="8" fill="#6a7a9a">5G gNB</text> | |
| </g> | |
| </svg> | |
| </div> | |
| <!-- PANEL 2: ORCHESTRATOR + AGENTS + QUEUE --> | |
| <div class="panel" id="agent-panel"> | |
| <div class="panel-header">AI Agent Dispatch</div> | |
| <!-- ORCHESTRATOR --> | |
| <div id="orchestrator-card"> | |
| <div class="orch-top"> | |
| <div class="orch-icon">🧠</div> | |
| <div> | |
| <div class="orch-name">NEXUS ORCHESTRATOR</div> | |
| <div class="orch-role">Priority Routing · Agent Coordination · Escalation</div> | |
| </div> | |
| <div class="orch-badge" id="orch-badge">ACTIVE</div> | |
| </div> | |
| <div id="orch-decision">Monitoring network for anomalies…</div> | |
| </div> | |
| <div id="agent-list"></div> | |
| <div id="error-queue-section"> | |
| <div id="eq-header"> | |
| <span>Priority Queue</span> | |
| <span id="queue-count">0</span> | |
| </div> | |
| <div id="error-queue"></div> | |
| </div> | |
| </div> | |
| <!-- PANEL 3: METRICS + LOG --> | |
| <div class="panel" id="metrics-panel"> | |
| <div class="panel-header">NOC Live Metrics</div> | |
| <div id="kpi-grid"> | |
| <div class="kpi-card"> | |
| <div class="kpi-val" id="kpi-ues">9,847</div> | |
| <div class="kpi-lbl">Active UEs</div> | |
| <div class="kpi-trend">📶</div> | |
| <canvas class="sparkline" id="spark-ues" width="130" height="20"></canvas> | |
| </div> | |
| <div class="kpi-card"> | |
| <div class="kpi-val" id="kpi-throughput">142.3</div> | |
| <div class="kpi-lbl">Throughput Gbps</div> | |
| <div class="kpi-trend">⬆</div> | |
| <canvas class="sparkline" id="spark-tp" width="130" height="20"></canvas> | |
| </div> | |
| <div class="kpi-card"> | |
| <div class="kpi-val" id="kpi-latency">8.2</div> | |
| <div class="kpi-lbl">Avg Latency ms</div> | |
| <div class="kpi-trend">⬇</div> | |
| <canvas class="sparkline" id="spark-lat" width="130" height="20"></canvas> | |
| </div> | |
| <div class="kpi-card"> | |
| <div class="kpi-val" id="kpi-loss">0.03</div> | |
| <div class="kpi-lbl">Packet Loss %</div> | |
| <div class="kpi-trend">📉</div> | |
| <canvas class="sparkline" id="spark-loss" width="130" height="20"></canvas> | |
| </div> | |
| <div class="kpi-card"> | |
| <div class="kpi-val" id="kpi-qd">0</div> | |
| <div class="kpi-lbl">Queue Depth</div> | |
| <div class="kpi-trend">⏳</div> | |
| <canvas class="sparkline" id="spark-qd" width="130" height="20"></canvas> | |
| </div> | |
| <div class="kpi-card"> | |
| <div class="kpi-val" id="kpi-mttr">—</div> | |
| <div class="kpi-lbl">MTTR sec</div> | |
| <div class="kpi-trend">🔧</div> | |
| <canvas class="sparkline" id="spark-mttr" width="130" height="20"></canvas> | |
| </div> | |
| </div> | |
| <div id="event-log-section"> | |
| <div id="el-header">Event Log</div> | |
| <div id="event-log"></div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // ═══════════════════════════════════════════════════ | |
| // T-MOBILE 5G NOC SIMULATOR — with NEXUS Orchestrator | |
| // ═══════════════════════════════════════════════════ | |
| // ── NETWORK FUNCTIONS ─────────────────────────────── | |
| const NF_NODES = [ | |
| { id:'NRF', label:'NRF', sub:'Network Repository', x:350, y:80, color:'#7b68ee' }, | |
| { id:'AMF', label:'AMF', sub:'Access & Mobility', x:200, y:185, color:'#00d4ff' }, | |
| { id:'SMF', label:'SMF', sub:'Session Management', x:500, y:185, color:'#00aaff' }, | |
| { id:'AUSF', label:'AUSF', sub:'Auth Server', x:130, y:310, color:'#ff9500' }, | |
| { id:'UDM', label:'UDM', sub:'Unified Data Mgmt', x:270, y:310, color:'#ff7bac' }, | |
| { id:'PCF', label:'PCF', sub:'Policy Control', x:430, y:310, color:'#a78bfa' }, | |
| { id:'UPF', label:'UPF', sub:'User Plane', x:570, y:310, color:'#34d399' }, | |
| { id:'gNB1', label:'gNB', sub:'Tower North', x:120, y:450, color:'#e20074', isGNB:true }, | |
| { id:'gNB2', label:'gNB', sub:'Tower Central', x:350, y:470, color:'#e20074', isGNB:true }, | |
| { id:'gNB3', label:'gNB', sub:'Tower South', x:580, y:450, color:'#e20074', isGNB:true }, | |
| ]; | |
| const LINKS = [ | |
| ['NRF','AMF'],['NRF','SMF'],['NRF','PCF'],['NRF','UDM'], | |
| ['AMF','AUSF'],['AMF','UDM'],['AMF','SMF'], | |
| ['SMF','UPF'],['SMF','PCF'],['UPF','PCF'], | |
| ['AMF','gNB1'],['AMF','gNB2'], | |
| ['SMF','gNB3'],['UPF','gNB2'],['UPF','gNB3'],['AUSF','gNB1'], | |
| ]; | |
| // ── ERROR TYPES ───────────────────────────────────── | |
| // domain = which agent specialization handles this best | |
| const ERROR_TYPES = [ | |
| { type:'Handover Failure', nf:'AMF', severity:'CRITICAL', resolveTime:[8,13], domain:'mobility', | |
| fixes:['Rerouting UE via AMF backup path','Resyncing N2 interface handover context','Triggering conditional handover'] }, | |
| { type:'Auth Timeout', nf:'AUSF', severity:'HIGH', resolveTime:[5,10], domain:'auth', | |
| fixes:['Refreshing 5G-AKA auth vector','Re-issuing SUCI decryption request','Resetting AUSF session timer'] }, | |
| { type:'Session Drop', nf:'SMF', severity:'HIGH', resolveTime:[6,11], domain:'session', | |
| fixes:['Re-establishing PDU session','Reallocating UPF tunnel endpoint','Restoring N4 session context'] }, | |
| { type:'Slice Overload', nf:'PCF', severity:'MEDIUM', resolveTime:[4,9], domain:'policy', | |
| fixes:['Rebalancing eMBB slice policy','Throttling non-priority slice traffic','Scaling PCF policy instances'] }, | |
| { type:'UPF Packet Loss', nf:'UPF', severity:'HIGH', resolveTime:[7,12], domain:'dataplane', | |
| fixes:['Flushing UPF buffer overflow','Rerouting GTP-U tunnels to backup UPF','Applying QoS flow marking fix'] }, | |
| { type:'NRF Discovery Fail', nf:'NRF', severity:'MEDIUM', resolveTime:[3,7], domain:'registry', | |
| fixes:['Refreshing NF profile registration','Forcing NRF cache flush','Re-registering SMF/AMF NF profiles'] }, | |
| { type:'Subscriber Profile Miss', nf:'UDM', severity:'LOW', resolveTime:[3,6], domain:'auth', | |
| fixes:['Re-syncing UDR subscriber profile','Pushing MSISDN mapping update','Replicating HLR data to UDM'] }, | |
| { type:'gNB Link Degradation', nf:'gNB1', severity:'CRITICAL', resolveTime:[9,15], domain:'radio', | |
| fixes:['Activating backup X2/Xn interface','Forcing beam handoff on degraded cell','Rerouting via adjacent gNB'] }, | |
| { type:'QoS Breach', nf:'PCF', severity:'MEDIUM', resolveTime:[5,9], domain:'policy', | |
| fixes:['Updating 5QI flow priority rules','Applying guaranteed bitrate enforcement','Resetting QoS profile for UEs'] }, | |
| { type:'Core Link Congestion', nf:'UPF', severity:'CRITICAL', resolveTime:[8,14], domain:'dataplane', | |
| fixes:['Activating traffic shaping on N9','Failover to secondary UPF cluster','Draining congested GTP tunnel pool'] }, | |
| ]; | |
| // ── AGENT DEFINITIONS ─────────────────────────────── | |
| // Each agent has a primary specialization domain | |
| const AGENT_DEFS = [ | |
| { id:'ARIA-1', color:'#e20074', bg:'rgba(226,0,116,0.12)', border:'#e20074', spec:'mobility', specLabel:'Mobility/AMF' }, | |
| { id:'NOVA-2', color:'#00d4ff', bg:'rgba(0,212,255,0.12)', border:'#00d4ff', spec:'dataplane', specLabel:'Data Plane/UPF' }, | |
| { id:'ZION-3', color:'#a78bfa', bg:'rgba(167,139,250,0.12)',border:'#a78bfa', spec:'auth', specLabel:'Auth/AUSF/UDM' }, | |
| { id:'ECHO-4', color:'#34d399', bg:'rgba(52,211,153,0.12)', border:'#34d399', spec:'session', specLabel:'Session/SMF' }, | |
| { id:'FLUX-5', color:'#ff9500', bg:'rgba(255,149,0,0.12)', border:'#ff9500', spec:'policy', specLabel:'Policy/PCF' }, | |
| { id:'APEX-6', color:'#ff7bac', bg:'rgba(255,123,172,0.12)',border:'#ff7bac', spec:'radio', specLabel:'Radio/gNB' }, | |
| ]; | |
| // ── SEVERITY SCORING ──────────────────────────────── | |
| const SEV_SCORE = { CRITICAL:100, HIGH:60, MEDIUM:30, LOW:10 }; | |
| // ── STATE ─────────────────────────────────────────── | |
| let agents = AGENT_DEFS.map(d => ({ | |
| ...d, status:'idle', task:null, progress:0, | |
| startTime:null, taskStartTime:null, | |
| analyzeTime:0, resolveTime:0, resolveTimeActual:0 | |
| })); | |
| let errorQueue = []; // unassigned, priority-sorted | |
| let errorIdCounter = 1000; | |
| let resolvedCount = 0; | |
| let totalResolveTime = 0; | |
| let nodeStates = {}; | |
| NF_NODES.forEach(n => nodeStates[n.id] = 'healthy'); | |
| const SPARK_LEN = 30; | |
| let sparkData = { ues:[], throughput:[], latency:[], loss:[], qd:[], mttr:[] }; | |
| for (let k in sparkData) sparkData[k] = Array(SPARK_LEN).fill(0); | |
| // ── TOPOLOGY BUILD ────────────────────────────────── | |
| function hexPts(r) { | |
| return Array.from({length:6},(_,i)=>{ | |
| const a = Math.PI/3*i - Math.PI/6; | |
| return `${r*Math.cos(a)},${r*Math.sin(a)}`; | |
| }).join(' '); | |
| } | |
| function buildTopology() { | |
| const LL = document.getElementById('links-layer'); | |
| const NL = document.getElementById('nodes-layer'); | |
| LINKS.forEach(([a,b]) => { | |
| const na = NF_NODES.find(n=>n.id===a), nb = NF_NODES.find(n=>n.id===b); | |
| if(!na||!nb) return; | |
| const l = svgEl('line',{x1:na.x,y1:na.y,x2:nb.x,y2:nb.y, | |
| stroke:'#1a3060','stroke-width':'1.5',class:'link-line','stroke-dasharray':'6 4',id:`link-${a}-${b}`}); | |
| LL.appendChild(l); | |
| }); | |
| NF_NODES.forEach(node => { | |
| const g = svgEl('g',{transform:`translate(${node.x},${node.y})`,id:`node-${node.id}`,class:'nf-hex'}); | |
| if(node.isGNB) { | |
| const tg = svgEl('g',{}); | |
| [1,2,3].forEach(i=>{ | |
| const r2=i*12, arc=svgEl('path',{ | |
| d:`M${-r2} -10 A${r2} ${r2} 0 0 1 ${r2} -10`, | |
| stroke:node.color,'stroke-width':'1.2',fill:'none', | |
| opacity:String(0.8-i*0.2),'stroke-dasharray':'3 2' | |
| }); | |
| const an=svgAnim('opacity',`${0.8-i*0.2};0.15;${0.8-i*0.2}`,`${1.4+i*0.3}s`); | |
| arc.appendChild(an); tg.appendChild(arc); | |
| }); | |
| tg.appendChild(svgEl('rect',{x:'-6',y:'-10',width:'12',height:'30',rx:'2', | |
| fill:'rgba(226,0,116,0.07)',stroke:node.color,'stroke-width':'1.5'})); | |
| g.appendChild(tg); | |
| } else { | |
| const hex=svgEl('polygon',{points:hexPts(33),fill:'#0d1a30',stroke:node.color,'stroke-width':'2',filter:'url(#glow-g)'}); | |
| g.appendChild(hex); | |
| // pulse ring | |
| const p=svgEl('circle',{cx:'0',cy:'0',r:'37',fill:'none',stroke:node.color,'stroke-width':'0.8',opacity:'0'}); | |
| p.appendChild(svgAnim('opacity','0.5;0','2s')); | |
| p.appendChild(svgAnim('r','36;52','2s')); | |
| g.appendChild(p); | |
| } | |
| const t=svgEl('text',{'text-anchor':'middle',y:node.isGNB?'14':'4','font-family':'Courier New', | |
| 'font-size':node.isGNB?'9':'10','font-weight':'bold',fill:node.color}); | |
| t.textContent=node.label; g.appendChild(t); | |
| const s=svgEl('text',{'text-anchor':'middle',y:node.isGNB?'26':'17','font-family':'Courier New','font-size':'8',fill:'#6a7a9a'}); | |
| s.textContent=node.sub; g.appendChild(s); | |
| NL.appendChild(g); | |
| }); | |
| } | |
| function svgEl(tag, attrs) { | |
| const el = document.createElementNS('http://www.w3.org/2000/svg', tag); | |
| for(const [k,v] of Object.entries(attrs)) el.setAttribute(k,v); | |
| return el; | |
| } | |
| function svgAnim(attr, values, dur='2s') { | |
| const a = document.createElementNS('http://www.w3.org/2000/svg','animate'); | |
| a.setAttribute('attributeName',attr); a.setAttribute('values',values); | |
| a.setAttribute('dur',dur); a.setAttribute('repeatCount','indefinite'); | |
| return a; | |
| } | |
| function setNodeState(nfId, state) { | |
| const rid = (nfId==='gNB')?`gNB${Math.ceil(Math.random()*3)}`:nfId; | |
| const g = document.getElementById(`node-${rid}`); | |
| if(!g) return rid; | |
| const poly = g.querySelector('polygon'); | |
| const node = NF_NODES.find(n=>n.id===rid); | |
| if(state==='alert') { | |
| if(poly){poly.setAttribute('fill','#2a0010');poly.setAttribute('stroke','#ff2244');poly.setAttribute('filter','url(#glow-r)');} | |
| const t=g.querySelector('text'); if(t) t.setAttribute('fill','#ff2244'); | |
| LINKS.forEach(([a,b])=>{ | |
| if(a===rid||b===rid){ const l=document.getElementById(`link-${a}-${b}`); if(l) l.setAttribute('stroke','#ff2244'); } | |
| }); | |
| } else if(node) { | |
| if(poly){poly.setAttribute('fill','#0d1a30');poly.setAttribute('stroke',node.color);poly.setAttribute('filter','url(#glow-g)');} | |
| const t=g.querySelector('text'); if(t) t.setAttribute('fill',node.color); | |
| LINKS.forEach(([a,b])=>{ | |
| if(a===rid||b===rid){ const l=document.getElementById(`link-${a}-${b}`); if(l) l.setAttribute('stroke','#1a3060'); } | |
| }); | |
| } | |
| return rid; | |
| } | |
| // ── BUILD AGENT CARDS ──────────────────────────────── | |
| function buildAgentCards() { | |
| const list = document.getElementById('agent-list'); | |
| list.innerHTML = ''; | |
| agents.forEach((ag, i) => { | |
| const c = document.createElement('div'); | |
| c.className = 'agent-card'; c.id = `ac-${i}`; | |
| c.innerHTML = ` | |
| <div class="agent-top"> | |
| <div class="agent-avatar" style="background:${ag.bg};border-color:${ag.border};color:${ag.color}">${ag.id.slice(0,2)}</div> | |
| <div><div class="agent-name">${ag.id}</div><div class="agent-spec">${ag.specLabel}</div></div> | |
| <div class="agent-badge badge-idle" id="ab-${i}">IDLE</div> | |
| </div> | |
| <div class="agent-task" id="at-${i}">Monitoring network…</div> | |
| <div class="progress-bar"><div class="progress-fill fill-a" id="ap-${i}" style="width:0%"></div></div>`; | |
| list.appendChild(c); | |
| }); | |
| } | |
| function updateAgentCard(i) { | |
| const ag=agents[i]; | |
| const c=document.getElementById(`ac-${i}`); | |
| const b=document.getElementById(`ab-${i}`); | |
| const t=document.getElementById(`at-${i}`); | |
| const p=document.getElementById(`ap-${i}`); | |
| c.className='agent-card'; | |
| if(ag.status==='idle'){ | |
| b.className='agent-badge badge-idle'; b.textContent='IDLE'; | |
| t.textContent='Monitoring network…'; p.style.width='0%'; p.className='progress-fill fill-a'; | |
| } else if(ag.status==='analyzing'){ | |
| c.classList.add('working'); b.className='agent-badge badge-analyzing'; b.textContent='ANALYZING'; | |
| t.textContent=`▶ ${ag.task.type} on ${ag.task.nf}`; | |
| p.className='progress-fill fill-a'; p.style.width=`${ag.progress}%`; | |
| } else if(ag.status==='resolving'){ | |
| c.classList.add('resolving'); b.className='agent-badge badge-resolving'; b.textContent='RESOLVING'; | |
| t.textContent=`⚙ ${ag.task.fix}`; | |
| p.className='progress-fill fill-r'; p.style.width=`${ag.progress}%`; | |
| } else if(ag.status==='done'){ | |
| c.classList.add('done'); b.className='agent-badge badge-done'; b.textContent='RESOLVED'; | |
| t.textContent=`✓ Fixed in ${ag.resolveTimeActual.toFixed(1)}s`; | |
| p.className='progress-fill fill-d'; p.style.width='100%'; | |
| } | |
| } | |
| // ── ORCHESTRATOR ───────────────────────────────────── | |
| // Priority: CRITICAL first, then by arrival order; also prefer specialist agents | |
| const ORCH_THOUGHTS = [ | |
| (e,a)=>`Routing <span>${e.severity}</span> "${e.type}" → ${a.id} (${a.specLabel} specialist)`, | |
| (e,a)=>`<span>NEXUS</span>: ${a.id} is best match for ${e.nf} domain — dispatching`, | |
| (e,a)=>`Priority score <span>${SEV_SCORE[e.severity]}</span> — assigning ${e.type} to ${a.id}`, | |
| (e,a)=>`<span>Specialist match</span>: ${a.id} handles ${e.domain} — deploying now`, | |
| ]; | |
| function orchSetDecision(text) { | |
| document.getElementById('orch-decision').innerHTML = text; | |
| } | |
| function orchestratorTick() { | |
| // Sort queue: CRITICAL > HIGH > MEDIUM > LOW, then by id (arrival order) | |
| errorQueue.sort((a,b)=> { | |
| const ds = SEV_SCORE[b.severity] - SEV_SCORE[a.severity]; | |
| return ds !== 0 ? ds : a.id - b.id; | |
| }); | |
| // Re-render queue in priority order | |
| rerenderQueue(); | |
| // For each unassigned error (highest priority first), find best idle agent | |
| for(const err of errorQueue) { | |
| if(err.assignedTo) continue; | |
| // Find best idle agent: prefer specialist, fallback to any idle | |
| let best = agents.find(a=> a.status==='idle' && a.spec===err.domain); | |
| if(!best) best = agents.find(a=> a.status==='idle'); | |
| if(!best) continue; // all agents busy | |
| // Dispatch | |
| const now = Date.now(); | |
| err.assignedTo = best.id; | |
| best.status = 'analyzing'; | |
| best.task = err; | |
| best.startTime = now; | |
| best.taskStartTime = now; | |
| const range = err.resolveTimeRange; | |
| const total = range[0] + Math.random()*(range[1]-range[0]); | |
| best.analyzeTime = total * 0.4; | |
| best.resolveTime = total * 0.6; | |
| best.progress = 0; | |
| // Orchestrator message | |
| const thought = ORCH_THOUGHTS[Math.floor(Math.random()*ORCH_THOUGHTS.length)](err, best); | |
| orchSetDecision(thought); | |
| removeQueueItem(err.id); | |
| errorQueue = errorQueue.filter(e=>e.id!==err.id); | |
| updateQueueCount(); | |
| addLog('ORCH', `NEXUS dispatched #${err.id} (${err.severity}) → ${best.id} [${best.specLabel}]`); | |
| addLog('INFO', `[${best.id}] Assigned: ${err.type} on ${err.nf}`); | |
| updateAgentCard(agents.indexOf(best)); | |
| } | |
| } | |
| // ── AGENT TICK ──────────────────────────────────────── | |
| function agentTick() { | |
| const now = Date.now(); | |
| agents.forEach((ag, i) => { | |
| if(ag.status==='analyzing') { | |
| const elapsed=(now-ag.startTime)/1000; | |
| ag.progress = Math.min(49, (elapsed/ag.analyzeTime)*49); | |
| if(elapsed>=ag.analyzeTime) { | |
| ag.status='resolving'; ag.startTime=now; | |
| ag.task.fix = ag.task.fixes[Math.floor(Math.random()*ag.task.fixes.length)]; | |
| addLog('WARN',`[${ag.id}] Applying fix: ${ag.task.fix}`); | |
| } | |
| updateAgentCard(i); | |
| } else if(ag.status==='resolving') { | |
| const elapsed=(now-ag.startTime)/1000; | |
| ag.progress = 50 + Math.min(49,(elapsed/ag.resolveTime)*49); | |
| if(elapsed>=ag.resolveTime) { | |
| const tt=(now-ag.taskStartTime)/1000; | |
| ag.resolveTimeActual=tt; ag.status='done'; ag.progress=100; | |
| setNodeState(ag.task.resolvedNfId||ag.task.nf,'healthy'); | |
| resolvedCount++; totalResolveTime+=tt; | |
| sparkData.mttr.push(totalResolveTime/resolvedCount); sparkData.mttr.shift(); | |
| addLog('RESOLVE',`[${ag.id}] RESOLVED #${ag.task.id} — ${ag.task.type} (${tt.toFixed(1)}s)`); | |
| document.getElementById('h-resolved').textContent = resolvedCount; | |
| updateAgentCard(i); | |
| orchSetDecision(`<span>✓ RESOLVED</span> — ${ag.id} closed #${ag.task.id} in ${tt.toFixed(1)}s · Standing by for next dispatch`); | |
| setTimeout(()=>{ ag.status='idle'; ag.task=null; ag.progress=0; updateAgentCard(i); },2000); | |
| } else { updateAgentCard(i); } | |
| } | |
| }); | |
| } | |
| // ── ERROR GENERATOR ──────────────────────────────────── | |
| function generateError() { | |
| const tmpl = ERROR_TYPES[Math.floor(Math.random()*ERROR_TYPES.length)]; | |
| const err = { | |
| id: errorIdCounter++, | |
| type: tmpl.type, nf: tmpl.nf, severity: tmpl.severity, | |
| resolveTimeRange: tmpl.resolveTime, fixes: tmpl.fixes, | |
| domain: tmpl.domain, timestamp: new Date(), assignedTo: null, | |
| }; | |
| errorQueue.push(err); | |
| const rid = setNodeState(err.nf,'alert'); | |
| err.resolvedNfId = rid; | |
| renderQueueItem(err); | |
| updateQueueCount(); | |
| addLog('ERROR',`[${err.id}] ${err.severity} — ${err.type} on ${err.nf}`); | |
| } | |
| let queueDirty = false; | |
| function renderQueueItem(err) { | |
| const q = document.getElementById('error-queue'); | |
| const item = document.createElement('div'); | |
| item.className=`queue-item ${err.severity}`; item.id=`qi-${err.id}`; | |
| item.dataset.sevScore = SEV_SCORE[err.severity]; | |
| item.innerHTML=` | |
| <span class="sev-badge sev-${err.severity}">${err.severity}</span> | |
| <span class="queue-nf">${err.nf}</span> | |
| <span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${err.type}</span> | |
| <span style="color:#6a7a9a;flex-shrink:0">${fmtTime(err.timestamp)}</span>`; | |
| q.insertBefore(item,q.firstChild); | |
| while(q.children.length>20) q.removeChild(q.lastChild); | |
| queueDirty=true; | |
| } | |
| function rerenderQueue() { | |
| if(!queueDirty) return; | |
| // Re-sort DOM items by sev score descending | |
| const q = document.getElementById('error-queue'); | |
| const items = Array.from(q.children); | |
| items.sort((a,b)=> (b.dataset.sevScore||0)-(a.dataset.sevScore||0)); | |
| items.forEach(el=>q.appendChild(el)); | |
| queueDirty=false; | |
| } | |
| function removeQueueItem(id) { | |
| const el=document.getElementById(`qi-${id}`); | |
| if(el){el.style.opacity='0';el.style.transition='opacity 0.25s';setTimeout(()=>el.remove(),250);} | |
| } | |
| function updateQueueCount() { | |
| const c=errorQueue.filter(e=>!e.assignedTo).length; | |
| document.getElementById('queue-count').textContent=c; | |
| document.getElementById('kpi-qd').textContent=c; | |
| const el=document.getElementById('kpi-qd'); | |
| el.className='kpi-val'+(c>4?' danger':c>2?' warn':''); | |
| } | |
| // ── KPI METRICS ──────────────────────────────────────── | |
| let kpiNoise={ues:0,tp:0,lat:0,loss:0}; | |
| function updateKPIs() { | |
| const busy=agents.filter(a=>a.status!=='idle').length; | |
| const qd=errorQueue.filter(e=>!e.assignedTo).length; | |
| kpiNoise.ues+=( Math.random()-0.5)*60; kpiNoise.ues=Math.max(-900,Math.min(900,kpiNoise.ues)); | |
| kpiNoise.tp+=(Math.random()-0.5)*2.5; kpiNoise.tp=Math.max(-25,Math.min(25,kpiNoise.tp)); | |
| kpiNoise.lat+=(Math.random()-0.5)*0.6; kpiNoise.lat=Math.max(-2,Math.min(2,kpiNoise.lat)); | |
| kpiNoise.loss+=(Math.random()-0.5)*0.006; kpiNoise.loss=Math.max(-0.02,Math.min(0.02,kpiNoise.loss)); | |
| const ues=Math.round(9800+kpiNoise.ues); | |
| const tp=Math.max(80,142+kpiNoise.tp-busy*3-qd*1.5); | |
| const lat=Math.max(2,8.2+kpiNoise.lat+busy*2.5+qd*1.3); | |
| const loss=Math.max(0,0.03+kpiNoise.loss+busy*0.04+qd*0.015); | |
| document.getElementById('kpi-ues').textContent=ues.toLocaleString(); | |
| document.getElementById('kpi-throughput').textContent=tp.toFixed(1); | |
| const latE=document.getElementById('kpi-latency'); latE.textContent=lat.toFixed(1); | |
| latE.className='kpi-val'+(lat>20?' danger':lat>12?' warn':''); | |
| const lossE=document.getElementById('kpi-loss'); lossE.textContent=loss.toFixed(3); | |
| lossE.className='kpi-val'+(loss>0.1?' danger':loss>0.05?' warn':''); | |
| document.getElementById('h-ues').textContent=(ues/1000).toFixed(1)+'K'; | |
| document.getElementById('h-throughput').textContent=tp.toFixed(0); | |
| document.getElementById('h-latency').textContent=lat.toFixed(1); | |
| document.getElementById('h-errors').textContent=busy+qd; | |
| if(resolvedCount>0) document.getElementById('kpi-mttr').textContent=(totalResolveTime/resolvedCount).toFixed(1); | |
| sparkData.ues.push(ues); sparkData.ues.shift(); | |
| sparkData.throughput.push(tp); sparkData.throughput.shift(); | |
| sparkData.latency.push(lat); sparkData.latency.shift(); | |
| sparkData.loss.push(loss); sparkData.loss.shift(); | |
| sparkData.qd.push(qd); sparkData.qd.shift(); | |
| drawSpark('spark-ues',sparkData.ues,'#00d4ff'); | |
| drawSpark('spark-tp',sparkData.throughput,'#00ff88'); | |
| drawSpark('spark-lat',sparkData.latency,lat>15?'#ff2244':lat>10?'#ffd700':'#00d4ff'); | |
| drawSpark('spark-loss',sparkData.loss,loss>0.08?'#ff2244':'#00d4ff'); | |
| drawSpark('spark-qd',sparkData.qd,'#ff8c00'); | |
| if(resolvedCount>0) drawSpark('spark-mttr',sparkData.mttr,'#a78bfa'); | |
| } | |
| function drawSpark(id,data,color) { | |
| const c=document.getElementById(id); if(!c) return; | |
| const ctx=c.getContext('2d'),W=c.width,H=c.height; | |
| ctx.clearRect(0,0,W,H); | |
| const v=data.filter(x=>x>0); if(v.length<2) return; | |
| const mn=Math.min(...v)*0.95, mx=Math.max(...v)*1.05, rng=mx-mn||1; | |
| const step=W/(data.length-1); | |
| ctx.beginPath(); ctx.strokeStyle=color; ctx.lineWidth=1.5; ctx.shadowColor=color; ctx.shadowBlur=4; | |
| data.forEach((val,i)=>{ | |
| if(!val) return; | |
| const x=i*step, y=H-((val-mn)/rng)*(H-2)-1; | |
| i===0?ctx.moveTo(x,y):ctx.lineTo(x,y); | |
| }); | |
| ctx.stroke(); | |
| ctx.lineTo(W,H); ctx.lineTo(0,H); ctx.closePath(); | |
| const g=ctx.createLinearGradient(0,0,0,H); | |
| g.addColorStop(0,color+'33'); g.addColorStop(1,color+'00'); | |
| ctx.fillStyle=g; ctx.fill(); | |
| } | |
| // ── EVENT LOG ─────────────────────────────────────────── | |
| function addLog(type,msg) { | |
| const log=document.getElementById('event-log'); | |
| const e=document.createElement('div'); e.className='log-entry'; | |
| e.innerHTML=`<span class="log-time">${fmtTime(new Date())}</span><span class="log-type-${type}">[${type}]</span><span class="log-msg">${msg}</span>`; | |
| log.insertBefore(e,log.firstChild); | |
| while(log.children.length>80) log.removeChild(log.lastChild); | |
| } | |
| function fmtTime(d){return d.toTimeString().substring(0,8);} | |
| function updateClock(){ | |
| document.getElementById('system-time').textContent=new Date().toISOString().replace('T',' ').substring(0,19)+' UTC'; | |
| } | |
| // ── INIT ──────────────────────────────────────────────── | |
| function init() { | |
| buildTopology(); | |
| buildAgentCards(); | |
| for(let i=0;i<SPARK_LEN;i++){ | |
| sparkData.ues[i]=9500+Math.random()*600; | |
| sparkData.throughput[i]=130+Math.random()*20; | |
| sparkData.latency[i]=7+Math.random()*2; | |
| sparkData.loss[i]=0.02+Math.random()*0.02; | |
| } | |
| addLog('INFO','T-Mobile 5G NOC Command Center initialized'); | |
| addLog('ORCH','NEXUS Orchestrator online — priority routing active'); | |
| addLog('INFO','6 specialist agents deployed and ready'); | |
| addLog('INFO','Error detection system active — monitoring all NFs'); | |
| // Error generation | |
| function scheduleError(){ setTimeout(()=>{ generateError(); scheduleError(); },2000+Math.random()*3500); } | |
| scheduleError(); | |
| // Orchestrator runs every 500ms (decides assignments) | |
| setInterval(orchestratorTick, 500); | |
| // Agent progress tick every 200ms | |
| setInterval(agentTick, 200); | |
| // KPI every 800ms | |
| setInterval(updateKPIs, 800); | |
| // Clock every second | |
| setInterval(updateClock, 1000); | |
| updateClock(); | |
| } | |
| window.addEventListener('load', init); | |
| </script> | |
| </body> | |
| </html> | |