fixes

static/js/logs.js

@@ -1,8 +1,12 @@
+/**
+ * HAProxy Logs Management
+ * Pagination and dynamic loading of logs
+ */
+
 document.addEventListener('DOMContentLoaded', function() {
     let currentPage = 1;
     let perPage = 50;
     let totalLogs = parseInt(document.getElementById('total_count').textContent);
-    let allLogs = [];
     
     const logsContainer = document.getElementById('logs_container');
     const perPageSelect = document.getElementById('logs_per_page');
@@ -14,6 +18,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const currentPageSpan = document.getElementById('current_page');
     const totalPagesSpan = document.getElementById('total_pages');
     
+    // Event Listeners
     perPageSelect.addEventListener('change', function(e) {
         perPage = parseInt(e.target.value);
         currentPage = 1;
@@ -43,11 +48,18 @@ document.addEventListener('DOMContentLoaded', function() {
     loadAllBtn.addEventListener('click', function() {
         perPage = totalLogs;
         currentPage = 1;
-        perPageSelect.value = totalLogs;
+        if (perPageSelect.querySelector(`option[value="${totalLogs}"]`)) {
+            perPageSelect.value = totalLogs;
+        }
         loadLogs();
     });
     
+    /**
+     * Load logs from API with pagination
+     */
     function loadLogs() {
+        console.log(`[Logs] Loading page ${currentPage} with ${perPage} per page`);
+        
         fetch('/api/logs', {
             method: 'POST',
             headers: {
@@ -63,18 +75,23 @@ document.addEventListener('DOMContentLoaded', function() {
             if (data.success) {
                 renderLogs(data.logs);
                 updatePagination(data);
-                console.log(`[Logs] Załadowano page ${data.page}/${Math.ceil(data.total / data.per_page)}`);
+                console.log(`[Logs] Successfully loaded page ${data.page}/${Math.ceil(data.total / data.per_page)}`);
+            } else {
+                showError(data.error || 'Unknown error');
             }
         })
         .catch(error => {
-            console.error('Error loading logs:', error);
-            logsContainer.innerHTML = `<tr><td class="alert alert-danger">Błąd załadowania logów</td></tr>`;
+            console.error('[Logs] Error loading logs:', error);
+            showError('Failed to load logs. Please try again.');
         });
     }
     
+    /**
+     * Render logs in the table
+     */
     function renderLogs(logs) {
         if (!logs || logs.length === 0) {
-            logsContainer.innerHTML = '<tr><td class="text-center text-muted py-4"><i class="bi bi-inbox"></i> Brak logów</td></tr>';
+            logsContainer.innerHTML = '<tr><td class="text-center text-muted py-4"><i class="bi bi-inbox"></i> No logs available</td></tr>';
             return;
         }
         
@@ -82,10 +99,10 @@ document.addEventListener('DOMContentLoaded', function() {
             <tr>
                 <td>
                     <small style="font-family: monospace; color: #666;">
-                        <i class="bi bi-clock text-muted me-1"></i>${entry.timestamp || 'N/A'}<br>
-                        <span class="text-muted">${entry.source || 'N/A'}</span><br>
+                        <i class="bi bi-clock text-muted me-1"></i>${escapeHtml(entry.timestamp || 'N/A')}<br>
+                        <span class="text-muted">${escapeHtml(entry.source || 'N/A')}</span><br>
                         <code style="color: #333; word-break: break-all; display: block; margin-top: 4px;">
-                            ${entry.message || 'N/A'}
+                            ${escapeHtml(entry.message || 'N/A')}
                         </code>
                     </small>
                 </td>
@@ -93,15 +110,49 @@ document.addEventListener('DOMContentLoaded', function() {
         `).join('');
     }
     
+    /**
+     * Update pagination controls
+     */
     function updatePagination(data) {
         const totalPages = Math.ceil(data.total / data.per_page);
         loadedSpan.textContent = data.logs.length;
         currentPageSpan.textContent = data.page;
         totalPagesSpan.textContent = totalPages;
         
+        // Disable/enable navigation buttons
         prevBtn.disabled = data.page === 1;
         nextBtn.disabled = !data.has_more;
     }
     
+    /**
+     * Show error message
+     */
+    function showError(message) {
+        logsContainer.innerHTML = `
+            <tr>
+                <td class="text-center">
+                    <div class="alert alert-danger mb-0">
+                        <i class="bi bi-exclamation-triangle me-2"></i>${escapeHtml(message)}
+                    </div>
+                </td>
+            </tr>
+        `;
+    }
+    
+    /**
+     * Escape HTML to prevent XSS
+     */
+    function escapeHtml(text) {
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#039;'
+        };
+        return text.replace(/[&<>"']/g, m => map[m]);
+    }
+    
+    // Initial load
     loadLogs();
 });