71c17e3dc1
All checks were successful
Build and Push Docker Images / docker (push) Successful in 25s
- Updated agent to version 1.4.0 with new endpoints for managing Docker Compose applications. - Implemented API requests in the backend for listing, creating, editing, and deploying applications. - Introduced a new AppsModal component in the frontend for user interaction with applications. - Added YAML editor for editing Docker Compose files with validation. - Enhanced VpsCard component to include options for managing applications. - Updated client API functions to support new application management features.
418 lines
16 KiB
JavaScript
418 lines
16 KiB
JavaScript
import { useCallback, useEffect, useState } from 'react'
|
|
import {
|
|
Boxes, FilePlus2, RefreshCw, Pencil, Rocket, ArrowLeft, AlertTriangle,
|
|
FolderOpen, Terminal as TerminalIcon,
|
|
} from 'lucide-react'
|
|
import Modal from './ui/Modal'
|
|
import YamlEditor from './YamlEditor'
|
|
import { Button, inputClass, Skeleton, EmptyState } from './ui/controls'
|
|
import { useToast } from './ui/Toast'
|
|
import { fetchApps, fetchAppCompose, saveAppCompose, createApp, deployApp } from '../api/client'
|
|
import { formatBytes } from '../lib/format'
|
|
|
|
const APP_NAME_RE = /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/
|
|
|
|
const COMPOSE_FILENAMES = ['compose.yaml', 'compose.yml', 'docker-compose.yml', 'docker-compose.yaml']
|
|
|
|
const TEMPLATE = (name) => `services:
|
|
${name}:
|
|
image: nginx:alpine
|
|
container_name: ${name}
|
|
restart: unless-stopped
|
|
ports:
|
|
- "8080:80"
|
|
volumes:
|
|
- ./data:/usr/share/nginx/html:ro
|
|
`
|
|
|
|
export default function AppsModal({ vps, onClose }) {
|
|
const toast = useToast()
|
|
|
|
const [view, setView] = useState('list') // 'list' | 'editor' | 'create'
|
|
const [apps, setApps] = useState([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState(null)
|
|
const [busy, setBusy] = useState(null) // nom de l'app en cours de déploiement
|
|
|
|
// Édition
|
|
const [editing, setEditing] = useState(null) // { name, file, path, original }
|
|
const [content, setContent] = useState('')
|
|
const [saving, setSaving] = useState(false)
|
|
const [saveError, setSaveError] = useState(null)
|
|
const [leaving, setLeaving] = useState(false) // demande de sortie avec modifications
|
|
|
|
// Création — le modèle suit le nom saisi tant que l'utilisateur n'a pas
|
|
// touché à l'éditeur ; dès qu'il y écrit, on ne réécrit plus rien.
|
|
const [newName, setNewName] = useState('')
|
|
const [newFilename, setNewFilename] = useState('compose.yaml')
|
|
const [newContent, setNewContent] = useState('')
|
|
const [templateTouched, setTemplateTouched] = useState(false)
|
|
|
|
// Sortie de déploiement
|
|
const [output, setOutput] = useState(null)
|
|
|
|
const dirty = view === 'editor' && editing !== null && content !== editing.original
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true)
|
|
setError(null)
|
|
try {
|
|
setApps(await fetchApps(vps.id))
|
|
} catch (e) {
|
|
setError(e.message)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [vps.id])
|
|
|
|
useEffect(() => { load() }, [load])
|
|
|
|
// ─── Actions ──────────────────────────────────────────────────────────────
|
|
|
|
const openEditor = async (app) => {
|
|
setBusy(app.name)
|
|
setSaveError(null)
|
|
setOutput(null)
|
|
try {
|
|
const data = await fetchAppCompose(vps.id, app.name)
|
|
setEditing({ name: data.name, file: data.file, path: data.path, original: data.content })
|
|
setContent(data.content)
|
|
setView('editor')
|
|
} catch (e) {
|
|
toast.error(`Lecture de ${app.name} impossible : ${e.message}`)
|
|
} finally {
|
|
setBusy(null)
|
|
}
|
|
}
|
|
|
|
const handleSave = async (deploy) => {
|
|
setSaving(true)
|
|
setSaveError(null)
|
|
setOutput(null)
|
|
try {
|
|
const result = await saveAppCompose(vps.id, editing.name, content, deploy)
|
|
setEditing(prev => ({ ...prev, original: content, file: result.file }))
|
|
toast.success(
|
|
deploy ? `${editing.name} enregistrée et déployée.` : `${editing.name} enregistrée.`
|
|
)
|
|
if (result.output) setOutput(result.output)
|
|
load()
|
|
} catch (e) {
|
|
setSaveError(e.message)
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
const handleCreate = async (deploy) => {
|
|
setSaving(true)
|
|
setSaveError(null)
|
|
setOutput(null)
|
|
try {
|
|
const result = await createApp(vps.id, {
|
|
name: newName.trim(), content: newContent, filename: newFilename, deploy,
|
|
})
|
|
toast.success(`Application « ${result.name} » créée dans ${result.path}.`)
|
|
if (result.output) setOutput(result.output)
|
|
await load()
|
|
setEditing({ name: result.name, file: result.file, path: result.path, original: newContent })
|
|
setContent(newContent)
|
|
setView('editor')
|
|
} catch (e) {
|
|
setSaveError(e.message)
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
const handleDeploy = async (app) => {
|
|
setBusy(app.name)
|
|
setOutput(null)
|
|
try {
|
|
const result = await deployApp(vps.id, app.name)
|
|
toast.success(`${app.name} déployée.`)
|
|
setOutput(result.output)
|
|
load()
|
|
} catch (e) {
|
|
toast.error(`Déploiement de ${app.name} impossible : ${e.message}`)
|
|
} finally {
|
|
setBusy(null)
|
|
}
|
|
}
|
|
|
|
const startCreate = () => {
|
|
setNewName('')
|
|
setNewFilename('compose.yaml')
|
|
setNewContent(TEMPLATE('mon-app'))
|
|
setTemplateTouched(false)
|
|
setSaveError(null)
|
|
setOutput(null)
|
|
setView('create')
|
|
}
|
|
|
|
const handleNewName = (value) => {
|
|
setNewName(value)
|
|
const trimmed = value.trim()
|
|
if (!templateTouched) setNewContent(TEMPLATE(APP_NAME_RE.test(trimmed) ? trimmed : 'mon-app'))
|
|
}
|
|
|
|
const handleNewContent = (value) => {
|
|
setTemplateTouched(true)
|
|
setNewContent(value)
|
|
}
|
|
|
|
const backToList = () => {
|
|
if (dirty && !leaving) { setLeaving(true); return }
|
|
setLeaving(false)
|
|
setEditing(null)
|
|
setSaveError(null)
|
|
setView('list')
|
|
}
|
|
|
|
const requestClose = () => {
|
|
if (dirty && !leaving) { setLeaving(true); return }
|
|
onClose()
|
|
}
|
|
|
|
const nameValid = APP_NAME_RE.test(newName.trim())
|
|
|
|
// ─── Rendu ────────────────────────────────────────────────────────────────
|
|
|
|
const title = {
|
|
list: `Applications — ${vps.name}`,
|
|
editor: editing ? `${editing.name} / ${editing.file}` : 'Édition',
|
|
create: `Nouvelle application — ${vps.name}`,
|
|
}[view]
|
|
|
|
const subtitle = {
|
|
list: `Fichiers compose sous /home sur ${vps.host}`,
|
|
editor: editing?.path,
|
|
create: `Créé dans /home/${newName.trim() || '<nom>'}/${newFilename}`,
|
|
}[view]
|
|
|
|
return (
|
|
<Modal
|
|
size="xl"
|
|
title={title}
|
|
subtitle={subtitle}
|
|
icon={<Boxes size={16} className="text-indigo-400 flex-shrink-0" />}
|
|
onClose={requestClose}
|
|
// Tab sert à indenter le YAML ; Échap ne doit pas jeter des modifications.
|
|
trapTab={false}
|
|
closeOnEscape={!dirty}
|
|
bodyClassName="flex flex-col overflow-hidden p-0"
|
|
headerRight={view === 'list' && (
|
|
<>
|
|
<Button variant="ghost" size="sm" icon={RefreshCw} onClick={load} disabled={loading}>
|
|
<span className="hidden sm:inline">Actualiser</span>
|
|
</Button>
|
|
<Button variant="primary" size="sm" icon={FilePlus2} onClick={startCreate}>
|
|
<span className="hidden sm:inline">Nouvelle application</span>
|
|
</Button>
|
|
</>
|
|
)}
|
|
footer={
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
{leaving ? (
|
|
<>
|
|
<p className="text-xs text-orange-300 flex items-center gap-1.5">
|
|
<AlertTriangle size={13} />
|
|
Modifications non enregistrées. Quitter sans enregistrer ?
|
|
</p>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" size="sm" onClick={() => setLeaving(false)}>Rester</Button>
|
|
<Button variant="danger" size="sm" onClick={() => { setLeaving(false); setEditing(null); setView('list') }}>
|
|
Abandonner
|
|
</Button>
|
|
</div>
|
|
</>
|
|
) : view === 'list' ? (
|
|
<>
|
|
<p className="text-[11px] text-gray-600">
|
|
{apps.length} application{apps.length > 1 ? 's' : ''} détectée{apps.length > 1 ? 's' : ''}
|
|
</p>
|
|
<Button variant="outline" size="sm" onClick={onClose}>Fermer</Button>
|
|
</>
|
|
) : view === 'editor' ? (
|
|
<>
|
|
<p className="text-[11px] text-gray-600">
|
|
{dirty
|
|
? 'Modifications non enregistrées · l\'ancienne version est sauvegardée en .bak'
|
|
: 'Validé par `docker compose config` avant écriture'}
|
|
</p>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" size="sm" icon={ArrowLeft} onClick={backToList}>Retour</Button>
|
|
<Button variant="secondary" size="sm" onClick={() => handleSave(false)} loading={saving} disabled={!dirty}>
|
|
Enregistrer
|
|
</Button>
|
|
<Button variant="primary" size="sm" icon={Rocket} onClick={() => handleSave(true)} loading={saving}>
|
|
Enregistrer et déployer
|
|
</Button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<p className="text-[11px] text-gray-600">
|
|
Le dossier est créé s'il n'existe pas encore.
|
|
</p>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" size="sm" icon={ArrowLeft} onClick={() => setView('list')}>Retour</Button>
|
|
<Button variant="secondary" size="sm" onClick={() => handleCreate(false)} loading={saving} disabled={!nameValid}>
|
|
Créer
|
|
</Button>
|
|
<Button variant="primary" size="sm" icon={Rocket} onClick={() => handleCreate(true)} loading={saving} disabled={!nameValid}>
|
|
Créer et déployer
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
}
|
|
>
|
|
{/* ── Liste ── */}
|
|
{view === 'list' && (
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
{error && (
|
|
<div role="alert" className="mb-4 bg-red-950/40 border border-red-800/50 rounded-lg px-3 py-2 text-xs text-red-300">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{loading ? (
|
|
<div className="space-y-2">
|
|
{Array.from({ length: 4 }, (_, i) => <Skeleton key={i} className="h-14" />)}
|
|
</div>
|
|
) : apps.length === 0 && !error ? (
|
|
<EmptyState
|
|
icon={FolderOpen}
|
|
title="Aucune application détectée"
|
|
description="Aucun dossier de /home ne contient de fichier compose. Créez-en une pour démarrer."
|
|
action={<Button variant="primary" icon={FilePlus2} onClick={startCreate}>Nouvelle application</Button>}
|
|
/>
|
|
) : (
|
|
<ul className="divide-y divide-gray-800/60">
|
|
{apps.map(app => (
|
|
<li key={app.name} className="flex flex-wrap items-center gap-3 py-3">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className="text-sm font-medium text-gray-200">{app.name}</span>
|
|
<span className="text-[10px] font-mono text-gray-500 bg-gray-800 px-1.5 py-0.5 rounded">
|
|
{app.file}
|
|
</span>
|
|
{app.running_containers > 0 ? (
|
|
<span className="text-[10px] px-1.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400">
|
|
{app.running_containers} conteneur{app.running_containers > 1 ? 's' : ''} actif{app.running_containers > 1 ? 's' : ''}
|
|
</span>
|
|
) : (
|
|
<span className="text-[10px] px-1.5 py-0.5 rounded-full bg-gray-700/40 text-gray-500">
|
|
arrêtée
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-gray-600 font-mono truncate mt-0.5">
|
|
{app.path} · {formatBytes(app.size)} · modifié le {new Date(app.modified).toLocaleString('fr-FR')}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 flex-shrink-0">
|
|
<Button variant="secondary" size="sm" icon={Pencil}
|
|
onClick={() => openEditor(app)} loading={busy === app.name}>
|
|
Éditer
|
|
</Button>
|
|
<Button variant="outline" size="sm" icon={Rocket}
|
|
onClick={() => handleDeploy(app)} loading={busy === app.name}>
|
|
Déployer
|
|
</Button>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
|
|
{output && <DeployOutput output={output} onClear={() => setOutput(null)} />}
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Édition ── */}
|
|
{view === 'editor' && editing && (
|
|
<div className="flex-1 flex flex-col overflow-hidden">
|
|
{saveError && (
|
|
<div role="alert" className="m-4 mb-0 bg-red-950/40 border border-red-800/50 rounded-lg px-3 py-2 text-xs text-red-300 whitespace-pre-wrap font-mono max-h-32 overflow-y-auto">
|
|
{saveError}
|
|
</div>
|
|
)}
|
|
<div className="p-4 pb-0 flex-1 flex flex-col overflow-hidden">
|
|
<YamlEditor value={content} onChange={setContent} disabled={saving} />
|
|
{output && <DeployOutput output={output} onClear={() => setOutput(null)} />}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Création ── */}
|
|
{view === 'create' && (
|
|
<div className="flex-1 overflow-y-auto p-4 space-y-3">
|
|
{saveError && (
|
|
<div role="alert" className="bg-red-950/40 border border-red-800/50 rounded-lg px-3 py-2 text-xs text-red-300 whitespace-pre-wrap font-mono max-h-32 overflow-y-auto">
|
|
{saveError}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<div className="flex-1 min-w-[200px]">
|
|
<label htmlFor="app-name" className="block text-xs text-gray-400 mb-1">
|
|
Nom de l'application <span className="text-red-400" aria-hidden="true">*</span>
|
|
</label>
|
|
<input
|
|
id="app-name"
|
|
value={newName}
|
|
onChange={e => handleNewName(e.target.value)}
|
|
placeholder="mon-app"
|
|
autoFocus
|
|
className={inputClass}
|
|
/>
|
|
<p className={`text-[11px] mt-1 ${newName && !nameValid ? 'text-red-400' : 'text-gray-600'}`}>
|
|
{newName && !nameValid
|
|
? 'Lettres, chiffres, point, tiret et souligné uniquement.'
|
|
: `Dossier créé : /home/${newName.trim() || '<nom>'}`}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="app-filename" className="block text-xs text-gray-400 mb-1">Nom du fichier</label>
|
|
<select
|
|
id="app-filename"
|
|
value={newFilename}
|
|
onChange={e => setNewFilename(e.target.value)}
|
|
className={inputClass}
|
|
>
|
|
{COMPOSE_FILENAMES.map(f => <option key={f} value={f}>{f}</option>)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<YamlEditor value={newContent} onChange={handleNewContent} disabled={saving} height="h-[38vh]" />
|
|
|
|
{output && <DeployOutput output={output} onClear={() => setOutput(null)} />}
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
function DeployOutput({ output, onClear }) {
|
|
return (
|
|
<div className="mt-4">
|
|
<div className="flex items-center justify-between mb-1.5">
|
|
<span className="flex items-center gap-1.5 text-xs text-gray-400">
|
|
<TerminalIcon size={12} className="text-indigo-400" />
|
|
Sortie du déploiement
|
|
</span>
|
|
<button onClick={onClear} className="text-xs text-gray-500 hover:text-gray-300 transition-colors">
|
|
Masquer
|
|
</button>
|
|
</div>
|
|
<pre className="bg-gray-950 border border-gray-800 rounded-lg p-3 text-[11px] font-mono text-gray-300 whitespace-pre-wrap break-all max-h-48 overflow-y-auto">
|
|
{output || '(aucune sortie)'}
|
|
</pre>
|
|
</div>
|
|
)
|
|
}
|