Compare commits
9 Commits
main
...
8092337ccd
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8092337ccd | ||
|
|
2129c0e21d | ||
|
|
78e374b0db | ||
|
|
b1bcd59289 | ||
|
|
765ef94fbd | ||
|
|
a65806125a | ||
|
|
cbfeb6d163 | ||
|
|
eb07a99e5e | ||
|
|
85bd5209c7 |
7
.dockerignore
Normal file
7
.dockerignore
Normal file
@@ -0,0 +1,7 @@
|
||||
node_modules
|
||||
.git
|
||||
.gitignore
|
||||
README.md
|
||||
*.log
|
||||
frontend/node_modules
|
||||
backend/node_modules
|
||||
@@ -1,27 +0,0 @@
|
||||
name: Validation Dashboard
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
paths-ignore:
|
||||
- "**.md"
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
verify:
|
||||
name: Tests backend et build frontend
|
||||
runs-on: ci-node22
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Installer et tester le backend
|
||||
working-directory: src/backend
|
||||
run: |
|
||||
npm ci
|
||||
npm test
|
||||
|
||||
- name: Installer et construire le frontend
|
||||
working-directory: src/frontend
|
||||
run: |
|
||||
npm ci
|
||||
npm run build
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -2,3 +2,4 @@ node_modules/
|
||||
dist/
|
||||
.env
|
||||
*.log
|
||||
.DS_Store
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
# Contrat `app.json`
|
||||
|
||||
Le dashboard et le portail applicatif utilisent exclusivement le manifeste placé dans le dossier de chaque application déployée :
|
||||
|
||||
```text
|
||||
/opt/manus-deploy/apps/<dossier-technique>/app.json
|
||||
```
|
||||
|
||||
> Une application sans manifeste valide n’est pas considérée comme déployée. Elle n’apparaît donc ni dans le dashboard ni dans le portail.
|
||||
|
||||
## Schéma minimal
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "itinova-contacts",
|
||||
"name": "Itinova Contacts",
|
||||
"category": "ITINOVA",
|
||||
"containerName": "itinova-contacts",
|
||||
"giteaRepo": "itinova-contacts",
|
||||
"giteaOwner": "manus-admin",
|
||||
"image": "images/itinova-contacts.png",
|
||||
"urls": {
|
||||
"recette": "https://contacts.recette.santinova-soft.org",
|
||||
"prod": "https://contacts.santinova-soft.org"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
| Champ | Rôle | Règle |
|
||||
|---|---|---|
|
||||
| `id` | Identifiant stable de l’application | Minuscules, chiffres et tirets uniquement. |
|
||||
| `name` | Libellé affiché | Chaîne non vide. |
|
||||
| `category` | Emplacement dans le portail | `ITINOVA`, `SANTINOVA` ou `INFRA`. Les applications `INFRA` restent visibles dans le dashboard mais sont exclues du portail. |
|
||||
| `containerName` | Conteneur géré par Docker | Obligatoire pour le contrôle de démarrage et de statut. À défaut, le dashboard utilise `id`. |
|
||||
| `giteaRepo` | Dépôt source | Sert au webhook CI/CD et à l’inventaire. |
|
||||
| `giteaOwner` | Organisation/propriétaire Gitea | Facultatif si la valeur par défaut suffit. |
|
||||
| `image` | Image locale du portail | Chemin relatif à `portail-santinova/images/`. |
|
||||
| `urls.recette` | URL de recette | Obligatoire et HTTPS pour un dashboard recette. |
|
||||
| `urls.prod` | URL de production | Obligatoire et HTTPS pour un dashboard de production. |
|
||||
|
||||
## Règles de déploiement
|
||||
|
||||
Chaque premier déploiement doit créer ou mettre à jour le manifeste dans le même commit que le `docker-compose.yml` et les éléments nécessaires à l’application. Lorsqu’une application est promue, son manifeste de production doit contenir l’URL de production avant le démarrage du dashboard.
|
||||
|
||||
Le dashboard ne maintient plus de liste statique d’applications, et le portail ne maintient plus de tuiles codées en dur. Cette règle élimine les écarts de version, d’URL, de catégorie et de statut entre les deux interfaces.
|
||||
43
Dockerfile
Normal file
43
Dockerfile
Normal file
@@ -0,0 +1,43 @@
|
||||
# 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
Normal file
32
README.md
Normal file
@@ -0,0 +1,32 @@
|
||||
# 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!
|
||||
13
app.json
13
app.json
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"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",
|
||||
"ci": {
|
||||
"required": true
|
||||
}
|
||||
}
|
||||
30
backend/package.json
Normal file
30
backend/package.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
736
backend/src/app-creator.js
Normal file
736
backend/src/app-creator.js
Normal file
@@ -0,0 +1,736 @@
|
||||
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,
|
||||
};
|
||||
61
backend/src/auth.js
Normal file
61
backend/src/auth.js
Normal file
@@ -0,0 +1,61 @@
|
||||
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 };
|
||||
231
backend/src/config.js
Normal file
231
backend/src/config.js
Normal file
@@ -0,0 +1,231 @@
|
||||
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',
|
||||
},
|
||||
],
|
||||
};
|
||||
438
backend/src/docker.js
Normal file
438
backend/src/docker.js
Normal file
@@ -0,0 +1,438 @@
|
||||
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,
|
||||
};
|
||||
119
backend/src/gitea.js
Normal file
119
backend/src/gitea.js
Normal file
@@ -0,0 +1,119 @@
|
||||
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,
|
||||
};
|
||||
188
backend/src/healthcheck.js
Normal file
188
backend/src/healthcheck.js
Normal file
@@ -0,0 +1,188 @@
|
||||
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,
|
||||
};
|
||||
136
backend/src/index.js
Normal file
136
backend/src/index.js
Normal file
@@ -0,0 +1,136 @@
|
||||
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);
|
||||
});
|
||||
601
backend/src/routes.js
Normal file
601
backend/src/routes.js
Normal file
@@ -0,0 +1,601 @@
|
||||
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 });
|
||||
}
|
||||
});
|
||||
;
|
||||
179
backend/src/ssh.js
Normal file
179
backend/src/ssh.js
Normal file
@@ -0,0 +1,179 @@
|
||||
/**
|
||||
* 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 };
|
||||
143
backend/src/webhook.js
Normal file
143
backend/src/webhook.js
Normal file
@@ -0,0 +1,143 @@
|
||||
/**
|
||||
* 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,46 +1,42 @@
|
||||
services:
|
||||
dashboard:
|
||||
build:
|
||||
context: ./src
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
container_name: manus-dashboard
|
||||
# Redémarrage automatique après un arrêt anormal ; le processus reste borné.
|
||||
restart: always
|
||||
mem_limit: 512m
|
||||
privileged: true
|
||||
env_file:
|
||||
- .env
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
- NODE_ENV=${NODE_ENV:-production}
|
||||
- DASHBOARD_ENV=prod
|
||||
- PORT=${PORT:-3001}
|
||||
- JWT_SECRET=${JWT_SECRET}
|
||||
- ADMIN_USERNAME=${ADMIN_USERNAME}
|
||||
- ADMIN_PASSWORD=${ADMIN_PASSWORD}
|
||||
- GITEA_URL=${GITEA_URL}
|
||||
- GITEA_USERNAME=${GITEA_USERNAME}
|
||||
- GITEA_PASSWORD=${GITEA_PASSWORD}
|
||||
- GITEA_TOKEN=${GITEA_TOKEN}
|
||||
- GITEA_RECETTE_URL=${GITEA_RECETTE_URL}
|
||||
- GITEA_RECETTE_TOKEN=${GITEA_RECETTE_TOKEN}
|
||||
- GITEA_PASSWORD_PROD=${GITEA_PASSWORD}
|
||||
- APPS_BASE_PATH=${APPS_BASE_PATH:-/opt/manus-deploy/apps}
|
||||
- INFRA_BASE_PATH=${INFRA_BASE_PATH:-/opt/manus-deploy/infrastructure}
|
||||
# Contrôles bornés et dédoublonnés par healthcheck.js.
|
||||
- HEALTH_CHECK_INTERVAL=${HEALTH_CHECK_INTERVAL:-60000}
|
||||
- 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
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
- /opt/manus-deploy:/opt/manus-deploy
|
||||
extra_hosts:
|
||||
- "git.santinova-soft.org:180.149.196.138"
|
||||
networks:
|
||||
- web
|
||||
labels:
|
||||
- "traefik.enable=true"
|
||||
- "traefik.http.routers.manus-dashboard.rule=Host(`dashboard.santinova-soft.org`)"
|
||||
# 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.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"
|
||||
|
||||
|
||||
13
frontend/index.html
Normal file
13
frontend/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!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>
|
||||
29
frontend/package.json
Normal file
29
frontend/package.json
Normal file
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
6
frontend/postcss.config.js
Normal file
6
frontend/postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
4
frontend/public/favicon.svg
Normal file
4
frontend/public/favicon.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 259 B |
BIN
frontend/public/infra_schema_v2.png
Normal file
BIN
frontend/public/infra_schema_v2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
132
frontend/src/App.jsx
Normal file
132
frontend/src/App.jsx
Normal file
@@ -0,0 +1,132 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
679
frontend/src/components/AddAppModal.jsx
Normal file
679
frontend/src/components/AddAppModal.jsx
Normal file
@@ -0,0 +1,679 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
372
frontend/src/components/AppCard.jsx
Normal file
372
frontend/src/components/AppCard.jsx
Normal file
@@ -0,0 +1,372 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
98
frontend/src/components/Sidebar.jsx
Normal file
98
frontend/src/components/Sidebar.jsx
Normal file
@@ -0,0 +1,98 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
54
frontend/src/components/StatusBadge.jsx
Normal file
54
frontend/src/components/StatusBadge.jsx
Normal file
@@ -0,0 +1,54 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
55
frontend/src/hooks/useWebSocket.js
Normal file
55
frontend/src/hooks/useWebSocket.js
Normal file
@@ -0,0 +1,55 @@
|
||||
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 };
|
||||
}
|
||||
96
frontend/src/index.css
Normal file
96
frontend/src/index.css
Normal file
@@ -0,0 +1,96 @@
|
||||
@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;
|
||||
}
|
||||
10
frontend/src/main.jsx
Normal file
10
frontend/src/main.jsx
Normal file
@@ -0,0 +1,10 @@
|
||||
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>
|
||||
);
|
||||
108
frontend/src/pages/AppsPage.jsx
Normal file
108
frontend/src/pages/AppsPage.jsx
Normal file
@@ -0,0 +1,108 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
190
frontend/src/pages/DashboardPage.jsx
Normal file
190
frontend/src/pages/DashboardPage.jsx
Normal file
@@ -0,0 +1,190 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
157
frontend/src/pages/DeploymentsPage.jsx
Normal file
157
frontend/src/pages/DeploymentsPage.jsx
Normal file
@@ -0,0 +1,157 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
164
frontend/src/pages/DockerPage.jsx
Normal file
164
frontend/src/pages/DockerPage.jsx
Normal file
@@ -0,0 +1,164 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
420
frontend/src/pages/DocumentationPage.jsx
Normal file
420
frontend/src/pages/DocumentationPage.jsx
Normal file
@@ -0,0 +1,420 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
BookOpen,
|
||||
Server,
|
||||
GitBranch,
|
||||
LayoutDashboard,
|
||||
Globe,
|
||||
Database,
|
||||
Shield,
|
||||
ArrowRight,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
ExternalLink,
|
||||
Activity,
|
||||
Cpu,
|
||||
HardDrive,
|
||||
Network,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Zap,
|
||||
Package,
|
||||
} from 'lucide-react';
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
Données de l'infrastructure
|
||||
───────────────────────────────────────────── */
|
||||
const RECETTE = {
|
||||
label: 'RECETTE',
|
||||
color: 'amber',
|
||||
ip: '78.138.58.109',
|
||||
os: 'Debian GNU/Linux 12',
|
||||
cpu: '4 vCores',
|
||||
ram: '8 Go',
|
||||
disk: '147 Go',
|
||||
infra: [
|
||||
{
|
||||
icon: GitBranch,
|
||||
color: 'purple',
|
||||
name: 'Gitea',
|
||||
url: 'git.recette.santinova-soft.org',
|
||||
desc: 'Dépôt Git — 4 repositories',
|
||||
href: 'https://git.recette.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: LayoutDashboard,
|
||||
color: 'blue',
|
||||
name: 'Dashboard',
|
||||
url: 'dashboard.recette.santinova-soft.org',
|
||||
desc: 'Monitoring CPU / RAM / Disque',
|
||||
href: 'https://dashboard.recette.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
color: 'teal',
|
||||
name: 'Portail Applicatif',
|
||||
url: 'portail.recette.santinova-soft.org',
|
||||
desc: 'Vitrine centralisée des applications',
|
||||
href: 'https://portail.recette.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
color: 'gray',
|
||||
name: 'Traefik',
|
||||
url: 'Reverse Proxy SSL',
|
||||
desc: "Let's Encrypt — Routage dynamique",
|
||||
},
|
||||
],
|
||||
apps: [
|
||||
{
|
||||
icon: '🧾',
|
||||
color: 'green',
|
||||
name: 'Démat. Facturation DSI',
|
||||
url: 'demat-facturation.recette.santinova-soft.org',
|
||||
href: 'https://demat-facturation.recette.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: '👁️',
|
||||
color: 'indigo',
|
||||
name: 'Veille Réglementaire',
|
||||
url: 'veille.recette.santinova-soft.org',
|
||||
href: 'https://veille.recette.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: '🗺️',
|
||||
color: 'cyan',
|
||||
name: 'SONUM',
|
||||
url: 'sonum.recette.santinova-soft.org',
|
||||
desc: 'Cartographie solutions numériques FEHAP',
|
||||
href: 'https://sonum.recette.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: '👤',
|
||||
color: 'pink',
|
||||
name: 'Itinova Contacts',
|
||||
url: 'contacts.recette.santinova-soft.org',
|
||||
href: 'https://contacts.recette.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: '🚗',
|
||||
color: 'yellow',
|
||||
name: 'Flotte Véhicules',
|
||||
url: 'flotte.recette.santinova-soft.org',
|
||||
href: 'https://flotte.recette.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: '🎧',
|
||||
color: 'orange',
|
||||
name: 'Podcasts Itinova',
|
||||
url: 'podcasts.recette.santinova-soft.org',
|
||||
href: 'https://podcasts.recette.santinova-soft.org',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const PRODUCTION = {
|
||||
label: 'PRODUCTION',
|
||||
color: 'emerald',
|
||||
ip: '180.149.196.138',
|
||||
os: 'Debian GNU/Linux 12',
|
||||
cpu: '8 vCores',
|
||||
ram: '16 Go',
|
||||
disk: '246 Go',
|
||||
services: [
|
||||
{
|
||||
icon: GitBranch,
|
||||
color: 'purple',
|
||||
name: 'Gitea',
|
||||
url: 'git.santinova-soft.org',
|
||||
desc: 'Dépôt Git principal',
|
||||
href: 'https://git.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: LayoutDashboard,
|
||||
color: 'blue',
|
||||
name: 'Dashboard',
|
||||
url: 'dashboard.santinova-soft.org',
|
||||
desc: 'Monitoring temps réel',
|
||||
href: 'https://dashboard.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
color: 'teal',
|
||||
name: 'Portail Applicatif',
|
||||
url: 'portail.santinova-soft.org',
|
||||
desc: 'Vitrine applicative production',
|
||||
href: 'https://portail.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
color: 'gray',
|
||||
name: 'Traefik',
|
||||
url: 'Reverse Proxy SSL',
|
||||
desc: "Let's Encrypt — Routage dynamique",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const CICD_STEPS = [
|
||||
{ icon: GitBranch, label: 'Push code', desc: 'Développeur pousse sur Gitea' },
|
||||
{ icon: Zap, label: 'Webhook', desc: 'Gitea déclenche le webhook' },
|
||||
{ icon: Package, label: 'docker compose build', desc: 'Build de la nouvelle image' },
|
||||
{ icon: Server, label: 'docker compose up -d', desc: 'Redémarrage du conteneur' },
|
||||
{ icon: CheckCircle, label: 'Health check', desc: 'Vérification de disponibilité' },
|
||||
];
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
Helpers de couleur
|
||||
───────────────────────────────────────────── */
|
||||
const colorMap = {
|
||||
purple: 'border-purple-500/40 bg-purple-500/10 text-purple-300',
|
||||
blue: 'border-blue-500/40 bg-blue-500/10 text-blue-300',
|
||||
teal: 'border-teal-500/40 bg-teal-500/10 text-teal-300',
|
||||
gray: 'border-gray-500/40 bg-gray-500/10 text-gray-300',
|
||||
green: 'border-green-500/40 bg-green-500/10 text-green-300',
|
||||
indigo: 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300',
|
||||
cyan: 'border-cyan-500/40 bg-cyan-500/10 text-cyan-300',
|
||||
pink: 'border-pink-500/40 bg-pink-500/10 text-pink-300',
|
||||
yellow: 'border-yellow-500/40 bg-yellow-500/10 text-yellow-300',
|
||||
orange: 'border-orange-500/40 bg-orange-500/10 text-orange-300',
|
||||
};
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
Composants
|
||||
───────────────────────────────────────────── */
|
||||
function ServerBadge({ env }) {
|
||||
const isAmber = env.color === 'amber';
|
||||
const borderColor = isAmber ? 'border-amber-500/30' : 'border-emerald-500/30';
|
||||
const bgColor = isAmber ? 'bg-amber-500/5' : 'bg-emerald-500/5';
|
||||
return (
|
||||
<div className={`flex flex-wrap gap-4 p-3 rounded-xl border ${borderColor} ${bgColor} mb-5`}>
|
||||
{[
|
||||
{ icon: Server, label: env.ip },
|
||||
{ icon: Cpu, label: env.cpu },
|
||||
{ icon: Activity, label: env.ram + ' RAM' },
|
||||
{ icon: HardDrive, label: env.disk + ' Disque' },
|
||||
{ icon: Network, label: env.os },
|
||||
].map(({ icon: Icon, label }) => (
|
||||
<div key={label} className="flex items-center gap-1.5 text-xs text-gray-400">
|
||||
<Icon className="w-3.5 h-3.5 text-gray-500" />
|
||||
<span>{label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ServiceCard({ item, withDb = false }) {
|
||||
const cls = colorMap[item.color] || colorMap.gray;
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<div className={`flex items-start gap-3 p-3 rounded-xl border ${cls} transition-all hover:scale-[1.01]`}>
|
||||
<div className="mt-0.5 flex-shrink-0">
|
||||
{typeof Icon === 'string' ? (
|
||||
<span className="text-xl">{Icon}</span>
|
||||
) : (
|
||||
<Icon className="w-5 h-5" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-semibold text-sm text-white">{item.name}</span>
|
||||
{item.href && (
|
||||
<a
|
||||
href={item.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-500 hover:text-gray-300 transition-colors"
|
||||
>
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 truncate">{item.url}</p>
|
||||
{item.desc && <p className="text-xs text-gray-500 mt-0.5">{item.desc}</p>}
|
||||
</div>
|
||||
{withDb && (
|
||||
<div className="flex items-center gap-1 text-xs text-gray-600 flex-shrink-0">
|
||||
<Database className="w-3 h-3" />
|
||||
<span>MySQL</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionTitle({ children, color = 'amber' }) {
|
||||
const cls = color === 'amber' ? 'text-amber-400' : 'text-emerald-400';
|
||||
return <h3 className={`text-xs font-bold uppercase tracking-widest ${cls} mb-3`}>{children}</h3>;
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
Page principale
|
||||
───────────────────────────────────────────── */
|
||||
export default function DocumentationPage() {
|
||||
const [schemaOpen, setSchemaOpen] = useState(true);
|
||||
|
||||
return (
|
||||
<div className="space-y-8 pb-12">
|
||||
{/* ── En-tête ── */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center shadow-lg shadow-blue-500/20">
|
||||
<BookOpen className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Documentation Infrastructure</h1>
|
||||
<p className="text-sm text-gray-400">Architecture de déploiement Santinova — Recette & Production</p>
|
||||
</div>
|
||||
<div className="ml-auto flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20">
|
||||
<Clock className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span className="text-xs text-emerald-400">Mis à jour le 04 Mai 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Schéma d'architecture ── */}
|
||||
<div className="rounded-2xl border border-dark-700 bg-dark-900 overflow-hidden">
|
||||
<button
|
||||
onClick={() => setSchemaOpen((v) => !v)}
|
||||
className="w-full flex items-center justify-between px-6 py-4 hover:bg-dark-800 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-blue-600/20 flex items-center justify-center">
|
||||
<Network className="w-4 h-4 text-blue-400" />
|
||||
</div>
|
||||
<span className="font-semibold text-white">Schéma d'Architecture</span>
|
||||
</div>
|
||||
{schemaOpen ? (
|
||||
<ChevronUp className="w-5 h-5 text-gray-400" />
|
||||
) : (
|
||||
<ChevronDown className="w-5 h-5 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
{schemaOpen && (
|
||||
<div className="px-6 pb-6">
|
||||
<img
|
||||
src="/infra_schema_v2.png"
|
||||
alt="Schéma d'architecture infrastructure Santinova"
|
||||
className="w-full rounded-xl border border-dark-700 shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Grille Recette / CI-CD / Production ── */}
|
||||
<div className="grid grid-cols-1 xl:grid-cols-[1fr_auto_1fr] gap-6">
|
||||
|
||||
{/* ── RECETTE ── */}
|
||||
<div className="rounded-2xl border border-amber-500/30 bg-dark-900 p-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-3 h-3 rounded-full bg-amber-400 shadow-lg shadow-amber-400/50" />
|
||||
<h2 className="text-xl font-bold text-amber-400 tracking-wide">RECETTE</h2>
|
||||
<span className="ml-auto text-xs text-gray-500 font-mono">78.138.58.109</span>
|
||||
</div>
|
||||
<ServerBadge env={RECETTE} />
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Infra de base */}
|
||||
<div>
|
||||
<SectionTitle color="amber">Infrastructure de base</SectionTitle>
|
||||
<div className="space-y-2">
|
||||
{RECETTE.infra.map((item) => (
|
||||
<ServiceCard key={item.name} item={item} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Applications */}
|
||||
<div>
|
||||
<SectionTitle color="amber">Applications déployées</SectionTitle>
|
||||
<div className="space-y-2">
|
||||
{RECETTE.apps.map((item) => (
|
||||
<ServiceCard key={item.name} item={item} withDb />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── CI/CD Pipeline ── */}
|
||||
<div className="flex flex-col items-center justify-center gap-3 px-4 xl:px-2 py-6">
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-blue-400 mb-2">CI/CD</span>
|
||||
{CICD_STEPS.map((step, i) => {
|
||||
const Icon = step.icon;
|
||||
return (
|
||||
<React.Fragment key={step.label}>
|
||||
<div className="flex flex-col items-center gap-1 group">
|
||||
<div className="w-10 h-10 rounded-xl bg-blue-600/20 border border-blue-500/30 flex items-center justify-center group-hover:bg-blue-600/30 transition-colors">
|
||||
<Icon className="w-5 h-5 text-blue-400" />
|
||||
</div>
|
||||
<span className="text-xs text-gray-400 text-center max-w-[80px] leading-tight">{step.label}</span>
|
||||
</div>
|
||||
{i < CICD_STEPS.length - 1 && (
|
||||
<div className="w-px h-4 bg-gradient-to-b from-blue-500/50 to-blue-500/10" />
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
<div className="mt-4 flex items-center gap-2 px-3 py-2 rounded-xl bg-blue-600/10 border border-blue-500/20">
|
||||
<ArrowRight className="w-4 h-4 text-blue-400" />
|
||||
<span className="text-xs text-blue-300 font-semibold whitespace-nowrap">Promotion → PROD</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── PRODUCTION ── */}
|
||||
<div className="rounded-2xl border border-emerald-500/30 bg-dark-900 p-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-3 h-3 rounded-full bg-emerald-400 shadow-lg shadow-emerald-400/50" />
|
||||
<h2 className="text-xl font-bold text-emerald-400 tracking-wide">PRODUCTION</h2>
|
||||
<span className="ml-auto text-xs text-gray-500 font-mono">180.149.196.138</span>
|
||||
</div>
|
||||
<ServerBadge env={PRODUCTION} />
|
||||
|
||||
<SectionTitle color="emerald">Services actifs</SectionTitle>
|
||||
<div className="space-y-2 mb-4">
|
||||
{PRODUCTION.services.map((item) => (
|
||||
<ServiceCard key={item.name} item={item} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Carte "Applications à venir" */}
|
||||
<div className="flex items-center gap-3 p-3 rounded-xl border border-dashed border-gray-600/40 bg-gray-500/5">
|
||||
<Package className="w-5 h-5 text-gray-500" />
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-gray-400">Applications à venir</p>
|
||||
<p className="text-xs text-gray-600">Déploiement progressif via CI/CD</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Badge metrics-collector */}
|
||||
<div className="mt-4 flex items-center gap-2 px-3 py-2 rounded-lg bg-emerald-500/5 border border-emerald-500/20">
|
||||
<Activity className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span className="text-xs text-emerald-400">metrics-collector · systemd · actif</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Légende technologique ── */}
|
||||
<div className="rounded-2xl border border-dark-700 bg-dark-900 p-6">
|
||||
<h3 className="text-sm font-bold text-white mb-4">Stack Technologique</h3>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ emoji: '🐳', label: 'Docker', desc: 'Conteneurisation' },
|
||||
{ emoji: '🔒', label: 'HTTPS', desc: "Let's Encrypt SSL" },
|
||||
{ emoji: '🗄️', label: 'MySQL 8.0', desc: 'Base de données' },
|
||||
{ emoji: '🔀', label: 'Traefik', desc: 'Reverse Proxy' },
|
||||
].map((t) => (
|
||||
<div
|
||||
key={t.label}
|
||||
className="flex items-center gap-3 p-3 rounded-xl bg-dark-800 border border-dark-700"
|
||||
>
|
||||
<span className="text-2xl">{t.emoji}</span>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-white">{t.label}</p>
|
||||
<p className="text-xs text-gray-500">{t.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
227
frontend/src/pages/GiteaPage.jsx
Normal file
227
frontend/src/pages/GiteaPage.jsx
Normal file
@@ -0,0 +1,227 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
458
frontend/src/pages/InventairePage.jsx
Normal file
458
frontend/src/pages/InventairePage.jsx
Normal file
@@ -0,0 +1,458 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
140
frontend/src/pages/LoginPage.jsx
Normal file
140
frontend/src/pages/LoginPage.jsx
Normal file
@@ -0,0 +1,140 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
251
frontend/src/pages/MonitoringPage.jsx
Normal file
251
frontend/src/pages/MonitoringPage.jsx
Normal file
@@ -0,0 +1,251 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
449
frontend/src/pages/TerminalPage.jsx
Normal file
449
frontend/src/pages/TerminalPage.jsx
Normal file
@@ -0,0 +1,449 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
73
frontend/src/utils/api.js
Normal file
73
frontend/src/utils/api.js
Normal file
@@ -0,0 +1,73 @@
|
||||
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`);
|
||||
37
frontend/tailwind.config.js
Normal file
37
frontend/tailwind.config.js
Normal file
@@ -0,0 +1,37 @@
|
||||
/** @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: [],
|
||||
};
|
||||
19
frontend/vite.config.js
Normal file
19
frontend/vite.config.js
Normal file
@@ -0,0 +1,19 @@
|
||||
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,
|
||||
},
|
||||
});
|
||||
@@ -1,9 +0,0 @@
|
||||
# Image de jobs locale : Node 22, pnpm, Bash, Git et GNU tar sont prêts avant le workflow.
|
||||
FROM node:22-alpine
|
||||
|
||||
# actions/cache s’appuie sur GNU tar pour archiver le store pnpm.
|
||||
RUN apk add --no-cache bash git tar \
|
||||
&& tar --version | grep -q 'GNU tar' \
|
||||
&& corepack enable \
|
||||
&& corepack prepare pnpm@10.4.1 --activate \
|
||||
&& pnpm --version
|
||||
@@ -1,17 +0,0 @@
|
||||
# Supervision des applications
|
||||
|
||||
Le script `healthcheck-apps.sh` est exécuté par le timer systemd toutes les cinq minutes et trois minutes après chaque démarrage serveur. Il vérifie les conteneurs Docker Compose, leur healthcheck, leur politique de redémarrage et les routes HTTPS Traefik déclarées. Une tâche ponctuelle terminée avec succès est reconnue comme telle. Toute réponse HTTP inférieure à 500 confirme la joignabilité d’une route, y compris une API sans page racine ou un tableau protégé. En cas d’anomalie, il produit un rapport et une entrée de journal, **sans redémarrer de conteneur**. Les redémarrages automatiques restent assurés par les politiques Docker `restart` et par `manus-apps.service` au démarrage du serveur.
|
||||
|
||||
Le dernier rapport est écrit dans `/var/lib/manus-apps-health/latest.txt`. Les anomalies sont aussi consignées dans le journal système avec le tag `manus-apps-health`.
|
||||
|
||||
Les pushes Gitea du dépôt `manus-dashboard` ne recréent jamais le conteneur depuis lui-même. Le webhook dépose une demande atomique, surveillée par `manus-dashboard-self-deploy.path`, puis le service hôte exécute le redéploiement. Cette séparation évite l’arrêt du client Docker avant le démarrage du conteneur de remplacement.
|
||||
|
||||
Après mise à jour Git, installer ou actualiser le service avec :
|
||||
|
||||
```bash
|
||||
sudo ./ops/install-healthcheck.sh
|
||||
```
|
||||
|
||||
## Runner CI de production
|
||||
|
||||
`install-gitea-act-runner.sh` installe le runner Gitea de production depuis ces fichiers versionnés. Il utilise l’image locale `gitea-runner-node:22`, le label `ci-node22`, le réseau Docker `web` et un cache persistant dans `/opt/manus-deploy/gitea-runner/cache`.
|
||||
@@ -1,24 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
# Déploie le dashboard depuis l’hôte systemd, jamais depuis le conteneur lui-même.
|
||||
set -Eeuo pipefail
|
||||
|
||||
readonly APP_DIR="/opt/manus-deploy/apps/manus-dashboard"
|
||||
readonly REQUEST_FILE="${APP_DIR}/.deployment-request"
|
||||
readonly PROCESSING_FILE="${APP_DIR}/.deployment-request.processing"
|
||||
readonly LOCK_FILE="/run/manus-dashboard-self-deploy.lock"
|
||||
|
||||
exec 9>"${LOCK_FILE}"
|
||||
flock -n 9 || exit 0
|
||||
[[ -f "${REQUEST_FILE}" ]] || exit 0
|
||||
mv "${REQUEST_FILE}" "${PROCESSING_FILE}"
|
||||
|
||||
restore_request() {
|
||||
[[ -f "${PROCESSING_FILE}" ]] && mv "${PROCESSING_FILE}" "${REQUEST_FILE}"
|
||||
}
|
||||
trap restore_request ERR
|
||||
|
||||
cd "${APP_DIR}"
|
||||
git pull --ff-only origin main
|
||||
docker compose up -d --build
|
||||
rm -f "${PROCESSING_FILE}"
|
||||
logger -p daemon.info -t manus-dashboard-self-deploy "Dashboard redéployé depuis le service hôte"
|
||||
@@ -1,17 +0,0 @@
|
||||
log:
|
||||
level: info
|
||||
|
||||
runner:
|
||||
capacity: 1
|
||||
envs:
|
||||
DOCKER_HOST: unix:///var/run/docker.sock
|
||||
|
||||
# Cache Gitea Actions persistant, accessible depuis les jobs du réseau Docker web.
|
||||
cache:
|
||||
enabled: true
|
||||
dir: /opt/manus-deploy/gitea-runner/cache
|
||||
host: 172.18.0.1
|
||||
port: 18088
|
||||
|
||||
container:
|
||||
network: web
|
||||
@@ -1,17 +0,0 @@
|
||||
[Unit]
|
||||
Description=Runner Gitea Actions de production
|
||||
After=docker.service network-online.target
|
||||
Requires=docker.service
|
||||
Wants=network-online.target
|
||||
|
||||
[Service]
|
||||
Type=simple
|
||||
User=root
|
||||
WorkingDirectory=/opt/manus-deploy/gitea-runner
|
||||
Environment=DOCKER_HOST=unix:///var/run/docker.sock
|
||||
ExecStart=/usr/local/bin/act_runner daemon --config /opt/manus-deploy/gitea-runner/config.yaml
|
||||
Restart=always
|
||||
RestartSec=10s
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
@@ -1,120 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
# Vérifie les conteneurs Compose, leur healthcheck, leur redémarrage et leurs routes Traefik.
|
||||
# Ce contrôle est volontairement non intrusif : Docker et manus-apps.service assurent les redémarrages.
|
||||
set -Eeuo pipefail
|
||||
|
||||
readonly STATE_DIR="/var/lib/manus-apps-health"
|
||||
readonly REPORT_FILE="${STATE_DIR}/latest.txt"
|
||||
readonly LOCK_FILE="/run/manus-apps-health.lock"
|
||||
readonly MODE="${1:---check-only}"
|
||||
|
||||
mkdir -p "$STATE_DIR"
|
||||
exec 9>"$LOCK_FILE"
|
||||
flock -n 9 || exit 0
|
||||
|
||||
declare -A SEEN_HTTP_HOSTS=()
|
||||
declare -a REPORT_LINES=()
|
||||
HAS_FAILURE=false
|
||||
|
||||
log_line() {
|
||||
local level="$1"
|
||||
local message="$2"
|
||||
local line="[$(date -Is)] [$level] $message"
|
||||
REPORT_LINES+=("$line")
|
||||
echo "$line"
|
||||
}
|
||||
|
||||
mark_failure() {
|
||||
HAS_FAILURE=true
|
||||
log_line "KO" "$1"
|
||||
}
|
||||
|
||||
is_healthy_http_status() {
|
||||
# Toute réponse HTTP (< 500) confirme que Traefik et le service restent joignables.
|
||||
# Les 401/404 sont légitimes pour les tableaux protégés ou API sans page racine.
|
||||
[[ "$1" =~ ^[1-4][0-9][0-9]$ ]]
|
||||
}
|
||||
|
||||
check_http_route() {
|
||||
local container_id="$1"
|
||||
local project="$2"
|
||||
local labels host_rule host status
|
||||
|
||||
labels="$(docker inspect -f '{{range $key, $value := .Config.Labels}}{{$key}}={{$value}}{{"\n"}}{{end}}' "$container_id")"
|
||||
host_rule="$(printf '%s\n' "$labels" | grep -oE 'Host\(`[^`]+`\)' | head -n 1 || true)"
|
||||
[[ -n "$host_rule" ]] || return 0
|
||||
|
||||
host="${host_rule#Host(\`}"
|
||||
host="${host%\`)}"
|
||||
[[ -n "$host" ]] || return 0
|
||||
[[ -z "${SEEN_HTTP_HOSTS[$host]:-}" ]] || return 0
|
||||
SEEN_HTTP_HOSTS["$host"]=1
|
||||
|
||||
status="$(curl --silent --show-error --location --max-redirs 3 --connect-timeout 5 --max-time 8 \
|
||||
--output /dev/null --write-out '%{http_code}' "https://${host}" 2>/dev/null || true)"
|
||||
if is_healthy_http_status "$status"; then
|
||||
log_line "OK" "${project}: HTTPS ${host} → ${status}"
|
||||
else
|
||||
# Un échec HTTPS peut dépendre de Traefik, DNS ou d’une redirection applicative.
|
||||
# Il déclenche une alerte, jamais un redémarrage Compose automatique.
|
||||
mark_failure "${project}: HTTPS ${host} → ${status:-erreur réseau}"
|
||||
fi
|
||||
}
|
||||
|
||||
check_containers() {
|
||||
local container_id name project workdir config_files status health restart_policy exit_code
|
||||
mapfile -t container_ids < <(docker ps -aq --filter label=com.docker.compose.project)
|
||||
|
||||
if [[ "${#container_ids[@]}" -eq 0 ]]; then
|
||||
mark_failure "Aucun conteneur Docker Compose détecté"
|
||||
return
|
||||
fi
|
||||
|
||||
for container_id in "${container_ids[@]}"; do
|
||||
name="$(docker inspect -f '{{.Name}}' "$container_id" | sed 's#^/##')"
|
||||
project="$(docker inspect -f '{{index .Config.Labels "com.docker.compose.project"}}' "$container_id")"
|
||||
workdir="$(docker inspect -f '{{index .Config.Labels "com.docker.compose.project.working_dir"}}' "$container_id")"
|
||||
config_files="$(docker inspect -f '{{index .Config.Labels "com.docker.compose.project.config_files"}}' "$container_id")"
|
||||
status="$(docker inspect -f '{{.State.Status}}' "$container_id")"
|
||||
health="$(docker inspect -f '{{if .State.Health}}{{.State.Health.Status}}{{else}}none{{end}}' "$container_id")"
|
||||
restart_policy="$(docker inspect -f '{{.HostConfig.RestartPolicy.Name}}' "$container_id")"
|
||||
exit_code="$(docker inspect -f '{{.State.ExitCode}}' "$container_id")"
|
||||
|
||||
if [[ "$status" != "running" ]]; then
|
||||
if [[ "$status" == "exited" && "$exit_code" == "0" ]]; then
|
||||
log_line "INFO" "${project}/${name}: tâche ponctuelle terminée"
|
||||
continue
|
||||
fi
|
||||
mark_failure "${project}/${name}: état Docker ${status}"
|
||||
continue
|
||||
fi
|
||||
if [[ "$health" == "unhealthy" ]]; then
|
||||
mark_failure "${project}/${name}: healthcheck unhealthy"
|
||||
continue
|
||||
fi
|
||||
if [[ "$restart_policy" != "unless-stopped" && "$restart_policy" != "always" ]]; then
|
||||
mark_failure "${project}/${name}: politique de redémarrage ${restart_policy:-none}"
|
||||
continue
|
||||
fi
|
||||
|
||||
log_line "OK" "${project}/${name}: running, health=${health}, restart=${restart_policy}"
|
||||
check_http_route "$container_id" "$project"
|
||||
done
|
||||
}
|
||||
|
||||
check_containers
|
||||
|
||||
{
|
||||
echo "Supervision Santinova / Itinova"
|
||||
echo "Généré : $(date -Is)"
|
||||
echo "Statut : $([[ "$HAS_FAILURE" == true ]] && echo KO || echo OK)"
|
||||
printf '%s\n' "${REPORT_LINES[@]}"
|
||||
} > "${REPORT_FILE}.tmp"
|
||||
mv "${REPORT_FILE}.tmp" "$REPORT_FILE"
|
||||
|
||||
if [[ "$HAS_FAILURE" == true ]]; then
|
||||
logger -p daemon.err -t manus-apps-health "Anomalie détectée : consulter ${REPORT_FILE}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
logger -p daemon.info -t manus-apps-health "Toutes les applications contrôlées sont opérationnelles"
|
||||
@@ -1,38 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
# Installe et enregistre le runner CI production à partir des fichiers versionnés.
|
||||
set -Eeuo pipefail
|
||||
|
||||
readonly SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||
readonly APP_DIR="$(dirname "${SCRIPT_DIR}")"
|
||||
readonly RUNNER_DIR="/opt/manus-deploy/gitea-runner"
|
||||
readonly GITEA_CONTAINER="gitea"
|
||||
readonly GITEA_URL="https://git.santinova-soft.org"
|
||||
readonly RUNNER_NAME="production-docker-runner"
|
||||
readonly RUNNER_IMAGE="gitea-runner-node:22"
|
||||
readonly RUNNER_LABELS="ci-node22:docker://${RUNNER_IMAGE}"
|
||||
readonly LABEL_FILE="${RUNNER_DIR}/labels"
|
||||
|
||||
install -d -m 0750 "${RUNNER_DIR}" "${RUNNER_DIR}/cache"
|
||||
install -m 0640 "${SCRIPT_DIR}/gitea-act-runner-config.yaml" "${RUNNER_DIR}/config.yaml"
|
||||
install -D -m 0644 "${SCRIPT_DIR}/gitea-act-runner.service" /etc/systemd/system/gitea-act-runner.service
|
||||
docker build --tag "${RUNNER_IMAGE}" --file "${SCRIPT_DIR}/Dockerfile.gitea-runner" "${APP_DIR}"
|
||||
|
||||
if [[ ! -f "${RUNNER_DIR}/.runner" || ! -f "${LABEL_FILE}" || "$(<"${LABEL_FILE}")" != "${RUNNER_LABELS}" ]]; then
|
||||
systemctl stop gitea-act-runner.service 2>/dev/null || true
|
||||
rm -f "${RUNNER_DIR}/.runner"
|
||||
token="$(docker exec -u git "${GITEA_CONTAINER}" gitea actions generate-runner-token)"
|
||||
(
|
||||
cd "${RUNNER_DIR}"
|
||||
/usr/local/bin/act_runner register --no-interactive \
|
||||
--instance "${GITEA_URL}" \
|
||||
--token "${token}" \
|
||||
--name "${RUNNER_NAME}" \
|
||||
--labels "${RUNNER_LABELS}" \
|
||||
--config "${RUNNER_DIR}/config.yaml"
|
||||
)
|
||||
printf '%s\n' "${RUNNER_LABELS}" > "${LABEL_FILE}"
|
||||
fi
|
||||
|
||||
systemctl daemon-reload
|
||||
systemctl enable --now gitea-act-runner.service
|
||||
systemctl is-active gitea-act-runner.service
|
||||
@@ -1,19 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
# Installe la supervision depuis une copie versionnée du dépôt manus-dashboard.
|
||||
set -Eeuo pipefail
|
||||
|
||||
readonly SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||
|
||||
install -D -m 0750 "${SCRIPT_DIR}/healthcheck-apps.sh" /opt/manus-deploy/scripts/healthcheck-apps.sh
|
||||
install -D -m 0644 "${SCRIPT_DIR}/manus-apps-health.service" /etc/systemd/system/manus-apps-health.service
|
||||
install -D -m 0644 "${SCRIPT_DIR}/manus-apps-health.timer" /etc/systemd/system/manus-apps-health.timer
|
||||
install -D -m 0750 "${SCRIPT_DIR}/deploy-dashboard-from-host.sh" /opt/manus-deploy/scripts/deploy-dashboard-from-host.sh
|
||||
install -D -m 0644 "${SCRIPT_DIR}/manus-dashboard-self-deploy.service" /etc/systemd/system/manus-dashboard-self-deploy.service
|
||||
install -D -m 0644 "${SCRIPT_DIR}/manus-dashboard-self-deploy.path" /etc/systemd/system/manus-dashboard-self-deploy.path
|
||||
|
||||
systemctl daemon-reload
|
||||
systemctl enable --now manus-apps-health.timer
|
||||
systemctl enable --now manus-dashboard-self-deploy.path
|
||||
# Un échec de contrôle doit rester visible dans systemd, sans bloquer l’installation du timer.
|
||||
systemctl start manus-apps-health.service || true
|
||||
systemctl status manus-apps-health.service --no-pager || true
|
||||
@@ -1,13 +0,0 @@
|
||||
[Unit]
|
||||
Description=Contrôle de santé des applications Santinova / Itinova
|
||||
Documentation=https://git.santinova-soft.org/manus-admin/manus-dashboard
|
||||
After=docker.service network-online.target manus-apps.service
|
||||
Requires=docker.service
|
||||
Wants=network-online.target
|
||||
|
||||
[Service]
|
||||
Type=oneshot
|
||||
ExecStart=/opt/manus-deploy/scripts/healthcheck-apps.sh --check-only
|
||||
TimeoutStartSec=5min
|
||||
StandardOutput=journal
|
||||
StandardError=journal
|
||||
@@ -1,12 +0,0 @@
|
||||
[Unit]
|
||||
Description=Planification de la supervision des applications Santinova / Itinova
|
||||
|
||||
[Timer]
|
||||
OnBootSec=3min
|
||||
OnUnitActiveSec=5min
|
||||
RandomizedDelaySec=30s
|
||||
Persistent=true
|
||||
Unit=manus-apps-health.service
|
||||
|
||||
[Install]
|
||||
WantedBy=timers.target
|
||||
@@ -1,9 +0,0 @@
|
||||
[Unit]
|
||||
Description=Surveille les demandes de redéploiement du Manus Dashboard
|
||||
|
||||
[Path]
|
||||
PathExists=/opt/manus-deploy/apps/manus-dashboard/.deployment-request
|
||||
Unit=manus-dashboard-self-deploy.service
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
@@ -1,13 +0,0 @@
|
||||
[Unit]
|
||||
Description=Redéploiement hôte du Manus Dashboard
|
||||
After=docker.service network-online.target
|
||||
Requires=docker.service
|
||||
|
||||
[Service]
|
||||
Type=oneshot
|
||||
ExecStart=/opt/manus-deploy/scripts/deploy-dashboard-from-host.sh
|
||||
Restart=on-failure
|
||||
RestartSec=1min
|
||||
TimeoutStartSec=10min
|
||||
StandardOutput=journal
|
||||
StandardError=journal
|
||||
@@ -25,10 +25,10 @@ RUN apk add --no-cache docker-cli docker-cli-compose git curl unzip bash openssh
|
||||
RUN git config --global user.email "admin@santinova-soft.org" && \
|
||||
git config --global user.name "Manus Dashboard"
|
||||
|
||||
# Installer les dépendances backend depuis un verrou versionné pour un build déterministe.
|
||||
COPY backend/package.json backend/package-lock.json ./backend/
|
||||
# Copy backend
|
||||
COPY backend/package.json ./backend/
|
||||
WORKDIR /app/backend
|
||||
RUN npm ci --omit=dev
|
||||
RUN npm install --production
|
||||
|
||||
COPY backend/ ./
|
||||
|
||||
|
||||
2483
src/backend/package-lock.json
generated
2483
src/backend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -5,8 +5,7 @@
|
||||
"main": "src/index.js",
|
||||
"scripts": {
|
||||
"start": "node src/index.js",
|
||||
"dev": "nodemon src/index.js",
|
||||
"test": "node test/app-registry.test.js && node test/healthcheck.test.js && node test/webhook.test.js && node test/gitea.test.js"
|
||||
"dev": "nodemon src/index.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "^4.21.0",
|
||||
|
||||
@@ -4,7 +4,6 @@ const path = require('path');
|
||||
const { exec, execSync } = require('child_process');
|
||||
const config = require('./config');
|
||||
const { createRepo, giteaClient } = require('./gitea');
|
||||
const { refreshApps, writeAppManifest } = require('./app-registry');
|
||||
|
||||
// ============ TEMPLATES DOCKERFILE ============
|
||||
|
||||
@@ -390,29 +389,92 @@ function getContainerPort(stack, customPort) {
|
||||
return defaults[stack] || 3000;
|
||||
}
|
||||
|
||||
// ============ REGISTRE DES APPLICATIONS ============
|
||||
// ============ APPS PERSISTENCE ============
|
||||
|
||||
/**
|
||||
* Recharge le cache mémoire à partir des seuls manifests app.json.
|
||||
* Les anciens fichiers de liste applicative ne sont plus lus : ils pouvaient
|
||||
* afficher des applications non déployées et désynchroniser le portail.
|
||||
*/
|
||||
function initDynamicApps() {
|
||||
return refreshApps(config);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Publie le manifeste d'une application créée depuis le dashboard, puis
|
||||
* rafraîchit immédiatement le registre partagé par le dashboard et le portail.
|
||||
*/
|
||||
function addDynamicApp(appDef) {
|
||||
const app = writeAppManifest({
|
||||
appsBasePath: config.appsBasePath,
|
||||
environment: config.environment,
|
||||
app: appDef,
|
||||
});
|
||||
refreshApps(config);
|
||||
return app;
|
||||
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 (créées via l'interface)
|
||||
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. Découverte automatique : scanner les dossiers apps/*.json
|
||||
let discovered = 0;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[discovery] Erreur scan apps:', err.message);
|
||||
}
|
||||
|
||||
console.log(`Apps chargées: ${dynamicApps.length} dynamiques + ${discovered} découvertes (total: ${config.apps.length})`);
|
||||
}
|
||||
|
||||
// ============ CREATION D'APPLICATION ============
|
||||
@@ -426,7 +488,6 @@ async function createApplication(params, logCallback) {
|
||||
port,
|
||||
needsDb,
|
||||
dbType,
|
||||
category,
|
||||
sourceType, // 'zip' or 'gitea'
|
||||
giteaRepoUrl, // URL du repo Gitea existant
|
||||
zipFilePath, // Chemin du fichier ZIP uploadé
|
||||
@@ -624,8 +685,6 @@ async function createApplication(params, logCallback) {
|
||||
stack: stack,
|
||||
needsDb: needsDb || false,
|
||||
dbType: dbType || null,
|
||||
category: category || 'SANTINOVA',
|
||||
image: `images/${appId}.png`,
|
||||
createdAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
@@ -678,6 +737,7 @@ module.exports = {
|
||||
generateDockerCompose,
|
||||
getAvailableStacks,
|
||||
initDynamicApps,
|
||||
loadDynamicApps,
|
||||
addDynamicApp,
|
||||
DOCKERFILE_TEMPLATES,
|
||||
};
|
||||
|
||||
@@ -1,160 +0,0 @@
|
||||
/*
|
||||
* Registre des applications déployées.
|
||||
*
|
||||
* Source de vérité : /opt/manus-deploy/apps/<dossier>/app.json.
|
||||
* Le dashboard et le portail ne doivent jamais dépendre d'une liste applicative
|
||||
* codée en dur : une application sans manifeste n'est pas considérée déployée.
|
||||
*/
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const CATEGORIES = new Set(['ITINOVA', 'SANTINOVA', 'INFRA']);
|
||||
const ENVIRONMENTS = new Set(['recette', 'prod']);
|
||||
|
||||
function isHttpsUrl(value) {
|
||||
if (typeof value !== 'string' || value.length === 0) return false;
|
||||
try {
|
||||
return new URL(value).protocol === 'https:';
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Valide puis normalise un manifeste app.json.
|
||||
* Les champs dérivés (directory et healthCheckUrl) ne sont pas écrits dans le
|
||||
* manifeste : ils sont calculés depuis le dossier et l'environnement courant.
|
||||
*/
|
||||
function normalizeManifest(manifest, directory, environment) {
|
||||
if (!manifest || typeof manifest !== 'object' || Array.isArray(manifest)) {
|
||||
throw new Error('le manifeste doit être un objet JSON');
|
||||
}
|
||||
if (!/^[a-z0-9][a-z0-9-]*$/.test(manifest.id || '')) {
|
||||
throw new Error('id absent ou invalide');
|
||||
}
|
||||
if (typeof manifest.name !== 'string' || manifest.name.trim().length === 0) {
|
||||
throw new Error('name absent ou invalide');
|
||||
}
|
||||
if (!CATEGORIES.has(manifest.category)) {
|
||||
throw new Error('category doit être ITINOVA, SANTINOVA ou INFRA');
|
||||
}
|
||||
if (!manifest.urls || typeof manifest.urls !== 'object') {
|
||||
throw new Error('urls absent ou invalide');
|
||||
}
|
||||
if (!isHttpsUrl(manifest.urls[environment])) {
|
||||
throw new Error(`urls.${environment} absent ou invalide`);
|
||||
}
|
||||
if (manifest.ci !== undefined && (
|
||||
!manifest.ci || typeof manifest.ci !== 'object' || Array.isArray(manifest.ci) ||
|
||||
(manifest.ci.required !== undefined && typeof manifest.ci.required !== 'boolean')
|
||||
)) {
|
||||
throw new Error('ci doit être un objet avec une propriété required booléenne');
|
||||
}
|
||||
|
||||
return {
|
||||
...manifest,
|
||||
name: manifest.name.trim(),
|
||||
directory,
|
||||
containerName: manifest.containerName || manifest.id,
|
||||
healthCheckUrl: manifest.urls[environment],
|
||||
ci: { required: manifest.ci?.required === true },
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Découvre les applications depuis le système de fichiers sans modifier la
|
||||
* configuration mémoire. Les erreurs de manifeste sont retournées explicitement
|
||||
* afin qu'un manifeste défaillant ne fasse pas tomber le dashboard.
|
||||
*/
|
||||
function discoverApps({ appsBasePath, environment }) {
|
||||
if (!ENVIRONMENTS.has(environment)) {
|
||||
throw new Error(`Environnement non supporté : ${environment}`);
|
||||
}
|
||||
|
||||
const apps = [];
|
||||
const errors = [];
|
||||
let entries = [];
|
||||
|
||||
try {
|
||||
entries = fs.readdirSync(appsBasePath, { withFileTypes: true });
|
||||
} catch (error) {
|
||||
return { apps, errors: [{ directory: appsBasePath, error: error.message }] };
|
||||
}
|
||||
|
||||
for (const entry of entries) {
|
||||
if (!entry.isDirectory()) continue;
|
||||
|
||||
const manifestPath = path.join(appsBasePath, entry.name, 'app.json');
|
||||
if (!fs.existsSync(manifestPath)) continue;
|
||||
|
||||
try {
|
||||
const raw = fs.readFileSync(manifestPath, 'utf8');
|
||||
const manifest = normalizeManifest(JSON.parse(raw), entry.name, environment);
|
||||
apps.push(manifest);
|
||||
} catch (error) {
|
||||
errors.push({ directory: entry.name, error: error.message });
|
||||
}
|
||||
}
|
||||
|
||||
apps.sort((left, right) => left.name.localeCompare(right.name, 'fr'));
|
||||
return { apps, errors };
|
||||
}
|
||||
|
||||
/**
|
||||
* Actualise le cache mémoire utilisé par les routes et les contrôles de santé.
|
||||
* Toute valeur obsolète est remplacée : seules les applications réellement
|
||||
* déployées et correctement déclarées restent disponibles.
|
||||
*/
|
||||
function refreshApps(config, logger = console) {
|
||||
const result = discoverApps({
|
||||
appsBasePath: config.appsBasePath,
|
||||
environment: config.environment,
|
||||
});
|
||||
|
||||
config.apps.splice(0, config.apps.length, ...result.apps);
|
||||
for (const issue of result.errors) {
|
||||
logger.warn(`[app-registry] Manifeste ignoré (${issue.directory}) : ${issue.error}`);
|
||||
}
|
||||
logger.info(`[app-registry] ${result.apps.length} application(s) déployée(s) détectée(s)`);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Écrit un manifeste de manière atomique puis le valide avant publication.
|
||||
*/
|
||||
function writeAppManifest({ appsBasePath, environment, app }) {
|
||||
const directory = app.directory || app.id;
|
||||
const appDirectory = path.join(appsBasePath, directory);
|
||||
const normalized = normalizeManifest({ ...app, directory: undefined, healthCheckUrl: undefined }, directory, environment);
|
||||
const manifestPath = path.join(appDirectory, 'app.json');
|
||||
const temporaryPath = `${manifestPath}.tmp`;
|
||||
|
||||
fs.mkdirSync(appDirectory, { recursive: true });
|
||||
fs.writeFileSync(temporaryPath, `${JSON.stringify({ ...normalized, directory: undefined, healthCheckUrl: undefined }, null, 2)}\n`, 'utf8');
|
||||
fs.renameSync(temporaryPath, manifestPath);
|
||||
|
||||
return normalized;
|
||||
}
|
||||
|
||||
function findAppDirectoryByRepo(config, repositoryName) {
|
||||
const app = findAppByRepo(config, repositoryName);
|
||||
return app ? app.directory : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Retourne le manifeste complet afin que le webhook applique les règles de
|
||||
* promotion déclarées par l'application (notamment ci.required).
|
||||
*/
|
||||
function findAppByRepo(config, repositoryName) {
|
||||
const { apps } = refreshApps(config);
|
||||
return apps.find((candidate) => candidate.giteaRepo === repositoryName || candidate.id === repositoryName) || null;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
discoverApps,
|
||||
refreshApps,
|
||||
writeAppManifest,
|
||||
findAppDirectoryByRepo,
|
||||
findAppByRepo,
|
||||
};
|
||||
@@ -1,38 +1,246 @@
|
||||
/*
|
||||
* Configuration du dashboard.
|
||||
*
|
||||
* Les métadonnées des applications ne sont volontairement pas définies ici.
|
||||
* Elles sont lues exclusivement depuis /opt/manus-deploy/apps/<app>/app.json
|
||||
* par app-registry.js, ce qui évite les divergences entre dashboard et portail.
|
||||
*/
|
||||
const environment = process.env.DASHBOARD_ENV || 'recette';
|
||||
|
||||
if (!['recette', 'prod'].includes(environment)) {
|
||||
throw new Error('DASHBOARD_ENV doit valoir "recette" ou "prod"');
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
port: Number.parseInt(process.env.PORT, 10) || 3001,
|
||||
port: process.env.PORT || 3001,
|
||||
jwtSecret: process.env.JWT_SECRET || 'manus-dashboard-secret-2026',
|
||||
jwtExpiry: '24h',
|
||||
environment,
|
||||
|
||||
// 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',
|
||||
healthCheckInterval: Number.parseInt(process.env.HEALTH_CHECK_INTERVAL, 10) || 60000,
|
||||
|
||||
// Cache mémoire hydraté au démarrage puis après chaque création d'application.
|
||||
apps: [],
|
||||
// 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: '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',
|
||||
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',
|
||||
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,
|
||||
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.itinova.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: 'SANTINOVA',
|
||||
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',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@@ -139,38 +139,11 @@ function gitPull(appConfig) {
|
||||
/**
|
||||
* Démarrer un conteneur Docker
|
||||
*/
|
||||
async function startContainer(containerName, appId) {
|
||||
async function startContainer(containerName) {
|
||||
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` };
|
||||
await container.start();
|
||||
return { success: true, message: `Conteneur ${containerName} démarré` };
|
||||
} catch (err) {
|
||||
return { success: false, message: err.message };
|
||||
}
|
||||
|
||||
@@ -70,97 +70,6 @@ async function getBranches(owner, repo) {
|
||||
}
|
||||
}
|
||||
|
||||
function toDurationSeconds(startedAt, completedAt) {
|
||||
if (!startedAt || !completedAt) return null;
|
||||
const milliseconds = new Date(completedAt).getTime() - new Date(startedAt).getTime();
|
||||
return Number.isFinite(milliseconds) && milliseconds >= 0 ? Math.round(milliseconds / 1000) : null;
|
||||
}
|
||||
|
||||
/** Normalise les exécutions CI pour le webhook et le dashboard. */
|
||||
function normalizeWorkflowRun(run) {
|
||||
// Gitea 1.25 renvoie started_at/completed_at (et non les champs GitHub).
|
||||
// Les aliases conservent la compatibilité avec d’éventuelles versions futures.
|
||||
const startedAt = run.started_at || run.run_started_at || null;
|
||||
const completedAt = run.completed_at || run.run_completed_at || run.updated_at || null;
|
||||
return {
|
||||
id: run.id,
|
||||
name: run.name || run.workflow_id || 'Validation CI',
|
||||
status: run.status || 'unknown',
|
||||
conclusion: run.conclusion || null,
|
||||
event: run.event || null,
|
||||
commit: run.head_sha || null,
|
||||
createdAt: run.created_at || null,
|
||||
startedAt,
|
||||
completedAt,
|
||||
durationSeconds: toDurationSeconds(startedAt, completedAt),
|
||||
url: run.html_url || null,
|
||||
};
|
||||
}
|
||||
|
||||
async function getWorkflowRuns(owner, repo, limit = 10) {
|
||||
try {
|
||||
const response = await giteaClient.get(`/repos/${owner}/${repo}/actions/runs`, {
|
||||
params: { limit, page: 1 },
|
||||
});
|
||||
return (response.data.workflow_runs || []).map(normalizeWorkflowRun);
|
||||
} catch (err) {
|
||||
console.error(`Erreur Gitea getWorkflowRuns ${owner}/${repo}:`, err.message);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async function getWorkflowRunForCommit(owner, repo, commitHash) {
|
||||
const runs = await getWorkflowRuns(owner, repo, 30);
|
||||
return runs.find((run) => run.commit && run.commit.startsWith(commitHash)) || null;
|
||||
}
|
||||
|
||||
/** Retourne la médiane d'une série numérique non vide. */
|
||||
function median(values) {
|
||||
if (!values.length) return null;
|
||||
const sorted = [...values].sort((left, right) => left - right);
|
||||
const middle = Math.floor(sorted.length / 2);
|
||||
return sorted.length % 2 ? sorted[middle] : Math.round((sorted[middle - 1] + sorted[middle]) / 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Construit une synthèse déterministe sur les derniers runs CI.
|
||||
* Les comparaisons ne sont calculées qu’avec deux fenêtres d’au moins deux runs
|
||||
* pour ne pas transformer une variation isolée en tendance.
|
||||
*/
|
||||
function calculateCiSummary(runs) {
|
||||
const completed = runs.filter((run) => run.status === 'completed');
|
||||
const successful = completed.filter((run) => run.conclusion === 'success');
|
||||
const durations = completed.map((run) => run.durationSeconds).filter(Number.isFinite);
|
||||
const windowSize = Math.floor(durations.length / 2);
|
||||
const recent = windowSize >= 2 ? durations.slice(0, windowSize) : [];
|
||||
const previous = windowSize >= 2 ? durations.slice(windowSize, windowSize * 2) : [];
|
||||
const recentMedian = median(recent);
|
||||
const previousMedian = median(previous);
|
||||
const changePercent = previousMedian && recentMedian !== null
|
||||
? Math.round(((recentMedian - previousMedian) / previousMedian) * 100)
|
||||
: null;
|
||||
const trend = changePercent === null ? 'unknown'
|
||||
: changePercent <= -10 ? 'faster'
|
||||
: changePercent >= 10 ? 'slower'
|
||||
: 'stable';
|
||||
|
||||
return {
|
||||
sampleSize: completed.length,
|
||||
successful: successful.length,
|
||||
failed: completed.length - successful.length,
|
||||
successRate: completed.length ? Math.round((successful.length / completed.length) * 100) : null,
|
||||
medianDurationSeconds: median(durations),
|
||||
recentMedianDurationSeconds: recentMedian,
|
||||
previousMedianDurationSeconds: previousMedian,
|
||||
trend,
|
||||
changePercent,
|
||||
};
|
||||
}
|
||||
|
||||
async function getWorkflowRunSummary(owner, repo) {
|
||||
return calculateCiSummary(await getWorkflowRuns(owner, repo, 30));
|
||||
}
|
||||
|
||||
/**
|
||||
* Récupérer tous les dépôts (avec retry en cas d'erreur DNS)
|
||||
*/
|
||||
@@ -204,11 +113,6 @@ module.exports = {
|
||||
getRepo,
|
||||
getCommits,
|
||||
getBranches,
|
||||
getWorkflowRuns,
|
||||
getWorkflowRunSummary,
|
||||
getWorkflowRunForCommit,
|
||||
normalizeWorkflowRun,
|
||||
calculateCiSummary,
|
||||
listRepos,
|
||||
createRepo,
|
||||
giteaClient,
|
||||
|
||||
@@ -3,130 +3,125 @@ const https = require('https');
|
||||
const config = require('./config');
|
||||
const { getContainerInfo } = require('./docker');
|
||||
|
||||
// État volatile : il est régénéré au démarrage par les contrôles de santé.
|
||||
// Store pour les statuts des apps
|
||||
const appStatuses = new Map();
|
||||
|
||||
// Store pour les logs de déploiement
|
||||
const deploymentLogs = [];
|
||||
const giteaCommits = new Map();
|
||||
const MAX_DEPLOYMENT_LOGS = 50;
|
||||
const MAX_CONCURRENT_CHECKS = 4;
|
||||
|
||||
// Les certificats internes peuvent être auto-signés. Les URLs sont déclarées
|
||||
// dans les manifests app.json et ne sont jamais construites depuis une entrée utilisateur.
|
||||
// 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 });
|
||||
let runningHealthCheck = null;
|
||||
|
||||
// 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((entry) => entry.status === 'running');
|
||||
for (const entry of orphans) {
|
||||
entry.status = 'failed';
|
||||
entry.message = 'Déploiement interrompu (redémarrage du Dashboard)';
|
||||
entry.endedAt = new Date().toISOString();
|
||||
}
|
||||
const orphans = deploymentLogs.filter((l) => l.status === 'running');
|
||||
if (orphans.length > 0) {
|
||||
console.log(`[healthcheck] ${orphans.length} déploiement(s) orphelin(s) clôturé(s)`);
|
||||
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érifie une URL applicative avec un délai borné. */
|
||||
/**
|
||||
* Vérifier la santé d'une URL
|
||||
*/
|
||||
async function checkUrl(url) {
|
||||
try {
|
||||
const startedAt = Date.now();
|
||||
const start = Date.now();
|
||||
const response = await axios.get(url, {
|
||||
timeout: 8000,
|
||||
timeout: 10000,
|
||||
httpsAgent,
|
||||
validateStatus: (status) => status < 500,
|
||||
});
|
||||
const responseTime = Date.now() - start;
|
||||
return {
|
||||
online: true,
|
||||
statusCode: response.status,
|
||||
responseTime: Date.now() - startedAt,
|
||||
responseTime,
|
||||
};
|
||||
} catch (error) {
|
||||
} catch (err) {
|
||||
return {
|
||||
online: false,
|
||||
statusCode: null,
|
||||
responseTime: null,
|
||||
error: error.message,
|
||||
error: err.message,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Vérifie une application déployée sur l'environnement du dashboard courant.
|
||||
* Le dashboard recette ne sonde plus les URLs prod, et inversement : cela évite
|
||||
* de mélanger les états des environnements et divise les appels HTTP inutiles.
|
||||
* Vérifier la santé d'une application
|
||||
*/
|
||||
async function checkApp(appConfig) {
|
||||
const environment = config.environment;
|
||||
const localUrl = appConfig.urls?.[environment];
|
||||
const result = {
|
||||
id: appConfig.id,
|
||||
name: appConfig.name,
|
||||
description: appConfig.description || '',
|
||||
description: appConfig.description,
|
||||
urls: appConfig.urls,
|
||||
containerName: appConfig.containerName,
|
||||
lastCheck: new Date().toISOString(),
|
||||
status: 'unknown',
|
||||
container: null,
|
||||
health: { recette: null, prod: null },
|
||||
health: {
|
||||
recette: null,
|
||||
prod: null,
|
||||
},
|
||||
};
|
||||
|
||||
const [containerInfo, health] = await Promise.all([
|
||||
getContainerInfo(appConfig.containerName),
|
||||
localUrl ? checkUrl(localUrl) : Promise.resolve(null),
|
||||
]);
|
||||
|
||||
// Vérifier le conteneur Docker
|
||||
const containerInfo = await getContainerInfo(appConfig.containerName);
|
||||
result.container = containerInfo;
|
||||
result.health[environment] = health;
|
||||
|
||||
if (!containerInfo || !containerInfo.running) {
|
||||
result.status = 'offline';
|
||||
} else if (health?.online) {
|
||||
result.status = 'online';
|
||||
} else {
|
||||
result.status = 'error';
|
||||
// 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;
|
||||
}
|
||||
|
||||
/** Exécute un lot asynchrone avec une concurrence bornée. */
|
||||
async function mapWithConcurrency(items, limit, worker) {
|
||||
const results = new Array(items.length);
|
||||
let cursor = 0;
|
||||
|
||||
async function runWorker() {
|
||||
while (cursor < items.length) {
|
||||
const index = cursor++;
|
||||
results[index] = await worker(items[index]);
|
||||
}
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
|
||||
const workerCount = Math.min(Math.max(limit, 1), items.length);
|
||||
await Promise.all(Array.from({ length: workerCount }, runWorker));
|
||||
return results;
|
||||
}
|
||||
|
||||
/**
|
||||
* Lance les contrôles sans chevauchement : si un cycle est encore actif, les
|
||||
* consommateurs récupèrent sa même promesse au lieu de redoubler les requêtes.
|
||||
* Ajouter un log de déploiement (retourne l'entrée créée avec son id)
|
||||
*/
|
||||
function checkAllApps() {
|
||||
if (runningHealthCheck) return runningHealthCheck;
|
||||
|
||||
runningHealthCheck = mapWithConcurrency(config.apps, MAX_CONCURRENT_CHECKS, checkApp)
|
||||
.catch((error) => {
|
||||
console.error('[healthcheck] Échec du cycle :', error.message);
|
||||
throw error;
|
||||
})
|
||||
.finally(() => {
|
||||
runningHealthCheck = null;
|
||||
});
|
||||
|
||||
return runningHealthCheck;
|
||||
}
|
||||
|
||||
function addDeploymentLog(appId, log) {
|
||||
const entry = {
|
||||
id: Date.now().toString(),
|
||||
@@ -135,25 +130,45 @@ function addDeploymentLog(appId, log) {
|
||||
...log,
|
||||
};
|
||||
deploymentLogs.unshift(entry);
|
||||
if (deploymentLogs.length > MAX_DEPLOYMENT_LOGS) deploymentLogs.pop();
|
||||
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((log) => log.id === entryId);
|
||||
if (!entry) return null;
|
||||
Object.assign(entry, updates, { updatedAt: new Date().toISOString() });
|
||||
return entry;
|
||||
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) {
|
||||
return appId ? deploymentLogs.filter((log) => log.appId === appId) : deploymentLogs;
|
||||
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());
|
||||
}
|
||||
@@ -162,7 +177,6 @@ module.exports = {
|
||||
checkUrl,
|
||||
checkApp,
|
||||
checkAllApps,
|
||||
mapWithConcurrency,
|
||||
addDeploymentLog,
|
||||
updateDeploymentLog,
|
||||
getDeploymentLogs,
|
||||
|
||||
@@ -4,7 +4,7 @@ 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, getWorkflowRuns, getWorkflowRunSummary, listRepos } = require('./gitea');
|
||||
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');
|
||||
@@ -256,7 +256,7 @@ router.get('/apps-config/stacks', authMiddleware, (req, res) => {
|
||||
// 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, category, sourceType, giteaRepoUrl } = req.body;
|
||||
const { name, description, subdomain, stack, port, needsDb, dbType, sourceType, giteaRepoUrl } = req.body;
|
||||
|
||||
// Validation
|
||||
if (!name || !subdomain || !stack || !sourceType) {
|
||||
@@ -322,7 +322,6 @@ router.post('/apps-config/create', authMiddleware, upload.single('zipFile'), asy
|
||||
port: port ? parseInt(port) : null,
|
||||
needsDb: needsDb === 'true' || needsDb === true,
|
||||
dbType: dbType || 'mysql',
|
||||
category: category || 'SANTINOVA',
|
||||
sourceType,
|
||||
giteaRepoUrl,
|
||||
zipFilePath: req.file ? req.file.path : null,
|
||||
@@ -399,25 +398,6 @@ router.get('/gitea/repos/:owner/:repo/branches', authMiddleware, async (req, res
|
||||
}
|
||||
});
|
||||
|
||||
// Dernières validations CI avec statut et durée, utilisées par l'écran Gitea.
|
||||
router.get('/gitea/repos/:owner/:repo/actions/runs', authMiddleware, async (req, res) => {
|
||||
try {
|
||||
const runs = await getWorkflowRuns(req.params.owner, req.params.repo, 10);
|
||||
res.json(runs);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
// Synthèse historique : taux de succès, médiane et tendance des validations CI.
|
||||
router.get('/gitea/repos/:owner/:repo/actions/summary', authMiddleware, async (req, res) => {
|
||||
try {
|
||||
res.json(await getWorkflowRunSummary(req.params.owner, req.params.repo));
|
||||
} 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) => {
|
||||
@@ -502,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, app.id);
|
||||
const result = await startContainer(containerName);
|
||||
res.json(result);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
|
||||
@@ -5,12 +5,9 @@
|
||||
*/
|
||||
const express = require('express');
|
||||
const crypto = require('crypto');
|
||||
const { execFile } = require('child_process');
|
||||
const { exec } = require('child_process');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const config = require('./config');
|
||||
const { findAppByRepo } = require('./app-registry');
|
||||
const { getWorkflowRunForCommit } = require('./gitea');
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
@@ -18,89 +15,32 @@ 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';
|
||||
const DASHBOARD_APP_ID = 'manus-dashboard';
|
||||
const DASHBOARD_DEPLOY_REQUEST = path.join(APPS_BASE_PATH, DASHBOARD_APP_ID, '.deployment-request');
|
||||
const CI_GATE_TIMEOUT_MS = Number.parseInt(process.env.CI_GATE_TIMEOUT_MS, 10) || 5 * 60 * 1000;
|
||||
const CI_GATE_POLL_INTERVAL_MS = Number.parseInt(process.env.CI_GATE_POLL_INTERVAL_MS, 10) || 3000;
|
||||
|
||||
// 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)
|
||||
const deployingApps = new Set();
|
||||
|
||||
/**
|
||||
* Le conteneur ne peut pas se recréer lui-même : Docker interrompt son client
|
||||
* `docker compose` au moment où le conteneur courant est arrêté. Ce cas est
|
||||
* donc délégué au service systemd hôte manus-dashboard-self-deploy.path.
|
||||
*/
|
||||
function isHostManagedDeployment(appName) {
|
||||
return appName === DASHBOARD_APP_ID;
|
||||
}
|
||||
|
||||
function requestDashboardHostDeployment({ branch, commitHash, committer }) {
|
||||
const temporaryRequest = `${DASHBOARD_DEPLOY_REQUEST}.${process.pid}.tmp`;
|
||||
const request = {
|
||||
branch,
|
||||
commitHash,
|
||||
committer,
|
||||
requestedAt: new Date().toISOString(),
|
||||
};
|
||||
fs.writeFileSync(temporaryRequest, JSON.stringify(request, null, 2), { mode: 0o600 });
|
||||
fs.renameSync(temporaryRequest, DASHBOARD_DEPLOY_REQUEST);
|
||||
}
|
||||
|
||||
function shouldRequireCi(app) {
|
||||
return app?.ci?.required === true;
|
||||
}
|
||||
|
||||
function saveDeploymentStatus(appName, status) {
|
||||
try {
|
||||
fs.mkdirSync(LOG_DIR, { recursive: true });
|
||||
fs.writeFileSync(path.join(LOG_DIR, `${appName}-last-deploy.json`), JSON.stringify(status, null, 2));
|
||||
} catch (error) {
|
||||
console.error('[Webhook] Erreur sauvegarde statut:', error.message);
|
||||
}
|
||||
}
|
||||
|
||||
function wait(delay) {
|
||||
return new Promise((resolve) => setTimeout(resolve, delay));
|
||||
}
|
||||
|
||||
/**
|
||||
* Une application déclarant ci.required ne peut être déployée que si le commit
|
||||
* reçu dispose d’un run Gitea terminé avec succès.
|
||||
*/
|
||||
async function waitForSuccessfulCi(app, commitHash) {
|
||||
const owner = app.giteaOwner || 'manus-admin';
|
||||
const repo = app.giteaRepo || app.id;
|
||||
const deadline = Date.now() + CI_GATE_TIMEOUT_MS;
|
||||
let lastRun = null;
|
||||
|
||||
while (Date.now() < deadline) {
|
||||
lastRun = await getWorkflowRunForCommit(owner, repo, commitHash);
|
||||
if (lastRun?.status === 'completed') {
|
||||
return {
|
||||
allowed: lastRun.conclusion === 'success',
|
||||
run: lastRun,
|
||||
reason: lastRun.conclusion === 'success'
|
||||
? null
|
||||
: `La CI est terminée avec le statut ${lastRun.conclusion || 'inconnu'}`,
|
||||
};
|
||||
}
|
||||
await wait(CI_GATE_POLL_INTERVAL_MS);
|
||||
}
|
||||
|
||||
return {
|
||||
allowed: false,
|
||||
run: lastRun,
|
||||
reason: lastRun ? 'La CI n’a pas terminé dans le délai autorisé' : 'Aucune validation CI trouvée pour ce commit',
|
||||
};
|
||||
}
|
||||
|
||||
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');
|
||||
@@ -126,14 +66,10 @@ function runDeploy(appName, branch, commitHash, committer, broadcast) {
|
||||
}
|
||||
|
||||
const env = { ...process.env, APPS_BASE_PATH };
|
||||
const cmd = `bash ${DEPLOY_SCRIPT} ${appName} recette`;
|
||||
let output = '';
|
||||
|
||||
// Les deux serveurs partagent le module, mais leurs scripts de déploiement
|
||||
// n’attendent pas le même second argument : recette attend son environnement,
|
||||
// production attend la branche Git. Cette sélection évite tout mélange.
|
||||
const deployTarget = config.environment === 'prod' ? 'main' : 'recette';
|
||||
// execFile évite toute interprétation shell du nom de dossier issu du manifeste.
|
||||
const child = execFile('bash', [DEPLOY_SCRIPT, appName, deployTarget], { env, timeout: 600000 });
|
||||
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}`); });
|
||||
|
||||
@@ -144,41 +80,16 @@ function runDeploy(appName, branch, commitHash, committer, broadcast) {
|
||||
if (broadcast) {
|
||||
broadcast({ type: 'deploy_finished', data: { app: appName, status, exitCode: code } });
|
||||
}
|
||||
saveDeploymentStatus(appName, {
|
||||
app: appName, branch, commit: commitHash, committer, status, exitCode: code,
|
||||
timestamp: new Date().toISOString(), output: output.slice(-3000),
|
||||
});
|
||||
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); }
|
||||
});
|
||||
}
|
||||
|
||||
async function gateAndDeploy(app, branch, commitHash, committer, broadcast) {
|
||||
if (shouldRequireCi(app)) {
|
||||
const ci = await waitForSuccessfulCi(app, commitHash);
|
||||
if (!ci.allowed) {
|
||||
const status = {
|
||||
app: app.directory,
|
||||
branch,
|
||||
commit: commitHash,
|
||||
committer,
|
||||
status: 'blocked',
|
||||
timestamp: new Date().toISOString(),
|
||||
ci: ci.run,
|
||||
reason: ci.reason,
|
||||
};
|
||||
console.warn(`[Webhook] Déploiement bloqué pour ${app.directory}: ${ci.reason}`);
|
||||
saveDeploymentStatus(app.directory, status);
|
||||
broadcast?.({ type: 'deploy_blocked', data: status });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (isHostManagedDeployment(app.directory)) {
|
||||
requestDashboardHostDeployment({ branch, commitHash, committer });
|
||||
return;
|
||||
}
|
||||
runDeploy(app.directory, branch, commitHash, committer, broadcast);
|
||||
}
|
||||
|
||||
// POST /api/webhook/gitea
|
||||
router.post('/gitea', (req, res) => {
|
||||
if (!verifyGiteaSignature(req)) {
|
||||
@@ -197,21 +108,15 @@ router.post('/gitea', (req, res) => {
|
||||
|
||||
console.log(`[Webhook] Push: repo=${repoName}, branch=${branch}, commit=${commitHash}, by=${committer}`);
|
||||
|
||||
// Le manifeste app.json associe le dépôt au dossier déployé : pas de mapping statique à maintenir.
|
||||
const app = findAppByRepo(config, repoName);
|
||||
if (!app) return res.status(200).json({ message: `Dépôt ${repoName} non déployé ou sans manifeste valide` });
|
||||
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: shouldRequireCi(app) ? `Validation CI requise avant déploiement de ${app.directory}` : `Déploiement de ${app.directory} déclenché`,
|
||||
commit: commitHash,
|
||||
branch,
|
||||
ciRequired: shouldRequireCi(app),
|
||||
});
|
||||
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(() => gateAndDeploy(app, branch, commitHash, committer, broadcastFn));
|
||||
setImmediate(() => runDeploy(appName, branch, commitHash, committer, broadcastFn));
|
||||
});
|
||||
|
||||
// GET /api/webhook/status/:appName
|
||||
@@ -239,6 +144,3 @@ router.get('/status', (req, res) => {
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
module.exports.isHostManagedDeployment = isHostManagedDeployment;
|
||||
module.exports.shouldRequireCi = shouldRequireCi;
|
||||
module.exports.waitForSuccessfulCi = waitForSuccessfulCi;
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
/*
|
||||
* Tests de non-régression du registre d'applications.
|
||||
* Le registre doit faire de app.json l'unique source de vérité des applications déployées.
|
||||
*/
|
||||
const assert = require('node:assert/strict');
|
||||
const fs = require('node:fs');
|
||||
const os = require('node:os');
|
||||
const path = require('node:path');
|
||||
|
||||
const { discoverApps, refreshApps } = require('../src/app-registry');
|
||||
|
||||
function writeManifest(basePath, directory, manifest) {
|
||||
const appPath = path.join(basePath, directory);
|
||||
fs.mkdirSync(appPath, { recursive: true });
|
||||
fs.writeFileSync(path.join(appPath, 'app.json'), JSON.stringify(manifest), 'utf8');
|
||||
}
|
||||
|
||||
const sandbox = fs.mkdtempSync(path.join(os.tmpdir(), 'app-registry-'));
|
||||
|
||||
try {
|
||||
writeManifest(sandbox, 'contacts', {
|
||||
id: 'itinova-contacts',
|
||||
name: 'Itinova Contacts',
|
||||
category: 'ITINOVA',
|
||||
containerName: 'itinova-contacts',
|
||||
image: 'images/itinova-contacts.png',
|
||||
urls: {
|
||||
recette: 'https://contacts.recette.santinova-soft.org',
|
||||
prod: 'https://contacts.santinova-soft.org',
|
||||
},
|
||||
});
|
||||
|
||||
writeManifest(sandbox, 'invalide', {
|
||||
id: 'app-invalide',
|
||||
name: 'Application invalide',
|
||||
category: 'INCONNUE',
|
||||
urls: { recette: 'https://invalide.recette.santinova-soft.org' },
|
||||
});
|
||||
|
||||
const discovery = discoverApps({ appsBasePath: sandbox, environment: 'recette' });
|
||||
assert.equal(discovery.apps.length, 1, 'un manifeste invalide doit être exclu');
|
||||
assert.equal(discovery.errors.length, 1, 'une erreur explicite doit être retournée');
|
||||
|
||||
const app = discovery.apps[0];
|
||||
assert.equal(app.directory, 'contacts', 'le dossier doit être déduit du chemin du manifeste');
|
||||
assert.equal(app.healthCheckUrl, app.urls.recette, 'la vérification doit cibler l’environnement courant');
|
||||
assert.equal(app.containerName, 'itinova-contacts');
|
||||
|
||||
const config = {
|
||||
appsBasePath: sandbox,
|
||||
environment: 'recette',
|
||||
apps: [{ id: 'itinova-contacts', name: 'ancienne valeur statique' }],
|
||||
};
|
||||
const refresh = refreshApps(config);
|
||||
assert.equal(refresh.apps.length, 1, 'les applications non déployées ne doivent pas rester en cache');
|
||||
assert.equal(config.apps[0].name, 'Itinova Contacts', 'app.json doit prévaloir sur toute définition statique');
|
||||
|
||||
console.log('OK app-registry');
|
||||
} finally {
|
||||
fs.rmSync(sandbox, { recursive: true, force: true });
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
const assert = require('node:assert/strict');
|
||||
const { normalizeWorkflowRun, calculateCiSummary } = require('../src/gitea');
|
||||
|
||||
const run = normalizeWorkflowRun({
|
||||
id: 42,
|
||||
name: 'Validation',
|
||||
status: 'completed',
|
||||
conclusion: 'success',
|
||||
head_sha: 'abcdef123456',
|
||||
started_at: '2026-08-18T10:00:10Z',
|
||||
completed_at: '2026-08-18T10:02:15Z',
|
||||
});
|
||||
|
||||
assert.equal(run.commit, 'abcdef123456');
|
||||
assert.equal(run.durationSeconds, 125);
|
||||
assert.equal(run.conclusion, 'success');
|
||||
|
||||
const summary = calculateCiSummary([
|
||||
{ status: 'completed', conclusion: 'success', durationSeconds: 90 },
|
||||
{ status: 'completed', conclusion: 'success', durationSeconds: 110 },
|
||||
{ status: 'completed', conclusion: 'failure', durationSeconds: 120 },
|
||||
{ status: 'completed', conclusion: 'success', durationSeconds: 100 },
|
||||
]);
|
||||
assert.equal(summary.successRate, 75);
|
||||
assert.equal(summary.medianDurationSeconds, 105);
|
||||
assert.equal(summary.trend, 'stable');
|
||||
console.log('OK gitea');
|
||||
@@ -1,25 +0,0 @@
|
||||
/*
|
||||
* Le dashboard ne doit pas lancer un nombre illimité de contrôles HTTP en même
|
||||
* temps, même lorsqu’un grand nombre d’applications est déclaré.
|
||||
*/
|
||||
const assert = require('node:assert/strict');
|
||||
const { mapWithConcurrency } = require('../src/healthcheck');
|
||||
|
||||
(async () => {
|
||||
let active = 0;
|
||||
let peak = 0;
|
||||
const values = await mapWithConcurrency([1, 2, 3, 4, 5, 6, 7], 3, async (value) => {
|
||||
active += 1;
|
||||
peak = Math.max(peak, active);
|
||||
await new Promise((resolve) => setTimeout(resolve, 5));
|
||||
active -= 1;
|
||||
return value * 2;
|
||||
});
|
||||
|
||||
assert.deepEqual(values, [2, 4, 6, 8, 10, 12, 14]);
|
||||
assert.ok(peak <= 3, `concurrence observée ${peak}, maximum autorisé 3`);
|
||||
console.log('OK healthcheck');
|
||||
})().catch((error) => {
|
||||
console.error(error);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -1,14 +0,0 @@
|
||||
/*
|
||||
* Un conteneur ne peut pas recréer fiablement son propre conteneur Docker :
|
||||
* le client `docker compose` est arrêté en même temps que lui. Le webhook doit
|
||||
* donc déléguer ce cas précis à un service systemd hôte.
|
||||
*/
|
||||
const assert = require('node:assert/strict');
|
||||
const { isHostManagedDeployment, shouldRequireCi } = require('../src/webhook');
|
||||
|
||||
assert.equal(isHostManagedDeployment('manus-dashboard'), true);
|
||||
assert.equal(isHostManagedDeployment('itinova-contacts'), false);
|
||||
assert.equal(shouldRequireCi({ ci: { required: true } }), true);
|
||||
assert.equal(shouldRequireCi({ ci: { required: false } }), false);
|
||||
assert.equal(shouldRequireCi({}), false);
|
||||
console.log('OK webhook');
|
||||
@@ -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 - Gestion des Applications</title>
|
||||
<title>Dashboard Recette - Gestion des Applications</title>
|
||||
</head>
|
||||
<body class="bg-dark-900 text-white">
|
||||
<div id="root"></div>
|
||||
|
||||
3030
src/frontend/package-lock.json
generated
3030
src/frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -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">Production</p>
|
||||
<p className="text-xs text-gray-500">Recette</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -147,12 +147,10 @@ export default function DashboardPage({ apps }) {
|
||||
<p className="text-gray-500 text-sm">Aucune application détectée</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{apps.map((app) => {
|
||||
const isInfra = app.category === "INFRA" || ["portail-santinova", "manus-dashboard"].includes(app.id);
|
||||
return (
|
||||
{apps.map((app) => (
|
||||
<div
|
||||
key={app.id}
|
||||
className={`flex items-center justify-between py-3 px-4 rounded-lg ${isInfra ? "bg-amber-950/20 border border-amber-500/30" : "bg-dark-700/50 border border-dark-600/50"}`}
|
||||
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
|
||||
@@ -165,12 +163,7 @@ export default function DashboardPage({ apps }) {
|
||||
}`}
|
||||
/>
|
||||
<div>
|
||||
{isInfra && (
|
||||
<span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-amber-500/15 text-amber-400 border border-amber-500/30 mb-0.5">
|
||||
⚙ Infra
|
||||
</span>
|
||||
)}
|
||||
<p className={`text-sm font-medium ${isInfra ? "text-amber-200" : "text-gray-200"}`}>
|
||||
<p className="text-sm font-medium text-gray-200">
|
||||
{app.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
@@ -187,8 +180,7 @@ export default function DashboardPage({ apps }) {
|
||||
<StatusBadge status={app.status} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -9,14 +9,8 @@ import {
|
||||
Clock,
|
||||
User,
|
||||
Code,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Loader2,
|
||||
TrendingDown,
|
||||
TrendingUp,
|
||||
Minus,
|
||||
} from 'lucide-react';
|
||||
import { getGiteaRepos, getGiteaCommits, getGiteaWorkflowRuns, getGiteaWorkflowSummary } from '../utils/api';
|
||||
import { getGiteaRepos, getGiteaCommits } from '../utils/api';
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return 'N/A';
|
||||
@@ -33,30 +27,11 @@ function formatSize(kb) {
|
||||
return `${(kb / 1024).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function formatDuration(seconds) {
|
||||
if (!Number.isFinite(seconds)) return 'En attente';
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
return minutes > 0 ? `${minutes} min ${remainingSeconds.toString().padStart(2, '0')} s` : `${remainingSeconds} s`;
|
||||
}
|
||||
|
||||
function CiStatus({ run }) {
|
||||
if (run.status !== 'completed') {
|
||||
return <span className="text-amber-300 flex items-center gap-1"><Loader2 className="w-3 h-3 animate-spin" /> En cours</span>;
|
||||
}
|
||||
if (run.conclusion === 'success') {
|
||||
return <span className="text-emerald-300 flex items-center gap-1"><CheckCircle2 className="w-3 h-3" /> Réussi</span>;
|
||||
}
|
||||
return <span className="text-red-300 flex items-center gap-1"><XCircle className="w-3 h-3" /> {run.conclusion || 'Échec'}</span>;
|
||||
}
|
||||
|
||||
export default function GiteaPage() {
|
||||
const [repos, setRepos] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedRepo, setSelectedRepo] = useState(null);
|
||||
const [commits, setCommits] = useState([]);
|
||||
const [workflowRuns, setWorkflowRuns] = useState([]);
|
||||
const [workflowSummary, setWorkflowSummary] = useState(null);
|
||||
const [loadingCommits, setLoadingCommits] = useState(false);
|
||||
|
||||
const fetchRepos = async () => {
|
||||
@@ -76,19 +51,11 @@ export default function GiteaPage() {
|
||||
setSelectedRepo(fullName);
|
||||
try {
|
||||
const [owner, repo] = fullName.split('/');
|
||||
const [commitsResponse, runsResponse, summaryResponse] = await Promise.all([
|
||||
getGiteaCommits(owner, repo),
|
||||
getGiteaWorkflowRuns(owner, repo),
|
||||
getGiteaWorkflowSummary(owner, repo),
|
||||
]);
|
||||
setCommits(commitsResponse.data);
|
||||
setWorkflowRuns(runsResponse.data);
|
||||
setWorkflowSummary(summaryResponse.data);
|
||||
const res = await getGiteaCommits(owner, repo);
|
||||
setCommits(res.data);
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement commits:', err);
|
||||
setCommits([]);
|
||||
setWorkflowRuns([]);
|
||||
setWorkflowSummary(null);
|
||||
} finally {
|
||||
setLoadingCommits(false);
|
||||
}
|
||||
@@ -224,48 +191,6 @@ export default function GiteaPage() {
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<div className="card p-3">
|
||||
<p className="text-xs font-medium text-gray-400 uppercase tracking-wider mb-2">Dernières validations CI</p>
|
||||
{workflowRuns.length === 0 ? (
|
||||
<p className="text-sm text-gray-500">Aucune validation CI trouvée pour ce dépôt.</p>
|
||||
) : (
|
||||
<>
|
||||
{workflowSummary?.sampleSize > 0 && (
|
||||
<div className="grid grid-cols-3 gap-2 mb-3 text-xs">
|
||||
<div className="rounded bg-dark-700/70 p-2">
|
||||
<p className="text-gray-500">Succès</p>
|
||||
<p className="font-semibold text-emerald-300">{workflowSummary.successRate}%</p>
|
||||
</div>
|
||||
<div className="rounded bg-dark-700/70 p-2">
|
||||
<p className="text-gray-500">Médiane</p>
|
||||
<p className="font-semibold text-gray-200">{formatDuration(workflowSummary.medianDurationSeconds)}</p>
|
||||
</div>
|
||||
<div className="rounded bg-dark-700/70 p-2">
|
||||
<p className="text-gray-500">Tendance</p>
|
||||
<p className={`font-semibold flex items-center gap-1 ${workflowSummary.trend === 'faster' ? 'text-emerald-300' : workflowSummary.trend === 'slower' ? 'text-red-300' : 'text-gray-300'}`}>
|
||||
{workflowSummary.trend === 'faster' ? <TrendingDown className="w-3 h-3" /> : workflowSummary.trend === 'slower' ? <TrendingUp className="w-3 h-3" /> : <Minus className="w-3 h-3" />}
|
||||
{workflowSummary.changePercent === null ? 'N/A' : `${Math.abs(workflowSummary.changePercent)}%`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
{workflowRuns.slice(0, 5).map((run) => (
|
||||
<div key={run.id} className="flex items-center justify-between gap-3 text-xs">
|
||||
<div className="min-w-0">
|
||||
<p className="text-gray-200 truncate">{run.name}</p>
|
||||
<p className="text-gray-500">{run.commit?.slice(0, 7) || 'Commit inconnu'} · {formatDate(run.createdAt)}</p>
|
||||
</div>
|
||||
<div className="shrink-0 text-right">
|
||||
<CiStatus run={run} />
|
||||
<span className="text-gray-500 flex items-center justify-end gap-1 mt-1"><Clock className="w-3 h-3" />{formatDuration(run.durationSeconds)}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{commits.map((commit, idx) => (
|
||||
<div key={commit.sha || idx} className="card p-3">
|
||||
<div className="flex items-start gap-3">
|
||||
|
||||
@@ -89,7 +89,7 @@ const APPS_CONFIG = [
|
||||
},
|
||||
{
|
||||
id: 'manus-dashboard',
|
||||
name: 'Dashboard',
|
||||
name: 'Dashboard Recette',
|
||||
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 italic">
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500">
|
||||
<Minus className="w-3 h-3" />
|
||||
Non déployé
|
||||
N/A
|
||||
</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="Recette déployée, production vide">
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-orange-900/40 text-orange-300 border border-orange-700/40" title="Uniquement en recette">
|
||||
<ArrowUp className="w-3 h-3" />
|
||||
Non déployé en prod
|
||||
Recette en avance
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -175,19 +175,19 @@ function SyncBadge({ versionRecette, versionProd }) {
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
if (loading) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500 italic">
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-700 text-gray-400 animate-pulse">
|
||||
<Tag className="w-3 h-3" />
|
||||
Chargement...
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (!version) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500">
|
||||
<AlertCircle className="w-3 h-3" />
|
||||
Non déployé
|
||||
N/A
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -34,9 +34,7 @@ export default function LoginPage({ onLogin }) {
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-600 mb-4">
|
||||
<Server className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white">
|
||||
Dashboard {window.location.hostname.includes('recette') ? 'Recette' : 'Production'}
|
||||
</h1>
|
||||
<h1 className="text-2xl font-bold text-white">Dashboard Recette</h1>
|
||||
<p className="text-gray-400 mt-2">Gestion des applications</p>
|
||||
</div>
|
||||
|
||||
@@ -132,7 +130,7 @@ export default function LoginPage({ onLogin }) {
|
||||
</div>
|
||||
|
||||
<p className="text-center text-gray-600 text-sm mt-6">
|
||||
Santinova Soft — Serveur de production
|
||||
Santinova Soft — Serveur de recette
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -116,7 +116,7 @@ export default function TerminalPage() {
|
||||
fitAddonRef.current = fitAddon;
|
||||
|
||||
term.writeln('\x1b[1;34m╔══════════════════════════════════════════════════╗\x1b[0m');
|
||||
term.writeln('\x1b[1;34m║ Terminal SSH — Dashboard Production Santinova ║\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');
|
||||
|
||||
@@ -59,10 +59,6 @@ export const getDeployments = (appId) =>
|
||||
export const getGiteaRepos = () => api.get('/gitea/repos');
|
||||
export const getGiteaCommits = (owner, repo) =>
|
||||
api.get(`/gitea/repos/${owner}/${repo}/commits`);
|
||||
export const getGiteaWorkflowRuns = (owner, repo) =>
|
||||
api.get(`/gitea/repos/${owner}/${repo}/actions/runs`);
|
||||
export const getGiteaWorkflowSummary = (owner, repo) =>
|
||||
api.get(`/gitea/repos/${owner}/${repo}/actions/summary`);
|
||||
|
||||
// Docker
|
||||
export const getContainers = () => api.get('/docker/containers');
|
||||
|
||||
Reference in New Issue
Block a user