feat: enhance dashboard with IP category display and improved data tables
This commit is contained in:
@@ -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)
|
||||
]
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
hx-swap="innerHTML">
|
||||
Time
|
||||
</th>
|
||||
<th>Actions</th>
|
||||
<th style="width: 80px;"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
hx-swap="innerHTML">
|
||||
Time
|
||||
</th>
|
||||
<th>Actions</th>
|
||||
<th style="width: 40px;"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
hx-swap="innerHTML">
|
||||
Honeypot Triggers
|
||||
</th>
|
||||
<th>Actions</th>
|
||||
<th style="width: 40px;"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user