Merge pull request #49 from RustyRory/staging

chore(release): 0.4.2

Author: RustyRory

.github/workflows/staging.yml

@@ -18,8 +18,8 @@ jobs:
           username: ${{ secrets.VPS_USER }}
           key: ${{ secrets.VPS_SSH_KEY }}
           script: |
-            cd /var/www/VPS-monitor
+            cd /var/www/vps-monitor
             git pull origin staging
             cd /var/www
-            docker-compose build vps-monitor
-            docker-compose up -d vps-monitor
+            docker compose build vps-monitor
+            docker compose up -d vps-monitor

CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## [0.4.2] — 2026-05-19
+
+### Phase 4 — Logs en temps réel via WebSocket
+
+#### Added
+
+- Dépendance `ws` (v8) : serveur WebSocket monté sur le serveur HTTP Express via `noServer: true`
+- `GET /api/ws-token` (authentifié) : génère un token à usage unique (TTL 30 s) pour l'upgrade WebSocket — évite d'exposer la session cookie sur la connexion WS
+- `streamContainerLogs(name, tail, onData, onEnd)` dans `docker.js` : stream Docker `follow: true` avec démultiplexage stdout/stderr via `modem.demuxStream` + `PassThrough`
+- Gestionnaire `server.on('upgrade', ...)` : valide et consomme le token one-shot avant d'accepter la connexion WebSocket (401 + `socket.destroy()` si invalide ou expiré)
+- Modal "Logs" dans le dashboard : bouton "Logs" sur chaque card container (running et exited), affichage en temps réel dans un `<pre>` avec auto-scroll, fermeture via bouton ✕ ou clic sur l'overlay
+- `showLogs(name)` / `closeLogs()` dans `app.js` : gestion du cycle de vie WebSocket (ouverture, réception, erreur, fermeture propre du stream Docker)
+
+#### Changed
+
+- `server.js` : migration de `app.listen()` vers `http.createServer(app)` + `server.listen()` pour supporter l'upgrade WebSocket
+- `sessionMiddleware` extrait en variable nommée (préparation au partage avec le handler d'upgrade)
+- Section "Applications web" : ajout du bouton "Ouvrir →" sur les cards dans `renderWebsites` (frontend manquant en 0.4.1)
+
+---
+
+## [0.4.1] — 2026-04-28
+
+### Phase 4 — Navigation vers les applications depuis le dashboard
+
+#### Added
+
+- Bouton "Ouvrir →" sur chaque card application web du dashboard (connecté) — ouvre l'application dans un nouvel onglet via `target="_blank"`
+- Nouveau style `.card-link` : bouton discret monospace cohérent avec le design du dashboard, avec transition hover
+
+#### Changed
+
+- `home.html` : remplacement de la card CineMap — TP Laravel en première position par QW APP (`/qw-app/`) — CineMap déplacée après Lucky7
+- `home.html` : footer mis à jour — ajout d'un lien Portfolio (`damien-paszkiewicz.vercel.app`) aux côtés du lien GitHub, suppression du label "B3 Dev"
+
+---
+
 ## [0.4.0] — 2026-04-27
 
 ### Phase 4 — Intégration Nginx + Tests de non-régression

README.md

@@ -1 +1,168 @@
-# VPSControlPanel
+# VPS Monitor
+
+Application web de monitoring pour VPS multi-applications. Supervise les containers Docker et la disponibilité des applications web via une interface légère sans framework.
+
+## Fonctionnalités
+
+- Dashboard temps réel des containers Docker (statut, image, ports, uptime)
+- Monitoring HTTP des applications web exposées via Nginx
+- Actions Docker : restart, stop, start d'un container
+- Authentification par session (login/password, durée 8h)
+- Page publique d'accueil avec liens vers les applications
+- Rafraîchissement automatique toutes les 5 secondes
+- Indicateurs visuels : vert (running/OK), rouge (exited/DOWN), orange (restarting)
+- Statut global OK/KO affiché dans le header
+
+## Stack technique
+
+| Couche | Technologie |
+|--------|-------------|
+| Backend | Node.js 20 + Express 5 |
+| Docker | Dockerode (via socket) |
+| Frontend | HTML + CSS + JS vanilla (sans build) |
+| Auth | express-session |
+| Tests | Jest + Supertest |
+| Lint | ESLint |
+
+## Structure du projet
+
+```
+vps-monitor-app/
+├── api/
+│   ├── server.js           # Serveur Express + routes
+│   ├── server.test.js      # Tests Jest
+│   └── services/
+│       ├── docker.js       # Intégration Docker socket
+│       └── http.js         # Checks HTTP des applications
+├── public/
+│   ├── home.html           # Page publique (non connecté)
+│   ├── index.html          # Dashboard (connecté)
+│   ├── login.html          # Formulaire de login
+│   ├── app.js              # Logique frontend
+│   └── style.css
+├── Dockerfile
+└── package.json
+```
+
+## API
+
+### Routes publiques
+
+| Méthode | Route | Description |
+|---------|-------|-------------|
+| GET | `/` | Home publique ou dashboard (selon session) |
+| POST | `/auth/login` | Connexion |
+| POST | `/auth/logout` | Déconnexion |
+
+### Routes protégées (session requise)
+
+| Méthode | Route | Description |
+|---------|-------|-------------|
+| GET | `/api/status` | Statut containers + sites web |
+| POST | `/api/container/restart` | Redémarre un container |
+| POST | `/api/container/stop` | Arrête un container |
+| POST | `/api/container/start` | Démarre un container arrêté |
+
+#### Exemple de réponse `GET /api/status`
+
+```json
+{
+  "containers": [
+    { "name": "sbv-api", "status": "running", "ports": ["3006:5000"], "image": "sbv-api:latest", "uptime": "2h" }
+  ],
+  "websites": [
+    { "name": "SaintBarth Volley", "url": "/saintbarthvolley/", "status": "OK" }
+  ],
+  "globalStatus": "OK"
+}
+```
+
+## Variables d'environnement
+
+Créer un fichier `.env` à la racine de `vps-monitor-app/` :
+
+```env
+PORT=3000
+BASE_URL=http://localhost:3000
+AUTH_USER=admin
+AUTH_PASS=your-password
+SESSION_SECRET=your-secret
+```
+
+## Lancement
+
+### Développement
+
+```bash
+cd vps-monitor-app
+npm install
+npm run dev
+```
+
+### Production (Docker)
+
+```yaml
+# docker-compose.yml
+vps-monitor:
+  build: ./vps-monitor-app
+  container_name: vps-monitor
+  volumes:
+    - /var/run/docker.sock:/var/run/docker.sock
+  ports:
+    - "3020:3000"
+  env_file: ./vps-monitor-app/.env
+  restart: unless-stopped
+```
+
+```bash
+docker compose up -d vps-monitor
+```
+
+## Intégration Nginx
+
+Remplace la homepage statique en proxifiant `/` vers vps-monitor :
+
+```nginx
+location / {
+    proxy_pass http://127.0.0.1:3020;
+    proxy_http_version 1.1;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+}
+```
+
+## Tests et lint
+
+```bash
+npm run lint     # ESLint
+npm test         # Jest + Supertest
+```
+
+## CI/CD
+
+- **CI** : lint + tests sur toutes les branches et PRs (GitHub Actions)
+- **CD** : déploiement automatique sur le VPS via SSH au push sur `staging`
+
+## Applications monitorées
+
+| Application | Route Nginx |
+|-------------|-------------|
+| TP Vue | `/B3dev-TP_VUE/` |
+| SaintBarth Volley | `/saintbarthvolley/` |
+| Lucky7 | `/lucky7/` |
+| College La Boussole | `/collegelaboussole/` |
+| Cinemap | `/cinemap/` |
+
+## Sécurité
+
+- Le socket Docker (`/var/run/docker.sock`) donne un accès total au serveur — déployer uniquement en environnement de confiance
+- Toutes les routes `/api/*` et les actions containers sont protégées par la session
+- Cookies `httpOnly`, session de 8h
+
+## Évolutions prévues
+
+- Alertes Discord / email
+- Historique uptime
+- Graphiques CPU / RAM
+- Logs en temps réel
+- Support multi-serveurs

docs/workflow.md

@@ -299,13 +299,59 @@ Recharger Nginx : `nginx -t && nginx -s reload`
 - Simuler un container arrêté et vérifier l'affichage (statut rouge)
 - Simuler un service HTTP down et vérifier l'affichage
 
-### Étape 15 — Évolutions futures (optionnel)
+### Étape 15 — Logs en temps réel via WebSocket
+
+#### Objectif
+
+Afficher les logs d'un container en temps réel dans une modale, avec streaming continu (équivalent `docker logs --follow`).
+
+#### 15.1 — Installer le package WebSocket
+
+```bash
+npm install ws
+```
+
+#### 15.2 — Mettre à jour `api/services/docker.js`
+
+Ajouter la fonction `streamContainerLogs(name, tail, onData, onEnd)` :
+
+- Appelle `container.logs({ follow: true, tail, stdout: true, stderr: true })`
+- Utilise `docker.modem.demuxStream` + deux `PassThrough` pour séparer stdout/stderr
+- Retourne le stream brut afin que l'appelant puisse le `destroy()` à la déconnexion
+
+#### 15.3 — Mettre à jour `api/server.js`
+
+- Extraire le middleware `session(...)` dans une variable `sessionMiddleware` pour le réutiliser
+- Remplacer `app.listen()` par `http.createServer(app)` + `server.listen()`
+- Créer un `WebSocketServer({ noServer: true })`
+- Écouter l'événement `upgrade` sur le serveur HTTP : parser la session via `sessionMiddleware`, rejeter avec 401 si non authentifié, sinon déléguer à `wss.handleUpgrade`
+- Sur `wss.on('connection')` : lire `name` et `tail` dans l'URL, démarrer `streamContainerLogs`, envoyer chaque chunk via `ws.send()`, détruire le stream Docker à la fermeture du WebSocket
+
+Le chemin d'écoute WebSocket est `/ws/logs?name=<container>&tail=200`.
+
+#### 15.4 — Mettre à jour `public/app.js`
+
+- Remplacer le `fetch` de `showLogs` par une connexion `WebSocket`
+- Construire l'URL : `ws://` ou `wss://` selon le protocole courant
+- Ajouter les messages au `<pre>` au fil des events `onmessage`, avec auto-scroll
+- Stocker le socket dans `activeLogSocket` pour le fermer proprement dans `closeLogs()`
+
+#### 15.5 — Tester
+
+```bash
+# Depuis le VPS
+docker logs <container> --follow   # comportement attendu
+# Dans l'app : cliquer "Logs" → la modale doit streamer en direct
+```
+
+---
+
+### Étape 16 — Évolutions futures
 
 À planifier selon les besoins :
 
 - Alertes email quand un service tombe
 - Historique d'uptime (stockage en fichier ou SQLite)
 - Graphiques CPU / RAM via `dockerode.stats`
-- Logs en temps réel via WebSocket
 - Support multi-serveurs
 

vps-monitor-app/api/server.js

@@ -1,9 +1,11 @@
 import 'dotenv/config';
+import { createServer } from 'http';
 import express from 'express';
 import session from 'express-session';
+import { WebSocketServer } from 'ws';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
-import { getContainers, restartContainer, stopContainer, startContainer } from './services/docker.js';
+import { getContainers, restartContainer, stopContainer, startContainer, streamContainerLogs } from './services/docker.js';
 import { checkWebsites } from './services/http.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -16,13 +18,15 @@ const SESSION_SECRET = process.env.SESSION_SECRET || 'change-me';
 
 const app = express();
 
-app.use(express.json());
-app.use(session({
+const sessionMiddleware = session({
   secret: SESSION_SECRET,
   resave: false,
   saveUninitialized: false,
   cookie: { httpOnly: true, maxAge: 8 * 60 * 60 * 1000 },
-}));
+});
+
+app.use(express.json());
+app.use(sessionMiddleware);
 
 // --- Routes publiques ---
 
@@ -113,10 +117,67 @@ app.post('/api/container/start', requireAuth, async (req, res) => {
   }
 });
 
