Update static/index.html

static/index.html

@@ -26,7 +26,7 @@
             <thead>
                 <tr>
                     <th>Timestamp</th>
-                    <th>URL</th>
+                    <th>Model</th>
                     <th>Status</th>
                 </tr>
             </thead>
@@ -40,22 +40,32 @@
                 $('#charts').empty();
                 for (let model in data) {
                     let div = $('<div>').addClass('chart').appendTo('#charts');
-                    let trace = {
-                        x: data[model].x,
-                        y: data[model].y,
+                    let successTrace = {
+                        x: data[model].success.x,
+                        y: data[model].success.y,
                         type: 'scatter',
-                        mode: 'lines+markers',
-                        name: model
+                        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] }
+                        yaxis: { title: 'Status', range: [-0.1, 1.1], tickvals: [0, 1], ticktext: ['Failure', 'Success'] }
                     };
-                    Plotly.newPlot(div[0], [trace], layout);
+                    Plotly.newPlot(div[0], [successTrace, failureTrace], layout);
                 }
             });
         }
+
         function updateLogs() {
             $.getJSON('/api/logs', function(data) {
                 let tbody = $('#logTable tbody');
@@ -64,11 +74,14 @@
                     let row = $('<tr>');
                     $('<td>').text(log.timestamp).appendTo(row);
                     $('<td>').text(log.model).appendTo(row);
-                    $('<td>').text(log.success ? 'Success' : 'Failure').appendTo(row);
+                    $('<td>').text(log.success ? 'Success' : 'Failure')
+                             .css('color', log.success ? 'blue' : 'red')
+                             .appendTo(row);
                     tbody.append(row);
                 });
             });
         }
+
         $(document).ready(function() {
             updateCharts();
             updateLogs();