init
This commit is contained in:
137
web/templates/index.html
Normal file
137
web/templates/index.html
Normal file
@@ -0,0 +1,137 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Dashboard - A/D Infrastructure Control{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<h1>Dashboard <i class="bi bi-arrow-clockwise refresh-btn" id="refreshDashboard"></i></h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-3">
|
||||
<div class="card stat-card">
|
||||
<div class="card-body">
|
||||
<h6 class="text-muted">Total Services</h6>
|
||||
<h2 id="totalServices">-</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card stat-card success">
|
||||
<div class="card-body">
|
||||
<h6 class="text-muted">Our Attacks</h6>
|
||||
<h2 id="ourAttacks">-</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card stat-card danger">
|
||||
<div class="card-body">
|
||||
<h6 class="text-muted">Attacks to Us</h6>
|
||||
<h2 id="attacksToUs">-</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card stat-card warning">
|
||||
<div class="card-body">
|
||||
<h6 class="text-muted">Critical Alerts</h6>
|
||||
<h2 id="criticalAlerts">-</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5>Services Status</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="servicesStatus" class="list-group">
|
||||
<div class="text-center py-3">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5>Recent Alerts</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="recentAlerts" class="list-group">
|
||||
<div class="text-center py-3">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
function loadDashboard() {
|
||||
$.get('/api/dashboard', function (data) {
|
||||
// Update stats
|
||||
$('#totalServices').text(data.services ? data.services.length : 0);
|
||||
$('#ourAttacks').text(data.scoreboard?.attacks_by_us || 0);
|
||||
$('#attacksToUs').text(data.scoreboard?.attacks_to_us || 0);
|
||||
$('#criticalAlerts').text(data.scoreboard?.critical_alerts_5min || 0);
|
||||
|
||||
// Update services status
|
||||
if (data.services && data.services.length > 0) {
|
||||
let html = '';
|
||||
data.services.forEach(service => {
|
||||
let statusClass = service.status === 'running' ? 'service-running' : 'service-stopped';
|
||||
let icon = service.status === 'running' ? 'check-circle-fill' : 'x-circle-fill';
|
||||
html += `
|
||||
<div class="list-group-item">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span>${service.name}</span>
|
||||
<span class="${statusClass}">
|
||||
<i class="bi bi-${icon}"></i> ${service.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
$('#servicesStatus').html(html);
|
||||
}
|
||||
});
|
||||
|
||||
// Load recent alerts
|
||||
$.get('/api/alerts?limit=5', function (data) {
|
||||
if (data && data.length > 0) {
|
||||
let html = '';
|
||||
data.forEach(alert => {
|
||||
let badgeClass = alert.severity === 'critical' ? 'danger' : 'warning';
|
||||
html += `
|
||||
<div class="list-group-item">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<span class="badge bg-${badgeClass}">${alert.severity}</span>
|
||||
<small class="text-muted ms-2">${new Date(alert.created_at).toLocaleString()}</small>
|
||||
<p class="mb-0 mt-1">${alert.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
$('#recentAlerts').html(html);
|
||||
} else {
|
||||
$('#recentAlerts').html('<div class="text-center py-3 text-muted">No alerts</div>');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
loadDashboard();
|
||||
$('#refreshDashboard').click(loadDashboard);
|
||||
setInterval(loadDashboard, 10000); // Auto-refresh every 10 seconds
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user