SneakyScan/app/web/templates/alert_rules.html

{% extends "base.html" %}

{% block title %}Alert Rules - SneakyScanner{% endblock %}

{% block content %}
<div class="row mt-4">
    <div class="col-12 d-flex justify-content-between align-items-center mb-4">
        <h1>Alert Rules</h1>
        <div>
            <a href="{{ url_for('main.alerts') }}" class="btn btn-outline-primary me-2">
                <i class="bi bi-bell"></i> View Alerts
            </a>
            <button class="btn btn-primary" onclick="showCreateRuleModal()">
                <i class="bi bi-plus-circle"></i> Create Rule
            </button>
        </div>
    </div>
</div>

<!-- Rule Statistics -->
<div class="row mb-4">
    <div class="col-md-6 mb-3">
        <div class="card">
            <div class="card-body">
                <h6 class="text-muted mb-2">Total Rules</h6>
                <h3 class="mb-0">{{ rules | length }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-6 mb-3">
        <div class="card">
            <div class="card-body">
                <h6 class="text-muted mb-2">Active Rules</h6>
                <h3 class="mb-0 text-success">{{ rules | selectattr('enabled') | list | length }}</h3>
            </div>
        </div>
    </div>
</div>

<!-- Rules Table -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Alert Rules Configuration</h5>
            </div>
            <div class="card-body">
                {% if rules %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Severity</th>
                                <th>Threshold</th>
                                <th>Config</th>
                                <th>Notifications</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for rule in rules %}
                            <tr>
                                <td>
                                    <strong>{{ rule.name or 'Unnamed Rule' }}</strong>
                                    <br>
                                    <small class="text-muted">ID: {{ rule.id }}</small>
                                </td>
                                <td>
                                    <span class="badge bg-secondary">
                                        {{ rule.rule_type.replace('_', ' ').title() }}
                                    </span>
                                </td>
                                <td>
                                    {% if rule.severity == 'critical' %}
                                    <span class="badge bg-danger">Critical</span>
                                    {% elif rule.severity == 'warning' %}
                                    <span class="badge bg-warning">Warning</span>
                                    {% else %}
                                    <span class="badge bg-info">{{ rule.severity or 'Info' }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if rule.threshold %}
                                        {% if rule.rule_type == 'cert_expiry' %}
                                            {{ rule.threshold }} days
                                        {% elif rule.rule_type == 'drift_detection' %}
                                            {{ rule.threshold }}%
                                        {% else %}
                                            {{ rule.threshold }}
                                        {% endif %}
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if rule.config %}
                                        <small class="text-muted">{{ rule.config.title }}</small>
                                    {% else %}
                                        <span class="badge bg-primary">All Configs</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if rule.email_enabled %}
                                        <i class="bi bi-envelope-fill text-primary" title="Email enabled"></i>
                                    {% endif %}
                                    {% if rule.webhook_enabled %}
                                        <i class="bi bi-send-fill text-primary" title="Webhook enabled"></i>
                                    {% endif %}
                                    {% if not rule.email_enabled and not rule.webhook_enabled %}
                                        <span class="text-muted">None</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox"
                                               id="rule-enabled-{{ rule.id }}"
                                               {% if rule.enabled %}checked{% endif %}
                                               onchange="toggleRule({{ rule.id }}, this.checked)">
                                        <label class="form-check-label" for="rule-enabled-{{ rule.id }}">
                                            {% if rule.enabled %}
                                                <span class="text-success ms-2">Active</span>
                                            {% else %}
                                                <span class="text-muted ms-2">Inactive</span>
                                            {% endif %}
                                        </label>
                                    </div>
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary" onclick="editRule({{ rule.id }})">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" onclick="deleteRule({{ rule.id }}, '{{ rule.name }}')">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-5 text-muted">
                    <i class="bi bi-bell-slash" style="font-size: 3rem;"></i>
                    <h5 class="mt-3">No alert rules configured</h5>
                    <p>Create alert rules to be notified of important scan findings.</p>
                    <button class="btn btn-primary mt-3" onclick="showCreateRuleModal()">
                        <i class="bi bi-plus-circle"></i> Create Your First Rule
                    </button>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Create/Edit Rule Modal -->
