Projets/homelab_automation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove Node.js cache files containing npm vulnerability data for vitest and vite packages
Tests / Backend Tests (Python) (3.10) (push) Has been cancelled
Details
Tests / Backend Tests (Python) (3.11) (push) Has been cancelled
Details
Tests / Backend Tests (Python) (3.12) (push) Has been cancelled
Details
Tests / Frontend Tests (JS) (push) Has been cancelled
Details
Tests / Integration Tests (push) Has been cancelled
Details
Tests / All Tests Passed (push) Has been cancelled
Details

Browse Source
This commit is contained in:
bruno
2025-12-15 20:36:06 -05:00
parent 27eed55c9b
commit 68a9b0f390
123 changed files with 13216 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/index.html
+249 -18
View File
@@ -676,6 +676,14 @@
body.light-theme .text-gray-300,
body.light-theme .text-gray-400,
body.light-theme .text-gray-500 {
color: #4b5563 !important;
}
body.light-theme .text-gray-400 {
color: #374151 !important;
}
body.light-theme .text-gray-500 {
color: #6b7280 !important;
}
@@ -684,6 +692,22 @@
body.light-theme .bg-gray-800 {
background-color: #e5e5e5 !important;
}
body.light-theme .bg-gray-800\/40 {
background-color: rgba(229, 231, 235, 0.75) !important;
}
body.light-theme .bg-gray-800\/60 {
background-color: rgba(229, 231, 235, 0.9) !important;
}
body.light-theme .border-gray-700\/60 {
border-color: #d1d5db !important;
}
body.light-theme .border-red-700\/60 {
border-color: #fca5a5 !important;
}
body.light-theme .bg-black {
background-color: #f5f5f5 !important;
@@ -761,13 +785,48 @@
background-color: #7c3aed !important;
color: #f9fafb !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Navigation active state */
.nav-link.active {
color: #7c3aed !important;
font-weight: 600;
border-bottom: 2px solid #7c3aed;
padding-bottom: 2px;
.desktop-nav-links .nav-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.desktop-nav-links .nav-link:hover {
background: rgba(255, 255, 255, 0.06);
}
.desktop-nav-links .nav-link.active {
color: #c4b5fd !important;
background: rgba(124, 58, 237, 0.18);
box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.25) inset;
}
body.light-theme .desktop-nav-links .nav-link:hover {
background: rgba(0, 0, 0, 0.06);
}
body.light-theme .desktop-nav-links .nav-link.active {
color: #6d28d9 !important;
background: rgba(124, 58, 237, 0.14);
box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.22) inset;
}
/* Page transitions */
@@ -974,6 +1033,15 @@
background: linear-gradient(180deg, #f9fafb 0%, #e5e7eb 100%);
}
body.light-theme #page-hosts > div,
body.light-theme #page-playbooks > div,
body.light-theme #page-schedules > div,
body.light-theme #page-alerts > div,
body.light-theme #page-docker > div,
body.light-theme #page-configuration > div {
background: linear-gradient(180deg, #f9fafb 0%, #e5e7eb 100%) !important;
}
/* Badges "Ready" / "Non configuré" en haut du bloc Hosts */
body.light-theme .bg-green-600\/20 {
background-color: #bbf7d0 !important; /* vert clair plein */
@@ -2801,6 +2869,10 @@
<i class="fas fa-file-alt"></i>
<span>Logs</span>
</button>
<button type="button" data-page="docker" class="mobile-nav-link" onclick="mobileNavigateTo('docker'); return false;">
<i class="fab fa-docker"></i>
<span>Docker</span>
</button>
<button type="button" data-page="alerts" class="mobile-nav-link" onclick="mobileNavigateTo('alerts'); return false;">
<i class="fas fa-bell"></i>
<span>Alertes</span>
@@ -2841,15 +2913,46 @@
<!-- Desktop Navigation -->
<div class="desktop-nav-links">
<a href="#" data-page="dashboard" class="nav-link text-gray-300 hover:text-white transition-colors">Dashboard</a>
<a href="#" data-page="hosts" class="nav-link text-gray-300 hover:text-white transition-colors">Hosts</a>
<a href="#" data-page="playbooks" class="nav-link text-gray-300 hover:text-white transition-colors">Playbooks</a>
<a href="#" data-page="tasks" class="nav-link text-gray-300 hover:text-white transition-colors">Tasks</a>
<a href="#" data-page="schedules" class="nav-link text-gray-300 hover:text-white transition-colors">Schedules</a>
<a href="#" data-page="logs" class="nav-link text-gray-300 hover:text-white transition-colors">Logs</a>
<a href="#" data-page="alerts" class="nav-link text-gray-300 hover:text-white transition-colors">Alertes</a>
<a href="#" data-page="configuration" class="nav-link text-gray-300 hover:text-white transition-colors">Configuration</a>
<a href="#" data-page="help" class="nav-link text-gray-300 hover:text-white transition-colors">Aide</a>
<a href="#" data-page="dashboard" class="nav-link text-gray-300 hover:text-white transition-colors" title="Dashboard" aria-label="Dashboard">
<i class="fas fa-gauge-high"></i>
<span class="sr-only">Dashboard</span>
</a>
<a href="#" data-page="hosts" class="nav-link text-gray-300 hover:text-white transition-colors" title="Hosts" aria-label="Hosts">
<i class="fas fa-server"></i>
<span class="sr-only">Hosts</span>
</a>
<a href="#" data-page="playbooks" class="nav-link text-gray-300 hover:text-white transition-colors" title="Playbooks" aria-label="Playbooks">
<i class="fas fa-book"></i>
<span class="sr-only">Playbooks</span>
</a>
<a href="#" data-page="tasks" class="nav-link text-gray-300 hover:text-white transition-colors" title="Tasks" aria-label="Tasks">
<i class="fas fa-list-check"></i>
<span class="sr-only">Tasks</span>
</a>
<a href="#" data-page="schedules" class="nav-link text-gray-300 hover:text-white transition-colors" title="Schedules" aria-label="Schedules">
<i class="fas fa-calendar-alt"></i>
<span class="sr-only">Schedules</span>
</a>
<a href="#" data-page="logs" class="nav-link text-gray-300 hover:text-white transition-colors" title="Logs" aria-label="Logs">
<i class="fas fa-file-alt"></i>
<span class="sr-only">Logs</span>
</a>
<a href="#" data-page="docker" class="nav-link text-gray-300 hover:text-white transition-colors" title="Docker" aria-label="Docker">
<i class="fab fa-docker"></i>
<span class="sr-only">Docker</span>
</a>
<a href="#" data-page="alerts" class="nav-link text-gray-300 hover:text-white transition-colors" title="Alertes" aria-label="Alertes">
<i class="fas fa-bell"></i>
<span class="sr-only">Alertes</span>
</a>
<a href="#" data-page="configuration" class="nav-link text-gray-300 hover:text-white transition-colors" title="Configuration" aria-label="Configuration">
<i class="fas fa-sliders-h"></i>
<span class="sr-only">Configuration</span>
</a>
<a href="#" data-page="help" class="nav-link text-gray-300 hover:text-white transition-colors" title="Aide" aria-label="Aide">
<i class="fas fa-question-circle"></i>
<span class="sr-only">Aide</span>
</a>
<button id="theme-toggle" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors touch-target">
<i class="fas fa-moon text-gray-300"></i>
</button>
@@ -3589,6 +3692,135 @@
</div>
</section>
<!-- ==================== PAGE: DOCKER ==================== -->
<section id="page-docker" class="page-section">
<div class="pt-20 sm:pt-24 pb-8 sm:pb-16 min-h-screen bg-gradient-to-b from-gray-900 to-black">
<div class="max-w-7xl mx-auto px-4 sm:px-6">
<!-- Header -->
<div class="text-center mb-6 sm:mb-12">
<h2 class="text-2xl sm:text-3xl font-bold gradient-text fade-in">
<i class="fab fa-docker mr-2"></i>Docker Hosts
</h2>
<p class="text-gray-400 mt-2">Surveillance et gestion des containers Docker</p>
</div>
<!-- Stats Cards -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
<div class="metric-card">
<div class="text-2xl font-bold text-purple-400" id="docker-stat-hosts">0</div>
<div class="text-gray-400 text-sm">Hosts Docker</div>
</div>
<div class="metric-card">
<div class="text-2xl font-bold text-green-400" id="docker-stat-containers">0</div>
<div class="text-gray-400 text-sm">Containers</div>
</div>
<div class="metric-card">
<div class="text-2xl font-bold text-blue-400" id="docker-stat-images">0</div>
<div class="text-gray-400 text-sm">Images</div>
</div>
<div class="metric-card">
<div class="text-2xl font-bold text-red-400" id="docker-stat-alerts">0</div>
<div class="text-gray-400 text-sm">Alertes</div>
</div>
</div>
<!-- Actions Bar -->
<div class="flex flex-wrap gap-4 mb-6 items-center justify-between">
<div class="flex gap-2">
<button onclick="dockerSection.collectAll()" class="btn-primary flex items-center gap-2">
<i class="fas fa-sync"></i>
<span class="hidden sm:inline">Collecter Tout</span>
</button>
<button onclick="dockerSection.showAlerts()" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors flex items-center gap-2">
<i class="fas fa-bell"></i>
<span class="hidden sm:inline">Alertes Docker</span>
<span id="docker-alerts-badge" class="hidden px-2 py-0.5 bg-red-600 text-white text-xs rounded-full">0</span>
</button>
</div>
<input type="text" id="docker-search" placeholder="Rechercher un host..."
class="px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 w-full sm:w-64">
</div>
<!-- Docker Hosts Grid -->
<div id="docker-hosts-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Docker host cards will be rendered here by JS -->
<div class="glass-card p-6 text-center col-span-full">
<div class="loading-spinner mx-auto mb-4"></div>
<p class="text-gray-400">Chargement des hosts Docker...</p>
</div>
</div>
</div>
</div>
</section>
<!-- END PAGE: DOCKER -->
<!-- Docker Host Detail Modal -->
<div id="docker-detail-modal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
<div class="glass-card w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
<div class="flex justify-between items-center p-4 border-b border-gray-700">
<h3 id="docker-host-name" class="text-xl font-bold"><i class="fab fa-docker mr-2 text-blue-400"></i>Host Docker</h3>
<button onclick="dockerSection.closeModal()" class="p-2 hover:bg-gray-700 rounded-lg transition-colors">
<i class="fas fa-times"></i>
</button>
</div>
<!-- Tabs -->
<div class="flex border-b border-gray-700">
<button class="docker-tab active px-4 py-3 text-sm font-medium" data-tab="containers">
<i class="fas fa-box mr-2"></i>Containers
</button>
<button class="docker-tab px-4 py-3 text-sm font-medium text-gray-400" data-tab="images">
<i class="fas fa-layer-group mr-2"></i>Images
</button>
<button class="docker-tab px-4 py-3 text-sm font-medium text-gray-400" data-tab="volumes">
<i class="fas fa-database mr-2"></i>Volumes
</button>
<button class="docker-tab px-4 py-3 text-sm font-medium text-gray-400" data-tab="host-alerts">
<i class="fas fa-exclamation-triangle mr-2"></i>Alertes
</button>
</div>
<!-- Tab Content -->
<div class="flex-1 overflow-auto p-4">
<div id="docker-tab-containers" class="docker-tab-content">
<div id="docker-containers-list" class="space-y-2">
<!-- Containers will be rendered here -->
</div>
</div>
<div id="docker-tab-images" class="docker-tab-content hidden">
<div id="docker-images-list" class="space-y-2">
<!-- Images will be rendered here -->
</div>
</div>
<div id="docker-tab-volumes" class="docker-tab-content hidden">
<div id="docker-volumes-list" class="space-y-2">
<!-- Volumes will be rendered here -->
</div>
</div>
<div id="docker-tab-host-alerts" class="docker-tab-content hidden">
<div id="docker-host-alerts-list" class="space-y-2">
<!-- Host alerts will be rendered here -->
</div>
</div>
</div>
</div>
</div>
<!-- Container Logs Modal -->
<div id="docker-logs-modal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
<div class="glass-card w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
<div class="flex justify-between items-center p-4 border-b border-gray-700">
<h3 id="docker-logs-title" class="text-xl font-bold"><i class="fas fa-file-alt mr-2 text-green-400"></i>Container Logs</h3>
<button onclick="dockerSection.closeLogsModal()" class="p-2 hover:bg-gray-700 rounded-lg transition-colors">
<i class="fas fa-times"></i>
</button>
</div>
<div class="flex-1 overflow-auto p-4">
<pre id="docker-logs-content" class="bg-black/50 p-4 rounded-lg text-sm font-mono text-gray-300 whitespace-pre-wrap overflow-x-auto"></pre>
</div>
</div>
</div>
<section id="page-configuration" class="page-section">
<div class="pt-20 sm:pt-24 pb-8 sm:pb-16 min-h-screen bg-gradient-to-b from-gray-900 to-black">
<div class="max-w-7xl mx-auto px-4 sm:px-6">
@@ -4109,10 +4341,6 @@
}
}
// Setup desktop theme toggles
document.getElementById('theme-toggle')?.addEventListener('click', toggleTheme);
document.getElementById('theme-toggle-mobile')?.addEventListener('click', toggleTheme);
// Initialize mobile nav links state
updateMobileNavLinks(currentPage);
});
@@ -4459,5 +4687,8 @@
}
}
</script>
<!-- Docker Section JavaScript -->
<script src="/static/docker_section.js"></script>
</body>
</html>