Feat : Various features

vps-monitor/frontend/src/App.jsx

@@ -1,12 +1,20 @@
 import { useState, useEffect, useCallback } from 'react'
-import { fetchAllStatus, containerAction, addVps, deleteVps, fetchLogs, authStatus, getToken, setToken, composeUpdate } from './api/client'
-import Header       from './components/Header'
-import VpsCard      from './components/VpsCard'
-import LogsModal    from './components/LogsModal'
-import AddVpsModal  from './components/AddVpsModal'
-import LoginPage    from './components/LoginPage'
+import { fetchAllStatus, containerAction, addVps, deleteVps, fetchLogs, authStatus, getToken, setToken, composeUpdate, updateVps } from './api/client'
+import Header        from './components/Header'
+import VpsCard       from './components/VpsCard'
+import LogsModal     from './components/LogsModal'
+import AddVpsModal   from './components/AddVpsModal'
+import EditVpsModal  from './components/EditVpsModal'
+import LoginPage     from './components/LoginPage'
 
-const REFRESH_INTERVAL = 30_000
+const INTERVAL_OPTIONS = [
+  { label: '10 s',  value: 10_000 },
+  { label: '30 s',  value: 30_000 },
+  { label: '1 min', value: 60_000 },
+  { label: '2 min', value: 120_000 },
+  { label: '5 min', value: 300_000 },
+  { label: 'Off',   value: 0 },
+]
 
 export default function App() {
   const [token,       setTokenState]  = useState(() => getToken())
@@ -23,6 +31,16 @@ export default function App() {
   const [logsContent, setLogsContent] = useState('')
   const [logsLoading, setLogsLoading] = useState(false)
   const [showAddVps,  setShowAddVps]  = useState(false)
+  const [editVps,     setEditVps]     = useState(null)   // objet vps à éditer
+  const [refreshInterval, setRefreshInterval] = useState(() => {
+    const stored = localStorage.getItem('refreshInterval')
+    return stored ? parseInt(stored, 10) : 30_000
+  })
+
+  const handleIntervalChange = (val) => {
+    setRefreshInterval(val)
+    localStorage.setItem('refreshInterval', val)
+  }
 
   const [updateModal,   setUpdateModal]   = useState(null)   // { vpsId, project }
   const [updateContent, setUpdateContent] = useState('')
@@ -85,9 +103,10 @@ export default function App() {
   useEffect(() => {
     if (!token) return
     refresh()
-    const id = setInterval(() => refresh(), REFRESH_INTERVAL)
+    if (!refreshInterval) return
+    const id = setInterval(() => refresh(), refreshInterval)
     return () => clearInterval(id)
-  }, [refresh, token])
+  }, [refresh, token, refreshInterval])
 
   // Extrait le username du token stocké au rechargement de page
   useEffect(() => {
@@ -145,6 +164,12 @@ export default function App() {
     await refresh(true)
   }
 
+  const handleEditVps = async (vpsId, data) => {
+    await updateVps(vpsId, data)
+    setEditVps(null)
+    await refresh(true)
+  }
+
   // Attente vérification auth
   if (!authChecked) return null
 
@@ -172,6 +197,9 @@ export default function App() {
         refreshing={refreshing}
         username={username}
         onLogout={handleLogout}
+        refreshInterval={refreshInterval}
+        onIntervalChange={handleIntervalChange}
+        intervalOptions={INTERVAL_OPTIONS}
       />
 
       <main className="max-w-7xl mx-auto px-4 py-8">
@@ -189,7 +217,7 @@ export default function App() {
             {[
               { label: 'VPS en ligne',       value: `${totalOnline}/${vpsList.length}`,  color: 'text-emerald-400' },
               { label: 'Conteneurs actifs',  value: `${totalRunning}/${totalContainers}`, color: 'text-indigo-400' },
-              { label: 'Actualisation auto', value: '30s',                                color: 'text-gray-400' },
+              { label: 'Actualisation auto', value: INTERVAL_OPTIONS.find(o => o.value === refreshInterval)?.label ?? 'Off', color: 'text-gray-400' },
             ].map(({ label, value, color }) => (
               <div key={label} className="bg-gray-900 border border-gray-800 rounded-xl px-4 py-3">
                 <p className={`text-2xl font-bold ${color}`}>{value}</p>
@@ -234,6 +262,7 @@ export default function App() {
                 onLogs={openLogs}
                 onDelete={handleDeleteVps}
                 onUpdate={handleUpdate}
+                onEdit={setEditVps}
               />
             ))}
           </div>
@@ -267,6 +296,15 @@ export default function App() {
           onClose={() => setShowAddVps(false)}
         />
       )}
+
+      {/* Modal édition VPS */}
+      {editVps && (
+        <EditVpsModal
+          vps={editVps}
+          onSave={handleEditVps}
+          onClose={() => setEditVps(null)}
+        />
+      )}
     </div>
   )
 }