<div class="modal fade" id="ruleModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ruleModalTitle">Create Alert Rule</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="ruleForm">
                    <input type="hidden" id="rule-id">

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="rule-name" class="form-label">Rule Name</label>
                            <input type="text" class="form-control" id="rule-name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="rule-type" class="form-label">Rule Type</label>
                            <select class="form-select" id="rule-type" required onchange="updateThresholdLabel()">
                                <option value="">Select a type...</option>
                                <option value="unexpected_port">Unexpected Port Detection</option>
                                <option value="drift_detection">Drift Detection</option>
                                <option value="cert_expiry">Certificate Expiry</option>
                                <option value="weak_tls">Weak TLS Version</option>
                                <option value="ping_failed">Ping Failed</option>
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="rule-severity" class="form-label">Severity</label>
                            <select class="form-select" id="rule-severity" required>
                                <option value="info">Info</option>
                                <option value="warning" selected>Warning</option>
                                <option value="critical">Critical</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="rule-threshold" class="form-label" id="threshold-label">Threshold</label>
                            <input type="number" class="form-control" id="rule-threshold">
                            <small class="form-text text-muted" id="threshold-help">
                                Numeric value that triggers the alert (varies by rule type)
                            </small>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="rule-config" class="form-label">Apply to Config (optional)</label>
                            <select class="form-select" id="rule-config">
                                <option value="">All Configs (Apply to all scans)</option>
                            </select>
                            <small class="form-text text-muted" id="config-help-text">
                                Select a specific config to limit this rule, or leave as "All Configs" to apply to all scans
                            </small>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="rule-email">
                                <label class="form-check-label" for="rule-email">
                                    Send Email Notifications
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="rule-webhook">
                                <label class="form-check-label" for="rule-webhook">
                                    Send Webhook Notifications
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="rule-enabled" checked>
                                <label class="form-check-label" for="rule-enabled">
                                    Enable this rule immediately
                                </label>
                            </div>
                        </div>
                    </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" onclick="saveRule()">
                    <span id="save-rule-text">Create Rule</span>
                    <span id="save-rule-spinner" class="spinner-border spinner-border-sm ms-2" style="display: none;"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let editingRuleId = null;

// Load available configs for the dropdown
async function loadConfigsForRule() {
    const selectEl = document.getElementById('rule-config');

    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 || [];

        // Preserve the "All Configs" option and current selection
        const currentValue = selectEl.value;
        selectEl.innerHTML = '<option value="">All Configs (Apply to all scans)</option>';

        configs.forEach(config => {
            const option = document.createElement('option');
            // Store the config ID as the value
            option.value = config.id;
            const siteText = config.site_count === 1 ? 'site' : 'sites';
            option.textContent = `${config.title} (${config.site_count} ${siteText})`;
            selectEl.appendChild(option);
        });

        // Restore selection if it was set
        if (currentValue) {
            selectEl.value = currentValue;
        }
    } catch (error) {
        console.error('Error loading configs:', error);
    }
}

function showCreateRuleModal() {
    editingRuleId = null;
    document.getElementById('ruleModalTitle').textContent = 'Create Alert Rule';
    document.getElementById('save-rule-text').textContent = 'Create Rule';
    document.getElementById('ruleForm').reset();
    document.getElementById('rule-enabled').checked = true;

    // Load configs when modal is shown
    loadConfigsForRule();

    new bootstrap.Modal(document.getElementById('ruleModal')).show();
}

function editRule(ruleId) {
    editingRuleId = ruleId;
    document.getElementById('ruleModalTitle').textContent = 'Edit Alert Rule';
    document.getElementById('save-rule-text').textContent = 'Update Rule';

    // Load configs first, then fetch rule details
    loadConfigsForRule().then(() => {
        // Fetch rule details
        fetch(`/api/alerts/rules`, {
            headers: {
                'X-API-Key': localStorage.getItem('api_key') || ''
            }
        })
        .then(response => response.json())
        .then(data => {
            const rule = data.rules.find(r => r.id === ruleId);
            if (rule) {
                document.getElementById('rule-id').value = rule.id;
                document.getElementById('rule-name').value = rule.name || '';
                document.getElementById('rule-type').value = rule.rule_type;
                document.getElementById('rule-severity').value = rule.severity || 'warning';
                document.getElementById('rule-threshold').value = rule.threshold || '';
                document.getElementById('rule-config').value = rule.config_id || '';
                document.getElementById('rule-email').checked = rule.email_enabled;
                document.getElementById('rule-webhook').checked = rule.webhook_enabled;
                document.getElementById('rule-enabled').checked = rule.enabled;

                updateThresholdLabel();
                new bootstrap.Modal(document.getElementById('ruleModal')).show();
            }
        })
        .catch(error => {
            console.error('Error fetching rule:', error);
            alert('Failed to load rule details');
        });
    });
}

