Compare commits

..

15 Commits

Author SHA1 Message Date
98df3de6c7 feat: route publique /api/public/status pour portail 2026-06-10 09:08:23 +00:00
5690e8d9ae feat: ajout route publique /api/public/status pour le portail applicatif 2026-06-10 09:07:44 +00:00
manus-admin
17d86b5000 fix: métriques monitoring via host-metrics.json (RAM/CPU réels hôte LXC) 2026-06-01 02:02:08 +02:00
manus-admin
ea7deec23c fix: RAM multi-source + montage /proc hote LXC dans docker-compose 2026-06-01 01:50:32 +02:00
manus-admin
78ba7b9f54 fix: CPU via cgroup v2 usage_usec (mesure precise conteneur LXC) + RAM formule free 2026-06-01 01:39:27 +02:00
manus-admin
664963b8f7 fix: améliorer calcul RAM (formule free: total-free-buffers-cached) + champs buffers/cached 2026-06-01 01:35:28 +02:00
manus-admin
c534a87e4c fix: remplacer nsenter par lecture directe /proc pour les métriques monitoring 2026-06-01 01:14:33 +02:00
manus-admin
3c3708e1cb fix: fermeture return() dans inventory.map InventairePage 2026-06-01 01:06:34 +02:00
manus-admin
249dee2e5a fix: correction syntaxe JSX InventairePage (fermeture map Array) 2026-06-01 01:02:34 +02:00
manus-admin
312ce634b9 feat: badge Infra (amber) pour Portail et Dashboard dans AppsPage et InventairePage 2026-06-01 00:58:04 +02:00
manus-admin
0a378d91ca fix: renommage Dashboard Production dans toutes les pages 2026-06-01 00:41:09 +02:00
manus-admin
80602797ef fix: config.js prod - ajout Formation Manager, Portail, Dashboard + URLs prod complètes pour toutes les apps 2026-06-01 00:17:58 +02:00
manus-admin
ff72cd9fc6 fix: GITEA_PASS_REC utilise GITEA_PASSWORD_RECETTE + ajout variable dans docker-compose 2026-06-01 00:05:50 +02:00
manus-admin
74558e6c63 fix: GITEA_PASSWORD=ManusGitea2026! (mot de passe prod Gitea) 2026-06-01 00:01:07 +02:00
manus-admin
ee685f0326 feat: page Inventaire, Documentation, corrections routes inventory (URLs publiques Gitea), port 3001, GITEA_PROD_INTERNAL_URL 2026-05-31 23:57:42 +02:00
17 changed files with 105 additions and 928 deletions

View File

@@ -5,38 +5,35 @@ services:
dockerfile: Dockerfile
container_name: manus-dashboard
restart: unless-stopped
privileged: true
env_file:
- .env
environment:
- NODE_ENV=production
- PORT=3001
- JWT_SECRET=${DASHBOARD_JWT_SECRET}
- ADMIN_USERNAME=${DASHBOARD_ADMIN_USERNAME}
- ADMIN_PASSWORD=${DASHBOARD_ADMIN_PASSWORD}
- GITEA_URL=${GITEA_URL}
- GITEA_USERNAME=${GITEA_USERNAME}
- GITEA_PASSWORD=${GITEA_PASSWORD}
- WEBHOOK_SECRET=${WEBHOOK_SECRET}
- APPS_BASE_PATH=${APPS_BASE_PATH}
- INFRA_BASE_PATH=${INFRA_BASE_PATH}
- HEALTH_CHECK_INTERVAL=${HEALTH_CHECK_INTERVAL}
NODE_ENV: production
PORT: 3001
JWT_SECRET: manus-dashboard-prod-secret-2026
ADMIN_USERNAME: adminItinova
ADMIN_PASSWORD: Itinova69!
GITEA_URL: https://git.santinova-soft.org
GITEA_USERNAME: manus-admin
GITEA_PASSWORD: ManusGitea2026!
APPS_BASE_PATH: /opt/manus-deploy/apps
INFRA_BASE_PATH: /opt/manus-deploy/infrastructure
WEBHOOK_SECRET: webhook-prod-secret-2026
volumes:
- /opt/manus-deploy/webhook-patched.js:/app/backend/src/webhook.js:ro
- /var/run/docker.sock:/var/run/docker.sock
- /opt/manus-deploy:/opt/manus-deploy
- /opt/manus-deploy/apps:/opt/manus-deploy/apps
- /opt/manus-deploy/infrastructure:/opt/manus-deploy/infrastructure
- /opt/manus-deploy/logs:/opt/manus-deploy/logs
# Montage /proc du VPS pour CPU (namespace partagé avec le VPS)
- /proc:/host/proc:ro
# Montage cgroup du VPS pour RAM réelle (memory.max, memory.current)
- /sys/fs/cgroup:/host/cgroup:ro
networks:
- web
labels:
- "traefik.enable=true"
- "traefik.http.routers.manus-dashboard.rule=Host(`dashboard.recette.santinova-soft.org`)"
- "traefik.http.routers.manus-dashboard.entrypoints=websecure"
- "traefik.http.routers.manus-dashboard.tls=true"
- "traefik.http.routers.manus-dashboard.tls.certresolver=letsencrypt"
- "traefik.http.routers.manus-dashboard.service=manus-dashboard-svc"
- "traefik.http.routers.manus-dashboard.priority=100"
- "traefik.http.services.manus-dashboard-svc.loadbalancer.server.port=3001"
- "traefik.docker.network=web"
- "traefik.http.routers.dashboard.rule=Host(`dashboard.santinova-soft.org`)"
- "traefik.http.routers.dashboard.entrypoints=websecure"
- "traefik.http.routers.dashboard.tls.certresolver=letsencrypt"
- "traefik.http.services.dashboard.loadbalancer.server.port=3001"
networks:
web:
external: true

