Add client-side search and pagination to logs view

[Copilot]

Logs page had no navigation or search capabilities, making large log files difficult to manage.

Changes

Search

• Text input filters logs across all columns (user, action, timestamp)
• Real-time filtering on keyup

Pagination

• Configurable page size: 10, 25, 50, 100 entries
• Previous/Next navigation with boundary handling
• Entry count display: "Page 2 of 5 (120 entries)"

Implementation

• Client-side JavaScript - no backend changes required
• Works with existing type filters (All/Activity/Security)
• Filters compose: search + type filter + pagination apply simultaneously
• Accessibility: ARIA labels added to form controls

// Filters stack - search narrows results, then pagination applies
function applyPaginationAndFilters() {
    const allRows = Array.from(document.querySelectorAll("#logsTable tbody tr"));
    const filteredRows = getFilteredRows(allRows);  // Apply search + type filter
    const totalPages = Math.ceil(filteredRows.length / pageSize) || 1;
    
    // Show only current page slice
    const startIdx = (currentPage - 1) * pageSize;
    filteredRows.forEach((row, idx) => {
        row.style.display = (idx >= startIdx && idx < startIdx + pageSize) ? '' : 'none';
    });
}

Screenshots

Initial view with pagination:

Security filter applied (22 matching entries):

Page 2 navigation:

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iptv.lan
  • Triggering command: /usr/bin/python3 python3 app.py (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add filtering and pagination to logs view</issue_title>
<issue_description>Enhance logs.html by providing filtering and pagination:

• Add a search/filter input for log entries
• Implement basic pagination controls for easier navigation
• Client-side implementation with JS for immediate improvement
• Optionally expand to backend querying later
  This will make log management much more efficient for admins.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Add filtering and pagination to logs view #74

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.