feat: enhance dashboard with IP category display and improved data tables

This commit is contained in:
Lorenzo Venerandi
2026-02-28 18:04:26 +01:00
parent d9ae55c0aa
commit 3d8178ff0e
10 changed files with 43 additions and 38 deletions

View File

@@ -1755,14 +1755,19 @@ class DatabaseManager:
offset = (page - 1) * page_size
results = (
session.query(AccessLog.ip, func.count(AccessLog.id).label("count"))
.group_by(AccessLog.ip)
session.query(
AccessLog.ip,
func.count(AccessLog.id).label("count"),
IpStats.category,
)
.outerjoin(IpStats, AccessLog.ip == IpStats.ip)
.group_by(AccessLog.ip, IpStats.category)
.all()
)
# Filter out local/private IPs and server IP, then sort
filtered = [
{"ip": row.ip, "count": row.count}
{"ip": row.ip, "count": row.count, "category": row.category or "unknown"}
for row in results
if is_valid_public_ip(row.ip, server_ip)
]

View File

@@ -41,21 +41,10 @@
</div>
{# ==================== OVERVIEW TAB ==================== #}
<div x-show="tab === 'overview'">
<div x-show="tab === 'overview'" x-init="$nextTick(() => { if (!mapInitialized && typeof initializeAttackerMap === 'function') { initializeAttackerMap(); mapInitialized = true; } })">
{# Suspicious Activity - server-rendered #}
{% include "dashboard/partials/suspicious_table.html" %}
{# Honeypot Triggers - HTMX loaded #}
<div class="table-container alert-section">
<h2>Honeypot Triggers by IP</h2>
<div class="htmx-container"
hx-get="{{ dashboard_path }}/htmx/honeypot?page=1"
hx-trigger="load"
hx-swap="innerHTML">
<div class="htmx-indicator">Loading...</div>
</div>
</div>
{# Map section #}
{% include "dashboard/partials/map_section.html" %}
{# Top IPs + Top User-Agents side by side #}
<div style="display: flex; gap: 20px; flex-wrap: wrap;">
@@ -89,14 +78,14 @@
<div class="htmx-indicator">Loading...</div>
</div>
</div>
{# Suspicious Activity - server-rendered #}
{% include "dashboard/partials/suspicious_table.html" %}
</div>
{# ==================== ATTACKS TAB ==================== #}
<div x-show="tab === 'attacks'" x-cloak>
{# Map section #}
{% include "dashboard/partials/map_section.html" %}
{# Attackers table - HTMX loaded #}
<div class="table-container alert-section">
<h2>Attackers by Total Requests</h2>
@@ -119,6 +108,17 @@
</div>
</div>
{# Honeypot Triggers - HTMX loaded #}
<div class="table-container alert-section">
<h2>Honeypot Triggers by IP</h2>
<div class="htmx-container"
hx-get="{{ dashboard_path }}/htmx/honeypot?page=1"
hx-trigger="revealed"
hx-swap="innerHTML">
<div class="htmx-indicator">Loading...</div>
</div>
</div>
{# Attack Types table #}
<div class="table-container alert-section">
<h2>Detected Attack Types</h2>

View File

@@ -26,7 +26,7 @@
hx-swap="innerHTML">
Time
</th>
<th>Actions</th>
<th style="width: 100px;"></th>
</tr>
</thead>
<tbody>
@@ -50,14 +50,14 @@
</td>
</tr>
<tr class="ip-stats-row" style="display: none;">
<td colspan="7" class="ip-stats-cell">
<td colspan="5" class="ip-stats-cell">
<div class="ip-stats-dropdown">
<div class="loading">Loading stats...</div>
</div>
</td>
</tr>
{% else %}
<tr><td colspan="7" style="text-align: center;">No logs detected</td></tr>
<tr><td colspan="5" style="text-align: center;">No logs detected</td></tr>
{% endfor %}
</tbody>
</table>

View File

@@ -28,7 +28,7 @@
hx-swap="innerHTML">
Time
</th>
<th>Actions</th>
<th style="width: 80px;"></th>
</tr>
</thead>
<tbody>

View File

@@ -28,7 +28,7 @@
<th>First Seen</th>
<th>Last Seen</th>
<th>Location</th>
<th>Actions</th>
<th style="width: 40px;"></th>
</tr>
</thead>
<tbody>

View File

@@ -28,7 +28,7 @@
hx-swap="innerHTML">
Time
</th>
<th>Actions</th>
<th style="width: 40px;"></th>
</tr>
</thead>
<tbody>

View File

@@ -25,7 +25,7 @@
hx-swap="innerHTML">
Honeypot Triggers
</th>
<th>Actions</th>
<th style="width: 40px;"></th>
</tr>
</thead>
<tbody>

View File

@@ -8,7 +8,7 @@
<th>Path</th>
<th>User-Agent</th>
<th>Time</th>
<th>Actions</th>
<th style="width: 40px;"></th>
</tr>
</thead>
<tbody>

View File

@@ -19,13 +19,14 @@
<tr>
<th>#</th>
<th>IP Address</th>
<th>Category</th>
<th class="sortable {% if sort_by == 'count' %}{{ sort_order }}{% endif %}"
hx-get="{{ dashboard_path }}/htmx/top-ips?page=1&sort_by=count&sort_order={% if sort_by == 'count' and sort_order == 'desc' %}asc{% else %}desc{% endif %}"
hx-target="closest .htmx-container"
hx-swap="innerHTML">
Access Count
</th>
<th>Actions</th>
<th style="width: 40px;"></th>
</tr>
</thead>
<tbody>
@@ -39,6 +40,11 @@
@click="toggleIpDetail($event)">
{{ item.ip | e }}
</td>
<td>
{% set cat = item.category | default('unknown') %}
{% set cat_colors = {'attacker': '#f85149', 'good_crawler': '#3fb950', 'bad_crawler': '#f0883e', 'regular_user': '#58a6ff', 'unknown': '#8b949e'} %}
<span class="category-dot" style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: {{ cat_colors.get(cat, '#8b949e') }};" title="{{ cat | replace('_', ' ') | title }}"></span>
</td>
<td>{{ item.count }}</td>
<td>
<button class="inspect-btn" @click="openIpInsight('{{ item.ip | e }}')" title="Inspect IP">
@@ -47,14 +53,14 @@
</td>
</tr>
<tr class="ip-stats-row" style="display: none;">
<td colspan="4" class="ip-stats-cell">
<td colspan="5" class="ip-stats-cell">
<div class="ip-stats-dropdown">
<div class="loading">Loading stats...</div>
</div>
</td>
</tr>
{% else %}
<tr><td colspan="4" style="text-align: center;">No data</td></tr>
<tr><td colspan="5" style="text-align: center;">No data</td></tr>
{% endfor %}
</tbody>
</table>

View File

@@ -45,15 +45,9 @@ document.addEventListener('alpine:init', () => {
this.tab = 'attacks';
window.location.hash = '#ip-stats';
// Delay initialization to ensure the container is visible and
// the browser has reflowed after x-show removes display:none.
// Leaflet and Chart.js need visible containers with real dimensions.
// Delay chart initialization to ensure the container is visible
this.$nextTick(() => {
setTimeout(() => {
if (!this.mapInitialized && typeof initializeAttackerMap === 'function') {
initializeAttackerMap();
this.mapInitialized = true;
}
if (!this.chartLoaded && typeof loadAttackTypesChart === 'function') {
loadAttackTypesChart();
this.chartLoaded = true;