View File

@@ -21,8 +21,7 @@
"cookie-parser": "^1.4.6",
"morgan": "^1.10.0",
"multer": "^1.4.5-lts.1",
"adm-zip": "^0.5.10",
"ssh2": "^1.16.0"
"adm-zip": "^0.5.10"
},
"devDependencies": {
"nodemon": "^3.1.0"

View File

@@ -9,10 +9,9 @@ module.exports = {
},
// Gitea
gitea: {
url: process.env.GITEA_URL || 'http://gitea:3000',
url: process.env.GITEA_URL || 'https://git.santinova-soft.org',
username: process.env.GITEA_USERNAME || 'manus-admin',
password: process.env.GITEA_PASSWORD || 'Itinova69!',
token: process.env.GITEA_TOKEN || null,
password: process.env.GITEA_PASSWORD || 'ManusGitea2026!',
},
// Applications config
appsBasePath: process.env.APPS_BASE_PATH || '/opt/manus-deploy/apps',
@@ -66,7 +65,7 @@ module.exports = {
recette: 'https://veille.recette.santinova-soft.org',
prod: 'https://veille.santinova-soft.org',
},
containerName: 'veille-reglementaire-recette',
containerName: 'veille-reglementaire',
healthCheckUrl: 'https://veille.recette.santinova-soft.org',
port: 3000,
category: 'ITINOVA',
@@ -89,23 +88,6 @@ module.exports = {
category: 'ITINOVA',
status: 'production',
},
{
id: 'pilotage-masse-salariale',
name: 'Pilotage Masse Salariale',
description: 'Application de pilotage de la masse salariale Itinova',
directory: 'pilotage-masse-salariale',
giteaRepo: 'pilotage-masse-salariale',
giteaOwner: 'manus-admin',
urls: {
recette: 'https://pilotage-ms.recette.santinova-soft.org',
prod: 'https://pilotage-ms.santinova-soft.org',
},
containerName: 'pilotage-masse-salariale-app',
healthCheckUrl: 'https://pilotage-ms.recette.santinova-soft.org',
port: 3000,
category: 'ITINOVA',
status: 'recette',
},
{
id: 'sonum',
name: 'SONUM',
@@ -193,7 +175,7 @@ module.exports = {
},
{
id: 'manus-dashboard',
name: 'Dashboard Recette',
name: 'Dashboard Production',
description: 'Dashboard de gestion de l\'infrastructure Manus',
directory: 'manus-dashboard',
giteaRepo: 'manus-dashboard',
@@ -208,39 +190,5 @@ module.exports = {
category: 'INFRA',
status: 'production',
},
{
id: 'itinova-budget-si',
name: 'Gestion Budget Informatique',
description: 'Application de gestion du budget informatique DSI Itinova',
directory: 'itinova-budget-si',
giteaRepo: 'itinova-budget-si',
giteaOwner: 'manus-admin',
urls: {
recette: 'https://budget-si.recette.santinova-soft.org',
prod: 'https://budget-si.santinova-soft.org',
},
containerName: 'itinova-budget-si-app',
healthCheckUrl: 'https://budget-si.recette.santinova-soft.org',
port: 3000,
category: 'SANTINOVA',
status: 'recette',
},
{
id: 'falc-generator',
name: 'FALC Generator',
description: 'Générateur de documents FALC (Facile À Lire et à Comprendre)',
directory: 'falc-generator',
giteaRepo: 'falc-generator',
giteaOwner: 'manus-admin',
urls: {
recette: 'https://falc.recette.santinova-soft.org',
prod: 'https://falc.santinova-soft.org',
},
containerName: 'falc-generator',
healthCheckUrl: 'https://falc.santinova-soft.org',
port: 3000,
category: 'ITINOVA',
status: 'production',
},
],
};

View File

@@ -3,17 +3,12 @@ const https = require('https');
const config = require('./config');
// Créer un client axios pour Gitea (ignorer les certificats auto-signés si nécessaire)
// Utiliser le token API si disponible, sinon auth basique
const giteaClientHeaders = config.gitea.token
? { 'Authorization': `token ${config.gitea.token}` }
: {};
const giteaClient = axios.create({
baseURL: `${config.gitea.url}/api/v1`,
...(config.gitea.token
? { headers: giteaClientHeaders }
: { auth: { username: config.gitea.username, password: config.gitea.password } }
),
auth: {
username: config.gitea.username,
password: config.gitea.password,
},
httpsAgent: new https.Agent({ rejectUnauthorized: false }),
timeout: 10000,
});

View File

@@ -15,14 +15,12 @@ const webhookRoutes = require('./webhook');
const { checkAllApps, getAllStatuses } = require('./healthcheck');
const { getCommits } = require('./gitea');
const { initDynamicApps } = require('./app-creator');
const { initSSHWebSocket } = require('./ssh');
const app = express();
const server = http.createServer(app);
// WebSocket server pour les mises à jour en temps réel
const wss = new WebSocket.Server({ server, path: '/ws' });
initSSHWebSocket(server);
// Middleware
app.use(helmet({

View File

@@ -398,25 +398,6 @@ router.get('/gitea/repos/:owner/:repo/branches', authMiddleware, async (req, res
}
});
// ============ PUBLIC STATUS ROUTE (sans authentification) ============
// Utilisé par le portail applicatif pour griser les tuiles des apps arrêtées
router.get('/public/status', async (req, res) => {
try {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
const statuses = getAllStatuses();
const publicStatus = statuses.map((app) => ({
id: app.id,
name: app.name,
status: app.status, // 'online' | 'offline' | 'error' | 'unknown'
containerRunning: app.container ? app.container.running : false,
}));
res.json(publicStatus);
} catch (err) {
res.status(500).json({ error: err.message });
}
});
// ============ DOCKER ROUTES ============
router.get('/docker/containers', authMiddleware, async (req, res) => {
@@ -497,13 +478,19 @@ module.exports = router;
// ===== INVENTAIRE DES APPLICATIONS =====
const { exec } = require('child_process');
<<<<<<< HEAD
const GITEA_RECETTE_INTERNAL = process.env.GITEA_RECETTE_URL || 'https://git.recette.santinova-soft.org';
const GITEA_PROD_EXTERNAL = process.env.GITEA_PROD_INTERNAL_URL || 'http://172.18.0.9:3000';
const GITEA_PROD_PUBLIC = process.env.GITEA_PROD_PUBLIC_URL || 'https://git.santinova-soft.org';
const GITEA_USER_INV = process.env.GITEA_USERNAME || 'manus-admin';
const GITEA_PASS_REC = process.env.GITEA_PASSWORD_RECETTE || 'Itinova69!';
=======
const GITEA_RECETTE_INTERNAL = process.env.GITEA_RECETTE_URL || 'http://gitea:3000';
const GITEA_RECETTE_PUBLIC = process.env.GITEA_RECETTE_PUBLIC_URL || 'https://git.recette.santinova-soft.org';
const GITEA_PROD_EXTERNAL = 'https://git.santinova-soft.org';
const GITEA_USER_INV = process.env.GITEA_USERNAME || 'manus-admin';
const GITEA_PASS_REC = process.env.GITEA_PASSWORD || 'Itinova69!';
>>>>>>> 0781c76 (feat: page Inventaire Applications, Documentation Infra, corrections monitoring)
const GITEA_PASS_PRD = process.env.GITEA_PASSWORD_PROD || 'ManusGitea2026!';
const GITEA_TOKEN_REC = process.env.GITEA_TOKEN || null;
const INVENTORY_APPS = [
{ id: 'itinova-contacts', name: 'Itinova Contacts', repoName: 'itinova-contacts' },
@@ -514,26 +501,25 @@ const INVENTORY_APPS = [
{ id: 'demat-facturation-dsi', name: 'Démat. Facturation DSI', repoName: 'demat-facturation-dsi' },
{ id: 'facturation-santinova', name: 'Facturation Santinova', repoName: 'facturation-santinova' },
{ id: 'formation-manager-itinova', name: 'Formation Manager', repoName: 'formation-manager-itinova' },
{ id: 'pilotage-masse-salariale', name: 'Pilotage Masse Salariale', repoName: 'pilotage-masse-salariale' },
{ id: 'itinova-budget-si', name: 'Gestion Budget Informatique', repoName: 'itinova-budget-si' },
{ id: 'falc-generator', name: 'FALC Generator', repoName: 'falc-generator' },
{ id: 'portail-santinova', name: 'Portail Applicatif', repoName: 'portail-santinova' },
{ id: 'manus-dashboard', name: 'Dashboard Manus', repoName: 'manus-dashboard' },
];
function curlGitea(baseUrl, owner, repo, pass, publicBaseUrl, token) {
<<<<<<< HEAD
function curlGitea(baseUrl, owner, repo, pass, publicBaseUrl) {
=======
function curlGitea(baseUrl, owner, repo, pass) {
>>>>>>> 0781c76 (feat: page Inventaire Applications, Documentation Infra, corrections monitoring)
return new Promise((resolve) => {
const authHeader = token
? `-H "Authorization: token ${token}"`
: `-u "${GITEA_USER_INV}:${pass}"`;
const cmd = `curl -sk --max-time 6 ${authHeader} "${baseUrl}/api/v1/repos/${owner}/${repo}"`;
const auth = `${GITEA_USER_INV}:${pass}`;
const cmd = `curl -sk --max-time 6 -u "${auth}" "${baseUrl}/api/v1/repos/${owner}/${repo}"`;
exec(cmd, { timeout: 7000 }, (err, stdout) => {
if (err || !stdout) return resolve({ present: false, url: null, version: null });
try {
const data = JSON.parse(stdout);
if (!data.id) return resolve({ present: false, url: null, version: null });
// Récupérer le dernier commit
const cmd2 = `curl -sk --max-time 6 ${authHeader} "${baseUrl}/api/v1/repos/${owner}/${repo}/commits?limit=1"`;
const cmd2 = `curl -sk --max-time 6 -u "${auth}" "${baseUrl}/api/v1/repos/${owner}/${repo}/commits?limit=1"`;
exec(cmd2, { timeout: 7000 }, (err2, stdout2) => {
let version = null;
try {
@@ -546,8 +532,12 @@ function curlGitea(baseUrl, owner, repo, pass, publicBaseUrl, token) {
version = sha && date ? `${sha} (${date})` : sha;
}
} catch(e) {}
<<<<<<< HEAD
const displayUrl = publicBaseUrl || baseUrl;
resolve({ present: true, url: `${displayUrl}/${owner}/${repo}`, version });
=======
resolve({ present: true, url: `${baseUrl}/${owner}/${repo}`, version });
>>>>>>> 0781c76 (feat: page Inventaire Applications, Documentation Infra, corrections monitoring)
});
} catch(e) {
resolve({ present: false, url: null, version: null });
@@ -562,8 +552,12 @@ router.get('/inventory', authMiddleware, async (req, res) => {
const results = await Promise.all(
INVENTORY_APPS.map(async (app) => {
const [repoRecette, repoProd] = await Promise.all([
curlGitea(GITEA_RECETTE_INTERNAL, owner, app.repoName, GITEA_PASS_REC, GITEA_RECETTE_PUBLIC, GITEA_TOKEN_REC),
curlGitea(GITEA_RECETTE_INTERNAL, owner, app.repoName, GITEA_PASS_REC),
<<<<<<< HEAD
curlGitea(GITEA_PROD_EXTERNAL, owner, app.repoName, GITEA_PASS_PRD, GITEA_PROD_PUBLIC),
=======
curlGitea(GITEA_PROD_EXTERNAL, owner, app.repoName, GITEA_PASS_PRD),
>>>>>>> 0781c76 (feat: page Inventaire Applications, Documentation Infra, corrections monitoring)
]);
return { ...app, repoRecette, repoProd };
})

View File

@@ -1,179 +0,0 @@
/**
* Module SSH Terminal - Gestion des connexions SSH via WebSocket
* Utilise la bibliothèque ssh2 pour établir des connexions SSH
*/
const { Client } = require('ssh2');
const WebSocket = require('ws');
const jwt = require('jsonwebtoken');
const config = require('./config');
/**
* Initialise le serveur WebSocket SSH sur /ws-ssh
* @param {http.Server} server - Le serveur HTTP Express
*/
function initSSHWebSocket(server) {
const wssSsh = new WebSocket.Server({ server, path: '/ws-ssh' });
wssSsh.on('connection', (ws, req) => {
// Vérifier l'authentification via le token dans l'URL
const url = new URL(req.url, 'http://localhost');
const token = url.searchParams.get('token');
if (!token) {
ws.send(JSON.stringify({ type: 'error', message: 'Token manquant' }));
ws.close();
return;
}
try {
jwt.verify(token, config.jwtSecret);
} catch (err) {
ws.send(JSON.stringify({ type: 'error', message: 'Token invalide' }));
ws.close();
return;
}
console.log('Nouvelle connexion WebSocket SSH');
let sshClient = null;
let sshStream = null;
let connected = false;
ws.on('message', (data) => {
try {
const msg = JSON.parse(data.toString());
switch (msg.type) {
case 'connect':
// Établir la connexion SSH
handleConnect(ws, msg, (client, stream) => {
sshClient = client;
sshStream = stream;
connected = true;
});
break;
case 'input':
// Envoyer des données au terminal SSH
if (sshStream && connected) {
sshStream.write(msg.data);
}
break;
case 'resize':
// Redimensionner le terminal
if (sshStream && connected) {
sshStream.setWindow(msg.rows, msg.cols, 0, 0);
}
break;
case 'disconnect':
// Fermer la connexion SSH
if (sshClient) {
sshClient.end();
}
break;
default:
console.warn('Type de message SSH inconnu:', msg.type);
}
} catch (err) {
console.error('Erreur parsing message SSH:', err.message);
}
});
ws.on('close', () => {
console.log('Connexion WebSocket SSH fermée');
if (sshClient) {
sshClient.end();
}
});
ws.on('error', (err) => {
console.error('Erreur WebSocket SSH:', err.message);
if (sshClient) {
sshClient.end();
}
});
});
console.log('Serveur WebSocket SSH initialisé sur /ws-ssh');
return wssSsh;
}
/**
* Gère la connexion SSH
*/
function handleConnect(ws, msg, onConnected) {
const { host, port, username, password, privateKey } = msg;
if (!host || !username) {
ws.send(JSON.stringify({ type: 'error', message: 'Hôte et utilisateur requis' }));
return;
}
const sshClient = new Client();
const connConfig = {
host: host,
port: port || 22,
username: username,
readyTimeout: 15000,
keepaliveInterval: 10000,
};
if (privateKey) {
connConfig.privateKey = privateKey;
} else if (password) {
connConfig.password = password;
} else {
ws.send(JSON.stringify({ type: 'error', message: 'Mot de passe ou clé privée requis' }));
return;
}
ws.send(JSON.stringify({ type: 'status', message: `Connexion à ${username}@${host}:${port || 22}...` }));
sshClient.on('ready', () => {
ws.send(JSON.stringify({ type: 'connected', message: `Connecté à ${host}` }));
sshClient.shell({ term: 'xterm-256color', rows: 24, cols: 80 }, (err, stream) => {
if (err) {
ws.send(JSON.stringify({ type: 'error', message: `Erreur shell: ${err.message}` }));
sshClient.end();
return;
}
onConnected(sshClient, stream);
// Transmettre les données du terminal SSH vers le WebSocket
stream.on('data', (data) => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'output', data: data.toString('base64') }));
}
});
stream.stderr.on('data', (data) => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'output', data: data.toString('base64') }));
}
});
stream.on('close', () => {
ws.send(JSON.stringify({ type: 'disconnected', message: 'Session SSH terminée' }));
sshClient.end();
});
});
});
sshClient.on('error', (err) => {
ws.send(JSON.stringify({ type: 'error', message: `Erreur SSH: ${err.message}` }));
});
sshClient.on('end', () => {
ws.send(JSON.stringify({ type: 'disconnected', message: 'Connexion SSH fermée' }));
});
sshClient.connect(connConfig);
}
module.exports = { initSSHWebSocket };

View File

@@ -23,7 +23,6 @@ const REPO_TO_APP_MAP = {
'veille-reglementaire': 'veille-reglementaire',
'itinova-vehicle-exchange': 'itinova-vehicle-exchange',
'manus-dashboard': 'manus-dashboard',
'itinova-budget-si': 'itinova-budget-si',
};
// Déploiements en cours (évite les doubles déclenchements)

View File

@@ -5,32 +5,34 @@ services:
dockerfile: Dockerfile
container_name: manus-dashboard
restart: unless-stopped
ports:
- "3001:3001"
environment:
- NODE_ENV=production
- PORT=3001
- JWT_SECRET=manus-dashboard-jwt-secret-2026-recette
- ADMIN_USERNAME=adminItinova
- ADMIN_PASSWORD=Itinova69!
- GITEA_URL=https://git.recette.santinova-soft.org
- GITEA_URL=https://git.santinova-soft.org
- GITEA_USERNAME=manus-admin
- GITEA_PASSWORD=ManusGitea2026!
- GITEA_TOKEN=1e0b01c361a91d5512e13c78053ac82a66e19427
- GITEA_RECETTE_URL=http://gitea:3000
- GITEA_PASSWORD_PROD=ManusGitea2026!
- GITEA_RECETTE_URL=https://git.recette.santinova-soft.org
- GITEA_PASSWORD_RECETTE=Itinova69!
- GITEA_PROD_INTERNAL_URL=http://172.18.0.9:3000
- APPS_BASE_PATH=/opt/manus-deploy/apps
- INFRA_BASE_PATH=/opt/manus-deploy/infrastructure
- HEALTH_CHECK_INTERVAL=30000
volumes:
- /var/run/docker.sock:/var/run/docker.sock
- /opt/manus-deploy:/opt/manus-deploy
extra_hosts:
- "git.santinova-soft.org:180.149.196.138"
- /proc:/host/proc:ro
networks:
- web
labels:
- "traefik.enable=true"
# Route HTTPS via dashboard.recette.santinova-soft.org
- "traefik.http.routers.manus-dashboard.rule=Host(`dashboard.recette.santinova-soft.org`)"
# Route HTTPS via dashboard.santinova-soft.org
- "traefik.http.routers.manus-dashboard.rule=Host(`dashboard.santinova-soft.org`)"
- "traefik.http.routers.manus-dashboard.entrypoints=websecure"
- "traefik.http.routers.manus-dashboard.tls=true"
- "traefik.http.routers.manus-dashboard.tls.certresolver=letsencrypt"

View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard Recette - Gestion des Applications</title>
<title>Dashboard Production - Gestion des Applications</title>
</head>
<body class="bg-dark-900 text-white">
<div id="root"></div>

View File

@@ -8,7 +8,6 @@ import GiteaPage from './pages/GiteaPage';
import DockerPage from './pages/DockerPage';
import DocumentationPage from './pages/DocumentationPage';
import InventairePage from './pages/InventairePage';
import TerminalPage from './pages/TerminalPage';
import Sidebar from './components/Sidebar';
import useWebSocket from './hooks/useWebSocket';
import { getMe, getApps, logout as apiLogout } from './utils/api';
@@ -112,8 +111,6 @@ export default function App() {
return <DocumentationPage />;
case 'inventaire':
return <InventairePage />;
case 'terminal':
return <TerminalPage />;
default:
return <DashboardPage apps={apps} />;
}

View File

@@ -1,5 +1,5 @@
import React from 'react';
import { LayoutList, TerminalSquare,
import { LayoutList,
Server,
LayoutDashboard,
Box,
@@ -21,7 +21,6 @@ const navItems = [
{ id: 'monitoring', label: 'Monitoring', icon: Activity },
{ id: 'documentation', label: 'Documentation Infra', icon: BookOpen },
{ id: 'inventaire', label: 'Inventaire Apps', icon: LayoutList },
{ id: 'terminal', label: 'Terminal SSH', icon: TerminalSquare },
];
export default function Sidebar({
currentPage,
@@ -39,7 +38,7 @@ export default function Sidebar({
</div>
<div>
<h1 className="text-lg font-bold text-white">Dashboard</h1>
<p className="text-xs text-gray-500">Recette</p>
<p className="text-xs text-gray-500">Production</p>
</div>
</div>
</div>

View File

@@ -99,7 +99,7 @@ export default function DashboardPage({ apps }) {
<div className="flex items-center justify-between py-2 border-b border-dark-700">
<span className="text-sm text-gray-400">Serveur</span>
<span className="text-sm text-gray-200">
78.138.58.109 (Recette)
180.149.196.138 (Production)
</span>
</div>
<div className="flex items-center justify-between py-2 border-b border-dark-700">
@@ -112,12 +112,12 @@ export default function DashboardPage({ apps }) {
<div className="flex items-center justify-between py-2 border-b border-dark-700">
<span className="text-sm text-gray-400">Gitea</span>
<a
href="https://git.recette.santinova-soft.org"
href="https://git.santinova-soft.org"
target="_blank"
rel="noopener noreferrer"
className="text-sm text-primary-400 hover:text-primary-300"
>
git.recette.santinova-soft.org
git.santinova-soft.org
</a>
</div>
<div className="flex items-center justify-between py-2 border-b border-dark-700">

View File

@@ -77,12 +77,12 @@ export default function GiteaPage() {
<p className="text-gray-400 mt-1">
Explorez les dépôts sur{' '}
<a
href="https://git.recette.santinova-soft.org"
href="https://git.santinova-soft.org"
target="_blank"
rel="noopener noreferrer"
className="text-primary-400 hover:text-primary-300"
>
git.recette.santinova-soft.org
git.santinova-soft.org
</a>
</p>
</div>

View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Table, RefreshCw, GitBranch, CheckCircle, XCircle, ExternalLink, Tag, AlertCircle, ArrowUp, ArrowDown, Minus, AlertTriangle } from 'lucide-react';
import { Table, RefreshCw, GitBranch, CheckCircle, XCircle, ExternalLink, Tag, AlertCircle } from 'lucide-react';
import api from '../utils/api';
const APPS_CONFIG = [
@@ -59,27 +59,6 @@ const APPS_CONFIG = [
urlRecette: 'https://formation.recette.santinova-soft.org',
urlProd: 'https://formations.itinova.org',
},
{
id: 'pilotage-masse-salariale',
name: 'Pilotage Masse Salariale',
repoName: 'pilotage-masse-salariale',
urlRecette: 'https://pilotage-ms.recette.santinova-soft.org',
urlProd: null,
},
{
id: 'itinova-budget-si',
name: 'Gestion Budget Informatique',
repoName: 'itinova-budget-si',
urlRecette: 'https://budget-si.recette.santinova-soft.org',
urlProd: null,
},
{
id: 'falc-generator',
name: 'FALC Generator',
repoName: 'falc-generator',
urlRecette: 'https://falc.recette.santinova-soft.org',
urlProd: 'https://falc.santinova-soft.org',
},
{
id: 'portail-santinova',
name: 'Portail Applicatif',
@@ -89,91 +68,13 @@ const APPS_CONFIG = [
},
{
id: 'manus-dashboard',
name: 'Dashboard Recette',
name: 'Dashboard Production',
repoName: 'manus-dashboard',
urlRecette: 'https://dashboard.recette.santinova-soft.org',
urlProd: 'https://dashboard.santinova-soft.org',
},
];
function SyncBadge({ versionRecette, versionProd }) {
// Extraire le SHA (7 premiers caractères avant l'espace)
const shaRec = versionRecette ? versionRecette.split(' ')[0] : null;
const shaProd = versionProd ? versionProd.split(' ')[0] : null;
// Extraire la date entre parenthèses pour comparer
const dateRec = versionRecette ? versionRecette.match(/\((.+?)\)/)?.[1] : null;
const dateProd = versionProd ? versionProd.match(/\((.+?)\)/)?.[1] : null;
if (!shaRec && !shaProd) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500">
<Minus className="w-3 h-3" />
N/A
</span>
);
}
if (!shaRec) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-green-900/40 text-green-300 border border-green-700/40" title="Uniquement en production">
<ArrowDown className="w-3 h-3" />
Prod en avance
</span>
);
}
if (!shaProd) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-orange-900/40 text-orange-300 border border-orange-700/40" title="Uniquement en recette">
<ArrowUp className="w-3 h-3" />
Recette en avance
</span>
);
}
if (shaRec === shaProd) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-900/40 text-emerald-300 border border-emerald-700/40" title="Versions identiques">
<CheckCircle className="w-3 h-3" />
Synchronisé
</span>
);
}
// Comparer les dates pour savoir qui est en avance
// Format fr-FR : dd/mm/yyyy
const parseDate = (s) => {
if (!s) return null;
const parts = s.split('/');
if (parts.length === 3) return new Date(`${parts[2]}-${parts[1]}-${parts[0]}`);
return new Date(s);
};
const dRec = parseDate(dateRec);
const dProd = parseDate(dateProd);
if (dRec && dProd) {
if (dRec > dProd) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-orange-900/40 text-orange-300 border border-orange-700/40" title={`Recette : ${versionRecette} | Prod : ${versionProd}`}>
<ArrowUp className="w-3 h-3" />
Recette en avance
</span>
);
} else if (dProd > dRec) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-green-900/40 text-green-300 border border-green-700/40" title={`Recette : ${versionRecette} | Prod : ${versionProd}`}>
<ArrowDown className="w-3 h-3" />
Prod en avance
</span>
);
}
}
// SHA différents mais dates non comparables
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-yellow-900/40 text-yellow-300 border border-yellow-700/40" title={`Recette : ${versionRecette} | Prod : ${versionProd}`}>
<AlertTriangle className="w-3 h-3" />
Divergent
</span>
);
}
function VersionBadge({ version, loading }) {
if (loading) {
return (
@@ -289,43 +190,6 @@ export default function InventairePage() {
</div>
</div>
{/* Stats */}
{!loading && inventory.length > 0 && (
<div className="grid grid-cols-5 gap-4">
<div className="card p-4 text-center border border-dark-700">
<div className="text-2xl font-bold text-white">{inventory.length}</div>
<div className="text-xs text-gray-400 mt-1">Applications totales</div>
</div>
<div className="card p-4 text-center border border-orange-700/30">
<div className="text-2xl font-bold text-orange-400">
{inventory.filter((a) => a.repoRecette?.present).length}
</div>
<div className="text-xs text-gray-400 mt-1">Dépôts Recette</div>
</div>
<div className="card p-4 text-center border border-green-700/30">
<div className="text-2xl font-bold text-green-400">
{inventory.filter((a) => a.repoProd?.present).length}
</div>
<div className="text-xs text-gray-400 mt-1">Dépôts Production</div>
</div>
<div className="card p-4 text-center border border-emerald-700/30">
<div className="text-2xl font-bold text-emerald-400">
{inventory.filter((a) => {
const shaRec = a.repoRecette?.version?.split(' ')[0];
const shaProd = a.repoProd?.version?.split(' ')[0];
return shaRec && shaProd && shaRec === shaProd;
}).length}
</div>
<div className="text-xs text-gray-400 mt-1">Synchronisés</div>
</div>
<div className="card p-4 text-center border border-blue-700/30">
<div className="text-2xl font-bold text-blue-400">
{inventory.filter((a) => a.repoRecette?.present && a.repoProd?.present).length}
</div>
<div className="text-xs text-gray-400 mt-1">Déployés sur les 2 envs</div>
</div>
</div>
)}
{/* Légende */}
<div className="flex items-center gap-6 text-xs text-gray-400">
<div className="flex items-center gap-1.5">
@@ -351,12 +215,6 @@ export default function InventairePage() {
<th className="text-left px-4 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider w-48">
Application
</th>
<th className="text-center px-4 py-3 text-xs font-semibold text-purple-400 uppercase tracking-wider">
<div className="flex items-center justify-center gap-2">
<ArrowUp className="w-4 h-4" />
Synchronisation
</div>
</th>
<th className="text-center px-4 py-3 text-xs font-semibold text-orange-400 uppercase tracking-wider" colSpan={2}>
<div className="flex items-center justify-center gap-2">
<GitBranch className="w-4 h-4" />
@@ -371,7 +229,6 @@ export default function InventairePage() {
</th>
</tr>
<tr className="border-b border-dark-700 bg-dark-800/50">
<th className="px-4 py-2"></th>
<th className="px-4 py-2"></th>
<th className="text-center px-3 py-2 text-xs text-gray-500 font-medium">Dépôt Git</th>
<th className="text-center px-3 py-2 text-xs text-gray-500 font-medium">Version</th>
@@ -386,7 +243,7 @@ export default function InventairePage() {
<td className="px-4 py-3">
<span className="text-sm font-medium text-white">{app.name}</span>
</td>
{[...Array(5)].map((_, i) => (
{[...Array(4)].map((_, i) => (
<td key={i} className="px-3 py-3 text-center">
<div className="h-5 bg-dark-700 rounded animate-pulse mx-auto w-24" />
</td>
@@ -408,13 +265,6 @@ export default function InventairePage() {
<span className="text-xs text-gray-500 mt-0.5">{app.repoName}</span>
</div>
</td>
{/* Synchronisation */}
<td className="px-3 py-3 text-center">
<SyncBadge
versionRecette={app.repoRecette?.version}
versionProd={app.repoProd?.version}
/>
</td>
{/* Recette - Dépôt */}
<td className="px-3 py-3">
<RepoBadge
@@ -453,6 +303,33 @@ export default function InventairePage() {
</div>
</div>
{/* Stats */}
{!loading && inventory.length > 0 && (
<div className="grid grid-cols-4 gap-4">
<div className="card p-4 text-center border border-dark-700">
<div className="text-2xl font-bold text-white">{inventory.length}</div>
<div className="text-xs text-gray-400 mt-1">Applications totales</div>
</div>
<div className="card p-4 text-center border border-orange-700/30">
<div className="text-2xl font-bold text-orange-400">
{inventory.filter((a) => a.repoRecette?.present).length}
</div>
<div className="text-xs text-gray-400 mt-1">Dépôts Recette</div>
</div>
<div className="card p-4 text-center border border-green-700/30">
<div className="text-2xl font-bold text-green-400">
{inventory.filter((a) => a.repoProd?.present).length}
</div>
<div className="text-xs text-gray-400 mt-1">Dépôts Production</div>
</div>
<div className="card p-4 text-center border border-blue-700/30">
<div className="text-2xl font-bold text-blue-400">
{inventory.filter((a) => a.repoRecette?.present && a.repoProd?.present).length}
</div>
<div className="text-xs text-gray-400 mt-1">Déployés sur les 2 envs</div>
</div>
</div>
)}
</div>
);
}

View File

@@ -34,7 +34,7 @@ export default function LoginPage({ onLogin }) {
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-600 mb-4">
<Server className="w-8 h-8 text-white" />
</div>
<h1 className="text-2xl font-bold text-white">Dashboard Recette</h1>
<h1 className="text-2xl font-bold text-white">Dashboard Production</h1>
<p className="text-gray-400 mt-2">Gestion des applications</p>
</div>
@@ -130,7 +130,7 @@ export default function LoginPage({ onLogin }) {
</div>
<p className="text-center text-gray-600 text-sm mt-6">
Santinova Soft &mdash; Serveur de recette
Santinova Soft &mdash; Serveur de production
</p>
</div>
</div>

View File

@@ -1,449 +0,0 @@
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>
);
}