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;
        applyFilters();
    }, 300));
    
    excludeBtn.addEventListener('click', function() {
        const phrase = excludeFilter.value.trim();
        if (phrase) {
            if (!excludePhrases.includes(phrase)) {
                excludePhrases.push(phrase);
                updateExcludeUI();
                applyFilters();
            }
            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;
        applyFilters();
    });
    
    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 logs from API
     */
    function loadLogs() {
        logsContainer.innerHTML = '<tr><td class="text-center text-muted py-4">Loading logs...</td></tr>';
        
        fetch('/api/logs', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                page: 1,
                per_page: 200  // Load initial 200
            })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                allLoadedLogs = data.logs;
                loadedSpan.textContent = data.logs.length;
                totalLogs = data.total;
                document.getElementById('total_count').textContent = data.total;
                console.log(`[Logs] Loaded ${data.logs.length}/${data.total}`, flush=true);
                applyFilters();
            } else {
                showError(data.error);
            }
        })
        .catch(e => {
            console.error('Error:', e);
            showError('Failed to load logs');
        });
    }
    
    /**
     * Get filtered logs
     */
    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 all filters and render
     */
    function applyFilters() {
        const filtered = getFilteredLogs();
        matchSpan.textContent = filtered.length;
        
        const totalPages = Math.ceil(filtered.length / perPage) || 1;
        totalPagesSpan.textContent = totalPages;
        currentPageSpan.textContent = currentPage;
        
        const offset = (currentPage - 1) * perPage;
        const paginated = filtered.slice(offset, offset + perPage);
        
        renderLogs(paginated);
        
        prevBtn.disabled = currentPage === 1;
        nextBtn.disabled = offset + 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 matching criteria</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-warning 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>` : '';
            
            return `
                <tr class="table-${entry.status_class}" style="font-family: monospace; font-size: 11px;">
                    <td>
                        ${threat_html}
                        <small class="text-info">${escapeHtml(entry.timestamp)}</small><br>
                        <small class="text-warning">${escapeHtml(entry.ip_address)}</small><br>
                        <strong>${escapeHtml(entry.http_method)}</strong> 
                        <code>${escapeHtml(entry.requested_url)}</code>
                        <span class="badge bg-secondary ms-2">${escapeHtml(entry.status_code)}</span>
                        <br>
                        <small style="color: #aaa;">${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();
        applyFilters();
    };
    
    /**
     * 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();
});