Spaces:
Running
Running
| <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; } | |
| #logFilter { margin-top: 20px; margin-bottom: 20px; } | |
| #logFilter input, #logFilter select, #logFilter button { margin-right: 10px; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>API Monitoring Dashboard</h1> | |
| <div id="charts"></div> | |
| <div id="logs"> | |
| <h2>Logs</h2> | |
| <div id="logFilter"> | |
| <select id="modelSelect"> | |
| <option value="">All Models</option> | |
| </select> | |
| <input type="datetime-local" id="startTime"> | |
| <input type="datetime-local" id="endTime"> | |
| <button onclick="filterLogs()">Filter Logs</button> | |
| </div> | |
| <table id="logTable"> | |
| <thead> | |
| <tr> | |
| <th>Timestamp</th> | |
| <th>Model</th> | |
| <th>Status</th> | |
| <th>Failure Message</th> | |
| <th>Response Data</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 successTrace = { | |
| x: data[model].success.x, | |
| y: data[model].success.y, | |
| type: 'scatter', | |
| mode: 'markers', | |
| name: 'Success', | |
| marker: { color: 'blue' } | |
| }; | |
| let failureTrace = { | |
| x: data[model].failure.x, | |
| y: data[model].failure.y, | |
| type: 'scatter', | |
| mode: 'markers', | |
| name: 'Failure', | |
| marker: { color: 'red' } | |
| }; | |
| let layout = { | |
| title: 'API Status: ' + model, | |
| xaxis: { title: 'Timestamp' }, | |
| yaxis: { title: 'Status', range: [-0.1, 1.1], tickvals: [0, 1], ticktext: ['Failure', 'Success'] } | |
| }; | |
| Plotly.newPlot(div[0], [successTrace, failureTrace], layout); | |
| } | |
| }); | |
| } | |
| function updateLogs(filterModel = '', startTime = '', endTime = '') { | |
| $.getJSON('/api/logs', { model: filterModel, start: startTime, end: endTime }, 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') | |
| .css('color', log.success ? 'blue' : 'red') | |
| .appendTo(row); | |
| $('<td>').text(log.failure_message || 'N/A').appendTo(row); | |
| $('<td>').text(log.response_data ? JSON.stringify(log.response_data) : 'N/A').appendTo(row); | |
| tbody.append(row); | |
| }); | |
| }); | |
| } | |
| function updateModelSelect() { | |
| $.getJSON('/api/models', function(models) { | |
| let select = $('#modelSelect'); | |
| models.forEach(function(model) { | |
| $('<option>').val(model).text(model).appendTo(select); | |
| }); | |
| }); | |
| } | |
| function filterLogs() { | |
| let model = $('#modelSelect').val(); | |
| let startTime = $('#startTime').val(); | |
| let endTime = $('#endTime').val(); | |
| updateLogs(model, startTime, endTime); | |
| } | |
| function setDefaultDates() { | |
| const now = new Date(); | |
| const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000); | |
| document.getElementById('endTime').value = now.toISOString().slice(0, 16); | |
| document.getElementById('startTime').value = oneWeekAgo.toISOString().slice(0, 16); | |
| } | |
| $(document).ready(function() { | |
| setDefaultDates(); | |
| updateCharts(); | |
| updateLogs(); | |
| updateModelSelect(); | |
| setInterval(updateCharts, 60000); // Update every minute | |
| setInterval(function() { updateLogs($('#modelSelect').val(), $('#startTime').val(), $('#endTime').val()); }, 60000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |