haproxy-dashboard/static/js/logs.js

/**
 * HAProxy Logs Management with Security Alerts
 */

document.addEventListener('DOMContentLoaded', function() {
    let currentPage = 1;
    let perPage = 50;
    let totalLogs = parseInt(document.getElementById('total_count').textContent);
    let allLoadedLogs = [];
    let excludePhrases = [];
    
    const logsContainer = document.getElementById('logs_container');
    const searchFilter = document.getElementById('search_filter');
    const excludeFilter = document.getElementById('exclude_filter');
    const excludeBtn = document.getElementById('exclude_btn');
    const perPageSelect = document.getElementById('logs_per_page');
    const refreshBtn = document.getElementById('refresh_logs_btn');
    const prevBtn = document.getElementById('prev_btn');
    const nextBtn = document.getElementById('next_btn');
    const loadAllBtn = document.getElementById('load_all_btn');
    const clearFilterBtn = document.getElementById('clear_filter_btn');
    const loadedSpan = document.getElementById('loaded_count');
    const matchSpan = document.getElementById('match_count');
    const currentPageSpan = document.getElementById('current_page');
    const totalPagesSpan = document.getElementById('total_pages');
    
    // Event Listeners
    searchFilter.addEventListener('keyup', debounce(function() {
        currentPage = 1;
        loadLogsWithPage();
    }, 300));
    
    excludeBtn.addEventListener('click', function() {
        const phrase = excludeFilter.value.trim();
        if (phrase) {
            if (!excludePhrases.includes(phrase)) {
                excludePhrases.push(phrase);
                updateExcludeUI();
                currentPage = 1;
                loadLogsWithPage();
            }
            excludeFilter.value = '';
        }
    });
    
    excludeFilter.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') excludeBtn.click();
    });
    
    clearFilterBtn.addEventListener('click', function() {
        searchFilter.value = '';
        excludePhrases = [];
        excludeFilter.value = '';
        updateExcludeUI();
        currentPage = 1;
        loadLogsWithPage();
    });
    
    perPageSelect.addEventListener('change', function() {
        perPage = parseInt(this.value);
        currentPage = 1;
        applyFilters();
    });
    
    refreshBtn.addEventListener('click', function() {
        searchFilter.value = '';
        excludePhrases = [];
        excludeFilter.value = '';
        updateExcludeUI();
        currentPage = 1;
        loadLogs();
    });
    
    prevBtn.addEventListener('click', function() {
        if (currentPage > 1) {
            currentPage--;
            applyFilters();
        }
    });
    
    nextBtn.addEventListener('click', function() {
        const filtered = getFilteredLogs();
        const totalPages = Math.ceil(filtered.length / perPage);
        if (currentPage < totalPages) {
            currentPage++;
            applyFilters();
        }
    });
    
    loadAllBtn.addEventListener('click', function() {
        perPage = totalLogs;
        currentPage = 1;
        perPageSelect.value = totalLogs;
        applyFilters();
    });
    
    /**
     * Debounce function
     */
    function debounce(func, wait) {
        let timeout;
        return function() {
            clearTimeout(timeout);
            timeout = setTimeout(func, wait);
        };
    }
    
    /**
     * Load initial logs from API
     */
    function loadLogs() {
        logsContainer.innerHTML = '<tr><td class="text-center text-muted py-4">Loading logs...</td></tr>';
        loadLogsWithPage();
    }
    
    /**
     * Load logs with pagination from API
     */
    function loadLogsWithPage() {
        console.log(`[Logs] Loading page ${currentPage}, per_page ${perPage}`);
        
        fetch('/api/logs', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                page: currentPage,
                per_page: perPage,
                search: searchFilter.value.trim(),
                exclude: excludePhrases
            })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                allLoadedLogs = data.logs;
                loadedSpan.textContent = data.loaded_count;
                totalLogs = data.total;
                document.getElementById('total_count').textContent = data.total;
                
                const totalPages = Math.ceil(data.total_filtered / perPage) || 1;
                totalPagesSpan.textContent = totalPages;
                matchSpan.textContent = data.total_filtered;
                currentPageSpan.textContent = data.page;
                
                renderLogs(data.logs);
                
                prevBtn.disabled = currentPage === 1;
                nextBtn.disabled = !data.has_more;
                
                console.log(`[Logs] Page ${data.page}/${totalPages}, ${data.logs.length} logs`, flush=true);
            } else {
                showError(data.error);
            }
        })
        .catch(e => {
            console.error('Error:', e);
            showError('Failed to load logs');
        });
    }
    
    /**
     * Get filtered logs (for local filtering)
     */
    function getFilteredLogs() {
        let filtered = allLoadedLogs;
        
        // Apply search filter
        if (searchFilter.value.trim()) {
            const query = searchFilter.value.toLowerCase();
            filtered = filtered.filter(log => {
                const text = `${log.timestamp} ${log.ip_address} ${log.http_method} ${log.requested_url} ${log.frontend} ${log.backend}`.toLowerCase();
                return text.includes(query);
            });
        }
        
        // Apply exclude phrases
        if (excludePhrases.length > 0) {
            filtered = filtered.filter(log => {
                const text = `${log.timestamp} ${log.ip_address} ${log.message}`;
                return !excludePhrases.some(phrase => text.includes(phrase));
            });
        }
        
        return filtered;
    }
    
    /**
     * Apply local filters only
     */
    function applyFilters() {
        const filtered = getFilteredLogs();
        renderLogs(filtered);
        
        const totalPages = Math.ceil(filtered.length / perPage) || 1;
        totalPagesSpan.textContent = totalPages;
        currentPageSpan.textContent = currentPage;
        matchSpan.textContent = filtered.length;
        
        prevBtn.disabled = currentPage === 1;
        nextBtn.disabled = (currentPage * perPage) >= filtered.length;
    }
    
    /**
     * Render logs as table rows
     */
    function renderLogs(logs) {
        if (!logs || logs.length === 0) {
            logsContainer.innerHTML = '<tr><td class="text-center text-muted py-4">No logs found</td></tr>';
            return;
        }
        
        logsContainer.innerHTML = logs.map((entry) => {
            const threat_badges = [];
            if (entry.xss_alert) threat_badges.push('<span class="badge bg-danger me-1">XSS</span>');
            if (entry.sql_alert) threat_badges.push('<span class="badge bg-danger me-1">SQL</span>');
            if (entry.webshell_alert) threat_badges.push('<span class="badge bg-danger me-1">SHELL</span>');
            if (entry.put_method) threat_badges.push('<span class="badge bg-danger me-1">PUT</span>');
            if (entry.illegal_resource) threat_badges.push('<span class="badge bg-warning me-1">403</span>');
            
            const threat_html = threat_badges.length > 0 ? `<div class="mb-2">${threat_badges.join('')}</div>` : '';
            
            let row_class = '';
            if (entry.has_threat) {
                row_class = 'table-danger';
            } else if (entry.status_code.startsWith('5')) {
                row_class = 'table-danger';
            } else if (entry.status_code.startsWith('4')) {
                row_class = 'table-warning';
            } else if (entry.status_code.startsWith('2')) {
                row_class = 'table-light';
            } else {
                row_class = 'table-light';
            }
            
            return `
                <tr class="${row_class}" style="font-family: monospace; font-size: 11px;">
                    <td>
                        ${threat_html}
                        <small style="color: #0066cc;">${escapeHtml(entry.timestamp)}</small><br>
                        <small style="color: #666;">${escapeHtml(entry.ip_address)}</small> 
                        <strong style="color: #333;">${escapeHtml(entry.http_method)}</strong> 
                        <code style="color: #333;">${escapeHtml(entry.requested_url)}</code>
                        <span class="badge bg-dark" style="color: white; margin-left: 5px;">${escapeHtml(entry.status_code)}</span>
                        <br>
                        <small style="color: #666;">${escapeHtml(entry.frontend)}~ ${escapeHtml(entry.backend)}</small>
                    </td>
                </tr>
            `;
        }).join('');
    }
    
    /**
     * Update exclude UI
     */
    function updateExcludeUI() {
        if (excludePhrases.length > 0) {
            const tags = excludePhrases.map((phrase, idx) => `
                <span class="badge bg-warning text-dark me-2" style="cursor: pointer;" onclick="window.removeExcludePhrase(${idx})">
                    ${escapeHtml(phrase)} <i class="bi bi-x"></i>
                </span>
            `).join('');
            
            const container = document.createElement('div');
            container.className = 'small mt-2';
            container.innerHTML = `<strong>Hiding:</strong> ${tags}`;
            
            const existing = document.getElementById('exclude_ui');
            if (existing) existing.remove();
            
            container.id = 'exclude_ui';
            excludeFilter.parentElement.parentElement.after(container);
        } else {
            const existing = document.getElementById('exclude_ui');
            if (existing) existing.remove();
        }
    }
    
    /**
     * Remove exclude phrase
     */
    window.removeExcludePhrase = function(idx) {
        excludePhrases.splice(idx, 1);
        updateExcludeUI();
        currentPage = 1;
        loadLogsWithPage();
    };
    
    /**
     * Show error
     */
    function showError(msg) {
        logsContainer.innerHTML = `<tr><td class="alert alert-danger mb-0">${escapeHtml(msg)}</td></tr>`;
    }
    
    /**
     * Escape HTML
     */
    function escapeHtml(text) {
        const map = {'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;'};
        return (text || '').replace(/[&<>"']/g, m => map[m]);
    }
    
    loadLogs();
});