Dom/supervision
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 4 Wiki Activity

feat: init projet supervision — monitoring systeme Windows

Browse Source 
Interface web Flask securisee pour surveiller CPU, RAM, disques
et processus (JVM, Nginx, Amadea Web 8 x64).
Alertes email SMTP configurables, seuils reglables, compilation
PyInstaller en .exe, installation service Windows via NSSM.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dom
2026-03-26 09:48:35 +01:00
commit 61d17968a0
17 changed files with 1958 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
templates/dashboard.html Normal file
View File

@@ -0,0 +1,252 @@
{% 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="{{ url_for('toggle_monitoring') }}" 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> Demarrer
</button>
{% endif %}
</form>
</div>
</div>
{% if not metrics %}
<div class="alert alert-info">
<i class="bi bi-hourglass-split"></i> Collecte des metriques en cours...
</div>
{% else %}
<!-- Infos systeme -->
<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> coeurs</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>
<!-- Metriques 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>
<!-- Placeholder pour les disques - sera rempli par JS aussi -->
{% 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 surveilles -->
<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 surveilles</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>Memoire</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">Desactive</span>
{% elif proc.running %}
<span class="badge bg-success">Actif</span>
{% else %}
<span class="badge bg-danger">Arrete</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(', ') }}</small></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Alertes recentes -->
<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 recentes</h6>
<a href="{{ url_for('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 recente.
</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 a jour: ' + now.toLocaleTimeString('fr-FR');
})
.catch(() => {});
}
function loadRecentAlerts() {
fetch('/api/metrics')
.then(r => r.json())
.then(() => {
// Charger les alertes separement via la page
})
.catch(() => {});
}
// Rafraichir toutes les 30 secondes
setInterval(refreshMetrics, 30000);
</script>
{% endblock %}