Compare commits
3 Commits
8092337ccd
...
b4647580fb
| Author | SHA1 | Date | |
|---|---|---|---|
|
b4647580fb | ||
|
|
0b59245f76 | ||
|
|
9b795612e4 |
@@ -1,7 +0,0 @@
|
||||
node_modules
|
||||
.git
|
||||
.gitignore
|
||||
README.md
|
||||
*.log
|
||||
frontend/node_modules
|
||||
backend/node_modules
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -2,4 +2,3 @@ node_modules/
|
||||
dist/
|
||||
.env
|
||||
*.log
|
||||
.DS_Store
|
||||
|
||||
43
Dockerfile
43
Dockerfile
@@ -1,43 +0,0 @@
|
||||
# Stage 1: Build frontend
|
||||
FROM node:20-alpine AS frontend-builder
|
||||
|
||||
WORKDIR /app/frontend
|
||||
|
||||
# Copy frontend package files
|
||||
COPY frontend/package.json frontend/pnpm-lock.yaml* ./
|
||||
RUN npm install
|
||||
|
||||
# Copy frontend source
|
||||
COPY frontend/ ./
|
||||
|
||||
# Build frontend
|
||||
RUN npm run build
|
||||
|
||||
# Stage 2: Production
|
||||
FROM node:20-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Install docker CLI for docker compose commands
|
||||
RUN apk add --no-cache docker-cli docker-cli-compose git curl unzip bash openssh-client
|
||||
|
||||
# Configure git global identity to avoid "Author identity unknown" errors
|
||||
RUN git config --global user.email "admin@santinova-soft.org" && \
|
||||
git config --global user.name "Manus Dashboard"
|
||||
|
||||
# Copy backend
|
||||
COPY backend/package.json ./backend/
|
||||
WORKDIR /app/backend
|
||||
RUN npm install --production
|
||||
|
||||
COPY backend/ ./
|
||||
|
||||
# Copy built frontend
|
||||
WORKDIR /app
|
||||
COPY --from=frontend-builder /app/frontend/dist ./frontend/dist
|
||||
|
||||
WORKDIR /app/backend
|
||||
|
||||
EXPOSE 3001
|
||||
|
||||
CMD ["node", "src/index.js"]
|
||||
32
README.md
32
README.md
@@ -1,32 +0,0 @@
|
||||
# Manus Dashboard
|
||||
|
||||
Tableau de bord de gestion des applications Manus, déployé sur le serveur de recette.
|
||||
|
||||
## Fonctionnalités
|
||||
|
||||
- Liste des applications déployées avec état en temps réel
|
||||
- Health checks HTTP périodiques avec indicateurs visuels
|
||||
- Redéploiement en un clic (docker compose build + up)
|
||||
- Logs de déploiement et logs conteneurs
|
||||
- Intégration Gitea (commits, branches, dépôts)
|
||||
- Authentification par login/mot de passe
|
||||
- Interface moderne avec TailwindCSS
|
||||
|
||||
## Stack technique
|
||||
|
||||
- **Backend** : Node.js / Express
|
||||
- **Frontend** : React / TailwindCSS / Vite
|
||||
- **Conteneurisation** : Docker / Docker Compose
|
||||
- **Reverse Proxy** : Traefik avec SSL Let's Encrypt
|
||||
|
||||
## Déploiement
|
||||
|
||||
```bash
|
||||
cd /opt/manus-deploy/apps/manus-dashboard
|
||||
docker compose build --no-cache && docker compose up -d
|
||||
```
|
||||
|
||||
## Accès
|
||||
|
||||
- URL : https://dashboard.santinova-soft.org
|
||||
- Login : adminItinova / Itinova69!
|
||||
10
app.json
Normal file
10
app.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"id": "manus-dashboard",
|
||||
"name": "Dashboard Production",
|
||||
"category": "INFRA",
|
||||
"urls": {"recette": "https://dashboard.recette.santinova-soft.org", "prod": "https://dashboard.santinova-soft.org"},
|
||||
"containerName": "manus-dashboard",
|
||||
"image": "images/dashboard.png",
|
||||
"giteaRepo": "manus-dashboard",
|
||||
"giteaOwner": "manus-admin"
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
{
|
||||
"name": "manus-dashboard-backend",
|
||||
"version": "1.0.0",
|
||||
"description": "Backend API for Manus Dashboard",
|
||||
"main": "src/index.js",
|
||||
"scripts": {
|
||||
"start": "node src/index.js",
|
||||
"dev": "nodemon src/index.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "^4.21.0",
|
||||
"cors": "^2.8.5",
|
||||
"helmet": "^7.1.0",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"axios": "^1.7.0",
|
||||
"dockerode": "^4.0.2",
|
||||
"ws": "^8.18.0",
|
||||
"node-cron": "^3.0.3",
|
||||
"express-rate-limit": "^7.4.0",
|
||||
"cookie-parser": "^1.4.6",
|
||||
"morgan": "^1.10.0",
|
||||
"multer": "^1.4.5-lts.1",
|
||||
"adm-zip": "^0.5.10",
|
||||
"ssh2": "^1.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.1.0"
|
||||
}
|
||||
}
|
||||
@@ -1,736 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const fsp = require('fs/promises');
|
||||
const path = require('path');
|
||||
const { exec, execSync } = require('child_process');
|
||||
const config = require('./config');
|
||||
const { createRepo, giteaClient } = require('./gitea');
|
||||
|
||||
// ============ TEMPLATES DOCKERFILE ============
|
||||
|
||||
const DOCKERFILE_TEMPLATES = {
|
||||
nodejs: (port) => `# ── Stage 1: Build ──────────────────────────────────────────────
|
||||
FROM node:22-slim AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy lockfiles for better layer caching
|
||||
COPY package.json pnpm-lock.yaml* yarn.lock* ./
|
||||
|
||||
# Copy patches directory if it exists (needed by pnpm before install)
|
||||
COPY patches/ ./patches/
|
||||
|
||||
# Detect package manager and install ALL dependencies (including devDependencies for build)
|
||||
RUN if [ -f pnpm-lock.yaml ]; then \\
|
||||
corepack enable && corepack prepare pnpm@latest --activate && \\
|
||||
pnpm install --no-frozen-lockfile; \\
|
||||
elif [ -f yarn.lock ]; then \\
|
||||
yarn install; \\
|
||||
else \\
|
||||
npm install --legacy-peer-deps; \\
|
||||
fi
|
||||
|
||||
# Copy source code
|
||||
COPY . .
|
||||
|
||||
# Build the application (frontend + backend if applicable)
|
||||
RUN if [ -f package.json ] && grep -q '"build"' package.json; then \\
|
||||
if [ -f pnpm-lock.yaml ]; then \\
|
||||
pnpm run build; \\
|
||||
elif [ -f yarn.lock ]; then \\
|
||||
yarn build; \\
|
||||
else \\
|
||||
npm run build; \\
|
||||
fi; \\
|
||||
fi
|
||||
|
||||
# ── Stage 2: Production ─────────────────────────────────────────
|
||||
FROM node:22-slim
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy package files
|
||||
COPY package.json pnpm-lock.yaml* yarn.lock* ./
|
||||
|
||||
# Copy patches directory if it exists (needed by pnpm for install)
|
||||
COPY patches/ ./patches/
|
||||
|
||||
# Install ALL dependencies (some projects import dev deps at runtime like vite)
|
||||
RUN if [ -f pnpm-lock.yaml ]; then \\
|
||||
corepack enable && corepack prepare pnpm@latest --activate && \\
|
||||
pnpm install --no-frozen-lockfile; \\
|
||||
elif [ -f yarn.lock ]; then \\
|
||||
yarn install; \\
|
||||
else \\
|
||||
npm install --legacy-peer-deps; \\
|
||||
fi
|
||||
|
||||
# Copy built artifacts from builder
|
||||
COPY --from=builder /app/dist ./dist
|
||||
|
||||
# Copy drizzle migrations if they exist
|
||||
COPY drizzle/ ./drizzle/
|
||||
COPY drizzle.config.ts* ./
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV PORT=\${port}
|
||||
EXPOSE \${port}
|
||||
|
||||
# Start the application
|
||||
CMD if grep -q '"start"' package.json; then \\
|
||||
npm start; \\
|
||||
elif [ -f dist/index.js ]; then \\
|
||||
node dist/index.js; \\
|
||||
else \\
|
||||
node index.js; \\
|
||||
fi
|
||||
`,
|
||||
|
||||
'nodejs-next': (port) => `# ── Stage 1: Build ──────────────────────────────────────────────
|
||||
FROM node:22-slim AS builder
|
||||
|
||||
WORKDIR /app
|
||||
COPY package.json pnpm-lock.yaml* yarn.lock* ./
|
||||
RUN if [ -f pnpm-lock.yaml ]; then \\
|
||||
corepack enable && corepack prepare pnpm@latest --activate && \\
|
||||
pnpm install --no-frozen-lockfile; \\
|
||||
elif [ -f yarn.lock ]; then \\
|
||||
yarn install; \\
|
||||
else \\
|
||||
npm install --legacy-peer-deps; \\
|
||||
fi
|
||||
COPY . .
|
||||
RUN if [ -f pnpm-lock.yaml ]; then pnpm run build; \\
|
||||
elif [ -f yarn.lock ]; then yarn build; \\
|
||||
else npm run build; fi
|
||||
|
||||
# ── Stage 2: Production ─────────────────────────────────────────
|
||||
FROM node:22-slim
|
||||
WORKDIR /app
|
||||
COPY --from=builder /app/.next ./.next
|
||||
COPY --from=builder /app/node_modules ./node_modules
|
||||
COPY --from=builder /app/package.json ./
|
||||
COPY --from=builder /app/public ./public
|
||||
|
||||
ENV NODE_ENV=production
|
||||
EXPOSE \${port}
|
||||
|
||||
CMD ["npm", "start"]
|
||||
`,
|
||||
|
||||
python: (port) => `FROM python:3.12-slim
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY requirements.txt ./
|
||||
RUN pip install --no-cache-dir -r requirements.txt
|
||||
|
||||
COPY . .
|
||||
|
||||
EXPOSE \${port}
|
||||
|
||||
CMD ["python", "app.py"]
|
||||
`,
|
||||
|
||||
'python-django': (port) => `FROM python:3.12-slim
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY requirements.txt ./
|
||||
RUN pip install --no-cache-dir -r requirements.txt
|
||||
|
||||
COPY . .
|
||||
|
||||
RUN python manage.py collectstatic --noinput
|
||||
|
||||
EXPOSE \${port}
|
||||
|
||||
CMD ["gunicorn", "--bind", "0.0.0.0:\${port}", "config.wsgi:application"]
|
||||
`,
|
||||
|
||||
'python-flask': (port) => `FROM python:3.12-slim
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY requirements.txt ./
|
||||
RUN pip install --no-cache-dir -r requirements.txt
|
||||
RUN pip install gunicorn
|
||||
|
||||
COPY . .
|
||||
|
||||
EXPOSE \${port}
|
||||
|
||||
CMD ["gunicorn", "--bind", "0.0.0.0:\${port}", "app:app"]
|
||||
`,
|
||||
|
||||
php: (port) => `FROM php:8.3-apache
|
||||
|
||||
RUN a2enmod rewrite
|
||||
RUN docker-php-ext-install pdo pdo_mysql mysqli
|
||||
|
||||
COPY . /var/www/html/
|
||||
|
||||
RUN chown -R www-data:www-data /var/www/html
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["apache2-foreground"]
|
||||
`,
|
||||
|
||||
'php-laravel': (port) => `FROM php:8.3-fpm
|
||||
|
||||
RUN apt-get update && apt-get install -y \\
|
||||
git curl zip unzip libpng-dev libonig-dev libxml2-dev \\
|
||||
&& docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd
|
||||
|
||||
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
|
||||
|
||||
WORKDIR /var/www
|
||||
|
||||
COPY . .
|
||||
|
||||
RUN composer install --no-dev --optimize-autoloader
|
||||
RUN php artisan config:cache
|
||||
|
||||
EXPOSE \${port}
|
||||
|
||||
CMD ["php-fpm"]
|
||||
`,
|
||||
|
||||
static: () => `FROM nginx:alpine
|
||||
|
||||
COPY . /usr/share/nginx/html/
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
`,
|
||||
|
||||
'static-react': () => `FROM node:22-slim AS builder
|
||||
|
||||
WORKDIR /app
|
||||
COPY package.json pnpm-lock.yaml* yarn.lock* ./
|
||||
RUN if [ -f pnpm-lock.yaml ]; then \\
|
||||
corepack enable && corepack prepare pnpm@latest --activate && \\
|
||||
pnpm install --no-frozen-lockfile; \\
|
||||
elif [ -f yarn.lock ]; then \\
|
||||
yarn install; \\
|
||||
else \\
|
||||
npm install --legacy-peer-deps; \\
|
||||
fi
|
||||
COPY . .
|
||||
RUN if [ -f pnpm-lock.yaml ]; then pnpm run build; \\
|
||||
elif [ -f yarn.lock ]; then yarn build; \\
|
||||
else npm run build; fi
|
||||
|
||||
FROM nginx:alpine
|
||||
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
`,
|
||||
};
|
||||
|
||||
// ============ TEMPLATES DOCKER-COMPOSE ============
|
||||
|
||||
function generateDockerCompose(appConfig) {
|
||||
const { appId, subdomain, stack, port, needsDb, dbType } = appConfig;
|
||||
const domain = `${subdomain}.recette.santinova-soft.org`;
|
||||
const containerPort = getContainerPort(stack, port);
|
||||
|
||||
let compose = `services:
|
||||
app:
|
||||
build:
|
||||
context: ./src
|
||||
dockerfile: Dockerfile
|
||||
container_name: ${appId}
|
||||
restart: unless-stopped
|
||||
networks:
|
||||
- web`;
|
||||
|
||||
// Ajouter le réseau interne si base de données
|
||||
if (needsDb) {
|
||||
compose += `
|
||||
- ${appId}-internal`;
|
||||
}
|
||||
|
||||
// Variables d'environnement
|
||||
compose += `
|
||||
environment:
|
||||
- NODE_ENV=production`;
|
||||
|
||||
if (needsDb) {
|
||||
compose += `
|
||||
- DATABASE_HOST=${appId}-db
|
||||
- DATABASE_PORT=${dbType === 'postgres' ? '5432' : '3306'}
|
||||
- DATABASE_NAME=${appId.replace(/-/g, '_')}
|
||||
- DATABASE_USER=app_user
|
||||
- DATABASE_PASSWORD=AppPassword2026!
|
||||
- DB_HOST=${appId}-db
|
||||
- DB_PORT=${dbType === 'postgres' ? '5432' : '3306'}
|
||||
- DB_NAME=${appId.replace(/-/g, '_')}
|
||||
- DB_USER=app_user
|
||||
- DB_PASSWORD=AppPassword2026!
|
||||
- MYSQL_HOST=${appId}-db
|
||||
- MYSQL_DATABASE=${appId.replace(/-/g, '_')}
|
||||
- MYSQL_USER=app_user
|
||||
- MYSQL_PASSWORD=AppPassword2026!`;
|
||||
}
|
||||
|
||||
compose += `
|
||||
labels:
|
||||
- "traefik.enable=true"
|
||||
- "traefik.http.routers.${appId}.rule=Host(\`${domain}\`)"
|
||||
- "traefik.http.routers.${appId}.entrypoints=websecure"
|
||||
- "traefik.http.routers.${appId}.tls=true"
|
||||
- "traefik.http.routers.${appId}.tls.certresolver=letsencrypt"
|
||||
- "traefik.http.routers.${appId}.service=${appId}-svc"
|
||||
- "traefik.http.services.${appId}-svc.loadbalancer.server.port=${containerPort}"
|
||||
- "traefik.docker.network=web"`;
|
||||
|
||||
// Ajouter la base de données si nécessaire
|
||||
if (needsDb) {
|
||||
const dbName = appId.replace(/-/g, '_');
|
||||
|
||||
if (dbType === 'postgres') {
|
||||
compose += `
|
||||
|
||||
db:
|
||||
image: postgres:16-alpine
|
||||
container_name: ${appId}-db
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
- POSTGRES_DB=${dbName}
|
||||
- POSTGRES_USER=app_user
|
||||
- POSTGRES_PASSWORD=AppPassword2026!
|
||||
volumes:
|
||||
- ${appId}-db-data:/var/lib/postgresql/data
|
||||
networks:
|
||||
- ${appId}-internal
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "pg_isready -U app_user -d ${dbName}"]
|
||||
interval: 10s
|
||||
timeout: 5s
|
||||
retries: 5`;
|
||||
} else {
|
||||
compose += `
|
||||
|
||||
db:
|
||||
image: mysql:8.0
|
||||
container_name: ${appId}-db
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
- MYSQL_ROOT_PASSWORD=RootPassword2026!
|
||||
- MYSQL_DATABASE=${dbName}
|
||||
- MYSQL_USER=app_user
|
||||
- MYSQL_PASSWORD=AppPassword2026!
|
||||
volumes:
|
||||
- ${appId}-db-data:/var/lib/mysql
|
||||
networks:
|
||||
- ${appId}-internal
|
||||
healthcheck:
|
||||
test: ["CMD", "mysqladmin", "ping", "-h", "localhost", "-u", "root", "-pRootPassword2026!"]
|
||||
interval: 10s
|
||||
timeout: 5s
|
||||
retries: 5`;
|
||||
}
|
||||
}
|
||||
|
||||
// Dépendance app -> db
|
||||
if (needsDb) {
|
||||
// Insert depends_on before labels
|
||||
const appSection = compose.indexOf(' labels:');
|
||||
const dependsOn = ` depends_on:
|
||||
db:
|
||||
condition: service_healthy
|
||||
`;
|
||||
compose = compose.slice(0, appSection) + dependsOn + compose.slice(appSection);
|
||||
}
|
||||
|
||||
// Réseaux
|
||||
compose += `
|
||||
|
||||
networks:
|
||||
web:
|
||||
external: true`;
|
||||
|
||||
if (needsDb) {
|
||||
compose += `
|
||||
${appId}-internal:
|
||||
driver: bridge`;
|
||||
}
|
||||
|
||||
// Volumes
|
||||
if (needsDb) {
|
||||
compose += `
|
||||
|
||||
volumes:
|
||||
${appId}-db-data:`;
|
||||
}
|
||||
|
||||
compose += '\n';
|
||||
|
||||
return compose;
|
||||
}
|
||||
|
||||
function getContainerPort(stack, customPort) {
|
||||
if (customPort) return customPort;
|
||||
const defaults = {
|
||||
nodejs: 3000,
|
||||
'nodejs-next': 3000,
|
||||
python: 5000,
|
||||
'python-django': 8000,
|
||||
'python-flask': 5000,
|
||||
php: 80,
|
||||
'php-laravel': 9000,
|
||||
static: 80,
|
||||
'static-react': 80,
|
||||
};
|
||||
return defaults[stack] || 3000;
|
||||
}
|
||||
|
||||
// ============ APPS PERSISTENCE ============
|
||||
|
||||
const APPS_FILE = path.join(config.appsBasePath, '.dashboard-apps.json');
|
||||
|
||||
function loadDynamicApps() {
|
||||
try {
|
||||
if (fs.existsSync(APPS_FILE)) {
|
||||
const data = fs.readFileSync(APPS_FILE, 'utf-8');
|
||||
return JSON.parse(data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement apps dynamiques:', err.message);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
function saveDynamicApps(apps) {
|
||||
try {
|
||||
fs.writeFileSync(APPS_FILE, JSON.stringify(apps, null, 2), 'utf-8');
|
||||
} catch (err) {
|
||||
console.error('Erreur sauvegarde apps dynamiques:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function addDynamicApp(appDef) {
|
||||
const apps = loadDynamicApps();
|
||||
// Éviter les doublons
|
||||
const existing = apps.findIndex((a) => a.id === appDef.id);
|
||||
if (existing >= 0) {
|
||||
apps[existing] = appDef;
|
||||
} else {
|
||||
apps.push(appDef);
|
||||
}
|
||||
saveDynamicApps(apps);
|
||||
|
||||
// Ajouter aussi à config.apps en mémoire
|
||||
const existingInConfig = config.apps.findIndex((a) => a.id === appDef.id);
|
||||
if (existingInConfig >= 0) {
|
||||
config.apps[existingInConfig] = appDef;
|
||||
} else {
|
||||
config.apps.push(appDef);
|
||||
}
|
||||
}
|
||||
|
||||
function initDynamicApps() {
|
||||
// 1. Charger les apps depuis .dashboard-apps.json (legacy)
|
||||
const dynamicApps = loadDynamicApps();
|
||||
for (const app of dynamicApps) {
|
||||
const existingInConfig = config.apps.findIndex((a) => a.id === app.id);
|
||||
if (existingInConfig < 0) {
|
||||
config.apps.push(app);
|
||||
}
|
||||
}
|
||||
// 2. Scanner les dossiers app.json (découverte automatique)
|
||||
try {
|
||||
const appsBasePath = config.appsBasePath || process.env.APPS_BASE_PATH || '/opt/manus-deploy/apps';
|
||||
const entries = fs.readdirSync(appsBasePath, { withFileTypes: true });
|
||||
let scanned = 0;
|
||||
for (const entry of entries) {
|
||||
if (!entry.isDirectory()) continue;
|
||||
const appJsonPath = path.join(appsBasePath, entry.name, 'app.json');
|
||||
if (!fs.existsSync(appJsonPath)) continue;
|
||||
try {
|
||||
const appDef = JSON.parse(fs.readFileSync(appJsonPath, 'utf-8'));
|
||||
if (!appDef.id) continue;
|
||||
const existingInConfig = config.apps.findIndex((a) => a.id === appDef.id);
|
||||
if (existingInConfig < 0) {
|
||||
config.apps.push(appDef);
|
||||
scanned++;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`Erreur lecture app.json dans ${entry.name}:`, e.message);
|
||||
}
|
||||
}
|
||||
console.log(`Apps découvertes via app.json: ${scanned}`);
|
||||
} catch (err) {
|
||||
console.error('Erreur scan app.json:', err.message);
|
||||
}
|
||||
console.log(`Total apps chargées: ${config.apps.length}`);
|
||||
}
|
||||
|
||||
// ============ CREATION D'APPLICATION ============
|
||||
|
||||
async function createApplication(params, logCallback) {
|
||||
const {
|
||||
name,
|
||||
description,
|
||||
subdomain,
|
||||
stack,
|
||||
port,
|
||||
needsDb,
|
||||
dbType,
|
||||
sourceType, // 'zip' or 'gitea'
|
||||
giteaRepoUrl, // URL du repo Gitea existant
|
||||
zipFilePath, // Chemin du fichier ZIP uploadé
|
||||
} = params;
|
||||
|
||||
const appId = subdomain;
|
||||
const domain = `${subdomain}.recette.santinova-soft.org`;
|
||||
const appDir = path.join(config.appsBasePath, appId);
|
||||
const srcDir = path.join(appDir, 'src');
|
||||
|
||||
const log = (msg) => {
|
||||
const line = `[${new Date().toISOString()}] ${msg}`;
|
||||
console.log(line);
|
||||
if (logCallback) logCallback(line);
|
||||
};
|
||||
|
||||
try {
|
||||
// 1. Créer le répertoire de l'application
|
||||
log(`Création du répertoire ${appDir}...`);
|
||||
await fsp.mkdir(appDir, { recursive: true });
|
||||
await fsp.mkdir(srcDir, { recursive: true });
|
||||
|
||||
let giteaRepoName = appId;
|
||||
let giteaOwner = config.gitea.username;
|
||||
|
||||
if (sourceType === 'gitea') {
|
||||
// 2a. Cloner depuis un dépôt Gitea existant
|
||||
log(`Clonage du dépôt Gitea: ${giteaRepoUrl}...`);
|
||||
const cloneUrl = giteaRepoUrl.replace(
|
||||
'https://',
|
||||
`https://${config.gitea.username}:${encodeURIComponent(config.gitea.password)}@`
|
||||
);
|
||||
await execCommand(`cd ${appDir} && rm -rf src && git clone ${cloneUrl} src`, 120000);
|
||||
log('Clonage terminé.');
|
||||
|
||||
// Extraire le nom du repo depuis l'URL
|
||||
const urlParts = giteaRepoUrl.replace(/\.git$/, '').split('/');
|
||||
giteaRepoName = urlParts[urlParts.length - 1];
|
||||
if (urlParts.length >= 2) {
|
||||
giteaOwner = urlParts[urlParts.length - 2];
|
||||
}
|
||||
} else if (sourceType === 'zip') {
|
||||
// 2b. Extraire le ZIP et créer un dépôt Gitea
|
||||
log(`Extraction du fichier ZIP...`);
|
||||
await execCommand(`cd ${srcDir} && unzip -o ${zipFilePath}`, 60000);
|
||||
|
||||
// Vérifier si les fichiers sont dans un sous-répertoire
|
||||
const entries = await fsp.readdir(srcDir);
|
||||
const nonHidden = entries.filter((e) => !e.startsWith('.') && e !== '__MACOSX');
|
||||
if (nonHidden.length === 1) {
|
||||
const subDir = path.join(srcDir, nonHidden[0]);
|
||||
const stat = await fsp.stat(subDir);
|
||||
if (stat.isDirectory()) {
|
||||
log(`Déplacement des fichiers depuis le sous-répertoire ${nonHidden[0]}...`);
|
||||
await execCommand(`cd ${subDir} && mv * ${srcDir}/ 2>/dev/null; mv .* ${srcDir}/ 2>/dev/null; cd ${srcDir} && rmdir "${nonHidden[0]}" 2>/dev/null || true`);
|
||||
}
|
||||
}
|
||||
|
||||
// Supprimer le ZIP temporaire
|
||||
try { await fsp.unlink(zipFilePath); } catch (e) { /* ignore */ }
|
||||
|
||||
// Créer le dépôt sur Gitea
|
||||
log(`Création du dépôt Gitea: ${appId}...`);
|
||||
try {
|
||||
await createRepo(appId, description || `Application ${name}`, true);
|
||||
log('Dépôt Gitea créé.');
|
||||
} catch (err) {
|
||||
if (err.response && err.response.status === 409) {
|
||||
log('Le dépôt Gitea existe déjà, utilisation du dépôt existant.');
|
||||
} else {
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialiser git et pousser le code
|
||||
log('Initialisation Git et push vers Gitea...');
|
||||
const gitUrl = `https://${config.gitea.username}:${encodeURIComponent(config.gitea.password)}@${config.gitea.url.replace('https://', '')}/${config.gitea.username}/${appId}.git`;
|
||||
await execCommand(
|
||||
`cd ${srcDir} && git init && git checkout -b main && git config user.email "admin@santinova-soft.org" && git config user.name "Manus Dashboard" && git add -A && git commit -m "Initial commit: ${name}" && git remote add origin ${gitUrl} && git push -u origin main --force`,
|
||||
120000
|
||||
);
|
||||
log('Code poussé sur Gitea.');
|
||||
}
|
||||
|
||||
// 3. Générer le Dockerfile si nécessaire
|
||||
const dockerfilePath = path.join(srcDir, 'Dockerfile');
|
||||
const hasDockerfile = fs.existsSync(dockerfilePath);
|
||||
|
||||
if (!hasDockerfile) {
|
||||
log(`Génération du Dockerfile pour la stack ${stack}...`);
|
||||
const containerPort = getContainerPort(stack, port);
|
||||
const templateFn = DOCKERFILE_TEMPLATES[stack] || DOCKERFILE_TEMPLATES['nodejs'];
|
||||
let dockerfileContent = templateFn(containerPort);
|
||||
|
||||
// If the project does NOT have a patches/ directory, remove COPY patches/ lines
|
||||
const hasPatchesDir = fs.existsSync(path.join(srcDir, 'patches'));
|
||||
if (!hasPatchesDir) {
|
||||
dockerfileContent = dockerfileContent
|
||||
.split('\n')
|
||||
.filter(line => !line.includes('COPY patches/'))
|
||||
.join('\n');
|
||||
log('Pas de dossier patches/ détecté, lignes COPY patches/ retirées du Dockerfile.');
|
||||
}
|
||||
|
||||
// If the project does NOT have a drizzle/ directory, remove COPY drizzle lines
|
||||
const hasDrizzleDir = fs.existsSync(path.join(srcDir, 'drizzle'));
|
||||
if (!hasDrizzleDir) {
|
||||
dockerfileContent = dockerfileContent
|
||||
.split('\n')
|
||||
.filter(line => !line.includes('COPY drizzle'))
|
||||
.join('\n');
|
||||
log('Pas de dossier drizzle/ détecté, lignes COPY drizzle retirées du Dockerfile.');
|
||||
}
|
||||
|
||||
await fsp.writeFile(dockerfilePath, dockerfileContent, 'utf-8');
|
||||
log('Dockerfile généré.');
|
||||
|
||||
// Commit le Dockerfile
|
||||
if (sourceType === 'zip') {
|
||||
await execCommand(
|
||||
`cd ${srcDir} && git config user.email "admin@santinova-soft.org" && git config user.name "Manus Dashboard" && git add Dockerfile && git commit -m "Add auto-generated Dockerfile" && git push origin main`,
|
||||
60000
|
||||
);
|
||||
log('Dockerfile commité et poussé sur Gitea.');
|
||||
}
|
||||
} else {
|
||||
log('Dockerfile existant détecté, utilisation du Dockerfile du projet.');
|
||||
}
|
||||
|
||||
// 4. Générer le docker-compose.yml
|
||||
log('Génération du docker-compose.yml...');
|
||||
const containerPort = getContainerPort(stack, port);
|
||||
const composeContent = generateDockerCompose({
|
||||
appId,
|
||||
subdomain,
|
||||
stack,
|
||||
port: containerPort,
|
||||
needsDb: needsDb || false,
|
||||
dbType: dbType || 'mysql',
|
||||
});
|
||||
await fsp.writeFile(path.join(appDir, 'docker-compose.yml'), composeContent, 'utf-8');
|
||||
log('docker-compose.yml généré.');
|
||||
|
||||
// 5. Lancer le build et le déploiement Docker
|
||||
log('Lancement du build Docker (cela peut prendre quelques minutes)...');
|
||||
const buildResult = await execCommand(
|
||||
`cd ${appDir} && docker compose build --no-cache 2>&1`,
|
||||
600000
|
||||
);
|
||||
log('Build Docker terminé.');
|
||||
|
||||
log('Démarrage des conteneurs...');
|
||||
await execCommand(`cd ${appDir} && docker compose up -d 2>&1`, 120000);
|
||||
log('Conteneurs démarrés.');
|
||||
|
||||
// 6. Créer un utilisateur admin dans la base de données si nécessaire
|
||||
if (needsDb) {
|
||||
log('Attente du démarrage de la base de données (15s)...');
|
||||
await new Promise((resolve) => setTimeout(resolve, 15000));
|
||||
|
||||
try {
|
||||
log('Tentative de création de l\'utilisateur admin dans la base de données...');
|
||||
if (dbType === 'postgres') {
|
||||
await execCommand(
|
||||
`docker exec ${appId}-db psql -U app_user -d ${appId.replace(/-/g, '_')} -c "CREATE TABLE IF NOT EXISTS admin_users (id SERIAL PRIMARY KEY, email VARCHAR(255), password VARCHAR(255), role VARCHAR(50), created_at TIMESTAMP DEFAULT NOW()); INSERT INTO admin_users (email, password, role) VALUES ('adminItinova@santinova-soft.org', 'Itinova69!', 'admin') ON CONFLICT DO NOTHING;" 2>&1`,
|
||||
30000
|
||||
);
|
||||
} else {
|
||||
await execCommand(
|
||||
`docker exec ${appId}-db mysql -uapp_user -pAppPassword2026! ${appId.replace(/-/g, '_')} -e "CREATE TABLE IF NOT EXISTS admin_users (id INT AUTO_INCREMENT PRIMARY KEY, email VARCHAR(255), password VARCHAR(255), role VARCHAR(50), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP); INSERT IGNORE INTO admin_users (email, password, role) VALUES ('adminItinova@santinova-soft.org', 'Itinova69!', 'admin');" 2>&1`,
|
||||
30000
|
||||
);
|
||||
}
|
||||
log('Utilisateur admin créé dans la base de données.');
|
||||
} catch (dbErr) {
|
||||
log(`Note: Création de l'utilisateur admin en BDD non critique: ${dbErr.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 7. Enregistrer l'application dans la configuration dynamique
|
||||
const appDef = {
|
||||
id: appId,
|
||||
name: name,
|
||||
description: description || `Application ${name}`,
|
||||
directory: appId,
|
||||
giteaRepo: giteaRepoName,
|
||||
giteaOwner: giteaOwner,
|
||||
urls: {
|
||||
recette: `https://${domain}`,
|
||||
prod: null,
|
||||
},
|
||||
containerName: appId,
|
||||
healthCheckUrl: `https://${domain}`,
|
||||
port: containerPort,
|
||||
stack: stack,
|
||||
needsDb: needsDb || false,
|
||||
dbType: dbType || null,
|
||||
createdAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
addDynamicApp(appDef);
|
||||
log(`Application ${name} enregistrée dans le dashboard.`);
|
||||
log(`Accessible sur: https://${domain}`);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
app: appDef,
|
||||
message: `Application ${name} créée et déployée avec succès`,
|
||||
url: `https://${domain}`,
|
||||
};
|
||||
} catch (err) {
|
||||
log(`ERREUR: ${err.message}`);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
function execCommand(cmd, timeout = 60000) {
|
||||
return new Promise((resolve, reject) => {
|
||||
exec(cmd, { maxBuffer: 1024 * 1024 * 50, timeout }, (error, stdout, stderr) => {
|
||||
if (error) {
|
||||
reject(new Error(`Commande échouée: ${error.message}\nStdout: ${stdout}\nStderr: ${stderr}`));
|
||||
} else {
|
||||
resolve(stdout + stderr);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ============ STACK DETECTION ============
|
||||
|
||||
function getAvailableStacks() {
|
||||
return [
|
||||
{ id: 'nodejs', name: 'Node.js', icon: 'nodejs', description: 'Application Node.js (Express, Fastify, etc.)' },
|
||||
{ id: 'nodejs-next', name: 'Node.js (Next.js)', icon: 'nodejs', description: 'Application Next.js avec SSR' },
|
||||
{ id: 'python', name: 'Python', icon: 'python', description: 'Application Python générique' },
|
||||
{ id: 'python-flask', name: 'Python (Flask)', icon: 'python', description: 'Application Flask' },
|
||||
{ id: 'python-django', name: 'Python (Django)', icon: 'python', description: 'Application Django' },
|
||||
{ id: 'php', name: 'PHP', icon: 'php', description: 'Application PHP avec Apache' },
|
||||
{ id: 'php-laravel', name: 'PHP (Laravel)', icon: 'php', description: 'Application Laravel' },
|
||||
{ id: 'static', name: 'Site statique', icon: 'static', description: 'HTML/CSS/JS statique (Nginx)' },
|
||||
{ id: 'static-react', name: 'React (SPA)', icon: 'react', description: 'Application React avec build (Vite/CRA)' },
|
||||
];
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
createApplication,
|
||||
generateDockerCompose,
|
||||
getAvailableStacks,
|
||||
initDynamicApps,
|
||||
loadDynamicApps,
|
||||
addDynamicApp,
|
||||
DOCKERFILE_TEMPLATES,
|
||||
};
|
||||
@@ -1,61 +0,0 @@
|
||||
const jwt = require('jsonwebtoken');
|
||||
const bcrypt = require('bcryptjs');
|
||||
const config = require('./config');
|
||||
|
||||
// Hash du mot de passe au démarrage
|
||||
let passwordHash = null;
|
||||
|
||||
async function initAuth() {
|
||||
passwordHash = await bcrypt.hash(config.auth.password, 10);
|
||||
}
|
||||
|
||||
async function authenticate(username, password) {
|
||||
if (username !== config.auth.username) {
|
||||
return null;
|
||||
}
|
||||
// Comparer directement car on stocke le mot de passe en clair dans la config
|
||||
if (password !== config.auth.password) {
|
||||
return null;
|
||||
}
|
||||
const token = jwt.sign(
|
||||
{ username, role: 'admin' },
|
||||
config.jwtSecret,
|
||||
{ expiresIn: config.jwtExpiry }
|
||||
);
|
||||
return token;
|
||||
}
|
||||
|
||||
function verifyToken(token) {
|
||||
try {
|
||||
return jwt.verify(token, config.jwtSecret);
|
||||
} catch (err) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function authMiddleware(req, res, next) {
|
||||
// Check Authorization header
|
||||
let token = null;
|
||||
const authHeader = req.headers.authorization;
|
||||
if (authHeader && authHeader.startsWith('Bearer ')) {
|
||||
token = authHeader.substring(7);
|
||||
}
|
||||
// Check cookie
|
||||
if (!token && req.cookies) {
|
||||
token = req.cookies.dashboard_token;
|
||||
}
|
||||
|
||||
if (!token) {
|
||||
return res.status(401).json({ error: 'Non authentifié' });
|
||||
}
|
||||
|
||||
const decoded = verifyToken(token);
|
||||
if (!decoded) {
|
||||
return res.status(401).json({ error: 'Token invalide ou expiré' });
|
||||
}
|
||||
|
||||
req.user = decoded;
|
||||
next();
|
||||
}
|
||||
|
||||
module.exports = { initAuth, authenticate, verifyToken, authMiddleware };
|
||||
@@ -1,231 +0,0 @@
|
||||
module.exports = {
|
||||
port: process.env.PORT || 3001,
|
||||
jwtSecret: process.env.JWT_SECRET || 'manus-dashboard-secret-2026',
|
||||
jwtExpiry: '24h',
|
||||
// Authentification
|
||||
auth: {
|
||||
username: process.env.ADMIN_USERNAME || 'adminItinova',
|
||||
password: process.env.ADMIN_PASSWORD || 'Itinova69!',
|
||||
},
|
||||
// Gitea
|
||||
gitea: {
|
||||
url: process.env.GITEA_URL || 'http://gitea:3000',
|
||||
username: process.env.GITEA_USERNAME || 'manus-admin',
|
||||
password: process.env.GITEA_PASSWORD || 'Itinova69!',
|
||||
token: process.env.GITEA_TOKEN || null,
|
||||
},
|
||||
// Applications config
|
||||
appsBasePath: process.env.APPS_BASE_PATH || '/opt/manus-deploy/apps',
|
||||
infrastructurePath: process.env.INFRA_BASE_PATH || '/opt/manus-deploy/infrastructure',
|
||||
// Health check interval (ms)
|
||||
healthCheckInterval: parseInt(process.env.HEALTH_CHECK_INTERVAL) || 30000,
|
||||
// Apps configuration
|
||||
apps: [
|
||||
{
|
||||
id: 'itinova-contacts',
|
||||
name: 'Itinova Contacts',
|
||||
description: 'Application de gestion des contacts Itinova',
|
||||
directory: 'itinova-contacts',
|
||||
giteaRepo: 'itinova-contacts',
|
||||
giteaOwner: 'manus-admin',
|
||||
urls: {
|
||||
recette: 'https://contacts.recette.santinova-soft.org',
|
||||
prod: 'https://contacts.santinova-soft.org',
|
||||
},
|
||||
containerName: 'itinova-contacts',
|
||||
healthCheckUrl: 'https://contacts.recette.santinova-soft.org',
|
||||
port: 3000,
|
||||
category: 'ITINOVA',
|
||||
status: 'production',
|
||||
},
|
||||
{
|
||||
id: 'itinova-podcasts',
|
||||
name: 'Itinova Podcasts',
|
||||
description: 'Gestionnaire de podcasts pour les établissements Itinova',
|
||||
directory: 'itinova-podcasts',
|
||||
giteaRepo: 'itinova-podcasts',
|
||||
giteaOwner: 'manus-admin',
|
||||
urls: {
|
||||
recette: 'https://podcasts.recette.santinova-soft.org',
|
||||
prod: 'https://podcasts.santinova-soft.org',
|
||||
},
|
||||
containerName: 'itinova-podcasts',
|
||||
healthCheckUrl: 'https://podcasts.recette.santinova-soft.org',
|
||||
port: 3000,
|
||||
category: 'ITINOVA',
|
||||
status: 'production',
|
||||
},
|
||||
{
|
||||
id: 'veille-reglementaire',
|
||||
name: 'Veille Réglementaire',
|
||||
description: 'Application de veille réglementaire et appels à projets',
|
||||
directory: 'veille-reglementaire',
|
||||
giteaRepo: 'veille-reglementaire',
|
||||
giteaOwner: 'manus-admin',
|
||||
urls: {
|
||||
recette: 'https://veille.recette.santinova-soft.org',
|
||||
prod: 'https://veille.santinova-soft.org',
|
||||
},
|
||||
containerName: 'veille-reglementaire-recette',
|
||||
healthCheckUrl: 'https://veille.recette.santinova-soft.org',
|
||||
port: 3000,
|
||||
category: 'ITINOVA',
|
||||
status: 'production',
|
||||
},
|
||||
{
|
||||
id: 'itinova-vehicle-exchange',
|
||||
name: 'Itinova Gestion de Flotte',
|
||||
description: 'Bourse de véhicules Itinova — Partage et échange de véhicules entre établissements',
|
||||
directory: 'itinova-vehicle-exchange',
|
||||
giteaRepo: 'itinova-vehicle-exchange',
|
||||
giteaOwner: 'manus-admin',
|
||||
urls: {
|
||||
recette: 'https://flotte.recette.santinova-soft.org',
|
||||
prod: 'https://flotte.santinova-soft.org',
|
||||
},
|
||||
containerName: 'itinova-vehicle-exchange',
|
||||
healthCheckUrl: 'https://flotte.recette.santinova-soft.org',
|
||||
port: 3000,
|
||||
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',
|
||||
image: 'images/pilotage-ms.png',
|
||||
status: 'recette',
|
||||
},
|
||||
{
|
||||
id: 'sonum',
|
||||
name: 'SONUM',
|
||||
description: 'Cartographie des Solutions Numériques FEHAP',
|
||||
directory: 'sonum',
|
||||
giteaRepo: 'sonum',
|
||||
giteaOwner: 'manus-admin',
|
||||
urls: {
|
||||
recette: 'https://sonum.recette.santinova-soft.org',
|
||||
prod: 'https://sonum.santinova-soft.org',
|
||||
},
|
||||
containerName: 'sonum',
|
||||
healthCheckUrl: 'https://sonum.recette.santinova-soft.org',
|
||||
port: 3000,
|
||||
category: 'SANTINOVA',
|
||||
status: 'production',
|
||||
},
|
||||
{
|
||||
id: 'demat-facturation-dsi',
|
||||
name: 'Démat. Facturation DSI',
|
||||
description: 'Dématérialisation des factures DSI — Import email/dossier, analyse IA, export SharePoint/PDF, validation BAP',
|
||||
directory: 'demat-facturation-dsi',
|
||||
giteaRepo: 'demat-facturation-dsi',
|
||||
giteaOwner: 'manus-admin',
|
||||
urls: {
|
||||
recette: 'https://demat-facturation.recette.santinova-soft.org',
|
||||
prod: 'https://demat-facturation.santinova-soft.org',
|
||||
},
|
||||
containerName: 'demat-facturation-app',
|
||||
healthCheckUrl: 'https://demat-facturation.recette.santinova-soft.org',
|
||||
port: 3000,
|
||||
image: 'images/demat-facturation-dsi.jpg',
|
||||
category: 'SANTINOVA',
|
||||
status: 'production',
|
||||
},
|
||||
{
|
||||
id: 'facturation-santinova',
|
||||
name: 'Facturation Santinova',
|
||||
description: 'Application de gestion de la facturation Santinova',
|
||||
directory: 'facturation-santinova',
|
||||
giteaRepo: 'facturation-santinova',
|
||||
giteaOwner: 'manus-admin',
|
||||
urls: {
|
||||
recette: 'https://facturation.recette.santinova-soft.org',
|
||||
prod: 'https://facturation.santinova-soft.org',
|
||||
},
|
||||
containerName: 'facturation-santinova-app',
|
||||
healthCheckUrl: 'https://facturation.recette.santinova-soft.org',
|
||||
port: 3001,
|
||||
category: 'SANTINOVA',
|
||||
status: 'recette',
|
||||
},
|
||||
{
|
||||
id: 'formation-manager-itinova',
|
||||
name: 'Formation Manager',
|
||||
description: 'Gestion des Formations Itinova',
|
||||
directory: 'formation-manager-itinova',
|
||||
giteaRepo: 'formation-manager-itinova',
|
||||
giteaOwner: 'manus-admin',
|
||||
urls: {
|
||||
recette: 'https://formations.recette.santinova-soft.org',
|
||||
prod: 'https://formations.santinova-soft.org',
|
||||
},
|
||||
containerName: 'formation-manager-itinova',
|
||||
healthCheckUrl: 'https://formations.recette.santinova-soft.org',
|
||||
port: 3000,
|
||||
category: 'ITINOVA',
|
||||
status: 'production',
|
||||
},
|
||||
{
|
||||
id: 'portail-santinova',
|
||||
name: 'Portail Applicatif',
|
||||
description: 'Portail applicatif Santinova — accès centralisé aux applications',
|
||||
directory: 'portail-santinova',
|
||||
giteaRepo: 'portail-santinova',
|
||||
giteaOwner: 'manus-admin',
|
||||
urls: {
|
||||
recette: 'https://portail.recette.santinova-soft.org',
|
||||
prod: 'https://portail.santinova-soft.org',
|
||||
},
|
||||
containerName: 'portail-santinova',
|
||||
healthCheckUrl: 'https://portail.recette.santinova-soft.org',
|
||||
port: 3000,
|
||||
category: 'INFRA',
|
||||
status: 'production',
|
||||
},
|
||||
{
|
||||
id: 'manus-dashboard',
|
||||
name: 'Dashboard Recette',
|
||||
description: 'Dashboard de gestion de l\'infrastructure Manus',
|
||||
directory: 'manus-dashboard',
|
||||
giteaRepo: 'manus-dashboard',
|
||||
giteaOwner: 'manus-admin',
|
||||
urls: {
|
||||
recette: 'https://dashboard.recette.santinova-soft.org',
|
||||
prod: 'https://dashboard.santinova-soft.org',
|
||||
},
|
||||
containerName: 'manus-dashboard',
|
||||
healthCheckUrl: 'https://dashboard.recette.santinova-soft.org',
|
||||
port: 3001,
|
||||
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',
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -1,438 +0,0 @@
|
||||
const Docker = require('dockerode');
|
||||
const { exec } = require('child_process');
|
||||
const path = require('path');
|
||||
const config = require('./config');
|
||||
|
||||
const docker = new Docker({ socketPath: '/var/run/docker.sock' });
|
||||
|
||||
/**
|
||||
* Récupérer les informations d'un conteneur Docker
|
||||
*/
|
||||
async function getContainerInfo(containerName) {
|
||||
try {
|
||||
const container = docker.getContainer(containerName);
|
||||
const info = await container.inspect();
|
||||
return {
|
||||
id: info.Id.substring(0, 12),
|
||||
name: info.Name.replace('/', ''),
|
||||
state: info.State.Status,
|
||||
running: info.State.Running,
|
||||
startedAt: info.State.StartedAt,
|
||||
image: info.Config.Image,
|
||||
created: info.Created,
|
||||
};
|
||||
} catch (err) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Récupérer les logs d'un conteneur
|
||||
*/
|
||||
async function getContainerLogs(containerName, tail = 100) {
|
||||
try {
|
||||
const container = docker.getContainer(containerName);
|
||||
const logs = await container.logs({
|
||||
stdout: true,
|
||||
stderr: true,
|
||||
tail: tail,
|
||||
timestamps: true,
|
||||
});
|
||||
// Parse buffer to string
|
||||
return logs.toString('utf8');
|
||||
} catch (err) {
|
||||
return `Erreur lors de la récupération des logs: ${err.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Lister tous les conteneurs
|
||||
*/
|
||||
async function listContainers() {
|
||||
try {
|
||||
const containers = await docker.listContainers({ all: true });
|
||||
return containers.map((c) => ({
|
||||
id: c.Id.substring(0, 12),
|
||||
names: c.Names.map((n) => n.replace('/', '')),
|
||||
state: c.State,
|
||||
status: c.Status,
|
||||
image: c.Image,
|
||||
created: new Date(c.Created * 1000).toISOString(),
|
||||
}));
|
||||
} catch (err) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Redéployer une application (docker compose build + up)
|
||||
*/
|
||||
function redeployApp(appConfig) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const appDir = path.join(config.appsBasePath, appConfig.directory);
|
||||
const cmd = `cd ${appDir} && docker compose build --no-cache && docker compose up -d`;
|
||||
|
||||
const startTime = Date.now();
|
||||
const logLines = [];
|
||||
|
||||
logLines.push(`[${new Date().toISOString()}] Début du redéploiement de ${appConfig.name}`);
|
||||
logLines.push(`[${new Date().toISOString()}] Répertoire: ${appDir}`);
|
||||
logLines.push(`[${new Date().toISOString()}] Commande: ${cmd}`);
|
||||
|
||||
const process = exec(cmd, {
|
||||
maxBuffer: 1024 * 1024 * 10, // 10MB
|
||||
timeout: 300000, // 5 minutes
|
||||
});
|
||||
|
||||
process.stdout.on('data', (data) => {
|
||||
const lines = data.toString().split('\n').filter(Boolean);
|
||||
lines.forEach((line) => {
|
||||
logLines.push(`[${new Date().toISOString()}] ${line}`);
|
||||
});
|
||||
});
|
||||
|
||||
process.stderr.on('data', (data) => {
|
||||
const lines = data.toString().split('\n').filter(Boolean);
|
||||
lines.forEach((line) => {
|
||||
logLines.push(`[${new Date().toISOString()}] ${line}`);
|
||||
});
|
||||
});
|
||||
|
||||
process.on('close', (code) => {
|
||||
const duration = ((Date.now() - startTime) / 1000).toFixed(1);
|
||||
if (code === 0) {
|
||||
logLines.push(`[${new Date().toISOString()}] Redéploiement terminé avec succès en ${duration}s`);
|
||||
resolve({ success: true, logs: logLines.join('\n'), duration });
|
||||
} else {
|
||||
logLines.push(`[${new Date().toISOString()}] Redéploiement échoué (code: ${code}) en ${duration}s`);
|
||||
resolve({ success: false, logs: logLines.join('\n'), duration, exitCode: code });
|
||||
}
|
||||
});
|
||||
|
||||
process.on('error', (err) => {
|
||||
logLines.push(`[${new Date().toISOString()}] Erreur: ${err.message}`);
|
||||
resolve({ success: false, logs: logLines.join('\n'), error: err.message });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Pull le dernier code depuis Gitea
|
||||
*/
|
||||
function gitPull(appConfig) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const srcDir = path.join(config.appsBasePath, appConfig.directory, 'src');
|
||||
const cmd = `cd ${srcDir} && git pull origin main 2>&1 || git pull origin master 2>&1`;
|
||||
|
||||
exec(cmd, { timeout: 60000 }, (error, stdout, stderr) => {
|
||||
if (error) {
|
||||
resolve({ success: false, output: stderr || error.message });
|
||||
} else {
|
||||
resolve({ success: true, output: stdout });
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Démarrer un conteneur Docker
|
||||
*/
|
||||
async function startContainer(containerName, appId) {
|
||||
try {
|
||||
// Tenter d'abord un docker start (conteneur existant mais arrêté)
|
||||
const container = docker.getContainer(containerName);
|
||||
const info = await container.inspect().catch(() => null);
|
||||
if (info) {
|
||||
// Le conteneur existe, on le démarre
|
||||
if (!info.State.Running) {
|
||||
await container.start();
|
||||
}
|
||||
return { success: true, message: `Conteneur ${containerName} démarré` };
|
||||
}
|
||||
// Le conteneur n'existe pas : docker compose up dans le répertoire de l'app
|
||||
const id = appId || containerName;
|
||||
const appsBasePath = config.appsBasePath || process.env.APPS_BASE_PATH || '/opt/manus-deploy/apps';
|
||||
const appDir = path.join(appsBasePath, id);
|
||||
const fs = require('fs');
|
||||
const composeFile = fs.existsSync(path.join(appDir, 'docker-compose.yml'))
|
||||
? path.join(appDir, 'docker-compose.yml')
|
||||
: fs.existsSync(path.join(appDir, 'docker-compose.prod.yml'))
|
||||
? path.join(appDir, 'docker-compose.prod.yml')
|
||||
: null;
|
||||
if (!composeFile) {
|
||||
return { success: false, message: `Aucun docker-compose.yml trouvé dans ${appDir}` };
|
||||
}
|
||||
await new Promise((resolve, reject) => {
|
||||
exec(`docker compose -f ${composeFile} up -d`, { cwd: appDir }, (err, stdout, stderr) => {
|
||||
if (err) reject(new Error(stderr || err.message));
|
||||
else resolve(stdout);
|
||||
});
|
||||
});
|
||||
return { success: true, message: `Conteneur ${containerName} créé et démarré via docker compose` };
|
||||
} catch (err) {
|
||||
return { success: false, message: err.message };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Arrêter un conteneur Docker
|
||||
*/
|
||||
async function stopContainer(containerName) {
|
||||
try {
|
||||
const container = docker.getContainer(containerName);
|
||||
await container.stop({ t: 10 });
|
||||
return { success: true, message: `Conteneur ${containerName} arrêté` };
|
||||
} catch (err) {
|
||||
return { success: false, message: err.message };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Redémarrer un conteneur Docker
|
||||
*/
|
||||
async function restartContainer(containerName) {
|
||||
try {
|
||||
const container = docker.getContainer(containerName);
|
||||
await container.restart({ t: 10 });
|
||||
return { success: true, message: `Conteneur ${containerName} redémarré` };
|
||||
} catch (err) {
|
||||
return { success: false, message: err.message };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Récupérer les métriques système du serveur (CPU, RAM, disque, réseau)
|
||||
*/
|
||||
function getServerMetrics() {
|
||||
return new Promise((resolve) => {
|
||||
const { execSync } = require("child_process");
|
||||
const fs = require("fs");
|
||||
try {
|
||||
// ===== Méthode 1 : Lire host-metrics.json généré par le script système de l'hôte =====
|
||||
// Ce fichier est mis à jour toutes les 30s par /opt/manus-deploy/host-metrics.sh
|
||||
// Il contient les vraies métriques de l'hôte LXC (pas du nœud physique)
|
||||
const hostMetricsPath = '/opt/manus-deploy/host-metrics.json';
|
||||
if (fs.existsSync(hostMetricsPath)) {
|
||||
try {
|
||||
const raw = fs.readFileSync(hostMetricsPath, 'utf8');
|
||||
const hostMetrics = JSON.parse(raw);
|
||||
// Vérifier que le fichier est récent (moins de 2 minutes)
|
||||
const fileAge = Date.now() - new Date(hostMetrics.timestamp).getTime();
|
||||
if (fileAge < 120000 && hostMetrics.memory && hostMetrics.memory.total > 0) {
|
||||
return resolve({
|
||||
...hostMetrics,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
}
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
// ===== Méthode 2 : Lecture directe de /proc (fallback) =====
|
||||
// CPU : mesure via cgroup v2 usage_usec (méthode précise pour conteneur LXC)
|
||||
// Fallback sur /proc/stat normalisé par nproc si cgroup v2 non disponible
|
||||
let cpuUsage = 0;
|
||||
try {
|
||||
const ncpu = parseInt(execSync('nproc').toString().trim()) || 1;
|
||||
const cgroupPath = '/sys/fs/cgroup/cpu.stat';
|
||||
const readUsageUsec = () => {
|
||||
const stat = fs.readFileSync(cgroupPath, 'utf8');
|
||||
const m = stat.match(/^usage_usec\s+(\d+)/m);
|
||||
return m ? parseInt(m[1]) : null;
|
||||
};
|
||||
const u1 = readUsageUsec();
|
||||
if (u1 !== null) {
|
||||
// Méthode cgroup v2 : mesure la consommation CPU réelle du conteneur
|
||||
execSync('sleep 0.5');
|
||||
const u2 = readUsageUsec();
|
||||
// delta en microsecondes / (500ms * ncpu) = % CPU du conteneur
|
||||
const deltaUs = u2 - u1;
|
||||
cpuUsage = Math.min(100, Math.round(deltaUs / (500000 * ncpu) * 100));
|
||||
} else {
|
||||
// Fallback : /proc/stat normalisé par nproc
|
||||
const parseCpuLine = (line) => line.trim().split(/\s+/).slice(1).map(Number);
|
||||
const s1 = parseCpuLine(fs.readFileSync('/proc/stat', 'utf8').split('\n').find(l => l.startsWith('cpu ')));
|
||||
execSync('sleep 0.3');
|
||||
const s2 = parseCpuLine(fs.readFileSync('/proc/stat', 'utf8').split('\n').find(l => l.startsWith('cpu ')));
|
||||
const idle1 = s1[3], total1 = s1.reduce((a,b)=>a+b,0);
|
||||
const idle2 = s2[3], total2 = s2.reduce((a,b)=>a+b,0);
|
||||
const dIdle = idle2 - idle1, dTotal = total2 - total1;
|
||||
const rawCpu = dTotal > 0 ? (1 - dIdle / dTotal) * 100 : 0;
|
||||
// Normaliser par nproc pour éviter l'effet nœud physique sur LXC
|
||||
cpuUsage = Math.round(rawCpu / ncpu);
|
||||
}
|
||||
} catch(e) {}
|
||||
|
||||
// RAM : lecture robuste multi-source
|
||||
// Priorité 1 : /host/proc/meminfo (hôte LXC monté via volume docker-compose)
|
||||
// Priorité 2 : /proc/meminfo si MemTotal <= 64 Go (lxcfs ou VPS direct)
|
||||
// Priorité 3 : Docker API MemTotal + ratio /proc/meminfo du nœud physique
|
||||
let memTotal = 0;
|
||||
let memFree = 0, memAvailable = 0, memUsed = 0, memBuffers = 0, memCached = 0;
|
||||
|
||||
// Fonction de lecture de meminfo depuis un chemin donné
|
||||
const readMeminfo = (procPath) => {
|
||||
const raw = fs.readFileSync(procPath + '/meminfo', 'utf8');
|
||||
const map = {};
|
||||
raw.split('\n').forEach(line => {
|
||||
const idx = line.indexOf(':');
|
||||
if (idx > 0) {
|
||||
const key = line.substring(0, idx).trim();
|
||||
const rest = line.substring(idx + 1).trim();
|
||||
const val = parseInt(rest.split(' ')[0]);
|
||||
if (Number.isFinite(val)) map[key] = val * 1024;
|
||||
}
|
||||
});
|
||||
return map;
|
||||
};
|
||||
|
||||
try {
|
||||
let memMap = null;
|
||||
let sourceLabel = '';
|
||||
|
||||
// Priorité 1 : /host/proc monté depuis l'hôte LXC
|
||||
if (fs.existsSync('/host/proc/meminfo')) {
|
||||
try {
|
||||
const hostMap = readMeminfo('/host/proc');
|
||||
if (hostMap['MemTotal'] > 0 && hostMap['MemTotal'] <= 64 * 1024 * 1024 * 1024) {
|
||||
memMap = hostMap;
|
||||
sourceLabel = 'host/proc';
|
||||
}
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
// Priorité 2 : /proc direct si MemTotal <= 64 Go
|
||||
if (!memMap) {
|
||||
try {
|
||||
const procMap = readMeminfo('/proc');
|
||||
if (procMap['MemTotal'] > 0 && procMap['MemTotal'] <= 64 * 1024 * 1024 * 1024) {
|
||||
memMap = procMap;
|
||||
sourceLabel = '/proc direct';
|
||||
}
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
// Priorité 3 : Docker API MemTotal + ratio du nœud physique
|
||||
if (!memMap) {
|
||||
try {
|
||||
const dockerInfoRaw = execSync(
|
||||
'curl -s --unix-socket /var/run/docker.sock http://localhost/info',
|
||||
{ timeout: 3000 }
|
||||
).toString();
|
||||
const dockerInfo = JSON.parse(dockerInfoRaw);
|
||||
const dockerMemTotal = dockerInfo.MemTotal || 0;
|
||||
if (dockerMemTotal > 0) {
|
||||
// Lire le ratio d'utilisation depuis /proc du nœud physique
|
||||
const nodeMap = readMeminfo('/proc');
|
||||
const nodeTotal = nodeMap['MemTotal'] || 1;
|
||||
const nodeAvail = nodeMap['MemAvailable'] || 0;
|
||||
const usageRatio = (nodeTotal - nodeAvail) / nodeTotal;
|
||||
// Appliquer ce ratio à la vraie RAM du VPS
|
||||
memTotal = dockerMemTotal;
|
||||
memUsed = Math.round(memTotal * usageRatio);
|
||||
memFree = memTotal - memUsed;
|
||||
memAvailable = memFree;
|
||||
sourceLabel = 'docker-api+ratio';
|
||||
}
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
// Calculer les valeurs finales si memMap disponible
|
||||
if (memMap) {
|
||||
memTotal = memMap['MemTotal'] || 0;
|
||||
memFree = memMap['MemFree'] || 0;
|
||||
memAvailable = memMap['MemAvailable'] || 0;
|
||||
memBuffers = memMap['Buffers'] || 0;
|
||||
const sReclaimable = memMap['SReclaimable'] || 0;
|
||||
const shmem = memMap['Shmem'] || 0;
|
||||
memCached = (memMap['Cached'] || 0) + (sReclaimable > shmem ? sReclaimable - shmem : 0);
|
||||
// Utiliser MemAvailable comme référence car elle inclut les caches libérables
|
||||
// Identique à ce que `free` affiche dans la colonne 'disponible'
|
||||
memUsed = memTotal - memAvailable;
|
||||
if (memUsed < 0) memUsed = 0;
|
||||
}
|
||||
} catch(e) {
|
||||
// Fallback ultime
|
||||
try {
|
||||
const m = readMeminfo('/proc');
|
||||
memTotal = m['MemTotal'] || 0;
|
||||
memFree = m['MemFree'] || 0;
|
||||
memAvailable = m['MemAvailable'] || 0;
|
||||
memUsed = memTotal - memAvailable;
|
||||
} catch(e2) {}
|
||||
}
|
||||
|
||||
// Disque : df sur /opt/manus-deploy (point de montage de l'hôte LXC)
|
||||
// Utiliser /opt/manus-deploy car c'est un volume monté depuis l'hôte
|
||||
let diskTotal = 0, diskUsed = 0, diskFree = 0;
|
||||
try {
|
||||
const diskPath = fs.existsSync('/opt/manus-deploy') ? '/opt/manus-deploy' : '/';
|
||||
const diskRaw = execSync('df -B1 ' + diskPath + ' | tail -1').toString().trim().split(/\s+/);
|
||||
diskTotal = parseInt(diskRaw[1]);
|
||||
diskUsed = parseInt(diskRaw[2]);
|
||||
diskFree = parseInt(diskRaw[3]);
|
||||
} catch(e) {}
|
||||
|
||||
// Uptime et load : utiliser /host/proc si disponible (hôte LXC réel)
|
||||
const procBase = fs.existsSync('/host/proc/uptime') ? '/host/proc' : '/proc';
|
||||
const uptimeRaw = fs.readFileSync(procBase + '/uptime', 'utf8').trim().split(' ');
|
||||
const uptimeSeconds = parseFloat(uptimeRaw[0]);
|
||||
const loadRaw = fs.readFileSync(procBase + '/loadavg', 'utf8').trim().split(' ');
|
||||
const load1 = parseFloat(loadRaw[0]);
|
||||
const load5 = parseFloat(loadRaw[1]);
|
||||
const load15 = parseFloat(loadRaw[2]);
|
||||
|
||||
// Réseau
|
||||
let netRx = 0, netTx = 0;
|
||||
try {
|
||||
const netDevPath = fs.existsSync('/host/proc/net/dev') ? '/host/proc/net/dev' : '/proc/net/dev';
|
||||
const netDev = fs.readFileSync(netDevPath, 'utf8');
|
||||
const netLine = netDev.split('\n').find(l => /eth0|ens|enp/.test(l));
|
||||
if (netLine) {
|
||||
const parts = netLine.trim().split(/\s+/);
|
||||
netRx = parseInt(parts[1]) || 0;
|
||||
netTx = parseInt(parts[9]) || 0;
|
||||
}
|
||||
} catch(e) {}
|
||||
|
||||
resolve({
|
||||
cpu: { usage: cpuUsage },
|
||||
memory: {
|
||||
total: memTotal,
|
||||
used: memUsed,
|
||||
free: memFree,
|
||||
available: memAvailable,
|
||||
buffers: memBuffers,
|
||||
cached: memCached,
|
||||
// usagePercent = RAM applicative réelle (hors cache disque, identique à `free`)
|
||||
usagePercent: Math.round((memUsed / memTotal) * 100)
|
||||
},
|
||||
disk: {
|
||||
total: diskTotal,
|
||||
used: diskUsed,
|
||||
free: diskFree,
|
||||
usagePercent: Math.round((diskUsed / diskTotal) * 100)
|
||||
},
|
||||
uptime: uptimeSeconds,
|
||||
load: { load1, load5, load15 },
|
||||
network: { rx: netRx, tx: netTx },
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
} catch (err) {
|
||||
resolve({ error: err.message });
|
||||
}
|
||||
});
|
||||
}
|
||||
module.exports = {
|
||||
docker,
|
||||
getContainerInfo,
|
||||
getContainerLogs,
|
||||
listContainers,
|
||||
redeployApp,
|
||||
gitPull,
|
||||
startContainer,
|
||||
stopContainer,
|
||||
restartContainer,
|
||||
getServerMetrics,
|
||||
};
|
||||
@@ -1,119 +0,0 @@
|
||||
const axios = require('axios');
|
||||
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 } }
|
||||
),
|
||||
httpsAgent: new https.Agent({ rejectUnauthorized: false }),
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
/**
|
||||
* Récupérer les informations d'un dépôt
|
||||
*/
|
||||
async function getRepo(owner, repo) {
|
||||
try {
|
||||
const response = await giteaClient.get(`/repos/${owner}/${repo}`);
|
||||
return response.data;
|
||||
} catch (err) {
|
||||
console.error(`Erreur Gitea getRepo ${owner}/${repo}:`, err.message);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Récupérer les derniers commits d'un dépôt
|
||||
*/
|
||||
async function getCommits(owner, repo, limit = 10) {
|
||||
try {
|
||||
const response = await giteaClient.get(`/repos/${owner}/${repo}/commits`, {
|
||||
params: { limit, page: 1 },
|
||||
});
|
||||
return response.data.map((c) => ({
|
||||
sha: c.sha,
|
||||
shortSha: c.sha.substring(0, 7),
|
||||
message: c.commit.message,
|
||||
author: c.commit.author.name,
|
||||
date: c.commit.author.date,
|
||||
url: c.html_url,
|
||||
}));
|
||||
} catch (err) {
|
||||
console.error(`Erreur Gitea getCommits ${owner}/${repo}:`, err.message);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Récupérer les branches d'un dépôt
|
||||
*/
|
||||
async function getBranches(owner, repo) {
|
||||
try {
|
||||
const response = await giteaClient.get(`/repos/${owner}/${repo}/branches`);
|
||||
return response.data.map((b) => ({
|
||||
name: b.name,
|
||||
commit: b.commit.id.substring(0, 7),
|
||||
commitMessage: b.commit.message,
|
||||
}));
|
||||
} catch (err) {
|
||||
console.error(`Erreur Gitea getBranches ${owner}/${repo}:`, err.message);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Récupérer tous les dépôts (avec retry en cas d'erreur DNS)
|
||||
*/
|
||||
async function listRepos(retries = 3) {
|
||||
for (let i = 0; i < retries; i++) {
|
||||
try {
|
||||
const response = await giteaClient.get('/repos/search', {
|
||||
params: { limit: 50 },
|
||||
});
|
||||
return response.data.data || [];
|
||||
} catch (err) {
|
||||
console.error(`Erreur Gitea listRepos (tentative ${i + 1}/${retries}):`, err.message);
|
||||
if (i < retries - 1) {
|
||||
await new Promise((r) => setTimeout(r, 2000));
|
||||
}
|
||||
}
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Créer un nouveau dépôt
|
||||
*/
|
||||
async function createRepo(name, description, isPrivate = true) {
|
||||
try {
|
||||
const response = await giteaClient.post('/user/repos', {
|
||||
name,
|
||||
description,
|
||||
private: isPrivate,
|
||||
auto_init: true,
|
||||
default_branch: 'main',
|
||||
});
|
||||
return response.data;
|
||||
} catch (err) {
|
||||
console.error(`Erreur Gitea createRepo ${name}:`, err.message);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getRepo,
|
||||
getCommits,
|
||||
getBranches,
|
||||
listRepos,
|
||||
createRepo,
|
||||
giteaClient,
|
||||
};
|
||||
@@ -1,188 +0,0 @@
|
||||
const axios = require('axios');
|
||||
const https = require('https');
|
||||
const config = require('./config');
|
||||
const { getContainerInfo } = require('./docker');
|
||||
|
||||
// Store pour les statuts des apps
|
||||
const appStatuses = new Map();
|
||||
|
||||
// Store pour les logs de déploiement
|
||||
const deploymentLogs = [];
|
||||
const MAX_DEPLOYMENT_LOGS = 50;
|
||||
|
||||
// Store pour les commits Gitea
|
||||
const giteaCommits = new Map();
|
||||
|
||||
// Agent HTTPS qui ignore les certificats auto-signés
|
||||
const httpsAgent = new https.Agent({ rejectUnauthorized: false });
|
||||
|
||||
// Au démarrage : marquer tous les déploiements "running" orphelins comme "failed"
|
||||
// (ils ont été interrompus lors du dernier redémarrage du Dashboard)
|
||||
function cleanupOrphanedDeployments() {
|
||||
const orphans = deploymentLogs.filter((l) => l.status === 'running');
|
||||
if (orphans.length > 0) {
|
||||
console.log(`[healthcheck] Nettoyage de ${orphans.length} déploiement(s) orphelin(s) au démarrage`);
|
||||
orphans.forEach((l) => {
|
||||
l.status = 'failed';
|
||||
l.message = 'Déploiement interrompu (redémarrage du Dashboard)';
|
||||
l.endedAt = new Date().toISOString();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Vérifier la santé d'une URL
|
||||
*/
|
||||
async function checkUrl(url) {
|
||||
try {
|
||||
const start = Date.now();
|
||||
const response = await axios.get(url, {
|
||||
timeout: 10000,
|
||||
httpsAgent,
|
||||
validateStatus: (status) => status < 500,
|
||||
});
|
||||
const responseTime = Date.now() - start;
|
||||
return {
|
||||
online: true,
|
||||
statusCode: response.status,
|
||||
responseTime,
|
||||
};
|
||||
} catch (err) {
|
||||
return {
|
||||
online: false,
|
||||
statusCode: null,
|
||||
responseTime: null,
|
||||
error: err.message,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Vérifier la santé d'une application
|
||||
*/
|
||||
async function checkApp(appConfig) {
|
||||
const result = {
|
||||
id: appConfig.id,
|
||||
name: appConfig.name,
|
||||
description: appConfig.description,
|
||||
urls: appConfig.urls,
|
||||
containerName: appConfig.containerName,
|
||||
lastCheck: new Date().toISOString(),
|
||||
status: 'unknown',
|
||||
container: null,
|
||||
health: {
|
||||
recette: null,
|
||||
prod: null,
|
||||
},
|
||||
};
|
||||
|
||||
// Vérifier le conteneur Docker
|
||||
const containerInfo = await getContainerInfo(appConfig.containerName);
|
||||
result.container = containerInfo;
|
||||
|
||||
// Health check recette
|
||||
if (appConfig.urls.recette) {
|
||||
result.health.recette = await checkUrl(appConfig.urls.recette);
|
||||
}
|
||||
|
||||
// Health check prod
|
||||
if (appConfig.urls.prod) {
|
||||
result.health.prod = await checkUrl(appConfig.urls.prod);
|
||||
}
|
||||
|
||||
// Déterminer le statut global
|
||||
if (!containerInfo || !containerInfo.running) {
|
||||
result.status = 'offline';
|
||||
} else if (result.health.recette && result.health.recette.online) {
|
||||
result.status = 'online';
|
||||
} else if (containerInfo.running) {
|
||||
result.status = 'error';
|
||||
} else {
|
||||
result.status = 'offline';
|
||||
}
|
||||
|
||||
// Stocker le résultat
|
||||
appStatuses.set(appConfig.id, result);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Lancer les health checks pour toutes les apps
|
||||
*/
|
||||
async function checkAllApps() {
|
||||
const results = [];
|
||||
for (const app of config.apps) {
|
||||
const result = await checkApp(app);
|
||||
results.push(result);
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ajouter un log de déploiement (retourne l'entrée créée avec son id)
|
||||
*/
|
||||
function addDeploymentLog(appId, log) {
|
||||
const entry = {
|
||||
id: Date.now().toString(),
|
||||
appId,
|
||||
timestamp: new Date().toISOString(),
|
||||
...log,
|
||||
};
|
||||
deploymentLogs.unshift(entry);
|
||||
if (deploymentLogs.length > MAX_DEPLOYMENT_LOGS) {
|
||||
deploymentLogs.pop();
|
||||
}
|
||||
return entry;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mettre à jour un log de déploiement existant par son id
|
||||
* Permet de passer de "running" à "success" ou "failed" sans créer une nouvelle entrée
|
||||
*/
|
||||
function updateDeploymentLog(entryId, updates) {
|
||||
const entry = deploymentLogs.find((l) => l.id === entryId);
|
||||
if (entry) {
|
||||
Object.assign(entry, updates, { updatedAt: new Date().toISOString() });
|
||||
return entry;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Récupérer les logs de déploiement
|
||||
*/
|
||||
function getDeploymentLogs(appId = null) {
|
||||
if (appId) {
|
||||
return deploymentLogs.filter((l) => l.appId === appId);
|
||||
}
|
||||
return deploymentLogs;
|
||||
}
|
||||
|
||||
/**
|
||||
* Récupérer le statut d'une app
|
||||
*/
|
||||
function getAppStatus(appId) {
|
||||
return appStatuses.get(appId) || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Récupérer tous les statuts
|
||||
*/
|
||||
function getAllStatuses() {
|
||||
return Array.from(appStatuses.values());
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
checkUrl,
|
||||
checkApp,
|
||||
checkAllApps,
|
||||
addDeploymentLog,
|
||||
updateDeploymentLog,
|
||||
getDeploymentLogs,
|
||||
getAppStatus,
|
||||
getAllStatuses,
|
||||
cleanupOrphanedDeployments,
|
||||
appStatuses,
|
||||
giteaCommits,
|
||||
};
|
||||
@@ -1,136 +0,0 @@
|
||||
const express = require('express');
|
||||
const cors = require('cors');
|
||||
const helmet = require('helmet');
|
||||
const cookieParser = require('cookie-parser');
|
||||
const morgan = require('morgan');
|
||||
const path = require('path');
|
||||
const cron = require('node-cron');
|
||||
const http = require('http');
|
||||
const WebSocket = require('ws');
|
||||
|
||||
const config = require('./config');
|
||||
const { initAuth } = require('./auth');
|
||||
const routes = require('./routes');
|
||||
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({
|
||||
contentSecurityPolicy: false,
|
||||
crossOriginEmbedderPolicy: false,
|
||||
}));
|
||||
app.use(cors({
|
||||
origin: true,
|
||||
credentials: true,
|
||||
}));
|
||||
app.use(express.json({ limit: '50mb' }));
|
||||
app.use(express.urlencoded({ extended: true, limit: '50mb' }));
|
||||
app.use(cookieParser());
|
||||
app.use(morgan('combined'));
|
||||
|
||||
// Route webhook montée en premier avec raw body pour la vérification HMAC
|
||||
app.use('/api/webhook', express.raw({ type: 'application/json', limit: '10mb' }), (req, res, next) => {
|
||||
if (req.body && Buffer.isBuffer(req.body)) {
|
||||
req.rawBody = req.body;
|
||||
try { req.body = JSON.parse(req.body.toString()); } catch(e) { req.body = {}; }
|
||||
}
|
||||
next();
|
||||
}, webhookRoutes);
|
||||
// API routes
|
||||
app.use('/api', routes);
|
||||
|
||||
// Servir le frontend en production
|
||||
const frontendPath = path.join(__dirname, '../../frontend/dist');
|
||||
app.use(express.static(frontendPath));
|
||||
|
||||
// SPA fallback
|
||||
app.get('*', (req, res) => {
|
||||
if (!req.path.startsWith('/api') && !req.path.startsWith('/ws')) {
|
||||
res.sendFile(path.join(frontendPath, 'index.html'));
|
||||
}
|
||||
});
|
||||
|
||||
// Broadcast WebSocket message
|
||||
global.wsBroadcast = broadcast;
|
||||
function broadcast(data) {
|
||||
const message = JSON.stringify(data);
|
||||
wss.clients.forEach((client) => {
|
||||
if (client.readyState === WebSocket.OPEN) {
|
||||
client.send(message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Health check périodique
|
||||
async function runHealthChecks() {
|
||||
try {
|
||||
const results = await checkAllApps();
|
||||
broadcast({ type: 'health_update', data: results });
|
||||
|
||||
// Vérifier les nouveaux commits Gitea
|
||||
for (const appConfig of config.apps) {
|
||||
try {
|
||||
const commits = await getCommits(appConfig.giteaOwner, appConfig.giteaRepo, 5);
|
||||
if (commits.length > 0) {
|
||||
broadcast({
|
||||
type: 'gitea_commits',
|
||||
data: { appId: appConfig.id, commits },
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
// Ignorer les erreurs Gitea
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Erreur health check:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Démarrage
|
||||
async function start() {
|
||||
await initAuth();
|
||||
|
||||
// Charger les applications dynamiques
|
||||
initDynamicApps();
|
||||
|
||||
// Premier health check
|
||||
setTimeout(runHealthChecks, 2000);
|
||||
|
||||
// Health check toutes les 30 secondes
|
||||
setInterval(runHealthChecks, config.healthCheckInterval);
|
||||
|
||||
server.listen(config.port, '0.0.0.0', () => {
|
||||
console.log(`Manus Dashboard Backend démarré sur le port ${config.port}`);
|
||||
console.log(`Frontend servi depuis: ${frontendPath}`);
|
||||
});
|
||||
}
|
||||
|
||||
// WebSocket connection handler
|
||||
wss.on('connection', (ws) => {
|
||||
console.log('Nouvelle connexion WebSocket');
|
||||
|
||||
// Envoyer les statuts actuels
|
||||
const statuses = getAllStatuses();
|
||||
if (statuses.length > 0) {
|
||||
ws.send(JSON.stringify({ type: 'health_update', data: statuses }));
|
||||
}
|
||||
|
||||
ws.on('close', () => {
|
||||
console.log('Connexion WebSocket fermée');
|
||||
});
|
||||
});
|
||||
|
||||
start().catch((err) => {
|
||||
console.error('Erreur au démarrage:', err);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -1,601 +0,0 @@
|
||||
const express = require('express');
|
||||
const multer = require('multer');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const { authenticate, authMiddleware } = require('./auth');
|
||||
const { docker, getContainerInfo, getContainerLogs, listContainers, redeployApp, gitPull, startContainer, stopContainer, restartContainer, getServerMetrics } = require('./docker');
|
||||
const { getRepo, getCommits, getBranches, listRepos } = require('./gitea');
|
||||
const { checkAllApps, addDeploymentLog, updateDeploymentLog, getDeploymentLogs, getAllStatuses, getAppStatus, cleanupOrphanedDeployments } = require('./healthcheck');
|
||||
const { createApplication, getAvailableStacks, initDynamicApps } = require('./app-creator');
|
||||
const config = require('./config');
|
||||
|
||||
// Nettoyer les déploiements orphelins au démarrage (entrées "running" restantes d'un crash précédent)
|
||||
cleanupOrphanedDeployments();
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
// Configuration multer pour l'upload de fichiers ZIP
|
||||
const uploadDir = '/tmp/dashboard-uploads';
|
||||
if (!fs.existsSync(uploadDir)) {
|
||||
fs.mkdirSync(uploadDir, { recursive: true });
|
||||
}
|
||||
|
||||
const upload = multer({
|
||||
dest: uploadDir,
|
||||
limits: { fileSize: 500 * 1024 * 1024 }, // 500MB max
|
||||
fileFilter: (req, file, cb) => {
|
||||
if (file.mimetype === 'application/zip' ||
|
||||
file.mimetype === 'application/x-zip-compressed' ||
|
||||
file.mimetype === 'application/octet-stream' ||
|
||||
file.originalname.endsWith('.zip')) {
|
||||
cb(null, true);
|
||||
} else {
|
||||
cb(new Error('Seuls les fichiers ZIP sont acceptés'), false);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// ============ AUTH ROUTES ============
|
||||
|
||||
router.post('/auth/login', async (req, res) => {
|
||||
try {
|
||||
const { username, password } = req.body;
|
||||
if (!username || !password) {
|
||||
return res.status(400).json({ error: 'Nom d\'utilisateur et mot de passe requis' });
|
||||
}
|
||||
const token = await authenticate(username, password);
|
||||
if (!token) {
|
||||
return res.status(401).json({ error: 'Identifiants invalides' });
|
||||
}
|
||||
// Set cookie
|
||||
res.cookie('dashboard_token', token, {
|
||||
httpOnly: true,
|
||||
secure: true,
|
||||
sameSite: 'strict',
|
||||
maxAge: 24 * 60 * 60 * 1000, // 24h
|
||||
});
|
||||
res.json({ token, username });
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/auth/logout', (req, res) => {
|
||||
res.clearCookie('dashboard_token');
|
||||
res.json({ message: 'Déconnecté' });
|
||||
});
|
||||
|
||||
router.get('/auth/me', authMiddleware, (req, res) => {
|
||||
res.json({ username: req.user.username, role: req.user.role });
|
||||
});
|
||||
|
||||
// ============ APPS ROUTES ============
|
||||
|
||||
// Liste des applications avec leur statut
|
||||
router.get('/apps', authMiddleware, async (req, res) => {
|
||||
try {
|
||||
const statuses = getAllStatuses();
|
||||
if (statuses.length === 0) {
|
||||
// Première requête, lancer un check
|
||||
const results = await checkAllApps();
|
||||
return res.json(results);
|
||||
}
|
||||
res.json(statuses);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
// Détail d'une application
|
||||
router.get('/apps/:id', authMiddleware, async (req, res) => {
|
||||
try {
|
||||
const appConfig = config.apps.find((a) => a.id === req.params.id);
|
||||
if (!appConfig) {
|
||||
return res.status(404).json({ error: 'Application non trouvée' });
|
||||
}
|
||||
|
||||
const status = getAppStatus(appConfig.id);
|
||||
const containerInfo = await getContainerInfo(appConfig.containerName);
|
||||
|
||||
// Récupérer les infos Gitea
|
||||
let giteaInfo = null;
|
||||
let commits = [];
|
||||
try {
|
||||
giteaInfo = await getRepo(appConfig.giteaOwner, appConfig.giteaRepo);
|
||||
commits = await getCommits(appConfig.giteaOwner, appConfig.giteaRepo, 10);
|
||||
} catch (e) {
|
||||
// Gitea peut ne pas être disponible
|
||||
}
|
||||
|
||||
res.json({
|
||||
...status,
|
||||
container: containerInfo,
|
||||
gitea: giteaInfo
|
||||
? {
|
||||
fullName: giteaInfo.full_name,
|
||||
description: giteaInfo.description,
|
||||
defaultBranch: giteaInfo.default_branch,
|
||||
updatedAt: giteaInfo.updated_at,
|
||||
cloneUrl: giteaInfo.clone_url,
|
||||
htmlUrl: giteaInfo.html_url,
|
||||
}
|
||||
: null,
|
||||
commits,
|
||||
});
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
// Forcer un health check
|
||||
router.post('/apps/:id/check', authMiddleware, async (req, res) => {
|
||||
try {
|
||||
const results = await checkAllApps();
|
||||
const result = results.find((r) => r.id === req.params.id);
|
||||
res.json(result || { error: 'Application non trouvée' });
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
// Verrou anti-concurrence par application
|
||||
const deployLocks = new Map();
|
||||
const DEPLOY_TIMEOUT_MS = 10 * 60 * 1000; // 10 minutes max
|
||||
|
||||
// Nettoyage automatique des verrous bloqués toutes les minutes
|
||||
setInterval(() => {
|
||||
const now = Date.now();
|
||||
for (const [appId, lockTime] of deployLocks.entries()) {
|
||||
if (now - lockTime > DEPLOY_TIMEOUT_MS) {
|
||||
deployLocks.delete(appId);
|
||||
const logs = getDeploymentLogs(appId);
|
||||
logs.filter(l => l.status === 'running').forEach(l => {
|
||||
l.status = 'failed';
|
||||
l.message = 'Déploiement interrompu automatiquement (timeout 10 min)';
|
||||
});
|
||||
}
|
||||
}
|
||||
}, 60 * 1000);
|
||||
|
||||
// Redéployer une application
|
||||
router.post('/apps/:id/deploy', authMiddleware, async (req, res) => {
|
||||
try {
|
||||
const appConfig = config.apps.find((a) => a.id === req.params.id);
|
||||
if (!appConfig) {
|
||||
return res.status(404).json({ error: 'Application non trouvée' });
|
||||
}
|
||||
|
||||
// Vérifier si un déploiement est déjà en cours pour cette app
|
||||
if (deployLocks.has(appConfig.id)) {
|
||||
const lockAge = Math.round((Date.now() - deployLocks.get(appConfig.id)) / 1000);
|
||||
return res.status(409).json({
|
||||
error: `Un déploiement est déjà en cours pour ${appConfig.name} (depuis ${lockAge}s)`,
|
||||
status: 'running'
|
||||
});
|
||||
}
|
||||
|
||||
// Poser le verrou
|
||||
deployLocks.set(appConfig.id, Date.now());
|
||||
|
||||
// Ajouter un log de début et récupérer son id pour le mettre à jour plus tard
|
||||
const deployEntry = addDeploymentLog(appConfig.id, {
|
||||
status: 'running',
|
||||
message: `Déploiement de ${appConfig.name} en cours...`,
|
||||
logs: '',
|
||||
user: req.user.username,
|
||||
});
|
||||
|
||||
// Lancer le redéploiement en arrière-plan
|
||||
res.json({ message: `Redéploiement de ${appConfig.name} lancé`, status: 'running' });
|
||||
|
||||
// Timeout de sécurité : si le déploiement dépasse 10 min, on le marque failed
|
||||
const timeoutHandle = setTimeout(() => {
|
||||
if (deployLocks.has(appConfig.id)) {
|
||||
deployLocks.delete(appConfig.id);
|
||||
updateDeploymentLog(deployEntry.id, {
|
||||
status: 'failed',
|
||||
message: `Déploiement de ${appConfig.name} interrompu (timeout 10 min)`,
|
||||
});
|
||||
}
|
||||
}, DEPLOY_TIMEOUT_MS);
|
||||
|
||||
try {
|
||||
// Exécuter le redéploiement
|
||||
const result = await redeployApp(appConfig);
|
||||
clearTimeout(timeoutHandle);
|
||||
|
||||
// Mettre à jour l'entrée existante (pas de doublon "running" + "success")
|
||||
updateDeploymentLog(deployEntry.id, {
|
||||
status: result.success ? 'success' : 'failed',
|
||||
message: result.success
|
||||
? `Redéploiement de ${appConfig.name} réussi en ${result.duration}s`
|
||||
: `Redéploiement de ${appConfig.name} échoué`,
|
||||
logs: result.logs,
|
||||
duration: result.duration,
|
||||
});
|
||||
|
||||
// Relancer un health check après le déploiement
|
||||
setTimeout(() => checkAllApps(), 5000);
|
||||
} finally {
|
||||
// Toujours libérer le verrou
|
||||
deployLocks.delete(appConfig.id);
|
||||
}
|
||||
} catch (err) {
|
||||
deployLocks.delete(req.params.id);
|
||||
addDeploymentLog(req.params.id, {
|
||||
status: 'failed',
|
||||
message: `Erreur: ${err.message}`,
|
||||
logs: '',
|
||||
user: req.user.username,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Logs d'un conteneur
|
||||
router.get('/apps/:id/logs', authMiddleware, async (req, res) => {
|
||||
try {
|
||||
const appConfig = config.apps.find((a) => a.id === req.params.id);
|
||||
if (!appConfig) {
|
||||
return res.status(404).json({ error: 'Application non trouvée' });
|
||||
}
|
||||
const tail = parseInt(req.query.tail) || 100;
|
||||
const logs = await getContainerLogs(appConfig.containerName, tail);
|
||||
res.json({ logs });
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
// ============ CREATE APP ROUTE ============
|
||||
|
||||
// Récupérer les stacks disponibles
|
||||
router.get('/apps-config/stacks', authMiddleware, (req, res) => {
|
||||
res.json(getAvailableStacks());
|
||||
});
|
||||
|
||||
// Créer une nouvelle application
|
||||
router.post('/apps-config/create', authMiddleware, upload.single('zipFile'), async (req, res) => {
|
||||
try {
|
||||
const { name, description, subdomain, stack, port, needsDb, dbType, sourceType, giteaRepoUrl } = req.body;
|
||||
|
||||
// Validation
|
||||
if (!name || !subdomain || !stack || !sourceType) {
|
||||
return res.status(400).json({
|
||||
error: 'Champs requis manquants: name, subdomain, stack, sourceType',
|
||||
});
|
||||
}
|
||||
|
||||
// Vérifier que le subdomain est valide
|
||||
const subdomainRegex = /^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/;
|
||||
if (!subdomainRegex.test(subdomain)) {
|
||||
return res.status(400).json({
|
||||
error: 'Le sous-domaine ne peut contenir que des lettres minuscules, chiffres et tirets',
|
||||
});
|
||||
}
|
||||
|
||||
// Vérifier que l'app n'existe pas déjà
|
||||
const existingApp = config.apps.find((a) => a.id === subdomain);
|
||||
if (existingApp) {
|
||||
return res.status(409).json({
|
||||
error: `Une application avec l'identifiant "${subdomain}" existe déjà`,
|
||||
});
|
||||
}
|
||||
|
||||
// Vérifier le fichier ZIP si sourceType === 'zip'
|
||||
if (sourceType === 'zip' && !req.file) {
|
||||
return res.status(400).json({
|
||||
error: 'Un fichier ZIP est requis pour le type de source "zip"',
|
||||
});
|
||||
}
|
||||
|
||||
// Vérifier l'URL Gitea si sourceType === 'gitea'
|
||||
if (sourceType === 'gitea' && !giteaRepoUrl) {
|
||||
return res.status(400).json({
|
||||
error: 'L\'URL du dépôt Gitea est requise pour le type de source "gitea"',
|
||||
});
|
||||
}
|
||||
|
||||
// Log de début de création et récupérer l'id pour mise à jour ultérieure
|
||||
const logLines = [];
|
||||
const createEntry = addDeploymentLog(subdomain, {
|
||||
status: 'running',
|
||||
message: `Création de l'application ${name} en cours...`,
|
||||
logs: '',
|
||||
user: req.user.username,
|
||||
});
|
||||
|
||||
// Répondre immédiatement
|
||||
res.json({
|
||||
message: `Création de l'application ${name} lancée`,
|
||||
status: 'running',
|
||||
appId: subdomain,
|
||||
});
|
||||
|
||||
// Lancer la création en arrière-plan
|
||||
try {
|
||||
const result = await createApplication(
|
||||
{
|
||||
name,
|
||||
description,
|
||||
subdomain,
|
||||
stack,
|
||||
port: port ? parseInt(port) : null,
|
||||
needsDb: needsDb === 'true' || needsDb === true,
|
||||
dbType: dbType || 'mysql',
|
||||
sourceType,
|
||||
giteaRepoUrl,
|
||||
zipFilePath: req.file ? req.file.path : null,
|
||||
},
|
||||
(line) => logLines.push(line)
|
||||
);
|
||||
|
||||
updateDeploymentLog(createEntry.id, {
|
||||
status: 'success',
|
||||
message: `Application ${name} créée et déployée avec succès`,
|
||||
logs: logLines.join('\n'),
|
||||
});
|
||||
|
||||
// Relancer un health check
|
||||
setTimeout(() => checkAllApps(), 10000);
|
||||
} catch (createErr) {
|
||||
updateDeploymentLog(createEntry.id, {
|
||||
status: 'failed',
|
||||
message: `Création de ${name} échouée: ${createErr.message}`,
|
||||
logs: logLines.join('\n'),
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
// ============ DEPLOYMENT LOGS ============
|
||||
|
||||
router.get('/deployments', authMiddleware, (req, res) => {
|
||||
const appId = req.query.appId || null;
|
||||
res.json(getDeploymentLogs(appId));
|
||||
});
|
||||
|
||||
// ============ GITEA ROUTES ============
|
||||
|
||||
router.get('/gitea/repos', authMiddleware, async (req, res) => {
|
||||
try {
|
||||
const repos = await listRepos();
|
||||
res.json(
|
||||
repos.map((r) => ({
|
||||
id: r.id,
|
||||
name: r.name,
|
||||
fullName: r.full_name,
|
||||
description: r.description,
|
||||
private: r.private,
|
||||
htmlUrl: r.html_url,
|
||||
cloneUrl: r.clone_url,
|
||||
updatedAt: r.updated_at,
|
||||
language: r.language,
|
||||
size: r.size,
|
||||
}))
|
||||
);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/gitea/repos/:owner/:repo/commits', authMiddleware, async (req, res) => {
|
||||
try {
|
||||
const commits = await getCommits(req.params.owner, req.params.repo, 20);
|
||||
res.json(commits);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/gitea/repos/:owner/:repo/branches', authMiddleware, async (req, res) => {
|
||||
try {
|
||||
const branches = await getBranches(req.params.owner, req.params.repo);
|
||||
res.json(branches);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
// ============ 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 });
|
||||
}
|
||||
});
|
||||
|
||||
// ============ PUBLIC APPS ROUTE (sans authentification) ============
|
||||
// Utilisé par le portail applicatif pour construire les tuiles dynamiquement
|
||||
// Ne bloque jamais : retourne les apps avec status 'unknown' si les health checks ne sont pas encore disponibles
|
||||
router.get('/public/apps', (req, res) => {
|
||||
try {
|
||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
||||
res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
|
||||
// getAllStatuses() retourne un tableau vide si aucun check n'a encore été effectué
|
||||
// On ne déclenche PAS checkAllApps() ici pour éviter de bloquer la réponse
|
||||
const statuses = getAllStatuses();
|
||||
const publicApps = config.apps
|
||||
.filter((a) => a.category !== 'INFRA') // Exclure les apps infra (portail, dashboard)
|
||||
.map((a) => {
|
||||
const status = statuses.find((s) => s.id === a.id);
|
||||
return {
|
||||
id: a.id,
|
||||
name: a.name,
|
||||
category: a.category || 'SANTINOVA',
|
||||
image: a.image || ('images/' + a.id + '.png'),
|
||||
urls: a.urls || {},
|
||||
status: status ? status.status : 'unknown',
|
||||
containerRunning: status && status.container ? status.container.running : false,
|
||||
};
|
||||
});
|
||||
res.json(publicApps);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
// ============ DOCKER ROUTES ============
|
||||
|
||||
router.get('/docker/containers', authMiddleware, async (req, res) => {
|
||||
try {
|
||||
const containers = await listContainers();
|
||||
res.json(containers);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
// ============ SYSTEM INFO ============
|
||||
|
||||
router.get('/system/info', authMiddleware, async (req, res) => {
|
||||
try {
|
||||
const containers = await listContainers();
|
||||
res.json({
|
||||
totalApps: config.apps.length,
|
||||
totalContainers: containers.length,
|
||||
runningContainers: containers.filter((c) => c.state === 'running').length,
|
||||
giteaUrl: config.gitea.url,
|
||||
serverTime: new Date().toISOString(),
|
||||
});
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// ============ CONTAINER CONTROL (start/stop/restart) ============
|
||||
router.post('/apps/:id/start', authMiddleware, async (req, res) => {
|
||||
try {
|
||||
const app = config.apps.find((a) => a.id === req.params.id);
|
||||
if (!app) return res.status(404).json({ error: 'Application non trouvée' });
|
||||
const containerName = app.containerName || app.id;
|
||||
const result = await startContainer(containerName, app.id);
|
||||
res.json(result);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/apps/:id/stop', authMiddleware, async (req, res) => {
|
||||
try {
|
||||
const app = config.apps.find((a) => a.id === req.params.id);
|
||||
if (!app) return res.status(404).json({ error: 'Application non trouvée' });
|
||||
const containerName = app.containerName || app.id;
|
||||
const result = await stopContainer(containerName);
|
||||
res.json(result);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/apps/:id/restart', authMiddleware, async (req, res) => {
|
||||
try {
|
||||
const app = config.apps.find((a) => a.id === req.params.id);
|
||||
if (!app) return res.status(404).json({ error: 'Application non trouvée' });
|
||||
const containerName = app.containerName || app.id;
|
||||
const result = await restartContainer(containerName);
|
||||
res.json(result);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
// ============ SERVER METRICS ============
|
||||
router.get('/system/metrics', authMiddleware, async (req, res) => {
|
||||
try {
|
||||
const metrics = await getServerMetrics();
|
||||
res.json(metrics);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
|
||||
// ===== INVENTAIRE DES APPLICATIONS =====
|
||||
const { exec } = require('child_process');
|
||||
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!';
|
||||
const GITEA_PASS_PRD = process.env.GITEA_PASSWORD_PROD || 'ManusGitea2026!';
|
||||
const GITEA_TOKEN_REC = process.env.GITEA_RECETTE_TOKEN || process.env.GITEA_TOKEN || null;
|
||||
|
||||
// INVENTORY_APPS est généré dynamiquement depuis config.apps (lui-même alimenté par la découverte des app.json)
|
||||
function getInventoryApps() {
|
||||
return config.apps.map((a) => ({
|
||||
id: a.id,
|
||||
name: a.name,
|
||||
repoName: a.giteaRepo || a.id,
|
||||
}));
|
||||
}
|
||||
|
||||
function curlGitea(baseUrl, owner, repo, pass, publicBaseUrl, token) {
|
||||
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}"`;
|
||||
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"`;
|
||||
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 INVENTORY_APPS = getInventoryApps();
|
||||
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_PROD_EXTERNAL, owner, app.repoName, GITEA_PASS_PRD),
|
||||
]);
|
||||
return { ...app, repoRecette, repoProd };
|
||||
})
|
||||
);
|
||||
res.json(results);
|
||||
} catch (err) {
|
||||
console.error('Erreur /inventory:', err.message);
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
;
|
||||
@@ -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 };
|
||||
@@ -1,143 +0,0 @@
|
||||
/**
|
||||
* Manus Dashboard - Webhook Handler (CI/CD Gitea)
|
||||
* Route : POST /api/webhook/gitea
|
||||
* Écoute les événements push de Gitea et déclenche le déploiement automatique.
|
||||
*/
|
||||
const express = require('express');
|
||||
const crypto = require('crypto');
|
||||
const { exec } = require('child_process');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
const WEBHOOK_SECRET = process.env.WEBHOOK_SECRET || '';
|
||||
const APPS_BASE_PATH = process.env.APPS_BASE_PATH || '/opt/manus-deploy/apps';
|
||||
const DEPLOY_SCRIPT = '/opt/manus-deploy/scripts/deploy-app.sh';
|
||||
const LOG_DIR = '/var/log/manus-deploy';
|
||||
|
||||
// Mapping dépôt Gitea -> nom du dossier application sur le serveur
|
||||
const REPO_TO_APP_MAP = {
|
||||
'itinova-contacts': 'itinova-contacts',
|
||||
'itinova-podcasts': 'itinova-podcasts',
|
||||
'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)
|
||||
const deployingApps = new Set();
|
||||
|
||||
function verifyGiteaSignature(req) {
|
||||
if (!WEBHOOK_SECRET) {
|
||||
console.warn('[Webhook] AVERTISSEMENT: WEBHOOK_SECRET non défini. Validation désactivée.');
|
||||
return true;
|
||||
}
|
||||
const signature = req.headers['x-gitea-signature'] || req.headers['x-hub-signature-256'] || '';
|
||||
console.log('[Webhook DEBUG] All headers:', JSON.stringify(Object.keys(req.headers)));
|
||||
console.log('[Webhook DEBUG] x-gitea-signature:', req.headers['x-gitea-signature'] || 'ABSENT');
|
||||
console.log('[Webhook DEBUG] rawBody available:', !!req.rawBody, 'length:', req.rawBody ? req.rawBody.length : 0);
|
||||
// Utiliser rawBody si disponible (préservé avant express.json), sinon re-sérialiser
|
||||
const bodyStr = req.rawBody ? req.rawBody.toString() : JSON.stringify(req.body);
|
||||
const hmac = crypto.createHmac('sha256', WEBHOOK_SECRET).update(bodyStr).digest('hex');
|
||||
const expected = `sha256=${hmac}`;
|
||||
const received = signature.startsWith('sha256=') ? signature : `sha256=${signature}`;
|
||||
try {
|
||||
return crypto.timingSafeEqual(Buffer.from(expected), Buffer.from(received));
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function runDeploy(appName, branch, commitHash, committer, broadcast) {
|
||||
if (deployingApps.has(appName)) {
|
||||
console.log(`[Webhook] Déploiement déjà en cours pour ${appName}. Ignoré.`);
|
||||
return;
|
||||
}
|
||||
deployingApps.add(appName);
|
||||
console.log(`[Webhook] Déclenchement déploiement: ${appName} (branch: ${branch}, commit: ${commitHash})`);
|
||||
|
||||
if (broadcast) {
|
||||
broadcast({ type: 'deploy_started', data: { app: appName, commit: commitHash, branch, committer } });
|
||||
}
|
||||
|
||||
const env = { ...process.env, APPS_BASE_PATH };
|
||||
const cmd = `bash ${DEPLOY_SCRIPT} ${appName} recette`;
|
||||
let output = '';
|
||||
|
||||
const child = exec(cmd, { env, timeout: 600000 });
|
||||
child.stdout.on('data', (d) => { output += d; process.stdout.write(`[${appName}] ${d}`); });
|
||||
child.stderr.on('data', (d) => { output += d; process.stderr.write(`[${appName}] ERR: ${d}`); });
|
||||
|
||||
child.on('close', (code) => {
|
||||
deployingApps.delete(appName);
|
||||
const status = code === 0 ? 'success' : 'failed';
|
||||
console.log(`[Webhook] Déploiement ${status} pour ${appName} (exit: ${code})`);
|
||||
if (broadcast) {
|
||||
broadcast({ type: 'deploy_finished', data: { app: appName, status, exitCode: code } });
|
||||
}
|
||||
try {
|
||||
fs.mkdirSync(LOG_DIR, { recursive: true });
|
||||
fs.writeFileSync(path.join(LOG_DIR, `${appName}-last-deploy.json`), JSON.stringify({
|
||||
app: appName, branch, commit: commitHash, committer, status, exitCode: code,
|
||||
timestamp: new Date().toISOString(), output: output.slice(-3000),
|
||||
}, null, 2));
|
||||
} catch (e) { console.error('[Webhook] Erreur sauvegarde statut:', e.message); }
|
||||
});
|
||||
}
|
||||
|
||||
// POST /api/webhook/gitea
|
||||
router.post('/gitea', (req, res) => {
|
||||
if (!verifyGiteaSignature(req)) {
|
||||
console.warn('[Webhook] Signature invalide. Requête rejetée.');
|
||||
return res.status(401).json({ error: 'Signature invalide' });
|
||||
}
|
||||
const event = req.headers['x-gitea-event'] || 'unknown';
|
||||
if (event !== 'push') {
|
||||
return res.status(200).json({ message: `Événement ${event} ignoré` });
|
||||
}
|
||||
const payload = req.body;
|
||||
const repoName = payload?.repository?.name || '';
|
||||
const branch = (payload?.ref || '').replace('refs/heads/', '');
|
||||
const commitHash = (payload?.after || '').slice(0, 8) || 'unknown';
|
||||
const committer = payload?.pusher?.login || payload?.pusher?.name || 'unknown';
|
||||
|
||||
console.log(`[Webhook] Push: repo=${repoName}, branch=${branch}, commit=${commitHash}, by=${committer}`);
|
||||
|
||||
const appName = REPO_TO_APP_MAP[repoName];
|
||||
if (!appName) return res.status(200).json({ message: `Dépôt ${repoName} non configuré` });
|
||||
if (branch !== 'main') return res.status(200).json({ message: `Branch ${branch} ignorée` });
|
||||
|
||||
res.status(202).json({ message: `Déploiement de ${appName} déclenché`, commit: commitHash, branch, committer });
|
||||
|
||||
// Récupérer la fonction broadcast si disponible globalement
|
||||
const broadcastFn = global.wsBroadcast || null;
|
||||
setImmediate(() => runDeploy(appName, branch, commitHash, committer, broadcastFn));
|
||||
});
|
||||
|
||||
// GET /api/webhook/status/:appName
|
||||
router.get('/status/:appName', (req, res) => {
|
||||
const { appName } = req.params;
|
||||
const statusFile = path.join(LOG_DIR, `${appName}-last-deploy.json`);
|
||||
if (!fs.existsSync(statusFile)) return res.status(404).json({ error: 'Aucun déploiement enregistré' });
|
||||
try {
|
||||
const status = JSON.parse(fs.readFileSync(statusFile, 'utf8'));
|
||||
res.json({ ...status, isDeploying: deployingApps.has(appName) });
|
||||
} catch { res.status(500).json({ error: 'Erreur lecture statut' }); }
|
||||
});
|
||||
|
||||
// GET /api/webhook/status
|
||||
router.get('/status', (req, res) => {
|
||||
try {
|
||||
fs.mkdirSync(LOG_DIR, { recursive: true });
|
||||
const files = fs.readdirSync(LOG_DIR).filter(f => f.endsWith('-last-deploy.json'));
|
||||
const statuses = files.map(f => {
|
||||
try { const d = JSON.parse(fs.readFileSync(path.join(LOG_DIR, f), 'utf8')); return { ...d, isDeploying: deployingApps.has(d.app) }; }
|
||||
catch { return null; }
|
||||
}).filter(Boolean);
|
||||
res.json({ deployments: statuses, currentlyDeploying: [...deployingApps] });
|
||||
} catch { res.status(500).json({ error: 'Erreur lecture statuts' }); }
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -1,45 +1,43 @@
|
||||
services:
|
||||
dashboard:
|
||||
build:
|
||||
context: .
|
||||
context: ./src
|
||||
dockerfile: Dockerfile
|
||||
container_name: manus-dashboard
|
||||
restart: unless-stopped
|
||||
restart: always
|
||||
mem_limit: 512m
|
||||
privileged: true
|
||||
env_file:
|
||||
- .env
|
||||
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_USERNAME=manus-admin
|
||||
- GITEA_PASSWORD=ManusGitea2026!
|
||||
- GITEA_TOKEN=1e0b01c361a91d5512e13c78053ac82a66e19427
|
||||
- GITEA_RECETTE_URL=http://gitea:3000
|
||||
- GITEA_PASSWORD_PROD=ManusGitea2026!
|
||||
- APPS_BASE_PATH=/opt/manus-deploy/apps
|
||||
- INFRA_BASE_PATH=/opt/manus-deploy/infrastructure
|
||||
- HEALTH_CHECK_INTERVAL=30000
|
||||
- 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}
|
||||
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
|
||||
extra_hosts:
|
||||
- "git.santinova-soft.org:180.149.196.138"
|
||||
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`)"
|
||||
- "traefik.http.routers.manus-dashboard.rule=Host(`dashboard.recette.santinova-soft.org`) || 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"
|
||||
- "traefik.http.routers.manus-dashboard.service=manus-dashboard-svc"
|
||||
- "traefik.http.routers.manus-dashboard.priority=100"
|
||||
# Service
|
||||
- "traefik.http.services.manus-dashboard-svc.loadbalancer.server.port=3001"
|
||||
- "traefik.docker.network=web"
|
||||
|
||||
networks:
|
||||
web:
|
||||
external: true
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<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 - Gestion des Applications</title>
|
||||
</head>
|
||||
<body class="bg-dark-900 text-white">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,29 +0,0 @@
|
||||
{
|
||||
"name": "manus-dashboard-frontend",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.26.0",
|
||||
"axios": "^1.7.0",
|
||||
"lucide-react": "^0.441.0",
|
||||
"date-fns": "^3.6.0",
|
||||
"date-fns-tz": "^3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.4.41",
|
||||
"tailwindcss": "^3.4.10",
|
||||
"vite": "^5.4.0"
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@@ -1,4 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<rect width="100" height="100" rx="20" fill="#2563eb"/>
|
||||
<text x="50" y="68" font-family="Arial, sans-serif" font-size="50" font-weight="bold" fill="white" text-anchor="middle">M</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 259 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 MiB |
@@ -1,132 +0,0 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import LoginPage from './pages/LoginPage';
|
||||
import DashboardPage from './pages/DashboardPage';
|
||||
import AppsPage from './pages/AppsPage';
|
||||
import MonitoringPage from './pages/MonitoringPage';
|
||||
import DeploymentsPage from './pages/DeploymentsPage';
|
||||
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';
|
||||
export default function App() {
|
||||
const [authenticated, setAuthenticated] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [currentPage, setCurrentPage] = useState('dashboard');
|
||||
const [apps, setApps] = useState([]);
|
||||
// Vérifier l'authentification au chargement
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('dashboard_token');
|
||||
if (token) {
|
||||
getMe()
|
||||
.then(() => {
|
||||
setAuthenticated(true);
|
||||
fetchApps();
|
||||
})
|
||||
.catch(() => {
|
||||
localStorage.removeItem('dashboard_token');
|
||||
setAuthenticated(false);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
const fetchApps = async () => {
|
||||
try {
|
||||
const res = await getApps();
|
||||
setApps(res.data);
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement apps:', err);
|
||||
}
|
||||
};
|
||||
// WebSocket handler
|
||||
const handleWsMessage = useCallback((data) => {
|
||||
if (data.type === 'health_update') {
|
||||
setApps(data.data);
|
||||
}
|
||||
}, []);
|
||||
const { connected: wsConnected } = useWebSocket(
|
||||
authenticated ? handleWsMessage : null
|
||||
);
|
||||
const handleLogin = (data) => {
|
||||
setAuthenticated(true);
|
||||
fetchApps();
|
||||
};
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await apiLogout();
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
localStorage.removeItem('dashboard_token');
|
||||
setAuthenticated(false);
|
||||
setApps([]);
|
||||
};
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-dark-950">
|
||||
<div className="flex items-center gap-3">
|
||||
<svg className="animate-spin h-8 w-8 text-primary-500" viewBox="0 0 24 24">
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-gray-400">Chargement...</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (!authenticated) {
|
||||
return <LoginPage onLogin={handleLogin} />;
|
||||
}
|
||||
const renderPage = () => {
|
||||
switch (currentPage) {
|
||||
case 'dashboard':
|
||||
return <DashboardPage apps={apps} />;
|
||||
case 'apps':
|
||||
return <AppsPage apps={apps} onRefresh={fetchApps} />;
|
||||
case 'deployments':
|
||||
return <DeploymentsPage />;
|
||||
case 'gitea':
|
||||
return <GiteaPage />;
|
||||
case 'docker':
|
||||
return <DockerPage />;
|
||||
case 'monitoring':
|
||||
return <MonitoringPage />;
|
||||
case 'documentation':
|
||||
return <DocumentationPage />;
|
||||
case 'inventaire':
|
||||
return <InventairePage />;
|
||||
case 'terminal':
|
||||
return <TerminalPage />;
|
||||
default:
|
||||
return <DashboardPage apps={apps} />;
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="min-h-screen bg-dark-950">
|
||||
<Sidebar
|
||||
currentPage={currentPage}
|
||||
onNavigate={setCurrentPage}
|
||||
onLogout={handleLogout}
|
||||
wsConnected={wsConnected}
|
||||
/>
|
||||
<main className="ml-64 p-8">{renderPage()}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,679 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
X,
|
||||
Upload,
|
||||
GitBranch,
|
||||
Server,
|
||||
Database,
|
||||
Globe,
|
||||
Package,
|
||||
FileText,
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
Loader2,
|
||||
ChevronDown,
|
||||
} from 'lucide-react';
|
||||
import { getAvailableStacks, createApp, getGiteaRepos } from '../utils/api';
|
||||
|
||||
const STEPS = [
|
||||
{ id: 1, title: 'Informations', icon: FileText },
|
||||
{ id: 2, title: 'Source', icon: GitBranch },
|
||||
{ id: 3, title: 'Stack & Options', icon: Server },
|
||||
{ id: 4, title: 'Confirmation', icon: CheckCircle },
|
||||
];
|
||||
|
||||
export default function AddAppModal({ isOpen, onClose, onSuccess }) {
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
const [stacks, setStacks] = useState([]);
|
||||
const [giteaRepos, setGiteaRepos] = useState([]);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submitResult, setSubmitResult] = useState(null);
|
||||
const [errors, setErrors] = useState({});
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
subdomain: '',
|
||||
sourceType: 'zip',
|
||||
zipFile: null,
|
||||
giteaRepoUrl: '',
|
||||
stack: 'nodejs',
|
||||
port: '',
|
||||
needsDb: false,
|
||||
dbType: 'mysql',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
getAvailableStacks()
|
||||
.then((res) => setStacks(res.data))
|
||||
.catch(console.error);
|
||||
getGiteaRepos()
|
||||
.then((res) => setGiteaRepos(res.data))
|
||||
.catch(console.error);
|
||||
// Reset
|
||||
setCurrentStep(1);
|
||||
setSubmitResult(null);
|
||||
setErrors({});
|
||||
setFormData({
|
||||
name: '',
|
||||
description: '',
|
||||
subdomain: '',
|
||||
sourceType: 'zip',
|
||||
zipFile: null,
|
||||
giteaRepoUrl: '',
|
||||
stack: 'nodejs',
|
||||
port: '',
|
||||
needsDb: false,
|
||||
dbType: 'mysql',
|
||||
});
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const updateField = (field, value) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
setErrors((prev) => ({ ...prev, [field]: null }));
|
||||
};
|
||||
|
||||
const autoSubdomain = (name) => {
|
||||
return name
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9\s-]/g, '')
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/-+/g, '-')
|
||||
.replace(/^-|-$/g, '');
|
||||
};
|
||||
|
||||
const handleNameChange = (value) => {
|
||||
updateField('name', value);
|
||||
if (!formData.subdomain || formData.subdomain === autoSubdomain(formData.name)) {
|
||||
updateField('subdomain', autoSubdomain(value));
|
||||
}
|
||||
};
|
||||
|
||||
const validateStep = (step) => {
|
||||
const newErrors = {};
|
||||
if (step === 1) {
|
||||
if (!formData.name.trim()) newErrors.name = 'Le nom est requis';
|
||||
if (!formData.subdomain.trim()) newErrors.subdomain = 'Le sous-domaine est requis';
|
||||
else if (!/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/.test(formData.subdomain)) {
|
||||
newErrors.subdomain = 'Lettres minuscules, chiffres et tirets uniquement';
|
||||
}
|
||||
}
|
||||
if (step === 2) {
|
||||
if (formData.sourceType === 'zip' && !formData.zipFile) {
|
||||
newErrors.zipFile = 'Un fichier ZIP est requis';
|
||||
}
|
||||
if (formData.sourceType === 'gitea' && !formData.giteaRepoUrl) {
|
||||
newErrors.giteaRepoUrl = 'Sélectionnez un dépôt Gitea';
|
||||
}
|
||||
}
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const nextStep = () => {
|
||||
if (validateStep(currentStep)) {
|
||||
setCurrentStep((prev) => Math.min(prev + 1, 4));
|
||||
}
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
setCurrentStep((prev) => Math.max(prev - 1, 1));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setIsSubmitting(true);
|
||||
setSubmitResult(null);
|
||||
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append('name', formData.name);
|
||||
fd.append('description', formData.description);
|
||||
fd.append('subdomain', formData.subdomain);
|
||||
fd.append('stack', formData.stack);
|
||||
fd.append('sourceType', formData.sourceType);
|
||||
fd.append('needsDb', formData.needsDb.toString());
|
||||
fd.append('dbType', formData.dbType);
|
||||
if (formData.port) fd.append('port', formData.port);
|
||||
|
||||
if (formData.sourceType === 'zip' && formData.zipFile) {
|
||||
fd.append('zipFile', formData.zipFile);
|
||||
}
|
||||
if (formData.sourceType === 'gitea') {
|
||||
fd.append('giteaRepoUrl', formData.giteaRepoUrl);
|
||||
}
|
||||
|
||||
const res = await createApp(fd);
|
||||
setSubmitResult({ success: true, data: res.data });
|
||||
|
||||
// Rafraîchir après un délai
|
||||
setTimeout(() => {
|
||||
if (onSuccess) onSuccess();
|
||||
}, 3000);
|
||||
} catch (err) {
|
||||
setSubmitResult({
|
||||
success: false,
|
||||
error: err.response?.data?.error || err.message,
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const selectedStack = stacks.find((s) => s.id === formData.stack);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
{/* Overlay */}
|
||||
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
|
||||
|
||||
{/* Modal */}
|
||||
<div className="relative bg-dark-800 border border-dark-600 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-dark-600">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-white flex items-center gap-2">
|
||||
<Package className="w-5 h-5 text-primary-400" />
|
||||
Ajouter une application
|
||||
</h2>
|
||||
<p className="text-sm text-gray-400 mt-0.5">
|
||||
Déployez une nouvelle application sur le serveur de recette
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-gray-400 hover:text-white hover:bg-dark-600 rounded-lg transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Steps indicator */}
|
||||
<div className="px-6 py-3 border-b border-dark-600 bg-dark-900/50">
|
||||
<div className="flex items-center justify-between">
|
||||
{STEPS.map((step, idx) => (
|
||||
<div key={step.id} className="flex items-center">
|
||||
<div
|
||||
className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
|
||||
currentStep === step.id
|
||||
? 'bg-primary-500/20 text-primary-400 border border-primary-500/30'
|
||||
: currentStep > step.id
|
||||
? 'bg-green-500/20 text-green-400'
|
||||
: 'text-gray-500'
|
||||
}`}
|
||||
>
|
||||
<step.icon className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">{step.title}</span>
|
||||
</div>
|
||||
{idx < STEPS.length - 1 && (
|
||||
<div
|
||||
className={`w-8 h-0.5 mx-1 ${
|
||||
currentStep > step.id ? 'bg-green-500' : 'bg-dark-600'
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="px-6 py-5 overflow-y-auto max-h-[55vh]">
|
||||
{/* Step 1: Informations */}
|
||||
{currentStep === 1 && (
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
||||
Nom de l'application <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleNameChange(e.target.value)}
|
||||
placeholder="Mon Application"
|
||||
className={`w-full px-4 py-2.5 bg-dark-700 border rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent ${
|
||||
errors.name ? 'border-red-500' : 'border-dark-500'
|
||||
}`}
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="text-red-400 text-xs mt-1">{errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.description}
|
||||
onChange={(e) => updateField('description', e.target.value)}
|
||||
placeholder="Description de l'application..."
|
||||
rows={3}
|
||||
className="w-full px-4 py-2.5 bg-dark-700 border border-dark-500 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
||||
Sous-domaine <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<div className="flex items-center gap-0">
|
||||
<input
|
||||
type="text"
|
||||
value={formData.subdomain}
|
||||
onChange={(e) => updateField('subdomain', e.target.value.toLowerCase())}
|
||||
placeholder="mon-app"
|
||||
className={`flex-1 px-4 py-2.5 bg-dark-700 border rounded-l-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent ${
|
||||
errors.subdomain ? 'border-red-500' : 'border-dark-500'
|
||||
}`}
|
||||
/>
|
||||
<span className="px-3 py-2.5 bg-dark-600 border border-dark-500 border-l-0 rounded-r-lg text-gray-400 text-sm whitespace-nowrap">
|
||||
.recette.santinova-soft.org
|
||||
</span>
|
||||
</div>
|
||||
{errors.subdomain && (
|
||||
<p className="text-red-400 text-xs mt-1">{errors.subdomain}</p>
|
||||
)}
|
||||
{formData.subdomain && !errors.subdomain && (
|
||||
<p className="text-gray-500 text-xs mt-1 flex items-center gap-1">
|
||||
<Globe className="w-3 h-3" />
|
||||
URL: https://{formData.subdomain}.recette.santinova-soft.org
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Source */}
|
||||
{currentStep === 2 && (
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-3">
|
||||
Source du code
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
onClick={() => updateField('sourceType', 'zip')}
|
||||
className={`p-4 rounded-xl border-2 text-left transition-all ${
|
||||
formData.sourceType === 'zip'
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
||||
}`}
|
||||
>
|
||||
<Upload className={`w-6 h-6 mb-2 ${formData.sourceType === 'zip' ? 'text-primary-400' : 'text-gray-400'}`} />
|
||||
<div className={`font-medium ${formData.sourceType === 'zip' ? 'text-white' : 'text-gray-300'}`}>
|
||||
Upload ZIP
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Uploadez une archive ZIP contenant les sources
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => updateField('sourceType', 'gitea')}
|
||||
className={`p-4 rounded-xl border-2 text-left transition-all ${
|
||||
formData.sourceType === 'gitea'
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
||||
}`}
|
||||
>
|
||||
<GitBranch className={`w-6 h-6 mb-2 ${formData.sourceType === 'gitea' ? 'text-primary-400' : 'text-gray-400'}`} />
|
||||
<div className={`font-medium ${formData.sourceType === 'gitea' ? 'text-white' : 'text-gray-300'}`}>
|
||||
Dépôt Gitea
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Utilisez un dépôt Gitea existant
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{formData.sourceType === 'zip' && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
||||
Fichier ZIP <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<div
|
||||
className={`relative border-2 border-dashed rounded-xl p-8 text-center transition-colors ${
|
||||
formData.zipFile
|
||||
? 'border-green-500/50 bg-green-500/5'
|
||||
: errors.zipFile
|
||||
? 'border-red-500/50 bg-red-500/5'
|
||||
: 'border-dark-500 hover:border-dark-400 bg-dark-700'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
accept=".zip"
|
||||
onChange={(e) => updateField('zipFile', e.target.files[0])}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
||||
/>
|
||||
{formData.zipFile ? (
|
||||
<div>
|
||||
<CheckCircle className="w-8 h-8 text-green-400 mx-auto mb-2" />
|
||||
<p className="text-green-400 font-medium">{formData.zipFile.name}</p>
|
||||
<p className="text-gray-500 text-sm mt-1">
|
||||
{(formData.zipFile.size / 1024 / 1024).toFixed(2)} MB
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<Upload className="w-8 h-8 text-gray-500 mx-auto mb-2" />
|
||||
<p className="text-gray-400">Cliquez ou glissez un fichier ZIP ici</p>
|
||||
<p className="text-gray-600 text-sm mt-1">Maximum 500 MB</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{errors.zipFile && (
|
||||
<p className="text-red-400 text-xs mt-1">{errors.zipFile}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{formData.sourceType === 'gitea' && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
||||
Dépôt Gitea <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
{giteaRepos.length === 0 ? (
|
||||
<div className="p-4 bg-dark-700 rounded-lg text-center text-gray-500">
|
||||
<Loader2 className="w-5 h-5 animate-spin mx-auto mb-2" />
|
||||
Chargement des dépôts...
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2 max-h-48 overflow-y-auto pr-1">
|
||||
{giteaRepos.map((repo) => (
|
||||
<button
|
||||
key={repo.id}
|
||||
onClick={() => updateField('giteaRepoUrl', repo.cloneUrl)}
|
||||
className={`w-full p-3 rounded-lg border text-left transition-all ${
|
||||
formData.giteaRepoUrl === repo.cloneUrl
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-medium text-white text-sm">{repo.name}</div>
|
||||
{repo.description && (
|
||||
<div className="text-xs text-gray-500 mt-0.5">{repo.description}</div>
|
||||
)}
|
||||
</div>
|
||||
{repo.language && (
|
||||
<span className="text-xs px-2 py-0.5 bg-dark-600 rounded text-gray-400">
|
||||
{repo.language}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{errors.giteaRepoUrl && (
|
||||
<p className="text-red-400 text-xs mt-1">{errors.giteaRepoUrl}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Stack & Options */}
|
||||
{currentStep === 3 && (
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-3">
|
||||
Type de stack <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{stacks.map((s) => (
|
||||
<button
|
||||
key={s.id}
|
||||
onClick={() => updateField('stack', s.id)}
|
||||
className={`p-3 rounded-lg border text-center transition-all ${
|
||||
formData.stack === s.id
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
||||
}`}
|
||||
>
|
||||
<div className={`text-sm font-medium ${formData.stack === s.id ? 'text-white' : 'text-gray-300'}`}>
|
||||
{s.name}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{selectedStack && (
|
||||
<p className="text-gray-500 text-xs mt-2">{selectedStack.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
||||
Port de l'application (optionnel)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.port}
|
||||
onChange={(e) => updateField('port', e.target.value)}
|
||||
placeholder="Auto-détecté selon la stack"
|
||||
className="w-full px-4 py-2.5 bg-dark-700 border border-dark-500 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="border border-dark-500 rounded-xl p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Database className={`w-5 h-5 ${formData.needsDb ? 'text-primary-400' : 'text-gray-500'}`} />
|
||||
<div>
|
||||
<div className="text-sm font-medium text-white">Base de données</div>
|
||||
<div className="text-xs text-gray-500">Ajouter un conteneur de base de données</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => updateField('needsDb', !formData.needsDb)}
|
||||
className={`relative w-12 h-6 rounded-full transition-colors ${
|
||||
formData.needsDb ? 'bg-primary-500' : 'bg-dark-600'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${
|
||||
formData.needsDb ? 'translate-x-6' : 'translate-x-0.5'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{formData.needsDb && (
|
||||
<div className="mt-4 pt-4 border-t border-dark-500">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Type de base de données
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
onClick={() => updateField('dbType', 'mysql')}
|
||||
className={`p-3 rounded-lg border text-center transition-all ${
|
||||
formData.dbType === 'mysql'
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
||||
}`}
|
||||
>
|
||||
<div className={`text-sm font-medium ${formData.dbType === 'mysql' ? 'text-white' : 'text-gray-300'}`}>
|
||||
MySQL 8.0
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateField('dbType', 'postgres')}
|
||||
className={`p-3 rounded-lg border text-center transition-all ${
|
||||
formData.dbType === 'postgres'
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
||||
}`}
|
||||
>
|
||||
<div className={`text-sm font-medium ${formData.dbType === 'postgres' ? 'text-white' : 'text-gray-300'}`}>
|
||||
PostgreSQL 16
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 4: Confirmation */}
|
||||
{currentStep === 4 && (
|
||||
<div className="space-y-5">
|
||||
{submitResult ? (
|
||||
<div
|
||||
className={`p-6 rounded-xl border ${
|
||||
submitResult.success
|
||||
? 'border-green-500/30 bg-green-500/10'
|
||||
: 'border-red-500/30 bg-red-500/10'
|
||||
}`}
|
||||
>
|
||||
{submitResult.success ? (
|
||||
<div className="text-center">
|
||||
<CheckCircle className="w-12 h-12 text-green-400 mx-auto mb-3" />
|
||||
<h3 className="text-lg font-bold text-green-400">
|
||||
Création lancée avec succès !
|
||||
</h3>
|
||||
<p className="text-gray-400 mt-2 text-sm">
|
||||
L'application est en cours de déploiement. Suivez la progression dans l'onglet Déploiements.
|
||||
</p>
|
||||
<p className="text-gray-500 mt-2 text-xs">
|
||||
URL: https://{formData.subdomain}.recette.santinova-soft.org
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<AlertCircle className="w-12 h-12 text-red-400 mx-auto mb-3" />
|
||||
<h3 className="text-lg font-bold text-red-400">Erreur</h3>
|
||||
<p className="text-gray-400 mt-2 text-sm">{submitResult.error}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<h3 className="text-lg font-semibold text-white">Récapitulatif</h3>
|
||||
<div className="bg-dark-700 rounded-xl divide-y divide-dark-600">
|
||||
<div className="flex justify-between items-center px-4 py-3">
|
||||
<span className="text-gray-400 text-sm">Nom</span>
|
||||
<span className="text-white font-medium">{formData.name}</span>
|
||||
</div>
|
||||
{formData.description && (
|
||||
<div className="flex justify-between items-center px-4 py-3">
|
||||
<span className="text-gray-400 text-sm">Description</span>
|
||||
<span className="text-white text-sm text-right max-w-xs truncate">{formData.description}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between items-center px-4 py-3">
|
||||
<span className="text-gray-400 text-sm">URL</span>
|
||||
<span className="text-primary-400 text-sm">
|
||||
https://{formData.subdomain}.recette.santinova-soft.org
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center px-4 py-3">
|
||||
<span className="text-gray-400 text-sm">Source</span>
|
||||
<span className="text-white text-sm">
|
||||
{formData.sourceType === 'zip'
|
||||
? `ZIP: ${formData.zipFile?.name || '-'}`
|
||||
: `Gitea: ${formData.giteaRepoUrl.split('/').pop()}`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center px-4 py-3">
|
||||
<span className="text-gray-400 text-sm">Stack</span>
|
||||
<span className="text-white text-sm">
|
||||
{selectedStack?.name || formData.stack}
|
||||
</span>
|
||||
</div>
|
||||
{formData.port && (
|
||||
<div className="flex justify-between items-center px-4 py-3">
|
||||
<span className="text-gray-400 text-sm">Port</span>
|
||||
<span className="text-white text-sm">{formData.port}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between items-center px-4 py-3">
|
||||
<span className="text-gray-400 text-sm">Base de données</span>
|
||||
<span className="text-white text-sm">
|
||||
{formData.needsDb
|
||||
? formData.dbType === 'mysql'
|
||||
? 'MySQL 8.0'
|
||||
: 'PostgreSQL 16'
|
||||
: 'Aucune'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-yellow-500/10 border border-yellow-500/30 rounded-xl p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-yellow-400 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="text-yellow-400 text-sm font-medium">
|
||||
Le déploiement peut prendre plusieurs minutes
|
||||
</p>
|
||||
<p className="text-gray-400 text-xs mt-1">
|
||||
Le build Docker et le démarrage des conteneurs seront exécutés en arrière-plan.
|
||||
Vous pourrez suivre la progression dans l'onglet Déploiements.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-t border-dark-600 bg-dark-900/50">
|
||||
<div>
|
||||
{currentStep > 1 && !submitResult && (
|
||||
<button
|
||||
onClick={prevStep}
|
||||
className="px-4 py-2 text-gray-400 hover:text-white transition-colors text-sm"
|
||||
>
|
||||
Retour
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{submitResult ? (
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="btn-primary px-6"
|
||||
>
|
||||
Fermer
|
||||
</button>
|
||||
) : currentStep < 4 ? (
|
||||
<button onClick={nextStep} className="btn-primary px-6">
|
||||
Suivant
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
className="btn-primary px-6 flex items-center gap-2"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
Création en cours...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Package className="w-4 h-4" />
|
||||
Créer et déployer
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,372 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
ExternalLink,
|
||||
RefreshCw,
|
||||
Rocket,
|
||||
Clock,
|
||||
GitBranch,
|
||||
Activity,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Terminal,
|
||||
AlertTriangle,
|
||||
Play,
|
||||
Square,
|
||||
RotateCcw,
|
||||
} from 'lucide-react';
|
||||
import StatusBadge from './StatusBadge';
|
||||
import { deployApp, checkApp, getAppLogs, startApp, stopApp, restartApp } from '../utils/api';
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return 'N/A';
|
||||
try {
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleString('fr-FR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
function formatResponseTime(ms) {
|
||||
if (!ms) return 'N/A';
|
||||
if (ms < 1000) return `${ms}ms`;
|
||||
return `${(ms / 1000).toFixed(1)}s`;
|
||||
}
|
||||
|
||||
export default function AppCard({ app, commits, onRefresh }) {
|
||||
const [deploying, setDeploying] = useState(false);
|
||||
const [checking, setChecking] = useState(false);
|
||||
const [showLogs, setShowLogs] = useState(false);
|
||||
const [containerLogs, setContainerLogs] = useState('');
|
||||
const [loadingLogs, setLoadingLogs] = useState(false);
|
||||
const [deployMessage, setDeployMessage] = useState(null);
|
||||
const [loadingControl, setLoadingControl] = useState(null);
|
||||
|
||||
const handleContainerControl = async (action) => {
|
||||
setLoadingControl(action);
|
||||
try {
|
||||
if (action === 'start') await startApp(app.id);
|
||||
else if (action === 'stop') await stopApp(app.id);
|
||||
else if (action === 'restart') await restartApp(app.id);
|
||||
setTimeout(() => { if (onRefresh) onRefresh(); }, 2000);
|
||||
} catch (err) {
|
||||
console.error('Erreur controle conteneur:', err);
|
||||
} finally {
|
||||
setLoadingControl(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeploy = async () => {
|
||||
if (!confirm(`Voulez-vous redéployer ${app.name} ?`)) return;
|
||||
setDeploying(true);
|
||||
setDeployMessage(null);
|
||||
try {
|
||||
const res = await deployApp(app.id);
|
||||
setDeployMessage({
|
||||
type: 'info',
|
||||
text: res.data.message || 'Redéploiement lancé...',
|
||||
});
|
||||
// Rafraîchir après un délai
|
||||
setTimeout(() => {
|
||||
if (onRefresh) onRefresh();
|
||||
setDeploying(false);
|
||||
}, 10000);
|
||||
} catch (err) {
|
||||
setDeployMessage({
|
||||
type: 'error',
|
||||
text: err.response?.data?.error || 'Erreur lors du redéploiement',
|
||||
});
|
||||
setDeploying(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCheck = async () => {
|
||||
setChecking(true);
|
||||
try {
|
||||
await checkApp(app.id);
|
||||
if (onRefresh) onRefresh();
|
||||
} catch (err) {
|
||||
console.error('Erreur health check:', err);
|
||||
} finally {
|
||||
setChecking(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleShowLogs = async () => {
|
||||
if (showLogs) {
|
||||
setShowLogs(false);
|
||||
return;
|
||||
}
|
||||
setLoadingLogs(true);
|
||||
setShowLogs(true);
|
||||
try {
|
||||
const res = await getAppLogs(app.id, 50);
|
||||
setContainerLogs(res.data.logs || 'Aucun log disponible');
|
||||
} catch (err) {
|
||||
setContainerLogs('Erreur lors de la récupération des logs');
|
||||
} finally {
|
||||
setLoadingLogs(false);
|
||||
}
|
||||
};
|
||||
|
||||
const latestCommit = commits && commits.length > 0 ? commits[0] : null;
|
||||
|
||||
// Apps d'infrastructure : portail et dashboard
|
||||
const isInfra = ['portail-santinova', 'manus-dashboard'].includes(app.id);
|
||||
|
||||
return (
|
||||
<div className={`card overflow-hidden${isInfra ? ' border border-amber-500/30 bg-amber-950/10' : ''}`}>
|
||||
{/* Badge infra */}
|
||||
{isInfra && (
|
||||
<div className="px-6 pt-3 pb-0">
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-500/15 text-amber-400 border border-amber-500/30">
|
||||
⚙ Infrastructure
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-dark-700">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<h3 className="text-lg font-semibold text-white">{app.name}</h3>
|
||||
<StatusBadge status={app.status} />
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm mt-1">
|
||||
{app.description || app.id}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleCheck}
|
||||
disabled={checking}
|
||||
className="btn-secondary py-1.5 px-3 text-sm flex items-center gap-1.5"
|
||||
title="Vérifier l'état"
|
||||
>
|
||||
<RefreshCw
|
||||
className={`w-3.5 h-3.5 ${checking ? 'animate-spin' : ''}`}
|
||||
/>
|
||||
Vérifier
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDeploy}
|
||||
disabled={deploying}
|
||||
className="btn-primary py-1.5 px-3 text-sm flex items-center gap-1.5"
|
||||
title="Redéployer l'application"
|
||||
>
|
||||
<Rocket
|
||||
className={`w-3.5 h-3.5 ${deploying ? 'animate-bounce' : ''}`}
|
||||
/>
|
||||
{deploying ? 'Déploiement...' : 'Redéployer'}
|
||||
</button>
|
||||
{/* Boutons contrôle conteneur */}
|
||||
<div className="flex items-center gap-1 ml-1 border-l border-dark-600 pl-2">
|
||||
<button
|
||||
onClick={() => handleContainerControl('start')}
|
||||
disabled={loadingControl !== null || app.container?.state === 'running'}
|
||||
title="Démarrer le conteneur"
|
||||
className="p-1.5 rounded-lg text-emerald-400 hover:bg-emerald-500/10 border border-emerald-500/20 disabled:opacity-40 disabled:cursor-not-allowed transition-all"
|
||||
>
|
||||
{loadingControl === 'start' ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <Play className="w-3.5 h-3.5" />}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleContainerControl('stop')}
|
||||
disabled={loadingControl !== null || app.container?.state !== 'running'}
|
||||
title="Arrêter le conteneur"
|
||||
className="p-1.5 rounded-lg text-red-400 hover:bg-red-500/10 border border-red-500/20 disabled:opacity-40 disabled:cursor-not-allowed transition-all"
|
||||
>
|
||||
{loadingControl === 'stop' ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <Square className="w-3.5 h-3.5" />}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleContainerControl('restart')}
|
||||
disabled={loadingControl !== null}
|
||||
title="Redémarrer le conteneur"
|
||||
className="p-1.5 rounded-lg text-amber-400 hover:bg-amber-500/10 border border-amber-500/20 disabled:opacity-40 disabled:cursor-not-allowed transition-all"
|
||||
>
|
||||
{loadingControl === 'restart' ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <RotateCcw className="w-3.5 h-3.5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Deploy message */}
|
||||
{deployMessage && (
|
||||
<div
|
||||
className={`px-6 py-3 text-sm flex items-center gap-2 ${
|
||||
deployMessage.type === 'error'
|
||||
? 'bg-red-500/10 text-red-400'
|
||||
: 'bg-primary-500/10 text-primary-400'
|
||||
}`}
|
||||
>
|
||||
{deployMessage.type === 'error' ? (
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
) : (
|
||||
<Rocket className="w-4 h-4" />
|
||||
)}
|
||||
{deployMessage.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Info Grid */}
|
||||
<div className="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{/* URLs */}
|
||||
<div>
|
||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
URLs
|
||||
</span>
|
||||
<div className="mt-1.5 space-y-1">
|
||||
{app.urls?.recette && (
|
||||
<a
|
||||
href={app.urls.recette}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1.5 text-sm text-primary-400 hover:text-primary-300 transition-colors"
|
||||
>
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
Recette
|
||||
</a>
|
||||
)}
|
||||
{app.urls?.prod ? (
|
||||
<a
|
||||
href={app.urls.prod}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1.5 text-sm text-emerald-400 hover:text-emerald-300 transition-colors"
|
||||
>
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
Production
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-sm text-gray-600">Pas de prod</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Container */}
|
||||
<div>
|
||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Conteneur
|
||||
</span>
|
||||
<div className="mt-1.5">
|
||||
{app.container ? (
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm text-gray-300">
|
||||
<span className="text-gray-500">ID:</span>{' '}
|
||||
<code className="text-xs bg-dark-700 px-1.5 py-0.5 rounded">
|
||||
{app.container.id}
|
||||
</code>
|
||||
</p>
|
||||
<p className="text-sm text-gray-300">
|
||||
<span className="text-gray-500">État:</span>{' '}
|
||||
{app.container.state}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-gray-600">Non trouvé</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Health */}
|
||||
<div>
|
||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Santé
|
||||
</span>
|
||||
<div className="mt-1.5 space-y-1">
|
||||
{app.health?.recette && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity
|
||||
className={`w-3.5 h-3.5 ${
|
||||
app.health.recette.online
|
||||
? 'text-emerald-400'
|
||||
: 'text-red-400'
|
||||
}`}
|
||||
/>
|
||||
<span className="text-sm text-gray-300">
|
||||
{app.health.recette.online ? (
|
||||
<>
|
||||
HTTP {app.health.recette.statusCode} —{' '}
|
||||
{formatResponseTime(app.health.recette.responseTime)}
|
||||
</>
|
||||
) : (
|
||||
<span className="text-red-400">
|
||||
{app.health.recette.error || 'Inaccessible'}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-gray-600">
|
||||
<Clock className="w-3 h-3 inline mr-1" />
|
||||
{formatDate(app.lastCheck)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Latest Commit */}
|
||||
{latestCommit && (
|
||||
<div className="px-6 py-3 border-t border-dark-700 bg-dark-800/50">
|
||||
<div className="flex items-center gap-2">
|
||||
<GitBranch className="w-4 h-4 text-gray-500" />
|
||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Dernier commit
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1.5 flex items-center gap-3">
|
||||
<code className="text-xs bg-primary-500/10 text-primary-400 px-2 py-0.5 rounded font-mono">
|
||||
{latestCommit.shortSha}
|
||||
</code>
|
||||
<span className="text-sm text-gray-300 truncate flex-1">
|
||||
{latestCommit.message}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 flex-shrink-0">
|
||||
{latestCommit.author} — {formatDate(latestCommit.date)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Logs Toggle */}
|
||||
<div className="border-t border-dark-700">
|
||||
<button
|
||||
onClick={handleShowLogs}
|
||||
className="w-full px-6 py-3 flex items-center justify-between text-sm text-gray-400 hover:text-gray-300 hover:bg-dark-700/50 transition-colors"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<Terminal className="w-4 h-4" />
|
||||
Logs du conteneur
|
||||
</span>
|
||||
{showLogs ? (
|
||||
<ChevronUp className="w-4 h-4" />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
{showLogs && (
|
||||
<div className="px-6 pb-4">
|
||||
<div className="bg-dark-950 rounded-lg p-4 max-h-64 overflow-auto">
|
||||
{loadingLogs ? (
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
<RefreshCw className="w-4 h-4 animate-spin" />
|
||||
Chargement des logs...
|
||||
</div>
|
||||
) : (
|
||||
<pre className="log-viewer text-xs text-gray-400">
|
||||
{containerLogs}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
import React from 'react';
|
||||
import { LayoutList, TerminalSquare,
|
||||
Server,
|
||||
LayoutDashboard,
|
||||
Box,
|
||||
GitBranch,
|
||||
ScrollText,
|
||||
Container,
|
||||
LogOut,
|
||||
Wifi,
|
||||
WifiOff,
|
||||
Activity,
|
||||
BookOpen,
|
||||
} from 'lucide-react';
|
||||
const navItems = [
|
||||
{ id: 'dashboard', label: 'Tableau de bord', icon: LayoutDashboard },
|
||||
{ id: 'apps', label: 'Applications', icon: Box },
|
||||
{ id: 'deployments', label: 'Déploiements', icon: ScrollText },
|
||||
{ id: 'gitea', label: 'Gitea', icon: GitBranch },
|
||||
{ id: 'docker', label: 'Docker', icon: Container },
|
||||
{ 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,
|
||||
onNavigate,
|
||||
onLogout,
|
||||
wsConnected,
|
||||
}) {
|
||||
return (
|
||||
<aside className="w-64 bg-dark-900 border-r border-dark-700 flex flex-col h-screen fixed left-0 top-0">
|
||||
{/* Logo */}
|
||||
<div className="p-6 border-b border-dark-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-primary-600 flex items-center justify-center">
|
||||
<Server className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-lg font-bold text-white">Dashboard</h1>
|
||||
<p className="text-xs text-gray-500">{window.location.hostname.includes('recette') ? 'Recette' : 'Production'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 p-4 space-y-1 overflow-y-auto">
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = currentPage === item.id;
|
||||
const isDoc = item.id === 'documentation';
|
||||
return (
|
||||
<button
|
||||
key={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 ${
|
||||
isActive
|
||||
? 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'
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-4.5 h-4.5" />
|
||||
{item.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
{/* Footer */}
|
||||
<div className="p-4 border-t border-dark-700 space-y-3">
|
||||
{/* WebSocket status */}
|
||||
<div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-dark-800">
|
||||
{wsConnected ? (
|
||||
<>
|
||||
<Wifi className="w-4 h-4 text-emerald-400" />
|
||||
<span className="text-xs text-emerald-400">Temps réel actif</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<WifiOff className="w-4 h-4 text-gray-500" />
|
||||
<span className="text-xs text-gray-500">Hors ligne</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<LogOut className="w-4.5 h-4.5" />
|
||||
Déconnexion
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const statusConfig = {
|
||||
online: {
|
||||
label: 'En ligne',
|
||||
className: 'status-online',
|
||||
dotColor: 'bg-emerald-400',
|
||||
},
|
||||
offline: {
|
||||
label: 'Hors ligne',
|
||||
className: 'status-offline',
|
||||
dotColor: 'bg-gray-400',
|
||||
},
|
||||
error: {
|
||||
label: 'Erreur',
|
||||
className: 'status-error',
|
||||
dotColor: 'bg-red-400',
|
||||
},
|
||||
unknown: {
|
||||
label: 'Inconnu',
|
||||
className: 'status-warning',
|
||||
dotColor: 'bg-amber-400',
|
||||
},
|
||||
running: {
|
||||
label: 'En cours',
|
||||
className: 'status-warning',
|
||||
dotColor: 'bg-amber-400',
|
||||
},
|
||||
success: {
|
||||
label: 'Succès',
|
||||
className: 'status-online',
|
||||
dotColor: 'bg-emerald-400',
|
||||
},
|
||||
failed: {
|
||||
label: 'Échoué',
|
||||
className: 'status-error',
|
||||
dotColor: 'bg-red-400',
|
||||
},
|
||||
};
|
||||
|
||||
export default function StatusBadge({ status, size = 'sm' }) {
|
||||
const config = statusConfig[status] || statusConfig.unknown;
|
||||
|
||||
return (
|
||||
<span className={config.className}>
|
||||
<span
|
||||
className={`w-2 h-2 rounded-full ${config.dotColor} mr-1.5 ${
|
||||
status === 'online' || status === 'running' ? 'animate-pulse-dot' : ''
|
||||
}`}
|
||||
/>
|
||||
{config.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import { useEffect, useRef, useState, useCallback } from 'react';
|
||||
|
||||
export default function useWebSocket(onMessage) {
|
||||
const wsRef = useRef(null);
|
||||
const [connected, setConnected] = useState(false);
|
||||
const reconnectTimeout = useRef(null);
|
||||
|
||||
const connect = useCallback(() => {
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsUrl = `${protocol}//${window.location.host}/ws`;
|
||||
|
||||
try {
|
||||
const ws = new WebSocket(wsUrl);
|
||||
wsRef.current = ws;
|
||||
|
||||
ws.onopen = () => {
|
||||
setConnected(true);
|
||||
console.log('WebSocket connecté');
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
if (onMessage) onMessage(data);
|
||||
} catch (e) {
|
||||
console.error('Erreur parsing WS message:', e);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
setConnected(false);
|
||||
console.log('WebSocket déconnecté, reconnexion dans 5s...');
|
||||
reconnectTimeout.current = setTimeout(connect, 5000);
|
||||
};
|
||||
|
||||
ws.onerror = (err) => {
|
||||
console.error('Erreur WebSocket:', err);
|
||||
ws.close();
|
||||
};
|
||||
} catch (err) {
|
||||
console.error('Erreur connexion WebSocket:', err);
|
||||
reconnectTimeout.current = setTimeout(connect, 5000);
|
||||
}
|
||||
}, [onMessage]);
|
||||
|
||||
useEffect(() => {
|
||||
connect();
|
||||
return () => {
|
||||
if (wsRef.current) wsRef.current.close();
|
||||
if (reconnectTimeout.current) clearTimeout(reconnectTimeout.current);
|
||||
};
|
||||
}, [connect]);
|
||||
|
||||
return { connected };
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply bg-dark-950 text-gray-100 antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn-primary {
|
||||
@apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-dark-900 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
@apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-dark-900 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-dark-700 hover:bg-dark-600 text-gray-200 font-medium py-2 px-4 rounded-lg transition-colors duration-200 border border-dark-600 focus:outline-none focus:ring-2 focus:ring-dark-500 focus:ring-offset-2 focus:ring-offset-dark-900;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-dark-800 border border-dark-700 rounded-xl shadow-lg;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
@apply w-full bg-dark-700 border border-dark-600 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
.status-online {
|
||||
@apply status-badge bg-emerald-500/20 text-emerald-400 border border-emerald-500/30;
|
||||
}
|
||||
|
||||
.status-offline {
|
||||
@apply status-badge bg-gray-500/20 text-gray-400 border border-gray-500/30;
|
||||
}
|
||||
|
||||
.status-error {
|
||||
@apply status-badge bg-red-500/20 text-red-400 border border-red-500/30;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
@apply status-badge bg-amber-500/20 text-amber-400 border border-amber-500/30;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-dark-900;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-dark-600 rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-dark-500;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.animate-pulse-dot {
|
||||
animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
/* Log viewer */
|
||||
.log-viewer {
|
||||
@apply font-mono text-sm leading-relaxed whitespace-pre-wrap break-all;
|
||||
}
|
||||
|
||||
.log-viewer .log-timestamp {
|
||||
@apply text-gray-500;
|
||||
}
|
||||
|
||||
.log-viewer .log-error {
|
||||
@apply text-red-400;
|
||||
}
|
||||
|
||||
.log-viewer .log-success {
|
||||
@apply text-emerald-400;
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
@@ -1,108 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Box, RefreshCw, Plus } from 'lucide-react';
|
||||
import AppCard from '../components/AppCard';
|
||||
import AddAppModal from '../components/AddAppModal';
|
||||
import { getApps, getGiteaCommits } from '../utils/api';
|
||||
|
||||
export default function AppsPage({ apps, onRefresh }) {
|
||||
const [commitsMap, setCommitsMap] = useState({});
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Charger les commits pour chaque app
|
||||
apps.forEach((app) => {
|
||||
const owner = app.giteaOwner || 'manus-admin';
|
||||
const repo = app.giteaRepo || app.id;
|
||||
getGiteaCommits(owner, repo)
|
||||
.then((res) => {
|
||||
setCommitsMap((prev) => ({
|
||||
...prev,
|
||||
[app.id]: res.data,
|
||||
}));
|
||||
})
|
||||
.catch(() => {
|
||||
// Ignorer les erreurs Gitea pour les apps sans dépôt
|
||||
});
|
||||
});
|
||||
}, [apps]);
|
||||
|
||||
const handleAddSuccess = () => {
|
||||
setShowAddModal(false);
|
||||
// Rafraîchir la liste après un délai pour laisser le temps au health check
|
||||
setTimeout(() => {
|
||||
if (onRefresh) onRefresh();
|
||||
}, 5000);
|
||||
// Rafraîchir encore après 15s
|
||||
setTimeout(() => {
|
||||
if (onRefresh) onRefresh();
|
||||
}, 15000);
|
||||
};
|
||||
|
||||
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">
|
||||
<Box className="w-7 h-7 text-primary-400" />
|
||||
Applications
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Gérez et surveillez vos applications déployées
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button onClick={onRefresh} className="btn-secondary flex items-center gap-2">
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
Rafraîchir
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className="btn-primary flex items-center gap-2"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Ajouter une application
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Apps List */}
|
||||
{apps.length === 0 ? (
|
||||
<div className="card p-12 text-center">
|
||||
<Box className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-400">
|
||||
Aucune application
|
||||
</h3>
|
||||
<p className="text-gray-600 mt-2">
|
||||
Les applications déployées apparaîtront ici
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className="btn-primary mt-4 inline-flex items-center gap-2"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Ajouter votre première application
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{apps.map((app) => (
|
||||
<AppCard
|
||||
key={app.id}
|
||||
app={app}
|
||||
commits={commitsMap[app.id] || []}
|
||||
onRefresh={onRefresh}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add App Modal */}
|
||||
<AddAppModal
|
||||
isOpen={showAddModal}
|
||||
onClose={() => setShowAddModal(false)}
|
||||
onSuccess={handleAddSuccess}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,190 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Activity,
|
||||
Box,
|
||||
Container,
|
||||
Server,
|
||||
Clock,
|
||||
TrendingUp,
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
} from 'lucide-react';
|
||||
import { getApps, getSystemInfo } from '../utils/api';
|
||||
import StatusBadge from '../components/StatusBadge';
|
||||
|
||||
function StatCard({ icon: Icon, label, value, color, subtext }) {
|
||||
return (
|
||||
<div className="card p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">{label}</p>
|
||||
<p className="text-2xl font-bold text-white mt-1">{value}</p>
|
||||
{subtext && <p className="text-xs text-gray-500 mt-1">{subtext}</p>}
|
||||
</div>
|
||||
<div
|
||||
className={`w-12 h-12 rounded-xl flex items-center justify-center ${color}`}
|
||||
>
|
||||
<Icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardPage({ apps }) {
|
||||
const [systemInfo, setSystemInfo] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
getSystemInfo()
|
||||
.then((res) => setSystemInfo(res.data))
|
||||
.catch(console.error);
|
||||
}, []);
|
||||
|
||||
const onlineApps = apps.filter((a) => a.status === 'online').length;
|
||||
const offlineApps = apps.filter((a) => a.status === 'offline').length;
|
||||
const errorApps = apps.filter((a) => a.status === 'error').length;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white">Tableau de bord</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Vue d'ensemble de l'infrastructure Manus
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
icon={Box}
|
||||
label="Applications"
|
||||
value={apps.length}
|
||||
color="bg-primary-600"
|
||||
subtext="Applications déployées"
|
||||
/>
|
||||
<StatCard
|
||||
icon={CheckCircle2}
|
||||
label="En ligne"
|
||||
value={onlineApps}
|
||||
color="bg-emerald-600"
|
||||
subtext="Applications fonctionnelles"
|
||||
/>
|
||||
<StatCard
|
||||
icon={XCircle}
|
||||
label="Hors ligne"
|
||||
value={offlineApps}
|
||||
color="bg-gray-600"
|
||||
subtext="Applications arrêtées"
|
||||
/>
|
||||
<StatCard
|
||||
icon={AlertCircle}
|
||||
label="Erreurs"
|
||||
value={errorApps}
|
||||
color="bg-red-600"
|
||||
subtext="Applications en erreur"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* System Info + Apps Overview */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* System Info */}
|
||||
<div className="card p-6">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Server className="w-5 h-5 text-primary-400" />
|
||||
Informations système
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<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)
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-2 border-b border-dark-700">
|
||||
<span className="text-sm text-gray-400">Conteneurs actifs</span>
|
||||
<span className="text-sm text-gray-200">
|
||||
{systemInfo?.runningContainers || '...'} /{' '}
|
||||
{systemInfo?.totalContainers || '...'}
|
||||
</span>
|
||||
</div>
|
||||
<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"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-primary-400 hover:text-primary-300"
|
||||
>
|
||||
git.recette.santinova-soft.org
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-2 border-b border-dark-700">
|
||||
<span className="text-sm text-gray-400">Reverse Proxy</span>
|
||||
<span className="text-sm text-gray-200">
|
||||
Traefik + Let's Encrypt
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<span className="text-sm text-gray-400">Heure serveur</span>
|
||||
<span className="text-sm text-gray-200">
|
||||
{systemInfo?.serverTime
|
||||
? new Date(systemInfo.serverTime).toLocaleString('fr-FR')
|
||||
: '...'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Apps Quick View */}
|
||||
<div className="card p-6">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Activity className="w-5 h-5 text-primary-400" />
|
||||
État des applications
|
||||
</h3>
|
||||
{apps.length === 0 ? (
|
||||
<p className="text-gray-500 text-sm">Aucune application détectée</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{apps.map((app) => (
|
||||
<div
|
||||
key={app.id}
|
||||
className="flex items-center justify-between py-3 px-4 rounded-lg bg-dark-700/50 border border-dark-600/50"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full ${
|
||||
app.status === 'online'
|
||||
? 'bg-emerald-400 animate-pulse-dot'
|
||||
: app.status === 'error'
|
||||
? 'bg-red-400'
|
||||
: 'bg-gray-500'
|
||||
}`}
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-200">
|
||||
{app.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{app.containerName}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{app.health?.recette?.responseTime && (
|
||||
<span className="text-xs text-gray-500">
|
||||
{app.health.recette.responseTime}ms
|
||||
</span>
|
||||
)}
|
||||
<StatusBadge status={app.status} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,157 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
ScrollText,
|
||||
RefreshCw,
|
||||
Clock,
|
||||
User,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Loader,
|
||||
} from 'lucide-react';
|
||||
import { getDeployments } from '../utils/api';
|
||||
import StatusBadge from '../components/StatusBadge';
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return 'N/A';
|
||||
try {
|
||||
return new Date(dateStr).toLocaleString('fr-FR');
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
function DeploymentEntry({ deployment }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const statusIcon = {
|
||||
success: <CheckCircle2 className="w-5 h-5 text-emerald-400" />,
|
||||
failed: <XCircle className="w-5 h-5 text-red-400" />,
|
||||
running: <Loader className="w-5 h-5 text-amber-400 animate-spin" />,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card overflow-hidden">
|
||||
<div
|
||||
className="p-4 flex items-center justify-between cursor-pointer hover:bg-dark-700/50 transition-colors"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
{statusIcon[deployment.status] || statusIcon.running}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-200">
|
||||
{deployment.message}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 mt-1">
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{formatDate(deployment.timestamp)}
|
||||
</span>
|
||||
{deployment.user && (
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<User className="w-3 h-3" />
|
||||
{deployment.user}
|
||||
</span>
|
||||
)}
|
||||
{deployment.duration && (
|
||||
<span className="text-xs text-gray-500">
|
||||
Durée: {deployment.duration}s
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<StatusBadge status={deployment.status} />
|
||||
{expanded ? (
|
||||
<ChevronUp className="w-4 h-4 text-gray-500" />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4 text-gray-500" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{expanded && deployment.logs && (
|
||||
<div className="px-4 pb-4 border-t border-dark-700">
|
||||
<div className="bg-dark-950 rounded-lg p-4 mt-3 max-h-96 overflow-auto">
|
||||
<pre className="log-viewer text-xs text-gray-400">
|
||||
{deployment.logs}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DeploymentsPage() {
|
||||
const [deployments, setDeployments] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchDeployments = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getDeployments();
|
||||
setDeployments(res.data);
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement déploiements:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchDeployments();
|
||||
const interval = setInterval(fetchDeployments, 10000);
|
||||
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">
|
||||
<ScrollText className="w-7 h-7 text-primary-400" />
|
||||
Historique des déploiements
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Consultez les logs des derniers déploiements
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={fetchDeployments}
|
||||
className="btn-secondary flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
Rafraîchir
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Deployments List */}
|
||||
{loading && deployments.length === 0 ? (
|
||||
<div className="card p-12 text-center">
|
||||
<RefreshCw className="w-8 h-8 text-gray-600 mx-auto mb-4 animate-spin" />
|
||||
<p className="text-gray-400">Chargement...</p>
|
||||
</div>
|
||||
) : deployments.length === 0 ? (
|
||||
<div className="card p-12 text-center">
|
||||
<ScrollText className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-400">
|
||||
Aucun déploiement
|
||||
</h3>
|
||||
<p className="text-gray-600 mt-2">
|
||||
L'historique des déploiements apparaîtra ici après le premier
|
||||
redéploiement
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{deployments.map((d) => (
|
||||
<DeploymentEntry key={d.id} deployment={d} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,164 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Container, RefreshCw, Clock } from 'lucide-react';
|
||||
import { getContainers } from '../utils/api';
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return 'N/A';
|
||||
try {
|
||||
return new Date(dateStr).toLocaleString('fr-FR');
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
export default function DockerPage() {
|
||||
const [containers, setContainers] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchContainers = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getContainers();
|
||||
setContainers(res.data);
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement conteneurs:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchContainers();
|
||||
const interval = setInterval(fetchContainers, 15000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const stateColors = {
|
||||
running: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
|
||||
exited: 'text-red-400 bg-red-500/10 border-red-500/20',
|
||||
created: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
|
||||
restarting: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
|
||||
};
|
||||
|
||||
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">
|
||||
<Container className="w-7 h-7 text-primary-400" />
|
||||
Conteneurs Docker
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Vue d'ensemble de tous les conteneurs sur le serveur
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={fetchContainers}
|
||||
className="btn-secondary flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
Rafraîchir
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Containers Table */}
|
||||
<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 text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
Nom
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
Image
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
État
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
Statut
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
ID
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
Créé
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-dark-700">
|
||||
{loading && containers.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan="6" className="px-6 py-8 text-center">
|
||||
<RefreshCw className="w-6 h-6 text-gray-600 mx-auto animate-spin" />
|
||||
</td>
|
||||
</tr>
|
||||
) : containers.length === 0 ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan="6"
|
||||
className="px-6 py-8 text-center text-gray-500"
|
||||
>
|
||||
Aucun conteneur trouvé
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
containers.map((c) => (
|
||||
<tr
|
||||
key={c.id}
|
||||
className="hover:bg-dark-700/30 transition-colors"
|
||||
>
|
||||
<td className="px-6 py-3">
|
||||
<span className="text-sm font-medium text-gray-200">
|
||||
{c.names.join(', ')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<code className="text-xs text-gray-400 bg-dark-700 px-2 py-0.5 rounded">
|
||||
{c.image}
|
||||
</code>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<span
|
||||
className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border ${
|
||||
stateColors[c.state] || stateColors.created
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`w-1.5 h-1.5 rounded-full mr-1.5 ${
|
||||
c.state === 'running'
|
||||
? 'bg-emerald-400'
|
||||
: c.state === 'exited'
|
||||
? 'bg-red-400'
|
||||
: 'bg-amber-400'
|
||||
}`}
|
||||
/>
|
||||
{c.state}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<span className="text-xs text-gray-400">{c.status}</span>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<code className="text-xs text-gray-500 font-mono">
|
||||
{c.id}
|
||||
</code>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{formatDate(c.created)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,420 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,227 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
GitBranch,
|
||||
RefreshCw,
|
||||
ExternalLink,
|
||||
Lock,
|
||||
Unlock,
|
||||
GitCommit,
|
||||
Clock,
|
||||
User,
|
||||
Code,
|
||||
} from 'lucide-react';
|
||||
import { getGiteaRepos, getGiteaCommits } from '../utils/api';
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return 'N/A';
|
||||
try {
|
||||
return new Date(dateStr).toLocaleString('fr-FR');
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
function formatSize(kb) {
|
||||
if (!kb) return 'N/A';
|
||||
if (kb < 1024) return `${kb} KB`;
|
||||
return `${(kb / 1024).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
export default function GiteaPage() {
|
||||
const [repos, setRepos] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedRepo, setSelectedRepo] = useState(null);
|
||||
const [commits, setCommits] = useState([]);
|
||||
const [loadingCommits, setLoadingCommits] = useState(false);
|
||||
|
||||
const fetchRepos = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getGiteaRepos();
|
||||
setRepos(res.data);
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement repos:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchCommits = async (fullName) => {
|
||||
setLoadingCommits(true);
|
||||
setSelectedRepo(fullName);
|
||||
try {
|
||||
const [owner, repo] = fullName.split('/');
|
||||
const res = await getGiteaCommits(owner, repo);
|
||||
setCommits(res.data);
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement commits:', err);
|
||||
setCommits([]);
|
||||
} finally {
|
||||
setLoadingCommits(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchRepos();
|
||||
}, []);
|
||||
|
||||
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">
|
||||
<GitBranch className="w-7 h-7 text-primary-400" />
|
||||
Dépôts Gitea
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Explorez les dépôts sur{' '}
|
||||
<a
|
||||
href="https://git.recette.santinova-soft.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary-400 hover:text-primary-300"
|
||||
>
|
||||
git.recette.santinova-soft.org
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={fetchRepos}
|
||||
className="btn-secondary flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
Rafraîchir
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Repos List */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-medium text-gray-400 uppercase tracking-wider">
|
||||
Dépôts ({repos.length})
|
||||
</h3>
|
||||
{loading ? (
|
||||
<div className="card p-8 text-center">
|
||||
<RefreshCw className="w-6 h-6 text-gray-600 mx-auto animate-spin" />
|
||||
</div>
|
||||
) : repos.length === 0 ? (
|
||||
<div className="card p-8 text-center">
|
||||
<GitBranch className="w-10 h-10 text-gray-600 mx-auto mb-3" />
|
||||
<p className="text-gray-400">Aucun dépôt trouvé</p>
|
||||
</div>
|
||||
) : (
|
||||
repos.map((repo) => (
|
||||
<div
|
||||
key={repo.id}
|
||||
className={`card p-4 cursor-pointer transition-all ${
|
||||
selectedRepo === repo.fullName
|
||||
? 'border-primary-500/50 bg-primary-500/5'
|
||||
: 'hover:border-dark-600'
|
||||
}`}
|
||||
onClick={() => fetchCommits(repo.fullName)}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Code className="w-4 h-4 text-primary-400" />
|
||||
<h4 className="text-sm font-semibold text-white">
|
||||
{repo.name}
|
||||
</h4>
|
||||
{repo.private ? (
|
||||
<Lock className="w-3 h-3 text-gray-500" />
|
||||
) : (
|
||||
<Unlock className="w-3 h-3 text-gray-500" />
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{repo.description || 'Pas de description'}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 mt-2">
|
||||
{repo.language && (
|
||||
<span className="text-xs text-gray-400">
|
||||
{repo.language}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-xs text-gray-500">
|
||||
{formatSize(repo.size)}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
Mis à jour: {formatDate(repo.updatedAt)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href={repo.htmlUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-500 hover:text-primary-400 transition-colors"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Commits */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-medium text-gray-400 uppercase tracking-wider">
|
||||
{selectedRepo
|
||||
? `Commits — ${selectedRepo}`
|
||||
: 'Sélectionnez un dépôt'}
|
||||
</h3>
|
||||
{!selectedRepo ? (
|
||||
<div className="card p-8 text-center">
|
||||
<GitCommit className="w-10 h-10 text-gray-600 mx-auto mb-3" />
|
||||
<p className="text-gray-400 text-sm">
|
||||
Cliquez sur un dépôt pour voir ses commits
|
||||
</p>
|
||||
</div>
|
||||
) : loadingCommits ? (
|
||||
<div className="card p-8 text-center">
|
||||
<RefreshCw className="w-6 h-6 text-gray-600 mx-auto animate-spin" />
|
||||
</div>
|
||||
) : commits.length === 0 ? (
|
||||
<div className="card p-8 text-center">
|
||||
<GitCommit className="w-10 h-10 text-gray-600 mx-auto mb-3" />
|
||||
<p className="text-gray-400">Aucun commit trouvé</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{commits.map((commit, idx) => (
|
||||
<div key={commit.sha || idx} className="card p-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-1">
|
||||
<GitCommit className="w-4 h-4 text-gray-500" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-gray-200 truncate">
|
||||
{commit.message}
|
||||
</p>
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<code className="text-xs bg-dark-700 text-primary-400 px-1.5 py-0.5 rounded font-mono">
|
||||
{commit.shortSha}
|
||||
</code>
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<User className="w-3 h-3" />
|
||||
{commit.author}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{formatDate(commit.date)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,458 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, RefreshCw, GitBranch, CheckCircle, XCircle, ExternalLink, Tag, AlertCircle, ArrowUp, ArrowDown, Minus, AlertTriangle } 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: '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',
|
||||
repoName: 'portail-santinova',
|
||||
urlRecette: 'https://portail.recette.santinova-soft.org',
|
||||
urlProd: 'https://portail.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
id: 'manus-dashboard',
|
||||
name: 'Dashboard',
|
||||
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 italic">
|
||||
<Minus className="w-3 h-3" />
|
||||
Non déployé
|
||||
</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="Recette déployée, production vide">
|
||||
<ArrowUp className="w-3 h-3" />
|
||||
Non déployé en prod
|
||||
</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 (!version) {
|
||||
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>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500 italic">
|
||||
<AlertCircle className="w-3 h-3" />
|
||||
Non déployé
|
||||
</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>
|
||||
|
||||
{/* 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">
|
||||
<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-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" />
|
||||
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="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(5)].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) => {
|
||||
const isInfra = ['portail-santinova', 'manus-dashboard'].includes(app.id);
|
||||
return (
|
||||
<tr key={app.id} className={`hover:bg-dark-800/30 transition-colors${isInfra ? ' bg-amber-950/10 border-l-2 border-amber-500/40' : ''}`}>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-sm font-medium ${isInfra ? 'text-amber-300' : 'text-white'}`}>{app.name}</span>
|
||||
{isInfra && (
|
||||
<span className="text-xs px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-400 border border-amber-500/25 font-semibold">Infra</span>
|
||||
)}
|
||||
</div>
|
||||
<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
|
||||
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>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,140 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Lock, User, AlertCircle, Server } from 'lucide-react';
|
||||
import { login } from '../utils/api';
|
||||
|
||||
export default function LoginPage({ onLogin }) {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const response = await login(username, password);
|
||||
localStorage.setItem('dashboard_token', response.data.token);
|
||||
onLogin(response.data);
|
||||
} catch (err) {
|
||||
setError(
|
||||
err.response?.data?.error || 'Erreur de connexion. Veuillez réessayer.'
|
||||
);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-dark-950 px-4">
|
||||
<div className="w-full max-w-md">
|
||||
{/* Logo / Header */}
|
||||
<div className="text-center mb-8">
|
||||
<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 {window.location.hostname.includes('recette') ? 'Recette' : 'Production'}
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-2">Gestion des applications</p>
|
||||
</div>
|
||||
|
||||
{/* Login Form */}
|
||||
<div className="card p-8">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm">
|
||||
<AlertCircle className="w-4 h-4 flex-shrink-0" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="username"
|
||||
className="block text-sm font-medium text-gray-300 mb-2"
|
||||
>
|
||||
Nom d'utilisateur
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="input-field pl-11"
|
||||
placeholder="Entrez votre identifiant"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-sm font-medium text-gray-300 mb-2"
|
||||
>
|
||||
Mot de passe
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="input-field pl-11"
|
||||
placeholder="Entrez votre mot de passe"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="btn-primary w-full flex items-center justify-center gap-2 py-3"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<svg
|
||||
className="animate-spin h-5 w-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
||||
/>
|
||||
</svg>
|
||||
Connexion...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Lock className="w-4 h-4" />
|
||||
Se connecter
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-gray-600 text-sm mt-6">
|
||||
Santinova Soft — Serveur de recette
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,251 +0,0 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
Cpu,
|
||||
MemoryStick,
|
||||
HardDrive,
|
||||
Network,
|
||||
Activity,
|
||||
RefreshCw,
|
||||
Clock,
|
||||
Server,
|
||||
TrendingUp,
|
||||
} from 'lucide-react';
|
||||
import { getServerMetrics } from '../utils/api';
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (!bytes || bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'Ko', 'Mo', 'Go', 'To'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
function formatUptime(seconds) {
|
||||
if (!seconds) return 'N/A';
|
||||
const days = Math.floor(seconds / 86400);
|
||||
const hours = Math.floor((seconds % 86400) / 3600);
|
||||
const mins = Math.floor((seconds % 3600) / 60);
|
||||
if (days > 0) return `${days}j ${hours}h ${mins}m`;
|
||||
if (hours > 0) return `${hours}h ${mins}m`;
|
||||
return `${mins}m`;
|
||||
}
|
||||
|
||||
function GaugeBar({ value, max = 100, color = 'primary', label, sublabel }) {
|
||||
const pct = Math.min(100, Math.round((value / max) * 100));
|
||||
const colorMap = {
|
||||
primary: { bar: 'bg-primary-500', text: 'text-primary-400', border: 'border-primary-500/30' },
|
||||
emerald: { bar: 'bg-emerald-500', text: 'text-emerald-400', border: 'border-emerald-500/30' },
|
||||
amber: { bar: 'bg-amber-500', text: 'text-amber-400', border: 'border-amber-500/30' },
|
||||
red: { bar: 'bg-red-500', text: 'text-red-400', border: 'border-red-500/30' },
|
||||
};
|
||||
const dangerColor = pct > 85 ? 'red' : pct > 65 ? 'amber' : color;
|
||||
const c = colorMap[dangerColor] || colorMap.primary;
|
||||
|
||||
return (
|
||||
<div className={`card p-5 border ${c.border}`}>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-sm font-medium text-gray-300">{label}</span>
|
||||
<span className={`text-2xl font-bold ${c.text}`}>{pct}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-dark-700 rounded-full h-3 mb-3 overflow-hidden">
|
||||
<div
|
||||
className={`h-3 rounded-full transition-all duration-700 ${c.bar}`}
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">{sublabel}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MetricCard({ icon: Icon, label, value, sub, color = 'primary' }) {
|
||||
const colorMap = {
|
||||
primary: 'text-primary-400 bg-primary-500/10 border-primary-500/20',
|
||||
emerald: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
|
||||
amber: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
|
||||
blue: 'text-blue-400 bg-blue-500/10 border-blue-500/20',
|
||||
};
|
||||
return (
|
||||
<div className={`card p-5 border ${colorMap[color]}`}>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className={`p-3 rounded-xl border ${colorMap[color]}`}>
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-wider mb-1">{label}</p>
|
||||
<p className="text-xl font-bold text-white truncate">{value}</p>
|
||||
{sub && <p className="text-xs text-gray-500 mt-1">{sub}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MonitoringPage() {
|
||||
const [metrics, setMetrics] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [lastUpdate, setLastUpdate] = useState(null);
|
||||
const [autoRefresh, setAutoRefresh] = useState(true);
|
||||
|
||||
const fetchMetrics = useCallback(async () => {
|
||||
try {
|
||||
const res = await getServerMetrics();
|
||||
setMetrics(res.data);
|
||||
setLastUpdate(new Date());
|
||||
} catch (err) {
|
||||
console.error('Erreur métriques:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMetrics();
|
||||
}, [fetchMetrics]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!autoRefresh) return;
|
||||
const interval = setInterval(fetchMetrics, 10000);
|
||||
return () => clearInterval(interval);
|
||||
}, [autoRefresh, fetchMetrics]);
|
||||
|
||||
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">
|
||||
<Activity className="w-7 h-7 text-primary-400" />
|
||||
Monitoring Serveur
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Consommation des ressources en temps réel
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{lastUpdate && (
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<Clock className="w-3.5 h-3.5" />
|
||||
Mis à jour : {lastUpdate.toLocaleTimeString('fr-FR')}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setAutoRefresh((v) => !v)}
|
||||
className={`btn-secondary text-sm flex items-center gap-2 ${autoRefresh ? 'text-emerald-400' : ''}`}
|
||||
>
|
||||
<Activity className="w-4 h-4" />
|
||||
{autoRefresh ? 'Auto (10s)' : 'Manuel'}
|
||||
</button>
|
||||
<button
|
||||
onClick={fetchMetrics}
|
||||
disabled={loading}
|
||||
className="btn-secondary flex items-center gap-2 text-sm"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
Rafraîchir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading && !metrics ? (
|
||||
<div className="card p-12 text-center">
|
||||
<RefreshCw className="w-8 h-8 text-primary-400 animate-spin mx-auto mb-3" />
|
||||
<p className="text-gray-400">Chargement des métriques...</p>
|
||||
</div>
|
||||
) : metrics?.error ? (
|
||||
<div className="card p-8 text-center border border-red-500/20">
|
||||
<p className="text-red-400">Erreur : {metrics.error}</p>
|
||||
</div>
|
||||
) : metrics ? (
|
||||
<>
|
||||
{/* Jauges principales */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<GaugeBar
|
||||
value={metrics.cpu?.usage || 0}
|
||||
label="Processeur (CPU)"
|
||||
sublabel={`Load avg: ${metrics.load?.load1?.toFixed(2)} / ${metrics.load?.load5?.toFixed(2)} / ${metrics.load?.load15?.toFixed(2)}`}
|
||||
color="primary"
|
||||
/>
|
||||
<GaugeBar
|
||||
value={metrics.memory?.usagePercent || 0}
|
||||
label="Mémoire RAM"
|
||||
sublabel={`${formatBytes(metrics.memory?.used)} utilisés sur ${formatBytes(metrics.memory?.total)} — ${formatBytes(metrics.memory?.available)} disponibles`}
|
||||
color="emerald"
|
||||
/>
|
||||
<GaugeBar
|
||||
value={metrics.disk?.usagePercent || 0}
|
||||
label="Espace Disque"
|
||||
sublabel={`${formatBytes(metrics.disk?.used)} utilisés sur ${formatBytes(metrics.disk?.total)} — ${formatBytes(metrics.disk?.free)} libres`}
|
||||
color="amber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Métriques détaillées */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<MetricCard
|
||||
icon={Server}
|
||||
label="Uptime serveur"
|
||||
value={formatUptime(metrics.uptime)}
|
||||
sub="Depuis le dernier redémarrage"
|
||||
color="primary"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={TrendingUp}
|
||||
label="Charge système (1 min)"
|
||||
value={metrics.load?.load1?.toFixed(2) || 'N/A'}
|
||||
sub={`5 min: ${metrics.load?.load5?.toFixed(2)} — 15 min: ${metrics.load?.load15?.toFixed(2)}`}
|
||||
color="blue"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={Network}
|
||||
label="Réseau — Reçu"
|
||||
value={formatBytes(metrics.network?.rx)}
|
||||
sub="Total depuis le démarrage"
|
||||
color="emerald"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={Network}
|
||||
label="Réseau — Envoyé"
|
||||
value={formatBytes(metrics.network?.tx)}
|
||||
sub="Total depuis le démarrage"
|
||||
color="amber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tableau récapitulatif */}
|
||||
<div className="card overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-dark-700">
|
||||
<h3 className="text-base font-semibold text-white flex items-center gap-2">
|
||||
<HardDrive className="w-5 h-5 text-primary-400" />
|
||||
Récapitulatif des ressources
|
||||
</h3>
|
||||
</div>
|
||||
<div className="divide-y divide-dark-700">
|
||||
{[
|
||||
{ label: 'CPU — Utilisation', value: `${metrics.cpu?.usage?.toFixed(1) || 0}%`, status: metrics.cpu?.usage > 85 ? 'critical' : metrics.cpu?.usage > 65 ? 'warning' : 'ok' },
|
||||
{ label: 'RAM — Utilisée', value: `${formatBytes(metrics.memory?.used)} / ${formatBytes(metrics.memory?.total)}`, status: metrics.memory?.usagePercent > 85 ? 'critical' : metrics.memory?.usagePercent > 65 ? 'warning' : 'ok' },
|
||||
{ label: 'RAM — Disponible', value: formatBytes(metrics.memory?.available), status: 'ok' },
|
||||
{ label: 'Disque — Utilisé', value: `${formatBytes(metrics.disk?.used)} / ${formatBytes(metrics.disk?.total)}`, status: metrics.disk?.usagePercent > 85 ? 'critical' : metrics.disk?.usagePercent > 65 ? 'warning' : 'ok' },
|
||||
{ label: 'Disque — Libre', value: formatBytes(metrics.disk?.free), status: 'ok' },
|
||||
{ label: 'Réseau — Trafic entrant', value: formatBytes(metrics.network?.rx), status: 'ok' },
|
||||
{ label: 'Réseau — Trafic sortant', value: formatBytes(metrics.network?.tx), status: 'ok' },
|
||||
{ label: 'Uptime', value: formatUptime(metrics.uptime), status: 'ok' },
|
||||
].map((row) => (
|
||||
<div key={row.label} className="px-6 py-3 flex items-center justify-between hover:bg-dark-800/50 transition-colors">
|
||||
<span className="text-sm text-gray-400">{row.label}</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-medium text-white">{row.value}</span>
|
||||
<span className={`w-2 h-2 rounded-full ${
|
||||
row.status === 'critical' ? 'bg-red-400' :
|
||||
row.status === 'warning' ? 'bg-amber-400' : 'bg-emerald-400'
|
||||
}`} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: '/api',
|
||||
withCredentials: true,
|
||||
});
|
||||
|
||||
// Intercepteur pour gérer les erreurs d'auth
|
||||
api.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem('dashboard_token');
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
api.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error) => {
|
||||
if (error.response && error.response.status === 401) {
|
||||
localStorage.removeItem('dashboard_token');
|
||||
window.location.href = '/login';
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default api;
|
||||
|
||||
// Auth
|
||||
export const login = (username, password) =>
|
||||
api.post('/auth/login', { username, password });
|
||||
|
||||
export const logout = () => api.post('/auth/logout');
|
||||
|
||||
export const getMe = () => api.get('/auth/me');
|
||||
|
||||
// Apps
|
||||
export const getApps = () => api.get('/apps');
|
||||
export const getApp = (id) => api.get(`/apps/${id}`);
|
||||
export const checkApp = (id) => api.post(`/apps/${id}/check`);
|
||||
export const deployApp = (id) => api.post(`/apps/${id}/deploy`);
|
||||
export const getAppLogs = (id, tail = 100) =>
|
||||
api.get(`/apps/${id}/logs`, { params: { tail } });
|
||||
|
||||
// App creation
|
||||
export const getAvailableStacks = () => api.get('/apps-config/stacks');
|
||||
export const createApp = (formData) =>
|
||||
api.post('/apps-config/create', formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
timeout: 600000, // 10 minutes timeout
|
||||
});
|
||||
|
||||
// Deployments
|
||||
export const getDeployments = (appId) =>
|
||||
api.get('/deployments', { params: { appId } });
|
||||
|
||||
// Gitea
|
||||
export const getGiteaRepos = () => api.get('/gitea/repos');
|
||||
export const getGiteaCommits = (owner, repo) =>
|
||||
api.get(`/gitea/repos/${owner}/${repo}/commits`);
|
||||
|
||||
// Docker
|
||||
export const getContainers = () => api.get('/docker/containers');
|
||||
|
||||
// System
|
||||
export const getSystemInfo = () => api.get('/system/info');
|
||||
export const getServerMetrics = () => api.get('/system/metrics');
|
||||
|
||||
// Container control
|
||||
export const startApp = (id) => api.post(`/apps/${id}/start`);
|
||||
export const stopApp = (id) => api.post(`/apps/${id}/stop`);
|
||||
export const restartApp = (id) => api.post(`/apps/${id}/restart`);
|
||||
@@ -1,37 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#eff6ff',
|
||||
100: '#dbeafe',
|
||||
200: '#bfdbfe',
|
||||
300: '#93c5fd',
|
||||
400: '#60a5fa',
|
||||
500: '#3b82f6',
|
||||
600: '#2563eb',
|
||||
700: '#1d4ed8',
|
||||
800: '#1e40af',
|
||||
900: '#1e3a8a',
|
||||
950: '#172554',
|
||||
},
|
||||
dark: {
|
||||
50: '#f8fafc',
|
||||
100: '#f1f5f9',
|
||||
200: '#e2e8f0',
|
||||
300: '#cbd5e1',
|
||||
400: '#94a3b8',
|
||||
500: '#64748b',
|
||||
600: '#475569',
|
||||
700: '#334155',
|
||||
800: '#1e293b',
|
||||
900: '#0f172a',
|
||||
950: '#020617',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@@ -1,19 +0,0 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': 'http://localhost:3001',
|
||||
'/ws': {
|
||||
target: 'ws://localhost:3001',
|
||||
ws: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
sourcemap: false,
|
||||
},
|
||||
});
|
||||
@@ -434,7 +434,7 @@ function addDynamicApp(appDef) {
|
||||
}
|
||||
|
||||
function initDynamicApps() {
|
||||
// 1. Charger les apps depuis .dashboard-apps.json (créées via l'interface)
|
||||
// 1. Charger les apps depuis .dashboard-apps.json (legacy)
|
||||
const dynamicApps = loadDynamicApps();
|
||||
for (const app of dynamicApps) {
|
||||
const existingInConfig = config.apps.findIndex((a) => a.id === app.id);
|
||||
@@ -442,39 +442,32 @@ function initDynamicApps() {
|
||||
config.apps.push(app);
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Découverte automatique : scanner les dossiers apps/*.json
|
||||
let discovered = 0;
|
||||
// 2. Scanner les dossiers app.json (découverte automatique)
|
||||
try {
|
||||
const appsBasePath = config.appsBasePath;
|
||||
if (fs.existsSync(appsBasePath)) {
|
||||
const entries = fs.readdirSync(appsBasePath, { withFileTypes: true });
|
||||
for (const entry of entries) {
|
||||
if (!entry.isDirectory()) continue;
|
||||
const appJsonPath = path.join(appsBasePath, entry.name, 'app.json');
|
||||
if (!fs.existsSync(appJsonPath)) continue;
|
||||
try {
|
||||
const appDef = JSON.parse(fs.readFileSync(appJsonPath, 'utf-8'));
|
||||
if (!appDef.id) continue;
|
||||
// Ne pas écraser une app déjà en config (statique ou dynamique)
|
||||
const existingIdx = config.apps.findIndex((a) => a.id === appDef.id);
|
||||
if (existingIdx >= 0) {
|
||||
// Mettre à jour avec les données du app.json (source de vérité)
|
||||
config.apps[existingIdx] = { ...config.apps[existingIdx], ...appDef };
|
||||
} else {
|
||||
config.apps.push(appDef);
|
||||
discovered++;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn(`[discovery] Erreur lecture ${appJsonPath}:`, e.message);
|
||||
const appsBasePath = config.appsBasePath || process.env.APPS_BASE_PATH || '/opt/manus-deploy/apps';
|
||||
const entries = fs.readdirSync(appsBasePath, { withFileTypes: true });
|
||||
let scanned = 0;
|
||||
for (const entry of entries) {
|
||||
if (!entry.isDirectory()) continue;
|
||||
const appJsonPath = path.join(appsBasePath, entry.name, 'app.json');
|
||||
if (!fs.existsSync(appJsonPath)) continue;
|
||||
try {
|
||||
const appDef = JSON.parse(fs.readFileSync(appJsonPath, 'utf-8'));
|
||||
if (!appDef.id) continue;
|
||||
const existingInConfig = config.apps.findIndex((a) => a.id === appDef.id);
|
||||
if (existingInConfig < 0) {
|
||||
config.apps.push(appDef);
|
||||
scanned++;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`Erreur lecture app.json dans ${entry.name}:`, e.message);
|
||||
}
|
||||
}
|
||||
console.log(`Apps découvertes via app.json: ${scanned}`);
|
||||
} catch (err) {
|
||||
console.error('[discovery] Erreur scan apps:', err.message);
|
||||
console.error('Erreur scan app.json:', err.message);
|
||||
}
|
||||
|
||||
console.log(`Apps chargées: ${dynamicApps.length} dynamiques + ${discovered} découvertes (total: ${config.apps.length})`);
|
||||
console.log(`Total apps chargées: ${config.apps.length}`);
|
||||
}
|
||||
|
||||
// ============ CREATION D'APPLICATION ============
|
||||
|
||||
@@ -38,23 +38,6 @@ module.exports = {
|
||||
category: 'ITINOVA',
|
||||
status: 'production',
|
||||
},
|
||||
{
|
||||
id: 'gestion-at-v2',
|
||||
name: 'Gestion des AT V2',
|
||||
description: 'Application de gestion des accidents du travail Itinova',
|
||||
directory: 'gestion-at-v2',
|
||||
giteaRepo: 'gestion-at-v2',
|
||||
giteaOwner: 'manus-admin',
|
||||
urls: {
|
||||
recette: 'https://at.recette.santinova-soft.org',
|
||||
prod: 'https://at.santinova-soft.org',
|
||||
},
|
||||
containerName: 'gestion-at',
|
||||
healthCheckUrl: 'https://at.recette.santinova-soft.org',
|
||||
port: 3000,
|
||||
category: 'ITINOVA',
|
||||
status: 'recette',
|
||||
},
|
||||
{
|
||||
id: 'itinova-podcasts',
|
||||
name: 'Itinova Podcasts',
|
||||
@@ -154,6 +137,7 @@ module.exports = {
|
||||
containerName: 'demat-facturation-app',
|
||||
healthCheckUrl: 'https://demat-facturation.recette.santinova-soft.org',
|
||||
port: 3000,
|
||||
image: 'images/demat-facturation-dsi.jpg',
|
||||
category: 'SANTINOVA',
|
||||
status: 'production',
|
||||
},
|
||||
@@ -205,7 +189,7 @@ module.exports = {
|
||||
containerName: 'portail-santinova',
|
||||
healthCheckUrl: 'https://portail.recette.santinova-soft.org',
|
||||
port: 3000,
|
||||
category: 'SANTINOVA',
|
||||
category: 'INFRA',
|
||||
status: 'production',
|
||||
},
|
||||
{
|
||||
|
||||
@@ -139,11 +139,38 @@ function gitPull(appConfig) {
|
||||
/**
|
||||
* Démarrer un conteneur Docker
|
||||
*/
|
||||
async function startContainer(containerName) {
|
||||
async function startContainer(containerName, appId) {
|
||||
try {
|
||||
// Tenter d'abord un docker start (conteneur existant mais arrêté)
|
||||
const container = docker.getContainer(containerName);
|
||||
await container.start();
|
||||
return { success: true, message: `Conteneur ${containerName} démarré` };
|
||||
const info = await container.inspect().catch(() => null);
|
||||
if (info) {
|
||||
// Le conteneur existe, on le démarre
|
||||
if (!info.State.Running) {
|
||||
await container.start();
|
||||
}
|
||||
return { success: true, message: `Conteneur ${containerName} démarré` };
|
||||
}
|
||||
// Le conteneur n'existe pas : docker compose up dans le répertoire de l'app
|
||||
const id = appId || containerName;
|
||||
const appsBasePath = config.appsBasePath || process.env.APPS_BASE_PATH || '/opt/manus-deploy/apps';
|
||||
const appDir = path.join(appsBasePath, id);
|
||||
const fs = require('fs');
|
||||
const composeFile = fs.existsSync(path.join(appDir, 'docker-compose.yml'))
|
||||
? path.join(appDir, 'docker-compose.yml')
|
||||
: fs.existsSync(path.join(appDir, 'docker-compose.prod.yml'))
|
||||
? path.join(appDir, 'docker-compose.prod.yml')
|
||||
: null;
|
||||
if (!composeFile) {
|
||||
return { success: false, message: `Aucun docker-compose.yml trouvé dans ${appDir}` };
|
||||
}
|
||||
await new Promise((resolve, reject) => {
|
||||
exec(`docker compose -f ${composeFile} up -d`, { cwd: appDir }, (err, stdout, stderr) => {
|
||||
if (err) reject(new Error(stderr || err.message));
|
||||
else resolve(stdout);
|
||||
});
|
||||
});
|
||||
return { success: true, message: `Conteneur ${containerName} créé et démarré via docker compose` };
|
||||
} catch (err) {
|
||||
return { success: false, message: err.message };
|
||||
}
|
||||
|
||||
@@ -33,6 +33,10 @@ app.use(cors({
|
||||
origin: true,
|
||||
credentials: true,
|
||||
}));
|
||||
app.use(express.json({ limit: '50mb' }));
|
||||
app.use(express.urlencoded({ extended: true, limit: '50mb' }));
|
||||
app.use(cookieParser());
|
||||
app.use(morgan('combined'));
|
||||
|
||||
// Route webhook montée en premier avec raw body pour la vérification HMAC
|
||||
app.use('/api/webhook', express.raw({ type: 'application/json', limit: '10mb' }), (req, res, next) => {
|
||||
@@ -42,11 +46,6 @@ app.use('/api/webhook', express.raw({ type: 'application/json', limit: '10mb' })
|
||||
}
|
||||
next();
|
||||
}, webhookRoutes);
|
||||
|
||||
app.use(express.json({ limit: '50mb' }));
|
||||
app.use(express.urlencoded({ extended: true, limit: '50mb' }));
|
||||
app.use(cookieParser());
|
||||
app.use(morgan('combined'));
|
||||
// API routes
|
||||
app.use('/api', routes);
|
||||
|
||||
|
||||
@@ -482,7 +482,7 @@ router.post('/apps/:id/start', authMiddleware, async (req, res) => {
|
||||
const app = config.apps.find((a) => a.id === req.params.id);
|
||||
if (!app) return res.status(404).json({ error: 'Application non trouvée' });
|
||||
const containerName = app.containerName || app.id;
|
||||
const result = await startContainer(containerName);
|
||||
const result = await startContainer(containerName, app.id);
|
||||
res.json(result);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
|
||||
@@ -19,14 +19,11 @@ const LOG_DIR = '/var/log/manus-deploy';
|
||||
// Mapping dépôt Gitea -> nom du dossier application sur le serveur
|
||||
const REPO_TO_APP_MAP = {
|
||||
'itinova-contacts': 'itinova-contacts',
|
||||
'gestion-at-v2': 'gestion-at-v2',
|
||||
'itinova-podcasts': 'itinova-podcasts',
|
||||
'veille-reglementaire': 'veille-reglementaire',
|
||||
'itinova-vehicle-exchange': 'itinova-vehicle-exchange',
|
||||
'manus-dashboard': 'manus-dashboard',
|
||||
'itinova-budget-si': 'itinova-budget-si',
|
||||
'facturation-santinova': 'facturation-santinova',
|
||||
'demat-facturation-dsi': 'demat-facturation-dsi',
|
||||
};
|
||||
|
||||
// Déploiements en cours (évite les doubles déclenchements)
|
||||
|
||||
@@ -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 - Gestion des Applications</title>
|
||||
</head>
|
||||
<body class="bg-dark-900 text-white">
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -39,7 +39,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">{window.location.hostname.includes('recette') ? 'Recette' : 'Production'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -89,7 +89,7 @@ const APPS_CONFIG = [
|
||||
},
|
||||
{
|
||||
id: 'manus-dashboard',
|
||||
name: 'Dashboard Recette',
|
||||
name: 'Dashboard',
|
||||
repoName: 'manus-dashboard',
|
||||
urlRecette: 'https://dashboard.recette.santinova-soft.org',
|
||||
urlProd: 'https://dashboard.santinova-soft.org',
|
||||
@@ -107,9 +107,9 @@ function SyncBadge({ versionRecette, versionProd }) {
|
||||
|
||||
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">
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500 italic">
|
||||
<Minus className="w-3 h-3" />
|
||||
N/A
|
||||
Non déployé
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -123,9 +123,9 @@ function SyncBadge({ versionRecette, versionProd }) {
|
||||
}
|
||||
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">
|
||||
<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 déployée, production vide">
|
||||
<ArrowUp className="w-3 h-3" />
|
||||
Recette en avance
|
||||
Non déployé en prod
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -175,19 +175,19 @@ function SyncBadge({ versionRecette, versionProd }) {
|
||||
}
|
||||
|
||||
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) {
|
||||
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>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500">
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500 italic">
|
||||
<AlertCircle className="w-3 h-3" />
|
||||
N/A
|
||||
Non déployé
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -34,7 +34,9 @@ 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 {window.location.hostname.includes('recette') ? 'Recette' : 'Production'}
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-2">Gestion des applications</p>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user