Spaces:
Running
Running
File size: 5,432 Bytes
31ff22c 5ca5e6d 31ff22c 5ca5e6d 25c275f 0e9b8a5 25c275f 31ff22c 7fa4d7a 31ff22c 7fa4d7a 31ff22c 7fa4d7a 31ff22c 7fa4d7a 31ff22c 7fa4d7a 5ca5e6d 31ff22c 7fa4d7a 25c275f 31ff22c 7fa4d7a 5ca5e6d 25c275f 31ff22c 25c275f 31ff22c 5ca5e6d 31ff22c 5ca5e6d 31ff22c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
<!DOCTYPE html>
<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> |