starting full refactor with FastAPI routes + HTMX and AlpineJS on client side
This commit is contained in:
Lorenzo Venerandi
25
src/templates/jinja2/base.html
Normal file
25
src/templates/jinja2/base.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Krawl Dashboard</title>
|
||||
<link rel="icon" type="image/svg+xml" href="{{ dashboard_path }}/static/krawl-svg.svg" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" integrity="sha512-Zcn6bjR/8RZbLEDCR/+3GDRsl0DGPhkLoMo8gbyEVYMlkNaPKtePPkWOxjPQa28ZO1JXDUQWKCE3LR24w4IXw==" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="{{ dashboard_path }}/static/css/dashboard.css" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" integrity="sha512-puJW3E/qXDqYp9IfhAI54BJEaWIfloJ7JWs7OeD5i6ruC9JZL1gERT1wjfqERvhY7Io5heNHGE27F2MUOTM4A==" crossorigin="anonymous" defer></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" defer></script>
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4" defer></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
|
||||
<script>window.__DASHBOARD_PATH__ = '{{ dashboard_path }}';</script>
|
||||
</head>
|
||||
<body>
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
<script src="{{ dashboard_path }}/static/js/radar.js"></script>
|
||||
<script src="{{ dashboard_path }}/static/js/dashboard.js"></script>
|
||||
<script src="{{ dashboard_path }}/static/js/map.js"></script>
|
||||
<script src="{{ dashboard_path }}/static/js/charts.js"></script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
154
src/templates/jinja2/dashboard/index.html
Normal file
154
src/templates/jinja2/dashboard/index.html
Normal file
@@ -0,0 +1,154 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container" x-data="dashboardApp()" x-init="init()">
|
||||
|
||||
{# GitHub logo #}
|
||||
<a href="https://github.com/BlessedRebuS/Krawl" target="_blank" class="github-logo">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
|
||||
<span class="github-logo-text">Krawl</span>
|
||||
</a>
|
||||
|
||||
{# Banlist export dropdown - Alpine.js #}
|
||||
<div class="download-section">
|
||||
<div class="banlist-dropdown" @click.outside="banlistOpen = false">
|
||||
<button class="banlist-dropdown-btn" @click="banlistOpen = !banlistOpen">
|
||||
Export IPs Banlist ▾
|
||||
</button>
|
||||
<div class="banlist-dropdown-menu" :class="{ 'show': banlistOpen }">
|
||||
<a :href="dashboardPath + '/api/get_banlist?fwtype=raw'" download>
|
||||
<span class="banlist-icon">📄</span> Raw IPs List
|
||||
</a>
|
||||
<a :href="dashboardPath + '/api/get_banlist?fwtype=iptables'" download>
|
||||
<span class="banlist-icon">🔥</span> IPTables Rules
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Krawl Dashboard</h1>
|
||||
|
||||
{# Stats cards - server-rendered #}
|
||||
{% include "dashboard/partials/stats_cards.html" %}
|
||||
|
||||
{# Tab navigation - Alpine.js #}
|
||||
<div class="tabs-container">
|
||||
<a class="tab-button" :class="{ active: tab === 'overview' }" @click.prevent="switchToOverview()" href="#overview">Overview</a>
|
||||
<a class="tab-button" :class="{ active: tab === 'attacks' }" @click.prevent="switchToAttacks()" href="#ip-stats">Attacks</a>
|
||||
</div>
|
||||
|
||||
{# ==================== OVERVIEW TAB ==================== #}
|
||||
<div x-show="tab === 'overview'">
|
||||
|
||||
{# 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>
|
||||
|
||||
{# Top IPs + Top User-Agents side by side #}
|
||||
<div style="display: flex; gap: 20px; flex-wrap: wrap;">
|
||||
<div class="table-container" style="flex: 1; min-width: 300px;">
|
||||
<h2>Top IP Addresses</h2>
|
||||
<div class="htmx-container"
|
||||
hx-get="{{ dashboard_path }}/htmx/top-ips?page=1"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
<div class="htmx-indicator">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-container" style="flex: 1; min-width: 300px;">
|
||||
<h2>Top User-Agents</h2>
|
||||
<div class="htmx-container"
|
||||
hx-get="{{ dashboard_path }}/htmx/top-ua?page=1"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
<div class="htmx-indicator">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Top Paths #}
|
||||
<div class="table-container">
|
||||
<h2>Top Paths</h2>
|
||||
<div class="htmx-container"
|
||||
hx-get="{{ dashboard_path }}/htmx/top-paths?page=1"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
<div class="htmx-indicator">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<div class="htmx-container"
|
||||
hx-get="{{ dashboard_path }}/htmx/attackers?page=1"
|
||||
hx-trigger="revealed"
|
||||
hx-swap="innerHTML">
|
||||
<div class="htmx-indicator">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Credentials table #}
|
||||
<div class="table-container alert-section">
|
||||
<h2>Captured Credentials</h2>
|
||||
<div class="htmx-container"
|
||||
hx-get="{{ dashboard_path }}/htmx/credentials?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>
|
||||
<div class="htmx-container"
|
||||
hx-get="{{ dashboard_path }}/htmx/attacks?page=1"
|
||||
hx-trigger="revealed"
|
||||
hx-swap="innerHTML">
|
||||
<div class="htmx-indicator">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Charts + Patterns side by side #}
|
||||
<div class="charts-container">
|
||||
<div class="table-container chart-section">
|
||||
<h2>Most Recurring Attack Types</h2>
|
||||
<div class="chart-wrapper">
|
||||
<canvas id="attack-types-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-container chart-section">
|
||||
<h2>Most Recurring Attack Patterns</h2>
|
||||
<div class="htmx-container"
|
||||
hx-get="{{ dashboard_path }}/htmx/patterns?page=1"
|
||||
hx-trigger="revealed"
|
||||
hx-swap="innerHTML">
|
||||
<div class="htmx-indicator">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Raw request modal - Alpine.js #}
|
||||
{% include "dashboard/partials/raw_request_modal.html" %}
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,80 @@
|
||||
{# HTMX fragment: Detected Attack Types table #}
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||
<span class="pagination-info">Page {{ pagination.page }}/{{ pagination.total_pages }} — {{ pagination.total }} total</span>
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<button class="pagination-btn"
|
||||
hx-get="{{ dashboard_path }}/htmx/attacks?page={{ pagination.page - 1 }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if pagination.page <= 1 %}disabled{% endif %}>Prev</button>
|
||||
<button class="pagination-btn"
|
||||
hx-get="{{ dashboard_path }}/htmx/attacks?page={{ pagination.page + 1 }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if pagination.page >= pagination.total_pages %}disabled{% endif %}>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>IP Address</th>
|
||||
<th>Path</th>
|
||||
<th>Attack Types</th>
|
||||
<th>User-Agent</th>
|
||||
<th class="sortable {% if sort_by == 'timestamp' %}{{ sort_order }}{% endif %}"
|
||||
hx-get="{{ dashboard_path }}/htmx/attacks?page=1&sort_by=timestamp&sort_order={% if sort_by == 'timestamp' and sort_order == 'desc' %}asc{% else %}desc{% endif %}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML">
|
||||
Time
|
||||
</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for attack in items %}
|
||||
<tr class="ip-row" data-ip="{{ attack.ip | e }}">
|
||||
<td class="rank">{{ loop.index + (pagination.page - 1) * pagination.page_size }}</td>
|
||||
<td class="ip-clickable"
|
||||
hx-get="{{ dashboard_path }}/htmx/ip-detail/{{ attack.ip | e }}"
|
||||
hx-target="next .ip-stats-row .ip-stats-dropdown"
|
||||
hx-swap="innerHTML"
|
||||
@click="toggleIpDetail($event)">
|
||||
{{ attack.ip | e }}
|
||||
</td>
|
||||
<td>
|
||||
<div class="path-cell-container">
|
||||
<span class="path-truncated">{{ attack.path | e }}</span>
|
||||
{% if attack.path | length > 30 %}
|
||||
<div class="path-tooltip">{{ attack.path | e }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="attack-types-cell">
|
||||
<span class="attack-types-truncated">{{ attack.attack_type | e }}</span>
|
||||
{% if attack.attack_type | length > 30 %}
|
||||
<div class="attack-types-tooltip">{{ attack.attack_type | e }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ (attack.user_agent | default(''))[:50] | e }}</td>
|
||||
<td>{{ attack.timestamp | format_ts }}</td>
|
||||
<td>
|
||||
{% if attack.log_id %}
|
||||
<button class="view-btn" @click="viewRawRequest({{ attack.log_id }})">View Request</button>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="ip-stats-row" style="display: none;">
|
||||
<td colspan="7" 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 attacks detected</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
60
src/templates/jinja2/dashboard/partials/attackers_table.html
Normal file
60
src/templates/jinja2/dashboard/partials/attackers_table.html
Normal file
@@ -0,0 +1,60 @@
|
||||
{# HTMX fragment: Attackers table #}
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||
<span class="pagination-info">Page {{ pagination.page }}/{{ pagination.total_pages }} — {{ pagination.total }} attackers</span>
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<button class="pagination-btn"
|
||||
hx-get="{{ dashboard_path }}/htmx/attackers?page={{ pagination.page - 1 }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if pagination.page <= 1 %}disabled{% endif %}>Prev</button>
|
||||
<button class="pagination-btn"
|
||||
hx-get="{{ dashboard_path }}/htmx/attackers?page={{ pagination.page + 1 }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if pagination.page >= pagination.total_pages %}disabled{% endif %}>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<table class="ip-stats-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>IP Address</th>
|
||||
<th class="sortable {% if sort_by == 'total_requests' %}{{ sort_order }}{% endif %}"
|
||||
hx-get="{{ dashboard_path }}/htmx/attackers?page=1&sort_by=total_requests&sort_order={% if sort_by == 'total_requests' and sort_order == 'desc' %}asc{% else %}desc{% endif %}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML">
|
||||
Total Requests
|
||||
</th>
|
||||
<th>First Seen</th>
|
||||
<th>Last Seen</th>
|
||||
<th>Location</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for ip in items %}
|
||||
<tr class="ip-row" data-ip="{{ ip.ip | e }}">
|
||||
<td class="rank">{{ loop.index + (pagination.page - 1) * pagination.page_size }}</td>
|
||||
<td class="ip-clickable"
|
||||
hx-get="{{ dashboard_path }}/htmx/ip-detail/{{ ip.ip | e }}"
|
||||
hx-target="next .ip-stats-row .ip-stats-dropdown"
|
||||
hx-swap="innerHTML"
|
||||
@click="toggleIpDetail($event)">
|
||||
{{ ip.ip | e }}
|
||||
</td>
|
||||
<td>{{ ip.total_requests }}</td>
|
||||
<td>{{ ip.first_seen | format_ts }}</td>
|
||||
<td>{{ ip.last_seen | format_ts }}</td>
|
||||
<td>{{ ip.city | default('') | e }}{% if ip.city and ip.country_code %}, {% endif %}{{ ip.country_code | default('N/A') | e }}</td>
|
||||
</tr>
|
||||
<tr class="ip-stats-row" style="display: none;">
|
||||
<td colspan="6" class="ip-stats-cell">
|
||||
<div class="ip-stats-dropdown">
|
||||
<div class="loading">Loading stats...</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="6" style="text-align: center;">No attackers found</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -0,0 +1,60 @@
|
||||
{# HTMX fragment: Captured Credentials table #}
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||
<span class="pagination-info">Page {{ pagination.page }}/{{ pagination.total_pages }} — {{ pagination.total }} total</span>
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<button class="pagination-btn"
|
||||
hx-get="{{ dashboard_path }}/htmx/credentials?page={{ pagination.page - 1 }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if pagination.page <= 1 %}disabled{% endif %}>Prev</button>
|
||||
<button class="pagination-btn"
|
||||
hx-get="{{ dashboard_path }}/htmx/credentials?page={{ pagination.page + 1 }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if pagination.page >= pagination.total_pages %}disabled{% endif %}>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>IP Address</th>
|
||||
<th>Username</th>
|
||||
<th>Password</th>
|
||||
<th>Path</th>
|
||||
<th class="sortable {% if sort_by == 'timestamp' %}{{ sort_order }}{% endif %}"
|
||||
hx-get="{{ dashboard_path }}/htmx/credentials?page=1&sort_by=timestamp&sort_order={% if sort_by == 'timestamp' and sort_order == 'desc' %}asc{% else %}desc{% endif %}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML">
|
||||
Time
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for cred in items %}
|
||||
<tr class="ip-row" data-ip="{{ cred.ip | e }}">
|
||||
<td class="rank">{{ loop.index + (pagination.page - 1) * pagination.page_size }}</td>
|
||||
<td class="ip-clickable"
|
||||
hx-get="{{ dashboard_path }}/htmx/ip-detail/{{ cred.ip | e }}"
|
||||
hx-target="next .ip-stats-row .ip-stats-dropdown"
|
||||
hx-swap="innerHTML"
|
||||
@click="toggleIpDetail($event)">
|
||||
{{ cred.ip | e }}
|
||||
</td>
|
||||
<td>{{ cred.username | default('N/A') | e }}</td>
|
||||
<td>{{ cred.password | default('N/A') | e }}</td>
|
||||
<td>{{ cred.path | default('') | e }}</td>
|
||||
<td>{{ cred.timestamp | format_ts }}</td>
|
||||
</tr>
|
||||
<tr class="ip-stats-row" style="display: none;">
|
||||
<td colspan="6" class="ip-stats-cell">
|
||||
<div class="ip-stats-dropdown">
|
||||
<div class="loading">Loading stats...</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="6" style="text-align: center;">No credentials captured</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
54
src/templates/jinja2/dashboard/partials/honeypot_table.html
Normal file
54
src/templates/jinja2/dashboard/partials/honeypot_table.html
Normal file
@@ -0,0 +1,54 @@
|
||||
{# HTMX fragment: Honeypot triggers table #}
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||
<span class="pagination-info">Page {{ pagination.page }}/{{ pagination.total_pages }} — {{ pagination.total }} total</span>
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<button class="pagination-btn"
|
||||
hx-get="{{ dashboard_path }}/htmx/honeypot?page={{ pagination.page - 1 }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if pagination.page <= 1 %}disabled{% endif %}>Prev</button>
|
||||
<button class="pagination-btn"
|
||||
hx-get="{{ dashboard_path }}/htmx/honeypot?page={{ pagination.page + 1 }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if pagination.page >= pagination.total_pages %}disabled{% endif %}>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>IP Address</th>
|
||||
<th class="sortable {% if sort_by == 'count' %}{{ sort_order }}{% endif %}"
|
||||
hx-get="{{ dashboard_path }}/htmx/honeypot?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">
|
||||
Honeypot Triggers
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in items %}
|
||||
<tr class="ip-row" data-ip="{{ item.ip | e }}">
|
||||
<td class="rank">{{ loop.index + (pagination.page - 1) * pagination.page_size }}</td>
|
||||
<td class="ip-clickable"
|
||||
hx-get="{{ dashboard_path }}/htmx/ip-detail/{{ item.ip | e }}"
|
||||
hx-target="next .ip-stats-row .ip-stats-dropdown"
|
||||
hx-swap="innerHTML"
|
||||
@click="toggleIpDetail($event)">
|
||||
{{ item.ip | e }}
|
||||
</td>
|
||||
<td>{{ item.count }}</td>
|
||||
</tr>
|
||||
<tr class="ip-stats-row" style="display: none;">
|
||||
<td colspan="3" class="ip-stats-cell">
|
||||
<div class="ip-stats-dropdown">
|
||||
<div class="loading">Loading stats...</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="3" style="text-align: center;">No data</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
138
src/templates/jinja2/dashboard/partials/ip_detail.html
Normal file
138
src/templates/jinja2/dashboard/partials/ip_detail.html
Normal file
@@ -0,0 +1,138 @@
|
||||
{# HTMX fragment: IP detail expansion row content #}
|
||||
{# Replaces the ~250 line formatIpStats() JavaScript function #}
|
||||
<div class="stats-left">
|
||||
<div class="stat-row">
|
||||
<span class="stat-label-sm">Total Requests:</span>
|
||||
<span class="stat-value-sm">{{ stats.total_requests | default('N/A') }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label-sm">First Seen:</span>
|
||||
<span class="stat-value-sm">{{ stats.first_seen | format_ts }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label-sm">Last Seen:</span>
|
||||
<span class="stat-value-sm">{{ stats.last_seen | format_ts }}</span>
|
||||
</div>
|
||||
{% if stats.city or stats.country_code %}
|
||||
<div class="stat-row">
|
||||
<span class="stat-label-sm">Location:</span>
|
||||
<span class="stat-value-sm">{{ stats.city | default('') }}{% if stats.city and stats.country_code %}, {% endif %}{{ stats.country_code | default('') }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if stats.reverse_dns %}
|
||||
<div class="stat-row">
|
||||
<span class="stat-label-sm">Reverse DNS:</span>
|
||||
<span class="stat-value-sm">{{ stats.reverse_dns | e }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if stats.asn_org %}
|
||||
<div class="stat-row">
|
||||
<span class="stat-label-sm">ASN Org:</span>
|
||||
<span class="stat-value-sm">{{ stats.asn_org | e }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if stats.asn %}
|
||||
<div class="stat-row">
|
||||
<span class="stat-label-sm">ASN:</span>
|
||||
<span class="stat-value-sm">{{ stats.asn | e }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if stats.isp %}
|
||||
<div class="stat-row">
|
||||
<span class="stat-label-sm">ISP:</span>
|
||||
<span class="stat-value-sm">{{ stats.isp | e }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Flags #}
|
||||
{% set flags = [] %}
|
||||
{% if stats.is_proxy %}{% set _ = flags.append('Proxy') %}{% endif %}
|
||||
{% if stats.is_hosting %}{% set _ = flags.append('Hosting') %}{% endif %}
|
||||
{% if flags %}
|
||||
<div class="stat-row">
|
||||
<span class="stat-label-sm">Flags:</span>
|
||||
<span class="stat-value-sm">{{ flags | join(', ') }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if stats.reputation_score is not none %}
|
||||
<div class="stat-row">
|
||||
<span class="stat-label-sm">Reputation Score:</span>
|
||||
<span class="stat-value-sm" style="color: {% if stats.reputation_score <= 30 %}#f85149{% elif stats.reputation_score <= 60 %}#f0883e{% else %}#3fb950{% endif %}">
|
||||
{{ stats.reputation_score }}/100
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if stats.category %}
|
||||
<div class="stat-row">
|
||||
<span class="stat-label-sm">Category:</span>
|
||||
<span class="category-badge category-{{ stats.category | lower | replace('_', '-') }}">
|
||||
{{ stats.category | replace('_', ' ') | title }}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Timeline + Reputation section #}
|
||||
{% if stats.category_history or stats.blocklist_memberships %}
|
||||
<div class="timeline-section">
|
||||
<div class="timeline-container">
|
||||
{# Behavior Timeline #}
|
||||
{% if stats.category_history %}
|
||||
<div class="timeline-column">
|
||||
<div class="timeline-header">Behavior Timeline</div>
|
||||
<div class="timeline">
|
||||
{% for entry in stats.category_history %}
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker {{ entry.new_category | default('unknown') | replace('_', '-') }}"></div>
|
||||
<div>
|
||||
<strong>{{ entry.new_category | default('unknown') | replace('_', ' ') | title }}</strong>
|
||||
{% if entry.old_category %}<span style="color: #8b949e;"> from {{ entry.old_category | replace('_', ' ') | title }}</span>{% endif %}
|
||||
<br><span style="color: #8b949e; font-size: 11px;">{{ entry.timestamp | format_ts }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Reputation / Listed On #}
|
||||
<div class="timeline-column">
|
||||
<div class="timeline-header">Reputation</div>
|
||||
{% if stats.blocklist_memberships %}
|
||||
<div class="reputation-title">Listed On</div>
|
||||
{% for bl in stats.blocklist_memberships %}
|
||||
<span class="reputation-badge">{{ bl | e }}</span>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<span class="reputation-clean">Clean - Not listed on any blocklists</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Radar chart (right side) #}
|
||||
{% if stats.category_scores %}
|
||||
<div class="stats-right">
|
||||
<div class="radar-chart" id="radar-{{ stats.ip | default('') | replace('.', '-') | replace(':', '-') }}">
|
||||
<script>
|
||||
(function() {
|
||||
const scores = {{ stats.category_scores | tojson }};
|
||||
const container = document.getElementById('radar-{{ stats.ip | default("") | replace(".", "-") | replace(":", "-") }}');
|
||||
if (container && typeof generateRadarChart === 'function') {
|
||||
container.innerHTML = generateRadarChart(scores, 200);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
<div class="radar-legend">
|
||||
<div class="radar-legend-item"><div class="radar-legend-color" style="background: #f85149;"></div> Attacker</div>
|
||||
<div class="radar-legend-item"><div class="radar-legend-color" style="background: #3fb950;"></div> Good Bot</div>
|
||||
<div class="radar-legend-item"><div class="radar-legend-color" style="background: #f0883e;"></div> Bad Bot</div>
|
||||
<div class="radar-legend-item"><div class="radar-legend-color" style="background: #58a6ff;"></div> Regular</div>
|
||||
<div class="radar-legend-item"><div class="radar-legend-color" style="background: #8b949e;"></div> Unknown</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
27
src/templates/jinja2/dashboard/partials/map_section.html
Normal file
27
src/templates/jinja2/dashboard/partials/map_section.html
Normal file
@@ -0,0 +1,27 @@
|
||||
{# Map section with filter checkboxes #}
|
||||
<div class="table-container">
|
||||
<h2>IP Origins Map</h2>
|
||||
<div style="margin-bottom: 10px; display: flex; gap: 15px; flex-wrap: wrap; align-items: center;">
|
||||
<label style="display: flex; align-items: center; gap: 4px; cursor: pointer;">
|
||||
<input type="checkbox" checked onchange="if(typeof updateMapFilters==='function') updateMapFilters()" class="map-filter" data-category="attacker">
|
||||
<span style="color: #f85149;">Attackers</span>
|
||||
</label>
|
||||
<label style="display: flex; align-items: center; gap: 4px; cursor: pointer;">
|
||||
<input type="checkbox" checked onchange="if(typeof updateMapFilters==='function') updateMapFilters()" class="map-filter" data-category="bad_crawler">
|
||||
<span style="color: #f0883e;">Bad Crawlers</span>
|
||||
</label>
|
||||
<label style="display: flex; align-items: center; gap: 4px; cursor: pointer;">
|
||||
<input type="checkbox" checked onchange="if(typeof updateMapFilters==='function') updateMapFilters()" class="map-filter" data-category="good_crawler">
|
||||
<span style="color: #3fb950;">Good Crawlers</span>
|
||||
</label>
|
||||
<label style="display: flex; align-items: center; gap: 4px; cursor: pointer;">
|
||||
<input type="checkbox" checked onchange="if(typeof updateMapFilters==='function') updateMapFilters()" class="map-filter" data-category="regular_user">
|
||||
<span style="color: #58a6ff;">Regular Users</span>
|
||||
</label>
|
||||
<label style="display: flex; align-items: center; gap: 4px; cursor: pointer;">
|
||||
<input type="checkbox" checked onchange="if(typeof updateMapFilters==='function') updateMapFilters()" class="map-filter" data-category="unknown">
|
||||
<span style="color: #8b949e;">Unknown</span>
|
||||
</label>
|
||||
</div>
|
||||
<div id="attacker-map" style="height: 450px; border-radius: 6px; border: 1px solid #30363d;"></div>
|
||||
</div>
|
||||
43
src/templates/jinja2/dashboard/partials/patterns_table.html
Normal file
43
src/templates/jinja2/dashboard/partials/patterns_table.html
Normal file
@@ -0,0 +1,43 @@
|
||||
{# HTMX fragment: Attack Patterns table #}
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||
<span class="pagination-info">Page {{ pagination.page }}/{{ pagination.total_pages }} — {{ pagination.total }} patterns</span>
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<button class="pagination-btn"
|
||||
hx-get="{{ dashboard_path }}/htmx/patterns?page={{ pagination.page - 1 }}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if pagination.page <= 1 %}disabled{% endif %}>Prev</button>
|
||||
<button class="pagination-btn"
|
||||
hx-get="{{ dashboard_path }}/htmx/patterns?page={{ pagination.page + 1 }}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if pagination.page >= pagination.total_pages %}disabled{% endif %}>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Attack Pattern</th>
|
||||
<th>Occurrences</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for pattern in items %}
|
||||
<tr>
|
||||
<td class="rank">{{ loop.index + (pagination.page - 1) * pagination.page_size }}</td>
|
||||
<td>
|
||||
<div class="attack-types-cell">
|
||||
<span class="attack-types-truncated">{{ pattern.pattern | e }}</span>
|
||||
{% if pattern.pattern | length > 40 %}
|
||||
<div class="attack-types-tooltip">{{ pattern.pattern | e }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ pattern.count }}</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="3" style="text-align: center;">No patterns found</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -0,0 +1,20 @@
|
||||
{# Raw request viewer modal - Alpine.js controlled #}
|
||||
<div class="raw-request-modal"
|
||||
x-show="rawModal.show"
|
||||
x-cloak
|
||||
@click.self="closeRawModal()"
|
||||
@keydown.escape.window="closeRawModal()"
|
||||
:style="rawModal.show ? 'display: block' : 'display: none'">
|
||||
<div class="raw-request-modal-content">
|
||||
<div class="raw-request-modal-header">
|
||||
<h3>Raw HTTP Request</h3>
|
||||
<span class="raw-request-modal-close" @click="closeRawModal()">×</span>
|
||||
</div>
|
||||
<div class="raw-request-modal-body">
|
||||
<pre class="raw-request-content" x-text="rawModal.content"></pre>
|
||||
</div>
|
||||
<div class="raw-request-modal-footer">
|
||||
<button class="raw-request-download-btn" @click="downloadRawRequest()">Download as .txt</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
31
src/templates/jinja2/dashboard/partials/stats_cards.html
Normal file
31
src/templates/jinja2/dashboard/partials/stats_cards.html
Normal file
@@ -0,0 +1,31 @@
|
||||
{# Stats cards - server-rendered on initial page load #}
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ stats.total_accesses }}</div>
|
||||
<div class="stat-label">Total Accesses</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ stats.unique_ips }}</div>
|
||||
<div class="stat-label">Unique IPs</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ stats.unique_paths }}</div>
|
||||
<div class="stat-label">Unique Paths</div>
|
||||
</div>
|
||||
<div class="stat-card alert">
|
||||
<div class="stat-value alert">{{ stats.suspicious_accesses }}</div>
|
||||
<div class="stat-label">Suspicious Accesses</div>
|
||||
</div>
|
||||
<div class="stat-card alert">
|
||||
<div class="stat-value alert">{{ stats.honeypot_ips | default(0) }}</div>
|
||||
<div class="stat-label">Honeypot Caught</div>
|
||||
</div>
|
||||
<div class="stat-card alert">
|
||||
<div class="stat-value alert">{{ stats.credential_count | default(0) }}</div>
|
||||
<div class="stat-label">Credentials Captured</div>
|
||||
</div>
|
||||
<div class="stat-card alert">
|
||||
<div class="stat-value alert">{{ stats.unique_attackers | default(0) }}</div>
|
||||
<div class="stat-label">Unique Attackers</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,39 @@
|
||||
{# Recent Suspicious Activity - server-rendered on page load #}
|
||||
<div class="table-container alert-section">
|
||||
<h2>Recent Suspicious Activity</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>IP Address</th>
|
||||
<th>Path</th>
|
||||
<th>User-Agent</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for activity in suspicious_activities %}
|
||||
<tr class="ip-row" data-ip="{{ activity.ip | e }}">
|
||||
<td class="ip-clickable"
|
||||
hx-get="{{ dashboard_path }}/htmx/ip-detail/{{ activity.ip | e }}"
|
||||
hx-target="next .ip-stats-row .ip-stats-dropdown"
|
||||
hx-swap="innerHTML"
|
||||
@click="toggleIpDetail($event)">
|
||||
{{ activity.ip | e }}
|
||||
</td>
|
||||
<td>{{ activity.path | e }}</td>
|
||||
<td style="word-break: break-all;">{{ (activity.user_agent | default(''))[:80] | e }}</td>
|
||||
<td>{{ activity.timestamp | format_ts(time_only=True) }}</td>
|
||||
</tr>
|
||||
<tr class="ip-stats-row" style="display: none;">
|
||||
<td colspan="4" 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 suspicious activity detected</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
54
src/templates/jinja2/dashboard/partials/top_ips_table.html
Normal file
54
src/templates/jinja2/dashboard/partials/top_ips_table.html
Normal file
@@ -0,0 +1,54 @@
|
||||
{# HTMX fragment: Top IPs table #}
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||
<span class="pagination-info">Page {{ pagination.page }}/{{ pagination.total_pages }} — {{ pagination.total }} total</span>
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<button class="pagination-btn"
|
||||
hx-get="{{ dashboard_path }}/htmx/top-ips?page={{ pagination.page - 1 }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if pagination.page <= 1 %}disabled{% endif %}>Prev</button>
|
||||
<button class="pagination-btn"
|
||||
hx-get="{{ dashboard_path }}/htmx/top-ips?page={{ pagination.page + 1 }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if pagination.page >= pagination.total_pages %}disabled{% endif %}>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>IP Address</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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in items %}
|
||||
<tr class="ip-row" data-ip="{{ item.ip | e }}">
|
||||
<td class="rank">{{ loop.index + (pagination.page - 1) * pagination.page_size }}</td>
|
||||
<td class="ip-clickable"
|
||||
hx-get="{{ dashboard_path }}/htmx/ip-detail/{{ item.ip | e }}"
|
||||
hx-target="next .ip-stats-row .ip-stats-dropdown"
|
||||
hx-swap="innerHTML"
|
||||
@click="toggleIpDetail($event)">
|
||||
{{ item.ip | e }}
|
||||
</td>
|
||||
<td>{{ item.count }}</td>
|
||||
</tr>
|
||||
<tr class="ip-stats-row" style="display: none;">
|
||||
<td colspan="3" class="ip-stats-cell">
|
||||
<div class="ip-stats-dropdown">
|
||||
<div class="loading">Loading stats...</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="3" style="text-align: center;">No data</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
41
src/templates/jinja2/dashboard/partials/top_paths_table.html
Normal file
41
src/templates/jinja2/dashboard/partials/top_paths_table.html
Normal file
@@ -0,0 +1,41 @@
|
||||
{# HTMX fragment: Top Paths table #}
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||
<span class="pagination-info">Page {{ pagination.page }}/{{ pagination.total_pages }} — {{ pagination.total }} total</span>
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<button class="pagination-btn"
|
||||
hx-get="{{ dashboard_path }}/htmx/top-paths?page={{ pagination.page - 1 }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if pagination.page <= 1 %}disabled{% endif %}>Prev</button>
|
||||
<button class="pagination-btn"
|
||||
hx-get="{{ dashboard_path }}/htmx/top-paths?page={{ pagination.page + 1 }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if pagination.page >= pagination.total_pages %}disabled{% endif %}>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Path</th>
|
||||
<th class="sortable {% if sort_by == 'count' %}{{ sort_order }}{% endif %}"
|
||||
hx-get="{{ dashboard_path }}/htmx/top-paths?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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in items %}
|
||||
<tr>
|
||||
<td class="rank">{{ loop.index + (pagination.page - 1) * pagination.page_size }}</td>
|
||||
<td>{{ item.path | e }}</td>
|
||||
<td>{{ item.count }}</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="3" style="text-align: center;">No data</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
41
src/templates/jinja2/dashboard/partials/top_ua_table.html
Normal file
41
src/templates/jinja2/dashboard/partials/top_ua_table.html
Normal file
@@ -0,0 +1,41 @@
|
||||
{# HTMX fragment: Top User-Agents table #}
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||
<span class="pagination-info">Page {{ pagination.page }}/{{ pagination.total_pages }} — {{ pagination.total }} total</span>
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<button class="pagination-btn"
|
||||
hx-get="{{ dashboard_path }}/htmx/top-ua?page={{ pagination.page - 1 }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if pagination.page <= 1 %}disabled{% endif %}>Prev</button>
|
||||
<button class="pagination-btn"
|
||||
hx-get="{{ dashboard_path }}/htmx/top-ua?page={{ pagination.page + 1 }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
|
||||
hx-target="closest .htmx-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if pagination.page >= pagination.total_pages %}disabled{% endif %}>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>User-Agent</th>
|
||||
<th class="sortable {% if sort_by == 'count' %}{{ sort_order }}{% endif %}"
|
||||
hx-get="{{ dashboard_path }}/htmx/top-ua?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">
|
||||
Count
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in items %}
|
||||
<tr>
|
||||
<td class="rank">{{ loop.index + (pagination.page - 1) * pagination.page_size }}</td>
|
||||
<td>{{ item.user_agent | e }}</td>
|
||||
<td>{{ item.count }}</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="3" style="text-align: center;">No data</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
Reference in New Issue
Block a user