new_functions #2
@@ -1,82 +1,89 @@
|
||||
/**
|
||||
* HAProxy Logs Management
|
||||
* Pagination, filtering, and formatting of logs
|
||||
* Pagination, filtering, and proper formatting
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let currentPage = 1;
|
||||
let perPage = 50;
|
||||
let totalLogs = parseInt(document.getElementById('total_count').textContent);
|
||||
let filterRegex = null;
|
||||
let wrapEnabled = false;
|
||||
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 toggleWrapBtn = document.getElementById('toggle_wrap_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');
|
||||
const logsWrapper = document.getElementById('logs_container_wrapper');
|
||||
|
||||
// Event Listeners
|
||||
searchFilter.addEventListener('keyup', function() {
|
||||
searchFilter.addEventListener('keyup', debounce(function() {
|
||||
currentPage = 1;
|
||||
try {
|
||||
filterRegex = new RegExp(this.value, 'gi');
|
||||
} catch(e) {
|
||||
filterRegex = null;
|
||||
applyFilters();
|
||||
}, 300));
|
||||
|
||||
excludeBtn.addEventListener('click', function() {
|
||||
const phrase = excludeFilter.value.trim();
|
||||
if (phrase) {
|
||||
if (!excludePhrases.includes(phrase)) {
|
||||
excludePhrases.push(phrase);
|
||||
updateExcludeUI();
|
||||
applyFilters();
|
||||
}
|
||||
applyFilter();
|
||||
excludeFilter.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
excludeFilter.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') excludeBtn.click();
|
||||
});
|
||||
|
||||
clearFilterBtn.addEventListener('click', function() {
|
||||
searchFilter.value = '';
|
||||
filterRegex = null;
|
||||
excludePhrases = [];
|
||||
excludeFilter.value = '';
|
||||
updateExcludeUI();
|
||||
currentPage = 1;
|
||||
applyFilter();
|
||||
applyFilters();
|
||||
});
|
||||
|
||||
toggleWrapBtn.addEventListener('click', function() {
|
||||
wrapEnabled = !wrapEnabled;
|
||||
const pre = document.getElementById('logs_container');
|
||||
pre.style.whiteSpace = wrapEnabled ? 'pre-wrap' : 'pre';
|
||||
toggleWrapBtn.classList.toggle('active', wrapEnabled);
|
||||
});
|
||||
|
||||
perPageSelect.addEventListener('change', function(e) {
|
||||
perPage = parseInt(e.target.value);
|
||||
perPageSelect.addEventListener('change', function() {
|
||||
perPage = parseInt(this.value);
|
||||
currentPage = 1;
|
||||
applyFilter();
|
||||
applyFilters();
|
||||
});
|
||||
|
||||
refreshBtn.addEventListener('click', function() {
|
||||
currentPage = 1;
|
||||
filterRegex = null;
|
||||
searchFilter.value = '';
|
||||
excludePhrases = [];
|
||||
excludeFilter.value = '';
|
||||
updateExcludeUI();
|
||||
currentPage = 1;
|
||||
loadLogs();
|
||||
});
|
||||
|
||||
prevBtn.addEventListener('click', function() {
|
||||
if (currentPage > 1) {
|
||||
currentPage--;
|
||||
applyFilter();
|
||||
applyFilters();
|
||||
}
|
||||
});
|
||||
|
||||
nextBtn.addEventListener('click', function() {
|
||||
const filtered = filterRegex ? allLoadedLogs.filter(log => filterRegex.test(log)) : allLoadedLogs;
|
||||
const filtered = getFilteredLogs();
|
||||
const totalPages = Math.ceil(filtered.length / perPage);
|
||||
if (currentPage < totalPages) {
|
||||
currentPage++;
|
||||
applyFilter();
|
||||
applyFilters();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -84,142 +91,177 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
perPage = totalLogs;
|
||||
currentPage = 1;
|
||||
perPageSelect.value = totalLogs;
|
||||
applyFilter();
|
||||
applyFilters();
|
||||
});
|
||||
|
||||
/**
|
||||
* Debounce function
|
||||
*/
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function() {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(func, wait);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Load logs from API
|
||||
*/
|
||||
function loadLogs() {
|
||||
console.log(`[Logs] Loading page ${currentPage} with ${perPage} per page`);
|
||||
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',
|
||||
},
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
page: currentPage,
|
||||
per_page: perPage
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
allLoadedLogs = data.logs;
|
||||
loadedSpan.textContent = data.logs.length;
|
||||
updatePagination(data);
|
||||
applyFilter();
|
||||
console.log(`[Logs] Successfully loaded page ${data.page}/${Math.ceil(data.total / data.per_page)}`);
|
||||
applyFilters();
|
||||
} else {
|
||||
showError(data.error || 'Unknown error');
|
||||
showError(data.error);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('[Logs] Error loading logs:', error);
|
||||
showError('Failed to load logs. Please try again.');
|
||||
.catch(e => {
|
||||
console.error('Error:', e);
|
||||
showError('Failed to load logs');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply filter and display logs
|
||||
* Get filtered logs
|
||||
*/
|
||||
function applyFilter() {
|
||||
function getFilteredLogs() {
|
||||
let filtered = allLoadedLogs;
|
||||
|
||||
if (filterRegex) {
|
||||
filtered = allLoadedLogs.filter(log => {
|
||||
const fullLog = `${log.timestamp || ''} ${log.source || ''} ${log.message || ''}`;
|
||||
return filterRegex.test(fullLog);
|
||||
// Apply search filter
|
||||
if (searchFilter.value.trim()) {
|
||||
const query = searchFilter.value.toLowerCase();
|
||||
filtered = filtered.filter(log => {
|
||||
const text = `${log.timestamp || ''} ${log.source || ''} ${log.message || ''}`.toLowerCase();
|
||||
return text.includes(query);
|
||||
});
|
||||
filterRegex.lastIndex = 0; // Reset regex for next test
|
||||
}
|
||||
|
||||
// Apply exclude phrases
|
||||
if (excludePhrases.length > 0) {
|
||||
filtered = filtered.filter(log => {
|
||||
const text = `${log.timestamp || ''} ${log.source || ''} ${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, filtered);
|
||||
renderLogs(paginated);
|
||||
|
||||
prevBtn.disabled = currentPage === 1;
|
||||
nextBtn.disabled = offset + perPage >= filtered.length;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render logs with syntax highlighting
|
||||
* Render logs as table rows
|
||||
*/
|
||||
function renderLogs(logs, allFiltered) {
|
||||
function renderLogs(logs) {
|
||||
if (!logs || logs.length === 0) {
|
||||
logsContainer.textContent = '(No logs available)';
|
||||
logsContainer.innerHTML = '<tr><td class="text-center text-muted py-4">No logs matching criteria</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
const output = logs.map((entry, idx) => {
|
||||
const timestamp = entry.timestamp || 'N/A';
|
||||
const source = entry.source || 'N/A';
|
||||
const message = entry.message || 'N/A';
|
||||
logsContainer.innerHTML = logs.map((entry, idx) => {
|
||||
const timestamp = entry.timestamp || '-';
|
||||
const source = entry.source || '-';
|
||||
const message = entry.message || '-';
|
||||
|
||||
// Format with colors
|
||||
let formatted = '';
|
||||
// Color code by status code if present
|
||||
let statusClass = '';
|
||||
if (message.includes('200')) statusClass = 'table-success';
|
||||
else if (message.includes('404')) statusClass = 'table-warning';
|
||||
else if (message.includes('500')) statusClass = 'table-danger';
|
||||
|
||||
// Timestamp (blue)
|
||||
formatted += `\x1b[36m${timestamp}\x1b[0m `;
|
||||
return `
|
||||
<tr class="${statusClass}" style="font-family: monospace; font-size: 11px;">
|
||||
<td>
|
||||
<small class="text-info">${escapeHtml(timestamp)}</small><br>
|
||||
<small class="text-warning">${escapeHtml(source)}</small><br>
|
||||
<small style="color: #ddd; word-break: break-all;">${escapeHtml(message)}</small>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// Source IP (yellow)
|
||||
formatted += `\x1b[33m${source}\x1b[0m `;
|
||||
/**
|
||||
* Update exclude UI to show active filters
|
||||
*/
|
||||
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('');
|
||||
|
||||
// Message (white)
|
||||
formatted += `${message}`;
|
||||
const container = document.createElement('div');
|
||||
container.className = 'small mt-2';
|
||||
container.innerHTML = `<strong>Hiding:</strong> ${tags}`;
|
||||
|
||||
return `${idx + 1}. ${formatted}`;
|
||||
}).join('\n');
|
||||
const existing = document.getElementById('exclude_ui');
|
||||
if (existing) existing.remove();
|
||||
|
||||
// Convert ANSI-like colors to HTML-like (for better compatibility)
|
||||
logsContainer.textContent = output;
|
||||
|
||||
// Highlight search matches if filter is active
|
||||
if (filterRegex) {
|
||||
const text = logsContainer.textContent;
|
||||
const highlighted = text.replace(filterRegex, match => `>>> ${match} <<<`);
|
||||
logsContainer.textContent = highlighted;
|
||||
filterRegex.lastIndex = 0;
|
||||
container.id = 'exclude_ui';
|
||||
excludeFilter.parentElement.parentElement.after(container);
|
||||
} else {
|
||||
const existing = document.getElementById('exclude_ui');
|
||||
if (existing) existing.remove();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update pagination info
|
||||
* Global function to remove exclude phrase
|
||||
*/
|
||||
function updatePagination(data) {
|
||||
const totalPages = Math.ceil(data.total / data.per_page);
|
||||
currentPageSpan.textContent = data.page;
|
||||
totalPagesSpan.textContent = totalPages;
|
||||
}
|
||||
window.removeExcludePhrase = function(idx) {
|
||||
excludePhrases.splice(idx, 1);
|
||||
updateExcludeUI();
|
||||
applyFilters();
|
||||
};
|
||||
|
||||
/**
|
||||
* Show error message
|
||||
* Show error
|
||||
*/
|
||||
function showError(message) {
|
||||
logsContainer.textContent = `ERROR: ${escapeHtml(message)}`;
|
||||
function showError(msg) {
|
||||
logsContainer.innerHTML = `<tr><td class="alert alert-danger mb-0">${escapeHtml(msg)}</td></tr>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape HTML
|
||||
*/
|
||||
function escapeHtml(text) {
|
||||
const map = {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
};
|
||||
return text.replace(/[&<>"']/g, m => map[m]);
|
||||
const map = {'&': '&', '<': '<', '>': '>', '"': '"', "'": '''};
|
||||
return (text || '').replace(/[&<>"']/g, m => map[m]);
|
||||
}
|
||||
|
||||
// Initial load
|
||||
loadLogs();
|
||||
});
|
||||
|
||||
@@ -27,67 +27,72 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Search & Filter Controls -->
|
||||
<div class="row mb-3 g-2">
|
||||
<div class="col-md-4">
|
||||
<!-- Controls Row -->
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-md-3">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text"><i class="bi bi-search"></i></span>
|
||||
<input type="text" class="form-control" id="search_filter" placeholder="Filter logs (regex)...">
|
||||
<input type="text" class="form-control" id="search_filter" placeholder="Search logs...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="logs_per_page" class="form-label form-label-sm">Logs Per Page</label>
|
||||
<div class="col-md-2">
|
||||
<button class="btn btn-sm btn-outline-secondary w-100" id="clear_filter_btn" title="Clear search">
|
||||
<i class="bi bi-x-circle me-1"></i>Clear
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<select class="form-select form-select-sm" id="logs_per_page">
|
||||
<option value="25" selected>25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
<option value="200">200</option>
|
||||
<option value="25" selected>25 per page</option>
|
||||
<option value="50">50 per page</option>
|
||||
<option value="100">100 per page</option>
|
||||
<option value="200">200 per page</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<button class="btn btn-primary btn-sm w-100" id="refresh_logs_btn">
|
||||
<i class="bi bi-arrow-clockwise me-1"></i>Refresh
|
||||
<button class="btn btn-sm btn-primary w-100" id="refresh_logs_btn">
|
||||
<i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="btn-group btn-group-sm w-100" role="group">
|
||||
<button type="button" class="btn btn-outline-secondary" id="clear_filter_btn">
|
||||
<i class="bi bi-x-circle me-1"></i>Clear
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary" id="toggle_wrap_btn">
|
||||
<i class="bi bi-arrow-left-right me-1"></i>Wrap
|
||||
</button>
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text"><i class="bi bi-funnel"></i></span>
|
||||
<input type="text" class="form-control" id="exclude_filter" placeholder="Hide phrase (e.g. /stats)">
|
||||
<button class="btn btn-outline-warning btn-sm" id="exclude_btn" type="button">Hide</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistics -->
|
||||
<div class="alert alert-info small">
|
||||
<div class="alert alert-info small mb-3">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
<strong>Loaded:</strong> <span id="loaded_count">{{ loaded_count|default(0) }}</span> /
|
||||
<strong>Total:</strong> <span id="total_count">{{ total_logs|default(0) }}</span> logs |
|
||||
<strong>Matches:</strong> <span id="match_count">0</span>
|
||||
<strong>Loaded:</strong> <span id="loaded_count">{{ loaded_count|default(0) }}</span> |
|
||||
<strong>Displayed:</strong> <span id="match_count">0</span>
|
||||
</div>
|
||||
|
||||
<!-- Logs Container (Dark Theme) -->
|
||||
<div id="logs_container_wrapper" style="max-height: 700px; overflow-y: auto; border: 1px solid #444; border-radius: 4px; background: #1a1a1a; position: relative;">
|
||||
<pre id="logs_container" style="margin: 0; padding: 12px; color: #e0e0e0; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace; font-size: 12px; line-height: 1.6; background: #1a1a1a; white-space: pre-wrap; word-wrap: break-word;">Loading logs...</pre>
|
||||
<div id="logs_container_wrapper" style="max-height: 650px; overflow-y: auto; border: 1px solid #444; border-radius: 4px; background: #0d1117;">
|
||||
<table class="table table-sm table-dark mb-0" id="logs_table">
|
||||
<tbody id="logs_container">
|
||||
<tr><td class="text-center text-muted py-4">Loading logs...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
|
||||
<small class="text-muted">
|
||||
Page <span id="current_page">1</span> of <span id="total_pages">1</span>
|
||||
Page <span id="current_page">1</span> / <span id="total_pages">1</span>
|
||||
</small>
|
||||
<div class="btn-group" role="group">
|
||||
<button class="btn btn-sm btn-outline-primary" id="prev_btn" disabled>
|
||||
<i class="bi bi-chevron-left"></i> Previous
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<button class="btn btn-outline-primary" id="prev_btn" disabled>
|
||||
<i class="bi bi-chevron-left"></i> Prev
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-primary" id="next_btn">
|
||||
<button class="btn btn-outline-primary" id="next_btn">
|
||||
Next <i class="bi bi-chevron-right"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-secondary" id="load_all_btn">
|
||||
<i class="bi bi-download me-1"></i>Load All
|
||||
<button class="btn btn-outline-secondary" id="load_all_btn">
|
||||
<i class="bi bi-download"></i> All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user