450 lines
15 KiB
JavaScript
450 lines
15 KiB
JavaScript
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
import { Terminal, Wifi, WifiOff, X, Plus, ChevronDown } from 'lucide-react';
|
|
|
|
// Serveurs SSH prédéfinis
|
|
const PRESET_SERVERS = [
|
|
{
|
|
id: 'recette',
|
|
label: 'Recette (78.138.58.109)',
|
|
host: '78.138.58.109',
|
|
port: 22,
|
|
username: 'root',
|
|
},
|
|
{
|
|
id: 'production',
|
|
label: 'Production (180.149.196.138)',
|
|
host: '180.149.196.138',
|
|
port: 22,
|
|
username: 'root',
|
|
},
|
|
];
|
|
|
|
export default function TerminalPage() {
|
|
const terminalRef = useRef(null);
|
|
const xtermRef = useRef(null);
|
|
const fitAddonRef = useRef(null);
|
|
const wsRef = useRef(null);
|
|
const [connected, setConnected] = useState(false);
|
|
const [connecting, setConnecting] = useState(false);
|
|
const [xtermLoaded, setXtermLoaded] = useState(false);
|
|
|
|
// Formulaire de connexion
|
|
const [form, setForm] = useState({
|
|
preset: 'recette',
|
|
host: '78.138.58.109',
|
|
port: 22,
|
|
username: 'root',
|
|
password: '',
|
|
});
|
|
const [showForm, setShowForm] = useState(true);
|
|
const [error, setError] = useState('');
|
|
|
|
// Charger xterm.js dynamiquement depuis CDN
|
|
useEffect(() => {
|
|
const loadXterm = async () => {
|
|
if (window.Terminal) {
|
|
setXtermLoaded(true);
|
|
return;
|
|
}
|
|
|
|
// Charger le CSS xterm
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.href = 'https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css';
|
|
document.head.appendChild(link);
|
|
|
|
// Charger xterm.js
|
|
await loadScript('https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js');
|
|
await loadScript('https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js');
|
|
|
|
setXtermLoaded(true);
|
|
};
|
|
|
|
loadXterm();
|
|
}, []);
|
|
|
|
const loadScript = (src) => {
|
|
return new Promise((resolve, reject) => {
|
|
const script = document.createElement('script');
|
|
script.src = src;
|
|
script.onload = resolve;
|
|
script.onerror = reject;
|
|
document.head.appendChild(script);
|
|
});
|
|
};
|
|
|
|
// Initialiser xterm quand il est chargé et que le terminal est visible
|
|
useEffect(() => {
|
|
if (!xtermLoaded || !terminalRef.current || xtermRef.current) return;
|
|
|
|
const term = new window.Terminal({
|
|
cursorBlink: true,
|
|
fontSize: 14,
|
|
fontFamily: '"Cascadia Code", "Fira Code", "JetBrains Mono", monospace',
|
|
theme: {
|
|
background: '#0d1117',
|
|
foreground: '#e6edf3',
|
|
cursor: '#58a6ff',
|
|
cursorAccent: '#0d1117',
|
|
black: '#484f58',
|
|
red: '#ff7b72',
|
|
green: '#3fb950',
|
|
yellow: '#d29922',
|
|
blue: '#58a6ff',
|
|
magenta: '#bc8cff',
|
|
cyan: '#39c5cf',
|
|
white: '#b1bac4',
|
|
brightBlack: '#6e7681',
|
|
brightRed: '#ffa198',
|
|
brightGreen: '#56d364',
|
|
brightYellow: '#e3b341',
|
|
brightBlue: '#79c0ff',
|
|
brightMagenta: '#d2a8ff',
|
|
brightCyan: '#56d4dd',
|
|
brightWhite: '#f0f6fc',
|
|
},
|
|
scrollback: 1000,
|
|
allowProposedApi: true,
|
|
});
|
|
|
|
const fitAddon = new window.FitAddon.FitAddon();
|
|
term.loadAddon(fitAddon);
|
|
term.open(terminalRef.current);
|
|
fitAddon.fit();
|
|
|
|
xtermRef.current = term;
|
|
fitAddonRef.current = fitAddon;
|
|
|
|
term.writeln('\x1b[1;34m╔══════════════════════════════════════════════════╗\x1b[0m');
|
|
term.writeln('\x1b[1;34m║ Terminal SSH — Dashboard Recette Santinova ║\x1b[0m');
|
|
term.writeln('\x1b[1;34m╚══════════════════════════════════════════════════╝\x1b[0m');
|
|
term.writeln('');
|
|
term.writeln('\x1b[90mSélectionnez un serveur et connectez-vous pour démarrer.\x1b[0m');
|
|
term.writeln('');
|
|
|
|
// Gérer la saisie utilisateur
|
|
term.onData((data) => {
|
|
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
|
|
wsRef.current.send(JSON.stringify({ type: 'input', data }));
|
|
}
|
|
});
|
|
|
|
// Gérer le redimensionnement
|
|
const resizeObserver = new ResizeObserver(() => {
|
|
if (fitAddonRef.current) {
|
|
fitAddonRef.current.fit();
|
|
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
|
|
wsRef.current.send(JSON.stringify({
|
|
type: 'resize',
|
|
rows: term.rows,
|
|
cols: term.cols,
|
|
}));
|
|
}
|
|
}
|
|
});
|
|
|
|
if (terminalRef.current) {
|
|
resizeObserver.observe(terminalRef.current);
|
|
}
|
|
|
|
return () => {
|
|
resizeObserver.disconnect();
|
|
};
|
|
}, [xtermLoaded]);
|
|
|
|
const handlePresetChange = (presetId) => {
|
|
const preset = PRESET_SERVERS.find(s => s.id === presetId);
|
|
if (preset) {
|
|
setForm(prev => ({
|
|
...prev,
|
|
preset: presetId,
|
|
host: preset.host,
|
|
port: preset.port,
|
|
username: preset.username,
|
|
}));
|
|
} else {
|
|
setForm(prev => ({ ...prev, preset: 'custom' }));
|
|
}
|
|
};
|
|
|
|
const handleConnect = useCallback(() => {
|
|
if (!form.host || !form.username || !form.password) {
|
|
setError('Hôte, utilisateur et mot de passe sont requis');
|
|
return;
|
|
}
|
|
|
|
setError('');
|
|
setConnecting(true);
|
|
setShowForm(false);
|
|
|
|
const token = localStorage.getItem('dashboard_token');
|
|
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
const wsUrl = `${wsProtocol}//${window.location.host}/ws-ssh?token=${token}`;
|
|
|
|
const ws = new WebSocket(wsUrl);
|
|
wsRef.current = ws;
|
|
|
|
ws.onopen = () => {
|
|
ws.send(JSON.stringify({
|
|
type: 'connect',
|
|
host: form.host,
|
|
port: parseInt(form.port),
|
|
username: form.username,
|
|
password: form.password,
|
|
}));
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
try {
|
|
const msg = JSON.parse(event.data);
|
|
|
|
switch (msg.type) {
|
|
case 'status':
|
|
if (xtermRef.current) {
|
|
xtermRef.current.writeln(`\x1b[33m${msg.message}\x1b[0m`);
|
|
}
|
|
break;
|
|
|
|
case 'connected':
|
|
setConnected(true);
|
|
setConnecting(false);
|
|
if (xtermRef.current) {
|
|
xtermRef.current.writeln(`\x1b[32m✓ ${msg.message}\x1b[0m`);
|
|
xtermRef.current.writeln('');
|
|
xtermRef.current.focus();
|
|
}
|
|
break;
|
|
|
|
case 'output':
|
|
if (xtermRef.current) {
|
|
const data = atob(msg.data);
|
|
xtermRef.current.write(data);
|
|
}
|
|
break;
|
|
|
|
case 'disconnected':
|
|
setConnected(false);
|
|
setConnecting(false);
|
|
if (xtermRef.current) {
|
|
xtermRef.current.writeln('');
|
|
xtermRef.current.writeln(`\x1b[33m⚠ ${msg.message}\x1b[0m`);
|
|
}
|
|
break;
|
|
|
|
case 'error':
|
|
setConnected(false);
|
|
setConnecting(false);
|
|
setError(msg.message);
|
|
if (xtermRef.current) {
|
|
xtermRef.current.writeln(`\x1b[31m✗ Erreur: ${msg.message}\x1b[0m`);
|
|
}
|
|
setShowForm(true);
|
|
break;
|
|
}
|
|
} catch (err) {
|
|
console.error('Erreur parsing message SSH:', err);
|
|
}
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
setConnected(false);
|
|
setConnecting(false);
|
|
};
|
|
|
|
ws.onerror = () => {
|
|
setConnected(false);
|
|
setConnecting(false);
|
|
setError('Erreur de connexion WebSocket');
|
|
setShowForm(true);
|
|
};
|
|
}, [form]);
|
|
|
|
const handleDisconnect = () => {
|
|
if (wsRef.current) {
|
|
wsRef.current.send(JSON.stringify({ type: 'disconnect' }));
|
|
wsRef.current.close();
|
|
wsRef.current = null;
|
|
}
|
|
setConnected(false);
|
|
setConnecting(false);
|
|
setShowForm(true);
|
|
if (xtermRef.current) {
|
|
xtermRef.current.writeln('');
|
|
xtermRef.current.writeln('\x1b[90mDéconnecté. Configurez une nouvelle connexion.\x1b[0m');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
|
<Terminal className="w-7 h-7 text-emerald-400" />
|
|
Terminal SSH
|
|
</h2>
|
|
<p className="text-gray-400 mt-1">
|
|
Connexion SSH sécurisée aux serveurs de l'infrastructure
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{connected ? (
|
|
<>
|
|
<span className="flex items-center gap-2 text-emerald-400 text-sm">
|
|
<Wifi className="w-4 h-4" />
|
|
Connecté à {form.host}
|
|
</span>
|
|
<button
|
|
onClick={handleDisconnect}
|
|
className="flex items-center gap-2 px-3 py-1.5 bg-red-600/20 text-red-400 border border-red-500/30 rounded-lg text-sm hover:bg-red-600/30 transition-colors"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
Déconnecter
|
|
</button>
|
|
</>
|
|
) : connecting ? (
|
|
<span className="flex items-center gap-2 text-yellow-400 text-sm">
|
|
<div className="w-4 h-4 border-2 border-yellow-400 border-t-transparent rounded-full animate-spin" />
|
|
Connexion en cours...
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center gap-2 text-gray-500 text-sm">
|
|
<WifiOff className="w-4 h-4" />
|
|
Non connecté
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Formulaire de connexion */}
|
|
{showForm && (
|
|
<div className="bg-dark-800 border border-dark-600 rounded-xl p-6">
|
|
<h3 className="text-white font-semibold mb-4 flex items-center gap-2">
|
|
<Plus className="w-4 h-4 text-primary-400" />
|
|
Nouvelle connexion SSH
|
|
</h3>
|
|
|
|
{error && (
|
|
<div className="mb-4 px-4 py-3 bg-red-900/30 border border-red-500/40 rounded-lg text-red-400 text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{/* Serveur prédéfini */}
|
|
<div className="md:col-span-2">
|
|
<label className="block text-sm text-gray-400 mb-1">Serveur prédéfini</label>
|
|
<div className="relative">
|
|
<select
|
|
value={form.preset}
|
|
onChange={(e) => handlePresetChange(e.target.value)}
|
|
className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm appearance-none focus:outline-none focus:border-primary-500"
|
|
>
|
|
{PRESET_SERVERS.map(s => (
|
|
<option key={s.id} value={s.id}>{s.label}</option>
|
|
))}
|
|
<option value="custom">Serveur personnalisé...</option>
|
|
</select>
|
|
<ChevronDown className="absolute right-3 top-3 w-4 h-4 text-gray-400 pointer-events-none" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hôte */}
|
|
<div>
|
|
<label className="block text-sm text-gray-400 mb-1">Hôte / IP</label>
|
|
<input
|
|
type="text"
|
|
value={form.host}
|
|
onChange={(e) => setForm(prev => ({ ...prev, host: e.target.value, preset: 'custom' }))}
|
|
placeholder="192.168.1.1"
|
|
className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Port */}
|
|
<div>
|
|
<label className="block text-sm text-gray-400 mb-1">Port SSH</label>
|
|
<input
|
|
type="number"
|
|
value={form.port}
|
|
onChange={(e) => setForm(prev => ({ ...prev, port: e.target.value }))}
|
|
placeholder="22"
|
|
className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Utilisateur */}
|
|
<div>
|
|
<label className="block text-sm text-gray-400 mb-1">Utilisateur</label>
|
|
<input
|
|
type="text"
|
|
value={form.username}
|
|
onChange={(e) => setForm(prev => ({ ...prev, username: e.target.value }))}
|
|
placeholder="root"
|
|
className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Mot de passe */}
|
|
<div>
|
|
<label className="block text-sm text-gray-400 mb-1">Mot de passe</label>
|
|
<input
|
|
type="password"
|
|
value={form.password}
|
|
onChange={(e) => setForm(prev => ({ ...prev, password: e.target.value }))}
|
|
placeholder="••••••••"
|
|
onKeyDown={(e) => e.key === 'Enter' && handleConnect()}
|
|
className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-primary-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 flex justify-end">
|
|
<button
|
|
onClick={handleConnect}
|
|
disabled={connecting}
|
|
className="flex items-center gap-2 px-5 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
|
|
>
|
|
<Terminal className="w-4 h-4" />
|
|
Se connecter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Terminal xterm.js */}
|
|
<div className="bg-dark-900 border border-dark-600 rounded-xl overflow-hidden">
|
|
{/* Barre de titre style terminal */}
|
|
<div className="flex items-center gap-2 px-4 py-3 bg-dark-800 border-b border-dark-600">
|
|
<div className="w-3 h-3 rounded-full bg-red-500/70" />
|
|
<div className="w-3 h-3 rounded-full bg-yellow-500/70" />
|
|
<div className="w-3 h-3 rounded-full bg-green-500/70" />
|
|
<span className="ml-2 text-xs text-gray-500 font-mono">
|
|
{connected ? `${form.username}@${form.host}` : 'terminal — non connecté'}
|
|
</span>
|
|
{connected && !showForm && (
|
|
<button
|
|
onClick={() => setShowForm(!showForm)}
|
|
className="ml-auto text-xs text-gray-500 hover:text-gray-300 transition-colors"
|
|
>
|
|
{showForm ? 'Masquer' : 'Nouvelle connexion'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Zone du terminal */}
|
|
<div
|
|
ref={terminalRef}
|
|
style={{ height: '500px', padding: '8px', backgroundColor: '#0d1117' }}
|
|
/>
|
|
</div>
|
|
|
|
{!xtermLoaded && (
|
|
<div className="text-center text-gray-500 text-sm py-4">
|
|
Chargement du terminal...
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|