+// --- WebSocket : logs en temps réel ---
+
+const wsTokens = new Map();
+
+app.get('/api/ws-token', requireAuth, (_req, res) => {
+  const token = Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
+  wsTokens.set(token, Date.now() + 30_000);
+  res.json({ token });
+});
+
+const server = createServer(app);
+const wss = new WebSocketServer({ noServer: true });
+
+server.on('upgrade', (req, socket, head) => {
+  const url = new URL(req.url, 'http://localhost');
+  const token = url.searchParams.get('token');
+  const expiry = token && wsTokens.get(token);
+
+  if (!expiry || Date.now() > expiry) {
+    socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');
+    socket.destroy();
+    return;
+  }
+  wsTokens.delete(token);
+
+  wss.handleUpgrade(req, socket, head, (ws) => {
+    wss.emit('connection', ws, req);
+  });
+});
+
+wss.on('connection', (ws, req) => {
+  const url = new URL(req.url, 'http://localhost');
+  const name = url.searchParams.get('name');
+  const tail = parseInt(url.searchParams.get('tail') || '200', 10);
+
+  if (!name) {
+    ws.close(1008, 'name requis');
+    return;
+  }
+
+  let logStream = null;
+
+  streamContainerLogs(name, tail,
+    (data) => { if (ws.readyState === ws.OPEN) ws.send(data); },
+    () => { if (ws.readyState === ws.OPEN) ws.close(); },
+  ).then((stream) => {
+    logStream = stream;
+  }).catch((err) => {
+    if (ws.readyState === ws.OPEN) ws.send(`Erreur: ${err.message}`);
+    ws.close();
+  });
+
+  ws.on('close', () => {
+    if (logStream) logStream.destroy();
+  });
+});
+
 export default app;
 
 if (process.argv[1] === fileURLToPath(import.meta.url)) {
-  app.listen(PORT, () => {
+  server.listen(PORT, () => {
     console.log(`vps-monitor listening on ${BASE_URL}`);
   });
 }

vps-monitor-app/api/server.test.js

@@ -12,6 +12,7 @@ jest.unstable_mockModule('./services/docker.js', () => ({
   restartContainer: jest.fn().mockResolvedValue(),
   stopContainer: jest.fn().mockResolvedValue(),
   startContainer: jest.fn().mockResolvedValue(),
+  streamContainerLogs: jest.fn().mockResolvedValue({ destroy: jest.fn() }),
 }));
 
 jest.unstable_mockModule('./services/http.js', () => ({