feat: page Inventaire, Documentation, corrections routes inventory (URLs publiques Gitea), port 3001, GITEA_PROD_INTERNAL_URL
This commit is contained in:
parent
800d82a929
commit
ee685f0326
|
|
@ -5,38 +5,35 @@ services:
|
||||||
dockerfile: Dockerfile
|
dockerfile: Dockerfile
|
||||||
container_name: manus-dashboard
|
container_name: manus-dashboard
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
privileged: true
|
|
||||||
env_file:
|
|
||||||
- .env
|
|
||||||
environment:
|
environment:
|
||||||
- NODE_ENV=production
|
NODE_ENV: production
|
||||||
- PORT=3001
|
PORT: 3001
|
||||||
- JWT_SECRET=${DASHBOARD_JWT_SECRET}
|
JWT_SECRET: manus-dashboard-prod-secret-2026
|
||||||
- ADMIN_USERNAME=${DASHBOARD_ADMIN_USERNAME}
|
ADMIN_USERNAME: adminItinova
|
||||||
- ADMIN_PASSWORD=${DASHBOARD_ADMIN_PASSWORD}
|
ADMIN_PASSWORD: Itinova69!
|
||||||
- GITEA_URL=${GITEA_URL}
|
GITEA_URL: https://git.santinova-soft.org
|
||||||
- GITEA_USERNAME=${GITEA_USERNAME}
|
GITEA_USERNAME: manus-admin
|
||||||
- GITEA_PASSWORD=${GITEA_PASSWORD}
|
GITEA_PASSWORD: ManusGitea2026!
|
||||||
- WEBHOOK_SECRET=${WEBHOOK_SECRET}
|
APPS_BASE_PATH: /opt/manus-deploy/apps
|
||||||
- APPS_BASE_PATH=${APPS_BASE_PATH}
|
INFRA_BASE_PATH: /opt/manus-deploy/infrastructure
|
||||||
- INFRA_BASE_PATH=${INFRA_BASE_PATH}
|
WEBHOOK_SECRET: webhook-prod-secret-2026
|
||||||
- HEALTH_CHECK_INTERVAL=${HEALTH_CHECK_INTERVAL}
|
|
||||||
volumes:
|
volumes:
|
||||||
- /opt/manus-deploy/webhook-patched.js:/app/backend/src/webhook.js:ro
|
|
||||||
- /var/run/docker.sock:/var/run/docker.sock
|
- /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:
|
networks:
|
||||||
- web
|
- web
|
||||||
labels:
|
labels:
|
||||||
- "traefik.enable=true"
|
- "traefik.enable=true"
|
||||||
- "traefik.http.routers.manus-dashboard.rule=Host(`dashboard.santinova-soft.org`)"
|
- "traefik.http.routers.dashboard.rule=Host(`dashboard.santinova-soft.org`)"
|
||||||
- "traefik.http.routers.manus-dashboard.entrypoints=websecure"
|
- "traefik.http.routers.dashboard.entrypoints=websecure"
|
||||||
- "traefik.http.routers.manus-dashboard.tls=true"
|
- "traefik.http.routers.dashboard.tls.certresolver=letsencrypt"
|
||||||
- "traefik.http.routers.manus-dashboard.tls.certresolver=letsencrypt"
|
- "traefik.http.services.dashboard.loadbalancer.server.port=3001"
|
||||||
- "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"
|
|
||||||
networks:
|
networks:
|
||||||
web:
|
web:
|
||||||
external: true
|
external: true
|
||||||
|
|
|
||||||
|
|
@ -2,113 +2,105 @@ module.exports = {
|
||||||
port: process.env.PORT || 3001,
|
port: process.env.PORT || 3001,
|
||||||
jwtSecret: process.env.JWT_SECRET || 'manus-dashboard-secret-2026',
|
jwtSecret: process.env.JWT_SECRET || 'manus-dashboard-secret-2026',
|
||||||
jwtExpiry: '24h',
|
jwtExpiry: '24h',
|
||||||
// Authentification
|
|
||||||
auth: {
|
auth: {
|
||||||
username: process.env.ADMIN_USERNAME || 'adminItinova',
|
username: process.env.ADMIN_USERNAME || 'adminItinova',
|
||||||
password: process.env.ADMIN_PASSWORD || 'Itinova69!',
|
password: process.env.ADMIN_PASSWORD || 'Itinova69!',
|
||||||
},
|
},
|
||||||
// Gitea
|
|
||||||
gitea: {
|
gitea: {
|
||||||
url: process.env.GITEA_URL || 'https://git.santinova-soft.org',
|
url: process.env.GITEA_URL || 'https://git.santinova-soft.org',
|
||||||
username: process.env.GITEA_USERNAME || 'manus-admin',
|
username: process.env.GITEA_USERNAME || 'manus-admin',
|
||||||
password: process.env.GITEA_PASSWORD || 'ManusGitea2026!',
|
password: process.env.GITEA_PASSWORD || 'ManusGitea2026!',
|
||||||
},
|
},
|
||||||
// Applications config
|
|
||||||
appsBasePath: process.env.APPS_BASE_PATH || '/opt/manus-deploy/apps',
|
appsBasePath: process.env.APPS_BASE_PATH || '/opt/manus-deploy/apps',
|
||||||
infrastructurePath: process.env.INFRA_BASE_PATH || '/opt/manus-deploy/infrastructure',
|
infrastructurePath: process.env.INFRA_BASE_PATH || '/opt/manus-deploy/infrastructure',
|
||||||
// Health check interval (ms)
|
|
||||||
healthCheckInterval: parseInt(process.env.HEALTH_CHECK_INTERVAL) || 30000,
|
healthCheckInterval: parseInt(process.env.HEALTH_CHECK_INTERVAL) || 30000,
|
||||||
// Apps configuration - can be extended
|
|
||||||
apps: [
|
apps: [
|
||||||
{
|
{
|
||||||
id: 'itinova-contacts',
|
id: 'itinova-contacts',
|
||||||
name: 'Itinova Contacts',
|
name: 'Itinova Contacts',
|
||||||
description: 'Application de gestion des contacts',
|
description: 'Application de gestion des contacts Itinova',
|
||||||
directory: 'itinova-contacts',
|
|
||||||
giteaRepo: 'itinova-contacts',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
urls: {
|
||||||
recette: 'https://contacts.recette.santinova-soft.org',
|
recette: 'https://contacts.recette.santinova-soft.org',
|
||||||
prod: null,
|
prod: 'https://contacts.santinova-soft.org',
|
||||||
},
|
},
|
||||||
|
giteaOwner: 'manus-admin',
|
||||||
|
giteaRepo: 'itinova-contacts',
|
||||||
|
composeFile: 'docker-compose.prod.yml',
|
||||||
containerName: 'itinova-contacts',
|
containerName: 'itinova-contacts',
|
||||||
healthCheckUrl: 'https://contacts.recette.santinova-soft.org',
|
category: 'ITINOVA',
|
||||||
port: 3000,
|
status: 'production',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'itinova-podcasts',
|
id: 'itinova-vehicle-exchange',
|
||||||
name: 'Itinova Podcasts',
|
name: 'Gestion de Flotte',
|
||||||
description: 'Application de gestion de podcasts',
|
description: 'Bourse de vehicules Itinova - Partage et echange de vehicules entre etablissements',
|
||||||
directory: 'itinova-podcasts',
|
|
||||||
giteaRepo: 'itinova-podcasts',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
urls: {
|
||||||
recette: 'https://podcasts.recette.santinova-soft.org',
|
recette: 'https://flotte.recette.santinova-soft.org',
|
||||||
prod: null,
|
prod: 'https://flotte.santinova-soft.org',
|
||||||
},
|
},
|
||||||
containerName: 'itinova-podcasts',
|
giteaOwner: 'manus-admin',
|
||||||
healthCheckUrl: 'https://podcasts.recette.santinova-soft.org',
|
giteaRepo: 'itinova-vehicle-exchange',
|
||||||
port: 3000,
|
composeFile: 'docker-compose.yml',
|
||||||
|
containerName: 'itinova-vehicle-exchange',
|
||||||
|
category: 'ITINOVA',
|
||||||
|
status: 'production',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'veille-reglementaire',
|
id: 'veille-reglementaire',
|
||||||
name: 'Veille Réglementaire',
|
name: 'Veille Réglementaire',
|
||||||
description: 'Application de veille réglementaire et appels à projets',
|
description: 'Application de veille réglementaire — Direction des Opérations Itinova',
|
||||||
directory: 'veille-reglementaire',
|
|
||||||
giteaRepo: 'veille-reglementaire',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
urls: {
|
||||||
recette: 'https://veille.recette.santinova-soft.org',
|
recette: 'https://veille.recette.santinova-soft.org',
|
||||||
prod: null,
|
prod: 'https://veille.santinova-soft.org',
|
||||||
},
|
},
|
||||||
containerName: 'veille-reglementaire',
|
containerName: 'veille-reglementaire',
|
||||||
healthCheckUrl: 'https://veille.recette.santinova-soft.org',
|
category: 'ITINOVA',
|
||||||
port: 3000,
|
status: 'production',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'itinova-vehicle-exchange',
|
id: 'itinova-podcasts',
|
||||||
name: 'Itinova Gestion de Flotte',
|
name: 'Itinova Podcasts',
|
||||||
description: 'Application de gestion de flotte de véhicules',
|
description: 'Gestionnaire de podcasts pour les établissements Itinova',
|
||||||
directory: 'itinova-vehicle-exchange',
|
|
||||||
giteaRepo: 'itinova-vehicle-exchange',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
urls: {
|
||||||
recette: 'https://flotte.recette.santinova-soft.org',
|
recette: 'https://podcasts.recette.santinova-soft.org',
|
||||||
prod: null,
|
prod: 'https://podcasts.santinova-soft.org',
|
||||||
},
|
},
|
||||||
containerName: 'itinova-vehicle-exchange',
|
giteaOwner: 'manus-admin',
|
||||||
healthCheckUrl: 'https://flotte.recette.santinova-soft.org',
|
giteaRepo: 'itinova-podcasts',
|
||||||
port: 3000,
|
composeFile: 'docker-compose.yml',
|
||||||
|
containerName: 'itinova-podcasts',
|
||||||
|
category: 'ITINOVA',
|
||||||
|
status: 'production',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'sonum',
|
id: 'sonum',
|
||||||
name: 'Sonum',
|
name: 'SONUM',
|
||||||
description: 'Application Sonum',
|
description: 'Cartographie des Solutions Numériques FEHAP',
|
||||||
directory: 'sonum',
|
|
||||||
giteaRepo: 'sonum',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
urls: {
|
||||||
recette: 'https://sonum.recette.santinova-soft.org',
|
recette: 'https://sonum.recette.santinova-soft.org',
|
||||||
prod: null,
|
prod: 'https://sonum.santinova-soft.org',
|
||||||
},
|
},
|
||||||
|
giteaOwner: 'manus-admin',
|
||||||
|
giteaRepo: 'sonum',
|
||||||
|
composeFile: 'docker-compose.yml',
|
||||||
containerName: 'sonum',
|
containerName: 'sonum',
|
||||||
healthCheckUrl: 'https://sonum.recette.santinova-soft.org',
|
category: 'SANTINOVA',
|
||||||
port: 3000,
|
status: 'production',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'facturation-santinova',
|
id: 'demat-facturation-dsi',
|
||||||
name: 'Facturation Santinova',
|
name: 'Démat Facturation DSI',
|
||||||
description: 'Application de gestion de la facturation',
|
description: 'Dématérialisation de la facturation fournisseurs — Direction des Systèmes d\'Information',
|
||||||
directory: 'facturation-santinova',
|
|
||||||
giteaRepo: 'facturation-santinova',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
urls: {
|
||||||
recette: 'https://facturation.recette.santinova-soft.org',
|
recette: 'https://demat-facturation.recette.santinova-soft.org',
|
||||||
prod: null,
|
prod: 'https://demat-facturation.santinova-soft.org',
|
||||||
},
|
},
|
||||||
containerName: 'facturation-santinova-app',
|
giteaOwner: 'manus-admin',
|
||||||
healthCheckUrl: 'https://facturation.recette.santinova-soft.org',
|
giteaRepo: 'demat-facturation-dsi',
|
||||||
port: 3001,
|
composeFile: 'docker-compose.yml',
|
||||||
|
containerName: 'demat-facturation-app',
|
||||||
|
category: 'SANTINOVA',
|
||||||
|
status: 'production',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
@ -1,10 +1,14 @@
|
||||||
const Docker = require('dockerode');
|
const Docker = require('dockerode');
|
||||||
const { exec } = require('child_process');
|
const { exec } = require('child_process');
|
||||||
|
const fs = require('fs');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
const config = require('./config');
|
const config = require('./config');
|
||||||
|
|
||||||
const docker = new Docker({ socketPath: '/var/run/docker.sock' });
|
const docker = new Docker({ socketPath: '/var/run/docker.sock' });
|
||||||
|
|
||||||
|
// Chemin du fichier de métriques écrit par le script host
|
||||||
|
const HOST_METRICS_FILE = '/opt/manus-deploy/logs/host_metrics.json';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Récupérer les informations d'un conteneur Docker
|
* Récupérer les informations d'un conteneur Docker
|
||||||
*/
|
*/
|
||||||
|
|
@ -38,7 +42,6 @@ async function getContainerLogs(containerName, tail = 100) {
|
||||||
tail: tail,
|
tail: tail,
|
||||||
timestamps: true,
|
timestamps: true,
|
||||||
});
|
});
|
||||||
// Parse buffer to string
|
|
||||||
return logs.toString('utf8');
|
return logs.toString('utf8');
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
return `Erreur lors de la récupération des logs: ${err.message}`;
|
return `Erreur lors de la récupération des logs: ${err.message}`;
|
||||||
|
|
@ -80,8 +83,8 @@ function redeployApp(appConfig) {
|
||||||
logLines.push(`[${new Date().toISOString()}] Commande: ${cmd}`);
|
logLines.push(`[${new Date().toISOString()}] Commande: ${cmd}`);
|
||||||
|
|
||||||
const process = exec(cmd, {
|
const process = exec(cmd, {
|
||||||
maxBuffer: 1024 * 1024 * 10, // 10MB
|
maxBuffer: 1024 * 1024 * 10,
|
||||||
timeout: 300000, // 5 minutes
|
timeout: 300000,
|
||||||
});
|
});
|
||||||
|
|
||||||
process.stdout.on('data', (data) => {
|
process.stdout.on('data', (data) => {
|
||||||
|
|
@ -134,8 +137,6 @@ function gitPull(appConfig) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Démarrer un conteneur Docker
|
* Démarrer un conteneur Docker
|
||||||
*/
|
*/
|
||||||
|
|
@ -176,83 +177,134 @@ async function restartContainer(containerName) {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Récupérer les métriques système du serveur (CPU, RAM, disque, réseau)
|
* Récupérer les métriques système du serveur (CPU, RAM, disque, réseau, uptime)
|
||||||
|
*
|
||||||
|
* Architecture LXC + Docker : le conteneur est isolé dans ses namespaces réseau/PID,
|
||||||
|
* ce qui empêche la lecture directe de /proc pour certaines métriques.
|
||||||
|
*
|
||||||
|
* Solution : lire le fichier /opt/manus-deploy/logs/host_metrics.json
|
||||||
|
* écrit en continu par le script metrics_collector.sh tournant sur le VPS hôte.
|
||||||
|
* Ce fichier est accessible via le volume monté dans le conteneur.
|
||||||
|
*
|
||||||
|
* Fallback : calcul direct depuis /proc (moins précis pour RAM/uptime/réseau).
|
||||||
*/
|
*/
|
||||||
function getServerMetrics() {
|
function getServerMetrics() {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
const { execSync } = require("child_process");
|
// ── Tentative 1 : lire le fichier de métriques du host ─────────────────
|
||||||
try {
|
try {
|
||||||
// nsenter -t 1 -m lit les métriques réelles de l'hôte VPS (pas de l'hyperviseur)
|
if (fs.existsSync(HOST_METRICS_FILE)) {
|
||||||
const ns = "nsenter -t 1 -m --";
|
const stat = fs.statSync(HOST_METRICS_FILE);
|
||||||
|
const ageMs = Date.now() - stat.mtimeMs;
|
||||||
|
// Fichier valide si moins de 60 secondes
|
||||||
|
if (ageMs < 60000) {
|
||||||
|
const raw = fs.readFileSync(HOST_METRICS_FILE, 'utf8');
|
||||||
|
const metrics = JSON.parse(raw);
|
||||||
|
// Rafraîchir le timestamp
|
||||||
|
metrics.timestamp = new Date().toISOString();
|
||||||
|
return resolve(metrics);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// Fichier absent ou corrompu → fallback
|
||||||
|
}
|
||||||
|
|
||||||
// CPU : delta /proc/stat sur 200ms
|
// ── Fallback : calcul depuis /proc (valeurs approchées) ────────────────
|
||||||
|
const { execSync } = require('child_process');
|
||||||
|
try {
|
||||||
|
// CPU via /host/proc/stat (namespace CPU partagé avec le VPS)
|
||||||
let cpuUsage = 0;
|
let cpuUsage = 0;
|
||||||
try {
|
try {
|
||||||
const s1 = execSync(`${ns} cat /proc/stat | grep '^cpu '`).toString().trim().split(/\s+/);
|
const procStat = fs.existsSync('/host/proc/stat') ? '/host/proc/stat' : '/proc/stat';
|
||||||
execSync("sleep 0.2");
|
const s1 = execSync(`grep '^cpu ' ${procStat}`).toString().trim().split(/\s+/).slice(1).map(Number);
|
||||||
const s2 = execSync(`${ns} cat /proc/stat | grep '^cpu '`).toString().trim().split(/\s+/);
|
execSync('sleep 0.3');
|
||||||
const idle1 = parseInt(s1[4]), total1 = s1.slice(1).reduce((a,b)=>a+parseInt(b),0);
|
const s2 = execSync(`grep '^cpu ' ${procStat}`).toString().trim().split(/\s+/).slice(1).map(Number);
|
||||||
const idle2 = parseInt(s2[4]), total2 = s2.slice(1).reduce((a,b)=>a+parseInt(b),0);
|
const total1 = s1.reduce((a, b) => a + b, 0);
|
||||||
const dIdle = idle2 - idle1, dTotal = total2 - total1;
|
const total2 = s2.reduce((a, b) => a + b, 0);
|
||||||
|
const dTotal = total2 - total1;
|
||||||
|
const dIdle = s2[3] - s1[3];
|
||||||
cpuUsage = dTotal > 0 ? Math.round((1 - dIdle / dTotal) * 100) : 0;
|
cpuUsage = dTotal > 0 ? Math.round((1 - dIdle / dTotal) * 100) : 0;
|
||||||
} catch(e) {
|
} catch (e) {}
|
||||||
|
|
||||||
|
// RAM depuis cgroup v2 du VPS (accessible via /sys/fs/cgroup monté ou /host/cgroup)
|
||||||
|
let memTotal = 0, memUsed = 0, memFree = 0, memAvailable = 0;
|
||||||
|
try {
|
||||||
|
// Essayer /host/cgroup d'abord, puis /sys/fs/cgroup
|
||||||
|
const cgroupBase = fs.existsSync('/host/cgroup/memory.max') ? '/host/cgroup' : '/sys/fs/cgroup';
|
||||||
|
const memMaxRaw = fs.readFileSync(`${cgroupBase}/memory.max`, 'utf8').trim();
|
||||||
|
const memCurrRaw = fs.readFileSync(`${cgroupBase}/memory.current`, 'utf8').trim();
|
||||||
|
|
||||||
|
if (memMaxRaw !== 'max') {
|
||||||
|
memTotal = parseInt(memMaxRaw);
|
||||||
|
memUsed = parseInt(memCurrRaw);
|
||||||
|
// Tenter de lire la RAM inactive (cache) depuis memory.stat
|
||||||
|
try {
|
||||||
|
const memStat = fs.readFileSync(`${cgroupBase}/memory.stat`, 'utf8');
|
||||||
|
const inactiveFile = parseInt((memStat.match(/^inactive_file\s+(\d+)/m) || [0, 0])[1]);
|
||||||
|
const activeFile = parseInt((memStat.match(/^active_file\s+(\d+)/m) || [0, 0])[1]);
|
||||||
|
const cache = inactiveFile + activeFile;
|
||||||
|
memAvailable = memTotal - memUsed + cache;
|
||||||
|
memFree = memAvailable;
|
||||||
|
} catch (e) {
|
||||||
|
memAvailable = memTotal - memUsed;
|
||||||
|
memFree = memAvailable;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// Fallback /proc/meminfo (valeurs du namespace du conteneur)
|
||||||
try {
|
try {
|
||||||
const cpuRaw = execSync(`${ns} top -bn1 | grep 'Cpu(s)' | awk '{print $2}'`).toString().trim();
|
const meminfo = fs.readFileSync('/proc/meminfo', 'utf8');
|
||||||
cpuUsage = parseFloat(cpuRaw) || 0;
|
const getVal = (key) => {
|
||||||
} catch(e2) {}
|
const m = meminfo.match(new RegExp(`^${key}:\\s+(\\d+)`, 'm'));
|
||||||
|
return m ? parseInt(m[1]) * 1024 : 0;
|
||||||
|
};
|
||||||
|
memTotal = getVal('MemTotal');
|
||||||
|
memFree = getVal('MemFree');
|
||||||
|
memAvailable = getVal('MemAvailable') || memFree;
|
||||||
|
memUsed = memTotal - memAvailable;
|
||||||
|
} catch (e2) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
// RAM : cgroup de l'hôte (fiable même en environnement VPS virtualisé)
|
// Disque : df sur /
|
||||||
// La RAM totale est lue depuis /sys/fs/cgroup/memory.max de l'hôte
|
let diskTotal = 0, diskUsed = 0, diskFree = 0;
|
||||||
// La RAM utilisée est calculée via docker stats (valeurs réelles du VPS)
|
|
||||||
let memTotal = 8589934592; // 8 Go par défaut
|
|
||||||
try {
|
try {
|
||||||
const cgroupMax = execSync(`${ns} cat /sys/fs/cgroup/memory.max 2>/dev/null || cat /sys/fs/cgroup/memory/memory.limit_in_bytes 2>/dev/null`).toString().trim();
|
const diskRaw = execSync('df -B1 / | tail -1').toString().trim().split(/\s+/);
|
||||||
if (cgroupMax && cgroupMax !== 'max' && !isNaN(parseInt(cgroupMax))) {
|
diskTotal = parseInt(diskRaw[1]);
|
||||||
memTotal = parseInt(cgroupMax);
|
diskUsed = parseInt(diskRaw[2]);
|
||||||
}
|
diskFree = parseInt(diskRaw[3]);
|
||||||
} catch(e) {}
|
} catch (e) {}
|
||||||
|
|
||||||
// RAM utilisée : somme de tous les conteneurs via docker stats
|
// Uptime depuis /proc/uptime du VPS (namespace partagé avec le VPS)
|
||||||
let memUsed = 0;
|
let uptimeSeconds = 0;
|
||||||
try {
|
try {
|
||||||
const statsRaw = execSync("docker stats --no-stream --format '{{.MemUsage}}'").toString().trim();
|
const uptimeFile = fs.existsSync('/host/proc/uptime') ? '/host/proc/uptime' : '/proc/uptime';
|
||||||
statsRaw.split('\n').forEach(line => {
|
uptimeSeconds = parseFloat(fs.readFileSync(uptimeFile, 'utf8').trim().split(' ')[0]) || 0;
|
||||||
const match = line.match(/([\d.]+)(\w+)\s*\//);
|
} catch (e) {}
|
||||||
if (match) {
|
|
||||||
const val = parseFloat(match[1]);
|
|
||||||
const unit = match[2].toLowerCase();
|
|
||||||
if (unit === 'gib') memUsed += val * 1024 * 1024 * 1024;
|
|
||||||
else if (unit === 'mib') memUsed += val * 1024 * 1024;
|
|
||||||
else if (unit === 'kib') memUsed += val * 1024;
|
|
||||||
else memUsed += val;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} catch(e) {}
|
|
||||||
const memAvailable = memTotal - memUsed;
|
|
||||||
const memFree = memAvailable;
|
|
||||||
|
|
||||||
// Disque : df sur l'hôte
|
// Load average
|
||||||
const diskRaw = execSync(`${ns} df -B1 / | tail -1`).toString().trim().split(/\s+/);
|
let load1 = 0, load5 = 0, load15 = 0;
|
||||||
const diskTotal = parseInt(diskRaw[1]);
|
try {
|
||||||
const diskUsed = parseInt(diskRaw[2]);
|
const loadFile = fs.existsSync('/host/proc/loadavg') ? '/host/proc/loadavg' : '/proc/loadavg';
|
||||||
const diskFree = parseInt(diskRaw[3]);
|
const loadRaw = fs.readFileSync(loadFile, 'utf8').trim().split(' ');
|
||||||
|
load1 = parseFloat(loadRaw[0]) || 0;
|
||||||
|
load5 = parseFloat(loadRaw[1]) || 0;
|
||||||
|
load15 = parseFloat(loadRaw[2]) || 0;
|
||||||
|
} catch (e) {}
|
||||||
|
|
||||||
// Uptime et load
|
// Réseau : /proc/net/dev du VPS (namespace réseau partagé avec le VPS, pas le conteneur)
|
||||||
const uptimeRaw = execSync(`${ns} cat /proc/uptime`).toString().trim().split(" ");
|
|
||||||
const uptimeSeconds = parseFloat(uptimeRaw[0]);
|
|
||||||
const loadRaw = execSync(`${ns} cat /proc/loadavg`).toString().trim().split(" ");
|
|
||||||
const load1 = parseFloat(loadRaw[0]);
|
|
||||||
const load5 = parseFloat(loadRaw[1]);
|
|
||||||
const load15 = parseFloat(loadRaw[2]);
|
|
||||||
|
|
||||||
// Réseau
|
|
||||||
let netRx = 0, netTx = 0;
|
let netRx = 0, netTx = 0;
|
||||||
try {
|
try {
|
||||||
const netRaw = execSync(`${ns} cat /proc/net/dev | grep -E 'eth0|ens|enp' | head -1`).toString().trim().split(/\s+/);
|
const netFile = fs.existsSync('/host/proc/net/dev') ? '/host/proc/net/dev' : '/proc/net/dev';
|
||||||
netRx = parseInt(netRaw[1]) || 0;
|
const netRaw = fs.readFileSync(netFile, 'utf8');
|
||||||
netTx = parseInt(netRaw[9]) || 0;
|
const line = netRaw.split('\n').find((l) => /^\s*(eth0|venet0|ens\d+|enp\d+)/.test(l));
|
||||||
} catch(e) {}
|
if (line) {
|
||||||
|
const parts = line.trim().split(/\s+/);
|
||||||
|
netRx = parseInt(parts[1]) || 0;
|
||||||
|
netTx = parseInt(parts[9]) || 0;
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
|
||||||
|
const memPct = memTotal > 0 ? Math.round((memUsed / memTotal) * 100) : 0;
|
||||||
|
const diskPct = diskTotal > 0 ? Math.round((diskUsed / diskTotal) * 100) : 0;
|
||||||
|
|
||||||
resolve({
|
resolve({
|
||||||
cpu: { usage: cpuUsage },
|
cpu: { usage: cpuUsage },
|
||||||
|
|
@ -261,24 +313,26 @@ function getServerMetrics() {
|
||||||
used: memUsed,
|
used: memUsed,
|
||||||
free: memFree,
|
free: memFree,
|
||||||
available: memAvailable,
|
available: memAvailable,
|
||||||
usagePercent: Math.round((memUsed / memTotal) * 100)
|
usagePercent: memPct,
|
||||||
},
|
},
|
||||||
disk: {
|
disk: {
|
||||||
total: diskTotal,
|
total: diskTotal,
|
||||||
used: diskUsed,
|
used: diskUsed,
|
||||||
free: diskFree,
|
free: diskFree,
|
||||||
usagePercent: Math.round((diskUsed / diskTotal) * 100)
|
usagePercent: diskPct,
|
||||||
},
|
},
|
||||||
uptime: uptimeSeconds,
|
uptime: uptimeSeconds,
|
||||||
load: { load1, load5, load15 },
|
load: { load1, load5, load15 },
|
||||||
network: { rx: netRx, tx: netTx },
|
network: { rx: netRx, tx: netTx },
|
||||||
timestamp: new Date().toISOString()
|
timestamp: new Date().toISOString(),
|
||||||
|
source: 'fallback',
|
||||||
});
|
});
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
resolve({ error: err.message });
|
resolve({ error: err.message });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
docker,
|
docker,
|
||||||
getContainerInfo,
|
getContainerInfo,
|
||||||
|
|
|
||||||
|
|
@ -475,3 +475,78 @@ router.get('/system/metrics', authMiddleware, async (req, res) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
module.exports = router;
|
module.exports = router;
|
||||||
|
|
||||||
|
// ===== INVENTAIRE DES APPLICATIONS =====
|
||||||
|
const { exec } = require('child_process');
|
||||||
|
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 || 'Itinova69!';
|
||||||
|
const GITEA_PASS_PRD = process.env.GITEA_PASSWORD_PROD || 'ManusGitea2026!';
|
||||||
|
|
||||||
|
const INVENTORY_APPS = [
|
||||||
|
{ id: 'itinova-contacts', name: 'Itinova Contacts', repoName: 'itinova-contacts' },
|
||||||
|
{ id: 'itinova-podcasts', name: 'Itinova Podcasts', repoName: 'itinova-podcasts' },
|
||||||
|
{ id: 'veille-reglementaire', name: 'Veille Réglementaire', repoName: 'veille-reglementaire' },
|
||||||
|
{ id: 'itinova-vehicle-exchange', name: 'Itinova Gestion de Flotte', repoName: 'itinova-vehicle-exchange' },
|
||||||
|
{ id: 'sonum', name: 'SONUM', repoName: 'sonum' },
|
||||||
|
{ 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: 'portail-santinova', name: 'Portail Applicatif', repoName: 'portail-santinova' },
|
||||||
|
{ id: 'manus-dashboard', name: 'Dashboard Manus', repoName: 'manus-dashboard' },
|
||||||
|
];
|
||||||
|
|
||||||
|
function curlGitea(baseUrl, owner, repo, pass, publicBaseUrl) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
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 -u "${auth}" "${baseUrl}/api/v1/repos/${owner}/${repo}/commits?limit=1"`;
|
||||||
|
exec(cmd2, { timeout: 7000 }, (err2, stdout2) => {
|
||||||
|
let version = null;
|
||||||
|
try {
|
||||||
|
const commits = JSON.parse(stdout2 || '[]');
|
||||||
|
if (commits.length > 0) {
|
||||||
|
const c = commits[0];
|
||||||
|
const sha = c.sha ? c.sha.substring(0, 7) : null;
|
||||||
|
const date = c.commit && c.commit.author && c.commit.author.date
|
||||||
|
? new Date(c.commit.author.date).toLocaleDateString('fr-FR') : null;
|
||||||
|
version = sha && date ? `${sha} (${date})` : sha;
|
||||||
|
}
|
||||||
|
} catch(e) {}
|
||||||
|
const displayUrl = publicBaseUrl || baseUrl;
|
||||||
|
resolve({ present: true, url: `${displayUrl}/${owner}/${repo}`, version });
|
||||||
|
});
|
||||||
|
} catch(e) {
|
||||||
|
resolve({ present: false, url: null, version: null });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
router.get('/inventory', authMiddleware, async (req, res) => {
|
||||||
|
try {
|
||||||
|
const owner = GITEA_USER_INV;
|
||||||
|
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),
|
||||||
|
curlGitea(GITEA_PROD_EXTERNAL, owner, app.repoName, GITEA_PASS_PRD, GITEA_PROD_PUBLIC),
|
||||||
|
]);
|
||||||
|
return { ...app, repoRecette, repoProd };
|
||||||
|
})
|
||||||
|
);
|
||||||
|
res.json(results);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Erreur /inventory:', err.message);
|
||||||
|
res.status(500).json({ error: err.message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
;
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,8 @@ services:
|
||||||
dockerfile: Dockerfile
|
dockerfile: Dockerfile
|
||||||
container_name: manus-dashboard
|
container_name: manus-dashboard
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
|
ports:
|
||||||
|
- "3001:3001"
|
||||||
environment:
|
environment:
|
||||||
- NODE_ENV=production
|
- NODE_ENV=production
|
||||||
- PORT=3001
|
- PORT=3001
|
||||||
|
|
@ -13,7 +15,10 @@ services:
|
||||||
- ADMIN_PASSWORD=Itinova69!
|
- ADMIN_PASSWORD=Itinova69!
|
||||||
- GITEA_URL=https://git.santinova-soft.org
|
- GITEA_URL=https://git.santinova-soft.org
|
||||||
- GITEA_USERNAME=manus-admin
|
- GITEA_USERNAME=manus-admin
|
||||||
- GITEA_PASSWORD=ManusGitea2026!
|
- GITEA_PASSWORD=Itinova69!
|
||||||
|
- GITEA_PASSWORD_PROD=ManusGitea2026!
|
||||||
|
- GITEA_RECETTE_URL=https://git.recette.santinova-soft.org
|
||||||
|
- GITEA_PROD_INTERNAL_URL=http://172.18.0.9:3000
|
||||||
- APPS_BASE_PATH=/opt/manus-deploy/apps
|
- APPS_BASE_PATH=/opt/manus-deploy/apps
|
||||||
- INFRA_BASE_PATH=/opt/manus-deploy/infrastructure
|
- INFRA_BASE_PATH=/opt/manus-deploy/infrastructure
|
||||||
- HEALTH_CHECK_INTERVAL=30000
|
- HEALTH_CHECK_INTERVAL=30000
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
|
|
@ -6,16 +6,16 @@ import MonitoringPage from './pages/MonitoringPage';
|
||||||
import DeploymentsPage from './pages/DeploymentsPage';
|
import DeploymentsPage from './pages/DeploymentsPage';
|
||||||
import GiteaPage from './pages/GiteaPage';
|
import GiteaPage from './pages/GiteaPage';
|
||||||
import DockerPage from './pages/DockerPage';
|
import DockerPage from './pages/DockerPage';
|
||||||
|
import DocumentationPage from './pages/DocumentationPage';
|
||||||
|
import InventairePage from './pages/InventairePage';
|
||||||
import Sidebar from './components/Sidebar';
|
import Sidebar from './components/Sidebar';
|
||||||
import useWebSocket from './hooks/useWebSocket';
|
import useWebSocket from './hooks/useWebSocket';
|
||||||
import { getMe, getApps, logout as apiLogout } from './utils/api';
|
import { getMe, getApps, logout as apiLogout } from './utils/api';
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const [authenticated, setAuthenticated] = useState(false);
|
const [authenticated, setAuthenticated] = useState(false);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [currentPage, setCurrentPage] = useState('dashboard');
|
const [currentPage, setCurrentPage] = useState('dashboard');
|
||||||
const [apps, setApps] = useState([]);
|
const [apps, setApps] = useState([]);
|
||||||
|
|
||||||
// Vérifier l'authentification au chargement
|
// Vérifier l'authentification au chargement
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const token = localStorage.getItem('dashboard_token');
|
const token = localStorage.getItem('dashboard_token');
|
||||||
|
|
@ -34,7 +34,6 @@ export default function App() {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const fetchApps = async () => {
|
const fetchApps = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await getApps();
|
const res = await getApps();
|
||||||
|
|
@ -43,23 +42,19 @@ export default function App() {
|
||||||
console.error('Erreur chargement apps:', err);
|
console.error('Erreur chargement apps:', err);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// WebSocket handler
|
// WebSocket handler
|
||||||
const handleWsMessage = useCallback((data) => {
|
const handleWsMessage = useCallback((data) => {
|
||||||
if (data.type === 'health_update') {
|
if (data.type === 'health_update') {
|
||||||
setApps(data.data);
|
setApps(data.data);
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const { connected: wsConnected } = useWebSocket(
|
const { connected: wsConnected } = useWebSocket(
|
||||||
authenticated ? handleWsMessage : null
|
authenticated ? handleWsMessage : null
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleLogin = (data) => {
|
const handleLogin = (data) => {
|
||||||
setAuthenticated(true);
|
setAuthenticated(true);
|
||||||
fetchApps();
|
fetchApps();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleLogout = async () => {
|
const handleLogout = async () => {
|
||||||
try {
|
try {
|
||||||
await apiLogout();
|
await apiLogout();
|
||||||
|
|
@ -70,7 +65,6 @@ export default function App() {
|
||||||
setAuthenticated(false);
|
setAuthenticated(false);
|
||||||
setApps([]);
|
setApps([]);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center bg-dark-950">
|
<div className="min-h-screen flex items-center justify-center bg-dark-950">
|
||||||
|
|
@ -96,11 +90,9 @@ export default function App() {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!authenticated) {
|
if (!authenticated) {
|
||||||
return <LoginPage onLogin={handleLogin} />;
|
return <LoginPage onLogin={handleLogin} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
const renderPage = () => {
|
const renderPage = () => {
|
||||||
switch (currentPage) {
|
switch (currentPage) {
|
||||||
case 'dashboard':
|
case 'dashboard':
|
||||||
|
|
@ -115,11 +107,14 @@ export default function App() {
|
||||||
return <DockerPage />;
|
return <DockerPage />;
|
||||||
case 'monitoring':
|
case 'monitoring':
|
||||||
return <MonitoringPage />;
|
return <MonitoringPage />;
|
||||||
|
case 'documentation':
|
||||||
|
return <DocumentationPage />;
|
||||||
|
case 'inventaire':
|
||||||
|
return <InventairePage />;
|
||||||
default:
|
default:
|
||||||
return <DashboardPage apps={apps} />;
|
return <DashboardPage apps={apps} />;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-dark-950">
|
<div className="min-h-screen bg-dark-950">
|
||||||
<Sidebar
|
<Sidebar
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {
|
import { LayoutList,
|
||||||
Server,
|
Server,
|
||||||
LayoutDashboard,
|
LayoutDashboard,
|
||||||
Box,
|
Box,
|
||||||
|
|
@ -10,8 +10,8 @@ import {
|
||||||
Wifi,
|
Wifi,
|
||||||
WifiOff,
|
WifiOff,
|
||||||
Activity,
|
Activity,
|
||||||
|
BookOpen,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ id: 'dashboard', label: 'Tableau de bord', icon: LayoutDashboard },
|
{ id: 'dashboard', label: 'Tableau de bord', icon: LayoutDashboard },
|
||||||
{ id: 'apps', label: 'Applications', icon: Box },
|
{ id: 'apps', label: 'Applications', icon: Box },
|
||||||
|
|
@ -19,8 +19,9 @@ const navItems = [
|
||||||
{ id: 'gitea', label: 'Gitea', icon: GitBranch },
|
{ id: 'gitea', label: 'Gitea', icon: GitBranch },
|
||||||
{ id: 'docker', label: 'Docker', icon: Container },
|
{ id: 'docker', label: 'Docker', icon: Container },
|
||||||
{ id: 'monitoring', label: 'Monitoring', icon: Activity },
|
{ id: 'monitoring', label: 'Monitoring', icon: Activity },
|
||||||
|
{ id: 'documentation', label: 'Documentation Infra', icon: BookOpen },
|
||||||
|
{ id: 'inventaire', label: 'Inventaire Apps', icon: LayoutList },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function Sidebar({
|
export default function Sidebar({
|
||||||
currentPage,
|
currentPage,
|
||||||
onNavigate,
|
onNavigate,
|
||||||
|
|
@ -41,19 +42,23 @@ export default function Sidebar({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Navigation */}
|
{/* Navigation */}
|
||||||
<nav className="flex-1 p-4 space-y-1">
|
<nav className="flex-1 p-4 space-y-1 overflow-y-auto">
|
||||||
{navItems.map((item) => {
|
{navItems.map((item) => {
|
||||||
const Icon = item.icon;
|
const Icon = item.icon;
|
||||||
const isActive = currentPage === item.id;
|
const isActive = currentPage === item.id;
|
||||||
|
const isDoc = item.id === 'documentation';
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
key={item.id}
|
key={item.id}
|
||||||
onClick={() => onNavigate(item.id)}
|
onClick={() => onNavigate(item.id)}
|
||||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
|
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
|
||||||
isActive
|
isActive
|
||||||
? 'bg-primary-600/10 text-primary-400 border border-primary-500/20'
|
? isDoc
|
||||||
|
? 'bg-purple-600/10 text-purple-400 border border-purple-500/20'
|
||||||
|
: 'bg-primary-600/10 text-primary-400 border border-primary-500/20'
|
||||||
|
: isDoc
|
||||||
|
? 'text-purple-400/70 hover:text-purple-300 hover:bg-purple-500/10'
|
||||||
: 'text-gray-400 hover:text-gray-200 hover:bg-dark-800'
|
: 'text-gray-400 hover:text-gray-200 hover:bg-dark-800'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|
@ -63,7 +68,6 @@ export default function Sidebar({
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<div className="p-4 border-t border-dark-700 space-y-3">
|
<div className="p-4 border-t border-dark-700 space-y-3">
|
||||||
{/* WebSocket status */}
|
{/* WebSocket status */}
|
||||||
|
|
@ -80,7 +84,6 @@ export default function Sidebar({
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={onLogout}
|
onClick={onLogout}
|
||||||
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
|
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
|
||||||
|
|
|
||||||
|
|
@ -99,7 +99,7 @@ export default function DashboardPage({ apps }) {
|
||||||
<div className="flex items-center justify-between py-2 border-b border-dark-700">
|
<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-400">Serveur</span>
|
||||||
<span className="text-sm text-gray-200">
|
<span className="text-sm text-gray-200">
|
||||||
78.138.58.109 (Recette)
|
180.149.196.138 (Production)
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between py-2 border-b border-dark-700">
|
<div className="flex items-center justify-between py-2 border-b border-dark-700">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,420 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
BookOpen,
|
||||||
|
Server,
|
||||||
|
GitBranch,
|
||||||
|
LayoutDashboard,
|
||||||
|
Globe,
|
||||||
|
Database,
|
||||||
|
Shield,
|
||||||
|
ArrowRight,
|
||||||
|
ChevronDown,
|
||||||
|
ChevronUp,
|
||||||
|
ExternalLink,
|
||||||
|
Activity,
|
||||||
|
Cpu,
|
||||||
|
HardDrive,
|
||||||
|
Network,
|
||||||
|
CheckCircle,
|
||||||
|
Clock,
|
||||||
|
Zap,
|
||||||
|
Package,
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
/* ─────────────────────────────────────────────
|
||||||
|
Données de l'infrastructure
|
||||||
|
───────────────────────────────────────────── */
|
||||||
|
const RECETTE = {
|
||||||
|
label: 'RECETTE',
|
||||||
|
color: 'amber',
|
||||||
|
ip: '78.138.58.109',
|
||||||
|
os: 'Debian GNU/Linux 12',
|
||||||
|
cpu: '4 vCores',
|
||||||
|
ram: '8 Go',
|
||||||
|
disk: '147 Go',
|
||||||
|
infra: [
|
||||||
|
{
|
||||||
|
icon: GitBranch,
|
||||||
|
color: 'purple',
|
||||||
|
name: 'Gitea',
|
||||||
|
url: 'git.recette.santinova-soft.org',
|
||||||
|
desc: 'Dépôt Git — 4 repositories',
|
||||||
|
href: 'https://git.recette.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: LayoutDashboard,
|
||||||
|
color: 'blue',
|
||||||
|
name: 'Dashboard',
|
||||||
|
url: 'dashboard.recette.santinova-soft.org',
|
||||||
|
desc: 'Monitoring CPU / RAM / Disque',
|
||||||
|
href: 'https://dashboard.recette.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Globe,
|
||||||
|
color: 'teal',
|
||||||
|
name: 'Portail Applicatif',
|
||||||
|
url: 'portail.recette.santinova-soft.org',
|
||||||
|
desc: 'Vitrine centralisée des applications',
|
||||||
|
href: 'https://portail.recette.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
color: 'gray',
|
||||||
|
name: 'Traefik',
|
||||||
|
url: 'Reverse Proxy SSL',
|
||||||
|
desc: "Let's Encrypt — Routage dynamique",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
apps: [
|
||||||
|
{
|
||||||
|
icon: '🧾',
|
||||||
|
color: 'green',
|
||||||
|
name: 'Démat. Facturation DSI',
|
||||||
|
url: 'demat-facturation.recette.santinova-soft.org',
|
||||||
|
href: 'https://demat-facturation.recette.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '👁️',
|
||||||
|
color: 'indigo',
|
||||||
|
name: 'Veille Réglementaire',
|
||||||
|
url: 'veille.recette.santinova-soft.org',
|
||||||
|
href: 'https://veille.recette.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '🗺️',
|
||||||
|
color: 'cyan',
|
||||||
|
name: 'SONUM',
|
||||||
|
url: 'sonum.recette.santinova-soft.org',
|
||||||
|
desc: 'Cartographie solutions numériques FEHAP',
|
||||||
|
href: 'https://sonum.recette.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '👤',
|
||||||
|
color: 'pink',
|
||||||
|
name: 'Itinova Contacts',
|
||||||
|
url: 'contacts.recette.santinova-soft.org',
|
||||||
|
href: 'https://contacts.recette.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '🚗',
|
||||||
|
color: 'yellow',
|
||||||
|
name: 'Flotte Véhicules',
|
||||||
|
url: 'flotte.recette.santinova-soft.org',
|
||||||
|
href: 'https://flotte.recette.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '🎧',
|
||||||
|
color: 'orange',
|
||||||
|
name: 'Podcasts Itinova',
|
||||||
|
url: 'podcasts.recette.santinova-soft.org',
|
||||||
|
href: 'https://podcasts.recette.santinova-soft.org',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const PRODUCTION = {
|
||||||
|
label: 'PRODUCTION',
|
||||||
|
color: 'emerald',
|
||||||
|
ip: '180.149.196.138',
|
||||||
|
os: 'Debian GNU/Linux 12',
|
||||||
|
cpu: '8 vCores',
|
||||||
|
ram: '16 Go',
|
||||||
|
disk: '246 Go',
|
||||||
|
services: [
|
||||||
|
{
|
||||||
|
icon: GitBranch,
|
||||||
|
color: 'purple',
|
||||||
|
name: 'Gitea',
|
||||||
|
url: 'git.santinova-soft.org',
|
||||||
|
desc: 'Dépôt Git principal',
|
||||||
|
href: 'https://git.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: LayoutDashboard,
|
||||||
|
color: 'blue',
|
||||||
|
name: 'Dashboard',
|
||||||
|
url: 'dashboard.santinova-soft.org',
|
||||||
|
desc: 'Monitoring temps réel',
|
||||||
|
href: 'https://dashboard.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Globe,
|
||||||
|
color: 'teal',
|
||||||
|
name: 'Portail Applicatif',
|
||||||
|
url: 'portail.santinova-soft.org',
|
||||||
|
desc: 'Vitrine applicative production',
|
||||||
|
href: 'https://portail.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
color: 'gray',
|
||||||
|
name: 'Traefik',
|
||||||
|
url: 'Reverse Proxy SSL',
|
||||||
|
desc: "Let's Encrypt — Routage dynamique",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const CICD_STEPS = [
|
||||||
|
{ icon: GitBranch, label: 'Push code', desc: 'Développeur pousse sur Gitea' },
|
||||||
|
{ icon: Zap, label: 'Webhook', desc: 'Gitea déclenche le webhook' },
|
||||||
|
{ icon: Package, label: 'docker compose build', desc: 'Build de la nouvelle image' },
|
||||||
|
{ icon: Server, label: 'docker compose up -d', desc: 'Redémarrage du conteneur' },
|
||||||
|
{ icon: CheckCircle, label: 'Health check', desc: 'Vérification de disponibilité' },
|
||||||
|
];
|
||||||
|
|
||||||
|
/* ─────────────────────────────────────────────
|
||||||
|
Helpers de couleur
|
||||||
|
───────────────────────────────────────────── */
|
||||||
|
const colorMap = {
|
||||||
|
purple: 'border-purple-500/40 bg-purple-500/10 text-purple-300',
|
||||||
|
blue: 'border-blue-500/40 bg-blue-500/10 text-blue-300',
|
||||||
|
teal: 'border-teal-500/40 bg-teal-500/10 text-teal-300',
|
||||||
|
gray: 'border-gray-500/40 bg-gray-500/10 text-gray-300',
|
||||||
|
green: 'border-green-500/40 bg-green-500/10 text-green-300',
|
||||||
|
indigo: 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300',
|
||||||
|
cyan: 'border-cyan-500/40 bg-cyan-500/10 text-cyan-300',
|
||||||
|
pink: 'border-pink-500/40 bg-pink-500/10 text-pink-300',
|
||||||
|
yellow: 'border-yellow-500/40 bg-yellow-500/10 text-yellow-300',
|
||||||
|
orange: 'border-orange-500/40 bg-orange-500/10 text-orange-300',
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ─────────────────────────────────────────────
|
||||||
|
Composants
|
||||||
|
───────────────────────────────────────────── */
|
||||||
|
function ServerBadge({ env }) {
|
||||||
|
const isAmber = env.color === 'amber';
|
||||||
|
const borderColor = isAmber ? 'border-amber-500/30' : 'border-emerald-500/30';
|
||||||
|
const bgColor = isAmber ? 'bg-amber-500/5' : 'bg-emerald-500/5';
|
||||||
|
return (
|
||||||
|
<div className={`flex flex-wrap gap-4 p-3 rounded-xl border ${borderColor} ${bgColor} mb-5`}>
|
||||||
|
{[
|
||||||
|
{ icon: Server, label: env.ip },
|
||||||
|
{ icon: Cpu, label: env.cpu },
|
||||||
|
{ icon: Activity, label: env.ram + ' RAM' },
|
||||||
|
{ icon: HardDrive, label: env.disk + ' Disque' },
|
||||||
|
{ icon: Network, label: env.os },
|
||||||
|
].map(({ icon: Icon, label }) => (
|
||||||
|
<div key={label} className="flex items-center gap-1.5 text-xs text-gray-400">
|
||||||
|
<Icon className="w-3.5 h-3.5 text-gray-500" />
|
||||||
|
<span>{label}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ServiceCard({ item, withDb = false }) {
|
||||||
|
const cls = colorMap[item.color] || colorMap.gray;
|
||||||
|
const Icon = item.icon;
|
||||||
|
return (
|
||||||
|
<div className={`flex items-start gap-3 p-3 rounded-xl border ${cls} transition-all hover:scale-[1.01]`}>
|
||||||
|
<div className="mt-0.5 flex-shrink-0">
|
||||||
|
{typeof Icon === 'string' ? (
|
||||||
|
<span className="text-xl">{Icon}</span>
|
||||||
|
) : (
|
||||||
|
<Icon className="w-5 h-5" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="font-semibold text-sm text-white">{item.name}</span>
|
||||||
|
{item.href && (
|
||||||
|
<a
|
||||||
|
href={item.href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-gray-500 hover:text-gray-300 transition-colors"
|
||||||
|
>
|
||||||
|
<ExternalLink className="w-3 h-3" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-400 truncate">{item.url}</p>
|
||||||
|
{item.desc && <p className="text-xs text-gray-500 mt-0.5">{item.desc}</p>}
|
||||||
|
</div>
|
||||||
|
{withDb && (
|
||||||
|
<div className="flex items-center gap-1 text-xs text-gray-600 flex-shrink-0">
|
||||||
|
<Database className="w-3 h-3" />
|
||||||
|
<span>MySQL</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SectionTitle({ children, color = 'amber' }) {
|
||||||
|
const cls = color === 'amber' ? 'text-amber-400' : 'text-emerald-400';
|
||||||
|
return <h3 className={`text-xs font-bold uppercase tracking-widest ${cls} mb-3`}>{children}</h3>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─────────────────────────────────────────────
|
||||||
|
Page principale
|
||||||
|
───────────────────────────────────────────── */
|
||||||
|
export default function DocumentationPage() {
|
||||||
|
const [schemaOpen, setSchemaOpen] = useState(true);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8 pb-12">
|
||||||
|
{/* ── En-tête ── */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center shadow-lg shadow-blue-500/20">
|
||||||
|
<BookOpen className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-white">Documentation Infrastructure</h1>
|
||||||
|
<p className="text-sm text-gray-400">Architecture de déploiement Santinova — Recette & Production</p>
|
||||||
|
</div>
|
||||||
|
<div className="ml-auto flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20">
|
||||||
|
<Clock className="w-3.5 h-3.5 text-emerald-400" />
|
||||||
|
<span className="text-xs text-emerald-400">Mis à jour le 04 Mai 2026</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Schéma d'architecture ── */}
|
||||||
|
<div className="rounded-2xl border border-dark-700 bg-dark-900 overflow-hidden">
|
||||||
|
<button
|
||||||
|
onClick={() => setSchemaOpen((v) => !v)}
|
||||||
|
className="w-full flex items-center justify-between px-6 py-4 hover:bg-dark-800 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-8 h-8 rounded-lg bg-blue-600/20 flex items-center justify-center">
|
||||||
|
<Network className="w-4 h-4 text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<span className="font-semibold text-white">Schéma d'Architecture</span>
|
||||||
|
</div>
|
||||||
|
{schemaOpen ? (
|
||||||
|
<ChevronUp className="w-5 h-5 text-gray-400" />
|
||||||
|
) : (
|
||||||
|
<ChevronDown className="w-5 h-5 text-gray-400" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
{schemaOpen && (
|
||||||
|
<div className="px-6 pb-6">
|
||||||
|
<img
|
||||||
|
src="/infra_schema_v2.png"
|
||||||
|
alt="Schéma d'architecture infrastructure Santinova"
|
||||||
|
className="w-full rounded-xl border border-dark-700 shadow-2xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Grille Recette / CI-CD / Production ── */}
|
||||||
|
<div className="grid grid-cols-1 xl:grid-cols-[1fr_auto_1fr] gap-6">
|
||||||
|
|
||||||
|
{/* ── RECETTE ── */}
|
||||||
|
<div className="rounded-2xl border border-amber-500/30 bg-dark-900 p-6">
|
||||||
|
<div className="flex items-center gap-3 mb-4">
|
||||||
|
<div className="w-3 h-3 rounded-full bg-amber-400 shadow-lg shadow-amber-400/50" />
|
||||||
|
<h2 className="text-xl font-bold text-amber-400 tracking-wide">RECETTE</h2>
|
||||||
|
<span className="ml-auto text-xs text-gray-500 font-mono">78.138.58.109</span>
|
||||||
|
</div>
|
||||||
|
<ServerBadge env={RECETTE} />
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{/* Infra de base */}
|
||||||
|
<div>
|
||||||
|
<SectionTitle color="amber">Infrastructure de base</SectionTitle>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{RECETTE.infra.map((item) => (
|
||||||
|
<ServiceCard key={item.name} item={item} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Applications */}
|
||||||
|
<div>
|
||||||
|
<SectionTitle color="amber">Applications déployées</SectionTitle>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{RECETTE.apps.map((item) => (
|
||||||
|
<ServiceCard key={item.name} item={item} withDb />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── CI/CD Pipeline ── */}
|
||||||
|
<div className="flex flex-col items-center justify-center gap-3 px-4 xl:px-2 py-6">
|
||||||
|
<span className="text-xs font-bold uppercase tracking-widest text-blue-400 mb-2">CI/CD</span>
|
||||||
|
{CICD_STEPS.map((step, i) => {
|
||||||
|
const Icon = step.icon;
|
||||||
|
return (
|
||||||
|
<React.Fragment key={step.label}>
|
||||||
|
<div className="flex flex-col items-center gap-1 group">
|
||||||
|
<div className="w-10 h-10 rounded-xl bg-blue-600/20 border border-blue-500/30 flex items-center justify-center group-hover:bg-blue-600/30 transition-colors">
|
||||||
|
<Icon className="w-5 h-5 text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-gray-400 text-center max-w-[80px] leading-tight">{step.label}</span>
|
||||||
|
</div>
|
||||||
|
{i < CICD_STEPS.length - 1 && (
|
||||||
|
<div className="w-px h-4 bg-gradient-to-b from-blue-500/50 to-blue-500/10" />
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
<div className="mt-4 flex items-center gap-2 px-3 py-2 rounded-xl bg-blue-600/10 border border-blue-500/20">
|
||||||
|
<ArrowRight className="w-4 h-4 text-blue-400" />
|
||||||
|
<span className="text-xs text-blue-300 font-semibold whitespace-nowrap">Promotion → PROD</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── PRODUCTION ── */}
|
||||||
|
<div className="rounded-2xl border border-emerald-500/30 bg-dark-900 p-6">
|
||||||
|
<div className="flex items-center gap-3 mb-4">
|
||||||
|
<div className="w-3 h-3 rounded-full bg-emerald-400 shadow-lg shadow-emerald-400/50" />
|
||||||
|
<h2 className="text-xl font-bold text-emerald-400 tracking-wide">PRODUCTION</h2>
|
||||||
|
<span className="ml-auto text-xs text-gray-500 font-mono">180.149.196.138</span>
|
||||||
|
</div>
|
||||||
|
<ServerBadge env={PRODUCTION} />
|
||||||
|
|
||||||
|
<SectionTitle color="emerald">Services actifs</SectionTitle>
|
||||||
|
<div className="space-y-2 mb-4">
|
||||||
|
{PRODUCTION.services.map((item) => (
|
||||||
|
<ServiceCard key={item.name} item={item} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Carte "Applications à venir" */}
|
||||||
|
<div className="flex items-center gap-3 p-3 rounded-xl border border-dashed border-gray-600/40 bg-gray-500/5">
|
||||||
|
<Package className="w-5 h-5 text-gray-500" />
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-gray-400">Applications à venir</p>
|
||||||
|
<p className="text-xs text-gray-600">Déploiement progressif via CI/CD</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Badge metrics-collector */}
|
||||||
|
<div className="mt-4 flex items-center gap-2 px-3 py-2 rounded-lg bg-emerald-500/5 border border-emerald-500/20">
|
||||||
|
<Activity className="w-3.5 h-3.5 text-emerald-400" />
|
||||||
|
<span className="text-xs text-emerald-400">metrics-collector · systemd · actif</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Légende technologique ── */}
|
||||||
|
<div className="rounded-2xl border border-dark-700 bg-dark-900 p-6">
|
||||||
|
<h3 className="text-sm font-bold text-white mb-4">Stack Technologique</h3>
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||||
|
{[
|
||||||
|
{ emoji: '🐳', label: 'Docker', desc: 'Conteneurisation' },
|
||||||
|
{ emoji: '🔒', label: 'HTTPS', desc: "Let's Encrypt SSL" },
|
||||||
|
{ emoji: '🗄️', label: 'MySQL 8.0', desc: 'Base de données' },
|
||||||
|
{ emoji: '🔀', label: 'Traefik', desc: 'Reverse Proxy' },
|
||||||
|
].map((t) => (
|
||||||
|
<div
|
||||||
|
key={t.label}
|
||||||
|
className="flex items-center gap-3 p-3 rounded-xl bg-dark-800 border border-dark-700"
|
||||||
|
>
|
||||||
|
<span className="text-2xl">{t.emoji}</span>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-white">{t.label}</p>
|
||||||
|
<p className="text-xs text-gray-500">{t.desc}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,327 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Table, RefreshCw, GitBranch, CheckCircle, XCircle, ExternalLink, Tag, AlertCircle } from 'lucide-react';
|
||||||
|
import api from '../utils/api';
|
||||||
|
|
||||||
|
const APPS_CONFIG = [
|
||||||
|
{
|
||||||
|
id: 'itinova-contacts',
|
||||||
|
name: 'Itinova Contacts',
|
||||||
|
repoName: 'itinova-contacts',
|
||||||
|
urlRecette: 'https://contacts.recette.santinova-soft.org',
|
||||||
|
urlProd: 'https://contacts.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'itinova-podcasts',
|
||||||
|
name: 'Itinova Podcasts',
|
||||||
|
repoName: 'itinova-podcasts',
|
||||||
|
urlRecette: 'https://podcasts.recette.santinova-soft.org',
|
||||||
|
urlProd: 'https://podcasts.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'veille-reglementaire',
|
||||||
|
name: 'Veille Réglementaire',
|
||||||
|
repoName: 'veille-reglementaire',
|
||||||
|
urlRecette: 'https://veille.recette.santinova-soft.org',
|
||||||
|
urlProd: 'https://veille.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'itinova-vehicle-exchange',
|
||||||
|
name: 'Itinova Gestion de Flotte',
|
||||||
|
repoName: 'itinova-vehicle-exchange',
|
||||||
|
urlRecette: 'https://flotte.recette.santinova-soft.org',
|
||||||
|
urlProd: 'https://flotte.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'sonum',
|
||||||
|
name: 'SONUM',
|
||||||
|
repoName: 'sonum',
|
||||||
|
urlRecette: 'https://sonum.recette.santinova-soft.org',
|
||||||
|
urlProd: 'https://sonum.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'demat-facturation-dsi',
|
||||||
|
name: 'Démat. Facturation DSI',
|
||||||
|
repoName: 'demat-facturation-dsi',
|
||||||
|
urlRecette: 'https://demat-facturation.recette.santinova-soft.org',
|
||||||
|
urlProd: 'https://demat-facturation.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'facturation-santinova',
|
||||||
|
name: 'Facturation Santinova',
|
||||||
|
repoName: 'facturation-santinova',
|
||||||
|
urlRecette: 'https://facturation.recette.santinova-soft.org',
|
||||||
|
urlProd: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'formation-manager-itinova',
|
||||||
|
name: 'Formation Manager',
|
||||||
|
repoName: 'formation-manager-itinova',
|
||||||
|
urlRecette: 'https://formation.recette.santinova-soft.org',
|
||||||
|
urlProd: 'https://formations.itinova.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'portail-santinova',
|
||||||
|
name: 'Portail Applicatif',
|
||||||
|
repoName: 'portail-santinova',
|
||||||
|
urlRecette: 'https://portail.recette.santinova-soft.org',
|
||||||
|
urlProd: 'https://portail.santinova-soft.org',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'manus-dashboard',
|
||||||
|
name: 'Dashboard Manus',
|
||||||
|
repoName: 'manus-dashboard',
|
||||||
|
urlRecette: 'https://dashboard.recette.santinova-soft.org',
|
||||||
|
urlProd: 'https://dashboard.santinova-soft.org',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function VersionBadge({ version, loading }) {
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-700 text-gray-400 animate-pulse">
|
||||||
|
<Tag className="w-3 h-3" />
|
||||||
|
Chargement...
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (!version) {
|
||||||
|
return (
|
||||||
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500">
|
||||||
|
<AlertCircle className="w-3 h-3" />
|
||||||
|
N/A
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-blue-900/40 text-blue-300 border border-blue-700/40">
|
||||||
|
<Tag className="w-3 h-3" />
|
||||||
|
{version}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function RepoBadge({ present, url, label }) {
|
||||||
|
if (!present) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<XCircle className="w-4 h-4 text-red-500 flex-shrink-0" />
|
||||||
|
<span className="text-gray-500 text-xs">Absent</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-0.5">
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0" />
|
||||||
|
<a
|
||||||
|
href={url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-xs text-primary-400 hover:text-primary-300 hover:underline flex items-center gap-1 truncate max-w-[180px]"
|
||||||
|
title={url}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
<ExternalLink className="w-3 h-3 flex-shrink-0" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function InventairePage() {
|
||||||
|
const [inventory, setInventory] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [lastUpdate, setLastUpdate] = useState(null);
|
||||||
|
|
||||||
|
const fetchInventory = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await api.get('/inventory');
|
||||||
|
setInventory(res.data);
|
||||||
|
setLastUpdate(new Date());
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Erreur chargement inventaire:', err);
|
||||||
|
// Fallback : construire l'inventaire depuis la config statique
|
||||||
|
const fallback = APPS_CONFIG.map((app) => ({
|
||||||
|
...app,
|
||||||
|
repoRecette: { present: false, url: null, version: null },
|
||||||
|
repoProd: { present: false, url: null, version: null },
|
||||||
|
}));
|
||||||
|
setInventory(fallback);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Auto-refresh toutes les 5 minutes
|
||||||
|
useEffect(() => {
|
||||||
|
fetchInventory();
|
||||||
|
const interval = setInterval(fetchInventory, 5 * 60 * 1000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
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">
|
||||||
|
<Table className="w-7 h-7 text-emerald-400" />
|
||||||
|
Inventaire des Applications
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-400 mt-1">
|
||||||
|
État des dépôts Git et versions déployées par environnement
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{lastUpdate && (
|
||||||
|
<span className="text-xs text-gray-500">
|
||||||
|
Mis à jour : {lastUpdate.toLocaleTimeString('fr-FR')}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={fetchInventory}
|
||||||
|
disabled={loading}
|
||||||
|
className="btn-secondary flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||||
|
Rafraîchir
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Légende */}
|
||||||
|
<div className="flex items-center gap-6 text-xs text-gray-400">
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||||
|
Dépôt présent
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<XCircle className="w-4 h-4 text-red-500" />
|
||||||
|
Dépôt absent
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<Tag className="w-4 h-4 text-blue-400" />
|
||||||
|
Version (dernier commit)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tableau */}
|
||||||
|
<div className="card overflow-hidden">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr className="border-b border-dark-700">
|
||||||
|
<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-orange-400 uppercase tracking-wider" colSpan={2}>
|
||||||
|
<div className="flex items-center justify-center gap-2">
|
||||||
|
<GitBranch className="w-4 h-4" />
|
||||||
|
Recette
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th className="text-center px-4 py-3 text-xs font-semibold text-green-400 uppercase tracking-wider" colSpan={2}>
|
||||||
|
<div className="flex items-center justify-center gap-2">
|
||||||
|
<GitBranch className="w-4 h-4" />
|
||||||
|
Production
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr className="border-b border-dark-700 bg-dark-800/50">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-dark-700">
|
||||||
|
{loading && inventory.length === 0
|
||||||
|
? APPS_CONFIG.map((app) => (
|
||||||
|
<tr key={app.id} className="hover:bg-dark-800/30 transition-colors">
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<span className="text-sm font-medium text-white">{app.name}</span>
|
||||||
|
</td>
|
||||||
|
{[...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>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
: inventory.map((app) => (
|
||||||
|
<tr key={app.id} className="hover:bg-dark-800/30 transition-colors">
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-sm font-medium text-white">{app.name}</span>
|
||||||
|
<span className="text-xs text-gray-500 mt-0.5">{app.repoName}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
{/* Recette - Dépôt */}
|
||||||
|
<td className="px-3 py-3">
|
||||||
|
<RepoBadge
|
||||||
|
present={app.repoRecette?.present}
|
||||||
|
url={app.repoRecette?.url}
|
||||||
|
label={`git.recette/…/${app.repoName}`}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
{/* Recette - Version */}
|
||||||
|
<td className="px-3 py-3 text-center">
|
||||||
|
<VersionBadge
|
||||||
|
version={app.repoRecette?.version}
|
||||||
|
loading={loading}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
{/* Prod - Dépôt */}
|
||||||
|
<td className="px-3 py-3">
|
||||||
|
<RepoBadge
|
||||||
|
present={app.repoProd?.present}
|
||||||
|
url={app.repoProd?.url}
|
||||||
|
label={`git.santinova/…/${app.repoName}`}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
{/* Prod - Version */}
|
||||||
|
<td className="px-3 py-3 text-center">
|
||||||
|
<VersionBadge
|
||||||
|
version={app.repoProd?.version}
|
||||||
|
loading={loading}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -130,7 +130,7 @@ export default function LoginPage({ onLogin }) {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p className="text-center text-gray-600 text-sm mt-6">
|
<p className="text-center text-gray-600 text-sm mt-6">
|
||||||
Santinova Soft — Serveur de recette
|
Santinova Soft — Serveur de production
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue