Malin/krawl.es
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add detailed IP information view and refactor IP insight template

Browse Source 
- Introduced a new partial template `_ip_detail.html` for displaying comprehensive IP details, including activity, geo & network information, reputation, and access history.
- Updated `ip_insight.html` to include the new `_ip_detail.html` partial, streamlining the code and enhancing maintainability.
- Enhanced CSS styles for improved layout and responsiveness, including adjustments to the radar chart size and the introduction of a two-column grid layout for IP details.
- Refactored JavaScript for loading attack types charts to support multiple instances and improved error handling.
This commit is contained in:
Lorenzo Venerandi
2026-03-01 17:00:10 +01:00
parent ef467b0fd6
commit 8fc2d47e96
7 changed files with 628 additions and 585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/database.py
View File

@@ -815,8 +815,8 @@ class DatabaseManager:
def flag_stale_ips_for_reevaluation(self) -> int:
"""
Flag IPs for reevaluation where:
- last_seen is between 15 and 30 days ago
- last_analysis is more than 10 days ago (or never analyzed)
- last_seen is between 5 and 30 days ago
- last_analysis is more than 5 days ago
Returns:
Number of IPs flagged for reevaluation
@@ -825,18 +825,15 @@ class DatabaseManager:
try:
now = datetime.now()
last_seen_lower = now - timedelta(days=30)
last_seen_upper = now - timedelta(days=15)
last_analysis_cutoff = now - timedelta(days=10)
last_seen_upper = now - timedelta(days=5)
last_analysis_cutoff = now - timedelta(days=5)
count = (
session.query(IpStats)
.filter(
IpStats.last_seen >= last_seen_lower,
IpStats.last_seen <= last_seen_upper,
or_(
IpStats.last_analysis <= last_analysis_cutoff,
IpStats.last_analysis.is_(None),
),
IpStats.last_analysis <= last_analysis_cutoff,
IpStats.need_reevaluation == False,
IpStats.manual_category == False,
)
@@ -2029,12 +2026,15 @@ class DatabaseManager:
finally:
self.close_session()
def get_attack_types_stats(self, limit: int = 20) -> Dict[str, Any]:
def get_attack_types_stats(
self, limit: int = 20, ip_filter: str | None = None
) -> Dict[str, Any]:
"""
Get aggregated statistics for attack types (efficient for large datasets).
Args:
limit: Maximum number of attack types to return
ip_filter: Optional IP address to filter results for
Returns:
Dictionary with attack type counts
@@ -2044,12 +2044,18 @@ class DatabaseManager:
from sqlalchemy import func
# Aggregate attack types with count
query = session.query(
AttackDetection.attack_type,
func.count(AttackDetection.id).label("count"),
)
if ip_filter:
query = query.join(
AccessLog, AttackDetection.access_log_id == AccessLog.id
).filter(AccessLog.ip == ip_filter)
results = (
session.query(
AttackDetection.attack_type,
func.count(AttackDetection.id).label("count"),
)
.group_by(AttackDetection.attack_type)
query.group_by(AttackDetection.attack_type)
.order_by(func.count(AttackDetection.id).desc())
.limit(limit)
.all()

3
src/routes/api.py
View File

@@ -214,12 +214,13 @@ async def top_user_agents(
async def attack_types_stats(
request: Request,
limit: int = Query(20),
ip_filter: str = Query(None),
):
db = get_db()
limit = min(max(1, limit), 100)
try:
result = db.get_attack_types_stats(limit=limit)
result = db.get_attack_types_stats(limit=limit, ip_filter=ip_filter)
return JSONResponse(content=result, headers=_no_cache_headers())
except Exception as e:
get_app_logger().error(f"Error fetching attack types stats: {e}")

260
src/templates/jinja2/dashboard/ip.html
View File

@@ -16,187 +16,8 @@
</a>
</div>
{# Page header #}
<div class="ip-page-header">
<h1>
<span class="ip-address-title">{{ ip_address }}</span>
{% if stats.category %}
<span class="category-badge category-{{ stats.category | lower | replace('_', '-') }}">
{{ stats.category | replace('_', ' ') | title }}
</span>
{% endif %}
</h1>
{% if stats.city or stats.country %}
<p class="ip-location-subtitle">
{{ stats.city | default('') }}{% if stats.city and stats.country %}, {% endif %}{{ stats.country | default(stats.country_code | default('')) }}
</p>
{% endif %}
</div>
{# Main content grid #}
<div class="ip-page-grid">
{# Left column: IP Info + Map #}
<div class="ip-page-left">
{# IP Information Card #}
<div class="table-container ip-info-card">
<h2>IP Information</h2>
<div class="ip-info-grid">
<div class="ip-info-section">
<h3>Activity</h3>
<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.last_analysis %}
<div class="stat-row">
<span class="stat-label-sm">Last Analysis:</span>
<span class="stat-value-sm">{{ stats.last_analysis | format_ts }}</span>
</div>
{% endif %}
</div>
<div class="ip-info-section">
<h3>Geo & Network</h3>
{% if stats.city or stats.country %}
<div class="stat-row">
<span class="stat-label-sm">Location:</span>
<span class="stat-value-sm">{{ stats.city | default('') | e }}{% if stats.city and stats.country %}, {% endif %}{{ stats.country | default(stats.country_code | default('')) | e }}</span>
</div>
{% endif %}
{% if stats.timezone %}
<div class="stat-row">
<span class="stat-label-sm">Timezone:</span>
<span class="stat-value-sm">{{ stats.timezone | 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 %}
{% if stats.asn_org %}
<div class="stat-row">
<span class="stat-label-sm">Organization:</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">AS{{ stats.asn }}</span>
</div>
{% endif %}
{% if stats.reverse_dns %}
<div class="stat-row">
<span class="stat-label-sm">Reverse DNS:</span>
<span class="stat-value-sm" style="word-break: break-all;">{{ stats.reverse_dns | e }}</span>
</div>
{% endif %}
</div>
<div class="ip-info-section">
<h3>Reputation</h3>
{% 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">
{% for flag in flags %}
<span class="ip-flag">{{ flag }}</span>
{% endfor %}
</span>
</div>
{% endif %}
{% if stats.reputation_score is not none %}
<div class="stat-row">
<span class="stat-label-sm">Score:</span>
<span class="stat-value-sm reputation-score {% if stats.reputation_score <= 30 %}bad{% elif stats.reputation_score <= 60 %}medium{% else %}good{% endif %}">
{{ stats.reputation_score }}/100
</span>
</div>
{% endif %}
{% if stats.blocklist_memberships %}
<div class="stat-row" style="flex-direction: column; align-items: flex-start; gap: 6px;">
<span class="stat-label-sm">Listed On:</span>
<div class="blocklist-badges">
{% for bl in stats.blocklist_memberships %}
<span class="reputation-badge">{{ bl | e }}</span>
{% endfor %}
</div>
</div>
{% else %}
<div class="stat-row">
<span class="stat-label-sm">Blocklists:</span>
<span class="reputation-clean">Clean</span>
</div>
{% endif %}
</div>
</div>
</div>
{# Single IP Map #}
<div class="table-container">
<h2>Location</h2>
<div id="single-ip-map" style="height: 300px; border-radius: 6px; border: 1px solid #30363d;"></div>
</div>
</div>
{# Right column: Radar Chart + Timeline #}
<div class="ip-page-right">
{# Category Analysis Card #}
{% if stats.category_scores %}
<div class="table-container">
<h2>Category Analysis</h2>
<div class="radar-chart-container">
<div class="radar-chart" id="ip-radar-chart"></div>
</div>
</div>
{% endif %}
{# Behavior Timeline #}
{% if stats.category_history %}
<div class="table-container">
<h2>Behavior Timeline</h2>
<div class="timeline ip-timeline-scroll">
{% for entry in stats.category_history %}
<div class="timeline-item">
<div class="timeline-marker {{ entry.new_category | default('unknown') | replace('_', '-') }}"></div>
<div>
<strong style="color: #e6edf3;">{{ 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 %}
</div>
</div>
{# Access History table #}
<div class="table-container alert-section" style="margin-top: 20px;">
<h2>Access History</h2>
<div class="htmx-container"
hx-get="{{ dashboard_path }}/htmx/access-logs?page=1&ip_filter={{ ip_address }}"
hx-trigger="revealed"
hx-swap="innerHTML">
<div class="htmx-indicator">Loading...</div>
</div>
</div>
{% set uid = "ip" %}
{% include "dashboard/partials/_ip_detail.html" %}
{# Raw Request Modal #}
<div class="raw-request-modal" x-show="rawModal.show" @click.self="closeRawModal()" x-cloak>
@@ -215,80 +36,3 @@
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
(function() {
// Initialize radar chart
{% if stats.category_scores %}
const scores = {{ stats.category_scores | tojson }};
const container = document.getElementById('ip-radar-chart');
if (container && typeof generateRadarChart === 'function') {
container.innerHTML = generateRadarChart(scores, 220, true, 'side');
}
{% endif %}
// Initialize single IP map
{% if stats.latitude and stats.longitude %}
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
const mapContainer = document.getElementById('single-ip-map');
if (!mapContainer || typeof L === 'undefined') return;
const lat = {{ stats.latitude }};
const lng = {{ stats.longitude }};
const category = '{{ stats.category | default("unknown") | lower }}';
const categoryColors = {
attacker: '#f85149',
bad_crawler: '#f0883e',
good_crawler: '#3fb950',
regular_user: '#58a6ff',
unknown: '#8b949e'
};
const map = L.map('single-ip-map', {
center: [lat, lng],
zoom: 6,
zoomControl: true,
scrollWheelZoom: true
});
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; CartoDB | &copy; OpenStreetMap contributors',
maxZoom: 19,
subdomains: 'abcd'
}).addTo(map);
const color = categoryColors[category] || '#8b949e';
const markerHtml = `
<div style="
width: 24px;
height: 24px;
background: ${color};
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 0 12px ${color}, 0 0 24px ${color}80;
"></div>
`;
const icon = L.divIcon({
html: markerHtml,
iconSize: [24, 24],
className: 'single-ip-marker'
});
L.marker([lat, lng], { icon: icon }).addTo(map);
}, 100);
});
{% else %}
document.addEventListener('DOMContentLoaded', function() {
const mapContainer = document.getElementById('single-ip-map');
if (mapContainer) {
mapContainer.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #8b949e;">Location data not available</div>';
}
});
{% endif %}
})();
</script>
{% endblock %}

282
src/templates/jinja2/dashboard/partials/_ip_detail.html Normal file
View File

@@ -0,0 +1,282 @@
{# Shared IP detail content – included by ip.html and ip_insight.html.
Expects: stats, ip_address, dashboard_path, uid (unique prefix for element IDs) #}
{# Page header #}
<div class="ip-page-header">
<h1>
<span class="ip-address-title">{{ ip_address }}</span>
{% if stats.category %}
<span class="category-badge category-{{ stats.category | lower | replace('_', '-') }}">
{{ stats.category | replace('_', ' ') | title }}
</span>
{% endif %}
</h1>
{% if stats.city or stats.country %}
<p class="ip-location-subtitle">
{{ stats.city | default('') }}{% if stats.city and stats.country %}, {% endif %}{{ stats.country | default(stats.country_code | default('')) }}
</p>
{% endif %}
</div>
{# ── Two-column layout: Info + Radar/Timeline ───── #}
<div class="ip-page-grid">
{# Left column: single IP Information card #}
<div class="ip-page-left">
<div class="table-container ip-detail-card ip-info-card">
<h2>IP Information</h2>
{# Activity section #}
<h3 class="ip-section-heading">Activity</h3>
<dl class="ip-dl">
<div class="ip-dl-row">
<dt>Total Requests</dt>
<dd>{{ stats.total_requests | default('N/A') }}</dd>
</div>
<div class="ip-dl-row">
<dt>First Seen</dt>
<dd class="ip-dl-highlight">{{ stats.first_seen | format_ts }}</dd>
</div>
<div class="ip-dl-row">
<dt>Last Seen</dt>
<dd class="ip-dl-highlight">{{ stats.last_seen | format_ts }}</dd>
</div>
{% if stats.last_analysis %}
<div class="ip-dl-row">
<dt>Last Analysis</dt>
<dd class="ip-dl-highlight">{{ stats.last_analysis | format_ts }}</dd>
</div>
{% endif %}
</dl>
{# Geo & Network section #}
<h3 class="ip-section-heading">Geo & Network</h3>
<dl class="ip-dl">
{% if stats.city or stats.country %}
<div class="ip-dl-row">
<dt>Location</dt>
<dd>{{ stats.city | default('') | e }}{% if stats.city and stats.country %}, {% endif %}{{ stats.country | default(stats.country_code | default('')) | e }}</dd>
</div>
{% endif %}
{% if stats.region_name %}
<div class="ip-dl-row">
<dt>Region</dt>
<dd>{{ stats.region_name | e }}</dd>
</div>
{% endif %}
{% if stats.timezone %}
<div class="ip-dl-row">
<dt>Timezone</dt>
<dd>{{ stats.timezone | e }}</dd>
</div>
{% endif %}
{% if stats.isp %}
<div class="ip-dl-row">
<dt>ISP</dt>
<dd>{{ stats.isp | e }}</dd>
</div>
{% endif %}
{% if stats.asn_org %}
<div class="ip-dl-row">
<dt>Organization</dt>
<dd>{{ stats.asn_org | e }}</dd>
</div>
{% endif %}
{% if stats.asn %}
<div class="ip-dl-row">
<dt>ASN</dt>
<dd>AS{{ stats.asn }}</dd>
</div>
{% endif %}
{% if stats.reverse_dns %}
<div class="ip-dl-row">
<dt>Reverse DNS</dt>
<dd class="ip-dl-mono">{{ stats.reverse_dns | e }}</dd>
</div>
{% endif %}
</dl>
{# Reputation section #}
<h3 class="ip-section-heading">Reputation</h3>
<div class="ip-rep-scroll">
{# 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="ip-rep-row">
<span class="ip-rep-label">Flags</span>
<div class="ip-rep-tags">
{% for flag in flags %}
<span class="ip-flag">{{ flag }}</span>
{% endfor %}
</div>
</div>
{% endif %}
{# Blocklists #}
<div class="ip-rep-row">
<span class="ip-rep-label">Listed On</span>
{% if stats.blocklist_memberships %}
<div class="ip-rep-tags">
{% for bl in stats.blocklist_memberships %}
<span class="reputation-badge">{{ bl | e }}</span>
{% endfor %}
</div>
{% else %}
<span class="reputation-clean">Clean</span>
{% endif %}
</div>
</div>
</div>
</div>
{# Right column: Category Analysis + Timeline + Attack Types #}
<div class="ip-page-right">
{% if stats.category_scores %}
<div class="table-container ip-detail-card">
<h2>Category Analysis</h2>
<div class="radar-chart-container">
<div class="radar-chart" id="{{ uid }}-radar-chart"></div>
</div>
</div>
{% endif %}
{# Bottom row: Behavior Timeline + Attack Types side by side #}
<div class="ip-bottom-row">
{% if stats.category_history %}
<div class="table-container ip-detail-card ip-timeline-card">
<h2>Behavior Timeline</h2>
<div class="ip-timeline-scroll">
<div class="ip-timeline-hz">
{% for entry in stats.category_history %}
<div class="ip-tl-entry">
<div class="ip-tl-dot {{ entry.new_category | default('unknown') | replace('_', '-') }}"></div>
<div class="ip-tl-content">
<span class="ip-tl-cat">{{ entry.new_category | default('unknown') | replace('_', ' ') | title }}</span>
{% if entry.old_category %}
<span class="ip-tl-from">from {{ entry.old_category | replace('_', ' ') | title }}</span>
{% else %}
<span class="ip-tl-from">initial classification</span>
{% endif %}
<span class="ip-tl-time">{{ entry.timestamp | format_ts }}</span>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
<div class="table-container ip-detail-card ip-attack-types-card">
<h2>Attack Types</h2>
<div class="ip-attack-chart-wrapper">
<canvas id="{{ uid }}-attack-types-chart"></canvas>
</div>
</div>
</div>
</div>
</div>
{# Location map #}
{% if stats.latitude and stats.longitude %}
<div class="table-container" style="margin-top: 20px;">
<h2>Location</h2>
<div id="{{ uid }}-ip-map" style="height: 300px; border-radius: 6px; border: 1px solid #30363d;"></div>
</div>
{% endif %}
{# Access History table #}
<div class="table-container alert-section" style="margin-top: 20px;">
<h2>Access History</h2>
<div class="htmx-container"
hx-get="{{ dashboard_path }}/htmx/access-logs?page=1&ip_filter={{ ip_address }}"
hx-trigger="revealed"
hx-swap="innerHTML">
<div class="htmx-indicator">Loading...</div>
</div>
</div>
{# Inline init script #}
<script>
(function() {
var UID = '{{ uid }}';
// Radar chart
{% if stats.category_scores %}
var scores = {{ stats.category_scores | tojson }};
var radarEl = document.getElementById(UID + '-radar-chart');
if (radarEl && typeof generateRadarChart === 'function') {
radarEl.innerHTML = generateRadarChart(scores, 280, true, 'side');
}
{% endif %}
// Attack types chart
function initAttackChart() {
if (typeof loadAttackTypesChart === 'function') {
loadAttackTypesChart(UID + '-attack-types-chart', '{{ ip_address }}', 'bottom');
}
}
if (typeof Chart !== 'undefined') {
initAttackChart();
} else {
document.addEventListener('DOMContentLoaded', initAttackChart);
}
// Location map
{% if stats.latitude and stats.longitude %}
function initMap() {
var mapContainer = document.getElementById(UID + '-ip-map');
if (!mapContainer || typeof L === 'undefined') return;
if (mapContainer._leaflet_id) {
mapContainer._leaflet_id = null;
}
mapContainer.innerHTML = '';
var lat = {{ stats.latitude }};
var lng = {{ stats.longitude }};
var category = '{{ stats.category | default("unknown") | lower }}';
var categoryColors = {
attacker: '#f85149',
bad_crawler: '#f0883e',
good_crawler: '#3fb950',
regular_user: '#58a6ff',
unknown: '#8b949e'
};
var map = L.map(UID + '-ip-map', {
center: [lat, lng],
zoom: 6,
zoomControl: true,
scrollWheelZoom: true
});
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; CartoDB | &copy; OpenStreetMap contributors',
maxZoom: 19,
subdomains: 'abcd'
}).addTo(map);
var color = categoryColors[category] || '#8b949e';
var markerHtml = '<div style="width:24px;height:24px;background:' + color +
';border:3px solid #fff;border-radius:50%;box-shadow:0 0 12px ' + color +
',0 0 24px ' + color + '80;"></div>';
var icon = L.divIcon({
html: markerHtml,
iconSize: [24, 24],
className: 'single-ip-marker'
});
L.marker([lat, lng], { icon: icon }).addTo(map);
}
setTimeout(initMap, 100);
{% else %}
var mapContainer = document.getElementById(UID + '-ip-map');
if (mapContainer) {
mapContainer.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#8b949e;">Location data not available</div>';
}
{% endif %}
})();
</script>

264
src/templates/jinja2/dashboard/partials/ip_insight.html
View File

@@ -1,263 +1,5 @@
{# HTMX fragment: IP Insight - full IP detail view for inline display #}
{# HTMX fragment: IP Insight - inline display within dashboard tabs #}
<div class="ip-insight-content" id="ip-insight-content">
{# Page header #}
<div class="ip-page-header">
<h1>
<span class="ip-address-title">{{ ip_address }}</span>
{% if stats.category %}
<span class="category-badge category-{{ stats.category | lower | replace('_', '-') }}">
{{ stats.category | replace('_', ' ') | title }}
</span>
{% endif %}
</h1>
{% if stats.city or stats.country %}
<p class="ip-location-subtitle">
{{ stats.city | default('') }}{% if stats.city and stats.country %}, {% endif %}{{ stats.country | default(stats.country_code | default('')) }}
</p>
{% endif %}
</div>
{# Main content grid #}
<div class="ip-page-grid">
{# Left column: IP Info + Map #}
<div class="ip-page-left">
{# IP Information Card #}
<div class="table-container ip-info-card">
<h2>IP Information</h2>
<div class="ip-info-grid">
<div class="ip-info-section">
<h3>Activity</h3>
<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.last_analysis %}
<div class="stat-row">
<span class="stat-label-sm">Last Analysis:</span>
<span class="stat-value-sm">{{ stats.last_analysis | format_ts }}</span>
</div>
{% endif %}
</div>
<div class="ip-info-section">
<h3>Geo & Network</h3>
{% if stats.city or stats.country %}
<div class="stat-row">
<span class="stat-label-sm">Location:</span>
<span class="stat-value-sm">{{ stats.city | default('') | e }}{% if stats.city and stats.country %}, {% endif %}{{ stats.country | default(stats.country_code | default('')) | e }}</span>
</div>
{% endif %}
{% if stats.timezone %}
<div class="stat-row">
<span class="stat-label-sm">Timezone:</span>
<span class="stat-value-sm">{{ stats.timezone | 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 %}
{% if stats.asn_org %}
<div class="stat-row">
<span class="stat-label-sm">Organization:</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">AS{{ stats.asn }}</span>
</div>
{% endif %}
{% if stats.reverse_dns %}
<div class="stat-row">
<span class="stat-label-sm">Reverse DNS:</span>
<span class="stat-value-sm" style="word-break: break-all;">{{ stats.reverse_dns | e }}</span>
</div>
{% endif %}
</div>
<div class="ip-info-section">
<h3>Reputation</h3>
{% 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">
{% for flag in flags %}
<span class="ip-flag">{{ flag }}</span>
{% endfor %}
</span>
</div>
{% endif %}
{% if stats.reputation_score is not none %}
<div class="stat-row">
<span class="stat-label-sm">Score:</span>
<span class="stat-value-sm reputation-score {% if stats.reputation_score <= 30 %}bad{% elif stats.reputation_score <= 60 %}medium{% else %}good{% endif %}">
{{ stats.reputation_score }}/100
</span>
</div>
{% endif %}
{% if stats.blocklist_memberships %}
<div class="stat-row" style="flex-direction: column; align-items: flex-start; gap: 6px;">
<span class="stat-label-sm">Listed On:</span>
<div class="blocklist-badges">
{% for bl in stats.blocklist_memberships %}
<span class="reputation-badge">{{ bl | e }}</span>
{% endfor %}
</div>
</div>
{% else %}
<div class="stat-row">
<span class="stat-label-sm">Blocklists:</span>
<span class="reputation-clean">Clean</span>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{# Right column: Radar Chart + Timeline #}
<div class="ip-page-right">
{# Category Analysis Card #}
{% if stats.category_scores %}
<div class="table-container">
<h2>Category Analysis</h2>
<div class="radar-chart-container">
<div class="radar-chart" id="insight-radar-chart"></div>
</div>
</div>
{% endif %}
{# Behavior Timeline #}
{% if stats.category_history %}
<div class="table-container">
<h2>Behavior Timeline</h2>
<div class="timeline ip-timeline-scroll">
{% for entry in stats.category_history %}
<div class="timeline-item">
<div class="timeline-marker {{ entry.new_category | default('unknown') | replace('_', '-') }}"></div>
<div>
<strong style="color: #e6edf3;">{{ 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 %}
</div>
</div>
{# Single IP Map - full width #}
<div class="table-container" style="margin-top: 20px;">
<h2>Location</h2>
<div id="insight-ip-map" style="height: 300px; border-radius: 6px; border: 1px solid #30363d;"></div>
</div>
{# Access History table #}
<div class="table-container alert-section" style="margin-top: 20px;">
<h2>Access History</h2>
<div class="htmx-container"
hx-get="{{ dashboard_path }}/htmx/access-logs?page=1&ip_filter={{ ip_address }}"
hx-trigger="revealed"
hx-swap="innerHTML">
<div class="htmx-indicator">Loading...</div>
</div>
</div>
{% set uid = "insight" %}
{% include "dashboard/partials/_ip_detail.html" %}
</div>
{# Inline script for initializing map and chart after HTMX swap #}
<script>
(function() {
// Initialize radar chart
{% if stats.category_scores %}
const scores = {{ stats.category_scores | tojson }};
const container = document.getElementById('insight-radar-chart');
if (container && typeof generateRadarChart === 'function') {
container.innerHTML = generateRadarChart(scores, 220, true, 'side');
}
{% endif %}
// Initialize single IP map
{% if stats.latitude and stats.longitude %}
setTimeout(function() {
const mapContainer = document.getElementById('insight-ip-map');
if (!mapContainer || typeof L === 'undefined') return;
// Clean up any existing map instance
if (mapContainer._leaflet_id) {
mapContainer._leaflet_id = null;
}
mapContainer.innerHTML = '';
const lat = {{ stats.latitude }};
const lng = {{ stats.longitude }};
const category = '{{ stats.category | default("unknown") | lower }}';
const categoryColors = {
attacker: '#f85149',
bad_crawler: '#f0883e',
good_crawler: '#3fb950',
regular_user: '#58a6ff',
unknown: '#8b949e'
};
const map = L.map('insight-ip-map', {
center: [lat, lng],
zoom: 6,
zoomControl: true,
scrollWheelZoom: true
});
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; CartoDB | &copy; OpenStreetMap contributors',
maxZoom: 19,
subdomains: 'abcd'
}).addTo(map);
const color = categoryColors[category] || '#8b949e';
const markerHtml = `
<div style="
width: 24px;
height: 24px;
background: ${color};
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 0 12px ${color}, 0 0 24px ${color}80;
"></div>
`;
const icon = L.divIcon({
html: markerHtml,
iconSize: [24, 24],
className: 'single-ip-marker'
});
L.marker([lat, lng], { icon: icon }).addTo(map);
}, 100);
{% else %}
const mapContainer = document.getElementById('insight-ip-map');
if (mapContainer) {
mapContainer.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #8b949e;">Location data not available</div>';
}
{% endif %}
})();
</script>

338
src/templates/static/css/dashboard.css
View File

@@ -269,8 +269,8 @@ tbody {
}
.radar-chart {
position: relative;
width: 220px;
height: 220px;
width: 280px;
height: 280px;
overflow: visible;
}
.radar-legend {
@@ -452,7 +452,7 @@ tbody {
animation: fadeIn 0.3s ease-in;
}
.ip-page-header {
margin-bottom: 24px;
margin-bottom: 20px;
}
.ip-page-header h1 {
display: flex;
@@ -471,61 +471,214 @@ tbody {
font-size: 14px;
margin: 4px 0 0 0;
}
/* Quick stats bar */
.ip-stats-bar {
display: flex;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.ip-stat-chip {
background: #161b22;
border: 1px solid #30363d;
border-radius: 8px;
padding: 12px 20px;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 0;
}
.ip-stat-chip-value {
color: #e6edf3;
font-size: 16px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ip-stat-chip-label {
color: #8b949e;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
}
/* Two-column grid */
.ip-page-grid {
display: grid;
grid-template-columns: 3fr 2fr;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
align-items: stretch;
}
.ip-page-left,
.ip-page-right {
display: flex;
flex-direction: column;
gap: 20px;
min-height: 0;
}
.ip-info-card h2 {
/* Left card fills column height */
.ip-info-card {
flex: 1;
display: flex;
flex-direction: column;
}
/* Timeline card grows to fill remaining space */
.ip-timeline-card {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
/* Detail cards */
.ip-detail-card h2 {
margin-top: 0;
margin-bottom: 16px;
}
.ip-info-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* Remove bottom margin inside grid columns (gap handles spacing) */
.ip-page-left .table-container,
.ip-page-right .table-container {
margin-bottom: 0;
}
/* Definition list for IP info */
.ip-dl {
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.ip-info-section {
padding: 14px 16px;
border-right: 1px solid #21262d;
}
.ip-info-section:last-child {
border-right: none;
}
.ip-info-section h3 {
color: #58a6ff;
font-size: 13px;
font-weight: 600;
margin: 0 0 10px 0;
padding-bottom: 6px;
.ip-dl-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 8px 0;
border-bottom: 1px solid #21262d;
gap: 16px;
}
.ip-info-section .stat-row {
padding: 3px 0;
.ip-dl-row:last-child {
border-bottom: none;
}
.ip-dl dt {
color: #8b949e;
font-size: 13px;
font-weight: 500;
flex-shrink: 0;
min-width: 100px;
}
.blocklist-badges {
.ip-dl dd {
margin: 0;
color: #e6edf3;
font-size: 13px;
font-weight: 500;
text-align: right;
word-break: break-word;
}
.ip-dl-mono {
font-family: monospace;
font-size: 12px;
}
/* Section headings inside IP info card */
.ip-section-heading {
color: #e6edf3;
font-size: 15px;
font-weight: 700;
margin: 18px 0 8px 0;
padding: 0;
}
.ip-section-heading:first-of-type {
margin-top: 0;
}
/* Highlighted date values */
.ip-dl-highlight {
color: #58a6ff;
}
/* Scrollable reputation container */
.ip-rep-scroll {
max-height: 200px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #30363d #161b22;
}
.ip-rep-scroll::-webkit-scrollbar {
width: 6px;
}
.ip-rep-scroll::-webkit-scrollbar-track {
background: #161b22;
border-radius: 3px;
}
.ip-rep-scroll::-webkit-scrollbar-thumb {
background: #30363d;
border-radius: 3px;
}
.ip-rep-scroll::-webkit-scrollbar-thumb:hover {
background: #484f58;
}
/* Scrollable behavior timeline – show ~5 entries max */
.ip-timeline-scroll {
max-height: 230px;
overflow-y: auto;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: #30363d #161b22;
}
.ip-timeline-scroll::-webkit-scrollbar {
width: 6px;
}
.ip-timeline-scroll::-webkit-scrollbar-track {
background: #161b22;
border-radius: 3px;
}
.ip-timeline-scroll::-webkit-scrollbar-thumb {
background: #30363d;
border-radius: 3px;
}
.ip-timeline-scroll::-webkit-scrollbar-thumb:hover {
background: #484f58;
}
/* Reputation section */
.ip-rep-row {
padding: 10px 0;
border-bottom: 1px solid #21262d;
display: flex;
align-items: flex-start;
gap: 16px;
}
.ip-rep-row:last-child {
border-bottom: none;
}
.ip-rep-label {
color: #8b949e;
font-size: 13px;
font-weight: 500;
flex-shrink: 0;
min-width: 80px;
padding-top: 2px;
}
.ip-rep-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
max-height: 120px;
overflow-y: auto;
gap: 6px;
}
/* Flags & badges */
.ip-flag {
display: inline-block;
background: #1c2128;
border: 1px solid #30363d;
border: 1px solid #f0883e4d;
border-radius: 4px;
padding: 2px 8px;
font-size: 11px;
padding: 3px 10px;
font-size: 12px;
color: #f0883e;
margin-right: 4px;
font-weight: 500;
}
.reputation-score {
font-weight: 700;
@@ -533,29 +686,130 @@ tbody {
.reputation-score.bad { color: #f85149; }
.reputation-score.medium { color: #f0883e; }
.reputation-score.good { color: #3fb950; }
.blocklist-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* Bottom row: Timeline + Attack Types side by side */
.ip-bottom-row {
display: flex;
gap: 20px;
flex: 1;
min-height: 0;
}
.ip-bottom-row .ip-timeline-card {
flex: 1;
min-width: 0;
}
.ip-attack-types-card {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.ip-attack-chart-wrapper {
flex: 1;
position: relative;
min-height: 180px;
}
/* Radar chart */
.radar-chart-container {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 0;
}
.ip-timeline-scroll {
max-height: 280px;
overflow-y: auto;
/* ── Behavior Timeline (full-width horizontal) ──── */
.ip-timeline-hz {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
padding-left: 24px;
}
.ip-timeline-hz::before {
content: '';
position: absolute;
left: 7px;
top: 8px;
bottom: 8px;
width: 2px;
background: #30363d;
}
.ip-tl-entry {
display: flex;
align-items: flex-start;
gap: 14px;
position: relative;
padding: 10px 0;
}
.ip-tl-entry:not(:last-child) {
border-bottom: 1px solid #161b22;
}
.ip-tl-dot {
width: 14px;
height: 14px;
border-radius: 50%;
flex-shrink: 0;
border: 2px solid #0d1117;
position: absolute;
left: -24px;
top: 12px;
z-index: 1;
}
.ip-tl-dot.attacker { background: #f85149; box-shadow: 0 0 6px #f8514980; }
.ip-tl-dot.good-crawler { background: #3fb950; box-shadow: 0 0 6px #3fb95080; }
.ip-tl-dot.bad-crawler { background: #f0883e; box-shadow: 0 0 6px #f0883e80; }
.ip-tl-dot.regular-user { background: #58a6ff; box-shadow: 0 0 6px #58a6ff80; }
.ip-tl-dot.unknown { background: #8b949e; }
.ip-tl-content {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
min-width: 0;
}
.ip-tl-cat {
color: #e6edf3;
font-weight: 600;
font-size: 14px;
}
.ip-tl-from {
color: #8b949e;
font-size: 13px;
}
.ip-tl-time {
color: #484f58;
font-size: 12px;
margin-left: auto;
white-space: nowrap;
}
/* Legacy compat (unused) */
@media (max-width: 900px) {
.ip-page-grid {
grid-template-columns: 1fr;
}
.ip-info-grid {
grid-template-columns: 1fr;
.ip-stats-bar {
flex-direction: column;
}
.ip-info-section {
border-right: none;
border-bottom: 1px solid #21262d;
.ip-stat-chip {
flex: 1 1 auto;
}
.ip-info-section:last-child {
border-bottom: none;
.ip-bottom-row {
flex-direction: column;
}
.ip-tl-content {
flex-direction: column;
gap: 2px;
}
.ip-tl-time {
margin-left: 0;
}
}

32
src/templates/static/js/charts.js
View File

@@ -4,14 +4,25 @@
let attackTypesChart = null;
let attackTypesChartLoaded = false;
async function loadAttackTypesChart() {
/**
* Load an attack types doughnut chart into a canvas element.
* @param {string} [canvasId='attack-types-chart'] - Canvas element ID
* @param {string} [ipFilter] - Optional IP address to scope results
* @param {string} [legendPosition='right'] - Legend position
*/
async function loadAttackTypesChart(canvasId, ipFilter, legendPosition) {
canvasId = canvasId || 'attack-types-chart';
legendPosition = legendPosition || 'right';
const DASHBOARD_PATH = window.__DASHBOARD_PATH__ || '';
try {
const canvas = document.getElementById('attack-types-chart');
const canvas = document.getElementById(canvasId);
if (!canvas) return;
const response = await fetch(DASHBOARD_PATH + '/api/attack-types-stats?limit=10', {
let url = DASHBOARD_PATH + '/api/attack-types-stats?limit=10';
if (ipFilter) url += '&ip_filter=' + encodeURIComponent(ipFilter);
const response = await fetch(url, {
cache: 'no-store',
headers: {
'Cache-Control': 'no-cache',
@@ -25,7 +36,7 @@ async function loadAttackTypesChart() {
const attackTypes = data.attack_types || [];
if (attackTypes.length === 0) {
canvas.style.display = 'none';
canvas.parentElement.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#8b949e;font-size:13px;">No attack data</div>';
return;
}
@@ -63,13 +74,14 @@ async function loadAttackTypesChart() {
const borderColors = labels.map(label => generateColorFromHash(label).border);
const hoverColors = labels.map(label => generateColorFromHash(label).hover);
// Create or update chart
if (attackTypesChart) {
attackTypesChart.destroy();
// Create or update chart (track per canvas)
if (!loadAttackTypesChart._instances) loadAttackTypesChart._instances = {};
if (loadAttackTypesChart._instances[canvasId]) {
loadAttackTypesChart._instances[canvasId].destroy();
}
const ctx = canvas.getContext('2d');
attackTypesChart = new Chart(ctx, {
const chartInstance = new Chart(ctx, {
type: 'doughnut',
data: {
labels: labels,
@@ -88,7 +100,7 @@ async function loadAttackTypesChart() {
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
position: legendPosition,
labels: {
color: '#c9d1d9',
font: {
@@ -160,6 +172,8 @@ async function loadAttackTypesChart() {
}]
});
loadAttackTypesChart._instances[canvasId] = chartInstance;
attackTypesChart = chartInstance;
attackTypesChartLoaded = true;
} catch (err) {
console.error('Error loading attack types chart:', err);