lots of work on the stats page layout and features
This commit is contained in:
@@ -259,15 +259,15 @@ form.inline-form {
|
||||
}
|
||||
|
||||
.stats-page .success-card {
|
||||
border-left: 6px solid limegreen;
|
||||
border-left: 6px solid limegreen !important;
|
||||
}
|
||||
|
||||
.stats-page .error-card {
|
||||
border-left: 6px solid crimson;
|
||||
border-left: 6px solid crimson !important;
|
||||
}
|
||||
|
||||
.stats-page .fallback-card {
|
||||
border-left: 6px solid orange;
|
||||
border-left: 6px solid orange !important;
|
||||
}
|
||||
|
||||
.stats-page .styled-table.small-table td,
|
||||
@@ -451,3 +451,61 @@ form.inline-form {
|
||||
font-style: italic;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.controls-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
#stats-search {
|
||||
flex: 1 1 300px;
|
||||
max-width: 300px;
|
||||
margin-left: auto;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--accent);
|
||||
background-color: var(--cell-bg);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.controls-card {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem 2rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid #666;
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: 1 1 auto;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.auto-refresh-block select {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.search-block {
|
||||
flex-grow: 2;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.search-block input {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--accent);
|
||||
background-color: var(--cell-bg);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
170
app/templates/_stats_cards.html
Normal file
170
app/templates/_stats_cards.html
Normal file
@@ -0,0 +1,170 @@
|
||||
{# Partial for rendering all three stats cards with AJAX-aware pagination #}
|
||||
|
||||
<div class="card success-card">
|
||||
<h2>Recent Access-Accept</h2>
|
||||
<table class="styled-table small-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>MAC Address</th>
|
||||
<th>Description</th>
|
||||
<th>Vendor</th>
|
||||
<th>VLAN</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for entry in accept_entries %}
|
||||
<tr>
|
||||
<td>{{ entry.mac_address }}</td>
|
||||
<td>{{ entry.description or '' }}</td>
|
||||
<td class="vendor-cell" data-mac="{{ entry.mac_address }}">{{ entry.vendor or '...' }}</td>
|
||||
<td>{{ entry.vlan_id or '?' }}</td>
|
||||
<td>{{ entry.ago }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if pagination_accept.pages|length > 1 %}
|
||||
<div class="pagination" data-type="accept">
|
||||
{% if pagination_accept.show_first %}
|
||||
<a href="#" data-page="1">1</a>
|
||||
{% endif %}
|
||||
{% if pagination_accept.show_prev %}
|
||||
<a href="#" data-page="{{ pagination_accept.prev_page }}">‹</a>
|
||||
{% endif %}
|
||||
{% for page in pagination_accept.pages %}
|
||||
{% if page == page_accept %}
|
||||
<span class="current-page">{{ page }}</span>
|
||||
{% else %}
|
||||
<a href="#" data-page="{{ page }}">{{ page }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if pagination_accept.show_next %}
|
||||
<a href="#" data-page="{{ pagination_accept.next_page }}">›</a>
|
||||
{% endif %}
|
||||
{% if pagination_accept.show_last %}
|
||||
<a href="#" data-page="{{ pagination_accept.last_page }}">{{ pagination_accept.last_page }}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="card error-card">
|
||||
<h2>Recent Access-Reject</h2>
|
||||
<table class="styled-table small-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>MAC Address</th>
|
||||
<th>Description</th>
|
||||
<th>Vendor</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for entry in reject_entries %}
|
||||
<tr>
|
||||
<td>{{ entry.mac_address }}</td>
|
||||
<td>{{ entry.description or '' }}</td>
|
||||
<td class="vendor-cell" data-mac="{{ entry.mac_address }}">{{ entry.vendor or '...' }}</td>
|
||||
<td>{{ entry.ago }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if pagination_reject.pages|length > 1 %}
|
||||
<div class="pagination" data-type="reject">
|
||||
{% if pagination_reject.show_first %}
|
||||
<a href="#" data-page="1">1</a>
|
||||
{% endif %}
|
||||
{% if pagination_reject.show_prev %}
|
||||
<a href="#" data-page="{{ pagination_reject.prev_page }}">‹</a>
|
||||
{% endif %}
|
||||
{% for page in pagination_reject.pages %}
|
||||
{% if page == page_reject %}
|
||||
<span class="current-page">{{ page }}</span>
|
||||
{% else %}
|
||||
<a href="#" data-page="{{ page }}">{{ page }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if pagination_reject.show_next %}
|
||||
<a href="#" data-page="{{ pagination_reject.next_page }}">›</a>
|
||||
{% endif %}
|
||||
{% if pagination_reject.show_last %}
|
||||
<a href="#" data-page="{{ pagination_reject.last_page }}">{{ pagination_reject.last_page }}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="card fallback-card">
|
||||
<h2>Recent Access-Fallback</h2>
|
||||
<table class="styled-table small-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>MAC Address</th>
|
||||
<th>Description</th>
|
||||
<th>Vendor</th>
|
||||
<th>Time</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for entry in fallback_entries %}
|
||||
<tr>
|
||||
<td>{{ entry.mac_address }}</td>
|
||||
<td>
|
||||
{% if not entry.already_exists %}
|
||||
<input type="text" name="description" value="{{ entry.description or '' }}" placeholder="Description (optional)" form="form-{{ loop.index }}">
|
||||
{% else %}
|
||||
{{ entry.description or '' }}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="vendor-cell" data-mac="{{ entry.mac_address }}">{{ entry.vendor or '...' }}</td>
|
||||
<td>{{ entry.ago }}</td>
|
||||
<td>
|
||||
{% if not entry.already_exists %}
|
||||
<form method="POST" action="{{ url_for('stats.add') }}" class="inline-form" id="form-{{ loop.index }}">
|
||||
<input type="hidden" name="mac_address" value="{{ entry.mac_address }}">
|
||||
<select name="group_id" required>
|
||||
<option value="">Assign to VLAN</option>
|
||||
{% for group in available_groups %}
|
||||
<option value="{{ group.vlan_id }}">
|
||||
VLAN {{ group.vlan_id }}{% if group.description %} - {{ group.description }}{% endif %}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="submit" title="Add">💾</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<span style="color: limegreen;">Already exists in VLAN {{ entry.existing_vlan or 'unknown' }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if pagination_fallback.pages|length > 1 %}
|
||||
<div class="pagination" data-type="fallback">
|
||||
{% if pagination_fallback.show_first %}
|
||||
<a href="#" data-page="1">1</a>
|
||||
{% endif %}
|
||||
{% if pagination_fallback.show_prev %}
|
||||
<a href="#" data-page="{{ pagination_fallback.prev_page }}">‹</a>
|
||||
{% endif %}
|
||||
{% for page in pagination_fallback.pages %}
|
||||
{% if page == page_fallback %}
|
||||
<span class="current-page">{{ page }}</span>
|
||||
{% else %}
|
||||
<a href="#" data-page="{{ page }}">{{ page }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if pagination_fallback.show_next %}
|
||||
<a href="#" data-page="{{ pagination_fallback.next_page }}">›</a>
|
||||
{% endif %}
|
||||
{% if pagination_fallback.show_last %}
|
||||
<a href="#" data-page="{{ pagination_fallback.last_page }}">{{ pagination_fallback.last_page }}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -3,275 +3,161 @@
|
||||
|
||||
{% block content %}
|
||||
<div class="stats-page">
|
||||
<h1 class="page-title">Authentication Stats</h1>
|
||||
<h1 class="page-title">Authentication Stats</h1>
|
||||
|
||||
<form method="POST" action="{{ url_for('stats.stats_page') }}">
|
||||
<label for="time_range">Select Time Range:</label>
|
||||
<select name="time_range" id="time_range">
|
||||
<option value="last_minute" {% if time_range == 'last_minute' %}selected{% endif %}>Last 1 Minute</option>
|
||||
<option value="last_5_minutes" {% if time_range == 'last_5_minutes' %}selected{% endif %}>Last 5 Minutes</option>
|
||||
<option value="last_10_minutes" {% if time_range == 'last_10_minutes' %}selected{% endif %}>Last 10 Minutes</option>
|
||||
<option value="last_hour" {% if time_range == 'last_hour' %}selected{% endif %}>Last Hour</option>
|
||||
<option value="last_6_hours" {% if time_range == 'last_6_hours' %}selected{% endif %}>Last 6 Hours</option>
|
||||
<option value="last_12_hours" {% if time_range == 'last_12_hours' %}selected{% endif %}>Last 12 Hours</option>
|
||||
<option value="last_day" {% if time_range == 'last_day' %}selected{% endif %}>Last Day</option>
|
||||
<option value="last_30_days" {% if time_range == 'last_30_days' %}selected{% endif %}>Last 30 Days</option>
|
||||
<option value="all" {% if time_range == 'all' %}selected{% endif %}>All Time</option>
|
||||
</select>
|
||||
|
||||
<label for="per_page">Entries per page:</label>
|
||||
<select name="per_page" id="per_page">
|
||||
{% for option in [5,10, 25, 50, 100] %}
|
||||
<option value="{{ option }}" {% if per_page == option %}selected{% endif %}>{{ option }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
<button type="submit">Update</button>
|
||||
</form>
|
||||
|
||||
<div class="auto-refresh-toggle">
|
||||
<label>
|
||||
<input type="checkbox" id="auto-refresh-checkbox">
|
||||
Auto-refresh every 30s
|
||||
</label>
|
||||
<span id="refresh-status"></span>
|
||||
</div>
|
||||
|
||||
<div class="stats-container">
|
||||
|
||||
<!-- Access-Accept Card -->
|
||||
<div class="card success-card">
|
||||
<h2>Recent Access-Accept</h2>
|
||||
<table class="styled-table small-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>MAC Address</th>
|
||||
<th>Description</th>
|
||||
<th>Vendor</th>
|
||||
<th>VLAN</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for entry in accept_entries %}
|
||||
<tr>
|
||||
<td>{{ entry.mac_address }}</td>
|
||||
<td>{{ entry.description or '' }}</td>
|
||||
<td class="vendor-cell" data-mac="{{ entry.mac_address }}">{{ entry.vendor or '...' }}</td>
|
||||
<td>{{ entry.vlan_id or '?' }}</td>
|
||||
<td>{{ entry.ago }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if pagination_accept.pages|length > 1 %}
|
||||
<div class="pagination">
|
||||
{% if pagination_accept.show_first %}
|
||||
<a href="{{ url_for('stats.stats_page', page_accept=pagination_accept.first_page, page_reject=page_reject, page_fallback=page_fallback, per_page=per_page, time_range=time_range) }}">«</a>
|
||||
{% endif %}
|
||||
{% if pagination_accept.show_prev %}
|
||||
<a href="{{ url_for('stats.stats_page', page_accept=pagination_accept.prev_page, page_reject=page_reject, page_fallback=page_fallback, per_page=per_page, time_range=time_range) }}">‹</a>
|
||||
{% endif %}
|
||||
|
||||
{% for page in pagination_accept.pages %}
|
||||
{% if page == page_accept %}
|
||||
<span class="current-page">{{ page }}</span>
|
||||
{% else %}
|
||||
<a href="{{ url_for('stats.stats_page', page_accept=page, page_reject=page_reject, page_fallback=page_fallback, per_page=per_page, time_range=time_range) }}">{{ page }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if pagination_accept.show_next %}
|
||||
<a href="{{ url_for('stats.stats_page', page_accept=pagination_accept.next_page, page_reject=page_reject, page_fallback=page_fallback, per_page=per_page, time_range=time_range) }}">›</a>
|
||||
{% endif %}
|
||||
{% if pagination_accept.show_last %}
|
||||
<a href="{{ url_for('stats.stats_page', page_accept=pagination_accept.last_page, page_reject=page_reject, page_fallback=page_fallback, per_page=per_page, time_range=time_range) }}">»</a>
|
||||
{% endif %}
|
||||
<div class="controls-card">
|
||||
<div class="control-group">
|
||||
<label for="time_range">Time Range:</label>
|
||||
<select name="time_range" id="time_range">
|
||||
<option value="last_minute">Last 1 Minute</option>
|
||||
<option value="last_5_minutes">Last 5 Minutes</option>
|
||||
<option value="last_10_minutes">Last 10 Minutes</option>
|
||||
<option value="last_hour">Last Hour</option>
|
||||
<option value="last_6_hours">Last 6 Hours</option>
|
||||
<option value="last_12_hours">Last 12 Hours</option>
|
||||
<option value="last_day">Last Day</option>
|
||||
<option value="last_30_days">Last 30 Days</option>
|
||||
<option value="all">All Time</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Access-Reject Card -->
|
||||
<div class="card error-card">
|
||||
<h2>Recent Access-Reject</h2>
|
||||
<table class="styled-table small-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>MAC Address</th>
|
||||
<th>Description</th>
|
||||
<th>Vendor</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for entry in reject_entries %}
|
||||
<tr>
|
||||
<td>{{ entry.mac_address }}</td>
|
||||
<td>{{ entry.description or '' }}</td>
|
||||
<td class="vendor-cell" data-mac="{{ entry.mac_address }}">{{ entry.vendor or '...' }}</td>
|
||||
<td>{{ entry.ago }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if pagination_reject.pages|length > 1 %}
|
||||
<div class="pagination">
|
||||
{% if pagination_reject.show_first %}
|
||||
<a href="{{ url_for('stats.stats_page', page_accept=page_accept, page_reject=pagination_reject.first_page, page_fallback=page_fallback, per_page=per_page, time_range=time_range) }}">«</a>
|
||||
{% endif %}
|
||||
{% if pagination_reject.show_prev %}
|
||||
<a href="{{ url_for('stats.stats_page', page_accept=page_accept, page_reject=pagination_reject.prev_page, page_fallback=page_fallback, per_page=per_page, time_range=time_range) }}">‹</a>
|
||||
{% endif %}
|
||||
{% for page in pagination_reject.pages %}
|
||||
{% if page == page_reject %}
|
||||
<span class="current-page">{{ page }}</span>
|
||||
{% else %}
|
||||
<a href="{{ url_for('stats.stats_page', page_accept=page_accept, page_reject=page, page_fallback=page_fallback, per_page=per_page, time_range=time_range) }}">{{ page }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if pagination_reject.show_next %}
|
||||
<a href="{{ url_for('stats.stats_page', page_accept=page_accept, page_reject=pagination_reject.next_page, page_fallback=page_fallback, per_page=per_page, time_range=time_range) }}">›</a>
|
||||
{% endif %}
|
||||
{% if pagination_reject.show_last %}
|
||||
<a href="{{ url_for('stats.stats_page', page_accept=page_accept, page_reject=pagination_reject.last_page, page_fallback=page_fallback, per_page=per_page, time_range=time_range) }}">»</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="control-group">
|
||||
<label for="per_page">Entries per page:</label>
|
||||
<select name="per_page" id="per_page">
|
||||
<option value="5">5</option>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Access-Fallback Card -->
|
||||
<div class="card fallback-card">
|
||||
<h2>Recent Access-Fallback</h2>
|
||||
<table class="styled-table small-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>MAC Address</th>
|
||||
<th>Description</th>
|
||||
<th>Vendor</th>
|
||||
<th>Time</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for entry in fallback_entries %}
|
||||
<tr>
|
||||
<td>{{ entry.mac_address }}</td>
|
||||
<td>
|
||||
{% if not entry.already_exists %}
|
||||
<input type="text" name="description" value="{{ entry.description or '' }}" placeholder="Description (optional)" form="form-{{ loop.index }}">
|
||||
{% else %}
|
||||
{{ entry.description or '' }}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="vendor-cell" data-mac="{{ entry.mac_address }}">{{ entry.vendor or '...' }}</td>
|
||||
<td>{{ entry.ago }}</td>
|
||||
<td>
|
||||
{% if not entry.already_exists %}
|
||||
<form method="POST" action="{{ url_for('stats.add') }}" class="inline-form" id="form-{{ loop.index }}">
|
||||
<input type="hidden" name="mac_address" value="{{ entry.mac_address }}">
|
||||
<select name="group_id" required>
|
||||
<option value="">Assign to VLAN</option>
|
||||
{% for group in available_groups %}
|
||||
<option value="{{ group.vlan_id }}">
|
||||
VLAN {{ group.vlan_id }}{% if group.description %} - {{ group.description }}{% endif %}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="submit" title="Add">💾</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<span style="color: limegreen;">Already exists in VLAN {{ entry.existing_vlan or 'unknown' }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if pagination_fallback.pages|length > 1 %}
|
||||
<div class="pagination">
|
||||
{% if pagination_fallback.show_first %}
|
||||
<a href="{{ url_for('stats.stats_page', page_accept=page_accept, page_reject=page_reject, page_fallback=pagination_fallback.first_page, per_page=per_page, time_range=time_range) }}">«</a>
|
||||
{% endif %}
|
||||
{% if pagination_fallback.show_prev %}
|
||||
<a href="{{ url_for('stats.stats_page', page_accept=page_accept, page_reject=page_reject, page_fallback=pagination_fallback.prev_page, per_page=per_page, time_range=time_range) }}">‹</a>
|
||||
{% endif %}
|
||||
{% for page in pagination_fallback.pages %}
|
||||
{% if page == page_fallback %}
|
||||
<span class="current-page">{{ page }}</span>
|
||||
{% else %}
|
||||
<a href="{{ url_for('stats.stats_page', page_accept=page_accept, page_reject=page_reject, page_fallback=page, per_page=per_page, time_range=time_range) }}">{{ page }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if pagination_fallback.show_next %}
|
||||
<a href="{{ url_for('stats.stats_page', page_accept=page_accept, page_reject=page_reject, page_fallback=pagination_fallback.next_page, per_page=per_page, time_range=time_range) }}">›</a>
|
||||
{% endif %}
|
||||
{% if pagination_fallback.show_last %}
|
||||
<a href="{{ url_for('stats.stats_page', page_accept=page_accept, page_reject=page_reject, page_fallback=pagination_fallback.last_page, per_page=per_page, time_range=time_range) }}">»</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="control-group auto-refresh-block">
|
||||
<label>
|
||||
<input type="checkbox" id="auto-refresh-checkbox"> Auto-refresh
|
||||
</label>
|
||||
<select id="refresh-interval">
|
||||
<option value="15000">15s</option>
|
||||
<option value="30000" selected>30s</option>
|
||||
<option value="60000">1 min</option>
|
||||
<option value="300000">5 min</option>
|
||||
</select>
|
||||
<span id="refresh-status"></span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="control-group search-block">
|
||||
<input type="text" id="stats-search" placeholder="Search MAC, vendor, VLAN, description">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="stats-root" class="stats-container">
|
||||
{% include '_stats_cards.html' %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const queriedPrefixes = new Set();
|
||||
document.querySelectorAll('.vendor-cell').forEach(cell => {
|
||||
const mac = cell.getAttribute('data-mac');
|
||||
if (cell.textContent.trim() === '...') {
|
||||
const prefix = mac.replace(/[^a-fA-F0-9]/g, '').substring(0, 6).toLowerCase();
|
||||
if (queriedPrefixes.has(prefix)) return;
|
||||
queriedPrefixes.add(prefix);
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const statsRoot = document.getElementById('stats-root');
|
||||
const timeRangeSelect = document.getElementById('time_range');
|
||||
const perPageSelect = document.getElementById('per_page');
|
||||
const searchInput = document.getElementById('stats-search');
|
||||
const refreshCheckbox = document.getElementById('auto-refresh-checkbox');
|
||||
const refreshInterval = document.getElementById('refresh-interval');
|
||||
const refreshStatus = document.getElementById('refresh-status');
|
||||
|
||||
fetch('{{ url_for("stats.lookup_mac_async") }}', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ mac })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.vendor) {
|
||||
document.querySelectorAll(`.vendor-cell[data-mac^="${prefix}"]`).forEach(c => {
|
||||
if (c.textContent.trim() === '...') {
|
||||
c.textContent = data.vendor;
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.warn('MAC lookup failed:', err);
|
||||
});
|
||||
}
|
||||
});
|
||||
let intervalId = null;
|
||||
let currentPageAccept = 1;
|
||||
let currentPageReject = 1;
|
||||
let currentPageFallback = 1;
|
||||
|
||||
const refreshCheckbox = document.getElementById('auto-refresh-checkbox');
|
||||
const refreshStatus = document.getElementById('refresh-status');
|
||||
let intervalId = null;
|
||||
function setInitialSelectValuesFromURL() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const time = urlParams.get('time_range');
|
||||
const page = urlParams.get('per_page');
|
||||
if (time) timeRangeSelect.value = time;
|
||||
if (page) perPageSelect.value = page;
|
||||
}
|
||||
|
||||
function startAutoRefresh() {
|
||||
refreshStatus.textContent = "Auto-refresh enabled";
|
||||
intervalId = setInterval(() => {
|
||||
document.querySelector('form').submit();
|
||||
}, 30000);
|
||||
}
|
||||
async function fetchStatsData() {
|
||||
try {
|
||||
const timeRange = timeRangeSelect.value;
|
||||
const perPage = perPageSelect.value;
|
||||
const params = new URLSearchParams({
|
||||
time_range: timeRange,
|
||||
per_page: perPage,
|
||||
page_accept: currentPageAccept,
|
||||
page_reject: currentPageReject,
|
||||
page_fallback: currentPageFallback
|
||||
});
|
||||
|
||||
function stopAutoRefresh() {
|
||||
refreshStatus.textContent = "Auto-refresh disabled";
|
||||
if (intervalId) clearInterval(intervalId);
|
||||
}
|
||||
const response = await fetch(`/stats/fetch_stats_data?${params}`);
|
||||
const html = await response.text();
|
||||
statsRoot.innerHTML = html;
|
||||
filterRows();
|
||||
attachPaginationHandlers();
|
||||
} catch (err) {
|
||||
console.error('Error fetching stats data:', err);
|
||||
refreshStatus.textContent = 'Error loading stats data.';
|
||||
}
|
||||
}
|
||||
|
||||
refreshCheckbox.addEventListener('change', (e) => {
|
||||
if (e.target.checked) {
|
||||
startAutoRefresh();
|
||||
} else {
|
||||
stopAutoRefresh();
|
||||
}
|
||||
});
|
||||
function startAutoRefresh() {
|
||||
refreshStatus.textContent = `Refreshing every ${refreshInterval.selectedOptions[0].text}`;
|
||||
if (intervalId) clearInterval(intervalId);
|
||||
intervalId = setInterval(fetchStatsData, parseInt(refreshInterval.value));
|
||||
}
|
||||
|
||||
stopAutoRefresh();
|
||||
function stopAutoRefresh() {
|
||||
refreshStatus.textContent = "Auto-refresh disabled";
|
||||
if (intervalId) clearInterval(intervalId);
|
||||
}
|
||||
|
||||
function filterRows() {
|
||||
const query = searchInput.value.toLowerCase();
|
||||
document.querySelectorAll('.styled-table tbody tr').forEach(row => {
|
||||
row.style.display = row.textContent.toLowerCase().includes(query) ? '' : 'none';
|
||||
});
|
||||
</script>
|
||||
}
|
||||
|
||||
{% endblock %}
|
||||
function attachPaginationHandlers() {
|
||||
document.querySelectorAll('.pagination').forEach(pagination => {
|
||||
const type = pagination.getAttribute('data-type');
|
||||
pagination.querySelectorAll('a[data-page]').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const page = parseInt(link.getAttribute('data-page'));
|
||||
if (type === 'accept') currentPageAccept = page;
|
||||
else if (type === 'reject') currentPageReject = page;
|
||||
else if (type === 'fallback') currentPageFallback = page;
|
||||
fetchStatsData();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Initial setup
|
||||
setInitialSelectValuesFromURL();
|
||||
fetchStatsData();
|
||||
|
||||
timeRangeSelect.addEventListener('change', () => {
|
||||
currentPageAccept = currentPageReject = currentPageFallback = 1;
|
||||
fetchStatsData();
|
||||
});
|
||||
|
||||
perPageSelect.addEventListener('change', () => {
|
||||
currentPageAccept = currentPageReject = currentPageFallback = 1;
|
||||
fetchStatsData();
|
||||
});
|
||||
|
||||
refreshCheckbox.addEventListener('change', () => {
|
||||
refreshCheckbox.checked ? startAutoRefresh() : stopAutoRefresh();
|
||||
});
|
||||
|
||||
refreshInterval.addEventListener('change', () => {
|
||||
if (refreshCheckbox.checked) startAutoRefresh();
|
||||
});
|
||||
|
||||
searchInput.addEventListener('input', filterRows);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -22,22 +22,33 @@ def get_time_filter_delta(time_range):
|
||||
}.get(time_range)
|
||||
|
||||
def get_pagination_data(current_page, total_pages, max_display=7):
|
||||
pagination = []
|
||||
if total_pages == 0:
|
||||
return {
|
||||
"pages": [],
|
||||
"show_first": False,
|
||||
"show_last": False,
|
||||
"show_prev": False,
|
||||
"show_next": False,
|
||||
"prev_page": 1,
|
||||
"next_page": 1,
|
||||
"first_page": 1,
|
||||
"last_page": 1
|
||||
}
|
||||
|
||||
if total_pages <= max_display:
|
||||
pagination = list(range(1, total_pages + 1))
|
||||
pages = list(range(1, total_pages + 1))
|
||||
else:
|
||||
half = max_display // 2
|
||||
if current_page <= half:
|
||||
pagination = list(range(1, max_display + 1))
|
||||
elif current_page >= total_pages - half:
|
||||
pagination = list(range(total_pages - max_display + 1, total_pages + 1))
|
||||
else:
|
||||
pagination = list(range(current_page - half, current_page + half + 1))
|
||||
start = max(1, current_page - half)
|
||||
end = min(total_pages, start + max_display - 1)
|
||||
if end - start + 1 < max_display:
|
||||
start = max(1, end - max_display + 1)
|
||||
pages = list(range(start, end + 1))
|
||||
|
||||
return {
|
||||
"pages": pagination,
|
||||
"show_first": current_page > 1,
|
||||
"show_last": current_page < total_pages,
|
||||
"pages": pages,
|
||||
"show_first": 1 not in pages,
|
||||
"show_last": total_pages not in pages,
|
||||
"show_prev": current_page > 1,
|
||||
"show_next": current_page < total_pages,
|
||||
"prev_page": max(current_page - 1, 1),
|
||||
@@ -48,9 +59,14 @@ def get_pagination_data(current_page, total_pages, max_display=7):
|
||||
|
||||
@stats.route('/stats', methods=['GET', 'POST'])
|
||||
def stats_page():
|
||||
time_range = request.form.get('time_range') or request.args.get('time_range') or 'last_minute'
|
||||
per_page = int(request.form.get('per_page') or request.args.get('per_page') or 25)
|
||||
if request.method == 'POST':
|
||||
return redirect(url_for('stats.stats_page',
|
||||
time_range=request.form.get('time_range'),
|
||||
per_page=request.form.get('per_page')
|
||||
))
|
||||
|
||||
time_range = request.args.get('time_range', 'last_minute')
|
||||
per_page = int(request.args.get('per_page', 25))
|
||||
page_accept = int(request.args.get('page_accept', 1))
|
||||
page_reject = int(request.args.get('page_reject', 1))
|
||||
page_fallback = int(request.args.get('page_fallback', 1))
|
||||
@@ -58,21 +74,6 @@ def stats_page():
|
||||
tz_name = current_app.config.get('APP_TIMEZONE', 'UTC')
|
||||
local_tz = pytz.timezone(tz_name)
|
||||
|
||||
total_accept = count_auth_logs('Access-Accept', time_range)
|
||||
total_pages_accept = ceil(total_accept / per_page)
|
||||
offset_accept = (page_accept - 1) * per_page
|
||||
accept_entries = get_latest_auth_logs('Access-Accept', per_page, time_range, offset_accept)
|
||||
|
||||
total_reject = count_auth_logs('Access-Reject', time_range)
|
||||
total_pages_reject = ceil(total_reject / per_page)
|
||||
offset_reject = (page_reject - 1) * per_page
|
||||
reject_entries = get_latest_auth_logs('Access-Reject', per_page, time_range, offset_reject)
|
||||
|
||||
total_fallback = count_auth_logs('Accept-Fallback', time_range)
|
||||
total_pages_fallback = ceil(total_fallback / per_page)
|
||||
offset_fallback = (page_fallback - 1) * per_page
|
||||
fallback_entries = get_latest_auth_logs('Accept-Fallback', per_page, time_range, offset_fallback)
|
||||
|
||||
def enrich(entry):
|
||||
ts = entry.get('timestamp')
|
||||
if ts:
|
||||
@@ -96,9 +97,21 @@ def stats_page():
|
||||
|
||||
return entry
|
||||
|
||||
accept_entries = [enrich(e) for e in accept_entries]
|
||||
reject_entries = [enrich(e) for e in reject_entries]
|
||||
fallback_entries = [enrich(e) for e in fallback_entries]
|
||||
total_accept = count_auth_logs('Access-Accept', time_range)
|
||||
total_pages_accept = ceil(total_accept / per_page)
|
||||
offset_accept = (page_accept - 1) * per_page
|
||||
accept_entries = [enrich(e) for e in get_latest_auth_logs('Access-Accept', per_page, time_range, offset_accept)]
|
||||
|
||||
total_reject = count_auth_logs('Access-Reject', time_range)
|
||||
total_pages_reject = ceil(total_reject / per_page)
|
||||
offset_reject = (page_reject - 1) * per_page
|
||||
reject_entries = [enrich(e) for e in get_latest_auth_logs('Access-Reject', per_page, time_range, offset_reject)]
|
||||
|
||||
total_fallback = count_auth_logs('Accept-Fallback', time_range)
|
||||
total_pages_fallback = ceil(total_fallback / per_page)
|
||||
offset_fallback = (page_fallback - 1) * per_page
|
||||
fallback_entries = [enrich(e) for e in get_latest_auth_logs('Accept-Fallback', per_page, time_range, offset_fallback)]
|
||||
|
||||
available_groups = get_all_groups()
|
||||
|
||||
return render_template(
|
||||
@@ -109,23 +122,22 @@ def stats_page():
|
||||
reject_entries=reject_entries,
|
||||
fallback_entries=fallback_entries,
|
||||
available_groups=available_groups,
|
||||
|
||||
page_accept=page_accept,
|
||||
pagination_accept=get_pagination_data(page_accept, total_pages_accept),
|
||||
|
||||
page_reject=page_reject,
|
||||
pagination_reject=get_pagination_data(page_reject, total_pages_reject),
|
||||
|
||||
page_fallback=page_fallback,
|
||||
pagination_fallback=get_pagination_data(page_fallback, total_pages_fallback)
|
||||
pagination_fallback=get_pagination_data(page_fallback, total_pages_fallback),
|
||||
total_pages_accept=total_pages_accept,
|
||||
total_pages_reject=total_pages_reject,
|
||||
total_pages_fallback=total_pages_fallback
|
||||
)
|
||||
|
||||
|
||||
@stats.route('/add', methods=['POST'])
|
||||
def add():
|
||||
mac = request.form['mac_address']
|
||||
desc = request.form.get('description', '')
|
||||
group_id = request.form.get('group_id') # keep as string since VARCHAR
|
||||
group_id = request.form.get('group_id')
|
||||
current_app.logger.info(f"Received MAC={mac}, DESC={desc}, VLAN={group_id}")
|
||||
|
||||
add_user(mac, desc, group_id)
|
||||
@@ -140,14 +152,13 @@ def lookup_mac_async():
|
||||
rate_limit = int(current_app.config.get("OUI_API_LIMIT_PER_SEC", 2))
|
||||
delay = 1.0 / rate_limit if rate_limit > 0 else 0.5
|
||||
|
||||
# Lowercase cleaned prefixes
|
||||
prefixes_to_lookup = {}
|
||||
for mac in macs:
|
||||
prefix = mac.lower().replace(":", "").replace("-", "")[:6]
|
||||
prefixes_to_lookup[prefix] = mac # Use last MAC that used this prefix
|
||||
prefixes_to_lookup[prefix] = mac
|
||||
|
||||
known_vendors = get_known_mac_vendors() # local DB cache
|
||||
vendor_cache = {} # cache during this request
|
||||
known_vendors = get_known_mac_vendors()
|
||||
vendor_cache = {}
|
||||
|
||||
for prefix, mac in prefixes_to_lookup.items():
|
||||
if prefix in known_vendors:
|
||||
@@ -155,17 +166,81 @@ def lookup_mac_async():
|
||||
continue
|
||||
|
||||
if prefix in vendor_cache:
|
||||
print(f"→ Prefix {prefix} already queried in this request, skipping.")
|
||||
results[mac] = vendor_cache[prefix]
|
||||
continue
|
||||
|
||||
info = get_vendor_info(mac) # will insert into DB
|
||||
info = get_vendor_info(mac)
|
||||
vendor_name = info.get('vendor', '')
|
||||
vendor_cache[prefix] = vendor_name
|
||||
results[mac] = vendor_name
|
||||
|
||||
sleep(delay) # throttle
|
||||
sleep(delay)
|
||||
|
||||
return jsonify(results)
|
||||
|
||||
@stats.route('/fetch_stats_data')
|
||||
def fetch_stats_data():
|
||||
time_range = request.args.get('time_range', 'last_minute')
|
||||
per_page = int(request.args.get('per_page', 25))
|
||||
page_accept = int(request.args.get('page_accept', 1))
|
||||
page_reject = int(request.args.get('page_reject', 1))
|
||||
page_fallback = int(request.args.get('page_fallback', 1))
|
||||
|
||||
tz_name = current_app.config.get('APP_TIMEZONE', 'UTC')
|
||||
local_tz = pytz.timezone(tz_name)
|
||||
|
||||
def enrich(entry):
|
||||
ts = entry.get('timestamp')
|
||||
if ts:
|
||||
if ts.tzinfo is None:
|
||||
ts = ts.replace(tzinfo=timezone.utc)
|
||||
local_time = ts.astimezone(local_tz)
|
||||
entry['ago'] = humanize.naturaltime(datetime.now(local_tz) - local_time)
|
||||
else:
|
||||
entry['ago'] = 'unknown'
|
||||
|
||||
vendor_info = get_vendor_info(entry['mac_address'], insert_if_found=False)
|
||||
entry['vendor'] = vendor_info['vendor'] if vendor_info else None
|
||||
|
||||
user = get_user_by_mac(entry['mac_address'])
|
||||
entry['already_exists'] = user is not None
|
||||
entry['existing_vlan'] = user['vlan_id'] if user else None
|
||||
entry['description'] = user['description'] if user else None
|
||||
|
||||
match = re.search(r'VLAN\s+(\d+)', entry.get('result', ''))
|
||||
entry['vlan_id'] = match.group(1) if match else None
|
||||
|
||||
return entry
|
||||
|
||||
total_accept = count_auth_logs('Access-Accept', time_range)
|
||||
total_pages_accept = ceil(total_accept / per_page)
|
||||
offset_accept = (page_accept - 1) * per_page
|
||||
accept_entries = [enrich(e) for e in get_latest_auth_logs('Access-Accept', per_page, time_range, offset_accept)]
|
||||
|
||||
total_reject = count_auth_logs('Access-Reject', time_range)
|
||||
total_pages_reject = ceil(total_reject / per_page)
|
||||
offset_reject = (page_reject - 1) * per_page
|
||||
reject_entries = [enrich(e) for e in get_latest_auth_logs('Access-Reject', per_page, time_range, offset_reject)]
|
||||
|
||||
total_fallback = count_auth_logs('Accept-Fallback', time_range)
|
||||
total_pages_fallback = ceil(total_fallback / per_page)
|
||||
offset_fallback = (page_fallback - 1) * per_page
|
||||
fallback_entries = [enrich(e) for e in get_latest_auth_logs('Accept-Fallback', per_page, time_range, offset_fallback)]
|
||||
|
||||
available_groups = get_all_groups()
|
||||
|
||||
return render_template(
|
||||
"_stats_cards.html",
|
||||
time_range=time_range,
|
||||
per_page=per_page,
|
||||
page_accept=page_accept,
|
||||
pagination_accept=get_pagination_data(page_accept, total_pages_accept),
|
||||
accept_entries=accept_entries,
|
||||
page_reject=page_reject,
|
||||
pagination_reject=get_pagination_data(page_reject, total_pages_reject),
|
||||
reject_entries=reject_entries,
|
||||
page_fallback=page_fallback,
|
||||
pagination_fallback=get_pagination_data(page_fallback, total_pages_fallback),
|
||||
fallback_entries=fallback_entries,
|
||||
available_groups=available_groups
|
||||
)
|
||||
@@ -34,7 +34,7 @@ services:
|
||||
- webnet
|
||||
|
||||
app:
|
||||
image: simonclr/radmac-app:latest
|
||||
image: simonclr/radmac-app:dev
|
||||
env_file:
|
||||
- .env
|
||||
environment:
|
||||
|
||||
Reference in New Issue
Block a user