Types, types, types...

app/web/static/logs.js

@@ -4,12 +4,47 @@ document.addEventListener('DOMContentLoaded', () => {
     const levelRadios = document.querySelectorAll('input[name="log-level"]');
     const sinceFilter = document.getElementById('since-filter');
     const applyFiltersButton = document.getElementById('apply-filters');
+    const togglePollingButton = document.getElementById('toggle-polling');
+    const pollingStatusSpan = document.getElementById('polling-status');
     const POLLING_INTERVAL_MS = 5000;
     const serviceUuid = logTableContainer.dataset.serviceUuid; // Get service UUID from data attribute
 
     let currentLevel = '';
     let currentSince = '';
 
+    let pollingIntervalId = null;
+    let isPollingActive = true; // Start active by default
+
+    // Function to update the UI elements related to polling status
+    function updatePollingStatusUI() {
+        if (isPollingActive) {
+            togglePollingButton.textContent = 'Pause Auto-Refresh';
+            pollingStatusSpan.textContent = `Auto-refresh: ON (every ${POLLING_INTERVAL_MS / 1000} seconds)`;
+        } else {
+            togglePollingButton.textContent = 'Resume Auto-Refresh';
+            pollingStatusSpan.textContent = 'Auto-refresh: OFF (paused)';
+        }
+    }
+
+    // Function to start polling
+    function startPolling() {
+        if (pollingIntervalId) {
+            clearInterval(pollingIntervalId); // Clear any existing interval to prevent duplicates
+        }
+        isPollingActive = true;
+        fetchLogs(); // Fetch immediately when starting/resuming
+        pollingIntervalId = setInterval(fetchLogs, POLLING_INTERVAL_MS);
+        updatePollingStatusUI();
+    }
+
+    // Function to stop polling
+    function stopPolling() {
+        isPollingActive = false;
+        clearInterval(pollingIntervalId);
+        pollingIntervalId = null;
+        updatePollingStatusUI();
+    }
+
     async function fetchLogs() {
         console.log('Fetching logs with params:', { level: currentLevel, since: currentSince });
         try {
@@ -24,13 +59,11 @@ document.addEventListener('DOMContentLoaded', () => {
             console.log('Fetch URL:', url);
             const response = await fetch(url);
             console.log('Response status:', response.status);
-            console.log('Response Content-Type:', response.headers.get('Content-Type')); // NEW: Log Content-Type
+            console.log('Response Content-Type:', response.headers.get('Content-Type'));
 
             if (!response.ok) {
-                const errorText = await response.text(); // Try to get response body as text
-                console.error('Raw response text on error:', errorText.substring(0, 500) + (errorText.length > 500 ? '...' : '')); // Log first 500 chars
-                // If the server returns a 404, it might be due to a stale UUID.
-                // Log a more specific message.
+                const errorText = await response.text();
+                console.error('Raw response text on error:', errorText.substring(0, 500) + (errorText.length > 500 ? '...' : ''));
                 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>`;
@@ -39,7 +72,8 @@ document.addEventListener('DOMContentLoaded', () => {
                     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
+                stopPolling(); // Stop polling on error
+                return;
             }
 
             // Attempt to parse JSON. This is where the error would occur if the content is HTML.
@@ -50,6 +84,7 @@ document.addEventListener('DOMContentLoaded', () => {
         } catch (error) {
             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>';
+            stopPolling(); // Stop polling on error
         }
     }
 
@@ -151,19 +186,26 @@ document.addEventListener('DOMContentLoaded', () => {
         return div.innerHTML;
     }
 
+    // Event listener for the "Apply Filters" button
     applyFiltersButton.addEventListener('click', () => {
         const selectedRadio = document.querySelector('input[name="log-level"]:checked');
         currentLevel = selectedRadio ? selectedRadio.value : '';
-        // 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();
+        // When filters are applied, always restart polling to fetch new data
+        startPolling();
+    });
+
+    // Event listener for the new "Toggle Polling" button
+    togglePollingButton.addEventListener('click', () => {
+        if (isPollingActive) {
+            stopPolling();
+        } else {
+            startPolling();
+        }
     });
 
     console.log('Initializing logs page');
-    // Call fetchLogs immediately on page load to populate the table with fresh data
-    // and handle the initial refresh logic.
-    fetchLogs();
-    setInterval(fetchLogs, POLLING_INTERVAL_MS);
+    // Initial call to start polling when the page loads
+    startPolling();
 });