trying to make the logs view to have better date format.

app/web/static/logs.js

@@ -25,15 +25,27 @@ document.addEventListener('DOMContentLoaded', () => {
             const response = await fetch(url);
             console.log('Response status:', response.status);
             if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
+                const errorText = await response.text(); // Try to get response body as text
+                console.error('Response text on error:', errorText); // Log it
+                // If the server returns a 404, it might be due to a stale UUID.
+                // Log a more specific message.
+                if (response.status === 404) {
+                    console.error(`404 Not Found: Service UUID mismatch. Current page UUID: ${serviceUuid}. Server UUID might have changed. Please hard refresh the page.`);
+                    logTableContainer.innerHTML = `<p class="loading-message error-message">Error: Service UUID mismatch. Please hard refresh your browser tab (Ctrl+F5 or Cmd+Shift+R).</p>`;
+                } else {
+                    // Log the status code to help debug
+                    console.error(`HTTP error! status: ${response.status} - ${errorText}`);
+                    logTableContainer.innerHTML = `<p class="loading-message error-message">Error loading logs. HTTP Status: ${response.status}. Please check server connection or hard refresh.</p>`;
+                }
+                return; // Stop further processing if error
             }
             const data = await response.json();
             console.log('Received logs:', data.logs.length);
             renderLogTable(data.logs);
             logCountSpan.textContent = data.log_count;
         } catch (error) {
-            console.error("Error fetching logs:", error);
-            logTableContainer.innerHTML = '<p class="loading-message">Error loading logs. Please check server connection.</p>';
+            console.error("Error fetching logs (JSON parsing or other):", error);
+            logTableContainer.innerHTML = '<p class="loading-message error-message">Error loading logs. Failed to parse response or other network issue. See console for details.</p>';
         }
     }
 
@@ -138,9 +150,9 @@ document.addEventListener('DOMContentLoaded', () => {
     applyFiltersButton.addEventListener('click', () => {
         const selectedRadio = document.querySelector('input[name="log-level"]:checked');
         currentLevel = selectedRadio ? selectedRadio.value : '';
-        const sinceValue = sinceFilter.value;
-        // Convert local datetime input to ISO string for backend, handling potential timezone issues
-        currentSince = sinceValue ? new Date(sinceValue).toISOString().replace(/\.\d{3}Z$/, 'Z') : ''; // Ensure 'Z' for UTC
+        // Send the datetime-local value directly. It's already in YYYY-MM-DDTHH:mm (24-hour) format.
+        // The backend will interpret this as UTC.
+        currentSince = sinceFilter.value;
         console.log('Applying filters:', { level: currentLevel, since: currentSince });
         fetchLogs();
     });

app/web/static/script.js

@@ -19,8 +19,8 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function renderNodeGrid(nodes) {
-        nodeGridContainer.innerHTML = ''; // Clear existing content
-        nodeCountSpan.textContent = nodes.length; // Update total node count
+        nodeGridContainer.innerHTML = '';
+        nodeCountSpan.textContent = nodes.length;
 
         if (nodes.length === 0) {
             nodeGridContainer.innerHTML = '<p class="loading-message">No nodes reporting yet. Start a client!</p>';
@@ -132,3 +132,4 @@ document.addEventListener('DOMContentLoaded', () => {
     fetchNodeData();
     setInterval(fetchNodeData, POLLING_INTERVAL_MS);
 });
+

app/web/static/style.css

@@ -40,6 +40,8 @@ body {
     margin-bottom: 20px;
     width: 80vw;
     max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 h1 {
@@ -63,13 +65,17 @@ code {
 }
 
 #node-grid-container, #log-table-container {
-    width: 80vw;
-    max-width: 1200px;
+    width: 95vw;
+    max-width: 1600px;
     min-width: 400px;
     padding: 20px;
     background-color: var(--nord3);
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    margin-bottom: 20px;
+    margin-left: auto;
+    margin-right: auto;
+    overflow-x: auto;
 }
 
 .connection-grid {

app/web/templates/index.html

@@ -10,7 +10,7 @@
     <div class="header-container">
         <h1>Node Monitoring System</h1>
         <p>Total Nodes: <span id="node-count">0</span></p>
-        <p>Service UUID: <code>{{ service_uuid }}</code></p> <!-- Always display service UUID -->
+        <p>Service UUID: <code>{{ service_uuid }}</code></p>
     </div>
 
     <div id="node-grid-container">

app/web/templates/logs.html

@@ -2,7 +2,6 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- Removed: <meta http-equiv="refresh" content="5"> -->
     <title>Node Monitor Logs - {{ service_uuid }}</title>
     <link rel="stylesheet" href="{{ url_for('static', path='/style.css') }}">
 </head>
@@ -19,8 +18,8 @@
                 <label><input type="radio" name="log-level" value="WARNING"> WARNING</label>
                 <label><input type="radio" name="log-level" value="ERROR"> ERROR</label>
             </fieldset>
-            <label for="since-filter">Since (ISO):</label>
-            <input type="datetime-local" id="since-filter" placeholder="2025-06-11T13:32:00">
+            <label for="since-filter">Since (UTC ISO 8601):</label>
+            <input type="datetime-local" id="since-filter" placeholder="e.g., 2025-06-11T13:32 (UTC)">
             <button id="apply-filters">Apply</button>
         </div>
     </div>
@@ -64,3 +63,4 @@
     <script src="{{ url_for('static', path='/logs.js') }}"></script>
 </body>
 </html>
+