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

229
templates/logs.html
View File

@@ -8,7 +8,7 @@
<nav aria-label="breadcrumb" class="mb-3">
<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 active" aria-current="page">Access Logs</li>
<li class="breadcrumb-item active" aria-current="page">Logs</li>
</ol>
</nav>
{% endblock %}
@@ -17,192 +17,87 @@
<div class="card shadow-sm mb-4">
<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 class="card-body">
<div class="card-body">
{% if error_message %}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<i class="bi bi-exclamation-triangle me-2"></i>
<strong>Warning:</strong> {{ error_message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning">
<i class="bi bi-exclamation-triangle me-2"></i>{{ error_message }}
</div>
{% endif %}
{% if logs and logs|length > 0 %}
<div class="row mb-3 g-2">
<div class="col-auto">
<input type="text" class="form-control form-control-sm" id="filter_ip" placeholder="Filter by IP">
</div>
<div class="col-auto">
<select class="form-select form-select-sm" id="filter_status" style="width: auto;">
<option value="">All Status</option>
<option value="2">2xx (Success)</option>
<option value="3">3xx (Redirect)</option>
<option value="4">4xx (Client Error)</option>
<option value="5">5xx (Server Error)</option>
<!-- Log Loading Controls -->
<div class="row mb-3 align-items-end">
<div class="col-md-6">
<label for="logs_per_page" class="form-label">Logs Per Page</label>
<select class="form-select" 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>
</select>
</div>
<div class="col-auto">
<select class="form-select form-select-sm" id="filter_method" style="width: auto;">
<option value="">All Methods</option>
<option value="GET">GET</option>
<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 class="col-md-6">
<button class="btn btn-primary w-100" id="refresh_logs_btn">
<i class="bi bi-arrow-clockwise me-2"></i>Refresh
</button>
</div>
</div>
<div class="row mb-3 g-2">
<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">Total</div>
<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>
<!-- Statistics -->
<div class="alert alert-info">
<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
</div>
<hr>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<!-- Logs Container -->
<div style="max-height: 600px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 4px; background: #f8f9fa;">
<table class="table table-sm mb-0">
<tbody id="logs_container">
{% 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>
<th>Timestamp</th>
<th>IP Address</th>
<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 class="text-center text-muted py-4">
<i class="bi bi-inbox"></i> No logs available
</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
</div>
{% elif logs %}
<div class="alert alert-info">
<i class="bi bi-info-circle me-2"></i>No log entries match your filters.
<!-- 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>
{% 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 %}
</div>
</div>
</div>