| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Provider Telemetry Console</title> |
| <link rel="stylesheet" href="static/css/pro-dashboard.css" /> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> |
| </head> |
| <body data-theme="dark"> |
| <main class="main-area" style="margin-left:auto;margin-right:auto;max-width:1400px;"> |
| <header class="topbar"> |
| <div> |
| <h1>Provider Monitoring</h1> |
| <p class="text-muted">Glass dashboard for ingestion partners</p> |
| </div> |
| <div class="status-group"> |
| <div class="status-pill" data-admin-health data-state="warn"> |
| <span class="status-dot"></span> |
| <span>checking</span> |
| </div> |
| <button class="ghost" data-admin-refresh>Refresh</button> |
| </div> |
| </header> |
| <section class="page active"> |
| <div class="stats-grid" data-admin-providers></div> |
| <div class="grid-two"> |
| <div class="glass-card"> |
| <h3>Latency Distribution</h3> |
| <canvas id="provider-latency-chart" height="220"></canvas> |
| </div> |
| <div class="glass-card"> |
| <h3>Health Split</h3> |
| <canvas id="provider-status-chart" height="220"></canvas> |
| </div> |
| </div> |
| <div class="glass-card"> |
| <div class="section-header"> |
| <h3>Provider Directory</h3> |
| <span class="text-muted">Fetched from /api/providers</span> |
| </div> |
| <div class="table-wrapper"> |
| <table> |
| <thead> |
| <tr> |
| <th>Name</th> |
| <th>Category</th> |
| <th>Latency</th> |
| <th>Status</th> |
| <th>Endpoint</th> |
| </tr> |
| </thead> |
| <tbody data-admin-table></tbody> |
| </table> |
| </div> |
| </div> |
| </section> |
| </main> |
| <script type="module" src="static/js/adminDashboard.js"></script> |
| </body> |
| </html> |
|
|