feat : update agent 2

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

@@ -1,13 +1,32 @@
-import { Server, Wifi, WifiOff, Trash2, ChevronDown, ChevronUp } from 'lucide-react'
+import { Server, Wifi, WifiOff, Trash2, ChevronDown, ChevronUp, RefreshCw, Cpu, MemoryStick, ArrowUp, ArrowDown } from 'lucide-react'
 import { useState } from 'react'
 import ContainerRow from './ContainerRow'
 
-export default function VpsCard({ vps, onAction, onLogs, onDelete }) {
+function formatBytes(bps) {
+  if (bps < 1024)         return `${bps.toFixed(0)} B/s`
+  if (bps < 1024 * 1024)  return `${(bps / 1024).toFixed(1)} KB/s`
+  return `${(bps / 1024 / 1024).toFixed(1)} MB/s`
+}
+
+function formatRam(bytes) {
+  if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(0)} MB`
+  return `${(bytes / 1024 ** 3).toFixed(1)} GB`
+}
+
+export default function VpsCard({ vps, onAction, onLogs, onDelete, onUpdate }) {
   const [collapsed, setCollapsed] = useState(false)
+  const [updatingProject, setUpdatingProject] = useState(null)
 
   const running = vps.containers.filter(c => c.status === 'running').length
   const total   = vps.containers.length
 
+  const composeProjects = [...new Set(vps.containers.map(c => c.compose_project).filter(Boolean))]
+
+  const handleUpdate = async (project) => {
+    setUpdatingProject(project)
+    try { await onUpdate(vps.id, project) } finally { setUpdatingProject(null) }
+  }
+
   return (
     <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden flex flex-col">
       {/* Header */}
@@ -59,6 +78,25 @@ export default function VpsCard({ vps, onAction, onLogs, onDelete }) {
         </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">
+          <span className="flex items-center gap-1">
+            <Cpu size={11} className="text-indigo-400" />
+            CPU <span className={`font-medium ml-0.5 ${vps.system.cpu_percent > 80 ? 'text-red-400' : vps.system.cpu_percent > 60 ? 'text-yellow-400' : 'text-emerald-400'}`}>{vps.system.cpu_percent.toFixed(1)}%</span>
+          </span>
+          <span className="flex items-center gap-1">
+            <MemoryStick size={11} className="text-indigo-400" />
+            RAM <span className={`font-medium ml-0.5 ${vps.system.ram_percent > 80 ? 'text-red-400' : vps.system.ram_percent > 60 ? 'text-yellow-400' : 'text-emerald-400'}`}>{formatRam(vps.system.ram_used)}/{formatRam(vps.system.ram_total)}</span>
+            <span className="text-gray-600">({vps.system.ram_percent.toFixed(0)}%)</span>
+          </span>
+          <span className="flex items-center gap-1">
+            <ArrowUp size={11} className="text-sky-400" />{formatBytes(vps.system.net_sent_per_sec)}
+            <ArrowDown size={11} className="text-violet-400 ml-1" />{formatBytes(vps.system.net_recv_per_sec)}
+          </span>
+        </div>
+      )}
+
       {/* Description */}
       {vps.description && !collapsed && (
         <p className="px-4 py-2 text-xs text-gray-500 border-b border-gray-800/60">{vps.description}</p>
@@ -82,6 +120,24 @@ export default function VpsCard({ vps, onAction, onLogs, onDelete }) {
         </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>
+      )}
+
       {/* 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">