107 lines
3.7 KiB
HTML
107 lines
3.7 KiB
HTML
{% 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 %} |