feat: init projet supervision — monitoring systeme Windows
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
60
templates/alerts.html
Normal file
60
templates/alerts.html
Normal file
@@ -0,0 +1,60 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Supervision - Alertes{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h4 class="mb-0"><i class="bi bi-bell"></i> Historique des alertes</h4>
|
||||
{% if alerts %}
|
||||
<form method="POST" action="{{ url_for('clear_alerts') }}">
|
||||
<button type="submit" class="btn btn-sm btn-outline-danger"
|
||||
onclick="return confirm('Effacer tout l\'historique ?')">
|
||||
<i class="bi bi-trash"></i> Effacer l'historique
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if not alerts %}
|
||||
<div class="alert alert-info">
|
||||
<i class="bi bi-info-circle"></i> Aucune alerte enregistree.
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card">
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Type</th>
|
||||
<th>Message</th>
|
||||
<th>Valeur</th>
|
||||
<th>Seuil</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for alert in alerts %}
|
||||
<tr>
|
||||
<td class="text-nowrap">
|
||||
<small>{{ alert.timestamp[:19] | replace('T', ' ') }}</small>
|
||||
</td>
|
||||
<td>
|
||||
{% if alert.type == 'process_down' %}
|
||||
<span class="badge bg-danger">Processus</span>
|
||||
{% else %}
|
||||
<span class="badge bg-warning text-dark">Seuil</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ alert.message }}</td>
|
||||
<td>{{ alert.value }}</td>
|
||||
<td>{{ alert.threshold }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-muted small mt-2">
|
||||
{{ alerts | length }} alerte(s) — les 500 dernieres sont conservees.
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
80
templates/base.html
Normal file
80
templates/base.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Supervision{% endblock %}</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
{% if current_user.is_authenticated %}
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="{{ url_for('dashboard') }}">
|
||||
<i class="bi bi-activity"></i> Supervision
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.endpoint == 'dashboard' %}active{% endif %}"
|
||||
href="{{ url_for('dashboard') }}">
|
||||
<i class="bi bi-speedometer2"></i> Tableau de bord
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.endpoint == 'settings' %}active{% endif %}"
|
||||
href="{{ url_for('settings') }}">
|
||||
<i class="bi bi-gear"></i> Configuration
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.endpoint == 'alerts' %}active{% endif %}"
|
||||
href="{{ url_for('alerts') }}">
|
||||
<i class="bi bi-bell"></i> Alertes
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('logout') }}">
|
||||
<i class="bi bi-box-arrow-right"></i> Deconnexion
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
<div class="container-fluid mt-3">
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
|
||||
{{ message }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
{% if default_pw is defined and default_pw %}
|
||||
<div class="alert alert-danger">
|
||||
<i class="bi bi-exclamation-triangle"></i>
|
||||
<strong>Securite :</strong> Le mot de passe par defaut est encore actif.
|
||||
<a href="{{ url_for('settings') }}#password" class="alert-link">Changez-le maintenant</a>.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
252
templates/dashboard.html
Normal file
252
templates/dashboard.html
Normal 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 %}
|
||||
65
templates/login.html
Normal file
65
templates/login.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Supervision - Connexion</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body { background: #1a1a2e; min-height: 100vh; display: flex; align-items: center; }
|
||||
.login-card { max-width: 400px; margin: auto; }
|
||||
.brand { color: #e2e8f0; text-align: center; margin-bottom: 2rem; }
|
||||
.brand i { font-size: 3rem; color: #4fc3f7; }
|
||||
.brand h1 { font-size: 1.5rem; margin-top: 0.5rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="login-card">
|
||||
<div class="brand">
|
||||
<i class="bi bi-activity"></i>
|
||||
<h1>Supervision</h1>
|
||||
<small class="text-secondary">Monitoring systeme</small>
|
||||
</div>
|
||||
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
|
||||
{{ message }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<div class="card shadow">
|
||||
<div class="card-body p-4">
|
||||
<form method="POST" action="{{ url_for('login') }}">
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">Identifiant</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-person"></i></span>
|
||||
<input type="text" class="form-control" id="username" name="username"
|
||||
required autofocus autocomplete="username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Mot de passe</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-lock"></i></span>
|
||||
<input type="password" class="form-control" id="password" name="password"
|
||||
required autocomplete="current-password">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">
|
||||
<i class="bi bi-box-arrow-in-right"></i> Connexion
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
288
templates/settings.html
Normal file
288
templates/settings.html
Normal file
@@ -0,0 +1,288 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Supervision - Configuration{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h4 class="mb-3"><i class="bi bi-gear"></i> Configuration</h4>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-4">
|
||||
<!-- Seuils d'alerte -->
|
||||
<div class="card">
|
||||
<div class="card-header"><h6 class="mb-0"><i class="bi bi-sliders"></i> Seuils d'alerte (%)</h6></div>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="{{ url_for('update_thresholds') }}">
|
||||
<div class="mb-3">
|
||||
<label for="cpu_percent" class="form-label">CPU (%)</label>
|
||||
<input type="number" class="form-control" id="cpu_percent" name="cpu_percent"
|
||||
value="{{ config.thresholds.cpu_percent }}" min="1" max="100" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="ram_percent" class="form-label">RAM (%)</label>
|
||||
<input type="number" class="form-control" id="ram_percent" name="ram_percent"
|
||||
value="{{ config.thresholds.ram_percent }}" min="1" max="100" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="disk_percent" class="form-label">Disque (%)</label>
|
||||
<input type="number" class="form-control" id="disk_percent" name="disk_percent"
|
||||
value="{{ config.thresholds.disk_percent }}" min="1" max="100" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-check-lg"></i> Enregistrer
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 mb-4">
|
||||
<!-- Parametres de monitoring -->
|
||||
<div class="card">
|
||||
<div class="card-header"><h6 class="mb-0"><i class="bi bi-clock"></i> Frequence et alertes</h6></div>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="{{ url_for('update_monitoring') }}">
|
||||
<div class="mb-3">
|
||||
<label for="check_interval_minutes" class="form-label">Intervalle de verification (minutes)</label>
|
||||
<input type="number" class="form-control" id="check_interval_minutes"
|
||||
name="check_interval_minutes"
|
||||
value="{{ config.check_interval_minutes }}" min="1" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="alert_cooldown_minutes" class="form-label">Cooldown entre alertes (minutes)</label>
|
||||
<input type="number" class="form-control" id="alert_cooldown_minutes"
|
||||
name="alert_cooldown_minutes"
|
||||
value="{{ config.alert_cooldown_minutes }}" min="1" required>
|
||||
<div class="form-text">Delai minimum entre deux alertes du meme type.</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-check-lg"></i> Enregistrer
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Port -->
|
||||
<div class="card mt-4">
|
||||
<div class="card-header"><h6 class="mb-0"><i class="bi bi-diagram-3"></i> Port de l'application</h6></div>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="{{ url_for('update_port') }}">
|
||||
<div class="mb-3">
|
||||
<label for="port" class="form-label">Port (redemarrage requis)</label>
|
||||
<input type="number" class="form-control" id="port" name="port"
|
||||
value="{{ config.port }}" min="1024" max="65535" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-check-lg"></i> Enregistrer
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration SMTP -->
|
||||
<div class="row">
|
||||
<div class="col-12 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-header"><h6 class="mb-0"><i class="bi bi-envelope"></i> Configuration SMTP</h6></div>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="{{ url_for('update_smtp') }}">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="smtp_server" class="form-label">Serveur SMTP</label>
|
||||
<input type="text" class="form-control" id="smtp_server" name="smtp_server"
|
||||
value="{{ smtp.server }}" placeholder="smtp.example.com">
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="smtp_port" class="form-label">Port</label>
|
||||
<input type="number" class="form-control" id="smtp_port" name="smtp_port"
|
||||
value="{{ smtp.port }}">
|
||||
</div>
|
||||
<div class="col-md-3 mb-3 d-flex align-items-end">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="smtp_tls" name="smtp_tls"
|
||||
{% if smtp.use_tls %}checked{% endif %}>
|
||||
<label class="form-check-label" for="smtp_tls">STARTTLS</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="smtp_username" class="form-label">Nom d'utilisateur</label>
|
||||
<input type="text" class="form-control" id="smtp_username" name="smtp_username"
|
||||
value="{{ smtp.username }}" autocomplete="off">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="smtp_password" class="form-label">Mot de passe</label>
|
||||
<input type="password" class="form-control" id="smtp_password" name="smtp_password"
|
||||
placeholder="{% if smtp.password_masked %}{{ smtp.password_masked }}{% else %}Non defini{% endif %}"
|
||||
autocomplete="new-password">
|
||||
<div class="form-text">Laissez vide pour conserver le mot de passe actuel.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="smtp_from" class="form-label">Email expediteur</label>
|
||||
<input type="email" class="form-control" id="smtp_from" name="smtp_from"
|
||||
value="{{ smtp.from_email }}" placeholder="supervision@example.com">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="smtp_to" class="form-label">Destinataires (separes par des virgules)</label>
|
||||
<input type="text" class="form-control" id="smtp_to" name="smtp_to"
|
||||
value="{{ smtp.to_emails | join(', ') }}"
|
||||
placeholder="admin@example.com, tech@example.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-check-lg"></i> Enregistrer
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
<form method="POST" action="{{ url_for('test_smtp') }}" class="d-inline">
|
||||
<button type="submit" class="btn btn-outline-info">
|
||||
<i class="bi bi-send"></i> Envoyer un email de test
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Processus surveilles -->
|
||||
<div class="row">
|
||||
<div class="col-12 mb-4">
|
||||
<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">
|
||||
<form method="POST" action="{{ url_for('update_processes') }}" id="process-form">
|
||||
<table class="table" id="proc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<th>Pattern (recherche)</th>
|
||||
<th>Seuil memoire (Mo)</th>
|
||||
<th>Actif</th>
|
||||
<th>Alerte si arrete</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for proc in config.processes %}
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text" class="form-control form-control-sm"
|
||||
name="proc_name[]" value="{{ proc.name }}" required>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="form-control form-control-sm"
|
||||
name="proc_pattern[]" value="{{ proc.pattern }}" required>
|
||||
</td>
|
||||
<td>
|
||||
<input type="number" class="form-control form-control-sm"
|
||||
name="proc_mem_threshold[]"
|
||||
value="{{ proc.memory_threshold_mb }}" min="0">
|
||||
<div class="form-text">0 = pas de seuil</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input"
|
||||
name="proc_enabled[]" value="{{ loop.index0 }}"
|
||||
{% if proc.enabled %}checked{% endif %}>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input"
|
||||
name="proc_alert_down[]" value="{{ loop.index0 }}"
|
||||
{% if proc.alert_on_down %}checked{% endif %}>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-sm btn-outline-danger btn-remove-proc">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-outline-success" id="btn-add-proc">
|
||||
<i class="bi bi-plus-lg"></i> Ajouter un processus
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-check-lg"></i> Enregistrer
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Changement de mot de passe -->
|
||||
<div class="row" id="password">
|
||||
<div class="col-lg-6 mb-4">
|
||||
<div class="card {% if default_pw %}border-danger{% endif %}">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0"><i class="bi bi-shield-lock"></i> Mot de passe administrateur</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="{{ url_for('update_password') }}">
|
||||
<div class="mb-3">
|
||||
<label for="current_password" class="form-label">Mot de passe actuel</label>
|
||||
<input type="password" class="form-control" id="current_password"
|
||||
name="current_password" required autocomplete="current-password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="new_password" class="form-label">Nouveau mot de passe</label>
|
||||
<input type="password" class="form-control" id="new_password"
|
||||
name="new_password" required minlength="8" autocomplete="new-password">
|
||||
<div class="form-text">Minimum 8 caracteres.</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="confirm_password" class="form-label">Confirmer le mot de passe</label>
|
||||
<input type="password" class="form-control" id="confirm_password"
|
||||
name="confirm_password" required autocomplete="new-password">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-warning">
|
||||
<i class="bi bi-check-lg"></i> Changer le mot de passe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// Ajouter un processus
|
||||
document.getElementById('btn-add-proc').addEventListener('click', function() {
|
||||
const tbody = document.querySelector('#proc-table tbody');
|
||||
const idx = tbody.children.length;
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td><input type="text" class="form-control form-control-sm" name="proc_name[]" required></td>
|
||||
<td><input type="text" class="form-control form-control-sm" name="proc_pattern[]" required></td>
|
||||
<td><input type="number" class="form-control form-control-sm" name="proc_mem_threshold[]" value="0" min="0">
|
||||
<div class="form-text">0 = pas de seuil</div></td>
|
||||
<td><div class="form-check"><input type="checkbox" class="form-check-input" name="proc_enabled[]" value="${idx}" checked></div></td>
|
||||
<td><div class="form-check"><input type="checkbox" class="form-check-input" name="proc_alert_down[]" value="${idx}" checked></div></td>
|
||||
<td><button type="button" class="btn btn-sm btn-outline-danger btn-remove-proc"><i class="bi bi-trash"></i></button></td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
|
||||
// Supprimer un processus
|
||||
document.addEventListener('click', function(e) {
|
||||
if (e.target.closest('.btn-remove-proc')) {
|
||||
e.target.closest('tr').remove();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user