Feat : Lot of stuff

vps-monitor/frontend/src/components/VpsCard.jsx

@@ -1,4 +1,4 @@
-import { Server, Wifi, WifiOff, Trash2, ChevronDown, ChevronUp, RefreshCw, Cpu, MemoryStick, ArrowUp, ArrowDown, Pencil, BarChart2 } from 'lucide-react'
+import { Server, Wifi, WifiOff, Trash2, ChevronDown, ChevronUp, RefreshCw, Cpu, MemoryStick, ArrowUp, ArrowDown, Pencil, BarChart2, CloudDownload } from 'lucide-react'
 import { useState } from 'react'
 import ContainerRow from './ContainerRow'
 import { tagColor } from './TagInput'
@@ -14,9 +14,10 @@ function formatRam(bytes) {
   return `${(bytes / 1024 ** 3).toFixed(1)} GB`
 }
 
-export default function VpsCard({ vps, onAction, onLogs, onDelete, onUpdate, onEdit, onStats }) {
+export default function VpsCard({ vps, onAction, onLogs, onDelete, onUpdate, onEdit, onStats, onUpdateAgent }) {
   const [collapsed, setCollapsed] = useState(false)
   const [updatingProject, setUpdatingProject] = useState(null)
+  const [updatingAgent, setUpdatingAgent] = useState(false)
 
   const running = vps.containers.filter(c => c.status === 'running').length
   const total   = vps.containers.length
@@ -28,6 +29,11 @@ export default function VpsCard({ vps, onAction, onLogs, onDelete, onUpdate, onE
     try { await onUpdate(vps.id, project) } finally { setUpdatingProject(null) }
   }
 
+  const handleUpdateAgent = async () => {
+    setUpdatingAgent(true)
+    try { await onUpdateAgent(vps.id) } finally { setUpdatingAgent(false) }
+  }
+
   return (
     <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden flex flex-col">
       {/* Header */}
@@ -171,6 +177,40 @@ export default function VpsCard({ vps, onAction, onLogs, onDelete, onUpdate, onE
         </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&nbsp;:</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">