Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>API Monitoring Dashboard</title> | |
| <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <style> | |
| body { font-family: Arial, sans-serif; margin: 0; padding: 20px; } | |
| h1 { text-align: center; } | |
| #charts { display: flex; flex-wrap: wrap; justify-content: space-around; } | |
| .chart { width: 100%; max-width: 600px; margin-bottom: 20px; } | |
| #logs { margin-top: 40px; } | |
| table { width: 100%; border-collapse: collapse; } | |
| th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } | |
| th { background-color: #f2f2f2; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>API Monitoring Dashboard</h1> | |
| <div id="charts"></div> | |
| <div id="logs"> | |
| <h2>Logs</h2> | |
| <table id="logTable"> | |
| <thead> | |
| <tr> | |
| <th>Timestamp</th> | |
| <th>URL</th> | |
| <th>Status</th> | |
| </tr> | |
| </thead> | |
| <tbody></tbody> | |
| </table> | |
| </div> | |
| <script> | |
| function updateCharts() { | |
| $.getJSON('/api/chart-data', function(data) { | |
| $('#charts').empty(); | |
| for (let model in data) { | |
| let div = $('<div>').addClass('chart').appendTo('#charts'); | |
| let trace = { | |
| x: data[model].x, | |
| y: data[model].y, | |
| type: 'scatter', | |
| mode: 'lines+markers', | |
| name: model | |
| }; | |
| let layout = { | |
| title: 'API Status: ' + model, | |
| xaxis: { title: 'Timestamp' }, | |
| yaxis: { title: 'Status', range: [-0.1, 1.1] } | |
| }; | |
| Plotly.newPlot(div[0], [trace], layout); | |
| } | |
| }); | |
| } | |
| function updateLogs() { | |
| $.getJSON('/api/logs', function(data) { | |
| let tbody = $('#logTable tbody'); | |
| tbody.empty(); | |
| data.forEach(function(log) { | |
| let row = $('<tr>'); | |
| $('<td>').text(log.timestamp).appendTo(row); | |
| $('<td>').text(log.model).appendTo(row); | |
| $('<td>').text(log.success ? 'Success' : 'Failure').appendTo(row); | |
| tbody.append(row); | |
| }); | |
| }); | |
| } | |
| $(document).ready(function() { | |
| updateCharts(); | |
| updateLogs(); | |
| setInterval(updateCharts, 60000); // Update every minute | |
| setInterval(updateLogs, 60000); // Update every minute | |
| }); | |
| </script> | |
| </body> | |
| </html> |