Feat: add agent version display and update button in VpsCard component
All checks were successful
Build and Push Docker Images / docker (push) Successful in 25s
All checks were successful
Build and Push Docker Images / docker (push) Successful in 25s
This commit is contained in:
jeanotx32
@@ -118,6 +118,58 @@ export default function VpsCard({ vps, onAction, onLogs, onDelete, onUpdate, onE
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Version de l'agent + bouton mise à jour */}
|
||||
{vps.online && (
|
||||
<div className="px-4 py-2 border-b border-gray-800/60 flex items-center gap-3">
|
||||
<span className="text-xs text-gray-500">Agent :</span>
|
||||
{vps.agent_version ? (
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border ${
|
||||
vps.agent_up_to_date
|
||||
? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400'
|
||||
: 'bg-orange-500/10 border-orange-500/30 text-orange-400'
|
||||
}`}
|
||||
title={vps.agent_up_to_date ? 'Agent à jour' : `Mise à jour disponible (attendu : ${vps.expected_agent_version})`}
|
||||
>
|
||||
{vps.agent_up_to_date ? '✓' : '⚠'} v{vps.agent_version}
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border bg-gray-700/30 border-gray-600/30 text-gray-500">
|
||||
inconnu
|
||||
</span>
|
||||
)}
|
||||
{(!vps.agent_up_to_date || vps.agent_version === 'unknown') && (
|
||||
<button
|
||||
onClick={handleUpdateAgent}
|
||||
disabled={updatingAgent}
|
||||
className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs bg-orange-500/10 border border-orange-500/30 text-orange-300 hover:bg-orange-500/30 hover:text-orange-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title={`Mettre à jour l'agent vers v${vps.expected_agent_version}`}
|
||||
>
|
||||
<CloudDownload size={11} className={updatingAgent ? 'animate-bounce' : ''} />
|
||||
{updatingAgent ? 'Mise à jour...' : 'Mettre à jour l\'agent'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Boutons de mise à jour par projet compose */}
|
||||
{vps.online && composeProjects.length > 0 && (
|
||||
<div className="px-4 py-2 border-b border-gray-800/60 flex flex-wrap gap-2">
|
||||
{composeProjects.map(project => (
|
||||
<button
|
||||
key={project}
|
||||
onClick={() => handleUpdate(project)}
|
||||
disabled={!!updatingProject}
|
||||
className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 hover:bg-indigo-600/40 hover:text-indigo-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title={`docker compose pull && up -d (${project})`}
|
||||
>
|
||||
<RefreshCw size={11} className={updatingProject === project ? 'animate-spin' : ''} />
|
||||
Update {project}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Informations système */}
|
||||
{vps.online && vps.system && !collapsed && (
|
||||
<div className="px-4 py-2 border-b border-gray-800/60 flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-400 bg-gray-900/50">
|
||||
@@ -174,58 +226,6 @@ export default function VpsCard({ vps, onAction, onLogs, onDelete, onUpdate, onE
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Boutons de mise à jour par projet compose */}
|
||||
{!collapsed && vps.online && composeProjects.length > 0 && (
|
||||
<div className="px-4 py-2 border-t border-gray-800/60 flex flex-wrap gap-2">
|
||||
{composeProjects.map(project => (
|
||||
<button
|
||||
key={project}
|
||||
onClick={() => handleUpdate(project)}
|
||||
disabled={!!updatingProject}
|
||||
className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 hover:bg-indigo-600/40 hover:text-indigo-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title={`docker compose pull && up -d (${project})`}
|
||||
>
|
||||
<RefreshCw size={11} className={updatingProject === project ? 'animate-spin' : ''} />
|
||||
Update {project}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Version de l'agent + bouton mise à jour */}
|
||||
{!collapsed && vps.online && (
|
||||
<div className="px-4 py-2 border-t border-gray-800/60 flex items-center gap-3">
|
||||
<span className="text-xs text-gray-500">Agent :</span>
|
||||
{vps.agent_version ? (
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border ${
|
||||
vps.agent_up_to_date
|
||||
? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400'
|
||||
: 'bg-orange-500/10 border-orange-500/30 text-orange-400'
|
||||
}`}
|
||||
title={vps.agent_up_to_date ? 'Agent à jour' : `Mise à jour disponible (attendu : ${vps.expected_agent_version})`}
|
||||
>
|
||||
{vps.agent_up_to_date ? '✓' : '⚠'} v{vps.agent_version}
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border bg-gray-700/30 border-gray-600/30 text-gray-500">
|
||||
inconnu
|
||||
</span>
|
||||
)}
|
||||
{(!vps.agent_up_to_date || vps.agent_version === 'unknown') && (
|
||||
<button
|
||||
onClick={handleUpdateAgent}
|
||||
disabled={updatingAgent}
|
||||
className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs bg-orange-500/10 border border-orange-500/30 text-orange-300 hover:bg-orange-500/30 hover:text-orange-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title={`Mettre à jour l'agent vers v${vps.expected_agent_version}`}
|
||||
>
|
||||
<CloudDownload size={11} className={updatingAgent ? 'animate-bounce' : ''} />
|
||||
{updatingAgent ? 'Mise à jour...' : 'Mettre à jour l\'agent'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer stats */}
|
||||
{!collapsed && vps.online && total > 0 && (
|
||||
<div className="px-4 py-2 border-t border-gray-800/60 flex gap-4 text-xs text-gray-600">
|
||||
|
||||
Reference in New Issue
Block a user