function updateThresholdLabel() {
    const ruleType = document.getElementById('rule-type').value;
    const label = document.getElementById('threshold-label');
    const help = document.getElementById('threshold-help');

    switch(ruleType) {
        case 'cert_expiry':
            label.textContent = 'Days Before Expiry';
            help.textContent = 'Alert when certificate expires within this many days (default: 30)';
            break;
        case 'drift_detection':
            label.textContent = 'Drift Percentage';
            help.textContent = 'Alert when drift exceeds this percentage (0-100, default: 5)';
            break;
        case 'unexpected_port':
            label.textContent = 'Threshold (optional)';
            help.textContent = 'Leave blank - this rule alerts on any port not in your config file';
            break;
        case 'weak_tls':
            label.textContent = 'Threshold (optional)';
            help.textContent = 'Leave blank - this rule alerts on TLS versions below 1.2';
            break;
        case 'ping_failed':
            label.textContent = 'Threshold (optional)';
            help.textContent = 'Leave blank - this rule alerts when a host fails to respond to ping';
            break;
        default:
            label.textContent = 'Threshold';
            help.textContent = 'Numeric value that triggers the alert (select a rule type for specific guidance)';
    }
}

function saveRule() {
    const name = document.getElementById('rule-name').value;
    const ruleType = document.getElementById('rule-type').value;
    const severity = document.getElementById('rule-severity').value;
    const threshold = document.getElementById('rule-threshold').value;
    const configId = document.getElementById('rule-config').value;
    const emailEnabled = document.getElementById('rule-email').checked;
    const webhookEnabled = document.getElementById('rule-webhook').checked;
    const enabled = document.getElementById('rule-enabled').checked;

    if (!name || !ruleType) {
        alert('Please fill in required fields');
        return;
    }

    const data = {
        name: name,
        rule_type: ruleType,
        severity: severity,
        threshold: threshold ? parseInt(threshold) : null,
        config_id: configId ? parseInt(configId) : null,
        email_enabled: emailEnabled,
        webhook_enabled: webhookEnabled,
        enabled: enabled
    };

    // Show spinner
    document.getElementById('save-rule-text').style.display = 'none';
    document.getElementById('save-rule-spinner').style.display = 'inline-block';

    const url = editingRuleId
        ? `/api/alerts/rules/${editingRuleId}`
        : '/api/alerts/rules';
    const method = editingRuleId ? 'PUT' : 'POST';

    fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json',
            'X-API-Key': localStorage.getItem('api_key') || ''
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            location.reload();
        } else {
            alert('Failed to save rule: ' + (data.message || 'Unknown error'));
            // Hide spinner
            document.getElementById('save-rule-text').style.display = 'inline';
            document.getElementById('save-rule-spinner').style.display = 'none';
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to save rule');
        // Hide spinner
        document.getElementById('save-rule-text').style.display = 'inline';
        document.getElementById('save-rule-spinner').style.display = 'none';
    });
}

function toggleRule(ruleId, enabled) {
    fetch(`/api/alerts/rules/${ruleId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-API-Key': localStorage.getItem('api_key') || ''
        },
        body: JSON.stringify({ enabled: enabled })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status !== 'success') {
            alert('Failed to update rule status');
            // Revert checkbox
            document.getElementById(`rule-enabled-${ruleId}`).checked = !enabled;
        } else {
            // Update label
            const label = document.querySelector(`label[for="rule-enabled-${ruleId}"] span`);
            if (enabled) {
                label.className = 'text-success';
                label.textContent = 'Active';
            } else {
                label.className = 'text-muted';
                label.textContent = 'Inactive';
            }
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to update rule status');
        // Revert checkbox
        document.getElementById(`rule-enabled-${ruleId}`).checked = !enabled;
    });
}

function deleteRule(ruleId, ruleName) {
    if (!confirm(`Delete alert rule "${ruleName}"? This cannot be undone.`)) {
        return;
    }

    fetch(`/api/alerts/rules/${ruleId}`, {
        method: 'DELETE',
        headers: {
            'X-API-Key': localStorage.getItem('api_key') || ''
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            location.reload();
        } else {
            alert('Failed to delete rule: ' + (data.message || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to delete rule');
    });
}
</script>
{% endblock %}