|
|
<!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/[email protected]/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> |
|
|
|
