Remove HTML-to-Markdown parser and PDF generation functionality, clean up unused imports and whitespace
This commit is contained in:
+67
-709
@@ -3727,724 +3727,26 @@
|
||||
|
||||
<!-- Layout avec Table des Matières -->
|
||||
<div class="flex gap-8">
|
||||
<!-- Table des Matières (sidebar gauche) -->
|
||||
<!-- Table des Matières (sidebar gauche) - Chargée dynamiquement -->
|
||||
<aside class="hidden lg:block w-64 flex-shrink-0">
|
||||
<div class="help-toc glass-card p-4">
|
||||
<div class="help-toc glass-card p-4 sticky top-24">
|
||||
<div class="help-toc-title">Table des Matières</div>
|
||||
<nav>
|
||||
<a href="#help-quickstart" class="help-toc-item" onclick="scrollToHelpSection(event, 'help-quickstart')">
|
||||
<span class="mr-2">⚡️</span>Démarrage Rapide
|
||||
</a>
|
||||
<a href="#help-indicators" class="help-toc-item" onclick="scrollToHelpSection(event, 'help-indicators')">
|
||||
<span class="mr-2">❤️🩹</span>Indicateurs de Santé
|
||||
</a>
|
||||
<a href="#help-architecture" class="help-toc-item" onclick="scrollToHelpSection(event, 'help-architecture')">
|
||||
<span class="mr-2">🏗️</span>Architecture
|
||||
</a>
|
||||
<a href="#help-features" class="help-toc-item" onclick="scrollToHelpSection(event, 'help-features')">
|
||||
<span class="mr-2">⚙️</span>Fonctionnalités
|
||||
</a>
|
||||
<a href="#help-notifications" class="help-toc-item" onclick="scrollToHelpSection(event, 'help-notifications')">
|
||||
<span class="mr-2">🔔</span>Notifications
|
||||
</a>
|
||||
<a href="#help-playbooks" class="help-toc-item" onclick="scrollToHelpSection(event, 'help-playbooks')">
|
||||
<span class="mr-2">📖</span>Playbooks Ansible
|
||||
</a>
|
||||
<a href="#help-api" class="help-toc-item" onclick="scrollToHelpSection(event, 'help-api')">
|
||||
<span class="mr-2">🔗</span>Référence API
|
||||
</a>
|
||||
<a href="#help-troubleshooting" class="help-toc-item" onclick="scrollToHelpSection(event, 'help-troubleshooting')">
|
||||
<span class="mr-2">🛠️</span>Dépannage
|
||||
</a>
|
||||
<a href="#help-shortcuts" class="help-toc-item" onclick="scrollToHelpSection(event, 'help-shortcuts')">
|
||||
<span class="mr-2">✨</span>Raccourcis & Astuces
|
||||
</a>
|
||||
<nav id="help-toc-nav">
|
||||
<!-- TOC chargée dynamiquement depuis help.md -->
|
||||
<div class="text-gray-500 text-sm py-2">Chargement...</div>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Contenu Principal -->
|
||||
<div class="flex-1 help-main-content">
|
||||
|
||||
<!-- Quick Start -->
|
||||
<div id="help-quickstart" class="glass-card p-8 mb-8 fade-in help-section-anchor">
|
||||
<h2 class="help-section-title">
|
||||
<span class="text-2xl mr-2">⚡️</span>
|
||||
Démarrage Rapide
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="help-card">
|
||||
<div class="text-3xl mb-4 text-green-400"><i class="fas fa-1"></i></div>
|
||||
<h3 class="font-semibold mb-2">Ajouter vos Hosts</h3>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Commencez par ajouter vos serveurs dans la section <span class="help-code">Hosts</span>.
|
||||
Chaque host nécessite un nom, une adresse IP et un système d'exploitation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="help-card">
|
||||
<div class="text-3xl mb-4 text-blue-400"><i class="fas fa-2"></i></div>
|
||||
<h3 class="font-semibold mb-2">Bootstrap Ansible</h3>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Exécutez le <span class="help-code">Bootstrap</span> sur chaque host pour configurer
|
||||
l'accès SSH et les prérequis Ansible.
|
||||
</p>
|
||||
</div>
|
||||
<div class="help-card">
|
||||
<div class="text-3xl mb-4 text-purple-400"><i class="fas fa-3"></i></div>
|
||||
<h3 class="font-semibold mb-2">Automatiser</h3>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Utilisez les <span class="help-code">Actions Rapides</span> ou exécutez des playbooks
|
||||
personnalisés pour automatiser vos tâches.
|
||||
</p>
|
||||
<!-- Contenu Principal - Chargé dynamiquement depuis help.md -->
|
||||
<div id="help-dynamic-content" class="flex-1 help-main-content">
|
||||
<!-- Placeholder pendant le chargement -->
|
||||
<div class="glass-card p-8 mb-8 text-center">
|
||||
<div class="loading-spinner mx-auto mb-4"></div>
|
||||
<p class="text-gray-400">Chargement de la documentation...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Indicateurs de Santé -->
|
||||
<div id="help-indicators" class="glass-card p-8 mb-8 fade-in help-section-anchor">
|
||||
<h2 class="help-section-title">
|
||||
<span class="text-2xl mr-2">❤️🩹</span>
|
||||
Indicateurs de Santé des Hosts
|
||||
</h2>
|
||||
<p class="text-gray-400 mb-6">
|
||||
Chaque host affiche un indicateur visuel de santé représenté par des barres colorées.
|
||||
Cet indicateur combine plusieurs facteurs pour évaluer l'état global de votre serveur.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<!-- Explication des barres -->
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4 text-purple-400">Comprendre l'Indicateur</h3>
|
||||
<div class="space-y-4">
|
||||
<!-- Niveau Excellent -->
|
||||
<div class="flex items-center gap-4 p-3 bg-gray-800/50 rounded-lg">
|
||||
<div class="health-indicator-demo">
|
||||
<div class="health-bar bg-green-500"></div>
|
||||
<div class="health-bar bg-green-500"></div>
|
||||
<div class="health-bar bg-green-500"></div>
|
||||
<div class="health-bar bg-green-500"></div>
|
||||
<div class="health-bar bg-green-500"></div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-green-400">Excellent</span>
|
||||
<span class="text-gray-400 text-sm ml-2">(5 barres vertes)</span>
|
||||
<p class="text-gray-500 text-xs mt-1">Host en ligne, bootstrap OK, vérifié récemment</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Niveau Bon -->
|
||||
<div class="flex items-center gap-4 p-3 bg-gray-800/50 rounded-lg">
|
||||
<div class="health-indicator-demo">
|
||||
<div class="health-bar bg-yellow-500"></div>
|
||||
<div class="health-bar bg-yellow-500"></div>
|
||||
<div class="health-bar bg-yellow-500"></div>
|
||||
<div class="health-bar bg-gray-600"></div>
|
||||
<div class="health-bar bg-gray-600"></div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-yellow-400">Bon</span>
|
||||
<span class="text-gray-400 text-sm ml-2">(3-4 barres jaunes)</span>
|
||||
<p class="text-gray-500 text-xs mt-1">Host fonctionnel mais certains aspects à améliorer</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Niveau Moyen -->
|
||||
<div class="flex items-center gap-4 p-3 bg-gray-800/50 rounded-lg">
|
||||
<div class="health-indicator-demo">
|
||||
<div class="health-bar bg-orange-500"></div>
|
||||
<div class="health-bar bg-orange-500"></div>
|
||||
<div class="health-bar bg-gray-600"></div>
|
||||
<div class="health-bar bg-gray-600"></div>
|
||||
<div class="health-bar bg-gray-600"></div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-orange-400">Moyen</span>
|
||||
<span class="text-gray-400 text-sm ml-2">(2 barres oranges)</span>
|
||||
<p class="text-gray-500 text-xs mt-1">Attention requise - vérification recommandée</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Niveau Faible -->
|
||||
<div class="flex items-center gap-4 p-3 bg-gray-800/50 rounded-lg">
|
||||
<div class="health-indicator-demo">
|
||||
<div class="health-bar bg-red-500"></div>
|
||||
<div class="health-bar bg-gray-600"></div>
|
||||
<div class="health-bar bg-gray-600"></div>
|
||||
<div class="health-bar bg-gray-600"></div>
|
||||
<div class="health-bar bg-gray-600"></div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold text-red-400">Faible</span>
|
||||
<span class="text-gray-400 text-sm ml-2">(1 barre rouge)</span>
|
||||
<p class="text-gray-500 text-xs mt-1">Host hors ligne ou non configuré</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Facteurs de calcul -->
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4 text-purple-400">Facteurs de Calcul du Score</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="p-3 bg-gray-800/50 rounded-lg">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<i class="fas fa-circle text-green-400 text-xs"></i>
|
||||
<span class="font-medium">Statut en ligne</span>
|
||||
<span class="text-green-400 text-sm ml-auto">+2 points</span>
|
||||
</div>
|
||||
<p class="text-gray-500 text-xs">Le host répond aux requêtes réseau</p>
|
||||
</div>
|
||||
|
||||
<div class="p-3 bg-gray-800/50 rounded-lg">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<i class="fas fa-check-circle text-blue-400 text-xs"></i>
|
||||
<span class="font-medium">Bootstrap Ansible OK</span>
|
||||
<span class="text-blue-400 text-sm ml-auto">+1 point</span>
|
||||
</div>
|
||||
<p class="text-gray-500 text-xs">SSH et prérequis Ansible configurés</p>
|
||||
</div>
|
||||
|
||||
<div class="p-3 bg-gray-800/50 rounded-lg">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<i class="fas fa-clock text-purple-400 text-xs"></i>
|
||||
<span class="font-medium">Vérifié récemment (<1h)</span>
|
||||
<span class="text-purple-400 text-sm ml-auto">+2 points</span>
|
||||
</div>
|
||||
<p class="text-gray-500 text-xs">Dernière vérification il y a moins d'une heure</p>
|
||||
</div>
|
||||
|
||||
<div class="p-3 bg-gray-800/50 rounded-lg">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<i class="fas fa-clock text-yellow-400 text-xs"></i>
|
||||
<span class="font-medium">Vérifié aujourd'hui</span>
|
||||
<span class="text-yellow-400 text-sm ml-auto">+1 point</span>
|
||||
</div>
|
||||
<p class="text-gray-500 text-xs">Dernière vérification dans les 24 dernières heures</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 p-3 bg-purple-900/20 border border-purple-600/30 rounded-lg">
|
||||
<p class="text-sm text-purple-300">
|
||||
<i class="fas fa-info-circle mr-2"></i>
|
||||
<strong>Astuce:</strong> Exécutez régulièrement un <span class="help-code">Health Check</span>
|
||||
pour maintenir un score de santé élevé.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statuts Bootstrap -->
|
||||
<div class="mt-8">
|
||||
<h3 class="font-semibold mb-4 text-purple-400">Statuts Bootstrap Ansible</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="p-4 bg-green-900/20 border border-green-600/30 rounded-lg">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<span class="px-2 py-0.5 bg-green-600/30 text-green-400 text-xs rounded-full flex items-center">
|
||||
<i class="fas fa-check-circle mr-1"></i>Ansible Ready
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Le host est entièrement configuré pour Ansible. L'utilisateur automation existe,
|
||||
la clé SSH est déployée et sudo est configuré sans mot de passe.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-4 bg-yellow-900/20 border border-yellow-600/30 rounded-lg">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<span class="px-2 py-0.5 bg-yellow-600/30 text-yellow-400 text-xs rounded-full flex items-center">
|
||||
<i class="fas fa-exclamation-triangle mr-1"></i>Non configuré
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Le bootstrap n'a pas encore été exécuté sur ce host. Cliquez sur le bouton
|
||||
<span class="help-code">Bootstrap</span> pour configurer l'accès Ansible.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Texte "Jamais vérifié" -->
|
||||
<div class="mt-6 p-4 bg-gray-800/50 rounded-lg">
|
||||
<h4 class="font-semibold mb-2 flex items-center gap-2">
|
||||
<i class="fas fa-question-circle text-gray-400"></i>
|
||||
Que signifie "Jamais vérifié" ?
|
||||
</h4>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Ce message apparaît lorsqu'aucun Health Check n'a été exécuté sur le host depuis son ajout.
|
||||
Le système ne peut pas déterminer l'état réel du serveur. Lancez un Health Check pour
|
||||
mettre à jour le statut et obtenir un score de santé précis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Architecture -->
|
||||
<div id="help-architecture" class="glass-card p-8 mb-8 fade-in help-section-anchor">
|
||||
<h2 class="help-section-title">
|
||||
<span class="text-2xl mr-2">🏗️</span>
|
||||
Architecture de la Solution
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4 text-purple-400">Stack Technologique</h3>
|
||||
<ul class="help-list">
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fas fa-server text-green-400"></i>
|
||||
<span><strong>Backend:</strong> FastAPI (Python) - API REST haute performance</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fas fa-cogs text-orange-400"></i>
|
||||
<span><strong>Automation:</strong> Ansible - Gestion de configuration</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fas fa-desktop text-blue-400"></i>
|
||||
<span><strong>Frontend:</strong> HTML/CSS/JS avec TailwindCSS</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fab fa-docker text-cyan-400"></i>
|
||||
<span><strong>Déploiement:</strong> Docker & Docker Compose</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<i class="fas fa-plug text-yellow-400"></i>
|
||||
<span><strong>Temps réel:</strong> WebSocket pour les mises à jour live</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4 text-purple-400">Structure des Fichiers</h3>
|
||||
<div class="bg-black/40 p-4 rounded-lg font-mono text-sm">
|
||||
<pre class="text-gray-300">
|
||||
homelab-automation/
|
||||
├── app/
|
||||
│ ├── app_optimized.py # API FastAPI
|
||||
│ ├── index.html # Interface web
|
||||
│ └── main.js # Logique frontend
|
||||
├── ansible/
|
||||
│ ├── inventory/
|
||||
│ │ ├── hosts.yml # Inventaire des hosts
|
||||
│ │ └── group_vars/ # Variables par groupe
|
||||
│ └── playbooks/ # Playbooks Ansible
|
||||
├── tasks_logs/ # Logs des tâches
|
||||
├── docker-compose.yml
|
||||
└── Dockerfile</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fonctionnalités -->
|
||||
<div id="help-features" class="glass-card p-8 mb-8 fade-in help-section-anchor">
|
||||
<h2 class="help-section-title">
|
||||
<span class="text-2xl mr-2">⚙️</span>
|
||||
Fonctionnalités Détaillées par Section
|
||||
</h2>
|
||||
|
||||
<!-- Accordéon -->
|
||||
<div class="space-y-2">
|
||||
<!-- Dashboard -->
|
||||
<div class="accordion-item" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-header">
|
||||
<span class="flex items-center gap-3">
|
||||
<i class="fas fa-tachometer-alt text-purple-400"></i>
|
||||
<strong>Dashboard</strong>
|
||||
</span>
|
||||
<i class="fas fa-chevron-down accordion-icon text-gray-400"></i>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="p-4">
|
||||
<p class="text-gray-400 mb-4">Vue d'ensemble centralisée de votre infrastructure homelab.</p>
|
||||
<ul class="help-list text-sm">
|
||||
<li><strong>Métriques en temps réel:</strong> État des hosts (Online/Offline), statistiques des tâches (Succès/Échec).</li>
|
||||
<li><strong>Actions Rapides:</strong> Accès immédiat aux opérations courantes (Mise à jour globale, Health Check général).</li>
|
||||
<li><strong>Aperçu des Hosts:</strong> Liste condensée avec indicateurs de statut et OS pour une surveillance rapide.</li>
|
||||
<li><strong>Notifications:</strong> Alertes visuelles sur les dernières activités importantes.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hosts -->
|
||||
<div class="accordion-item" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-header">
|
||||
<span class="flex items-center gap-3">
|
||||
<i class="fas fa-server text-blue-400"></i>
|
||||
<strong>Hosts</strong>
|
||||
</span>
|
||||
<i class="fas fa-chevron-down accordion-icon text-gray-400"></i>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="p-4">
|
||||
<p class="text-gray-400 mb-4">Gestion complète du cycle de vie de vos serveurs.</p>
|
||||
<ul class="help-list text-sm">
|
||||
<li><strong>Inventaire:</strong> Ajout, modification et suppression de hosts avec détection d'OS.</li>
|
||||
<li><strong>Bootstrap Ansible:</strong> Préparation automatique des serveurs (User, Clés SSH, Sudo).</li>
|
||||
<li><strong>Indicateurs de Santé:</strong> Score de santé détaillé basé sur la connectivité et la configuration.</li>
|
||||
<li><strong>Actions Individuelles:</strong> Exécution de playbooks spécifiques (Upgrade, Backup, Reboot) sur un host.</li>
|
||||
<li><strong>Détails Avancés:</strong> Vue détaillée avec historique des tâches et logs spécifiques au host.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Playbooks -->
|
||||
<div class="accordion-item" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-header">
|
||||
<span class="flex items-center gap-3">
|
||||
<i class="fas fa-book text-pink-400"></i>
|
||||
<strong>Playbooks</strong>
|
||||
</span>
|
||||
<i class="fas fa-chevron-down accordion-icon text-gray-400"></i>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="p-4">
|
||||
<p class="text-gray-400 mb-4">Bibliothèque et exécution de playbooks Ansible personnalisés.</p>
|
||||
<ul class="help-list text-sm">
|
||||
<li><strong>Catalogue:</strong> Liste de tous les playbooks disponibles dans votre répertoire.</li>
|
||||
<li><strong>Exécution Ciblée:</strong> Lancement de playbooks sur des hosts spécifiques ou des groupes.</li>
|
||||
<li><strong>Logs en Direct:</strong> Suivi temps réel de l'exécution Ansible (console output).</li>
|
||||
<li><strong>Historique:</strong> Accès rapide aux résultats des exécutions précédentes.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tasks -->
|
||||
<div class="accordion-item" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-header">
|
||||
<span class="flex items-center gap-3">
|
||||
<i class="fas fa-tasks text-green-400"></i>
|
||||
<strong>Tasks</strong>
|
||||
</span>
|
||||
<i class="fas fa-chevron-down accordion-icon text-gray-400"></i>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="p-4">
|
||||
<p class="text-gray-400 mb-4">Traçabilité complète de toutes les opérations d'automatisation.</p>
|
||||
<ul class="help-list text-sm">
|
||||
<li><strong>Suivi d'État:</strong> Visualisation instantanée (En cours, Succès, Échec).</li>
|
||||
<li><strong>Filtrage Avancé:</strong> Recherche par statut, par date ou par type d'action.</li>
|
||||
<li><strong>Logs Détaillés:</strong> Accès aux sorties standard et d'erreur pour le débogage.</li>
|
||||
<li><strong>Auto-refresh:</strong> Mise à jour automatique des tâches en cours d'exécution.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Schedules -->
|
||||
<div class="accordion-item" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-header">
|
||||
<span class="flex items-center gap-3">
|
||||
<i class="fas fa-calendar-alt text-indigo-400"></i>
|
||||
<strong>Schedules</strong>
|
||||
</span>
|
||||
<i class="fas fa-chevron-down accordion-icon text-gray-400"></i>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="p-4">
|
||||
<p class="text-gray-400 mb-4">Planification automatisée des tâches récurrentes.</p>
|
||||
<ul class="help-list text-sm">
|
||||
<li><strong>Planification Cron:</strong> Configuration flexible de la fréquence d'exécution.</li>
|
||||
<li><strong>Tâches Récurrentes:</strong> Backups quotidiens, Mises à jour hebdomadaires, Health Checks horaires.</li>
|
||||
<li><strong>Ciblage:</strong> Définition des hosts ou groupes cibles pour chaque planification.</li>
|
||||
<li><strong>Gestion:</strong> Activation, désactivation ou modification des planifications existantes.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Logs -->
|
||||
<div class="accordion-item" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-header">
|
||||
<span class="flex items-center gap-3">
|
||||
<i class="fas fa-file-alt text-orange-400"></i>
|
||||
<strong>Logs</strong>
|
||||
</span>
|
||||
<i class="fas fa-chevron-down accordion-icon text-gray-400"></i>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="p-4">
|
||||
<p class="text-gray-400 mb-4">Journal technique des événements système.</p>
|
||||
<ul class="help-list text-sm">
|
||||
<li><strong>Streaming WebSocket:</strong> Arrivée des logs en temps réel sans rechargement de page.</li>
|
||||
<li><strong>Niveaux de Log:</strong> Distinction claire entre Info, Warning et Error.</li>
|
||||
<li><strong>Export:</strong> Possibilité de télécharger les logs pour analyse externe.</li>
|
||||
<li><strong>Rétention:</strong> Gestion de l'historique et nettoyage des logs anciens.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alertes -->
|
||||
<div class="accordion-item" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-header">
|
||||
<span class="flex items-center gap-3">
|
||||
<i class="fas fa-bell text-red-400"></i>
|
||||
<strong>Alertes</strong>
|
||||
</span>
|
||||
<i class="fas fa-chevron-down accordion-icon text-gray-400"></i>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="p-4">
|
||||
<p class="text-gray-400 mb-4">Centre de messages pour les événements importants.</p>
|
||||
<ul class="help-list text-sm">
|
||||
<li><strong>Suivi:</strong> Consultez les alertes récentes (succès/échec, changements d'état).</li>
|
||||
<li><strong>Lecture:</strong> Les alertes peuvent être marquées comme lues pour garder une boîte de réception propre.</li>
|
||||
<li><strong>Notifications:</strong> Certaines alertes peuvent déclencher des notifications ntfy (si activé).</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration -->
|
||||
<div class="accordion-item" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-header">
|
||||
<span class="flex items-center gap-3">
|
||||
<i class="fas fa-cog text-cyan-400"></i>
|
||||
<strong>Configuration</strong>
|
||||
</span>
|
||||
<i class="fas fa-chevron-down accordion-icon text-gray-400"></i>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="p-4">
|
||||
<p class="text-gray-400 mb-4">Paramètres de l'application et intégrations.</p>
|
||||
<ul class="help-list text-sm">
|
||||
<li><strong>Paramètres applicatifs:</strong> Options persistées (ex: collecte des métriques).</li>
|
||||
<li><strong>Notifications:</strong> Configuration et test du service ntfy.</li>
|
||||
<li><strong>Sécurité:</strong> Gestion du compte utilisateur (mot de passe) via l'écran utilisateur.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notifications -->
|
||||
<div id="help-notifications" class="glass-card p-8 mb-8 fade-in help-section-anchor">
|
||||
<h2 class="help-section-title">
|
||||
<span class="text-2xl mr-2">🔔</span>
|
||||
Système de Notifications (ntfy)
|
||||
</h2>
|
||||
<p class="text-gray-400 mb-6">
|
||||
Restez informé de l'état de votre infrastructure grâce au système de notifications intégré basé sur <strong>ntfy</strong>.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="help-card">
|
||||
<h3 class="font-semibold mb-3 text-purple-400">Canaux & Configuration</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">
|
||||
Les notifications sont envoyées via le service ntfy, permettant de recevoir des alertes push sur mobile et desktop.
|
||||
</p>
|
||||
<ul class="help-list text-sm">
|
||||
<li><strong>Push Mobile:</strong> Via l'application ntfy (Android/iOS).</li>
|
||||
<li><strong>Web Push:</strong> Notifications navigateur sur desktop.</li>
|
||||
<li><strong>Priorité:</strong> Gestion des niveaux d'urgence (Low à High).</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="help-card">
|
||||
<h3 class="font-semibold mb-3 text-blue-400">Types d'Alertes</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">
|
||||
Vous recevez des notifications pour les événements critiques :
|
||||
</p>
|
||||
<ul class="help-list text-sm">
|
||||
<li><span class="mr-2">✅</span>Succès des Backups</li>
|
||||
<li><span class="mr-2">❌</span>Échecs de Tâches</li>
|
||||
<li><span class="mr-2">⚠️</span>Changements de Santé Host</li>
|
||||
<li><span class="mr-2">🛠️</span>Fin de Bootstrap</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Playbooks Ansible -->
|
||||
<div id="help-playbooks" class="glass-card p-8 mb-8 fade-in help-section-anchor">
|
||||
<h2 class="help-section-title">
|
||||
<span class="text-2xl mr-2">📖</span>
|
||||
Playbooks Ansible Disponibles
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="help-card">
|
||||
<h3 class="font-semibold mb-3 flex items-center gap-2">
|
||||
<i class="fas fa-tools text-yellow-400"></i>
|
||||
bootstrap-host.yml
|
||||
</h3>
|
||||
<p class="text-gray-400 text-sm mb-2">
|
||||
Configure un nouveau host pour Ansible: création utilisateur, clé SSH, sudo sans mot de passe.
|
||||
</p>
|
||||
<span class="text-xs text-purple-400">Requis avant toute autre opération</span>
|
||||
</div>
|
||||
<div class="help-card">
|
||||
<h3 class="font-semibold mb-3 flex items-center gap-2">
|
||||
<i class="fas fa-heartbeat text-green-400"></i>
|
||||
health-check.yml
|
||||
</h3>
|
||||
<p class="text-gray-400 text-sm mb-2">
|
||||
Vérifie l'état de santé: CPU, RAM, disque, services critiques.
|
||||
</p>
|
||||
<span class="text-xs text-purple-400">Exécution rapide, non destructif</span>
|
||||
</div>
|
||||
<div class="help-card">
|
||||
<h3 class="font-semibold mb-3 flex items-center gap-2">
|
||||
<i class="fas fa-arrow-up text-blue-400"></i>
|
||||
system-upgrade.yml
|
||||
</h3>
|
||||
<p class="text-gray-400 text-sm mb-2">
|
||||
Met à jour tous les paquets système (apt/yum/dnf selon l'OS).
|
||||
</p>
|
||||
<span class="text-xs text-orange-400">Peut nécessiter un redémarrage</span>
|
||||
</div>
|
||||
<div class="help-card">
|
||||
<h3 class="font-semibold mb-3 flex items-center gap-2">
|
||||
<i class="fas fa-save text-cyan-400"></i>
|
||||
backup-config.yml
|
||||
</h3>
|
||||
<p class="text-gray-400 text-sm mb-2">
|
||||
Sauvegarde les fichiers de configuration importants (/etc, configs apps).
|
||||
</p>
|
||||
<span class="text-xs text-purple-400">Stockage local ou distant</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- API Reference -->
|
||||
<div id="help-api" class="glass-card p-8 mb-8 fade-in help-section-anchor">
|
||||
<h2 class="help-section-title">
|
||||
<span class="text-2xl mr-2">🔗</span>
|
||||
Référence API
|
||||
</h2>
|
||||
<p class="text-gray-400 mb-6">
|
||||
L'API REST est accessible sur le port configuré. Authentification via header <span class="help-code">Authorization: Bearer <token></span>.
|
||||
</p>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-700">
|
||||
<th class="text-left py-3 px-4 text-purple-400">Endpoint</th>
|
||||
<th class="text-left py-3 px-4 text-purple-400">Méthode</th>
|
||||
<th class="text-left py-3 px-4 text-purple-400">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-gray-300">
|
||||
<tr class="border-b border-gray-800">
|
||||
<td class="py-3 px-4"><span class="help-code">/api/hosts</span></td>
|
||||
<td class="py-3 px-4"><span class="text-green-400">GET</span></td>
|
||||
<td class="py-3 px-4">Liste tous les hosts</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800">
|
||||
<td class="py-3 px-4"><span class="help-code">/api/hosts</span></td>
|
||||
<td class="py-3 px-4"><span class="text-blue-400">POST</span></td>
|
||||
<td class="py-3 px-4">Ajoute un nouveau host</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800">
|
||||
<td class="py-3 px-4"><span class="help-code">/api/tasks/logs</span></td>
|
||||
<td class="py-3 px-4"><span class="text-green-400">GET</span></td>
|
||||
<td class="py-3 px-4">Récupère les logs de tâches</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800">
|
||||
<td class="py-3 px-4"><span class="help-code">/api/ansible/playbooks</span></td>
|
||||
<td class="py-3 px-4"><span class="text-green-400">GET</span></td>
|
||||
<td class="py-3 px-4">Liste les playbooks disponibles</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-800">
|
||||
<td class="py-3 px-4"><span class="help-code">/api/ansible/execute</span></td>
|
||||
<td class="py-3 px-4"><span class="text-blue-400">POST</span></td>
|
||||
<td class="py-3 px-4">Exécute un playbook</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 px-4"><span class="help-code">/api/metrics</span></td>
|
||||
<td class="py-3 px-4"><span class="text-green-400">GET</span></td>
|
||||
<td class="py-3 px-4">Métriques du dashboard</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Troubleshooting -->
|
||||
<div id="help-troubleshooting" class="glass-card p-8 mb-8 fade-in help-section-anchor">
|
||||
<h2 class="help-section-title">
|
||||
<span class="text-2xl mr-2">🛠️</span>
|
||||
Dépannage
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="accordion-item" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-header">
|
||||
<span>Le bootstrap échoue avec "Permission denied"</span>
|
||||
<i class="fas fa-chevron-down accordion-icon text-gray-400"></i>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="p-4 text-gray-400 text-sm">
|
||||
<p class="mb-2"><strong>Cause:</strong> Les identifiants SSH fournis sont incorrects ou l'utilisateur n'a pas les droits sudo.</p>
|
||||
<p><strong>Solution:</strong> Vérifiez le nom d'utilisateur et mot de passe. Assurez-vous que l'utilisateur peut exécuter <span class="help-code">sudo</span> sur le host cible.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-header">
|
||||
<span>Les hosts apparaissent "offline" alors qu'ils sont accessibles</span>
|
||||
<i class="fas fa-chevron-down accordion-icon text-gray-400"></i>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="p-4 text-gray-400 text-sm">
|
||||
<p class="mb-2"><strong>Cause:</strong> Le health check n'a pas été exécuté ou la clé SSH n'est pas configurée.</p>
|
||||
<p><strong>Solution:</strong> Exécutez le bootstrap si ce n'est pas fait, puis lancez un Health Check.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-header">
|
||||
<span>Les tâches restent bloquées "En cours"</span>
|
||||
<i class="fas fa-chevron-down accordion-icon text-gray-400"></i>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="p-4 text-gray-400 text-sm">
|
||||
<p class="mb-2"><strong>Cause:</strong> Le processus Ansible peut être bloqué ou le host ne répond plus.</p>
|
||||
<p><strong>Solution:</strong> Vérifiez la connectivité réseau. Consultez les logs système pour plus de détails. Redémarrez le conteneur Docker si nécessaire.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-header">
|
||||
<span>L'interface ne se met pas à jour en temps réel</span>
|
||||
<i class="fas fa-chevron-down accordion-icon text-gray-400"></i>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="p-4 text-gray-400 text-sm">
|
||||
<p class="mb-2"><strong>Cause:</strong> La connexion WebSocket est interrompue.</p>
|
||||
<p><strong>Solution:</strong> Rafraîchissez la page. Vérifiez que le port WebSocket n'est pas bloqué par un firewall ou proxy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Keyboard Shortcuts -->
|
||||
<div id="help-shortcuts" class="glass-card p-8 fade-in help-section-anchor">
|
||||
<h2 class="help-section-title">
|
||||
<span class="text-2xl mr-2">✨</span>
|
||||
Raccourcis & Astuces
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4 text-purple-400">Navigation</h3>
|
||||
<ul class="help-list text-sm">
|
||||
<li>Cliquez sur le logo pour revenir au Dashboard</li>
|
||||
<li>Utilisez les onglets du menu pour naviguer</li>
|
||||
<li>Le thème clair/sombre est persistant</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4 text-purple-400">Productivité</h3>
|
||||
<ul class="help-list text-sm">
|
||||
<li>Filtrez les hosts par groupe pour des actions groupées</li>
|
||||
<li>Utilisez les filtres de date pour retrouver des tâches</li>
|
||||
<li>Exportez les logs avant de les effacer</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- Fin help-main-content -->
|
||||
</div><!-- Fin flex container -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -4532,6 +3834,62 @@ homelab-automation/
|
||||
targetPage.querySelectorAll('.fade-in').forEach(el => {
|
||||
el.classList.add('visible');
|
||||
});
|
||||
|
||||
// Charger dynamiquement le contenu d'aide si nécessaire
|
||||
if (pageName === 'help') {
|
||||
loadHelpContent();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Chargement dynamique du contenu d'aide depuis help.md
|
||||
let helpContentLoaded = false;
|
||||
async function loadHelpContent() {
|
||||
if (helpContentLoaded) return;
|
||||
|
||||
const contentContainer = document.getElementById('help-dynamic-content');
|
||||
const tocNav = document.getElementById('help-toc-nav');
|
||||
|
||||
if (!contentContainer) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/help/content', {
|
||||
headers: window.dashboard ? window.dashboard.getAuthHeaders() : {}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Erreur de chargement');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Injecter le contenu
|
||||
contentContainer.innerHTML = data.content;
|
||||
|
||||
// Injecter la TOC
|
||||
if (tocNav && data.toc) {
|
||||
tocNav.innerHTML = data.toc;
|
||||
}
|
||||
|
||||
// Marquer comme chargé
|
||||
helpContentLoaded = true;
|
||||
|
||||
// Réinitialiser les animations fade-in
|
||||
contentContainer.querySelectorAll('.fade-in, .glass-card').forEach(el => {
|
||||
el.classList.add('visible');
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Erreur chargement aide:', error);
|
||||
contentContainer.innerHTML = `
|
||||
<div class="glass-card p-8 mb-8 text-center">
|
||||
<i class="fas fa-exclamation-triangle text-4xl text-yellow-400 mb-4"></i>
|
||||
<p class="text-gray-400 mb-4">Impossible de charger la documentation.</p>
|
||||
<button onclick="helpContentLoaded = false; loadHelpContent();" class="px-4 py-2 bg-purple-600 rounded-lg hover:bg-purple-500 transition-colors">
|
||||
<i class="fas fa-redo mr-2"></i>Réessayer
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user