homelab_automation/app/index.html_dashboard_temp_rewrite

110 lines
7.7 KiB
Plaintext

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Schedules Widget (Moved to top) -->
<div class="lg:col-span-2">
<div class="glass-card p-6 fade-in">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">
<i class="fas fa-calendar-alt text-purple-400 mr-2"></i>Planificateur
</h3>
<a href="#" data-page="schedules" class="nav-link text-purple-400 text-sm hover:underline">Voir tout →</a>
</div>
<!-- Stats mini -->
<div class="grid grid-cols-3 gap-2 mb-4">
<div class="text-center p-2 bg-gray-800/50 rounded">
<div class="text-lg font-bold text-green-400" id="dashboard-schedules-active">0</div>
<div class="text-xs text-gray-500">Actifs</div>
</div>
<div class="text-center p-2 bg-gray-800/50 rounded">
<div class="text-lg font-bold text-blue-400" id="dashboard-schedules-next">--</div>
<div class="text-xs text-gray-500">Prochaine</div>
</div>
<div class="text-center p-2 bg-gray-800/50 rounded">
<div class="text-lg font-bold text-red-400" id="dashboard-schedules-failures">0</div>
<div class="text-xs text-gray-500">Échecs 24h</div>
</div>
</div>
<!-- Next executions -->
<div id="dashboard-upcoming-schedules" class="space-y-2 text-sm">
<p class="text-gray-500 text-center py-4">Chargement...</p>
</div>
<button onclick="showCreateScheduleModal()" class="w-full mt-4 p-2 bg-purple-600 hover:bg-purple-500 rounded-lg text-sm transition-colors">
<i class="fas fa-plus mr-2"></i>Nouveau schedule
</button>
</div>
</div>
<!-- Quick Actions -->
<div class="glass-card p-6 fade-in">
<h3 class="text-xl font-semibold mb-6">Actions Rapides</h3>
<div class="space-y-4">
<button class="w-full p-4 bg-gradient-to-r from-green-600 to-green-700 rounded-lg text-left hover:from-green-500 hover:to-green-600 transition-all" onclick="executeTask('upgrade-all')">
<i class="fas fa-arrow-up mr-3"></i>
Mettre à jour tous les hôtes
</button>
<button class="w-full p-4 bg-gradient-to-r from-blue-600 to-blue-700 rounded-lg text-left hover:from-blue-500 hover:to-blue-600 transition-all" onclick="executeTask('reboot-all')">
<i class="fas fa-redo mr-3"></i>
Redémarrer les hôtes
</button>
<button class="w-full p-4 bg-gradient-to-r from-purple-600 to-purple-700 rounded-lg text-left hover:from-purple-500 hover:to-purple-600 transition-all" onclick="executeTask('health-check')">
<i class="fas fa-heartbeat mr-3"></i>
Vérifier la santé
</button>
<button class="w-full p-4 bg-gradient-to-r from-orange-600 to-orange-700 rounded-lg text-left hover:from-orange-500 hover:to-orange-600 transition-all" onclick="executeTask('backup')">
<i class="fas fa-save mr-3"></i>
Sauvegarder la configuration
</button>
</div>
</div>
<!-- Hosts Management (Moved down) -->
<div class="lg:col-span-2">
<div class="glass-card p-6 fade-in">
<div class="flex items-center justify-between mb-6">
<h3 class="text-xl font-semibold">Gestion des Hosts</h3>
<div class="flex items-center space-x-2">
<button class="btn-primary" onclick="dashboard.addHost()">
<i class="fas fa-plus mr-2"></i>
Ajouter Host
</button>
<div class="relative group">
<button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors flex items-center">
<i class="fas fa-layer-group mr-2"></i>
Groupes
<i class="fas fa-chevron-down ml-2 text-xs"></i>
</button>
<div class="absolute right-0 mt-2 w-56 bg-gray-800 border border-gray-700 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
<div class="py-2">
<div class="px-4 py-2 text-xs text-gray-400 uppercase tracking-wider border-b border-gray-700">Environnements</div>
<button onclick="dashboard.showAddGroupModal('env')" class="w-full px-4 py-2 text-left hover:bg-gray-700 flex items-center">
<i class="fas fa-plus text-green-400 mr-3 w-4"></i>
Ajouter environnement
</button>
<button onclick="dashboard.showManageGroupsModal('env')" class="w-full px-4 py-2 text-left hover:bg-gray-700 flex items-center">
<i class="fas fa-edit text-blue-400 mr-3 w-4"></i>
Gérer environnements
</button>
<div class="px-4 py-2 text-xs text-gray-400 uppercase tracking-wider border-b border-t border-gray-700 mt-2">Rôles</div>
<button onclick="dashboard.showAddGroupModal('role')" class="w-full px-4 py-2 text-left hover:bg-gray-700 flex items-center">
<i class="fas fa-plus text-green-400 mr-3 w-4"></i>
Ajouter rôle
</button>
<button onclick="dashboard.showManageGroupsModal('role')" class="w-full px-4 py-2 text-left hover:bg-gray-700 flex items-center">
<i class="fas fa-edit text-blue-400 mr-3 w-4"></i>
Gérer rôles
</button>
</div>
</div>
</div>
</div>
</div>
<div id="hosts-list" class="space-y-4">
<!-- Hosts will be populated by JavaScript -->
</div>
</div>
</div>
</div>