244 lines
9.7 KiB
HTML
244 lines
9.7 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Supervision - Tableau de bord{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h4 class="mb-0">
|
|
<i class="bi bi-speedometer2"></i> Tableau de bord
|
|
{% if metrics and metrics.hostname %}
|
|
<small class="text-muted">— {{ metrics.hostname }}</small>
|
|
{% endif %}
|
|
</h4>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span id="last-update" class="text-muted small"></span>
|
|
<form method="POST" action="/api/monitoring/toggle" class="d-inline">
|
|
{% if metrics and metrics.monitoring_active %}
|
|
<button type="submit" class="btn btn-sm btn-outline-warning">
|
|
<i class="bi bi-pause-circle"></i> Pause
|
|
</button>
|
|
{% else %}
|
|
<button type="submit" class="btn btn-sm btn-outline-success">
|
|
<i class="bi bi-play-circle"></i> Démarrer
|
|
</button>
|
|
{% endif %}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{% if not metrics %}
|
|
<div class="alert alert-info">
|
|
<i class="bi bi-hourglass-split"></i> Collecte des métriques en cours...
|
|
</div>
|
|
{% else %}
|
|
|
|
<!-- Infos système -->
|
|
<div class="row mb-3">
|
|
<div class="col-12">
|
|
<div class="card bg-dark text-light">
|
|
<div class="card-body py-2 d-flex gap-4 flex-wrap small">
|
|
<span><i class="bi bi-pc-display"></i> <strong id="sys-hostname">{{ metrics.hostname }}</strong></span>
|
|
<span><i class="bi bi-windows"></i> <span id="sys-os">{{ metrics.os }}</span></span>
|
|
<span><i class="bi bi-clock-history"></i> Uptime: <span id="sys-uptime">{{ metrics.uptime }}</span></span>
|
|
<span><i class="bi bi-cpu"></i> <span id="sys-cores">{{ metrics.cpu.cores }}</span> cœurs</span>
|
|
<span><i class="bi bi-memory"></i> <span id="sys-ram-total">{{ metrics.ram.total_gb }}</span> Go RAM</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Métriques principales -->
|
|
<div class="row mb-3" id="main-metrics">
|
|
<!-- CPU -->
|
|
<div class="col-md-4 mb-3">
|
|
<div class="card metric-card" id="card-cpu">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<h6 class="card-title"><i class="bi bi-cpu"></i> CPU</h6>
|
|
<span class="badge" id="badge-cpu">{{ metrics.cpu.status }}</span>
|
|
</div>
|
|
<div class="metric-value" id="val-cpu">{{ metrics.cpu.percent }}%</div>
|
|
<div class="progress mt-2" style="height: 8px;">
|
|
<div class="progress-bar" id="bar-cpu" role="progressbar"
|
|
style="width: {{ metrics.cpu.percent }}%"></div>
|
|
</div>
|
|
<small class="text-muted">Seuil: <span id="thresh-cpu">{{ metrics.cpu.threshold }}</span>%</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- RAM -->
|
|
<div class="col-md-4 mb-3">
|
|
<div class="card metric-card" id="card-ram">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<h6 class="card-title"><i class="bi bi-memory"></i> RAM</h6>
|
|
<span class="badge" id="badge-ram">{{ metrics.ram.status }}</span>
|
|
</div>
|
|
<div class="metric-value" id="val-ram">{{ metrics.ram.percent }}%</div>
|
|
<div class="progress mt-2" style="height: 8px;">
|
|
<div class="progress-bar" id="bar-ram" role="progressbar"
|
|
style="width: {{ metrics.ram.percent }}%"></div>
|
|
</div>
|
|
<small class="text-muted">
|
|
<span id="ram-used">{{ metrics.ram.used_gb }}</span> /
|
|
<span id="ram-total">{{ metrics.ram.total_gb }}</span> Go
|
|
— Seuil: <span id="thresh-ram">{{ metrics.ram.threshold }}</span>%
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Disques -->
|
|
{% for disk in metrics.disks %}
|
|
<div class="col-md-4 mb-3">
|
|
<div class="card metric-card" id="card-disk-{{ loop.index0 }}">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<h6 class="card-title"><i class="bi bi-hdd"></i> {{ disk.drive }}</h6>
|
|
<span class="badge" id="badge-disk-{{ loop.index0 }}">{{ disk.status }}</span>
|
|
</div>
|
|
<div class="metric-value" id="val-disk-{{ loop.index0 }}">{{ disk.percent }}%</div>
|
|
<div class="progress mt-2" style="height: 8px;">
|
|
<div class="progress-bar" id="bar-disk-{{ loop.index0 }}" role="progressbar"
|
|
style="width: {{ disk.percent }}%"></div>
|
|
</div>
|
|
<small class="text-muted">
|
|
{{ disk.used_gb }} / {{ disk.total_gb }} Go
|
|
({{ disk.free_gb }} Go libres)
|
|
— Seuil: {{ disk.threshold }}%
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Processus surveillés -->
|
|
<div class="row mb-3">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0"><i class="bi bi-list-task"></i> Processus surveillés</h6>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<table class="table table-hover mb-0" id="process-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Processus</th>
|
|
<th>Statut</th>
|
|
<th>Instances</th>
|
|
<th>Mémoire</th>
|
|
<th>CPU</th>
|
|
<th>PID(s)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for proc in metrics.processes %}
|
|
<tr>
|
|
<td>
|
|
<strong>{{ proc.name }}</strong>
|
|
<br><small class="text-muted">pattern: {{ proc.pattern }}</small>
|
|
</td>
|
|
<td>
|
|
{% if not proc.enabled %}
|
|
<span class="badge bg-secondary">Désactivé</span>
|
|
{% elif proc.running %}
|
|
<span class="badge bg-success">Actif</span>
|
|
{% else %}
|
|
<span class="badge bg-danger">Arrêté</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ proc.instance_count }}</td>
|
|
<td>
|
|
{{ proc.total_memory_mb }} Mo
|
|
{% if proc.memory_threshold_mb > 0 %}
|
|
<br><small class="text-muted">seuil: {{ proc.memory_threshold_mb }} Mo</small>
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ proc.total_cpu_percent }}%</td>
|
|
<td><small>{{ proc.pids | join(sep=", ") }}</small></td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alertes récentes -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between">
|
|
<h6 class="mb-0"><i class="bi bi-bell"></i> Alertes récentes</h6>
|
|
<a href="/alerts" class="btn btn-sm btn-outline-primary">Voir tout</a>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<table class="table table-sm mb-0" id="recent-alerts">
|
|
<tbody>
|
|
<!-- Rempli par JS -->
|
|
</tbody>
|
|
</table>
|
|
<div id="no-alerts" class="text-center text-muted py-3">
|
|
Aucune alerte récente.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
const statusColors = {
|
|
ok: 'success',
|
|
warning: 'warning',
|
|
critical: 'danger'
|
|
};
|
|
|
|
function updateMetric(id, percent, status) {
|
|
const card = document.getElementById('card-' + id);
|
|
const badge = document.getElementById('badge-' + id);
|
|
const bar = document.getElementById('bar-' + id);
|
|
const val = document.getElementById('val-' + id);
|
|
if (!card) return;
|
|
|
|
val.textContent = percent + '%';
|
|
bar.style.width = percent + '%';
|
|
|
|
const color = statusColors[status] || 'secondary';
|
|
badge.textContent = status;
|
|
badge.className = 'badge bg-' + color;
|
|
bar.className = 'progress-bar bg-' + color;
|
|
card.className = 'card metric-card border-' + color;
|
|
}
|
|
|
|
function refreshMetrics() {
|
|
fetch('/api/metrics')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (!data || !data.cpu) return;
|
|
|
|
updateMetric('cpu', data.cpu.percent, data.cpu.status);
|
|
updateMetric('ram', data.ram.percent, data.ram.status);
|
|
|
|
document.getElementById('ram-used').textContent = data.ram.used_gb;
|
|
document.getElementById('sys-uptime').textContent = data.uptime;
|
|
|
|
data.disks.forEach((disk, i) => {
|
|
updateMetric('disk-' + i, disk.percent, disk.status);
|
|
});
|
|
|
|
const now = new Date();
|
|
document.getElementById('last-update').textContent =
|
|
'Mis à jour: ' + now.toLocaleTimeString('fr-FR');
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
|
|
// Rafraîchir toutes les 30 secondes
|
|
setInterval(refreshMetrics, 30000);
|
|
</script>
|
|
{% endblock %}
|