Phillip Tarrant
7437716613
- Save JSON/HTML/ZIP paths to database when scans complete - Remove orphaned scan-config-id reference causing JS errors - Add showAlert function to scan_detail.html and scans.html - Increase notification z-index to 9999 for modal visibility - Replace inline alert creation with consistent toast notifications
521 lines
20 KiB
HTML
521 lines
20 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}All Scans - SneakyScanner{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row mt-4">
|
|
<div class="col-12 d-flex justify-content-between align-items-center mb-4">
|
|
<h1>All Scans</h1>
|
|
<button class="btn btn-primary" onclick="showTriggerScanModal()">
|
|
<span id="trigger-btn-text">Trigger New Scan</span>
|
|
<span id="trigger-btn-spinner" class="spinner-border spinner-border-sm ms-2" style="display: none;"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<label for="status-filter" class="form-label">Filter by Status</label>
|
|
<select class="form-select" id="status-filter" onchange="filterScans()">
|
|
<option value="">All Statuses</option>
|
|
<option value="running">Running</option>
|
|
<option value="completed">Completed</option>
|
|
<option value="failed">Failed</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="per-page" class="form-label">Results per Page</label>
|
|
<select class="form-select" id="per-page" onchange="changePerPage()">
|
|
<option value="10">10</option>
|
|
<option value="20" selected>20</option>
|
|
<option value="50">50</option>
|
|
<option value="100">100</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-end">
|
|
<button class="btn btn-secondary w-100" onclick="refreshScans()">
|
|
<span id="refresh-text">Refresh</span>
|
|
<span id="refresh-spinner" class="spinner-border spinner-border-sm ms-1" style="display: none;"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scans Table -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Scan History</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="scans-loading" class="text-center py-5">
|
|
<div class="spinner-border" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p class="mt-3 text-muted">Loading scans...</p>
|
|
</div>
|
|
<div id="scans-error" class="alert alert-danger" style="display: none;"></div>
|
|
<div id="scans-empty" class="text-center py-5 text-muted" style="display: none;">
|
|
<h5>No scans found</h5>
|
|
<p>Click "Trigger New Scan" to create your first scan.</p>
|
|
</div>
|
|
<div id="scans-table-container" style="display: none;">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 80px;">ID</th>
|
|
<th>Title</th>
|
|
<th style="width: 200px;">Timestamp</th>
|
|
<th style="width: 100px;">Duration</th>
|
|
<th style="width: 120px;">Status</th>
|
|
<th style="width: 200px;">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="scans-tbody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
|
<div class="text-muted">
|
|
Showing <span id="showing-start">0</span> to <span id="showing-end">0</span> of <span id="total-count">0</span> scans
|
|
</div>
|
|
<nav>
|
|
<ul class="pagination mb-0" id="pagination">
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trigger Scan Modal -->
|
|
<div class="modal fade" id="triggerScanModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Trigger New Scan</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="trigger-scan-form">
|
|
<div class="mb-3">
|
|
<label for="config-select" class="form-label">Scan Configuration</label>
|
|
<select class="form-select" id="config-select" name="config_id" required>
|
|
<option value="">Loading configurations...</option>
|
|
</select>
|
|
<div class="form-text text-muted" id="config-help-text">
|
|
Select a scan configuration
|
|
</div>
|
|
<div id="no-configs-warning" class="alert alert-warning mt-2 mb-0" role="alert" style="display: none;">
|
|
<i class="bi bi-exclamation-triangle"></i>
|
|
<strong>No configurations available</strong>
|
|
<p class="mb-2 mt-2">You need to create a configuration before you can trigger a scan.</p>
|
|
<a href="{{ url_for('main.configs') }}" class="btn btn-sm btn-primary">
|
|
<i class="bi bi-plus-circle"></i> Create Configuration
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div id="trigger-error" class="alert alert-danger" style="display: none;"></div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="trigger-scan-btn" onclick="triggerScan()">
|
|
<span id="modal-trigger-text">Trigger Scan</span>
|
|
<span id="modal-trigger-spinner" class="spinner-border spinner-border-sm ms-2" style="display: none;"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
let currentPage = 1;
|
|
let perPage = 20;
|
|
let statusFilter = '';
|
|
let totalCount = 0;
|
|
|
|
// Show alert notification
|
|
function showAlert(type, message) {
|
|
const container = document.getElementById('notification-container');
|
|
const notification = document.createElement('div');
|
|
notification.className = `alert alert-${type} alert-dismissible fade show mb-2`;
|
|
|
|
notification.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
`;
|
|
|
|
container.appendChild(notification);
|
|
|
|
// Auto-dismiss after 5 seconds
|
|
setTimeout(() => {
|
|
notification.remove();
|
|
}, 5000);
|
|
}
|
|
|
|
// Load initial data when page loads
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadScans();
|
|
|
|
// Auto-refresh every 15 seconds
|
|
setInterval(function() {
|
|
loadScans();
|
|
}, 15000);
|
|
});
|
|
|
|
// Load scans from API
|
|
async function loadScans() {
|
|
const loadingEl = document.getElementById('scans-loading');
|
|
const errorEl = document.getElementById('scans-error');
|
|
const emptyEl = document.getElementById('scans-empty');
|
|
const tableEl = document.getElementById('scans-table-container');
|
|
|
|
// Show loading state
|
|
loadingEl.style.display = 'block';
|
|
errorEl.style.display = 'none';
|
|
emptyEl.style.display = 'none';
|
|
tableEl.style.display = 'none';
|
|
|
|
try {
|
|
let url = `/api/scans?page=${currentPage}&per_page=${perPage}`;
|
|
if (statusFilter) {
|
|
url += `&status=${statusFilter}`;
|
|
}
|
|
|
|
const response = await fetch(url);
|
|
if (!response.ok) {
|
|
throw new Error('Failed to load scans');
|
|
}
|
|
|
|
const data = await response.json();
|
|
const scans = data.scans || [];
|
|
totalCount = data.total || 0;
|
|
|
|
loadingEl.style.display = 'none';
|
|
|
|
if (scans.length === 0) {
|
|
emptyEl.style.display = 'block';
|
|
} else {
|
|
tableEl.style.display = 'block';
|
|
renderScansTable(scans);
|
|
renderPagination(data.page, data.per_page, data.total, data.pages);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading scans:', error);
|
|
loadingEl.style.display = 'none';
|
|
errorEl.textContent = 'Failed to load scans. Please try again.';
|
|
errorEl.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
// Render scans table
|
|
function renderScansTable(scans) {
|
|
const tbody = document.getElementById('scans-tbody');
|
|
tbody.innerHTML = '';
|
|
|
|
scans.forEach(scan => {
|
|
const row = document.createElement('tr');
|
|
row.classList.add('scan-row'); // Fix white row bug
|
|
|
|
// Format timestamp
|
|
const timestamp = new Date(scan.timestamp).toLocaleString();
|
|
|
|
// Format duration
|
|
const duration = scan.duration ? `${scan.duration.toFixed(1)}s` : '-';
|
|
|
|
// Status badge
|
|
let statusBadge = '';
|
|
if (scan.status === 'completed') {
|
|
statusBadge = '<span class="badge badge-success">Completed</span>';
|
|
} else if (scan.status === 'running') {
|
|
statusBadge = '<span class="badge badge-info">Running</span>';
|
|
} else if (scan.status === 'failed') {
|
|
statusBadge = '<span class="badge badge-danger">Failed</span>';
|
|
} else {
|
|
statusBadge = `<span class="badge badge-info">${scan.status}</span>`;
|
|
}
|
|
|
|
row.innerHTML = `
|
|
<td class="mono">${scan.id}</td>
|
|
<td>${scan.title || 'Untitled Scan'}</td>
|
|
<td class="text-muted">${timestamp}</td>
|
|
<td class="mono">${duration}</td>
|
|
<td>${statusBadge}</td>
|
|
<td>
|
|
<a href="/scans/${scan.id}" class="btn btn-sm btn-secondary">View</a>
|
|
${scan.status !== 'running' ? `<button class="btn btn-sm btn-danger ms-1" onclick="deleteScan(${scan.id})">Delete</button>` : ''}
|
|
</td>
|
|
`;
|
|
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
// Render pagination
|
|
function renderPagination(page, per_page, total, pages) {
|
|
const paginationEl = document.getElementById('pagination');
|
|
paginationEl.innerHTML = '';
|
|
|
|
// Update showing text
|
|
const start = (page - 1) * per_page + 1;
|
|
const end = Math.min(page * per_page, total);
|
|
document.getElementById('showing-start').textContent = start;
|
|
document.getElementById('showing-end').textContent = end;
|
|
document.getElementById('total-count').textContent = total;
|
|
|
|
if (pages <= 1) {
|
|
return;
|
|
}
|
|
|
|
// Previous button
|
|
const prevLi = document.createElement('li');
|
|
prevLi.className = `page-item ${page === 1 ? 'disabled' : ''}`;
|
|
prevLi.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${page - 1}); return false;">Previous</a>`;
|
|
paginationEl.appendChild(prevLi);
|
|
|
|
// Page numbers
|
|
const maxPagesToShow = 5;
|
|
let startPage = Math.max(1, page - Math.floor(maxPagesToShow / 2));
|
|
let endPage = Math.min(pages, startPage + maxPagesToShow - 1);
|
|
|
|
if (endPage - startPage < maxPagesToShow - 1) {
|
|
startPage = Math.max(1, endPage - maxPagesToShow + 1);
|
|
}
|
|
|
|
if (startPage > 1) {
|
|
const firstLi = document.createElement('li');
|
|
firstLi.className = 'page-item';
|
|
firstLi.innerHTML = `<a class="page-link" href="#" onclick="goToPage(1); return false;">1</a>`;
|
|
paginationEl.appendChild(firstLi);
|
|
|
|
if (startPage > 2) {
|
|
const ellipsisLi = document.createElement('li');
|
|
ellipsisLi.className = 'page-item disabled';
|
|
ellipsisLi.innerHTML = '<a class="page-link" href="#">...</a>';
|
|
paginationEl.appendChild(ellipsisLi);
|
|
}
|
|
}
|
|
|
|
for (let i = startPage; i <= endPage; i++) {
|
|
const pageLi = document.createElement('li');
|
|
pageLi.className = `page-item ${i === page ? 'active' : ''}`;
|
|
pageLi.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${i}); return false;">${i}</a>`;
|
|
paginationEl.appendChild(pageLi);
|
|
}
|
|
|
|
if (endPage < pages) {
|
|
if (endPage < pages - 1) {
|
|
const ellipsisLi = document.createElement('li');
|
|
ellipsisLi.className = 'page-item disabled';
|
|
ellipsisLi.innerHTML = '<a class="page-link" href="#">...</a>';
|
|
paginationEl.appendChild(ellipsisLi);
|
|
}
|
|
|
|
const lastLi = document.createElement('li');
|
|
lastLi.className = 'page-item';
|
|
lastLi.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${pages}); return false;">${pages}</a>`;
|
|
paginationEl.appendChild(lastLi);
|
|
}
|
|
|
|
// Next button
|
|
const nextLi = document.createElement('li');
|
|
nextLi.className = `page-item ${page === pages ? 'disabled' : ''}`;
|
|
nextLi.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${page + 1}); return false;">Next</a>`;
|
|
paginationEl.appendChild(nextLi);
|
|
}
|
|
|
|
// Navigation functions
|
|
function goToPage(page) {
|
|
currentPage = page;
|
|
loadScans();
|
|
}
|
|
|
|
function filterScans() {
|
|
statusFilter = document.getElementById('status-filter').value;
|
|
currentPage = 1;
|
|
loadScans();
|
|
}
|
|
|
|
function changePerPage() {
|
|
perPage = parseInt(document.getElementById('per-page').value);
|
|
currentPage = 1;
|
|
loadScans();
|
|
}
|
|
|
|
function refreshScans() {
|
|
const refreshBtn = document.getElementById('refresh-text');
|
|
const refreshSpinner = document.getElementById('refresh-spinner');
|
|
|
|
refreshBtn.style.display = 'none';
|
|
refreshSpinner.style.display = 'inline-block';
|
|
|
|
loadScans().finally(() => {
|
|
refreshBtn.style.display = 'inline';
|
|
refreshSpinner.style.display = 'none';
|
|
});
|
|
}
|
|
|
|
// Load available configs
|
|
async function loadConfigs() {
|
|
const selectEl = document.getElementById('config-select');
|
|
const helpTextEl = document.getElementById('config-help-text');
|
|
const noConfigsWarning = document.getElementById('no-configs-warning');
|
|
const triggerBtn = document.getElementById('trigger-scan-btn');
|
|
|
|
try {
|
|
const response = await fetch('/api/configs');
|
|
if (!response.ok) {
|
|
throw new Error('Failed to load configurations');
|
|
}
|
|
|
|
const data = await response.json();
|
|
const configs = data.configs || [];
|
|
|
|
// Clear existing options
|
|
selectEl.innerHTML = '';
|
|
|
|
if (configs.length === 0) {
|
|
selectEl.innerHTML = '<option value="">No configurations available</option>';
|
|
selectEl.disabled = true;
|
|
triggerBtn.disabled = true;
|
|
helpTextEl.style.display = 'none';
|
|
noConfigsWarning.style.display = 'block';
|
|
} else {
|
|
selectEl.innerHTML = '<option value="">Select a configuration...</option>';
|
|
configs.forEach(config => {
|
|
const option = document.createElement('option');
|
|
option.value = config.id;
|
|
const siteText = config.site_count === 1 ? 'site' : 'sites';
|
|
option.textContent = `${config.title} (${config.site_count} ${siteText})`;
|
|
selectEl.appendChild(option);
|
|
});
|
|
selectEl.disabled = false;
|
|
triggerBtn.disabled = false;
|
|
helpTextEl.style.display = 'block';
|
|
noConfigsWarning.style.display = 'none';
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading configs:', error);
|
|
selectEl.innerHTML = '<option value="">Error loading configurations</option>';
|
|
selectEl.disabled = true;
|
|
triggerBtn.disabled = true;
|
|
helpTextEl.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Show trigger scan modal
|
|
function showTriggerScanModal() {
|
|
const modal = new bootstrap.Modal(document.getElementById('triggerScanModal'));
|
|
document.getElementById('trigger-error').style.display = 'none';
|
|
document.getElementById('trigger-scan-form').reset();
|
|
|
|
// Load configs when modal is shown
|
|
loadConfigs();
|
|
|
|
modal.show();
|
|
}
|
|
|
|
// Trigger scan
|
|
async function triggerScan() {
|
|
const configId = document.getElementById('config-select').value;
|
|
const errorEl = document.getElementById('trigger-error');
|
|
const btnText = document.getElementById('modal-trigger-text');
|
|
const btnSpinner = document.getElementById('modal-trigger-spinner');
|
|
|
|
if (!configId) {
|
|
errorEl.textContent = 'Please select a configuration.';
|
|
errorEl.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
// Show loading state
|
|
btnText.style.display = 'none';
|
|
btnSpinner.style.display = 'inline-block';
|
|
errorEl.style.display = 'none';
|
|
|
|
try {
|
|
const response = await fetch('/api/scans', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
config_id: parseInt(configId)
|
|
})
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.message || data.error || 'Failed to trigger scan');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
// Hide error before closing modal to prevent flash
|
|
errorEl.style.display = 'none';
|
|
|
|
// Close modal
|
|
bootstrap.Modal.getInstance(document.getElementById('triggerScanModal')).hide();
|
|
|
|
// Show success message
|
|
showAlert('success', `Scan triggered successfully! (ID: ${data.scan_id})`);
|
|
|
|
// Refresh scans
|
|
loadScans();
|
|
} catch (error) {
|
|
console.error('Error triggering scan:', error);
|
|
errorEl.textContent = error.message;
|
|
errorEl.style.display = 'block';
|
|
} finally {
|
|
btnText.style.display = 'inline';
|
|
btnSpinner.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Delete scan
|
|
async function deleteScan(scanId) {
|
|
if (!confirm(`Are you sure you want to delete scan ${scanId}?`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/scans/${scanId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.message || 'Failed to delete scan');
|
|
}
|
|
|
|
// Show success message
|
|
showAlert('success', `Scan ${scanId} deleted successfully.`);
|
|
|
|
// Refresh scans
|
|
loadScans();
|
|
} catch (error) {
|
|
console.error('Error deleting scan:', error);
|
|
showAlert('danger', `Failed to delete scan: ${error.message}`);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
{% endblock %}
|