SneakyScan/web/templates/dashboard.html

{% extends "base.html" %}

{% block title %}Dashboard - SneakyScanner{% endblock %}

{% block content %}
<div class="row mt-4">
    <div class="col-12">
        <h1 class="mb-4" style="color: #60a5fa;">Dashboard</h1>
    </div>
</div>

<!-- Summary Stats -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-value" id="total-scans">-</div>
            <div class="stat-label">Total Scans</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-value" id="running-scans">-</div>
            <div class="stat-label">Running</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-value" id="completed-scans">-</div>
            <div class="stat-label">Completed</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-value" id="failed-scans">-</div>
            <div class="stat-label">Failed</div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0" style="color: #60a5fa;">Quick Actions</h5>
            </div>
            <div class="card-body">
                <button class="btn btn-primary btn-lg" onclick="showTriggerScanModal()">
                    <span id="trigger-btn-text">Run Scan Now</span>
                    <span id="trigger-btn-spinner" class="spinner-border spinner-border-sm ms-2" style="display: none;"></span>
                </button>
                <a href="{{ url_for('main.scans') }}" class="btn btn-secondary btn-lg ms-2">View All Scans</a>
            </div>
        </div>
    </div>
</div>

<!-- Recent Scans -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0" style="color: #60a5fa;">Recent Scans</h5>
                <button class="btn btn-sm btn-secondary" 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 class="card-body">
                <div id="scans-loading" class="text-center py-4">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <div id="scans-error" class="alert alert-danger" style="display: none;"></div>
                <div id="scans-empty" class="text-center py-4 text-muted" style="display: none;">
                    No scans found. Click "Run Scan Now" to trigger your first scan.
                </div>
                <div id="scans-table-container" style="display: none;">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Title</th>
                                <th>Timestamp</th>
                                <th>Duration</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="scans-tbody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Trigger Scan Modal -->
<div class="modal fade" id="triggerScanModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="background-color: #1e293b; border: 1px solid #334155;">
            <div class="modal-header" style="border-bottom: 1px solid #334155;">
                <h5 class="modal-title" style="color: #60a5fa;">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-file" class="form-label">Config File</label>
                        <input type="text"
                               class="form-control"
                               id="config-file"
                               name="config_file"
                               placeholder="/app/configs/example.yaml"
                               required>
                        <div class="form-text text-muted">Path to YAML configuration file</div>
                    </div>
                    <div id="trigger-error" class="alert alert-danger" style="display: none;"></div>
                </form>
            </div>
            <div class="modal-footer" style="border-top: 1px solid #334155;">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" 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 refreshInterval = null;

    // Load initial data when page loads
    document.addEventListener('DOMContentLoaded', function() {
        refreshScans();
        loadStats();

        // Auto-refresh every 10 seconds if there are running scans
        refreshInterval = setInterval(function() {
            const runningCount = parseInt(document.getElementById('running-scans').textContent);
            if (runningCount > 0) {
                refreshScans();
                loadStats();
            }
        }, 10000);
    });

    // Load dashboard stats
    async function loadStats() {
        try {
            const response = await fetch('/api/scans?per_page=1000');
            if (!response.ok) {
                throw new Error('Failed to load stats');
            }

            const data = await response.json();
            const scans = data.scans || [];

            document.getElementById('total-scans').textContent = scans.length;
            document.getElementById('running-scans').textContent = scans.filter(s => s.status === 'running').length;
            document.getElementById('completed-scans').textContent = scans.filter(s => s.status === 'completed').length;
            document.getElementById('failed-scans').textContent = scans.filter(s => s.status === 'failed').length;
        } catch (error) {
            console.error('Error loading stats:', error);
        }
    }

    // Refresh scans list
    async function refreshScans() {
        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');
        const refreshBtn = document.getElementById('refresh-text');
        const refreshSpinner = document.getElementById('refresh-spinner');

        // Show loading state
        loadingEl.style.display = 'block';
        errorEl.style.display = 'none';
        emptyEl.style.display = 'none';
        tableEl.style.display = 'none';
        refreshBtn.style.display = 'none';
        refreshSpinner.style.display = 'inline-block';

        try {
            const response = await fetch('/api/scans?per_page=10&page=1');
            if (!response.ok) {
                throw new Error('Failed to load scans');
            }

            const data = await response.json();
            const scans = data.scans || [];

            loadingEl.style.display = 'none';
            refreshBtn.style.display = 'inline';
            refreshSpinner.style.display = 'none';

            if (scans.length === 0) {
                emptyEl.style.display = 'block';
            } else {
                tableEl.style.display = 'block';
                renderScansTable(scans);
            }
        } catch (error) {
            console.error('Error loading scans:', error);
            loadingEl.style.display = 'none';
            refreshBtn.style.display = 'inline';
            refreshSpinner.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');

            // 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);
        });
    }

    // 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();
        modal.show();
    }

    // Trigger scan
    async function triggerScan() {
        const configFile = document.getElementById('config-file').value;
        const errorEl = document.getElementById('trigger-error');
        const btnText = document.getElementById('modal-trigger-text');
        const btnSpinner = document.getElementById('modal-trigger-spinner');

        if (!configFile) {
            errorEl.textContent = 'Please enter a config file path.';
            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_file: configFile
                })
            });

            if (!response.ok) {
                const data = await response.json();
                throw new Error(data.error || 'Failed to trigger scan');
            }

            const data = await response.json();

            // Close modal
            bootstrap.Modal.getInstance(document.getElementById('triggerScanModal')).hide();

            // Show success message
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-success alert-dismissible fade show mt-3';
            alertDiv.innerHTML = `
                Scan triggered successfully! (ID: ${data.scan_id})
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            document.querySelector('.container-fluid').insertBefore(alertDiv, document.querySelector('.row'));

            // Refresh scans and stats
            refreshScans();
            loadStats();
        } 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) {
                throw new Error('Failed to delete scan');
            }

            // Refresh scans and stats
            refreshScans();
            loadStats();
        } catch (error) {
            console.error('Error deleting scan:', error);
            alert('Failed to delete scan. Please try again.');
        }
    }
</script>
{% endblock %}