init

web/templates/alerts.html

@@ -0,0 +1,107 @@
+{% extends "base.html" %}
+
+{% block title %}Alerts - A/D Infrastructure Control{% endblock %}
+
+{% block content %}
+<div class="row mb-4">
+    <div class="col-12">
+        <h1>Security Alerts <i class="bi bi-arrow-clockwise refresh-btn" id="refreshAlerts"></i></h1>
+    </div>
+</div>
+
+<div class="row mb-3">
+    <div class="col-md-8">
+        <div class="card">
+            <div class="card-body">
+                <h5>Send Test Alert</h5>
+                <div class="input-group">
+                    <input type="text" class="form-control" id="testMessage" placeholder="Enter test message">
+                    <button class="btn btn-primary" onclick="sendTestAlert()">
+                        <i class="bi bi-send"></i> Send to Telegram
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-header">
+                <h5>Alert History</h5>
+            </div>
+            <div class="card-body">
+                <div class="list-group" id="alertsList">
+                    <div class="text-center py-3">Loading...</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    function loadAlerts() {
+        $.get('/api/alerts?limit=100', function (data) {
+            if (data && data.length > 0) {
+                let html = '';
+                data.forEach(alert => {
+                    let badgeClass = alert.severity === 'critical' ? 'danger' : 'warning';
+                    let notifiedBadge = alert.notified
+                        ? '<span class="badge bg-success">Notified</span>'
+                        : '<span class="badge bg-secondary">Pending</span>';
+
+                    html += `
+                    <div class="list-group-item">
+                        <div class="d-flex justify-content-between align-items-start">
+                            <div class="flex-grow-1">
+                                <div class="mb-2">
+                                    <span class="badge bg-${badgeClass}">${alert.severity.toUpperCase()}</span>
+                                    ${notifiedBadge}
+                                    <span class="badge bg-info">${alert.alert_type}</span>
+                                    <small class="text-muted ms-2">${new Date(alert.created_at).toLocaleString()}</small>
+                                </div>
+                                <p class="mb-0">${alert.message}</p>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                });
+                $('#alertsList').html(html);
+            } else {
+                $('#alertsList').html('<div class="text-center py-3 text-muted">No alerts</div>');
+            }
+        });
+    }
+
+    function sendTestAlert() {
+        const message = $('#testMessage').val();
+        if (!message) {
+            alert('Please enter a message');
+            return;
+        }
+
+        $.ajax({
+            url: '/api/telegram/send',
+            method: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify({ message: message }),
+            success: function (data) {
+                alert('Message sent to Telegram!');
+                $('#testMessage').val('');
+            },
+            error: function (xhr) {
+                alert(`Failed to send message: ${xhr.responseJSON?.detail || 'Unknown error'}`);
+            }
+        });
+    }
+
+    $(document).ready(function () {
+        loadAlerts();
+        $('#refreshAlerts').click(loadAlerts);
+        setInterval(loadAlerts, 10000); // Auto-refresh every 10 seconds
+    });
+</script>
+{% endblock %}