gru/haproxy-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2025-11-04 08:40:06 +01:00
parent 27f9984574
commit 370c7099f5
2 changed files with 123 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
static/js/logs.js
View File

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

231
templates/logs.html
View File

@@ -8,7 +8,7 @@
<nav aria-label="breadcrumb" class="mb-3"> <nav aria-label="breadcrumb" class="mb-3">
<ol class="breadcrumb mb-0"> <ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="{{ url_for('main.index') }}"><i class="bi bi-house"></i></a></li> <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}"><i class="bi bi-house"></i></a></li>
<li class="breadcrumb-item active" aria-current="page">Access Logs</li> <li class="breadcrumb-item active" aria-current="page">Logs</li>
</ol> </ol>
</nav> </nav>
{% endblock %} {% endblock %}
@@ -17,192 +17,87 @@
<div class="card shadow-sm mb-4"> <div class="card shadow-sm mb-4">
<div class="card-header bg-primary text-white"> <div class="card-header bg-primary text-white">
<h5 class="mb-0"><i class="bi bi-file-text me-2"></i>HAProxy Access Logs</h5> <h5 class="mb-0"><i class="bi bi-file-earmark-text me-2"></i>HAProxy Logs</h5>
</div> </div>
<div class="card-body"> <div class="card-body">
{% if error_message %} {% if error_message %}
<div class="alert alert-warning alert-dismissible fade show" role="alert"> <div class="alert alert-warning">
<i class="bi bi-exclamation-triangle me-2"></i> <i class="bi bi-exclamation-triangle me-2"></i>{{ error_message }}
<strong>Warning:</strong> {{ error_message }} </div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %} {% endif %}
{% if logs and logs|length > 0 %} <!-- Log Loading Controls -->
<div class="row mb-3 g-2"> <div class="row mb-3 align-items-end">
<div class="col-auto"> <div class="col-md-6">
<input type="text" class="form-control form-control-sm" id="filter_ip" placeholder="Filter by IP"> <label for="logs_per_page" class="form-label">Logs Per Page</label>
</div> <select class="form-select" id="logs_per_page">
<div class="col-auto"> <option value="25" selected>25</option>
<select class="form-select form-select-sm" id="filter_status" style="width: auto;"> <option value="50">50</option>
<option value="">All Status</option> <option value="100">100</option>
<option value="2">2xx (Success)</option> <option value="200">200</option>
<option value="3">3xx (Redirect)</option>
<option value="4">4xx (Client Error)</option>
<option value="5">5xx (Server Error)</option>
</select> </select>
</div> </div>
<div class="col-auto"> <div class="col-md-6">
<select class="form-select form-select-sm" id="filter_method" style="width: auto;"> <button class="btn btn-primary w-100" id="refresh_logs_btn">
<option value="">All Methods</option> <i class="bi bi-arrow-clockwise me-2"></i>Refresh
<option value="GET">GET</option> </button>
<option value="POST">POST</option>
<option value="PUT">PUT</option>
<option value="DELETE">DELETE</option>
</select>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="filter_threats" checked>
<label class="form-check-label" for="filter_threats" style="margin-top: 5px;">
Show Threats
</label>
</div>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="filter_hide_stats" checked>
<label class="form-check-label" for="filter_hide_stats" style="margin-top: 5px;">
Hide /stats
</label>
</div>
</div>
<div class="col-auto ms-auto">
<button class="btn btn-sm btn-secondary" id="reset_filters">Reset</button>
</div> </div>
</div> </div>
<div class="row mb-3 g-2"> <!-- Statistics -->
<div class="col-md-2"> <div class="alert alert-info">
<div class="card text-center" style="font-size: 0.9rem;"> <i class="bi bi-info-circle me-2"></i>
<div class="card-body p-2"> <strong>Loaded:</strong> <span id="loaded_count">{{ loaded_count|default(0) }}</span> /
<div class="text-muted small">Total</div> <strong>Total:</strong> <span id="total_count">{{ total_logs|default(0) }}</span> logs
<strong id="stat_total">{{ logs|length }}</strong>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card text-center text-danger" style="font-size: 0.9rem;">
<div class="card-body p-2">
<div class="text-muted small">Threats</div>
<strong id="stat_threats">0</strong>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card text-center text-success" style="font-size: 0.9rem;">
<div class="card-body p-2">
<div class="text-muted small">2xx</div>
<strong id="stat_2xx">0</strong>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card text-center text-warning" style="font-size: 0.9rem;">
<div class="card-body p-2">
<div class="text-muted small">4xx</div>
<strong id="stat_4xx">0</strong>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card text-center text-danger" style="font-size: 0.9rem;">
<div class="card-body p-2">
<div class="text-muted small">5xx</div>
<strong id="stat_5xx">0</strong>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card text-center" style="font-size: 0.9rem;">
<div class="card-body p-2">
<div class="text-muted small">Unique IPs</div>
<strong id="stat_ips">0</strong>
</div>
</div>
</div>
</div> </div>
<hr> <!-- Logs Container -->
<div style="max-height: 600px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 4px; background: #f8f9fa;">
<div class="table-responsive"> <table class="table table-sm mb-0">
<table class="table table-striped table-hover"> <tbody id="logs_container">
<thead class="table-dark"> {% if logs %}
{% for entry in logs %}
<tr>
<td>
<small style="font-family: monospace; color: #666;">
<i class="bi bi-clock text-muted me-1"></i>{{ entry.get('timestamp', 'N/A') }}<br>
<span class="text-muted">{{ entry.get('source', 'N/A') }}</span><br>
<code style="color: #333; word-break: break-all; display: block; margin-top: 4px;">
{{ entry.get('message', 'N/A') }}
</code>
</small>
</td>
</tr>
{% endfor %}
{% else %}
<tr> <tr>
<th>Timestamp</th> <td class="text-center text-muted py-4">
<th>IP Address</th> <i class="bi bi-inbox"></i> No logs available
<th>HTTP Method</th>
<th>Requested URL</th>
<th>Status Code</th>
<th>Alerts</th>
</tr>
</thead>
<tbody id="logs_table">
{% for entry in logs %}
<tr class="log-row"
data-ip="{{ entry['ip_address'] }}"
data-status="{{ entry['status_code'] }}"
data-method="{{ entry['http_method'] }}"
data-threats="{% if entry['xss_alert'] or entry['sql_alert'] or entry['put_method'] or entry['webshell_alert'] or entry['illegal_resource'] %}1{% else %}0{% endif %}">
<td>{{ entry['timestamp'] }}</td>
<td>
<span class="badge bg-secondary">{{ entry['ip_address'] }}</span>
</td>
<td>
<span class="badge bg-primary">{{ entry['http_method'] }}</span>
</td>
<td class="text-truncate" style="max-width: 300px;" title="{{ entry['requested_url'] }}">
{{ entry['requested_url'] }}
</td>
<td>
<span class="badge {% if entry['status_code']|int >= 200 and entry['status_code']|int < 300 %}bg-success{% elif entry['status_code']|int >= 300 and entry['status_code']|int < 400 %}bg-secondary{% elif entry['status_code']|int >= 400 and entry['status_code']|int < 500 %}bg-warning{% else %}bg-danger{% endif %}">
{{ entry['status_code'] }}
</span>
</td>
<td>
{% if entry['xss_alert'] %}
<span class="badge bg-danger">XSS</span>
{% endif %}
{% if entry['sql_alert'] %}
<span class="badge bg-danger">SQL</span>
{% endif %}
{% if entry['put_method'] %}
<span class="badge bg-warning">PUT</span>
{% endif %}
{% if entry['webshell_alert'] %}
<span class="badge bg-danger">Webshell</span>
{% endif %}
{% if entry['illegal_resource'] %}
<span class="badge bg-warning">403</span>
{% endif %}
</td> </td>
</tr> </tr>
{% endfor %} {% endif %}
</tbody> </tbody>
</table> </table>
</div> </div>
{% elif logs %}
<div class="alert alert-info">
<i class="bi bi-info-circle me-2"></i>No log entries match your filters.
</div>
{% else %}
<div class="alert alert-danger" role="alert">
<h4 class="alert-heading"><i class="bi bi-exclamation-circle me-2"></i>No logs available</h4>
<hr>
<p class="mb-2"><strong>Possible reasons:</strong></p>
<ul class="mb-0">
<li>Log file does not exist or is not readable</li>
<li>HAProxy is not configured to log requests</li>
<li>Log file path is incorrect in configuration</li>
<li>No requests have been processed yet</li>
</ul>
<hr class="my-2">
<p class="small text-muted mb-0">Check HAProxy configuration and log file permissions.</p>
</div>
{% endif %}
<!-- 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>
</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
</button>
<button class="btn btn-sm 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>
</div>
</div>
</div> </div>
</div> </div>