Compare commits
3 Commits
8092337ccd
...
b4647580fb
| Author | SHA1 | Date | |
|---|---|---|---|
|
b4647580fb | ||
|
|
0b59245f76 | ||
|
|
9b795612e4 |
@@ -1,7 +0,0 @@
|
|||||||
node_modules
|
|
||||||
.git
|
|
||||||
.gitignore
|
|
||||||
README.md
|
|
||||||
*.log
|
|
||||||
frontend/node_modules
|
|
||||||
backend/node_modules
|
|
||||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -2,4 +2,3 @@ node_modules/
|
|||||||
dist/
|
dist/
|
||||||
.env
|
.env
|
||||||
*.log
|
*.log
|
||||||
.DS_Store
|
|
||||||
|
|||||||
43
Dockerfile
43
Dockerfile
@@ -1,43 +0,0 @@
|
|||||||
# Stage 1: Build frontend
|
|
||||||
FROM node:20-alpine AS frontend-builder
|
|
||||||
|
|
||||||
WORKDIR /app/frontend
|
|
||||||
|
|
||||||
# Copy frontend package files
|
|
||||||
COPY frontend/package.json frontend/pnpm-lock.yaml* ./
|
|
||||||
RUN npm install
|
|
||||||
|
|
||||||
# Copy frontend source
|
|
||||||
COPY frontend/ ./
|
|
||||||
|
|
||||||
# Build frontend
|
|
||||||
RUN npm run build
|
|
||||||
|
|
||||||
# Stage 2: Production
|
|
||||||
FROM node:20-alpine
|
|
||||||
|
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
# Install docker CLI for docker compose commands
|
|
||||||
RUN apk add --no-cache docker-cli docker-cli-compose git curl unzip bash openssh-client
|
|
||||||
|
|
||||||
# Configure git global identity to avoid "Author identity unknown" errors
|
|
||||||
RUN git config --global user.email "admin@santinova-soft.org" && \
|
|
||||||
git config --global user.name "Manus Dashboard"
|
|
||||||
|
|
||||||
# Copy backend
|
|
||||||
COPY backend/package.json ./backend/
|
|
||||||
WORKDIR /app/backend
|
|
||||||
RUN npm install --production
|
|
||||||
|
|
||||||
COPY backend/ ./
|
|
||||||
|
|
||||||
# Copy built frontend
|
|
||||||
WORKDIR /app
|
|
||||||
COPY --from=frontend-builder /app/frontend/dist ./frontend/dist
|
|
||||||
|
|
||||||
WORKDIR /app/backend
|
|
||||||
|
|
||||||
EXPOSE 3001
|
|
||||||
|
|
||||||
CMD ["node", "src/index.js"]
|
|
||||||
32
README.md
32
README.md
@@ -1,32 +0,0 @@
|
|||||||
# Manus Dashboard
|
|
||||||
|
|
||||||
Tableau de bord de gestion des applications Manus, déployé sur le serveur de recette.
|
|
||||||
|
|
||||||
## Fonctionnalités
|
|
||||||
|
|
||||||
- Liste des applications déployées avec état en temps réel
|
|
||||||
- Health checks HTTP périodiques avec indicateurs visuels
|
|
||||||
- Redéploiement en un clic (docker compose build + up)
|
|
||||||
- Logs de déploiement et logs conteneurs
|
|
||||||
- Intégration Gitea (commits, branches, dépôts)
|
|
||||||
- Authentification par login/mot de passe
|
|
||||||
- Interface moderne avec TailwindCSS
|
|
||||||
|
|
||||||
## Stack technique
|
|
||||||
|
|
||||||
- **Backend** : Node.js / Express
|
|
||||||
- **Frontend** : React / TailwindCSS / Vite
|
|
||||||
- **Conteneurisation** : Docker / Docker Compose
|
|
||||||
- **Reverse Proxy** : Traefik avec SSL Let's Encrypt
|
|
||||||
|
|
||||||
## Déploiement
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cd /opt/manus-deploy/apps/manus-dashboard
|
|
||||||
docker compose build --no-cache && docker compose up -d
|
|
||||||
```
|
|
||||||
|
|
||||||
## Accès
|
|
||||||
|
|
||||||
- URL : https://dashboard.santinova-soft.org
|
|
||||||
- Login : adminItinova / Itinova69!
|
|
||||||
10
app.json
Normal file
10
app.json
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"id": "manus-dashboard",
|
||||||
|
"name": "Dashboard Production",
|
||||||
|
"category": "INFRA",
|
||||||
|
"urls": {"recette": "https://dashboard.recette.santinova-soft.org", "prod": "https://dashboard.santinova-soft.org"},
|
||||||
|
"containerName": "manus-dashboard",
|
||||||
|
"image": "images/dashboard.png",
|
||||||
|
"giteaRepo": "manus-dashboard",
|
||||||
|
"giteaOwner": "manus-admin"
|
||||||
|
}
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "manus-dashboard-backend",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "Backend API for Manus Dashboard",
|
|
||||||
"main": "src/index.js",
|
|
||||||
"scripts": {
|
|
||||||
"start": "node src/index.js",
|
|
||||||
"dev": "nodemon src/index.js"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"express": "^4.21.0",
|
|
||||||
"cors": "^2.8.5",
|
|
||||||
"helmet": "^7.1.0",
|
|
||||||
"jsonwebtoken": "^9.0.2",
|
|
||||||
"bcryptjs": "^2.4.3",
|
|
||||||
"axios": "^1.7.0",
|
|
||||||
"dockerode": "^4.0.2",
|
|
||||||
"ws": "^8.18.0",
|
|
||||||
"node-cron": "^3.0.3",
|
|
||||||
"express-rate-limit": "^7.4.0",
|
|
||||||
"cookie-parser": "^1.4.6",
|
|
||||||
"morgan": "^1.10.0",
|
|
||||||
"multer": "^1.4.5-lts.1",
|
|
||||||
"adm-zip": "^0.5.10",
|
|
||||||
"ssh2": "^1.16.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"nodemon": "^3.1.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,736 +0,0 @@
|
|||||||
const fs = require('fs');
|
|
||||||
const fsp = require('fs/promises');
|
|
||||||
const path = require('path');
|
|
||||||
const { exec, execSync } = require('child_process');
|
|
||||||
const config = require('./config');
|
|
||||||
const { createRepo, giteaClient } = require('./gitea');
|
|
||||||
|
|
||||||
// ============ TEMPLATES DOCKERFILE ============
|
|
||||||
|
|
||||||
const DOCKERFILE_TEMPLATES = {
|
|
||||||
nodejs: (port) => `# ── Stage 1: Build ──────────────────────────────────────────────
|
|
||||||
FROM node:22-slim AS builder
|
|
||||||
|
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
# Copy lockfiles for better layer caching
|
|
||||||
COPY package.json pnpm-lock.yaml* yarn.lock* ./
|
|
||||||
|
|
||||||
# Copy patches directory if it exists (needed by pnpm before install)
|
|
||||||
COPY patches/ ./patches/
|
|
||||||
|
|
||||||
# Detect package manager and install ALL dependencies (including devDependencies for build)
|
|
||||||
RUN if [ -f pnpm-lock.yaml ]; then \\
|
|
||||||
corepack enable && corepack prepare pnpm@latest --activate && \\
|
|
||||||
pnpm install --no-frozen-lockfile; \\
|
|
||||||
elif [ -f yarn.lock ]; then \\
|
|
||||||
yarn install; \\
|
|
||||||
else \\
|
|
||||||
npm install --legacy-peer-deps; \\
|
|
||||||
fi
|
|
||||||
|
|
||||||
# Copy source code
|
|
||||||
COPY . .
|
|
||||||
|
|
||||||
# Build the application (frontend + backend if applicable)
|
|
||||||
RUN if [ -f package.json ] && grep -q '"build"' package.json; then \\
|
|
||||||
if [ -f pnpm-lock.yaml ]; then \\
|
|
||||||
pnpm run build; \\
|
|
||||||
elif [ -f yarn.lock ]; then \\
|
|
||||||
yarn build; \\
|
|
||||||
else \\
|
|
||||||
npm run build; \\
|
|
||||||
fi; \\
|
|
||||||
fi
|
|
||||||
|
|
||||||
# ── Stage 2: Production ─────────────────────────────────────────
|
|
||||||
FROM node:22-slim
|
|
||||||
|
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
# Copy package files
|
|
||||||
COPY package.json pnpm-lock.yaml* yarn.lock* ./
|
|
||||||
|
|
||||||
# Copy patches directory if it exists (needed by pnpm for install)
|
|
||||||
COPY patches/ ./patches/
|
|
||||||
|
|
||||||
# Install ALL dependencies (some projects import dev deps at runtime like vite)
|
|
||||||
RUN if [ -f pnpm-lock.yaml ]; then \\
|
|
||||||
corepack enable && corepack prepare pnpm@latest --activate && \\
|
|
||||||
pnpm install --no-frozen-lockfile; \\
|
|
||||||
elif [ -f yarn.lock ]; then \\
|
|
||||||
yarn install; \\
|
|
||||||
else \\
|
|
||||||
npm install --legacy-peer-deps; \\
|
|
||||||
fi
|
|
||||||
|
|
||||||
# Copy built artifacts from builder
|
|
||||||
COPY --from=builder /app/dist ./dist
|
|
||||||
|
|
||||||
# Copy drizzle migrations if they exist
|
|
||||||
COPY drizzle/ ./drizzle/
|
|
||||||
COPY drizzle.config.ts* ./
|
|
||||||
|
|
||||||
ENV NODE_ENV=production
|
|
||||||
ENV PORT=\${port}
|
|
||||||
EXPOSE \${port}
|
|
||||||
|
|
||||||
# Start the application
|
|
||||||
CMD if grep -q '"start"' package.json; then \\
|
|
||||||
npm start; \\
|
|
||||||
elif [ -f dist/index.js ]; then \\
|
|
||||||
node dist/index.js; \\
|
|
||||||
else \\
|
|
||||||
node index.js; \\
|
|
||||||
fi
|
|
||||||
`,
|
|
||||||
|
|
||||||
'nodejs-next': (port) => `# ── Stage 1: Build ──────────────────────────────────────────────
|
|
||||||
FROM node:22-slim AS builder
|
|
||||||
|
|
||||||
WORKDIR /app
|
|
||||||
COPY package.json pnpm-lock.yaml* yarn.lock* ./
|
|
||||||
RUN if [ -f pnpm-lock.yaml ]; then \\
|
|
||||||
corepack enable && corepack prepare pnpm@latest --activate && \\
|
|
||||||
pnpm install --no-frozen-lockfile; \\
|
|
||||||
elif [ -f yarn.lock ]; then \\
|
|
||||||
yarn install; \\
|
|
||||||
else \\
|
|
||||||
npm install --legacy-peer-deps; \\
|
|
||||||
fi
|
|
||||||
COPY . .
|
|
||||||
RUN if [ -f pnpm-lock.yaml ]; then pnpm run build; \\
|
|
||||||
elif [ -f yarn.lock ]; then yarn build; \\
|
|
||||||
else npm run build; fi
|
|
||||||
|
|
||||||
# ── Stage 2: Production ─────────────────────────────────────────
|
|
||||||
FROM node:22-slim
|
|
||||||
WORKDIR /app
|
|
||||||
COPY --from=builder /app/.next ./.next
|
|
||||||
COPY --from=builder /app/node_modules ./node_modules
|
|
||||||
COPY --from=builder /app/package.json ./
|
|
||||||
COPY --from=builder /app/public ./public
|
|
||||||
|
|
||||||
ENV NODE_ENV=production
|
|
||||||
EXPOSE \${port}
|
|
||||||
|
|
||||||
CMD ["npm", "start"]
|
|
||||||
`,
|
|
||||||
|
|
||||||
python: (port) => `FROM python:3.12-slim
|
|
||||||
|
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
COPY requirements.txt ./
|
|
||||||
RUN pip install --no-cache-dir -r requirements.txt
|
|
||||||
|
|
||||||
COPY . .
|
|
||||||
|
|
||||||
EXPOSE \${port}
|
|
||||||
|
|
||||||
CMD ["python", "app.py"]
|
|
||||||
`,
|
|
||||||
|
|
||||||
'python-django': (port) => `FROM python:3.12-slim
|
|
||||||
|
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
COPY requirements.txt ./
|
|
||||||
RUN pip install --no-cache-dir -r requirements.txt
|
|
||||||
|
|
||||||
COPY . .
|
|
||||||
|
|
||||||
RUN python manage.py collectstatic --noinput
|
|
||||||
|
|
||||||
EXPOSE \${port}
|
|
||||||
|
|
||||||
CMD ["gunicorn", "--bind", "0.0.0.0:\${port}", "config.wsgi:application"]
|
|
||||||
`,
|
|
||||||
|
|
||||||
'python-flask': (port) => `FROM python:3.12-slim
|
|
||||||
|
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
COPY requirements.txt ./
|
|
||||||
RUN pip install --no-cache-dir -r requirements.txt
|
|
||||||
RUN pip install gunicorn
|
|
||||||
|
|
||||||
COPY . .
|
|
||||||
|
|
||||||
EXPOSE \${port}
|
|
||||||
|
|
||||||
CMD ["gunicorn", "--bind", "0.0.0.0:\${port}", "app:app"]
|
|
||||||
`,
|
|
||||||
|
|
||||||
php: (port) => `FROM php:8.3-apache
|
|
||||||
|
|
||||||
RUN a2enmod rewrite
|
|
||||||
RUN docker-php-ext-install pdo pdo_mysql mysqli
|
|
||||||
|
|
||||||
COPY . /var/www/html/
|
|
||||||
|
|
||||||
RUN chown -R www-data:www-data /var/www/html
|
|
||||||
|
|
||||||
EXPOSE 80
|
|
||||||
|
|
||||||
CMD ["apache2-foreground"]
|
|
||||||
`,
|
|
||||||
|
|
||||||
'php-laravel': (port) => `FROM php:8.3-fpm
|
|
||||||
|
|
||||||
RUN apt-get update && apt-get install -y \\
|
|
||||||
git curl zip unzip libpng-dev libonig-dev libxml2-dev \\
|
|
||||||
&& docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd
|
|
||||||
|
|
||||||
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
|
|
||||||
|
|
||||||
WORKDIR /var/www
|
|
||||||
|
|
||||||
COPY . .
|
|
||||||
|
|
||||||
RUN composer install --no-dev --optimize-autoloader
|
|
||||||
RUN php artisan config:cache
|
|
||||||
|
|
||||||
EXPOSE \${port}
|
|
||||||
|
|
||||||
CMD ["php-fpm"]
|
|
||||||
`,
|
|
||||||
|
|
||||||
static: () => `FROM nginx:alpine
|
|
||||||
|
|
||||||
COPY . /usr/share/nginx/html/
|
|
||||||
|
|
||||||
EXPOSE 80
|
|
||||||
|
|
||||||
CMD ["nginx", "-g", "daemon off;"]
|
|
||||||
`,
|
|
||||||
|
|
||||||
'static-react': () => `FROM node:22-slim AS builder
|
|
||||||
|
|
||||||
WORKDIR /app
|
|
||||||
COPY package.json pnpm-lock.yaml* yarn.lock* ./
|
|
||||||
RUN if [ -f pnpm-lock.yaml ]; then \\
|
|
||||||
corepack enable && corepack prepare pnpm@latest --activate && \\
|
|
||||||
pnpm install --no-frozen-lockfile; \\
|
|
||||||
elif [ -f yarn.lock ]; then \\
|
|
||||||
yarn install; \\
|
|
||||||
else \\
|
|
||||||
npm install --legacy-peer-deps; \\
|
|
||||||
fi
|
|
||||||
COPY . .
|
|
||||||
RUN if [ -f pnpm-lock.yaml ]; then pnpm run build; \\
|
|
||||||
elif [ -f yarn.lock ]; then yarn build; \\
|
|
||||||
else npm run build; fi
|
|
||||||
|
|
||||||
FROM nginx:alpine
|
|
||||||
COPY --from=builder /app/dist /usr/share/nginx/html
|
|
||||||
|
|
||||||
EXPOSE 80
|
|
||||||
|
|
||||||
CMD ["nginx", "-g", "daemon off;"]
|
|
||||||
`,
|
|
||||||
};
|
|
||||||
|
|
||||||
// ============ TEMPLATES DOCKER-COMPOSE ============
|
|
||||||
|
|
||||||
function generateDockerCompose(appConfig) {
|
|
||||||
const { appId, subdomain, stack, port, needsDb, dbType } = appConfig;
|
|
||||||
const domain = `${subdomain}.recette.santinova-soft.org`;
|
|
||||||
const containerPort = getContainerPort(stack, port);
|
|
||||||
|
|
||||||
let compose = `services:
|
|
||||||
app:
|
|
||||||
build:
|
|
||||||
context: ./src
|
|
||||||
dockerfile: Dockerfile
|
|
||||||
container_name: ${appId}
|
|
||||||
restart: unless-stopped
|
|
||||||
networks:
|
|
||||||
- web`;
|
|
||||||
|
|
||||||
// Ajouter le réseau interne si base de données
|
|
||||||
if (needsDb) {
|
|
||||||
compose += `
|
|
||||||
- ${appId}-internal`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Variables d'environnement
|
|
||||||
compose += `
|
|
||||||
environment:
|
|
||||||
- NODE_ENV=production`;
|
|
||||||
|
|
||||||
if (needsDb) {
|
|
||||||
compose += `
|
|
||||||
- DATABASE_HOST=${appId}-db
|
|
||||||
- DATABASE_PORT=${dbType === 'postgres' ? '5432' : '3306'}
|
|
||||||
- DATABASE_NAME=${appId.replace(/-/g, '_')}
|
|
||||||
- DATABASE_USER=app_user
|
|
||||||
- DATABASE_PASSWORD=AppPassword2026!
|
|
||||||
- DB_HOST=${appId}-db
|
|
||||||
- DB_PORT=${dbType === 'postgres' ? '5432' : '3306'}
|
|
||||||
- DB_NAME=${appId.replace(/-/g, '_')}
|
|
||||||
- DB_USER=app_user
|
|
||||||
- DB_PASSWORD=AppPassword2026!
|
|
||||||
- MYSQL_HOST=${appId}-db
|
|
||||||
- MYSQL_DATABASE=${appId.replace(/-/g, '_')}
|
|
||||||
- MYSQL_USER=app_user
|
|
||||||
- MYSQL_PASSWORD=AppPassword2026!`;
|
|
||||||
}
|
|
||||||
|
|
||||||
compose += `
|
|
||||||
labels:
|
|
||||||
- "traefik.enable=true"
|
|
||||||
- "traefik.http.routers.${appId}.rule=Host(\`${domain}\`)"
|
|
||||||
- "traefik.http.routers.${appId}.entrypoints=websecure"
|
|
||||||
- "traefik.http.routers.${appId}.tls=true"
|
|
||||||
- "traefik.http.routers.${appId}.tls.certresolver=letsencrypt"
|
|
||||||
- "traefik.http.routers.${appId}.service=${appId}-svc"
|
|
||||||
- "traefik.http.services.${appId}-svc.loadbalancer.server.port=${containerPort}"
|
|
||||||
- "traefik.docker.network=web"`;
|
|
||||||
|
|
||||||
// Ajouter la base de données si nécessaire
|
|
||||||
if (needsDb) {
|
|
||||||
const dbName = appId.replace(/-/g, '_');
|
|
||||||
|
|
||||||
if (dbType === 'postgres') {
|
|
||||||
compose += `
|
|
||||||
|
|
||||||
db:
|
|
||||||
image: postgres:16-alpine
|
|
||||||
container_name: ${appId}-db
|
|
||||||
restart: unless-stopped
|
|
||||||
environment:
|
|
||||||
- POSTGRES_DB=${dbName}
|
|
||||||
- POSTGRES_USER=app_user
|
|
||||||
- POSTGRES_PASSWORD=AppPassword2026!
|
|
||||||
volumes:
|
|
||||||
- ${appId}-db-data:/var/lib/postgresql/data
|
|
||||||
networks:
|
|
||||||
- ${appId}-internal
|
|
||||||
healthcheck:
|
|
||||||
test: ["CMD-SHELL", "pg_isready -U app_user -d ${dbName}"]
|
|
||||||
interval: 10s
|
|
||||||
timeout: 5s
|
|
||||||
retries: 5`;
|
|
||||||
} else {
|
|
||||||
compose += `
|
|
||||||
|
|
||||||
db:
|
|
||||||
image: mysql:8.0
|
|
||||||
container_name: ${appId}-db
|
|
||||||
restart: unless-stopped
|
|
||||||
environment:
|
|
||||||
- MYSQL_ROOT_PASSWORD=RootPassword2026!
|
|
||||||
- MYSQL_DATABASE=${dbName}
|
|
||||||
- MYSQL_USER=app_user
|
|
||||||
- MYSQL_PASSWORD=AppPassword2026!
|
|
||||||
volumes:
|
|
||||||
- ${appId}-db-data:/var/lib/mysql
|
|
||||||
networks:
|
|
||||||
- ${appId}-internal
|
|
||||||
healthcheck:
|
|
||||||
test: ["CMD", "mysqladmin", "ping", "-h", "localhost", "-u", "root", "-pRootPassword2026!"]
|
|
||||||
interval: 10s
|
|
||||||
timeout: 5s
|
|
||||||
retries: 5`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Dépendance app -> db
|
|
||||||
if (needsDb) {
|
|
||||||
// Insert depends_on before labels
|
|
||||||
const appSection = compose.indexOf(' labels:');
|
|
||||||
const dependsOn = ` depends_on:
|
|
||||||
db:
|
|
||||||
condition: service_healthy
|
|
||||||
`;
|
|
||||||
compose = compose.slice(0, appSection) + dependsOn + compose.slice(appSection);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Réseaux
|
|
||||||
compose += `
|
|
||||||
|
|
||||||
networks:
|
|
||||||
web:
|
|
||||||
external: true`;
|
|
||||||
|
|
||||||
if (needsDb) {
|
|
||||||
compose += `
|
|
||||||
${appId}-internal:
|
|
||||||
driver: bridge`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Volumes
|
|
||||||
if (needsDb) {
|
|
||||||
compose += `
|
|
||||||
|
|
||||||
volumes:
|
|
||||||
${appId}-db-data:`;
|
|
||||||
}
|
|
||||||
|
|
||||||
compose += '\n';
|
|
||||||
|
|
||||||
return compose;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getContainerPort(stack, customPort) {
|
|
||||||
if (customPort) return customPort;
|
|
||||||
const defaults = {
|
|
||||||
nodejs: 3000,
|
|
||||||
'nodejs-next': 3000,
|
|
||||||
python: 5000,
|
|
||||||
'python-django': 8000,
|
|
||||||
'python-flask': 5000,
|
|
||||||
php: 80,
|
|
||||||
'php-laravel': 9000,
|
|
||||||
static: 80,
|
|
||||||
'static-react': 80,
|
|
||||||
};
|
|
||||||
return defaults[stack] || 3000;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============ APPS PERSISTENCE ============
|
|
||||||
|
|
||||||
const APPS_FILE = path.join(config.appsBasePath, '.dashboard-apps.json');
|
|
||||||
|
|
||||||
function loadDynamicApps() {
|
|
||||||
try {
|
|
||||||
if (fs.existsSync(APPS_FILE)) {
|
|
||||||
const data = fs.readFileSync(APPS_FILE, 'utf-8');
|
|
||||||
return JSON.parse(data);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur chargement apps dynamiques:', err.message);
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveDynamicApps(apps) {
|
|
||||||
try {
|
|
||||||
fs.writeFileSync(APPS_FILE, JSON.stringify(apps, null, 2), 'utf-8');
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur sauvegarde apps dynamiques:', err.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function addDynamicApp(appDef) {
|
|
||||||
const apps = loadDynamicApps();
|
|
||||||
// Éviter les doublons
|
|
||||||
const existing = apps.findIndex((a) => a.id === appDef.id);
|
|
||||||
if (existing >= 0) {
|
|
||||||
apps[existing] = appDef;
|
|
||||||
} else {
|
|
||||||
apps.push(appDef);
|
|
||||||
}
|
|
||||||
saveDynamicApps(apps);
|
|
||||||
|
|
||||||
// Ajouter aussi à config.apps en mémoire
|
|
||||||
const existingInConfig = config.apps.findIndex((a) => a.id === appDef.id);
|
|
||||||
if (existingInConfig >= 0) {
|
|
||||||
config.apps[existingInConfig] = appDef;
|
|
||||||
} else {
|
|
||||||
config.apps.push(appDef);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function initDynamicApps() {
|
|
||||||
// 1. Charger les apps depuis .dashboard-apps.json (legacy)
|
|
||||||
const dynamicApps = loadDynamicApps();
|
|
||||||
for (const app of dynamicApps) {
|
|
||||||
const existingInConfig = config.apps.findIndex((a) => a.id === app.id);
|
|
||||||
if (existingInConfig < 0) {
|
|
||||||
config.apps.push(app);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 2. Scanner les dossiers app.json (découverte automatique)
|
|
||||||
try {
|
|
||||||
const appsBasePath = config.appsBasePath || process.env.APPS_BASE_PATH || '/opt/manus-deploy/apps';
|
|
||||||
const entries = fs.readdirSync(appsBasePath, { withFileTypes: true });
|
|
||||||
let scanned = 0;
|
|
||||||
for (const entry of entries) {
|
|
||||||
if (!entry.isDirectory()) continue;
|
|
||||||
const appJsonPath = path.join(appsBasePath, entry.name, 'app.json');
|
|
||||||
if (!fs.existsSync(appJsonPath)) continue;
|
|
||||||
try {
|
|
||||||
const appDef = JSON.parse(fs.readFileSync(appJsonPath, 'utf-8'));
|
|
||||||
if (!appDef.id) continue;
|
|
||||||
const existingInConfig = config.apps.findIndex((a) => a.id === appDef.id);
|
|
||||||
if (existingInConfig < 0) {
|
|
||||||
config.apps.push(appDef);
|
|
||||||
scanned++;
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`Erreur lecture app.json dans ${entry.name}:`, e.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
console.log(`Apps découvertes via app.json: ${scanned}`);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur scan app.json:', err.message);
|
|
||||||
}
|
|
||||||
console.log(`Total apps chargées: ${config.apps.length}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============ CREATION D'APPLICATION ============
|
|
||||||
|
|
||||||
async function createApplication(params, logCallback) {
|
|
||||||
const {
|
|
||||||
name,
|
|
||||||
description,
|
|
||||||
subdomain,
|
|
||||||
stack,
|
|
||||||
port,
|
|
||||||
needsDb,
|
|
||||||
dbType,
|
|
||||||
sourceType, // 'zip' or 'gitea'
|
|
||||||
giteaRepoUrl, // URL du repo Gitea existant
|
|
||||||
zipFilePath, // Chemin du fichier ZIP uploadé
|
|
||||||
} = params;
|
|
||||||
|
|
||||||
const appId = subdomain;
|
|
||||||
const domain = `${subdomain}.recette.santinova-soft.org`;
|
|
||||||
const appDir = path.join(config.appsBasePath, appId);
|
|
||||||
const srcDir = path.join(appDir, 'src');
|
|
||||||
|
|
||||||
const log = (msg) => {
|
|
||||||
const line = `[${new Date().toISOString()}] ${msg}`;
|
|
||||||
console.log(line);
|
|
||||||
if (logCallback) logCallback(line);
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 1. Créer le répertoire de l'application
|
|
||||||
log(`Création du répertoire ${appDir}...`);
|
|
||||||
await fsp.mkdir(appDir, { recursive: true });
|
|
||||||
await fsp.mkdir(srcDir, { recursive: true });
|
|
||||||
|
|
||||||
let giteaRepoName = appId;
|
|
||||||
let giteaOwner = config.gitea.username;
|
|
||||||
|
|
||||||
if (sourceType === 'gitea') {
|
|
||||||
// 2a. Cloner depuis un dépôt Gitea existant
|
|
||||||
log(`Clonage du dépôt Gitea: ${giteaRepoUrl}...`);
|
|
||||||
const cloneUrl = giteaRepoUrl.replace(
|
|
||||||
'https://',
|
|
||||||
`https://${config.gitea.username}:${encodeURIComponent(config.gitea.password)}@`
|
|
||||||
);
|
|
||||||
await execCommand(`cd ${appDir} && rm -rf src && git clone ${cloneUrl} src`, 120000);
|
|
||||||
log('Clonage terminé.');
|
|
||||||
|
|
||||||
// Extraire le nom du repo depuis l'URL
|
|
||||||
const urlParts = giteaRepoUrl.replace(/\.git$/, '').split('/');
|
|
||||||
giteaRepoName = urlParts[urlParts.length - 1];
|
|
||||||
if (urlParts.length >= 2) {
|
|
||||||
giteaOwner = urlParts[urlParts.length - 2];
|
|
||||||
}
|
|
||||||
} else if (sourceType === 'zip') {
|
|
||||||
// 2b. Extraire le ZIP et créer un dépôt Gitea
|
|
||||||
log(`Extraction du fichier ZIP...`);
|
|
||||||
await execCommand(`cd ${srcDir} && unzip -o ${zipFilePath}`, 60000);
|
|
||||||
|
|
||||||
// Vérifier si les fichiers sont dans un sous-répertoire
|
|
||||||
const entries = await fsp.readdir(srcDir);
|
|
||||||
const nonHidden = entries.filter((e) => !e.startsWith('.') && e !== '__MACOSX');
|
|
||||||
if (nonHidden.length === 1) {
|
|
||||||
const subDir = path.join(srcDir, nonHidden[0]);
|
|
||||||
const stat = await fsp.stat(subDir);
|
|
||||||
if (stat.isDirectory()) {
|
|
||||||
log(`Déplacement des fichiers depuis le sous-répertoire ${nonHidden[0]}...`);
|
|
||||||
await execCommand(`cd ${subDir} && mv * ${srcDir}/ 2>/dev/null; mv .* ${srcDir}/ 2>/dev/null; cd ${srcDir} && rmdir "${nonHidden[0]}" 2>/dev/null || true`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Supprimer le ZIP temporaire
|
|
||||||
try { await fsp.unlink(zipFilePath); } catch (e) { /* ignore */ }
|
|
||||||
|
|
||||||
// Créer le dépôt sur Gitea
|
|
||||||
log(`Création du dépôt Gitea: ${appId}...`);
|
|
||||||
try {
|
|
||||||
await createRepo(appId, description || `Application ${name}`, true);
|
|
||||||
log('Dépôt Gitea créé.');
|
|
||||||
} catch (err) {
|
|
||||||
if (err.response && err.response.status === 409) {
|
|
||||||
log('Le dépôt Gitea existe déjà, utilisation du dépôt existant.');
|
|
||||||
} else {
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialiser git et pousser le code
|
|
||||||
log('Initialisation Git et push vers Gitea...');
|
|
||||||
const gitUrl = `https://${config.gitea.username}:${encodeURIComponent(config.gitea.password)}@${config.gitea.url.replace('https://', '')}/${config.gitea.username}/${appId}.git`;
|
|
||||||
await execCommand(
|
|
||||||
`cd ${srcDir} && git init && git checkout -b main && git config user.email "admin@santinova-soft.org" && git config user.name "Manus Dashboard" && git add -A && git commit -m "Initial commit: ${name}" && git remote add origin ${gitUrl} && git push -u origin main --force`,
|
|
||||||
120000
|
|
||||||
);
|
|
||||||
log('Code poussé sur Gitea.');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. Générer le Dockerfile si nécessaire
|
|
||||||
const dockerfilePath = path.join(srcDir, 'Dockerfile');
|
|
||||||
const hasDockerfile = fs.existsSync(dockerfilePath);
|
|
||||||
|
|
||||||
if (!hasDockerfile) {
|
|
||||||
log(`Génération du Dockerfile pour la stack ${stack}...`);
|
|
||||||
const containerPort = getContainerPort(stack, port);
|
|
||||||
const templateFn = DOCKERFILE_TEMPLATES[stack] || DOCKERFILE_TEMPLATES['nodejs'];
|
|
||||||
let dockerfileContent = templateFn(containerPort);
|
|
||||||
|
|
||||||
// If the project does NOT have a patches/ directory, remove COPY patches/ lines
|
|
||||||
const hasPatchesDir = fs.existsSync(path.join(srcDir, 'patches'));
|
|
||||||
if (!hasPatchesDir) {
|
|
||||||
dockerfileContent = dockerfileContent
|
|
||||||
.split('\n')
|
|
||||||
.filter(line => !line.includes('COPY patches/'))
|
|
||||||
.join('\n');
|
|
||||||
log('Pas de dossier patches/ détecté, lignes COPY patches/ retirées du Dockerfile.');
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the project does NOT have a drizzle/ directory, remove COPY drizzle lines
|
|
||||||
const hasDrizzleDir = fs.existsSync(path.join(srcDir, 'drizzle'));
|
|
||||||
if (!hasDrizzleDir) {
|
|
||||||
dockerfileContent = dockerfileContent
|
|
||||||
.split('\n')
|
|
||||||
.filter(line => !line.includes('COPY drizzle'))
|
|
||||||
.join('\n');
|
|
||||||
log('Pas de dossier drizzle/ détecté, lignes COPY drizzle retirées du Dockerfile.');
|
|
||||||
}
|
|
||||||
|
|
||||||
await fsp.writeFile(dockerfilePath, dockerfileContent, 'utf-8');
|
|
||||||
log('Dockerfile généré.');
|
|
||||||
|
|
||||||
// Commit le Dockerfile
|
|
||||||
if (sourceType === 'zip') {
|
|
||||||
await execCommand(
|
|
||||||
`cd ${srcDir} && git config user.email "admin@santinova-soft.org" && git config user.name "Manus Dashboard" && git add Dockerfile && git commit -m "Add auto-generated Dockerfile" && git push origin main`,
|
|
||||||
60000
|
|
||||||
);
|
|
||||||
log('Dockerfile commité et poussé sur Gitea.');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
log('Dockerfile existant détecté, utilisation du Dockerfile du projet.');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 4. Générer le docker-compose.yml
|
|
||||||
log('Génération du docker-compose.yml...');
|
|
||||||
const containerPort = getContainerPort(stack, port);
|
|
||||||
const composeContent = generateDockerCompose({
|
|
||||||
appId,
|
|
||||||
subdomain,
|
|
||||||
stack,
|
|
||||||
port: containerPort,
|
|
||||||
needsDb: needsDb || false,
|
|
||||||
dbType: dbType || 'mysql',
|
|
||||||
});
|
|
||||||
await fsp.writeFile(path.join(appDir, 'docker-compose.yml'), composeContent, 'utf-8');
|
|
||||||
log('docker-compose.yml généré.');
|
|
||||||
|
|
||||||
// 5. Lancer le build et le déploiement Docker
|
|
||||||
log('Lancement du build Docker (cela peut prendre quelques minutes)...');
|
|
||||||
const buildResult = await execCommand(
|
|
||||||
`cd ${appDir} && docker compose build --no-cache 2>&1`,
|
|
||||||
600000
|
|
||||||
);
|
|
||||||
log('Build Docker terminé.');
|
|
||||||
|
|
||||||
log('Démarrage des conteneurs...');
|
|
||||||
await execCommand(`cd ${appDir} && docker compose up -d 2>&1`, 120000);
|
|
||||||
log('Conteneurs démarrés.');
|
|
||||||
|
|
||||||
// 6. Créer un utilisateur admin dans la base de données si nécessaire
|
|
||||||
if (needsDb) {
|
|
||||||
log('Attente du démarrage de la base de données (15s)...');
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 15000));
|
|
||||||
|
|
||||||
try {
|
|
||||||
log('Tentative de création de l\'utilisateur admin dans la base de données...');
|
|
||||||
if (dbType === 'postgres') {
|
|
||||||
await execCommand(
|
|
||||||
`docker exec ${appId}-db psql -U app_user -d ${appId.replace(/-/g, '_')} -c "CREATE TABLE IF NOT EXISTS admin_users (id SERIAL PRIMARY KEY, email VARCHAR(255), password VARCHAR(255), role VARCHAR(50), created_at TIMESTAMP DEFAULT NOW()); INSERT INTO admin_users (email, password, role) VALUES ('adminItinova@santinova-soft.org', 'Itinova69!', 'admin') ON CONFLICT DO NOTHING;" 2>&1`,
|
|
||||||
30000
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
await execCommand(
|
|
||||||
`docker exec ${appId}-db mysql -uapp_user -pAppPassword2026! ${appId.replace(/-/g, '_')} -e "CREATE TABLE IF NOT EXISTS admin_users (id INT AUTO_INCREMENT PRIMARY KEY, email VARCHAR(255), password VARCHAR(255), role VARCHAR(50), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP); INSERT IGNORE INTO admin_users (email, password, role) VALUES ('adminItinova@santinova-soft.org', 'Itinova69!', 'admin');" 2>&1`,
|
|
||||||
30000
|
|
||||||
);
|
|
||||||
}
|
|
||||||
log('Utilisateur admin créé dans la base de données.');
|
|
||||||
} catch (dbErr) {
|
|
||||||
log(`Note: Création de l'utilisateur admin en BDD non critique: ${dbErr.message}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 7. Enregistrer l'application dans la configuration dynamique
|
|
||||||
const appDef = {
|
|
||||||
id: appId,
|
|
||||||
name: name,
|
|
||||||
description: description || `Application ${name}`,
|
|
||||||
directory: appId,
|
|
||||||
giteaRepo: giteaRepoName,
|
|
||||||
giteaOwner: giteaOwner,
|
|
||||||
urls: {
|
|
||||||
recette: `https://${domain}`,
|
|
||||||
prod: null,
|
|
||||||
},
|
|
||||||
containerName: appId,
|
|
||||||
healthCheckUrl: `https://${domain}`,
|
|
||||||
port: containerPort,
|
|
||||||
stack: stack,
|
|
||||||
needsDb: needsDb || false,
|
|
||||||
dbType: dbType || null,
|
|
||||||
createdAt: new Date().toISOString(),
|
|
||||||
};
|
|
||||||
|
|
||||||
addDynamicApp(appDef);
|
|
||||||
log(`Application ${name} enregistrée dans le dashboard.`);
|
|
||||||
log(`Accessible sur: https://${domain}`);
|
|
||||||
|
|
||||||
return {
|
|
||||||
success: true,
|
|
||||||
app: appDef,
|
|
||||||
message: `Application ${name} créée et déployée avec succès`,
|
|
||||||
url: `https://${domain}`,
|
|
||||||
};
|
|
||||||
} catch (err) {
|
|
||||||
log(`ERREUR: ${err.message}`);
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function execCommand(cmd, timeout = 60000) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
exec(cmd, { maxBuffer: 1024 * 1024 * 50, timeout }, (error, stdout, stderr) => {
|
|
||||||
if (error) {
|
|
||||||
reject(new Error(`Commande échouée: ${error.message}\nStdout: ${stdout}\nStderr: ${stderr}`));
|
|
||||||
} else {
|
|
||||||
resolve(stdout + stderr);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============ STACK DETECTION ============
|
|
||||||
|
|
||||||
function getAvailableStacks() {
|
|
||||||
return [
|
|
||||||
{ id: 'nodejs', name: 'Node.js', icon: 'nodejs', description: 'Application Node.js (Express, Fastify, etc.)' },
|
|
||||||
{ id: 'nodejs-next', name: 'Node.js (Next.js)', icon: 'nodejs', description: 'Application Next.js avec SSR' },
|
|
||||||
{ id: 'python', name: 'Python', icon: 'python', description: 'Application Python générique' },
|
|
||||||
{ id: 'python-flask', name: 'Python (Flask)', icon: 'python', description: 'Application Flask' },
|
|
||||||
{ id: 'python-django', name: 'Python (Django)', icon: 'python', description: 'Application Django' },
|
|
||||||
{ id: 'php', name: 'PHP', icon: 'php', description: 'Application PHP avec Apache' },
|
|
||||||
{ id: 'php-laravel', name: 'PHP (Laravel)', icon: 'php', description: 'Application Laravel' },
|
|
||||||
{ id: 'static', name: 'Site statique', icon: 'static', description: 'HTML/CSS/JS statique (Nginx)' },
|
|
||||||
{ id: 'static-react', name: 'React (SPA)', icon: 'react', description: 'Application React avec build (Vite/CRA)' },
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
createApplication,
|
|
||||||
generateDockerCompose,
|
|
||||||
getAvailableStacks,
|
|
||||||
initDynamicApps,
|
|
||||||
loadDynamicApps,
|
|
||||||
addDynamicApp,
|
|
||||||
DOCKERFILE_TEMPLATES,
|
|
||||||
};
|
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
const jwt = require('jsonwebtoken');
|
|
||||||
const bcrypt = require('bcryptjs');
|
|
||||||
const config = require('./config');
|
|
||||||
|
|
||||||
// Hash du mot de passe au démarrage
|
|
||||||
let passwordHash = null;
|
|
||||||
|
|
||||||
async function initAuth() {
|
|
||||||
passwordHash = await bcrypt.hash(config.auth.password, 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function authenticate(username, password) {
|
|
||||||
if (username !== config.auth.username) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
// Comparer directement car on stocke le mot de passe en clair dans la config
|
|
||||||
if (password !== config.auth.password) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const token = jwt.sign(
|
|
||||||
{ username, role: 'admin' },
|
|
||||||
config.jwtSecret,
|
|
||||||
{ expiresIn: config.jwtExpiry }
|
|
||||||
);
|
|
||||||
return token;
|
|
||||||
}
|
|
||||||
|
|
||||||
function verifyToken(token) {
|
|
||||||
try {
|
|
||||||
return jwt.verify(token, config.jwtSecret);
|
|
||||||
} catch (err) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function authMiddleware(req, res, next) {
|
|
||||||
// Check Authorization header
|
|
||||||
let token = null;
|
|
||||||
const authHeader = req.headers.authorization;
|
|
||||||
if (authHeader && authHeader.startsWith('Bearer ')) {
|
|
||||||
token = authHeader.substring(7);
|
|
||||||
}
|
|
||||||
// Check cookie
|
|
||||||
if (!token && req.cookies) {
|
|
||||||
token = req.cookies.dashboard_token;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!token) {
|
|
||||||
return res.status(401).json({ error: 'Non authentifié' });
|
|
||||||
}
|
|
||||||
|
|
||||||
const decoded = verifyToken(token);
|
|
||||||
if (!decoded) {
|
|
||||||
return res.status(401).json({ error: 'Token invalide ou expiré' });
|
|
||||||
}
|
|
||||||
|
|
||||||
req.user = decoded;
|
|
||||||
next();
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = { initAuth, authenticate, verifyToken, authMiddleware };
|
|
||||||
@@ -1,231 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
port: process.env.PORT || 3001,
|
|
||||||
jwtSecret: process.env.JWT_SECRET || 'manus-dashboard-secret-2026',
|
|
||||||
jwtExpiry: '24h',
|
|
||||||
// Authentification
|
|
||||||
auth: {
|
|
||||||
username: process.env.ADMIN_USERNAME || 'adminItinova',
|
|
||||||
password: process.env.ADMIN_PASSWORD || 'Itinova69!',
|
|
||||||
},
|
|
||||||
// Gitea
|
|
||||||
gitea: {
|
|
||||||
url: process.env.GITEA_URL || 'http://gitea:3000',
|
|
||||||
username: process.env.GITEA_USERNAME || 'manus-admin',
|
|
||||||
password: process.env.GITEA_PASSWORD || 'Itinova69!',
|
|
||||||
token: process.env.GITEA_TOKEN || null,
|
|
||||||
},
|
|
||||||
// Applications config
|
|
||||||
appsBasePath: process.env.APPS_BASE_PATH || '/opt/manus-deploy/apps',
|
|
||||||
infrastructurePath: process.env.INFRA_BASE_PATH || '/opt/manus-deploy/infrastructure',
|
|
||||||
// Health check interval (ms)
|
|
||||||
healthCheckInterval: parseInt(process.env.HEALTH_CHECK_INTERVAL) || 30000,
|
|
||||||
// Apps configuration
|
|
||||||
apps: [
|
|
||||||
{
|
|
||||||
id: 'itinova-contacts',
|
|
||||||
name: 'Itinova Contacts',
|
|
||||||
description: 'Application de gestion des contacts Itinova',
|
|
||||||
directory: 'itinova-contacts',
|
|
||||||
giteaRepo: 'itinova-contacts',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
|
||||||
recette: 'https://contacts.recette.santinova-soft.org',
|
|
||||||
prod: 'https://contacts.santinova-soft.org',
|
|
||||||
},
|
|
||||||
containerName: 'itinova-contacts',
|
|
||||||
healthCheckUrl: 'https://contacts.recette.santinova-soft.org',
|
|
||||||
port: 3000,
|
|
||||||
category: 'ITINOVA',
|
|
||||||
status: 'production',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'itinova-podcasts',
|
|
||||||
name: 'Itinova Podcasts',
|
|
||||||
description: 'Gestionnaire de podcasts pour les établissements Itinova',
|
|
||||||
directory: 'itinova-podcasts',
|
|
||||||
giteaRepo: 'itinova-podcasts',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
|
||||||
recette: 'https://podcasts.recette.santinova-soft.org',
|
|
||||||
prod: 'https://podcasts.santinova-soft.org',
|
|
||||||
},
|
|
||||||
containerName: 'itinova-podcasts',
|
|
||||||
healthCheckUrl: 'https://podcasts.recette.santinova-soft.org',
|
|
||||||
port: 3000,
|
|
||||||
category: 'ITINOVA',
|
|
||||||
status: 'production',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'veille-reglementaire',
|
|
||||||
name: 'Veille Réglementaire',
|
|
||||||
description: 'Application de veille réglementaire et appels à projets',
|
|
||||||
directory: 'veille-reglementaire',
|
|
||||||
giteaRepo: 'veille-reglementaire',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
|
||||||
recette: 'https://veille.recette.santinova-soft.org',
|
|
||||||
prod: 'https://veille.santinova-soft.org',
|
|
||||||
},
|
|
||||||
containerName: 'veille-reglementaire-recette',
|
|
||||||
healthCheckUrl: 'https://veille.recette.santinova-soft.org',
|
|
||||||
port: 3000,
|
|
||||||
category: 'ITINOVA',
|
|
||||||
status: 'production',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'itinova-vehicle-exchange',
|
|
||||||
name: 'Itinova Gestion de Flotte',
|
|
||||||
description: 'Bourse de véhicules Itinova — Partage et échange de véhicules entre établissements',
|
|
||||||
directory: 'itinova-vehicle-exchange',
|
|
||||||
giteaRepo: 'itinova-vehicle-exchange',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
|
||||||
recette: 'https://flotte.recette.santinova-soft.org',
|
|
||||||
prod: 'https://flotte.santinova-soft.org',
|
|
||||||
},
|
|
||||||
containerName: 'itinova-vehicle-exchange',
|
|
||||||
healthCheckUrl: 'https://flotte.recette.santinova-soft.org',
|
|
||||||
port: 3000,
|
|
||||||
category: 'ITINOVA',
|
|
||||||
status: 'production',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'pilotage-masse-salariale',
|
|
||||||
name: 'Pilotage Masse Salariale',
|
|
||||||
description: 'Application de pilotage de la masse salariale Itinova',
|
|
||||||
directory: 'pilotage-masse-salariale',
|
|
||||||
giteaRepo: 'pilotage-masse-salariale',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
|
||||||
recette: 'https://pilotage-ms.recette.santinova-soft.org',
|
|
||||||
prod: 'https://pilotage-ms.santinova-soft.org',
|
|
||||||
},
|
|
||||||
containerName: 'pilotage-masse-salariale-app',
|
|
||||||
healthCheckUrl: 'https://pilotage-ms.recette.santinova-soft.org',
|
|
||||||
port: 3000,
|
|
||||||
category: 'ITINOVA',
|
|
||||||
image: 'images/pilotage-ms.png',
|
|
||||||
status: 'recette',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'sonum',
|
|
||||||
name: 'SONUM',
|
|
||||||
description: 'Cartographie des Solutions Numériques FEHAP',
|
|
||||||
directory: 'sonum',
|
|
||||||
giteaRepo: 'sonum',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
|
||||||
recette: 'https://sonum.recette.santinova-soft.org',
|
|
||||||
prod: 'https://sonum.santinova-soft.org',
|
|
||||||
},
|
|
||||||
containerName: 'sonum',
|
|
||||||
healthCheckUrl: 'https://sonum.recette.santinova-soft.org',
|
|
||||||
port: 3000,
|
|
||||||
category: 'SANTINOVA',
|
|
||||||
status: 'production',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'demat-facturation-dsi',
|
|
||||||
name: 'Démat. Facturation DSI',
|
|
||||||
description: 'Dématérialisation des factures DSI — Import email/dossier, analyse IA, export SharePoint/PDF, validation BAP',
|
|
||||||
directory: 'demat-facturation-dsi',
|
|
||||||
giteaRepo: 'demat-facturation-dsi',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
|
||||||
recette: 'https://demat-facturation.recette.santinova-soft.org',
|
|
||||||
prod: 'https://demat-facturation.santinova-soft.org',
|
|
||||||
},
|
|
||||||
containerName: 'demat-facturation-app',
|
|
||||||
healthCheckUrl: 'https://demat-facturation.recette.santinova-soft.org',
|
|
||||||
port: 3000,
|
|
||||||
image: 'images/demat-facturation-dsi.jpg',
|
|
||||||
category: 'SANTINOVA',
|
|
||||||
status: 'production',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'facturation-santinova',
|
|
||||||
name: 'Facturation Santinova',
|
|
||||||
description: 'Application de gestion de la facturation Santinova',
|
|
||||||
directory: 'facturation-santinova',
|
|
||||||
giteaRepo: 'facturation-santinova',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
|
||||||
recette: 'https://facturation.recette.santinova-soft.org',
|
|
||||||
prod: 'https://facturation.santinova-soft.org',
|
|
||||||
},
|
|
||||||
containerName: 'facturation-santinova-app',
|
|
||||||
healthCheckUrl: 'https://facturation.recette.santinova-soft.org',
|
|
||||||
port: 3001,
|
|
||||||
category: 'SANTINOVA',
|
|
||||||
status: 'recette',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'formation-manager-itinova',
|
|
||||||
name: 'Formation Manager',
|
|
||||||
description: 'Gestion des Formations Itinova',
|
|
||||||
directory: 'formation-manager-itinova',
|
|
||||||
giteaRepo: 'formation-manager-itinova',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
|
||||||
recette: 'https://formations.recette.santinova-soft.org',
|
|
||||||
prod: 'https://formations.santinova-soft.org',
|
|
||||||
},
|
|
||||||
containerName: 'formation-manager-itinova',
|
|
||||||
healthCheckUrl: 'https://formations.recette.santinova-soft.org',
|
|
||||||
port: 3000,
|
|
||||||
category: 'ITINOVA',
|
|
||||||
status: 'production',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'portail-santinova',
|
|
||||||
name: 'Portail Applicatif',
|
|
||||||
description: 'Portail applicatif Santinova — accès centralisé aux applications',
|
|
||||||
directory: 'portail-santinova',
|
|
||||||
giteaRepo: 'portail-santinova',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
|
||||||
recette: 'https://portail.recette.santinova-soft.org',
|
|
||||||
prod: 'https://portail.santinova-soft.org',
|
|
||||||
},
|
|
||||||
containerName: 'portail-santinova',
|
|
||||||
healthCheckUrl: 'https://portail.recette.santinova-soft.org',
|
|
||||||
port: 3000,
|
|
||||||
category: 'INFRA',
|
|
||||||
status: 'production',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'manus-dashboard',
|
|
||||||
name: 'Dashboard Recette',
|
|
||||||
description: 'Dashboard de gestion de l\'infrastructure Manus',
|
|
||||||
directory: 'manus-dashboard',
|
|
||||||
giteaRepo: 'manus-dashboard',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
|
||||||
recette: 'https://dashboard.recette.santinova-soft.org',
|
|
||||||
prod: 'https://dashboard.santinova-soft.org',
|
|
||||||
},
|
|
||||||
containerName: 'manus-dashboard',
|
|
||||||
healthCheckUrl: 'https://dashboard.recette.santinova-soft.org',
|
|
||||||
port: 3001,
|
|
||||||
category: 'INFRA',
|
|
||||||
status: 'production',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'itinova-budget-si',
|
|
||||||
name: 'Gestion Budget Informatique',
|
|
||||||
description: 'Application de gestion du budget informatique DSI Itinova',
|
|
||||||
directory: 'itinova-budget-si',
|
|
||||||
giteaRepo: 'itinova-budget-si',
|
|
||||||
giteaOwner: 'manus-admin',
|
|
||||||
urls: {
|
|
||||||
recette: 'https://budget-si.recette.santinova-soft.org',
|
|
||||||
prod: 'https://budget-si.santinova-soft.org',
|
|
||||||
},
|
|
||||||
containerName: 'itinova-budget-si-app',
|
|
||||||
healthCheckUrl: 'https://budget-si.recette.santinova-soft.org',
|
|
||||||
port: 3000,
|
|
||||||
category: 'SANTINOVA',
|
|
||||||
status: 'recette',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
@@ -1,438 +0,0 @@
|
|||||||
const Docker = require('dockerode');
|
|
||||||
const { exec } = require('child_process');
|
|
||||||
const path = require('path');
|
|
||||||
const config = require('./config');
|
|
||||||
|
|
||||||
const docker = new Docker({ socketPath: '/var/run/docker.sock' });
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Récupérer les informations d'un conteneur Docker
|
|
||||||
*/
|
|
||||||
async function getContainerInfo(containerName) {
|
|
||||||
try {
|
|
||||||
const container = docker.getContainer(containerName);
|
|
||||||
const info = await container.inspect();
|
|
||||||
return {
|
|
||||||
id: info.Id.substring(0, 12),
|
|
||||||
name: info.Name.replace('/', ''),
|
|
||||||
state: info.State.Status,
|
|
||||||
running: info.State.Running,
|
|
||||||
startedAt: info.State.StartedAt,
|
|
||||||
image: info.Config.Image,
|
|
||||||
created: info.Created,
|
|
||||||
};
|
|
||||||
} catch (err) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Récupérer les logs d'un conteneur
|
|
||||||
*/
|
|
||||||
async function getContainerLogs(containerName, tail = 100) {
|
|
||||||
try {
|
|
||||||
const container = docker.getContainer(containerName);
|
|
||||||
const logs = await container.logs({
|
|
||||||
stdout: true,
|
|
||||||
stderr: true,
|
|
||||||
tail: tail,
|
|
||||||
timestamps: true,
|
|
||||||
});
|
|
||||||
// Parse buffer to string
|
|
||||||
return logs.toString('utf8');
|
|
||||||
} catch (err) {
|
|
||||||
return `Erreur lors de la récupération des logs: ${err.message}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Lister tous les conteneurs
|
|
||||||
*/
|
|
||||||
async function listContainers() {
|
|
||||||
try {
|
|
||||||
const containers = await docker.listContainers({ all: true });
|
|
||||||
return containers.map((c) => ({
|
|
||||||
id: c.Id.substring(0, 12),
|
|
||||||
names: c.Names.map((n) => n.replace('/', '')),
|
|
||||||
state: c.State,
|
|
||||||
status: c.Status,
|
|
||||||
image: c.Image,
|
|
||||||
created: new Date(c.Created * 1000).toISOString(),
|
|
||||||
}));
|
|
||||||
} catch (err) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Redéployer une application (docker compose build + up)
|
|
||||||
*/
|
|
||||||
function redeployApp(appConfig) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const appDir = path.join(config.appsBasePath, appConfig.directory);
|
|
||||||
const cmd = `cd ${appDir} && docker compose build --no-cache && docker compose up -d`;
|
|
||||||
|
|
||||||
const startTime = Date.now();
|
|
||||||
const logLines = [];
|
|
||||||
|
|
||||||
logLines.push(`[${new Date().toISOString()}] Début du redéploiement de ${appConfig.name}`);
|
|
||||||
logLines.push(`[${new Date().toISOString()}] Répertoire: ${appDir}`);
|
|
||||||
logLines.push(`[${new Date().toISOString()}] Commande: ${cmd}`);
|
|
||||||
|
|
||||||
const process = exec(cmd, {
|
|
||||||
maxBuffer: 1024 * 1024 * 10, // 10MB
|
|
||||||
timeout: 300000, // 5 minutes
|
|
||||||
});
|
|
||||||
|
|
||||||
process.stdout.on('data', (data) => {
|
|
||||||
const lines = data.toString().split('\n').filter(Boolean);
|
|
||||||
lines.forEach((line) => {
|
|
||||||
logLines.push(`[${new Date().toISOString()}] ${line}`);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
process.stderr.on('data', (data) => {
|
|
||||||
const lines = data.toString().split('\n').filter(Boolean);
|
|
||||||
lines.forEach((line) => {
|
|
||||||
logLines.push(`[${new Date().toISOString()}] ${line}`);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
process.on('close', (code) => {
|
|
||||||
const duration = ((Date.now() - startTime) / 1000).toFixed(1);
|
|
||||||
if (code === 0) {
|
|
||||||
logLines.push(`[${new Date().toISOString()}] Redéploiement terminé avec succès en ${duration}s`);
|
|
||||||
resolve({ success: true, logs: logLines.join('\n'), duration });
|
|
||||||
} else {
|
|
||||||
logLines.push(`[${new Date().toISOString()}] Redéploiement échoué (code: ${code}) en ${duration}s`);
|
|
||||||
resolve({ success: false, logs: logLines.join('\n'), duration, exitCode: code });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
process.on('error', (err) => {
|
|
||||||
logLines.push(`[${new Date().toISOString()}] Erreur: ${err.message}`);
|
|
||||||
resolve({ success: false, logs: logLines.join('\n'), error: err.message });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Pull le dernier code depuis Gitea
|
|
||||||
*/
|
|
||||||
function gitPull(appConfig) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const srcDir = path.join(config.appsBasePath, appConfig.directory, 'src');
|
|
||||||
const cmd = `cd ${srcDir} && git pull origin main 2>&1 || git pull origin master 2>&1`;
|
|
||||||
|
|
||||||
exec(cmd, { timeout: 60000 }, (error, stdout, stderr) => {
|
|
||||||
if (error) {
|
|
||||||
resolve({ success: false, output: stderr || error.message });
|
|
||||||
} else {
|
|
||||||
resolve({ success: true, output: stdout });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Démarrer un conteneur Docker
|
|
||||||
*/
|
|
||||||
async function startContainer(containerName, appId) {
|
|
||||||
try {
|
|
||||||
// Tenter d'abord un docker start (conteneur existant mais arrêté)
|
|
||||||
const container = docker.getContainer(containerName);
|
|
||||||
const info = await container.inspect().catch(() => null);
|
|
||||||
if (info) {
|
|
||||||
// Le conteneur existe, on le démarre
|
|
||||||
if (!info.State.Running) {
|
|
||||||
await container.start();
|
|
||||||
}
|
|
||||||
return { success: true, message: `Conteneur ${containerName} démarré` };
|
|
||||||
}
|
|
||||||
// Le conteneur n'existe pas : docker compose up dans le répertoire de l'app
|
|
||||||
const id = appId || containerName;
|
|
||||||
const appsBasePath = config.appsBasePath || process.env.APPS_BASE_PATH || '/opt/manus-deploy/apps';
|
|
||||||
const appDir = path.join(appsBasePath, id);
|
|
||||||
const fs = require('fs');
|
|
||||||
const composeFile = fs.existsSync(path.join(appDir, 'docker-compose.yml'))
|
|
||||||
? path.join(appDir, 'docker-compose.yml')
|
|
||||||
: fs.existsSync(path.join(appDir, 'docker-compose.prod.yml'))
|
|
||||||
? path.join(appDir, 'docker-compose.prod.yml')
|
|
||||||
: null;
|
|
||||||
if (!composeFile) {
|
|
||||||
return { success: false, message: `Aucun docker-compose.yml trouvé dans ${appDir}` };
|
|
||||||
}
|
|
||||||
await new Promise((resolve, reject) => {
|
|
||||||
exec(`docker compose -f ${composeFile} up -d`, { cwd: appDir }, (err, stdout, stderr) => {
|
|
||||||
if (err) reject(new Error(stderr || err.message));
|
|
||||||
else resolve(stdout);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return { success: true, message: `Conteneur ${containerName} créé et démarré via docker compose` };
|
|
||||||
} catch (err) {
|
|
||||||
return { success: false, message: err.message };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Arrêter un conteneur Docker
|
|
||||||
*/
|
|
||||||
async function stopContainer(containerName) {
|
|
||||||
try {
|
|
||||||
const container = docker.getContainer(containerName);
|
|
||||||
await container.stop({ t: 10 });
|
|
||||||
return { success: true, message: `Conteneur ${containerName} arrêté` };
|
|
||||||
} catch (err) {
|
|
||||||
return { success: false, message: err.message };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Redémarrer un conteneur Docker
|
|
||||||
*/
|
|
||||||
async function restartContainer(containerName) {
|
|
||||||
try {
|
|
||||||
const container = docker.getContainer(containerName);
|
|
||||||
await container.restart({ t: 10 });
|
|
||||||
return { success: true, message: `Conteneur ${containerName} redémarré` };
|
|
||||||
} catch (err) {
|
|
||||||
return { success: false, message: err.message };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Récupérer les métriques système du serveur (CPU, RAM, disque, réseau)
|
|
||||||
*/
|
|
||||||
function getServerMetrics() {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
const { execSync } = require("child_process");
|
|
||||||
const fs = require("fs");
|
|
||||||
try {
|
|
||||||
// ===== Méthode 1 : Lire host-metrics.json généré par le script système de l'hôte =====
|
|
||||||
// Ce fichier est mis à jour toutes les 30s par /opt/manus-deploy/host-metrics.sh
|
|
||||||
// Il contient les vraies métriques de l'hôte LXC (pas du nœud physique)
|
|
||||||
const hostMetricsPath = '/opt/manus-deploy/host-metrics.json';
|
|
||||||
if (fs.existsSync(hostMetricsPath)) {
|
|
||||||
try {
|
|
||||||
const raw = fs.readFileSync(hostMetricsPath, 'utf8');
|
|
||||||
const hostMetrics = JSON.parse(raw);
|
|
||||||
// Vérifier que le fichier est récent (moins de 2 minutes)
|
|
||||||
const fileAge = Date.now() - new Date(hostMetrics.timestamp).getTime();
|
|
||||||
if (fileAge < 120000 && hostMetrics.memory && hostMetrics.memory.total > 0) {
|
|
||||||
return resolve({
|
|
||||||
...hostMetrics,
|
|
||||||
timestamp: new Date().toISOString()
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch(e) {}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ===== Méthode 2 : Lecture directe de /proc (fallback) =====
|
|
||||||
// CPU : mesure via cgroup v2 usage_usec (méthode précise pour conteneur LXC)
|
|
||||||
// Fallback sur /proc/stat normalisé par nproc si cgroup v2 non disponible
|
|
||||||
let cpuUsage = 0;
|
|
||||||
try {
|
|
||||||
const ncpu = parseInt(execSync('nproc').toString().trim()) || 1;
|
|
||||||
const cgroupPath = '/sys/fs/cgroup/cpu.stat';
|
|
||||||
const readUsageUsec = () => {
|
|
||||||
const stat = fs.readFileSync(cgroupPath, 'utf8');
|
|
||||||
const m = stat.match(/^usage_usec\s+(\d+)/m);
|
|
||||||
return m ? parseInt(m[1]) : null;
|
|
||||||
};
|
|
||||||
const u1 = readUsageUsec();
|
|
||||||
if (u1 !== null) {
|
|
||||||
// Méthode cgroup v2 : mesure la consommation CPU réelle du conteneur
|
|
||||||
execSync('sleep 0.5');
|
|
||||||
const u2 = readUsageUsec();
|
|
||||||
// delta en microsecondes / (500ms * ncpu) = % CPU du conteneur
|
|
||||||
const deltaUs = u2 - u1;
|
|
||||||
cpuUsage = Math.min(100, Math.round(deltaUs / (500000 * ncpu) * 100));
|
|
||||||
} else {
|
|
||||||
// Fallback : /proc/stat normalisé par nproc
|
|
||||||
const parseCpuLine = (line) => line.trim().split(/\s+/).slice(1).map(Number);
|
|
||||||
const s1 = parseCpuLine(fs.readFileSync('/proc/stat', 'utf8').split('\n').find(l => l.startsWith('cpu ')));
|
|
||||||
execSync('sleep 0.3');
|
|
||||||
const s2 = parseCpuLine(fs.readFileSync('/proc/stat', 'utf8').split('\n').find(l => l.startsWith('cpu ')));
|
|
||||||
const idle1 = s1[3], total1 = s1.reduce((a,b)=>a+b,0);
|
|
||||||
const idle2 = s2[3], total2 = s2.reduce((a,b)=>a+b,0);
|
|
||||||
const dIdle = idle2 - idle1, dTotal = total2 - total1;
|
|
||||||
const rawCpu = dTotal > 0 ? (1 - dIdle / dTotal) * 100 : 0;
|
|
||||||
// Normaliser par nproc pour éviter l'effet nœud physique sur LXC
|
|
||||||
cpuUsage = Math.round(rawCpu / ncpu);
|
|
||||||
}
|
|
||||||
} catch(e) {}
|
|
||||||
|
|
||||||
// RAM : lecture robuste multi-source
|
|
||||||
// Priorité 1 : /host/proc/meminfo (hôte LXC monté via volume docker-compose)
|
|
||||||
// Priorité 2 : /proc/meminfo si MemTotal <= 64 Go (lxcfs ou VPS direct)
|
|
||||||
// Priorité 3 : Docker API MemTotal + ratio /proc/meminfo du nœud physique
|
|
||||||
let memTotal = 0;
|
|
||||||
let memFree = 0, memAvailable = 0, memUsed = 0, memBuffers = 0, memCached = 0;
|
|
||||||
|
|
||||||
// Fonction de lecture de meminfo depuis un chemin donné
|
|
||||||
const readMeminfo = (procPath) => {
|
|
||||||
const raw = fs.readFileSync(procPath + '/meminfo', 'utf8');
|
|
||||||
const map = {};
|
|
||||||
raw.split('\n').forEach(line => {
|
|
||||||
const idx = line.indexOf(':');
|
|
||||||
if (idx > 0) {
|
|
||||||
const key = line.substring(0, idx).trim();
|
|
||||||
const rest = line.substring(idx + 1).trim();
|
|
||||||
const val = parseInt(rest.split(' ')[0]);
|
|
||||||
if (Number.isFinite(val)) map[key] = val * 1024;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return map;
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
|
||||||
let memMap = null;
|
|
||||||
let sourceLabel = '';
|
|
||||||
|
|
||||||
// Priorité 1 : /host/proc monté depuis l'hôte LXC
|
|
||||||
if (fs.existsSync('/host/proc/meminfo')) {
|
|
||||||
try {
|
|
||||||
const hostMap = readMeminfo('/host/proc');
|
|
||||||
if (hostMap['MemTotal'] > 0 && hostMap['MemTotal'] <= 64 * 1024 * 1024 * 1024) {
|
|
||||||
memMap = hostMap;
|
|
||||||
sourceLabel = 'host/proc';
|
|
||||||
}
|
|
||||||
} catch(e) {}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Priorité 2 : /proc direct si MemTotal <= 64 Go
|
|
||||||
if (!memMap) {
|
|
||||||
try {
|
|
||||||
const procMap = readMeminfo('/proc');
|
|
||||||
if (procMap['MemTotal'] > 0 && procMap['MemTotal'] <= 64 * 1024 * 1024 * 1024) {
|
|
||||||
memMap = procMap;
|
|
||||||
sourceLabel = '/proc direct';
|
|
||||||
}
|
|
||||||
} catch(e) {}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Priorité 3 : Docker API MemTotal + ratio du nœud physique
|
|
||||||
if (!memMap) {
|
|
||||||
try {
|
|
||||||
const dockerInfoRaw = execSync(
|
|
||||||
'curl -s --unix-socket /var/run/docker.sock http://localhost/info',
|
|
||||||
{ timeout: 3000 }
|
|
||||||
).toString();
|
|
||||||
const dockerInfo = JSON.parse(dockerInfoRaw);
|
|
||||||
const dockerMemTotal = dockerInfo.MemTotal || 0;
|
|
||||||
if (dockerMemTotal > 0) {
|
|
||||||
// Lire le ratio d'utilisation depuis /proc du nœud physique
|
|
||||||
const nodeMap = readMeminfo('/proc');
|
|
||||||
const nodeTotal = nodeMap['MemTotal'] || 1;
|
|
||||||
const nodeAvail = nodeMap['MemAvailable'] || 0;
|
|
||||||
const usageRatio = (nodeTotal - nodeAvail) / nodeTotal;
|
|
||||||
// Appliquer ce ratio à la vraie RAM du VPS
|
|
||||||
memTotal = dockerMemTotal;
|
|
||||||
memUsed = Math.round(memTotal * usageRatio);
|
|
||||||
memFree = memTotal - memUsed;
|
|
||||||
memAvailable = memFree;
|
|
||||||
sourceLabel = 'docker-api+ratio';
|
|
||||||
}
|
|
||||||
} catch(e) {}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Calculer les valeurs finales si memMap disponible
|
|
||||||
if (memMap) {
|
|
||||||
memTotal = memMap['MemTotal'] || 0;
|
|
||||||
memFree = memMap['MemFree'] || 0;
|
|
||||||
memAvailable = memMap['MemAvailable'] || 0;
|
|
||||||
memBuffers = memMap['Buffers'] || 0;
|
|
||||||
const sReclaimable = memMap['SReclaimable'] || 0;
|
|
||||||
const shmem = memMap['Shmem'] || 0;
|
|
||||||
memCached = (memMap['Cached'] || 0) + (sReclaimable > shmem ? sReclaimable - shmem : 0);
|
|
||||||
// Utiliser MemAvailable comme référence car elle inclut les caches libérables
|
|
||||||
// Identique à ce que `free` affiche dans la colonne 'disponible'
|
|
||||||
memUsed = memTotal - memAvailable;
|
|
||||||
if (memUsed < 0) memUsed = 0;
|
|
||||||
}
|
|
||||||
} catch(e) {
|
|
||||||
// Fallback ultime
|
|
||||||
try {
|
|
||||||
const m = readMeminfo('/proc');
|
|
||||||
memTotal = m['MemTotal'] || 0;
|
|
||||||
memFree = m['MemFree'] || 0;
|
|
||||||
memAvailable = m['MemAvailable'] || 0;
|
|
||||||
memUsed = memTotal - memAvailable;
|
|
||||||
} catch(e2) {}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Disque : df sur /opt/manus-deploy (point de montage de l'hôte LXC)
|
|
||||||
// Utiliser /opt/manus-deploy car c'est un volume monté depuis l'hôte
|
|
||||||
let diskTotal = 0, diskUsed = 0, diskFree = 0;
|
|
||||||
try {
|
|
||||||
const diskPath = fs.existsSync('/opt/manus-deploy') ? '/opt/manus-deploy' : '/';
|
|
||||||
const diskRaw = execSync('df -B1 ' + diskPath + ' | tail -1').toString().trim().split(/\s+/);
|
|
||||||
diskTotal = parseInt(diskRaw[1]);
|
|
||||||
diskUsed = parseInt(diskRaw[2]);
|
|
||||||
diskFree = parseInt(diskRaw[3]);
|
|
||||||
} catch(e) {}
|
|
||||||
|
|
||||||
// Uptime et load : utiliser /host/proc si disponible (hôte LXC réel)
|
|
||||||
const procBase = fs.existsSync('/host/proc/uptime') ? '/host/proc' : '/proc';
|
|
||||||
const uptimeRaw = fs.readFileSync(procBase + '/uptime', 'utf8').trim().split(' ');
|
|
||||||
const uptimeSeconds = parseFloat(uptimeRaw[0]);
|
|
||||||
const loadRaw = fs.readFileSync(procBase + '/loadavg', 'utf8').trim().split(' ');
|
|
||||||
const load1 = parseFloat(loadRaw[0]);
|
|
||||||
const load5 = parseFloat(loadRaw[1]);
|
|
||||||
const load15 = parseFloat(loadRaw[2]);
|
|
||||||
|
|
||||||
// Réseau
|
|
||||||
let netRx = 0, netTx = 0;
|
|
||||||
try {
|
|
||||||
const netDevPath = fs.existsSync('/host/proc/net/dev') ? '/host/proc/net/dev' : '/proc/net/dev';
|
|
||||||
const netDev = fs.readFileSync(netDevPath, 'utf8');
|
|
||||||
const netLine = netDev.split('\n').find(l => /eth0|ens|enp/.test(l));
|
|
||||||
if (netLine) {
|
|
||||||
const parts = netLine.trim().split(/\s+/);
|
|
||||||
netRx = parseInt(parts[1]) || 0;
|
|
||||||
netTx = parseInt(parts[9]) || 0;
|
|
||||||
}
|
|
||||||
} catch(e) {}
|
|
||||||
|
|
||||||
resolve({
|
|
||||||
cpu: { usage: cpuUsage },
|
|
||||||
memory: {
|
|
||||||
total: memTotal,
|
|
||||||
used: memUsed,
|
|
||||||
free: memFree,
|
|
||||||
available: memAvailable,
|
|
||||||
buffers: memBuffers,
|
|
||||||
cached: memCached,
|
|
||||||
// usagePercent = RAM applicative réelle (hors cache disque, identique à `free`)
|
|
||||||
usagePercent: Math.round((memUsed / memTotal) * 100)
|
|
||||||
},
|
|
||||||
disk: {
|
|
||||||
total: diskTotal,
|
|
||||||
used: diskUsed,
|
|
||||||
free: diskFree,
|
|
||||||
usagePercent: Math.round((diskUsed / diskTotal) * 100)
|
|
||||||
},
|
|
||||||
uptime: uptimeSeconds,
|
|
||||||
load: { load1, load5, load15 },
|
|
||||||
network: { rx: netRx, tx: netTx },
|
|
||||||
timestamp: new Date().toISOString()
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
resolve({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
module.exports = {
|
|
||||||
docker,
|
|
||||||
getContainerInfo,
|
|
||||||
getContainerLogs,
|
|
||||||
listContainers,
|
|
||||||
redeployApp,
|
|
||||||
gitPull,
|
|
||||||
startContainer,
|
|
||||||
stopContainer,
|
|
||||||
restartContainer,
|
|
||||||
getServerMetrics,
|
|
||||||
};
|
|
||||||
@@ -1,119 +0,0 @@
|
|||||||
const axios = require('axios');
|
|
||||||
const https = require('https');
|
|
||||||
const config = require('./config');
|
|
||||||
|
|
||||||
// Créer un client axios pour Gitea (ignorer les certificats auto-signés si nécessaire)
|
|
||||||
// Utiliser le token API si disponible, sinon auth basique
|
|
||||||
const giteaClientHeaders = config.gitea.token
|
|
||||||
? { 'Authorization': `token ${config.gitea.token}` }
|
|
||||||
: {};
|
|
||||||
|
|
||||||
const giteaClient = axios.create({
|
|
||||||
baseURL: `${config.gitea.url}/api/v1`,
|
|
||||||
...(config.gitea.token
|
|
||||||
? { headers: giteaClientHeaders }
|
|
||||||
: { auth: { username: config.gitea.username, password: config.gitea.password } }
|
|
||||||
),
|
|
||||||
httpsAgent: new https.Agent({ rejectUnauthorized: false }),
|
|
||||||
timeout: 10000,
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Récupérer les informations d'un dépôt
|
|
||||||
*/
|
|
||||||
async function getRepo(owner, repo) {
|
|
||||||
try {
|
|
||||||
const response = await giteaClient.get(`/repos/${owner}/${repo}`);
|
|
||||||
return response.data;
|
|
||||||
} catch (err) {
|
|
||||||
console.error(`Erreur Gitea getRepo ${owner}/${repo}:`, err.message);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Récupérer les derniers commits d'un dépôt
|
|
||||||
*/
|
|
||||||
async function getCommits(owner, repo, limit = 10) {
|
|
||||||
try {
|
|
||||||
const response = await giteaClient.get(`/repos/${owner}/${repo}/commits`, {
|
|
||||||
params: { limit, page: 1 },
|
|
||||||
});
|
|
||||||
return response.data.map((c) => ({
|
|
||||||
sha: c.sha,
|
|
||||||
shortSha: c.sha.substring(0, 7),
|
|
||||||
message: c.commit.message,
|
|
||||||
author: c.commit.author.name,
|
|
||||||
date: c.commit.author.date,
|
|
||||||
url: c.html_url,
|
|
||||||
}));
|
|
||||||
} catch (err) {
|
|
||||||
console.error(`Erreur Gitea getCommits ${owner}/${repo}:`, err.message);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Récupérer les branches d'un dépôt
|
|
||||||
*/
|
|
||||||
async function getBranches(owner, repo) {
|
|
||||||
try {
|
|
||||||
const response = await giteaClient.get(`/repos/${owner}/${repo}/branches`);
|
|
||||||
return response.data.map((b) => ({
|
|
||||||
name: b.name,
|
|
||||||
commit: b.commit.id.substring(0, 7),
|
|
||||||
commitMessage: b.commit.message,
|
|
||||||
}));
|
|
||||||
} catch (err) {
|
|
||||||
console.error(`Erreur Gitea getBranches ${owner}/${repo}:`, err.message);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Récupérer tous les dépôts (avec retry en cas d'erreur DNS)
|
|
||||||
*/
|
|
||||||
async function listRepos(retries = 3) {
|
|
||||||
for (let i = 0; i < retries; i++) {
|
|
||||||
try {
|
|
||||||
const response = await giteaClient.get('/repos/search', {
|
|
||||||
params: { limit: 50 },
|
|
||||||
});
|
|
||||||
return response.data.data || [];
|
|
||||||
} catch (err) {
|
|
||||||
console.error(`Erreur Gitea listRepos (tentative ${i + 1}/${retries}):`, err.message);
|
|
||||||
if (i < retries - 1) {
|
|
||||||
await new Promise((r) => setTimeout(r, 2000));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Créer un nouveau dépôt
|
|
||||||
*/
|
|
||||||
async function createRepo(name, description, isPrivate = true) {
|
|
||||||
try {
|
|
||||||
const response = await giteaClient.post('/user/repos', {
|
|
||||||
name,
|
|
||||||
description,
|
|
||||||
private: isPrivate,
|
|
||||||
auto_init: true,
|
|
||||||
default_branch: 'main',
|
|
||||||
});
|
|
||||||
return response.data;
|
|
||||||
} catch (err) {
|
|
||||||
console.error(`Erreur Gitea createRepo ${name}:`, err.message);
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
getRepo,
|
|
||||||
getCommits,
|
|
||||||
getBranches,
|
|
||||||
listRepos,
|
|
||||||
createRepo,
|
|
||||||
giteaClient,
|
|
||||||
};
|
|
||||||
@@ -1,188 +0,0 @@
|
|||||||
const axios = require('axios');
|
|
||||||
const https = require('https');
|
|
||||||
const config = require('./config');
|
|
||||||
const { getContainerInfo } = require('./docker');
|
|
||||||
|
|
||||||
// Store pour les statuts des apps
|
|
||||||
const appStatuses = new Map();
|
|
||||||
|
|
||||||
// Store pour les logs de déploiement
|
|
||||||
const deploymentLogs = [];
|
|
||||||
const MAX_DEPLOYMENT_LOGS = 50;
|
|
||||||
|
|
||||||
// Store pour les commits Gitea
|
|
||||||
const giteaCommits = new Map();
|
|
||||||
|
|
||||||
// Agent HTTPS qui ignore les certificats auto-signés
|
|
||||||
const httpsAgent = new https.Agent({ rejectUnauthorized: false });
|
|
||||||
|
|
||||||
// Au démarrage : marquer tous les déploiements "running" orphelins comme "failed"
|
|
||||||
// (ils ont été interrompus lors du dernier redémarrage du Dashboard)
|
|
||||||
function cleanupOrphanedDeployments() {
|
|
||||||
const orphans = deploymentLogs.filter((l) => l.status === 'running');
|
|
||||||
if (orphans.length > 0) {
|
|
||||||
console.log(`[healthcheck] Nettoyage de ${orphans.length} déploiement(s) orphelin(s) au démarrage`);
|
|
||||||
orphans.forEach((l) => {
|
|
||||||
l.status = 'failed';
|
|
||||||
l.message = 'Déploiement interrompu (redémarrage du Dashboard)';
|
|
||||||
l.endedAt = new Date().toISOString();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Vérifier la santé d'une URL
|
|
||||||
*/
|
|
||||||
async function checkUrl(url) {
|
|
||||||
try {
|
|
||||||
const start = Date.now();
|
|
||||||
const response = await axios.get(url, {
|
|
||||||
timeout: 10000,
|
|
||||||
httpsAgent,
|
|
||||||
validateStatus: (status) => status < 500,
|
|
||||||
});
|
|
||||||
const responseTime = Date.now() - start;
|
|
||||||
return {
|
|
||||||
online: true,
|
|
||||||
statusCode: response.status,
|
|
||||||
responseTime,
|
|
||||||
};
|
|
||||||
} catch (err) {
|
|
||||||
return {
|
|
||||||
online: false,
|
|
||||||
statusCode: null,
|
|
||||||
responseTime: null,
|
|
||||||
error: err.message,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Vérifier la santé d'une application
|
|
||||||
*/
|
|
||||||
async function checkApp(appConfig) {
|
|
||||||
const result = {
|
|
||||||
id: appConfig.id,
|
|
||||||
name: appConfig.name,
|
|
||||||
description: appConfig.description,
|
|
||||||
urls: appConfig.urls,
|
|
||||||
containerName: appConfig.containerName,
|
|
||||||
lastCheck: new Date().toISOString(),
|
|
||||||
status: 'unknown',
|
|
||||||
container: null,
|
|
||||||
health: {
|
|
||||||
recette: null,
|
|
||||||
prod: null,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
// Vérifier le conteneur Docker
|
|
||||||
const containerInfo = await getContainerInfo(appConfig.containerName);
|
|
||||||
result.container = containerInfo;
|
|
||||||
|
|
||||||
// Health check recette
|
|
||||||
if (appConfig.urls.recette) {
|
|
||||||
result.health.recette = await checkUrl(appConfig.urls.recette);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Health check prod
|
|
||||||
if (appConfig.urls.prod) {
|
|
||||||
result.health.prod = await checkUrl(appConfig.urls.prod);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Déterminer le statut global
|
|
||||||
if (!containerInfo || !containerInfo.running) {
|
|
||||||
result.status = 'offline';
|
|
||||||
} else if (result.health.recette && result.health.recette.online) {
|
|
||||||
result.status = 'online';
|
|
||||||
} else if (containerInfo.running) {
|
|
||||||
result.status = 'error';
|
|
||||||
} else {
|
|
||||||
result.status = 'offline';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Stocker le résultat
|
|
||||||
appStatuses.set(appConfig.id, result);
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Lancer les health checks pour toutes les apps
|
|
||||||
*/
|
|
||||||
async function checkAllApps() {
|
|
||||||
const results = [];
|
|
||||||
for (const app of config.apps) {
|
|
||||||
const result = await checkApp(app);
|
|
||||||
results.push(result);
|
|
||||||
}
|
|
||||||
return results;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Ajouter un log de déploiement (retourne l'entrée créée avec son id)
|
|
||||||
*/
|
|
||||||
function addDeploymentLog(appId, log) {
|
|
||||||
const entry = {
|
|
||||||
id: Date.now().toString(),
|
|
||||||
appId,
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
...log,
|
|
||||||
};
|
|
||||||
deploymentLogs.unshift(entry);
|
|
||||||
if (deploymentLogs.length > MAX_DEPLOYMENT_LOGS) {
|
|
||||||
deploymentLogs.pop();
|
|
||||||
}
|
|
||||||
return entry;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Mettre à jour un log de déploiement existant par son id
|
|
||||||
* Permet de passer de "running" à "success" ou "failed" sans créer une nouvelle entrée
|
|
||||||
*/
|
|
||||||
function updateDeploymentLog(entryId, updates) {
|
|
||||||
const entry = deploymentLogs.find((l) => l.id === entryId);
|
|
||||||
if (entry) {
|
|
||||||
Object.assign(entry, updates, { updatedAt: new Date().toISOString() });
|
|
||||||
return entry;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Récupérer les logs de déploiement
|
|
||||||
*/
|
|
||||||
function getDeploymentLogs(appId = null) {
|
|
||||||
if (appId) {
|
|
||||||
return deploymentLogs.filter((l) => l.appId === appId);
|
|
||||||
}
|
|
||||||
return deploymentLogs;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Récupérer le statut d'une app
|
|
||||||
*/
|
|
||||||
function getAppStatus(appId) {
|
|
||||||
return appStatuses.get(appId) || null;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Récupérer tous les statuts
|
|
||||||
*/
|
|
||||||
function getAllStatuses() {
|
|
||||||
return Array.from(appStatuses.values());
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
checkUrl,
|
|
||||||
checkApp,
|
|
||||||
checkAllApps,
|
|
||||||
addDeploymentLog,
|
|
||||||
updateDeploymentLog,
|
|
||||||
getDeploymentLogs,
|
|
||||||
getAppStatus,
|
|
||||||
getAllStatuses,
|
|
||||||
cleanupOrphanedDeployments,
|
|
||||||
appStatuses,
|
|
||||||
giteaCommits,
|
|
||||||
};
|
|
||||||
@@ -1,136 +0,0 @@
|
|||||||
const express = require('express');
|
|
||||||
const cors = require('cors');
|
|
||||||
const helmet = require('helmet');
|
|
||||||
const cookieParser = require('cookie-parser');
|
|
||||||
const morgan = require('morgan');
|
|
||||||
const path = require('path');
|
|
||||||
const cron = require('node-cron');
|
|
||||||
const http = require('http');
|
|
||||||
const WebSocket = require('ws');
|
|
||||||
|
|
||||||
const config = require('./config');
|
|
||||||
const { initAuth } = require('./auth');
|
|
||||||
const routes = require('./routes');
|
|
||||||
const webhookRoutes = require('./webhook');
|
|
||||||
const { checkAllApps, getAllStatuses } = require('./healthcheck');
|
|
||||||
const { getCommits } = require('./gitea');
|
|
||||||
const { initDynamicApps } = require('./app-creator');
|
|
||||||
const { initSSHWebSocket } = require('./ssh');
|
|
||||||
|
|
||||||
const app = express();
|
|
||||||
const server = http.createServer(app);
|
|
||||||
|
|
||||||
// WebSocket server pour les mises à jour en temps réel
|
|
||||||
const wss = new WebSocket.Server({ server, path: '/ws' });
|
|
||||||
initSSHWebSocket(server);
|
|
||||||
|
|
||||||
// Middleware
|
|
||||||
app.use(helmet({
|
|
||||||
contentSecurityPolicy: false,
|
|
||||||
crossOriginEmbedderPolicy: false,
|
|
||||||
}));
|
|
||||||
app.use(cors({
|
|
||||||
origin: true,
|
|
||||||
credentials: true,
|
|
||||||
}));
|
|
||||||
app.use(express.json({ limit: '50mb' }));
|
|
||||||
app.use(express.urlencoded({ extended: true, limit: '50mb' }));
|
|
||||||
app.use(cookieParser());
|
|
||||||
app.use(morgan('combined'));
|
|
||||||
|
|
||||||
// Route webhook montée en premier avec raw body pour la vérification HMAC
|
|
||||||
app.use('/api/webhook', express.raw({ type: 'application/json', limit: '10mb' }), (req, res, next) => {
|
|
||||||
if (req.body && Buffer.isBuffer(req.body)) {
|
|
||||||
req.rawBody = req.body;
|
|
||||||
try { req.body = JSON.parse(req.body.toString()); } catch(e) { req.body = {}; }
|
|
||||||
}
|
|
||||||
next();
|
|
||||||
}, webhookRoutes);
|
|
||||||
// API routes
|
|
||||||
app.use('/api', routes);
|
|
||||||
|
|
||||||
// Servir le frontend en production
|
|
||||||
const frontendPath = path.join(__dirname, '../../frontend/dist');
|
|
||||||
app.use(express.static(frontendPath));
|
|
||||||
|
|
||||||
// SPA fallback
|
|
||||||
app.get('*', (req, res) => {
|
|
||||||
if (!req.path.startsWith('/api') && !req.path.startsWith('/ws')) {
|
|
||||||
res.sendFile(path.join(frontendPath, 'index.html'));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Broadcast WebSocket message
|
|
||||||
global.wsBroadcast = broadcast;
|
|
||||||
function broadcast(data) {
|
|
||||||
const message = JSON.stringify(data);
|
|
||||||
wss.clients.forEach((client) => {
|
|
||||||
if (client.readyState === WebSocket.OPEN) {
|
|
||||||
client.send(message);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Health check périodique
|
|
||||||
async function runHealthChecks() {
|
|
||||||
try {
|
|
||||||
const results = await checkAllApps();
|
|
||||||
broadcast({ type: 'health_update', data: results });
|
|
||||||
|
|
||||||
// Vérifier les nouveaux commits Gitea
|
|
||||||
for (const appConfig of config.apps) {
|
|
||||||
try {
|
|
||||||
const commits = await getCommits(appConfig.giteaOwner, appConfig.giteaRepo, 5);
|
|
||||||
if (commits.length > 0) {
|
|
||||||
broadcast({
|
|
||||||
type: 'gitea_commits',
|
|
||||||
data: { appId: appConfig.id, commits },
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
// Ignorer les erreurs Gitea
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur health check:', err.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Démarrage
|
|
||||||
async function start() {
|
|
||||||
await initAuth();
|
|
||||||
|
|
||||||
// Charger les applications dynamiques
|
|
||||||
initDynamicApps();
|
|
||||||
|
|
||||||
// Premier health check
|
|
||||||
setTimeout(runHealthChecks, 2000);
|
|
||||||
|
|
||||||
// Health check toutes les 30 secondes
|
|
||||||
setInterval(runHealthChecks, config.healthCheckInterval);
|
|
||||||
|
|
||||||
server.listen(config.port, '0.0.0.0', () => {
|
|
||||||
console.log(`Manus Dashboard Backend démarré sur le port ${config.port}`);
|
|
||||||
console.log(`Frontend servi depuis: ${frontendPath}`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// WebSocket connection handler
|
|
||||||
wss.on('connection', (ws) => {
|
|
||||||
console.log('Nouvelle connexion WebSocket');
|
|
||||||
|
|
||||||
// Envoyer les statuts actuels
|
|
||||||
const statuses = getAllStatuses();
|
|
||||||
if (statuses.length > 0) {
|
|
||||||
ws.send(JSON.stringify({ type: 'health_update', data: statuses }));
|
|
||||||
}
|
|
||||||
|
|
||||||
ws.on('close', () => {
|
|
||||||
console.log('Connexion WebSocket fermée');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
start().catch((err) => {
|
|
||||||
console.error('Erreur au démarrage:', err);
|
|
||||||
process.exit(1);
|
|
||||||
});
|
|
||||||
@@ -1,601 +0,0 @@
|
|||||||
const express = require('express');
|
|
||||||
const multer = require('multer');
|
|
||||||
const path = require('path');
|
|
||||||
const fs = require('fs');
|
|
||||||
const { authenticate, authMiddleware } = require('./auth');
|
|
||||||
const { docker, getContainerInfo, getContainerLogs, listContainers, redeployApp, gitPull, startContainer, stopContainer, restartContainer, getServerMetrics } = require('./docker');
|
|
||||||
const { getRepo, getCommits, getBranches, listRepos } = require('./gitea');
|
|
||||||
const { checkAllApps, addDeploymentLog, updateDeploymentLog, getDeploymentLogs, getAllStatuses, getAppStatus, cleanupOrphanedDeployments } = require('./healthcheck');
|
|
||||||
const { createApplication, getAvailableStacks, initDynamicApps } = require('./app-creator');
|
|
||||||
const config = require('./config');
|
|
||||||
|
|
||||||
// Nettoyer les déploiements orphelins au démarrage (entrées "running" restantes d'un crash précédent)
|
|
||||||
cleanupOrphanedDeployments();
|
|
||||||
|
|
||||||
const router = express.Router();
|
|
||||||
|
|
||||||
// Configuration multer pour l'upload de fichiers ZIP
|
|
||||||
const uploadDir = '/tmp/dashboard-uploads';
|
|
||||||
if (!fs.existsSync(uploadDir)) {
|
|
||||||
fs.mkdirSync(uploadDir, { recursive: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
const upload = multer({
|
|
||||||
dest: uploadDir,
|
|
||||||
limits: { fileSize: 500 * 1024 * 1024 }, // 500MB max
|
|
||||||
fileFilter: (req, file, cb) => {
|
|
||||||
if (file.mimetype === 'application/zip' ||
|
|
||||||
file.mimetype === 'application/x-zip-compressed' ||
|
|
||||||
file.mimetype === 'application/octet-stream' ||
|
|
||||||
file.originalname.endsWith('.zip')) {
|
|
||||||
cb(null, true);
|
|
||||||
} else {
|
|
||||||
cb(new Error('Seuls les fichiers ZIP sont acceptés'), false);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// ============ AUTH ROUTES ============
|
|
||||||
|
|
||||||
router.post('/auth/login', async (req, res) => {
|
|
||||||
try {
|
|
||||||
const { username, password } = req.body;
|
|
||||||
if (!username || !password) {
|
|
||||||
return res.status(400).json({ error: 'Nom d\'utilisateur et mot de passe requis' });
|
|
||||||
}
|
|
||||||
const token = await authenticate(username, password);
|
|
||||||
if (!token) {
|
|
||||||
return res.status(401).json({ error: 'Identifiants invalides' });
|
|
||||||
}
|
|
||||||
// Set cookie
|
|
||||||
res.cookie('dashboard_token', token, {
|
|
||||||
httpOnly: true,
|
|
||||||
secure: true,
|
|
||||||
sameSite: 'strict',
|
|
||||||
maxAge: 24 * 60 * 60 * 1000, // 24h
|
|
||||||
});
|
|
||||||
res.json({ token, username });
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
router.post('/auth/logout', (req, res) => {
|
|
||||||
res.clearCookie('dashboard_token');
|
|
||||||
res.json({ message: 'Déconnecté' });
|
|
||||||
});
|
|
||||||
|
|
||||||
router.get('/auth/me', authMiddleware, (req, res) => {
|
|
||||||
res.json({ username: req.user.username, role: req.user.role });
|
|
||||||
});
|
|
||||||
|
|
||||||
// ============ APPS ROUTES ============
|
|
||||||
|
|
||||||
// Liste des applications avec leur statut
|
|
||||||
router.get('/apps', authMiddleware, async (req, res) => {
|
|
||||||
try {
|
|
||||||
const statuses = getAllStatuses();
|
|
||||||
if (statuses.length === 0) {
|
|
||||||
// Première requête, lancer un check
|
|
||||||
const results = await checkAllApps();
|
|
||||||
return res.json(results);
|
|
||||||
}
|
|
||||||
res.json(statuses);
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Détail d'une application
|
|
||||||
router.get('/apps/:id', authMiddleware, async (req, res) => {
|
|
||||||
try {
|
|
||||||
const appConfig = config.apps.find((a) => a.id === req.params.id);
|
|
||||||
if (!appConfig) {
|
|
||||||
return res.status(404).json({ error: 'Application non trouvée' });
|
|
||||||
}
|
|
||||||
|
|
||||||
const status = getAppStatus(appConfig.id);
|
|
||||||
const containerInfo = await getContainerInfo(appConfig.containerName);
|
|
||||||
|
|
||||||
// Récupérer les infos Gitea
|
|
||||||
let giteaInfo = null;
|
|
||||||
let commits = [];
|
|
||||||
try {
|
|
||||||
giteaInfo = await getRepo(appConfig.giteaOwner, appConfig.giteaRepo);
|
|
||||||
commits = await getCommits(appConfig.giteaOwner, appConfig.giteaRepo, 10);
|
|
||||||
} catch (e) {
|
|
||||||
// Gitea peut ne pas être disponible
|
|
||||||
}
|
|
||||||
|
|
||||||
res.json({
|
|
||||||
...status,
|
|
||||||
container: containerInfo,
|
|
||||||
gitea: giteaInfo
|
|
||||||
? {
|
|
||||||
fullName: giteaInfo.full_name,
|
|
||||||
description: giteaInfo.description,
|
|
||||||
defaultBranch: giteaInfo.default_branch,
|
|
||||||
updatedAt: giteaInfo.updated_at,
|
|
||||||
cloneUrl: giteaInfo.clone_url,
|
|
||||||
htmlUrl: giteaInfo.html_url,
|
|
||||||
}
|
|
||||||
: null,
|
|
||||||
commits,
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Forcer un health check
|
|
||||||
router.post('/apps/:id/check', authMiddleware, async (req, res) => {
|
|
||||||
try {
|
|
||||||
const results = await checkAllApps();
|
|
||||||
const result = results.find((r) => r.id === req.params.id);
|
|
||||||
res.json(result || { error: 'Application non trouvée' });
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Verrou anti-concurrence par application
|
|
||||||
const deployLocks = new Map();
|
|
||||||
const DEPLOY_TIMEOUT_MS = 10 * 60 * 1000; // 10 minutes max
|
|
||||||
|
|
||||||
// Nettoyage automatique des verrous bloqués toutes les minutes
|
|
||||||
setInterval(() => {
|
|
||||||
const now = Date.now();
|
|
||||||
for (const [appId, lockTime] of deployLocks.entries()) {
|
|
||||||
if (now - lockTime > DEPLOY_TIMEOUT_MS) {
|
|
||||||
deployLocks.delete(appId);
|
|
||||||
const logs = getDeploymentLogs(appId);
|
|
||||||
logs.filter(l => l.status === 'running').forEach(l => {
|
|
||||||
l.status = 'failed';
|
|
||||||
l.message = 'Déploiement interrompu automatiquement (timeout 10 min)';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, 60 * 1000);
|
|
||||||
|
|
||||||
// Redéployer une application
|
|
||||||
router.post('/apps/:id/deploy', authMiddleware, async (req, res) => {
|
|
||||||
try {
|
|
||||||
const appConfig = config.apps.find((a) => a.id === req.params.id);
|
|
||||||
if (!appConfig) {
|
|
||||||
return res.status(404).json({ error: 'Application non trouvée' });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vérifier si un déploiement est déjà en cours pour cette app
|
|
||||||
if (deployLocks.has(appConfig.id)) {
|
|
||||||
const lockAge = Math.round((Date.now() - deployLocks.get(appConfig.id)) / 1000);
|
|
||||||
return res.status(409).json({
|
|
||||||
error: `Un déploiement est déjà en cours pour ${appConfig.name} (depuis ${lockAge}s)`,
|
|
||||||
status: 'running'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Poser le verrou
|
|
||||||
deployLocks.set(appConfig.id, Date.now());
|
|
||||||
|
|
||||||
// Ajouter un log de début et récupérer son id pour le mettre à jour plus tard
|
|
||||||
const deployEntry = addDeploymentLog(appConfig.id, {
|
|
||||||
status: 'running',
|
|
||||||
message: `Déploiement de ${appConfig.name} en cours...`,
|
|
||||||
logs: '',
|
|
||||||
user: req.user.username,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Lancer le redéploiement en arrière-plan
|
|
||||||
res.json({ message: `Redéploiement de ${appConfig.name} lancé`, status: 'running' });
|
|
||||||
|
|
||||||
// Timeout de sécurité : si le déploiement dépasse 10 min, on le marque failed
|
|
||||||
const timeoutHandle = setTimeout(() => {
|
|
||||||
if (deployLocks.has(appConfig.id)) {
|
|
||||||
deployLocks.delete(appConfig.id);
|
|
||||||
updateDeploymentLog(deployEntry.id, {
|
|
||||||
status: 'failed',
|
|
||||||
message: `Déploiement de ${appConfig.name} interrompu (timeout 10 min)`,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, DEPLOY_TIMEOUT_MS);
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Exécuter le redéploiement
|
|
||||||
const result = await redeployApp(appConfig);
|
|
||||||
clearTimeout(timeoutHandle);
|
|
||||||
|
|
||||||
// Mettre à jour l'entrée existante (pas de doublon "running" + "success")
|
|
||||||
updateDeploymentLog(deployEntry.id, {
|
|
||||||
status: result.success ? 'success' : 'failed',
|
|
||||||
message: result.success
|
|
||||||
? `Redéploiement de ${appConfig.name} réussi en ${result.duration}s`
|
|
||||||
: `Redéploiement de ${appConfig.name} échoué`,
|
|
||||||
logs: result.logs,
|
|
||||||
duration: result.duration,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Relancer un health check après le déploiement
|
|
||||||
setTimeout(() => checkAllApps(), 5000);
|
|
||||||
} finally {
|
|
||||||
// Toujours libérer le verrou
|
|
||||||
deployLocks.delete(appConfig.id);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
deployLocks.delete(req.params.id);
|
|
||||||
addDeploymentLog(req.params.id, {
|
|
||||||
status: 'failed',
|
|
||||||
message: `Erreur: ${err.message}`,
|
|
||||||
logs: '',
|
|
||||||
user: req.user.username,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Logs d'un conteneur
|
|
||||||
router.get('/apps/:id/logs', authMiddleware, async (req, res) => {
|
|
||||||
try {
|
|
||||||
const appConfig = config.apps.find((a) => a.id === req.params.id);
|
|
||||||
if (!appConfig) {
|
|
||||||
return res.status(404).json({ error: 'Application non trouvée' });
|
|
||||||
}
|
|
||||||
const tail = parseInt(req.query.tail) || 100;
|
|
||||||
const logs = await getContainerLogs(appConfig.containerName, tail);
|
|
||||||
res.json({ logs });
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// ============ CREATE APP ROUTE ============
|
|
||||||
|
|
||||||
// Récupérer les stacks disponibles
|
|
||||||
router.get('/apps-config/stacks', authMiddleware, (req, res) => {
|
|
||||||
res.json(getAvailableStacks());
|
|
||||||
});
|
|
||||||
|
|
||||||
// Créer une nouvelle application
|
|
||||||
router.post('/apps-config/create', authMiddleware, upload.single('zipFile'), async (req, res) => {
|
|
||||||
try {
|
|
||||||
const { name, description, subdomain, stack, port, needsDb, dbType, sourceType, giteaRepoUrl } = req.body;
|
|
||||||
|
|
||||||
// Validation
|
|
||||||
if (!name || !subdomain || !stack || !sourceType) {
|
|
||||||
return res.status(400).json({
|
|
||||||
error: 'Champs requis manquants: name, subdomain, stack, sourceType',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vérifier que le subdomain est valide
|
|
||||||
const subdomainRegex = /^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/;
|
|
||||||
if (!subdomainRegex.test(subdomain)) {
|
|
||||||
return res.status(400).json({
|
|
||||||
error: 'Le sous-domaine ne peut contenir que des lettres minuscules, chiffres et tirets',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vérifier que l'app n'existe pas déjà
|
|
||||||
const existingApp = config.apps.find((a) => a.id === subdomain);
|
|
||||||
if (existingApp) {
|
|
||||||
return res.status(409).json({
|
|
||||||
error: `Une application avec l'identifiant "${subdomain}" existe déjà`,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vérifier le fichier ZIP si sourceType === 'zip'
|
|
||||||
if (sourceType === 'zip' && !req.file) {
|
|
||||||
return res.status(400).json({
|
|
||||||
error: 'Un fichier ZIP est requis pour le type de source "zip"',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vérifier l'URL Gitea si sourceType === 'gitea'
|
|
||||||
if (sourceType === 'gitea' && !giteaRepoUrl) {
|
|
||||||
return res.status(400).json({
|
|
||||||
error: 'L\'URL du dépôt Gitea est requise pour le type de source "gitea"',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Log de début de création et récupérer l'id pour mise à jour ultérieure
|
|
||||||
const logLines = [];
|
|
||||||
const createEntry = addDeploymentLog(subdomain, {
|
|
||||||
status: 'running',
|
|
||||||
message: `Création de l'application ${name} en cours...`,
|
|
||||||
logs: '',
|
|
||||||
user: req.user.username,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Répondre immédiatement
|
|
||||||
res.json({
|
|
||||||
message: `Création de l'application ${name} lancée`,
|
|
||||||
status: 'running',
|
|
||||||
appId: subdomain,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Lancer la création en arrière-plan
|
|
||||||
try {
|
|
||||||
const result = await createApplication(
|
|
||||||
{
|
|
||||||
name,
|
|
||||||
description,
|
|
||||||
subdomain,
|
|
||||||
stack,
|
|
||||||
port: port ? parseInt(port) : null,
|
|
||||||
needsDb: needsDb === 'true' || needsDb === true,
|
|
||||||
dbType: dbType || 'mysql',
|
|
||||||
sourceType,
|
|
||||||
giteaRepoUrl,
|
|
||||||
zipFilePath: req.file ? req.file.path : null,
|
|
||||||
},
|
|
||||||
(line) => logLines.push(line)
|
|
||||||
);
|
|
||||||
|
|
||||||
updateDeploymentLog(createEntry.id, {
|
|
||||||
status: 'success',
|
|
||||||
message: `Application ${name} créée et déployée avec succès`,
|
|
||||||
logs: logLines.join('\n'),
|
|
||||||
});
|
|
||||||
|
|
||||||
// Relancer un health check
|
|
||||||
setTimeout(() => checkAllApps(), 10000);
|
|
||||||
} catch (createErr) {
|
|
||||||
updateDeploymentLog(createEntry.id, {
|
|
||||||
status: 'failed',
|
|
||||||
message: `Création de ${name} échouée: ${createErr.message}`,
|
|
||||||
logs: logLines.join('\n'),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// ============ DEPLOYMENT LOGS ============
|
|
||||||
|
|
||||||
router.get('/deployments', authMiddleware, (req, res) => {
|
|
||||||
const appId = req.query.appId || null;
|
|
||||||
res.json(getDeploymentLogs(appId));
|
|
||||||
});
|
|
||||||
|
|
||||||
// ============ GITEA ROUTES ============
|
|
||||||
|
|
||||||
router.get('/gitea/repos', authMiddleware, async (req, res) => {
|
|
||||||
try {
|
|
||||||
const repos = await listRepos();
|
|
||||||
res.json(
|
|
||||||
repos.map((r) => ({
|
|
||||||
id: r.id,
|
|
||||||
name: r.name,
|
|
||||||
fullName: r.full_name,
|
|
||||||
description: r.description,
|
|
||||||
private: r.private,
|
|
||||||
htmlUrl: r.html_url,
|
|
||||||
cloneUrl: r.clone_url,
|
|
||||||
updatedAt: r.updated_at,
|
|
||||||
language: r.language,
|
|
||||||
size: r.size,
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
router.get('/gitea/repos/:owner/:repo/commits', authMiddleware, async (req, res) => {
|
|
||||||
try {
|
|
||||||
const commits = await getCommits(req.params.owner, req.params.repo, 20);
|
|
||||||
res.json(commits);
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
router.get('/gitea/repos/:owner/:repo/branches', authMiddleware, async (req, res) => {
|
|
||||||
try {
|
|
||||||
const branches = await getBranches(req.params.owner, req.params.repo);
|
|
||||||
res.json(branches);
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// ============ PUBLIC STATUS ROUTE (sans authentification) ============
|
|
||||||
// Utilisé par le portail applicatif pour griser les tuiles des apps arrêtées
|
|
||||||
router.get('/public/status', async (req, res) => {
|
|
||||||
try {
|
|
||||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
|
||||||
res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
|
|
||||||
const statuses = getAllStatuses();
|
|
||||||
const publicStatus = statuses.map((app) => ({
|
|
||||||
id: app.id,
|
|
||||||
name: app.name,
|
|
||||||
status: app.status, // 'online' | 'offline' | 'error' | 'unknown'
|
|
||||||
containerRunning: app.container ? app.container.running : false,
|
|
||||||
}));
|
|
||||||
res.json(publicStatus);
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// ============ PUBLIC APPS ROUTE (sans authentification) ============
|
|
||||||
// Utilisé par le portail applicatif pour construire les tuiles dynamiquement
|
|
||||||
// Ne bloque jamais : retourne les apps avec status 'unknown' si les health checks ne sont pas encore disponibles
|
|
||||||
router.get('/public/apps', (req, res) => {
|
|
||||||
try {
|
|
||||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
|
||||||
res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
|
|
||||||
// getAllStatuses() retourne un tableau vide si aucun check n'a encore été effectué
|
|
||||||
// On ne déclenche PAS checkAllApps() ici pour éviter de bloquer la réponse
|
|
||||||
const statuses = getAllStatuses();
|
|
||||||
const publicApps = config.apps
|
|
||||||
.filter((a) => a.category !== 'INFRA') // Exclure les apps infra (portail, dashboard)
|
|
||||||
.map((a) => {
|
|
||||||
const status = statuses.find((s) => s.id === a.id);
|
|
||||||
return {
|
|
||||||
id: a.id,
|
|
||||||
name: a.name,
|
|
||||||
category: a.category || 'SANTINOVA',
|
|
||||||
image: a.image || ('images/' + a.id + '.png'),
|
|
||||||
urls: a.urls || {},
|
|
||||||
status: status ? status.status : 'unknown',
|
|
||||||
containerRunning: status && status.container ? status.container.running : false,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
res.json(publicApps);
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// ============ DOCKER ROUTES ============
|
|
||||||
|
|
||||||
router.get('/docker/containers', authMiddleware, async (req, res) => {
|
|
||||||
try {
|
|
||||||
const containers = await listContainers();
|
|
||||||
res.json(containers);
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// ============ SYSTEM INFO ============
|
|
||||||
|
|
||||||
router.get('/system/info', authMiddleware, async (req, res) => {
|
|
||||||
try {
|
|
||||||
const containers = await listContainers();
|
|
||||||
res.json({
|
|
||||||
totalApps: config.apps.length,
|
|
||||||
totalContainers: containers.length,
|
|
||||||
runningContainers: containers.filter((c) => c.state === 'running').length,
|
|
||||||
giteaUrl: config.gitea.url,
|
|
||||||
serverTime: new Date().toISOString(),
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// ============ CONTAINER CONTROL (start/stop/restart) ============
|
|
||||||
router.post('/apps/:id/start', authMiddleware, async (req, res) => {
|
|
||||||
try {
|
|
||||||
const app = config.apps.find((a) => a.id === req.params.id);
|
|
||||||
if (!app) return res.status(404).json({ error: 'Application non trouvée' });
|
|
||||||
const containerName = app.containerName || app.id;
|
|
||||||
const result = await startContainer(containerName, app.id);
|
|
||||||
res.json(result);
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
router.post('/apps/:id/stop', authMiddleware, async (req, res) => {
|
|
||||||
try {
|
|
||||||
const app = config.apps.find((a) => a.id === req.params.id);
|
|
||||||
if (!app) return res.status(404).json({ error: 'Application non trouvée' });
|
|
||||||
const containerName = app.containerName || app.id;
|
|
||||||
const result = await stopContainer(containerName);
|
|
||||||
res.json(result);
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
router.post('/apps/:id/restart', authMiddleware, async (req, res) => {
|
|
||||||
try {
|
|
||||||
const app = config.apps.find((a) => a.id === req.params.id);
|
|
||||||
if (!app) return res.status(404).json({ error: 'Application non trouvée' });
|
|
||||||
const containerName = app.containerName || app.id;
|
|
||||||
const result = await restartContainer(containerName);
|
|
||||||
res.json(result);
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// ============ SERVER METRICS ============
|
|
||||||
router.get('/system/metrics', authMiddleware, async (req, res) => {
|
|
||||||
try {
|
|
||||||
const metrics = await getServerMetrics();
|
|
||||||
res.json(metrics);
|
|
||||||
} catch (err) {
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
module.exports = router;
|
|
||||||
|
|
||||||
// ===== INVENTAIRE DES APPLICATIONS =====
|
|
||||||
const { exec } = require('child_process');
|
|
||||||
const GITEA_RECETTE_INTERNAL = process.env.GITEA_RECETTE_URL || 'http://gitea:3000';
|
|
||||||
const GITEA_RECETTE_PUBLIC = process.env.GITEA_RECETTE_PUBLIC_URL || 'https://git.recette.santinova-soft.org';
|
|
||||||
const GITEA_PROD_EXTERNAL = 'https://git.santinova-soft.org';
|
|
||||||
const GITEA_USER_INV = process.env.GITEA_USERNAME || 'manus-admin';
|
|
||||||
const GITEA_PASS_REC = process.env.GITEA_PASSWORD || 'Itinova69!';
|
|
||||||
const GITEA_PASS_PRD = process.env.GITEA_PASSWORD_PROD || 'ManusGitea2026!';
|
|
||||||
const GITEA_TOKEN_REC = process.env.GITEA_RECETTE_TOKEN || process.env.GITEA_TOKEN || null;
|
|
||||||
|
|
||||||
// INVENTORY_APPS est généré dynamiquement depuis config.apps (lui-même alimenté par la découverte des app.json)
|
|
||||||
function getInventoryApps() {
|
|
||||||
return config.apps.map((a) => ({
|
|
||||||
id: a.id,
|
|
||||||
name: a.name,
|
|
||||||
repoName: a.giteaRepo || a.id,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
function curlGitea(baseUrl, owner, repo, pass, publicBaseUrl, token) {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
const authHeader = token
|
|
||||||
? `-H "Authorization: token ${token}"`
|
|
||||||
: `-u "${GITEA_USER_INV}:${pass}"`;
|
|
||||||
const cmd = `curl -sk --max-time 6 ${authHeader} "${baseUrl}/api/v1/repos/${owner}/${repo}"`;
|
|
||||||
exec(cmd, { timeout: 7000 }, (err, stdout) => {
|
|
||||||
if (err || !stdout) return resolve({ present: false, url: null, version: null });
|
|
||||||
try {
|
|
||||||
const data = JSON.parse(stdout);
|
|
||||||
if (!data.id) return resolve({ present: false, url: null, version: null });
|
|
||||||
// Récupérer le dernier commit
|
|
||||||
const cmd2 = `curl -sk --max-time 6 ${authHeader} "${baseUrl}/api/v1/repos/${owner}/${repo}/commits?limit=1"`;
|
|
||||||
exec(cmd2, { timeout: 7000 }, (err2, stdout2) => {
|
|
||||||
let version = null;
|
|
||||||
try {
|
|
||||||
const commits = JSON.parse(stdout2 || '[]');
|
|
||||||
if (commits.length > 0) {
|
|
||||||
const c = commits[0];
|
|
||||||
const sha = c.sha ? c.sha.substring(0, 7) : null;
|
|
||||||
const date = c.commit && c.commit.author && c.commit.author.date
|
|
||||||
? new Date(c.commit.author.date).toLocaleDateString('fr-FR') : null;
|
|
||||||
version = sha && date ? `${sha} (${date})` : sha;
|
|
||||||
}
|
|
||||||
} catch(e) {}
|
|
||||||
const displayUrl = publicBaseUrl || baseUrl;
|
|
||||||
resolve({ present: true, url: `${displayUrl}/${owner}/${repo}`, version });
|
|
||||||
});
|
|
||||||
} catch(e) {
|
|
||||||
resolve({ present: false, url: null, version: null });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
router.get('/inventory', authMiddleware, async (req, res) => {
|
|
||||||
try {
|
|
||||||
const owner = GITEA_USER_INV;
|
|
||||||
const INVENTORY_APPS = getInventoryApps();
|
|
||||||
const results = await Promise.all(
|
|
||||||
INVENTORY_APPS.map(async (app) => {
|
|
||||||
const [repoRecette, repoProd] = await Promise.all([
|
|
||||||
curlGitea(GITEA_RECETTE_INTERNAL, owner, app.repoName, GITEA_PASS_REC, GITEA_RECETTE_PUBLIC, GITEA_TOKEN_REC),
|
|
||||||
curlGitea(GITEA_PROD_EXTERNAL, owner, app.repoName, GITEA_PASS_PRD),
|
|
||||||
]);
|
|
||||||
return { ...app, repoRecette, repoProd };
|
|
||||||
})
|
|
||||||
);
|
|
||||||
res.json(results);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur /inventory:', err.message);
|
|
||||||
res.status(500).json({ error: err.message });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
;
|
|
||||||
@@ -1,179 +0,0 @@
|
|||||||
/**
|
|
||||||
* Module SSH Terminal - Gestion des connexions SSH via WebSocket
|
|
||||||
* Utilise la bibliothèque ssh2 pour établir des connexions SSH
|
|
||||||
*/
|
|
||||||
const { Client } = require('ssh2');
|
|
||||||
const WebSocket = require('ws');
|
|
||||||
const jwt = require('jsonwebtoken');
|
|
||||||
const config = require('./config');
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialise le serveur WebSocket SSH sur /ws-ssh
|
|
||||||
* @param {http.Server} server - Le serveur HTTP Express
|
|
||||||
*/
|
|
||||||
function initSSHWebSocket(server) {
|
|
||||||
const wssSsh = new WebSocket.Server({ server, path: '/ws-ssh' });
|
|
||||||
|
|
||||||
wssSsh.on('connection', (ws, req) => {
|
|
||||||
// Vérifier l'authentification via le token dans l'URL
|
|
||||||
const url = new URL(req.url, 'http://localhost');
|
|
||||||
const token = url.searchParams.get('token');
|
|
||||||
|
|
||||||
if (!token) {
|
|
||||||
ws.send(JSON.stringify({ type: 'error', message: 'Token manquant' }));
|
|
||||||
ws.close();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
jwt.verify(token, config.jwtSecret);
|
|
||||||
} catch (err) {
|
|
||||||
ws.send(JSON.stringify({ type: 'error', message: 'Token invalide' }));
|
|
||||||
ws.close();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Nouvelle connexion WebSocket SSH');
|
|
||||||
|
|
||||||
let sshClient = null;
|
|
||||||
let sshStream = null;
|
|
||||||
let connected = false;
|
|
||||||
|
|
||||||
ws.on('message', (data) => {
|
|
||||||
try {
|
|
||||||
const msg = JSON.parse(data.toString());
|
|
||||||
|
|
||||||
switch (msg.type) {
|
|
||||||
case 'connect':
|
|
||||||
// Établir la connexion SSH
|
|
||||||
handleConnect(ws, msg, (client, stream) => {
|
|
||||||
sshClient = client;
|
|
||||||
sshStream = stream;
|
|
||||||
connected = true;
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'input':
|
|
||||||
// Envoyer des données au terminal SSH
|
|
||||||
if (sshStream && connected) {
|
|
||||||
sshStream.write(msg.data);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'resize':
|
|
||||||
// Redimensionner le terminal
|
|
||||||
if (sshStream && connected) {
|
|
||||||
sshStream.setWindow(msg.rows, msg.cols, 0, 0);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'disconnect':
|
|
||||||
// Fermer la connexion SSH
|
|
||||||
if (sshClient) {
|
|
||||||
sshClient.end();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
console.warn('Type de message SSH inconnu:', msg.type);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur parsing message SSH:', err.message);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
ws.on('close', () => {
|
|
||||||
console.log('Connexion WebSocket SSH fermée');
|
|
||||||
if (sshClient) {
|
|
||||||
sshClient.end();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
ws.on('error', (err) => {
|
|
||||||
console.error('Erreur WebSocket SSH:', err.message);
|
|
||||||
if (sshClient) {
|
|
||||||
sshClient.end();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('Serveur WebSocket SSH initialisé sur /ws-ssh');
|
|
||||||
return wssSsh;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gère la connexion SSH
|
|
||||||
*/
|
|
||||||
function handleConnect(ws, msg, onConnected) {
|
|
||||||
const { host, port, username, password, privateKey } = msg;
|
|
||||||
|
|
||||||
if (!host || !username) {
|
|
||||||
ws.send(JSON.stringify({ type: 'error', message: 'Hôte et utilisateur requis' }));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const sshClient = new Client();
|
|
||||||
|
|
||||||
const connConfig = {
|
|
||||||
host: host,
|
|
||||||
port: port || 22,
|
|
||||||
username: username,
|
|
||||||
readyTimeout: 15000,
|
|
||||||
keepaliveInterval: 10000,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (privateKey) {
|
|
||||||
connConfig.privateKey = privateKey;
|
|
||||||
} else if (password) {
|
|
||||||
connConfig.password = password;
|
|
||||||
} else {
|
|
||||||
ws.send(JSON.stringify({ type: 'error', message: 'Mot de passe ou clé privée requis' }));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
ws.send(JSON.stringify({ type: 'status', message: `Connexion à ${username}@${host}:${port || 22}...` }));
|
|
||||||
|
|
||||||
sshClient.on('ready', () => {
|
|
||||||
ws.send(JSON.stringify({ type: 'connected', message: `Connecté à ${host}` }));
|
|
||||||
|
|
||||||
sshClient.shell({ term: 'xterm-256color', rows: 24, cols: 80 }, (err, stream) => {
|
|
||||||
if (err) {
|
|
||||||
ws.send(JSON.stringify({ type: 'error', message: `Erreur shell: ${err.message}` }));
|
|
||||||
sshClient.end();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
onConnected(sshClient, stream);
|
|
||||||
|
|
||||||
// Transmettre les données du terminal SSH vers le WebSocket
|
|
||||||
stream.on('data', (data) => {
|
|
||||||
if (ws.readyState === WebSocket.OPEN) {
|
|
||||||
ws.send(JSON.stringify({ type: 'output', data: data.toString('base64') }));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
stream.stderr.on('data', (data) => {
|
|
||||||
if (ws.readyState === WebSocket.OPEN) {
|
|
||||||
ws.send(JSON.stringify({ type: 'output', data: data.toString('base64') }));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
stream.on('close', () => {
|
|
||||||
ws.send(JSON.stringify({ type: 'disconnected', message: 'Session SSH terminée' }));
|
|
||||||
sshClient.end();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
sshClient.on('error', (err) => {
|
|
||||||
ws.send(JSON.stringify({ type: 'error', message: `Erreur SSH: ${err.message}` }));
|
|
||||||
});
|
|
||||||
|
|
||||||
sshClient.on('end', () => {
|
|
||||||
ws.send(JSON.stringify({ type: 'disconnected', message: 'Connexion SSH fermée' }));
|
|
||||||
});
|
|
||||||
|
|
||||||
sshClient.connect(connConfig);
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = { initSSHWebSocket };
|
|
||||||
@@ -1,143 +0,0 @@
|
|||||||
/**
|
|
||||||
* Manus Dashboard - Webhook Handler (CI/CD Gitea)
|
|
||||||
* Route : POST /api/webhook/gitea
|
|
||||||
* Écoute les événements push de Gitea et déclenche le déploiement automatique.
|
|
||||||
*/
|
|
||||||
const express = require('express');
|
|
||||||
const crypto = require('crypto');
|
|
||||||
const { exec } = require('child_process');
|
|
||||||
const path = require('path');
|
|
||||||
const fs = require('fs');
|
|
||||||
|
|
||||||
const router = express.Router();
|
|
||||||
|
|
||||||
const WEBHOOK_SECRET = process.env.WEBHOOK_SECRET || '';
|
|
||||||
const APPS_BASE_PATH = process.env.APPS_BASE_PATH || '/opt/manus-deploy/apps';
|
|
||||||
const DEPLOY_SCRIPT = '/opt/manus-deploy/scripts/deploy-app.sh';
|
|
||||||
const LOG_DIR = '/var/log/manus-deploy';
|
|
||||||
|
|
||||||
// Mapping dépôt Gitea -> nom du dossier application sur le serveur
|
|
||||||
const REPO_TO_APP_MAP = {
|
|
||||||
'itinova-contacts': 'itinova-contacts',
|
|
||||||
'itinova-podcasts': 'itinova-podcasts',
|
|
||||||
'veille-reglementaire': 'veille-reglementaire',
|
|
||||||
'itinova-vehicle-exchange': 'itinova-vehicle-exchange',
|
|
||||||
'manus-dashboard': 'manus-dashboard',
|
|
||||||
'itinova-budget-si': 'itinova-budget-si',
|
|
||||||
};
|
|
||||||
|
|
||||||
// Déploiements en cours (évite les doubles déclenchements)
|
|
||||||
const deployingApps = new Set();
|
|
||||||
|
|
||||||
function verifyGiteaSignature(req) {
|
|
||||||
if (!WEBHOOK_SECRET) {
|
|
||||||
console.warn('[Webhook] AVERTISSEMENT: WEBHOOK_SECRET non défini. Validation désactivée.');
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
const signature = req.headers['x-gitea-signature'] || req.headers['x-hub-signature-256'] || '';
|
|
||||||
console.log('[Webhook DEBUG] All headers:', JSON.stringify(Object.keys(req.headers)));
|
|
||||||
console.log('[Webhook DEBUG] x-gitea-signature:', req.headers['x-gitea-signature'] || 'ABSENT');
|
|
||||||
console.log('[Webhook DEBUG] rawBody available:', !!req.rawBody, 'length:', req.rawBody ? req.rawBody.length : 0);
|
|
||||||
// Utiliser rawBody si disponible (préservé avant express.json), sinon re-sérialiser
|
|
||||||
const bodyStr = req.rawBody ? req.rawBody.toString() : JSON.stringify(req.body);
|
|
||||||
const hmac = crypto.createHmac('sha256', WEBHOOK_SECRET).update(bodyStr).digest('hex');
|
|
||||||
const expected = `sha256=${hmac}`;
|
|
||||||
const received = signature.startsWith('sha256=') ? signature : `sha256=${signature}`;
|
|
||||||
try {
|
|
||||||
return crypto.timingSafeEqual(Buffer.from(expected), Buffer.from(received));
|
|
||||||
} catch {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function runDeploy(appName, branch, commitHash, committer, broadcast) {
|
|
||||||
if (deployingApps.has(appName)) {
|
|
||||||
console.log(`[Webhook] Déploiement déjà en cours pour ${appName}. Ignoré.`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
deployingApps.add(appName);
|
|
||||||
console.log(`[Webhook] Déclenchement déploiement: ${appName} (branch: ${branch}, commit: ${commitHash})`);
|
|
||||||
|
|
||||||
if (broadcast) {
|
|
||||||
broadcast({ type: 'deploy_started', data: { app: appName, commit: commitHash, branch, committer } });
|
|
||||||
}
|
|
||||||
|
|
||||||
const env = { ...process.env, APPS_BASE_PATH };
|
|
||||||
const cmd = `bash ${DEPLOY_SCRIPT} ${appName} recette`;
|
|
||||||
let output = '';
|
|
||||||
|
|
||||||
const child = exec(cmd, { env, timeout: 600000 });
|
|
||||||
child.stdout.on('data', (d) => { output += d; process.stdout.write(`[${appName}] ${d}`); });
|
|
||||||
child.stderr.on('data', (d) => { output += d; process.stderr.write(`[${appName}] ERR: ${d}`); });
|
|
||||||
|
|
||||||
child.on('close', (code) => {
|
|
||||||
deployingApps.delete(appName);
|
|
||||||
const status = code === 0 ? 'success' : 'failed';
|
|
||||||
console.log(`[Webhook] Déploiement ${status} pour ${appName} (exit: ${code})`);
|
|
||||||
if (broadcast) {
|
|
||||||
broadcast({ type: 'deploy_finished', data: { app: appName, status, exitCode: code } });
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
fs.mkdirSync(LOG_DIR, { recursive: true });
|
|
||||||
fs.writeFileSync(path.join(LOG_DIR, `${appName}-last-deploy.json`), JSON.stringify({
|
|
||||||
app: appName, branch, commit: commitHash, committer, status, exitCode: code,
|
|
||||||
timestamp: new Date().toISOString(), output: output.slice(-3000),
|
|
||||||
}, null, 2));
|
|
||||||
} catch (e) { console.error('[Webhook] Erreur sauvegarde statut:', e.message); }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// POST /api/webhook/gitea
|
|
||||||
router.post('/gitea', (req, res) => {
|
|
||||||
if (!verifyGiteaSignature(req)) {
|
|
||||||
console.warn('[Webhook] Signature invalide. Requête rejetée.');
|
|
||||||
return res.status(401).json({ error: 'Signature invalide' });
|
|
||||||
}
|
|
||||||
const event = req.headers['x-gitea-event'] || 'unknown';
|
|
||||||
if (event !== 'push') {
|
|
||||||
return res.status(200).json({ message: `Événement ${event} ignoré` });
|
|
||||||
}
|
|
||||||
const payload = req.body;
|
|
||||||
const repoName = payload?.repository?.name || '';
|
|
||||||
const branch = (payload?.ref || '').replace('refs/heads/', '');
|
|
||||||
const commitHash = (payload?.after || '').slice(0, 8) || 'unknown';
|
|
||||||
const committer = payload?.pusher?.login || payload?.pusher?.name || 'unknown';
|
|
||||||
|
|
||||||
console.log(`[Webhook] Push: repo=${repoName}, branch=${branch}, commit=${commitHash}, by=${committer}`);
|
|
||||||
|
|
||||||
const appName = REPO_TO_APP_MAP[repoName];
|
|
||||||
if (!appName) return res.status(200).json({ message: `Dépôt ${repoName} non configuré` });
|
|
||||||
if (branch !== 'main') return res.status(200).json({ message: `Branch ${branch} ignorée` });
|
|
||||||
|
|
||||||
res.status(202).json({ message: `Déploiement de ${appName} déclenché`, commit: commitHash, branch, committer });
|
|
||||||
|
|
||||||
// Récupérer la fonction broadcast si disponible globalement
|
|
||||||
const broadcastFn = global.wsBroadcast || null;
|
|
||||||
setImmediate(() => runDeploy(appName, branch, commitHash, committer, broadcastFn));
|
|
||||||
});
|
|
||||||
|
|
||||||
// GET /api/webhook/status/:appName
|
|
||||||
router.get('/status/:appName', (req, res) => {
|
|
||||||
const { appName } = req.params;
|
|
||||||
const statusFile = path.join(LOG_DIR, `${appName}-last-deploy.json`);
|
|
||||||
if (!fs.existsSync(statusFile)) return res.status(404).json({ error: 'Aucun déploiement enregistré' });
|
|
||||||
try {
|
|
||||||
const status = JSON.parse(fs.readFileSync(statusFile, 'utf8'));
|
|
||||||
res.json({ ...status, isDeploying: deployingApps.has(appName) });
|
|
||||||
} catch { res.status(500).json({ error: 'Erreur lecture statut' }); }
|
|
||||||
});
|
|
||||||
|
|
||||||
// GET /api/webhook/status
|
|
||||||
router.get('/status', (req, res) => {
|
|
||||||
try {
|
|
||||||
fs.mkdirSync(LOG_DIR, { recursive: true });
|
|
||||||
const files = fs.readdirSync(LOG_DIR).filter(f => f.endsWith('-last-deploy.json'));
|
|
||||||
const statuses = files.map(f => {
|
|
||||||
try { const d = JSON.parse(fs.readFileSync(path.join(LOG_DIR, f), 'utf8')); return { ...d, isDeploying: deployingApps.has(d.app) }; }
|
|
||||||
catch { return null; }
|
|
||||||
}).filter(Boolean);
|
|
||||||
res.json({ deployments: statuses, currentlyDeploying: [...deployingApps] });
|
|
||||||
} catch { res.status(500).json({ error: 'Erreur lecture statuts' }); }
|
|
||||||
});
|
|
||||||
|
|
||||||
module.exports = router;
|
|
||||||
@@ -1,45 +1,43 @@
|
|||||||
services:
|
services:
|
||||||
dashboard:
|
dashboard:
|
||||||
build:
|
build:
|
||||||
context: .
|
context: ./src
|
||||||
dockerfile: Dockerfile
|
dockerfile: Dockerfile
|
||||||
container_name: manus-dashboard
|
container_name: manus-dashboard
|
||||||
restart: unless-stopped
|
restart: always
|
||||||
|
mem_limit: 512m
|
||||||
|
privileged: true
|
||||||
|
env_file:
|
||||||
|
- .env
|
||||||
environment:
|
environment:
|
||||||
- NODE_ENV=production
|
- NODE_ENV=production
|
||||||
- PORT=3001
|
- PORT=3001
|
||||||
- JWT_SECRET=manus-dashboard-jwt-secret-2026-recette
|
- JWT_SECRET=${DASHBOARD_JWT_SECRET}
|
||||||
- ADMIN_USERNAME=adminItinova
|
- ADMIN_USERNAME=${DASHBOARD_ADMIN_USERNAME}
|
||||||
- ADMIN_PASSWORD=Itinova69!
|
- ADMIN_PASSWORD=${DASHBOARD_ADMIN_PASSWORD}
|
||||||
- GITEA_URL=https://git.recette.santinova-soft.org
|
- GITEA_URL=${GITEA_URL}
|
||||||
- GITEA_USERNAME=manus-admin
|
- GITEA_USERNAME=${GITEA_USERNAME}
|
||||||
- GITEA_PASSWORD=ManusGitea2026!
|
- GITEA_PASSWORD=${GITEA_PASSWORD}
|
||||||
- GITEA_TOKEN=1e0b01c361a91d5512e13c78053ac82a66e19427
|
- WEBHOOK_SECRET=${WEBHOOK_SECRET}
|
||||||
- GITEA_RECETTE_URL=http://gitea:3000
|
- APPS_BASE_PATH=${APPS_BASE_PATH}
|
||||||
- GITEA_PASSWORD_PROD=ManusGitea2026!
|
- INFRA_BASE_PATH=${INFRA_BASE_PATH}
|
||||||
- APPS_BASE_PATH=/opt/manus-deploy/apps
|
- HEALTH_CHECK_INTERVAL=${HEALTH_CHECK_INTERVAL}
|
||||||
- INFRA_BASE_PATH=/opt/manus-deploy/infrastructure
|
|
||||||
- HEALTH_CHECK_INTERVAL=30000
|
|
||||||
volumes:
|
volumes:
|
||||||
|
- /opt/manus-deploy/webhook-patched.js:/app/backend/src/webhook.js:ro
|
||||||
- /var/run/docker.sock:/var/run/docker.sock
|
- /var/run/docker.sock:/var/run/docker.sock
|
||||||
- /opt/manus-deploy:/opt/manus-deploy
|
- /opt/manus-deploy:/opt/manus-deploy
|
||||||
extra_hosts:
|
|
||||||
- "git.santinova-soft.org:180.149.196.138"
|
|
||||||
networks:
|
networks:
|
||||||
- web
|
- web
|
||||||
labels:
|
labels:
|
||||||
- "traefik.enable=true"
|
- "traefik.enable=true"
|
||||||
# Route HTTPS via dashboard.recette.santinova-soft.org
|
- "traefik.http.routers.manus-dashboard.rule=Host(`dashboard.recette.santinova-soft.org`) || Host(`dashboard.santinova-soft.org`)"
|
||||||
- "traefik.http.routers.manus-dashboard.rule=Host(`dashboard.recette.santinova-soft.org`)"
|
|
||||||
- "traefik.http.routers.manus-dashboard.entrypoints=websecure"
|
- "traefik.http.routers.manus-dashboard.entrypoints=websecure"
|
||||||
- "traefik.http.routers.manus-dashboard.tls=true"
|
- "traefik.http.routers.manus-dashboard.tls=true"
|
||||||
- "traefik.http.routers.manus-dashboard.tls.certresolver=letsencrypt"
|
- "traefik.http.routers.manus-dashboard.tls.certresolver=letsencrypt"
|
||||||
- "traefik.http.routers.manus-dashboard.service=manus-dashboard-svc"
|
- "traefik.http.routers.manus-dashboard.service=manus-dashboard-svc"
|
||||||
- "traefik.http.routers.manus-dashboard.priority=100"
|
- "traefik.http.routers.manus-dashboard.priority=100"
|
||||||
# Service
|
|
||||||
- "traefik.http.services.manus-dashboard-svc.loadbalancer.server.port=3001"
|
- "traefik.http.services.manus-dashboard-svc.loadbalancer.server.port=3001"
|
||||||
- "traefik.docker.network=web"
|
- "traefik.docker.network=web"
|
||||||
|
|
||||||
networks:
|
networks:
|
||||||
web:
|
web:
|
||||||
external: true
|
external: true
|
||||||
|
|||||||
@@ -1,13 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="fr">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Dashboard - Gestion des Applications</title>
|
|
||||||
</head>
|
|
||||||
<body class="bg-dark-900 text-white">
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "manus-dashboard-frontend",
|
|
||||||
"private": true,
|
|
||||||
"version": "1.0.0",
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "vite build",
|
|
||||||
"preview": "vite preview"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"react": "^18.3.1",
|
|
||||||
"react-dom": "^18.3.1",
|
|
||||||
"react-router-dom": "^6.26.0",
|
|
||||||
"axios": "^1.7.0",
|
|
||||||
"lucide-react": "^0.441.0",
|
|
||||||
"date-fns": "^3.6.0",
|
|
||||||
"date-fns-tz": "^3.1.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/react": "^18.3.3",
|
|
||||||
"@types/react-dom": "^18.3.0",
|
|
||||||
"@vitejs/plugin-react": "^4.3.1",
|
|
||||||
"autoprefixer": "^10.4.20",
|
|
||||||
"postcss": "^8.4.41",
|
|
||||||
"tailwindcss": "^3.4.10",
|
|
||||||
"vite": "^5.4.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
export default {
|
|
||||||
plugins: {
|
|
||||||
tailwindcss: {},
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
|
||||||
<rect width="100" height="100" rx="20" fill="#2563eb"/>
|
|
||||||
<text x="50" y="68" font-family="Arial, sans-serif" font-size="50" font-weight="bold" fill="white" text-anchor="middle">M</text>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 259 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 MiB |
@@ -1,132 +0,0 @@
|
|||||||
import React, { useState, useEffect, useCallback } from 'react';
|
|
||||||
import LoginPage from './pages/LoginPage';
|
|
||||||
import DashboardPage from './pages/DashboardPage';
|
|
||||||
import AppsPage from './pages/AppsPage';
|
|
||||||
import MonitoringPage from './pages/MonitoringPage';
|
|
||||||
import DeploymentsPage from './pages/DeploymentsPage';
|
|
||||||
import GiteaPage from './pages/GiteaPage';
|
|
||||||
import DockerPage from './pages/DockerPage';
|
|
||||||
import DocumentationPage from './pages/DocumentationPage';
|
|
||||||
import InventairePage from './pages/InventairePage';
|
|
||||||
import TerminalPage from './pages/TerminalPage';
|
|
||||||
import Sidebar from './components/Sidebar';
|
|
||||||
import useWebSocket from './hooks/useWebSocket';
|
|
||||||
import { getMe, getApps, logout as apiLogout } from './utils/api';
|
|
||||||
export default function App() {
|
|
||||||
const [authenticated, setAuthenticated] = useState(false);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [currentPage, setCurrentPage] = useState('dashboard');
|
|
||||||
const [apps, setApps] = useState([]);
|
|
||||||
// Vérifier l'authentification au chargement
|
|
||||||
useEffect(() => {
|
|
||||||
const token = localStorage.getItem('dashboard_token');
|
|
||||||
if (token) {
|
|
||||||
getMe()
|
|
||||||
.then(() => {
|
|
||||||
setAuthenticated(true);
|
|
||||||
fetchApps();
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
localStorage.removeItem('dashboard_token');
|
|
||||||
setAuthenticated(false);
|
|
||||||
})
|
|
||||||
.finally(() => setLoading(false));
|
|
||||||
} else {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
const fetchApps = async () => {
|
|
||||||
try {
|
|
||||||
const res = await getApps();
|
|
||||||
setApps(res.data);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur chargement apps:', err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// WebSocket handler
|
|
||||||
const handleWsMessage = useCallback((data) => {
|
|
||||||
if (data.type === 'health_update') {
|
|
||||||
setApps(data.data);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
const { connected: wsConnected } = useWebSocket(
|
|
||||||
authenticated ? handleWsMessage : null
|
|
||||||
);
|
|
||||||
const handleLogin = (data) => {
|
|
||||||
setAuthenticated(true);
|
|
||||||
fetchApps();
|
|
||||||
};
|
|
||||||
const handleLogout = async () => {
|
|
||||||
try {
|
|
||||||
await apiLogout();
|
|
||||||
} catch (e) {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
localStorage.removeItem('dashboard_token');
|
|
||||||
setAuthenticated(false);
|
|
||||||
setApps([]);
|
|
||||||
};
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center bg-dark-950">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<svg className="animate-spin h-8 w-8 text-primary-500" viewBox="0 0 24 24">
|
|
||||||
<circle
|
|
||||||
className="opacity-25"
|
|
||||||
cx="12"
|
|
||||||
cy="12"
|
|
||||||
r="10"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="4"
|
|
||||||
fill="none"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
className="opacity-75"
|
|
||||||
fill="currentColor"
|
|
||||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span className="text-gray-400">Chargement...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (!authenticated) {
|
|
||||||
return <LoginPage onLogin={handleLogin} />;
|
|
||||||
}
|
|
||||||
const renderPage = () => {
|
|
||||||
switch (currentPage) {
|
|
||||||
case 'dashboard':
|
|
||||||
return <DashboardPage apps={apps} />;
|
|
||||||
case 'apps':
|
|
||||||
return <AppsPage apps={apps} onRefresh={fetchApps} />;
|
|
||||||
case 'deployments':
|
|
||||||
return <DeploymentsPage />;
|
|
||||||
case 'gitea':
|
|
||||||
return <GiteaPage />;
|
|
||||||
case 'docker':
|
|
||||||
return <DockerPage />;
|
|
||||||
case 'monitoring':
|
|
||||||
return <MonitoringPage />;
|
|
||||||
case 'documentation':
|
|
||||||
return <DocumentationPage />;
|
|
||||||
case 'inventaire':
|
|
||||||
return <InventairePage />;
|
|
||||||
case 'terminal':
|
|
||||||
return <TerminalPage />;
|
|
||||||
default:
|
|
||||||
return <DashboardPage apps={apps} />;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-dark-950">
|
|
||||||
<Sidebar
|
|
||||||
currentPage={currentPage}
|
|
||||||
onNavigate={setCurrentPage}
|
|
||||||
onLogout={handleLogout}
|
|
||||||
wsConnected={wsConnected}
|
|
||||||
/>
|
|
||||||
<main className="ml-64 p-8">{renderPage()}</main>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,679 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import {
|
|
||||||
X,
|
|
||||||
Upload,
|
|
||||||
GitBranch,
|
|
||||||
Server,
|
|
||||||
Database,
|
|
||||||
Globe,
|
|
||||||
Package,
|
|
||||||
FileText,
|
|
||||||
CheckCircle,
|
|
||||||
AlertCircle,
|
|
||||||
Loader2,
|
|
||||||
ChevronDown,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import { getAvailableStacks, createApp, getGiteaRepos } from '../utils/api';
|
|
||||||
|
|
||||||
const STEPS = [
|
|
||||||
{ id: 1, title: 'Informations', icon: FileText },
|
|
||||||
{ id: 2, title: 'Source', icon: GitBranch },
|
|
||||||
{ id: 3, title: 'Stack & Options', icon: Server },
|
|
||||||
{ id: 4, title: 'Confirmation', icon: CheckCircle },
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function AddAppModal({ isOpen, onClose, onSuccess }) {
|
|
||||||
const [currentStep, setCurrentStep] = useState(1);
|
|
||||||
const [stacks, setStacks] = useState([]);
|
|
||||||
const [giteaRepos, setGiteaRepos] = useState([]);
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
||||||
const [submitResult, setSubmitResult] = useState(null);
|
|
||||||
const [errors, setErrors] = useState({});
|
|
||||||
|
|
||||||
const [formData, setFormData] = useState({
|
|
||||||
name: '',
|
|
||||||
description: '',
|
|
||||||
subdomain: '',
|
|
||||||
sourceType: 'zip',
|
|
||||||
zipFile: null,
|
|
||||||
giteaRepoUrl: '',
|
|
||||||
stack: 'nodejs',
|
|
||||||
port: '',
|
|
||||||
needsDb: false,
|
|
||||||
dbType: 'mysql',
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (isOpen) {
|
|
||||||
getAvailableStacks()
|
|
||||||
.then((res) => setStacks(res.data))
|
|
||||||
.catch(console.error);
|
|
||||||
getGiteaRepos()
|
|
||||||
.then((res) => setGiteaRepos(res.data))
|
|
||||||
.catch(console.error);
|
|
||||||
// Reset
|
|
||||||
setCurrentStep(1);
|
|
||||||
setSubmitResult(null);
|
|
||||||
setErrors({});
|
|
||||||
setFormData({
|
|
||||||
name: '',
|
|
||||||
description: '',
|
|
||||||
subdomain: '',
|
|
||||||
sourceType: 'zip',
|
|
||||||
zipFile: null,
|
|
||||||
giteaRepoUrl: '',
|
|
||||||
stack: 'nodejs',
|
|
||||||
port: '',
|
|
||||||
needsDb: false,
|
|
||||||
dbType: 'mysql',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [isOpen]);
|
|
||||||
|
|
||||||
if (!isOpen) return null;
|
|
||||||
|
|
||||||
const updateField = (field, value) => {
|
|
||||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
|
||||||
setErrors((prev) => ({ ...prev, [field]: null }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const autoSubdomain = (name) => {
|
|
||||||
return name
|
|
||||||
.toLowerCase()
|
|
||||||
.replace(/[^a-z0-9\s-]/g, '')
|
|
||||||
.replace(/\s+/g, '-')
|
|
||||||
.replace(/-+/g, '-')
|
|
||||||
.replace(/^-|-$/g, '');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleNameChange = (value) => {
|
|
||||||
updateField('name', value);
|
|
||||||
if (!formData.subdomain || formData.subdomain === autoSubdomain(formData.name)) {
|
|
||||||
updateField('subdomain', autoSubdomain(value));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const validateStep = (step) => {
|
|
||||||
const newErrors = {};
|
|
||||||
if (step === 1) {
|
|
||||||
if (!formData.name.trim()) newErrors.name = 'Le nom est requis';
|
|
||||||
if (!formData.subdomain.trim()) newErrors.subdomain = 'Le sous-domaine est requis';
|
|
||||||
else if (!/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/.test(formData.subdomain)) {
|
|
||||||
newErrors.subdomain = 'Lettres minuscules, chiffres et tirets uniquement';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (step === 2) {
|
|
||||||
if (formData.sourceType === 'zip' && !formData.zipFile) {
|
|
||||||
newErrors.zipFile = 'Un fichier ZIP est requis';
|
|
||||||
}
|
|
||||||
if (formData.sourceType === 'gitea' && !formData.giteaRepoUrl) {
|
|
||||||
newErrors.giteaRepoUrl = 'Sélectionnez un dépôt Gitea';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setErrors(newErrors);
|
|
||||||
return Object.keys(newErrors).length === 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
const nextStep = () => {
|
|
||||||
if (validateStep(currentStep)) {
|
|
||||||
setCurrentStep((prev) => Math.min(prev + 1, 4));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const prevStep = () => {
|
|
||||||
setCurrentStep((prev) => Math.max(prev - 1, 1));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
|
||||||
setIsSubmitting(true);
|
|
||||||
setSubmitResult(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const fd = new FormData();
|
|
||||||
fd.append('name', formData.name);
|
|
||||||
fd.append('description', formData.description);
|
|
||||||
fd.append('subdomain', formData.subdomain);
|
|
||||||
fd.append('stack', formData.stack);
|
|
||||||
fd.append('sourceType', formData.sourceType);
|
|
||||||
fd.append('needsDb', formData.needsDb.toString());
|
|
||||||
fd.append('dbType', formData.dbType);
|
|
||||||
if (formData.port) fd.append('port', formData.port);
|
|
||||||
|
|
||||||
if (formData.sourceType === 'zip' && formData.zipFile) {
|
|
||||||
fd.append('zipFile', formData.zipFile);
|
|
||||||
}
|
|
||||||
if (formData.sourceType === 'gitea') {
|
|
||||||
fd.append('giteaRepoUrl', formData.giteaRepoUrl);
|
|
||||||
}
|
|
||||||
|
|
||||||
const res = await createApp(fd);
|
|
||||||
setSubmitResult({ success: true, data: res.data });
|
|
||||||
|
|
||||||
// Rafraîchir après un délai
|
|
||||||
setTimeout(() => {
|
|
||||||
if (onSuccess) onSuccess();
|
|
||||||
}, 3000);
|
|
||||||
} catch (err) {
|
|
||||||
setSubmitResult({
|
|
||||||
success: false,
|
|
||||||
error: err.response?.data?.error || err.message,
|
|
||||||
});
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const selectedStack = stacks.find((s) => s.id === formData.stack);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
||||||
{/* Overlay */}
|
|
||||||
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
|
|
||||||
|
|
||||||
{/* Modal */}
|
|
||||||
<div className="relative bg-dark-800 border border-dark-600 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between px-6 py-4 border-b border-dark-600">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-xl font-bold text-white flex items-center gap-2">
|
|
||||||
<Package className="w-5 h-5 text-primary-400" />
|
|
||||||
Ajouter une application
|
|
||||||
</h2>
|
|
||||||
<p className="text-sm text-gray-400 mt-0.5">
|
|
||||||
Déployez une nouvelle application sur le serveur de recette
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="p-2 text-gray-400 hover:text-white hover:bg-dark-600 rounded-lg transition-colors"
|
|
||||||
>
|
|
||||||
<X className="w-5 h-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Steps indicator */}
|
|
||||||
<div className="px-6 py-3 border-b border-dark-600 bg-dark-900/50">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
{STEPS.map((step, idx) => (
|
|
||||||
<div key={step.id} className="flex items-center">
|
|
||||||
<div
|
|
||||||
className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
|
|
||||||
currentStep === step.id
|
|
||||||
? 'bg-primary-500/20 text-primary-400 border border-primary-500/30'
|
|
||||||
: currentStep > step.id
|
|
||||||
? 'bg-green-500/20 text-green-400'
|
|
||||||
: 'text-gray-500'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<step.icon className="w-4 h-4" />
|
|
||||||
<span className="hidden sm:inline">{step.title}</span>
|
|
||||||
</div>
|
|
||||||
{idx < STEPS.length - 1 && (
|
|
||||||
<div
|
|
||||||
className={`w-8 h-0.5 mx-1 ${
|
|
||||||
currentStep > step.id ? 'bg-green-500' : 'bg-dark-600'
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="px-6 py-5 overflow-y-auto max-h-[55vh]">
|
|
||||||
{/* Step 1: Informations */}
|
|
||||||
{currentStep === 1 && (
|
|
||||||
<div className="space-y-5">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
|
||||||
Nom de l'application <span className="text-red-400">*</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={formData.name}
|
|
||||||
onChange={(e) => handleNameChange(e.target.value)}
|
|
||||||
placeholder="Mon Application"
|
|
||||||
className={`w-full px-4 py-2.5 bg-dark-700 border rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent ${
|
|
||||||
errors.name ? 'border-red-500' : 'border-dark-500'
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
{errors.name && (
|
|
||||||
<p className="text-red-400 text-xs mt-1">{errors.name}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
|
||||||
Description
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
value={formData.description}
|
|
||||||
onChange={(e) => updateField('description', e.target.value)}
|
|
||||||
placeholder="Description de l'application..."
|
|
||||||
rows={3}
|
|
||||||
className="w-full px-4 py-2.5 bg-dark-700 border border-dark-500 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
|
||||||
Sous-domaine <span className="text-red-400">*</span>
|
|
||||||
</label>
|
|
||||||
<div className="flex items-center gap-0">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={formData.subdomain}
|
|
||||||
onChange={(e) => updateField('subdomain', e.target.value.toLowerCase())}
|
|
||||||
placeholder="mon-app"
|
|
||||||
className={`flex-1 px-4 py-2.5 bg-dark-700 border rounded-l-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent ${
|
|
||||||
errors.subdomain ? 'border-red-500' : 'border-dark-500'
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
<span className="px-3 py-2.5 bg-dark-600 border border-dark-500 border-l-0 rounded-r-lg text-gray-400 text-sm whitespace-nowrap">
|
|
||||||
.recette.santinova-soft.org
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{errors.subdomain && (
|
|
||||||
<p className="text-red-400 text-xs mt-1">{errors.subdomain}</p>
|
|
||||||
)}
|
|
||||||
{formData.subdomain && !errors.subdomain && (
|
|
||||||
<p className="text-gray-500 text-xs mt-1 flex items-center gap-1">
|
|
||||||
<Globe className="w-3 h-3" />
|
|
||||||
URL: https://{formData.subdomain}.recette.santinova-soft.org
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Step 2: Source */}
|
|
||||||
{currentStep === 2 && (
|
|
||||||
<div className="space-y-5">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-3">
|
|
||||||
Source du code
|
|
||||||
</label>
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
<button
|
|
||||||
onClick={() => updateField('sourceType', 'zip')}
|
|
||||||
className={`p-4 rounded-xl border-2 text-left transition-all ${
|
|
||||||
formData.sourceType === 'zip'
|
|
||||||
? 'border-primary-500 bg-primary-500/10'
|
|
||||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Upload className={`w-6 h-6 mb-2 ${formData.sourceType === 'zip' ? 'text-primary-400' : 'text-gray-400'}`} />
|
|
||||||
<div className={`font-medium ${formData.sourceType === 'zip' ? 'text-white' : 'text-gray-300'}`}>
|
|
||||||
Upload ZIP
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-500 mt-1">
|
|
||||||
Uploadez une archive ZIP contenant les sources
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => updateField('sourceType', 'gitea')}
|
|
||||||
className={`p-4 rounded-xl border-2 text-left transition-all ${
|
|
||||||
formData.sourceType === 'gitea'
|
|
||||||
? 'border-primary-500 bg-primary-500/10'
|
|
||||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<GitBranch className={`w-6 h-6 mb-2 ${formData.sourceType === 'gitea' ? 'text-primary-400' : 'text-gray-400'}`} />
|
|
||||||
<div className={`font-medium ${formData.sourceType === 'gitea' ? 'text-white' : 'text-gray-300'}`}>
|
|
||||||
Dépôt Gitea
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-500 mt-1">
|
|
||||||
Utilisez un dépôt Gitea existant
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{formData.sourceType === 'zip' && (
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
|
||||||
Fichier ZIP <span className="text-red-400">*</span>
|
|
||||||
</label>
|
|
||||||
<div
|
|
||||||
className={`relative border-2 border-dashed rounded-xl p-8 text-center transition-colors ${
|
|
||||||
formData.zipFile
|
|
||||||
? 'border-green-500/50 bg-green-500/5'
|
|
||||||
: errors.zipFile
|
|
||||||
? 'border-red-500/50 bg-red-500/5'
|
|
||||||
: 'border-dark-500 hover:border-dark-400 bg-dark-700'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
accept=".zip"
|
|
||||||
onChange={(e) => updateField('zipFile', e.target.files[0])}
|
|
||||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
|
||||||
/>
|
|
||||||
{formData.zipFile ? (
|
|
||||||
<div>
|
|
||||||
<CheckCircle className="w-8 h-8 text-green-400 mx-auto mb-2" />
|
|
||||||
<p className="text-green-400 font-medium">{formData.zipFile.name}</p>
|
|
||||||
<p className="text-gray-500 text-sm mt-1">
|
|
||||||
{(formData.zipFile.size / 1024 / 1024).toFixed(2)} MB
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div>
|
|
||||||
<Upload className="w-8 h-8 text-gray-500 mx-auto mb-2" />
|
|
||||||
<p className="text-gray-400">Cliquez ou glissez un fichier ZIP ici</p>
|
|
||||||
<p className="text-gray-600 text-sm mt-1">Maximum 500 MB</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{errors.zipFile && (
|
|
||||||
<p className="text-red-400 text-xs mt-1">{errors.zipFile}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{formData.sourceType === 'gitea' && (
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
|
||||||
Dépôt Gitea <span className="text-red-400">*</span>
|
|
||||||
</label>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{giteaRepos.length === 0 ? (
|
|
||||||
<div className="p-4 bg-dark-700 rounded-lg text-center text-gray-500">
|
|
||||||
<Loader2 className="w-5 h-5 animate-spin mx-auto mb-2" />
|
|
||||||
Chargement des dépôts...
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-2 max-h-48 overflow-y-auto pr-1">
|
|
||||||
{giteaRepos.map((repo) => (
|
|
||||||
<button
|
|
||||||
key={repo.id}
|
|
||||||
onClick={() => updateField('giteaRepoUrl', repo.cloneUrl)}
|
|
||||||
className={`w-full p-3 rounded-lg border text-left transition-all ${
|
|
||||||
formData.giteaRepoUrl === repo.cloneUrl
|
|
||||||
? 'border-primary-500 bg-primary-500/10'
|
|
||||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<div className="font-medium text-white text-sm">{repo.name}</div>
|
|
||||||
{repo.description && (
|
|
||||||
<div className="text-xs text-gray-500 mt-0.5">{repo.description}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{repo.language && (
|
|
||||||
<span className="text-xs px-2 py-0.5 bg-dark-600 rounded text-gray-400">
|
|
||||||
{repo.language}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{errors.giteaRepoUrl && (
|
|
||||||
<p className="text-red-400 text-xs mt-1">{errors.giteaRepoUrl}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Step 3: Stack & Options */}
|
|
||||||
{currentStep === 3 && (
|
|
||||||
<div className="space-y-5">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-3">
|
|
||||||
Type de stack <span className="text-red-400">*</span>
|
|
||||||
</label>
|
|
||||||
<div className="grid grid-cols-3 gap-2">
|
|
||||||
{stacks.map((s) => (
|
|
||||||
<button
|
|
||||||
key={s.id}
|
|
||||||
onClick={() => updateField('stack', s.id)}
|
|
||||||
className={`p-3 rounded-lg border text-center transition-all ${
|
|
||||||
formData.stack === s.id
|
|
||||||
? 'border-primary-500 bg-primary-500/10'
|
|
||||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className={`text-sm font-medium ${formData.stack === s.id ? 'text-white' : 'text-gray-300'}`}>
|
|
||||||
{s.name}
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
{selectedStack && (
|
|
||||||
<p className="text-gray-500 text-xs mt-2">{selectedStack.description}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
|
||||||
Port de l'application (optionnel)
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
value={formData.port}
|
|
||||||
onChange={(e) => updateField('port', e.target.value)}
|
|
||||||
placeholder="Auto-détecté selon la stack"
|
|
||||||
className="w-full px-4 py-2.5 bg-dark-700 border border-dark-500 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border border-dark-500 rounded-xl p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Database className={`w-5 h-5 ${formData.needsDb ? 'text-primary-400' : 'text-gray-500'}`} />
|
|
||||||
<div>
|
|
||||||
<div className="text-sm font-medium text-white">Base de données</div>
|
|
||||||
<div className="text-xs text-gray-500">Ajouter un conteneur de base de données</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => updateField('needsDb', !formData.needsDb)}
|
|
||||||
className={`relative w-12 h-6 rounded-full transition-colors ${
|
|
||||||
formData.needsDb ? 'bg-primary-500' : 'bg-dark-600'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${
|
|
||||||
formData.needsDb ? 'translate-x-6' : 'translate-x-0.5'
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{formData.needsDb && (
|
|
||||||
<div className="mt-4 pt-4 border-t border-dark-500">
|
|
||||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|
||||||
Type de base de données
|
|
||||||
</label>
|
|
||||||
<div className="grid grid-cols-2 gap-2">
|
|
||||||
<button
|
|
||||||
onClick={() => updateField('dbType', 'mysql')}
|
|
||||||
className={`p-3 rounded-lg border text-center transition-all ${
|
|
||||||
formData.dbType === 'mysql'
|
|
||||||
? 'border-primary-500 bg-primary-500/10'
|
|
||||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className={`text-sm font-medium ${formData.dbType === 'mysql' ? 'text-white' : 'text-gray-300'}`}>
|
|
||||||
MySQL 8.0
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => updateField('dbType', 'postgres')}
|
|
||||||
className={`p-3 rounded-lg border text-center transition-all ${
|
|
||||||
formData.dbType === 'postgres'
|
|
||||||
? 'border-primary-500 bg-primary-500/10'
|
|
||||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className={`text-sm font-medium ${formData.dbType === 'postgres' ? 'text-white' : 'text-gray-300'}`}>
|
|
||||||
PostgreSQL 16
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Step 4: Confirmation */}
|
|
||||||
{currentStep === 4 && (
|
|
||||||
<div className="space-y-5">
|
|
||||||
{submitResult ? (
|
|
||||||
<div
|
|
||||||
className={`p-6 rounded-xl border ${
|
|
||||||
submitResult.success
|
|
||||||
? 'border-green-500/30 bg-green-500/10'
|
|
||||||
: 'border-red-500/30 bg-red-500/10'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{submitResult.success ? (
|
|
||||||
<div className="text-center">
|
|
||||||
<CheckCircle className="w-12 h-12 text-green-400 mx-auto mb-3" />
|
|
||||||
<h3 className="text-lg font-bold text-green-400">
|
|
||||||
Création lancée avec succès !
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-400 mt-2 text-sm">
|
|
||||||
L'application est en cours de déploiement. Suivez la progression dans l'onglet Déploiements.
|
|
||||||
</p>
|
|
||||||
<p className="text-gray-500 mt-2 text-xs">
|
|
||||||
URL: https://{formData.subdomain}.recette.santinova-soft.org
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="text-center">
|
|
||||||
<AlertCircle className="w-12 h-12 text-red-400 mx-auto mb-3" />
|
|
||||||
<h3 className="text-lg font-bold text-red-400">Erreur</h3>
|
|
||||||
<p className="text-gray-400 mt-2 text-sm">{submitResult.error}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<h3 className="text-lg font-semibold text-white">Récapitulatif</h3>
|
|
||||||
<div className="bg-dark-700 rounded-xl divide-y divide-dark-600">
|
|
||||||
<div className="flex justify-between items-center px-4 py-3">
|
|
||||||
<span className="text-gray-400 text-sm">Nom</span>
|
|
||||||
<span className="text-white font-medium">{formData.name}</span>
|
|
||||||
</div>
|
|
||||||
{formData.description && (
|
|
||||||
<div className="flex justify-between items-center px-4 py-3">
|
|
||||||
<span className="text-gray-400 text-sm">Description</span>
|
|
||||||
<span className="text-white text-sm text-right max-w-xs truncate">{formData.description}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="flex justify-between items-center px-4 py-3">
|
|
||||||
<span className="text-gray-400 text-sm">URL</span>
|
|
||||||
<span className="text-primary-400 text-sm">
|
|
||||||
https://{formData.subdomain}.recette.santinova-soft.org
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between items-center px-4 py-3">
|
|
||||||
<span className="text-gray-400 text-sm">Source</span>
|
|
||||||
<span className="text-white text-sm">
|
|
||||||
{formData.sourceType === 'zip'
|
|
||||||
? `ZIP: ${formData.zipFile?.name || '-'}`
|
|
||||||
: `Gitea: ${formData.giteaRepoUrl.split('/').pop()}`}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between items-center px-4 py-3">
|
|
||||||
<span className="text-gray-400 text-sm">Stack</span>
|
|
||||||
<span className="text-white text-sm">
|
|
||||||
{selectedStack?.name || formData.stack}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{formData.port && (
|
|
||||||
<div className="flex justify-between items-center px-4 py-3">
|
|
||||||
<span className="text-gray-400 text-sm">Port</span>
|
|
||||||
<span className="text-white text-sm">{formData.port}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="flex justify-between items-center px-4 py-3">
|
|
||||||
<span className="text-gray-400 text-sm">Base de données</span>
|
|
||||||
<span className="text-white text-sm">
|
|
||||||
{formData.needsDb
|
|
||||||
? formData.dbType === 'mysql'
|
|
||||||
? 'MySQL 8.0'
|
|
||||||
: 'PostgreSQL 16'
|
|
||||||
: 'Aucune'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-yellow-500/10 border border-yellow-500/30 rounded-xl p-4">
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<AlertCircle className="w-5 h-5 text-yellow-400 mt-0.5 flex-shrink-0" />
|
|
||||||
<div>
|
|
||||||
<p className="text-yellow-400 text-sm font-medium">
|
|
||||||
Le déploiement peut prendre plusieurs minutes
|
|
||||||
</p>
|
|
||||||
<p className="text-gray-400 text-xs mt-1">
|
|
||||||
Le build Docker et le démarrage des conteneurs seront exécutés en arrière-plan.
|
|
||||||
Vous pourrez suivre la progression dans l'onglet Déploiements.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<div className="flex items-center justify-between px-6 py-4 border-t border-dark-600 bg-dark-900/50">
|
|
||||||
<div>
|
|
||||||
{currentStep > 1 && !submitResult && (
|
|
||||||
<button
|
|
||||||
onClick={prevStep}
|
|
||||||
className="px-4 py-2 text-gray-400 hover:text-white transition-colors text-sm"
|
|
||||||
>
|
|
||||||
Retour
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{submitResult ? (
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="btn-primary px-6"
|
|
||||||
>
|
|
||||||
Fermer
|
|
||||||
</button>
|
|
||||||
) : currentStep < 4 ? (
|
|
||||||
<button onClick={nextStep} className="btn-primary px-6">
|
|
||||||
Suivant
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
onClick={handleSubmit}
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className="btn-primary px-6 flex items-center gap-2"
|
|
||||||
>
|
|
||||||
{isSubmitting ? (
|
|
||||||
<>
|
|
||||||
<Loader2 className="w-4 h-4 animate-spin" />
|
|
||||||
Création en cours...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Package className="w-4 h-4" />
|
|
||||||
Créer et déployer
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,372 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import {
|
|
||||||
ExternalLink,
|
|
||||||
RefreshCw,
|
|
||||||
Rocket,
|
|
||||||
Clock,
|
|
||||||
GitBranch,
|
|
||||||
Activity,
|
|
||||||
ChevronDown,
|
|
||||||
ChevronUp,
|
|
||||||
Terminal,
|
|
||||||
AlertTriangle,
|
|
||||||
Play,
|
|
||||||
Square,
|
|
||||||
RotateCcw,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import StatusBadge from './StatusBadge';
|
|
||||||
import { deployApp, checkApp, getAppLogs, startApp, stopApp, restartApp } from '../utils/api';
|
|
||||||
|
|
||||||
function formatDate(dateStr) {
|
|
||||||
if (!dateStr) return 'N/A';
|
|
||||||
try {
|
|
||||||
const date = new Date(dateStr);
|
|
||||||
return date.toLocaleString('fr-FR', {
|
|
||||||
day: '2-digit',
|
|
||||||
month: '2-digit',
|
|
||||||
year: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
});
|
|
||||||
} catch {
|
|
||||||
return dateStr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatResponseTime(ms) {
|
|
||||||
if (!ms) return 'N/A';
|
|
||||||
if (ms < 1000) return `${ms}ms`;
|
|
||||||
return `${(ms / 1000).toFixed(1)}s`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function AppCard({ app, commits, onRefresh }) {
|
|
||||||
const [deploying, setDeploying] = useState(false);
|
|
||||||
const [checking, setChecking] = useState(false);
|
|
||||||
const [showLogs, setShowLogs] = useState(false);
|
|
||||||
const [containerLogs, setContainerLogs] = useState('');
|
|
||||||
const [loadingLogs, setLoadingLogs] = useState(false);
|
|
||||||
const [deployMessage, setDeployMessage] = useState(null);
|
|
||||||
const [loadingControl, setLoadingControl] = useState(null);
|
|
||||||
|
|
||||||
const handleContainerControl = async (action) => {
|
|
||||||
setLoadingControl(action);
|
|
||||||
try {
|
|
||||||
if (action === 'start') await startApp(app.id);
|
|
||||||
else if (action === 'stop') await stopApp(app.id);
|
|
||||||
else if (action === 'restart') await restartApp(app.id);
|
|
||||||
setTimeout(() => { if (onRefresh) onRefresh(); }, 2000);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur controle conteneur:', err);
|
|
||||||
} finally {
|
|
||||||
setLoadingControl(null);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeploy = async () => {
|
|
||||||
if (!confirm(`Voulez-vous redéployer ${app.name} ?`)) return;
|
|
||||||
setDeploying(true);
|
|
||||||
setDeployMessage(null);
|
|
||||||
try {
|
|
||||||
const res = await deployApp(app.id);
|
|
||||||
setDeployMessage({
|
|
||||||
type: 'info',
|
|
||||||
text: res.data.message || 'Redéploiement lancé...',
|
|
||||||
});
|
|
||||||
// Rafraîchir après un délai
|
|
||||||
setTimeout(() => {
|
|
||||||
if (onRefresh) onRefresh();
|
|
||||||
setDeploying(false);
|
|
||||||
}, 10000);
|
|
||||||
} catch (err) {
|
|
||||||
setDeployMessage({
|
|
||||||
type: 'error',
|
|
||||||
text: err.response?.data?.error || 'Erreur lors du redéploiement',
|
|
||||||
});
|
|
||||||
setDeploying(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCheck = async () => {
|
|
||||||
setChecking(true);
|
|
||||||
try {
|
|
||||||
await checkApp(app.id);
|
|
||||||
if (onRefresh) onRefresh();
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur health check:', err);
|
|
||||||
} finally {
|
|
||||||
setChecking(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleShowLogs = async () => {
|
|
||||||
if (showLogs) {
|
|
||||||
setShowLogs(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setLoadingLogs(true);
|
|
||||||
setShowLogs(true);
|
|
||||||
try {
|
|
||||||
const res = await getAppLogs(app.id, 50);
|
|
||||||
setContainerLogs(res.data.logs || 'Aucun log disponible');
|
|
||||||
} catch (err) {
|
|
||||||
setContainerLogs('Erreur lors de la récupération des logs');
|
|
||||||
} finally {
|
|
||||||
setLoadingLogs(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const latestCommit = commits && commits.length > 0 ? commits[0] : null;
|
|
||||||
|
|
||||||
// Apps d'infrastructure : portail et dashboard
|
|
||||||
const isInfra = ['portail-santinova', 'manus-dashboard'].includes(app.id);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`card overflow-hidden${isInfra ? ' border border-amber-500/30 bg-amber-950/10' : ''}`}>
|
|
||||||
{/* Badge infra */}
|
|
||||||
{isInfra && (
|
|
||||||
<div className="px-6 pt-3 pb-0">
|
|
||||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-500/15 text-amber-400 border border-amber-500/30">
|
|
||||||
⚙ Infrastructure
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{/* Header */}
|
|
||||||
<div className="p-6 border-b border-dark-700">
|
|
||||||
<div className="flex items-start justify-between">
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<h3 className="text-lg font-semibold text-white">{app.name}</h3>
|
|
||||||
<StatusBadge status={app.status} />
|
|
||||||
</div>
|
|
||||||
<p className="text-gray-400 text-sm mt-1">
|
|
||||||
{app.description || app.id}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
onClick={handleCheck}
|
|
||||||
disabled={checking}
|
|
||||||
className="btn-secondary py-1.5 px-3 text-sm flex items-center gap-1.5"
|
|
||||||
title="Vérifier l'état"
|
|
||||||
>
|
|
||||||
<RefreshCw
|
|
||||||
className={`w-3.5 h-3.5 ${checking ? 'animate-spin' : ''}`}
|
|
||||||
/>
|
|
||||||
Vérifier
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleDeploy}
|
|
||||||
disabled={deploying}
|
|
||||||
className="btn-primary py-1.5 px-3 text-sm flex items-center gap-1.5"
|
|
||||||
title="Redéployer l'application"
|
|
||||||
>
|
|
||||||
<Rocket
|
|
||||||
className={`w-3.5 h-3.5 ${deploying ? 'animate-bounce' : ''}`}
|
|
||||||
/>
|
|
||||||
{deploying ? 'Déploiement...' : 'Redéployer'}
|
|
||||||
</button>
|
|
||||||
{/* Boutons contrôle conteneur */}
|
|
||||||
<div className="flex items-center gap-1 ml-1 border-l border-dark-600 pl-2">
|
|
||||||
<button
|
|
||||||
onClick={() => handleContainerControl('start')}
|
|
||||||
disabled={loadingControl !== null || app.container?.state === 'running'}
|
|
||||||
title="Démarrer le conteneur"
|
|
||||||
className="p-1.5 rounded-lg text-emerald-400 hover:bg-emerald-500/10 border border-emerald-500/20 disabled:opacity-40 disabled:cursor-not-allowed transition-all"
|
|
||||||
>
|
|
||||||
{loadingControl === 'start' ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <Play className="w-3.5 h-3.5" />}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => handleContainerControl('stop')}
|
|
||||||
disabled={loadingControl !== null || app.container?.state !== 'running'}
|
|
||||||
title="Arrêter le conteneur"
|
|
||||||
className="p-1.5 rounded-lg text-red-400 hover:bg-red-500/10 border border-red-500/20 disabled:opacity-40 disabled:cursor-not-allowed transition-all"
|
|
||||||
>
|
|
||||||
{loadingControl === 'stop' ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <Square className="w-3.5 h-3.5" />}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => handleContainerControl('restart')}
|
|
||||||
disabled={loadingControl !== null}
|
|
||||||
title="Redémarrer le conteneur"
|
|
||||||
className="p-1.5 rounded-lg text-amber-400 hover:bg-amber-500/10 border border-amber-500/20 disabled:opacity-40 disabled:cursor-not-allowed transition-all"
|
|
||||||
>
|
|
||||||
{loadingControl === 'restart' ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <RotateCcw className="w-3.5 h-3.5" />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Deploy message */}
|
|
||||||
{deployMessage && (
|
|
||||||
<div
|
|
||||||
className={`px-6 py-3 text-sm flex items-center gap-2 ${
|
|
||||||
deployMessage.type === 'error'
|
|
||||||
? 'bg-red-500/10 text-red-400'
|
|
||||||
: 'bg-primary-500/10 text-primary-400'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{deployMessage.type === 'error' ? (
|
|
||||||
<AlertTriangle className="w-4 h-4" />
|
|
||||||
) : (
|
|
||||||
<Rocket className="w-4 h-4" />
|
|
||||||
)}
|
|
||||||
{deployMessage.text}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Info Grid */}
|
|
||||||
<div className="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
||||||
{/* URLs */}
|
|
||||||
<div>
|
|
||||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
URLs
|
|
||||||
</span>
|
|
||||||
<div className="mt-1.5 space-y-1">
|
|
||||||
{app.urls?.recette && (
|
|
||||||
<a
|
|
||||||
href={app.urls.recette}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="flex items-center gap-1.5 text-sm text-primary-400 hover:text-primary-300 transition-colors"
|
|
||||||
>
|
|
||||||
<ExternalLink className="w-3.5 h-3.5" />
|
|
||||||
Recette
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
{app.urls?.prod ? (
|
|
||||||
<a
|
|
||||||
href={app.urls.prod}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="flex items-center gap-1.5 text-sm text-emerald-400 hover:text-emerald-300 transition-colors"
|
|
||||||
>
|
|
||||||
<ExternalLink className="w-3.5 h-3.5" />
|
|
||||||
Production
|
|
||||||
</a>
|
|
||||||
) : (
|
|
||||||
<span className="text-sm text-gray-600">Pas de prod</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Container */}
|
|
||||||
<div>
|
|
||||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
Conteneur
|
|
||||||
</span>
|
|
||||||
<div className="mt-1.5">
|
|
||||||
{app.container ? (
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="text-sm text-gray-300">
|
|
||||||
<span className="text-gray-500">ID:</span>{' '}
|
|
||||||
<code className="text-xs bg-dark-700 px-1.5 py-0.5 rounded">
|
|
||||||
{app.container.id}
|
|
||||||
</code>
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-300">
|
|
||||||
<span className="text-gray-500">État:</span>{' '}
|
|
||||||
{app.container.state}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<p className="text-sm text-gray-600">Non trouvé</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Health */}
|
|
||||||
<div>
|
|
||||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
Santé
|
|
||||||
</span>
|
|
||||||
<div className="mt-1.5 space-y-1">
|
|
||||||
{app.health?.recette && (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Activity
|
|
||||||
className={`w-3.5 h-3.5 ${
|
|
||||||
app.health.recette.online
|
|
||||||
? 'text-emerald-400'
|
|
||||||
: 'text-red-400'
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
<span className="text-sm text-gray-300">
|
|
||||||
{app.health.recette.online ? (
|
|
||||||
<>
|
|
||||||
HTTP {app.health.recette.statusCode} —{' '}
|
|
||||||
{formatResponseTime(app.health.recette.responseTime)}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<span className="text-red-400">
|
|
||||||
{app.health.recette.error || 'Inaccessible'}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<p className="text-xs text-gray-600">
|
|
||||||
<Clock className="w-3 h-3 inline mr-1" />
|
|
||||||
{formatDate(app.lastCheck)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Latest Commit */}
|
|
||||||
{latestCommit && (
|
|
||||||
<div className="px-6 py-3 border-t border-dark-700 bg-dark-800/50">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<GitBranch className="w-4 h-4 text-gray-500" />
|
|
||||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
Dernier commit
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="mt-1.5 flex items-center gap-3">
|
|
||||||
<code className="text-xs bg-primary-500/10 text-primary-400 px-2 py-0.5 rounded font-mono">
|
|
||||||
{latestCommit.shortSha}
|
|
||||||
</code>
|
|
||||||
<span className="text-sm text-gray-300 truncate flex-1">
|
|
||||||
{latestCommit.message}
|
|
||||||
</span>
|
|
||||||
<span className="text-xs text-gray-500 flex-shrink-0">
|
|
||||||
{latestCommit.author} — {formatDate(latestCommit.date)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Logs Toggle */}
|
|
||||||
<div className="border-t border-dark-700">
|
|
||||||
<button
|
|
||||||
onClick={handleShowLogs}
|
|
||||||
className="w-full px-6 py-3 flex items-center justify-between text-sm text-gray-400 hover:text-gray-300 hover:bg-dark-700/50 transition-colors"
|
|
||||||
>
|
|
||||||
<span className="flex items-center gap-2">
|
|
||||||
<Terminal className="w-4 h-4" />
|
|
||||||
Logs du conteneur
|
|
||||||
</span>
|
|
||||||
{showLogs ? (
|
|
||||||
<ChevronUp className="w-4 h-4" />
|
|
||||||
) : (
|
|
||||||
<ChevronDown className="w-4 h-4" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
{showLogs && (
|
|
||||||
<div className="px-6 pb-4">
|
|
||||||
<div className="bg-dark-950 rounded-lg p-4 max-h-64 overflow-auto">
|
|
||||||
{loadingLogs ? (
|
|
||||||
<div className="flex items-center gap-2 text-gray-500">
|
|
||||||
<RefreshCw className="w-4 h-4 animate-spin" />
|
|
||||||
Chargement des logs...
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<pre className="log-viewer text-xs text-gray-400">
|
|
||||||
{containerLogs}
|
|
||||||
</pre>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { LayoutList, TerminalSquare,
|
|
||||||
Server,
|
|
||||||
LayoutDashboard,
|
|
||||||
Box,
|
|
||||||
GitBranch,
|
|
||||||
ScrollText,
|
|
||||||
Container,
|
|
||||||
LogOut,
|
|
||||||
Wifi,
|
|
||||||
WifiOff,
|
|
||||||
Activity,
|
|
||||||
BookOpen,
|
|
||||||
} from 'lucide-react';
|
|
||||||
const navItems = [
|
|
||||||
{ id: 'dashboard', label: 'Tableau de bord', icon: LayoutDashboard },
|
|
||||||
{ id: 'apps', label: 'Applications', icon: Box },
|
|
||||||
{ id: 'deployments', label: 'Déploiements', icon: ScrollText },
|
|
||||||
{ id: 'gitea', label: 'Gitea', icon: GitBranch },
|
|
||||||
{ id: 'docker', label: 'Docker', icon: Container },
|
|
||||||
{ id: 'monitoring', label: 'Monitoring', icon: Activity },
|
|
||||||
{ id: 'documentation', label: 'Documentation Infra', icon: BookOpen },
|
|
||||||
{ id: 'inventaire', label: 'Inventaire Apps', icon: LayoutList },
|
|
||||||
{ id: 'terminal', label: 'Terminal SSH', icon: TerminalSquare },
|
|
||||||
];
|
|
||||||
export default function Sidebar({
|
|
||||||
currentPage,
|
|
||||||
onNavigate,
|
|
||||||
onLogout,
|
|
||||||
wsConnected,
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<aside className="w-64 bg-dark-900 border-r border-dark-700 flex flex-col h-screen fixed left-0 top-0">
|
|
||||||
{/* Logo */}
|
|
||||||
<div className="p-6 border-b border-dark-700">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="w-10 h-10 rounded-xl bg-primary-600 flex items-center justify-center">
|
|
||||||
<Server className="w-5 h-5 text-white" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1 className="text-lg font-bold text-white">Dashboard</h1>
|
|
||||||
<p className="text-xs text-gray-500">{window.location.hostname.includes('recette') ? 'Recette' : 'Production'}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Navigation */}
|
|
||||||
<nav className="flex-1 p-4 space-y-1 overflow-y-auto">
|
|
||||||
{navItems.map((item) => {
|
|
||||||
const Icon = item.icon;
|
|
||||||
const isActive = currentPage === item.id;
|
|
||||||
const isDoc = item.id === 'documentation';
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={item.id}
|
|
||||||
onClick={() => onNavigate(item.id)}
|
|
||||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
|
|
||||||
isActive
|
|
||||||
? isDoc
|
|
||||||
? 'bg-purple-600/10 text-purple-400 border border-purple-500/20'
|
|
||||||
: 'bg-primary-600/10 text-primary-400 border border-primary-500/20'
|
|
||||||
: isDoc
|
|
||||||
? 'text-purple-400/70 hover:text-purple-300 hover:bg-purple-500/10'
|
|
||||||
: 'text-gray-400 hover:text-gray-200 hover:bg-dark-800'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Icon className="w-4.5 h-4.5" />
|
|
||||||
{item.label}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</nav>
|
|
||||||
{/* Footer */}
|
|
||||||
<div className="p-4 border-t border-dark-700 space-y-3">
|
|
||||||
{/* WebSocket status */}
|
|
||||||
<div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-dark-800">
|
|
||||||
{wsConnected ? (
|
|
||||||
<>
|
|
||||||
<Wifi className="w-4 h-4 text-emerald-400" />
|
|
||||||
<span className="text-xs text-emerald-400">Temps réel actif</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<WifiOff className="w-4 h-4 text-gray-500" />
|
|
||||||
<span className="text-xs text-gray-500">Hors ligne</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={onLogout}
|
|
||||||
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
|
|
||||||
>
|
|
||||||
<LogOut className="w-4.5 h-4.5" />
|
|
||||||
Déconnexion
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
const statusConfig = {
|
|
||||||
online: {
|
|
||||||
label: 'En ligne',
|
|
||||||
className: 'status-online',
|
|
||||||
dotColor: 'bg-emerald-400',
|
|
||||||
},
|
|
||||||
offline: {
|
|
||||||
label: 'Hors ligne',
|
|
||||||
className: 'status-offline',
|
|
||||||
dotColor: 'bg-gray-400',
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
label: 'Erreur',
|
|
||||||
className: 'status-error',
|
|
||||||
dotColor: 'bg-red-400',
|
|
||||||
},
|
|
||||||
unknown: {
|
|
||||||
label: 'Inconnu',
|
|
||||||
className: 'status-warning',
|
|
||||||
dotColor: 'bg-amber-400',
|
|
||||||
},
|
|
||||||
running: {
|
|
||||||
label: 'En cours',
|
|
||||||
className: 'status-warning',
|
|
||||||
dotColor: 'bg-amber-400',
|
|
||||||
},
|
|
||||||
success: {
|
|
||||||
label: 'Succès',
|
|
||||||
className: 'status-online',
|
|
||||||
dotColor: 'bg-emerald-400',
|
|
||||||
},
|
|
||||||
failed: {
|
|
||||||
label: 'Échoué',
|
|
||||||
className: 'status-error',
|
|
||||||
dotColor: 'bg-red-400',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function StatusBadge({ status, size = 'sm' }) {
|
|
||||||
const config = statusConfig[status] || statusConfig.unknown;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<span className={config.className}>
|
|
||||||
<span
|
|
||||||
className={`w-2 h-2 rounded-full ${config.dotColor} mr-1.5 ${
|
|
||||||
status === 'online' || status === 'running' ? 'animate-pulse-dot' : ''
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
{config.label}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
import { useEffect, useRef, useState, useCallback } from 'react';
|
|
||||||
|
|
||||||
export default function useWebSocket(onMessage) {
|
|
||||||
const wsRef = useRef(null);
|
|
||||||
const [connected, setConnected] = useState(false);
|
|
||||||
const reconnectTimeout = useRef(null);
|
|
||||||
|
|
||||||
const connect = useCallback(() => {
|
|
||||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
||||||
const wsUrl = `${protocol}//${window.location.host}/ws`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const ws = new WebSocket(wsUrl);
|
|
||||||
wsRef.current = ws;
|
|
||||||
|
|
||||||
ws.onopen = () => {
|
|
||||||
setConnected(true);
|
|
||||||
console.log('WebSocket connecté');
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onmessage = (event) => {
|
|
||||||
try {
|
|
||||||
const data = JSON.parse(event.data);
|
|
||||||
if (onMessage) onMessage(data);
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Erreur parsing WS message:', e);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onclose = () => {
|
|
||||||
setConnected(false);
|
|
||||||
console.log('WebSocket déconnecté, reconnexion dans 5s...');
|
|
||||||
reconnectTimeout.current = setTimeout(connect, 5000);
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onerror = (err) => {
|
|
||||||
console.error('Erreur WebSocket:', err);
|
|
||||||
ws.close();
|
|
||||||
};
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur connexion WebSocket:', err);
|
|
||||||
reconnectTimeout.current = setTimeout(connect, 5000);
|
|
||||||
}
|
|
||||||
}, [onMessage]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
connect();
|
|
||||||
return () => {
|
|
||||||
if (wsRef.current) wsRef.current.close();
|
|
||||||
if (reconnectTimeout.current) clearTimeout(reconnectTimeout.current);
|
|
||||||
};
|
|
||||||
}, [connect]);
|
|
||||||
|
|
||||||
return { connected };
|
|
||||||
}
|
|
||||||
@@ -1,96 +0,0 @@
|
|||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
@layer base {
|
|
||||||
body {
|
|
||||||
@apply bg-dark-950 text-gray-100 antialiased;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@layer components {
|
|
||||||
.btn-primary {
|
|
||||||
@apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-dark-900 disabled:opacity-50 disabled:cursor-not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
@apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-dark-900 disabled:opacity-50 disabled:cursor-not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
@apply bg-dark-700 hover:bg-dark-600 text-gray-200 font-medium py-2 px-4 rounded-lg transition-colors duration-200 border border-dark-600 focus:outline-none focus:ring-2 focus:ring-dark-500 focus:ring-offset-2 focus:ring-offset-dark-900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
@apply bg-dark-800 border border-dark-700 rounded-xl shadow-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-field {
|
|
||||||
@apply w-full bg-dark-700 border border-dark-600 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge {
|
|
||||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-online {
|
|
||||||
@apply status-badge bg-emerald-500/20 text-emerald-400 border border-emerald-500/30;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-offline {
|
|
||||||
@apply status-badge bg-gray-500/20 text-gray-400 border border-gray-500/30;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-error {
|
|
||||||
@apply status-badge bg-red-500/20 text-red-400 border border-red-500/30;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-warning {
|
|
||||||
@apply status-badge bg-amber-500/20 text-amber-400 border border-amber-500/30;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scrollbar styling */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
@apply bg-dark-900;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
@apply bg-dark-600 rounded-full;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
@apply bg-dark-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
@keyframes pulse-dot {
|
|
||||||
0%, 100% { opacity: 1; }
|
|
||||||
50% { opacity: 0.5; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-pulse-dot {
|
|
||||||
animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Log viewer */
|
|
||||||
.log-viewer {
|
|
||||||
@apply font-mono text-sm leading-relaxed whitespace-pre-wrap break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-viewer .log-timestamp {
|
|
||||||
@apply text-gray-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-viewer .log-error {
|
|
||||||
@apply text-red-400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-viewer .log-success {
|
|
||||||
@apply text-emerald-400;
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import ReactDOM from 'react-dom/client';
|
|
||||||
import App from './App';
|
|
||||||
import './index.css';
|
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
|
||||||
<React.StrictMode>
|
|
||||||
<App />
|
|
||||||
</React.StrictMode>
|
|
||||||
);
|
|
||||||
@@ -1,108 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { Box, RefreshCw, Plus } from 'lucide-react';
|
|
||||||
import AppCard from '../components/AppCard';
|
|
||||||
import AddAppModal from '../components/AddAppModal';
|
|
||||||
import { getApps, getGiteaCommits } from '../utils/api';
|
|
||||||
|
|
||||||
export default function AppsPage({ apps, onRefresh }) {
|
|
||||||
const [commitsMap, setCommitsMap] = useState({});
|
|
||||||
const [showAddModal, setShowAddModal] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Charger les commits pour chaque app
|
|
||||||
apps.forEach((app) => {
|
|
||||||
const owner = app.giteaOwner || 'manus-admin';
|
|
||||||
const repo = app.giteaRepo || app.id;
|
|
||||||
getGiteaCommits(owner, repo)
|
|
||||||
.then((res) => {
|
|
||||||
setCommitsMap((prev) => ({
|
|
||||||
...prev,
|
|
||||||
[app.id]: res.data,
|
|
||||||
}));
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
// Ignorer les erreurs Gitea pour les apps sans dépôt
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}, [apps]);
|
|
||||||
|
|
||||||
const handleAddSuccess = () => {
|
|
||||||
setShowAddModal(false);
|
|
||||||
// Rafraîchir la liste après un délai pour laisser le temps au health check
|
|
||||||
setTimeout(() => {
|
|
||||||
if (onRefresh) onRefresh();
|
|
||||||
}, 5000);
|
|
||||||
// Rafraîchir encore après 15s
|
|
||||||
setTimeout(() => {
|
|
||||||
if (onRefresh) onRefresh();
|
|
||||||
}, 15000);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
|
||||||
<Box className="w-7 h-7 text-primary-400" />
|
|
||||||
Applications
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-400 mt-1">
|
|
||||||
Gérez et surveillez vos applications déployées
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<button onClick={onRefresh} className="btn-secondary flex items-center gap-2">
|
|
||||||
<RefreshCw className="w-4 h-4" />
|
|
||||||
Rafraîchir
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setShowAddModal(true)}
|
|
||||||
className="btn-primary flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<Plus className="w-4 h-4" />
|
|
||||||
Ajouter une application
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Apps List */}
|
|
||||||
{apps.length === 0 ? (
|
|
||||||
<div className="card p-12 text-center">
|
|
||||||
<Box className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
|
||||||
<h3 className="text-lg font-medium text-gray-400">
|
|
||||||
Aucune application
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-600 mt-2">
|
|
||||||
Les applications déployées apparaîtront ici
|
|
||||||
</p>
|
|
||||||
<button
|
|
||||||
onClick={() => setShowAddModal(true)}
|
|
||||||
className="btn-primary mt-4 inline-flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<Plus className="w-4 h-4" />
|
|
||||||
Ajouter votre première application
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-4">
|
|
||||||
{apps.map((app) => (
|
|
||||||
<AppCard
|
|
||||||
key={app.id}
|
|
||||||
app={app}
|
|
||||||
commits={commitsMap[app.id] || []}
|
|
||||||
onRefresh={onRefresh}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Add App Modal */}
|
|
||||||
<AddAppModal
|
|
||||||
isOpen={showAddModal}
|
|
||||||
onClose={() => setShowAddModal(false)}
|
|
||||||
onSuccess={handleAddSuccess}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,190 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import {
|
|
||||||
Activity,
|
|
||||||
Box,
|
|
||||||
Container,
|
|
||||||
Server,
|
|
||||||
Clock,
|
|
||||||
TrendingUp,
|
|
||||||
AlertCircle,
|
|
||||||
CheckCircle2,
|
|
||||||
XCircle,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import { getApps, getSystemInfo } from '../utils/api';
|
|
||||||
import StatusBadge from '../components/StatusBadge';
|
|
||||||
|
|
||||||
function StatCard({ icon: Icon, label, value, color, subtext }) {
|
|
||||||
return (
|
|
||||||
<div className="card p-5">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-400">{label}</p>
|
|
||||||
<p className="text-2xl font-bold text-white mt-1">{value}</p>
|
|
||||||
{subtext && <p className="text-xs text-gray-500 mt-1">{subtext}</p>}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={`w-12 h-12 rounded-xl flex items-center justify-center ${color}`}
|
|
||||||
>
|
|
||||||
<Icon className="w-6 h-6 text-white" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function DashboardPage({ apps }) {
|
|
||||||
const [systemInfo, setSystemInfo] = useState(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
getSystemInfo()
|
|
||||||
.then((res) => setSystemInfo(res.data))
|
|
||||||
.catch(console.error);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const onlineApps = apps.filter((a) => a.status === 'online').length;
|
|
||||||
const offlineApps = apps.filter((a) => a.status === 'offline').length;
|
|
||||||
const errorApps = apps.filter((a) => a.status === 'error').length;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Header */}
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold text-white">Tableau de bord</h2>
|
|
||||||
<p className="text-gray-400 mt-1">
|
|
||||||
Vue d'ensemble de l'infrastructure Manus
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats Grid */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
||||||
<StatCard
|
|
||||||
icon={Box}
|
|
||||||
label="Applications"
|
|
||||||
value={apps.length}
|
|
||||||
color="bg-primary-600"
|
|
||||||
subtext="Applications déployées"
|
|
||||||
/>
|
|
||||||
<StatCard
|
|
||||||
icon={CheckCircle2}
|
|
||||||
label="En ligne"
|
|
||||||
value={onlineApps}
|
|
||||||
color="bg-emerald-600"
|
|
||||||
subtext="Applications fonctionnelles"
|
|
||||||
/>
|
|
||||||
<StatCard
|
|
||||||
icon={XCircle}
|
|
||||||
label="Hors ligne"
|
|
||||||
value={offlineApps}
|
|
||||||
color="bg-gray-600"
|
|
||||||
subtext="Applications arrêtées"
|
|
||||||
/>
|
|
||||||
<StatCard
|
|
||||||
icon={AlertCircle}
|
|
||||||
label="Erreurs"
|
|
||||||
value={errorApps}
|
|
||||||
color="bg-red-600"
|
|
||||||
subtext="Applications en erreur"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* System Info + Apps Overview */}
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
||||||
{/* System Info */}
|
|
||||||
<div className="card p-6">
|
|
||||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
|
||||||
<Server className="w-5 h-5 text-primary-400" />
|
|
||||||
Informations système
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex items-center justify-between py-2 border-b border-dark-700">
|
|
||||||
<span className="text-sm text-gray-400">Serveur</span>
|
|
||||||
<span className="text-sm text-gray-200">
|
|
||||||
78.138.58.109 (Recette)
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between py-2 border-b border-dark-700">
|
|
||||||
<span className="text-sm text-gray-400">Conteneurs actifs</span>
|
|
||||||
<span className="text-sm text-gray-200">
|
|
||||||
{systemInfo?.runningContainers || '...'} /{' '}
|
|
||||||
{systemInfo?.totalContainers || '...'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between py-2 border-b border-dark-700">
|
|
||||||
<span className="text-sm text-gray-400">Gitea</span>
|
|
||||||
<a
|
|
||||||
href="https://git.recette.santinova-soft.org"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-sm text-primary-400 hover:text-primary-300"
|
|
||||||
>
|
|
||||||
git.recette.santinova-soft.org
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between py-2 border-b border-dark-700">
|
|
||||||
<span className="text-sm text-gray-400">Reverse Proxy</span>
|
|
||||||
<span className="text-sm text-gray-200">
|
|
||||||
Traefik + Let's Encrypt
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between py-2">
|
|
||||||
<span className="text-sm text-gray-400">Heure serveur</span>
|
|
||||||
<span className="text-sm text-gray-200">
|
|
||||||
{systemInfo?.serverTime
|
|
||||||
? new Date(systemInfo.serverTime).toLocaleString('fr-FR')
|
|
||||||
: '...'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Apps Quick View */}
|
|
||||||
<div className="card p-6">
|
|
||||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
|
||||||
<Activity className="w-5 h-5 text-primary-400" />
|
|
||||||
État des applications
|
|
||||||
</h3>
|
|
||||||
{apps.length === 0 ? (
|
|
||||||
<p className="text-gray-500 text-sm">Aucune application détectée</p>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-3">
|
|
||||||
{apps.map((app) => (
|
|
||||||
<div
|
|
||||||
key={app.id}
|
|
||||||
className="flex items-center justify-between py-3 px-4 rounded-lg bg-dark-700/50 border border-dark-600/50"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div
|
|
||||||
className={`w-3 h-3 rounded-full ${
|
|
||||||
app.status === 'online'
|
|
||||||
? 'bg-emerald-400 animate-pulse-dot'
|
|
||||||
: app.status === 'error'
|
|
||||||
? 'bg-red-400'
|
|
||||||
: 'bg-gray-500'
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-gray-200">
|
|
||||||
{app.name}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-gray-500">
|
|
||||||
{app.containerName}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{app.health?.recette?.responseTime && (
|
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
{app.health.recette.responseTime}ms
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<StatusBadge status={app.status} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,157 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import {
|
|
||||||
ScrollText,
|
|
||||||
RefreshCw,
|
|
||||||
Clock,
|
|
||||||
User,
|
|
||||||
ChevronDown,
|
|
||||||
ChevronUp,
|
|
||||||
CheckCircle2,
|
|
||||||
XCircle,
|
|
||||||
Loader,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import { getDeployments } from '../utils/api';
|
|
||||||
import StatusBadge from '../components/StatusBadge';
|
|
||||||
|
|
||||||
function formatDate(dateStr) {
|
|
||||||
if (!dateStr) return 'N/A';
|
|
||||||
try {
|
|
||||||
return new Date(dateStr).toLocaleString('fr-FR');
|
|
||||||
} catch {
|
|
||||||
return dateStr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function DeploymentEntry({ deployment }) {
|
|
||||||
const [expanded, setExpanded] = useState(false);
|
|
||||||
|
|
||||||
const statusIcon = {
|
|
||||||
success: <CheckCircle2 className="w-5 h-5 text-emerald-400" />,
|
|
||||||
failed: <XCircle className="w-5 h-5 text-red-400" />,
|
|
||||||
running: <Loader className="w-5 h-5 text-amber-400 animate-spin" />,
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="card overflow-hidden">
|
|
||||||
<div
|
|
||||||
className="p-4 flex items-center justify-between cursor-pointer hover:bg-dark-700/50 transition-colors"
|
|
||||||
onClick={() => setExpanded(!expanded)}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
{statusIcon[deployment.status] || statusIcon.running}
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-gray-200">
|
|
||||||
{deployment.message}
|
|
||||||
</p>
|
|
||||||
<div className="flex items-center gap-4 mt-1">
|
|
||||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
|
||||||
<Clock className="w-3 h-3" />
|
|
||||||
{formatDate(deployment.timestamp)}
|
|
||||||
</span>
|
|
||||||
{deployment.user && (
|
|
||||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
|
||||||
<User className="w-3 h-3" />
|
|
||||||
{deployment.user}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{deployment.duration && (
|
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
Durée: {deployment.duration}s
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<StatusBadge status={deployment.status} />
|
|
||||||
{expanded ? (
|
|
||||||
<ChevronUp className="w-4 h-4 text-gray-500" />
|
|
||||||
) : (
|
|
||||||
<ChevronDown className="w-4 h-4 text-gray-500" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{expanded && deployment.logs && (
|
|
||||||
<div className="px-4 pb-4 border-t border-dark-700">
|
|
||||||
<div className="bg-dark-950 rounded-lg p-4 mt-3 max-h-96 overflow-auto">
|
|
||||||
<pre className="log-viewer text-xs text-gray-400">
|
|
||||||
{deployment.logs}
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function DeploymentsPage() {
|
|
||||||
const [deployments, setDeployments] = useState([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
|
|
||||||
const fetchDeployments = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const res = await getDeployments();
|
|
||||||
setDeployments(res.data);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur chargement déploiements:', err);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchDeployments();
|
|
||||||
const interval = setInterval(fetchDeployments, 10000);
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
|
||||||
<ScrollText className="w-7 h-7 text-primary-400" />
|
|
||||||
Historique des déploiements
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-400 mt-1">
|
|
||||||
Consultez les logs des derniers déploiements
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={fetchDeployments}
|
|
||||||
className="btn-secondary flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
|
||||||
Rafraîchir
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Deployments List */}
|
|
||||||
{loading && deployments.length === 0 ? (
|
|
||||||
<div className="card p-12 text-center">
|
|
||||||
<RefreshCw className="w-8 h-8 text-gray-600 mx-auto mb-4 animate-spin" />
|
|
||||||
<p className="text-gray-400">Chargement...</p>
|
|
||||||
</div>
|
|
||||||
) : deployments.length === 0 ? (
|
|
||||||
<div className="card p-12 text-center">
|
|
||||||
<ScrollText className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
|
||||||
<h3 className="text-lg font-medium text-gray-400">
|
|
||||||
Aucun déploiement
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-600 mt-2">
|
|
||||||
L'historique des déploiements apparaîtra ici après le premier
|
|
||||||
redéploiement
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-3">
|
|
||||||
{deployments.map((d) => (
|
|
||||||
<DeploymentEntry key={d.id} deployment={d} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,164 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { Container, RefreshCw, Clock } from 'lucide-react';
|
|
||||||
import { getContainers } from '../utils/api';
|
|
||||||
|
|
||||||
function formatDate(dateStr) {
|
|
||||||
if (!dateStr) return 'N/A';
|
|
||||||
try {
|
|
||||||
return new Date(dateStr).toLocaleString('fr-FR');
|
|
||||||
} catch {
|
|
||||||
return dateStr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function DockerPage() {
|
|
||||||
const [containers, setContainers] = useState([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
|
|
||||||
const fetchContainers = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const res = await getContainers();
|
|
||||||
setContainers(res.data);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur chargement conteneurs:', err);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchContainers();
|
|
||||||
const interval = setInterval(fetchContainers, 15000);
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const stateColors = {
|
|
||||||
running: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
|
|
||||||
exited: 'text-red-400 bg-red-500/10 border-red-500/20',
|
|
||||||
created: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
|
|
||||||
restarting: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
|
||||||
<Container className="w-7 h-7 text-primary-400" />
|
|
||||||
Conteneurs Docker
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-400 mt-1">
|
|
||||||
Vue d'ensemble de tous les conteneurs sur le serveur
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={fetchContainers}
|
|
||||||
className="btn-secondary flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
|
||||||
Rafraîchir
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Containers Table */}
|
|
||||||
<div className="card overflow-hidden">
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<table className="w-full">
|
|
||||||
<thead>
|
|
||||||
<tr className="border-b border-dark-700">
|
|
||||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
|
||||||
Nom
|
|
||||||
</th>
|
|
||||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
|
||||||
Image
|
|
||||||
</th>
|
|
||||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
|
||||||
État
|
|
||||||
</th>
|
|
||||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
|
||||||
Statut
|
|
||||||
</th>
|
|
||||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
|
||||||
ID
|
|
||||||
</th>
|
|
||||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
|
||||||
Créé
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody className="divide-y divide-dark-700">
|
|
||||||
{loading && containers.length === 0 ? (
|
|
||||||
<tr>
|
|
||||||
<td colSpan="6" className="px-6 py-8 text-center">
|
|
||||||
<RefreshCw className="w-6 h-6 text-gray-600 mx-auto animate-spin" />
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
) : containers.length === 0 ? (
|
|
||||||
<tr>
|
|
||||||
<td
|
|
||||||
colSpan="6"
|
|
||||||
className="px-6 py-8 text-center text-gray-500"
|
|
||||||
>
|
|
||||||
Aucun conteneur trouvé
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
) : (
|
|
||||||
containers.map((c) => (
|
|
||||||
<tr
|
|
||||||
key={c.id}
|
|
||||||
className="hover:bg-dark-700/30 transition-colors"
|
|
||||||
>
|
|
||||||
<td className="px-6 py-3">
|
|
||||||
<span className="text-sm font-medium text-gray-200">
|
|
||||||
{c.names.join(', ')}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-3">
|
|
||||||
<code className="text-xs text-gray-400 bg-dark-700 px-2 py-0.5 rounded">
|
|
||||||
{c.image}
|
|
||||||
</code>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-3">
|
|
||||||
<span
|
|
||||||
className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border ${
|
|
||||||
stateColors[c.state] || stateColors.created
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={`w-1.5 h-1.5 rounded-full mr-1.5 ${
|
|
||||||
c.state === 'running'
|
|
||||||
? 'bg-emerald-400'
|
|
||||||
: c.state === 'exited'
|
|
||||||
? 'bg-red-400'
|
|
||||||
: 'bg-amber-400'
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
{c.state}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-3">
|
|
||||||
<span className="text-xs text-gray-400">{c.status}</span>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-3">
|
|
||||||
<code className="text-xs text-gray-500 font-mono">
|
|
||||||
{c.id}
|
|
||||||
</code>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-3">
|
|
||||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
|
||||||
<Clock className="w-3 h-3" />
|
|
||||||
{formatDate(c.created)}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,420 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import {
|
|
||||||
BookOpen,
|
|
||||||
Server,
|
|
||||||
GitBranch,
|
|
||||||
LayoutDashboard,
|
|
||||||
Globe,
|
|
||||||
Database,
|
|
||||||
Shield,
|
|
||||||
ArrowRight,
|
|
||||||
ChevronDown,
|
|
||||||
ChevronUp,
|
|
||||||
ExternalLink,
|
|
||||||
Activity,
|
|
||||||
Cpu,
|
|
||||||
HardDrive,
|
|
||||||
Network,
|
|
||||||
CheckCircle,
|
|
||||||
Clock,
|
|
||||||
Zap,
|
|
||||||
Package,
|
|
||||||
} from 'lucide-react';
|
|
||||||
|
|
||||||
/* ─────────────────────────────────────────────
|
|
||||||
Données de l'infrastructure
|
|
||||||
───────────────────────────────────────────── */
|
|
||||||
const RECETTE = {
|
|
||||||
label: 'RECETTE',
|
|
||||||
color: 'amber',
|
|
||||||
ip: '78.138.58.109',
|
|
||||||
os: 'Debian GNU/Linux 12',
|
|
||||||
cpu: '4 vCores',
|
|
||||||
ram: '8 Go',
|
|
||||||
disk: '147 Go',
|
|
||||||
infra: [
|
|
||||||
{
|
|
||||||
icon: GitBranch,
|
|
||||||
color: 'purple',
|
|
||||||
name: 'Gitea',
|
|
||||||
url: 'git.recette.santinova-soft.org',
|
|
||||||
desc: 'Dépôt Git — 4 repositories',
|
|
||||||
href: 'https://git.recette.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: LayoutDashboard,
|
|
||||||
color: 'blue',
|
|
||||||
name: 'Dashboard',
|
|
||||||
url: 'dashboard.recette.santinova-soft.org',
|
|
||||||
desc: 'Monitoring CPU / RAM / Disque',
|
|
||||||
href: 'https://dashboard.recette.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Globe,
|
|
||||||
color: 'teal',
|
|
||||||
name: 'Portail Applicatif',
|
|
||||||
url: 'portail.recette.santinova-soft.org',
|
|
||||||
desc: 'Vitrine centralisée des applications',
|
|
||||||
href: 'https://portail.recette.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Shield,
|
|
||||||
color: 'gray',
|
|
||||||
name: 'Traefik',
|
|
||||||
url: 'Reverse Proxy SSL',
|
|
||||||
desc: "Let's Encrypt — Routage dynamique",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
apps: [
|
|
||||||
{
|
|
||||||
icon: '🧾',
|
|
||||||
color: 'green',
|
|
||||||
name: 'Démat. Facturation DSI',
|
|
||||||
url: 'demat-facturation.recette.santinova-soft.org',
|
|
||||||
href: 'https://demat-facturation.recette.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '👁️',
|
|
||||||
color: 'indigo',
|
|
||||||
name: 'Veille Réglementaire',
|
|
||||||
url: 'veille.recette.santinova-soft.org',
|
|
||||||
href: 'https://veille.recette.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '🗺️',
|
|
||||||
color: 'cyan',
|
|
||||||
name: 'SONUM',
|
|
||||||
url: 'sonum.recette.santinova-soft.org',
|
|
||||||
desc: 'Cartographie solutions numériques FEHAP',
|
|
||||||
href: 'https://sonum.recette.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '👤',
|
|
||||||
color: 'pink',
|
|
||||||
name: 'Itinova Contacts',
|
|
||||||
url: 'contacts.recette.santinova-soft.org',
|
|
||||||
href: 'https://contacts.recette.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '🚗',
|
|
||||||
color: 'yellow',
|
|
||||||
name: 'Flotte Véhicules',
|
|
||||||
url: 'flotte.recette.santinova-soft.org',
|
|
||||||
href: 'https://flotte.recette.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '🎧',
|
|
||||||
color: 'orange',
|
|
||||||
name: 'Podcasts Itinova',
|
|
||||||
url: 'podcasts.recette.santinova-soft.org',
|
|
||||||
href: 'https://podcasts.recette.santinova-soft.org',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
const PRODUCTION = {
|
|
||||||
label: 'PRODUCTION',
|
|
||||||
color: 'emerald',
|
|
||||||
ip: '180.149.196.138',
|
|
||||||
os: 'Debian GNU/Linux 12',
|
|
||||||
cpu: '8 vCores',
|
|
||||||
ram: '16 Go',
|
|
||||||
disk: '246 Go',
|
|
||||||
services: [
|
|
||||||
{
|
|
||||||
icon: GitBranch,
|
|
||||||
color: 'purple',
|
|
||||||
name: 'Gitea',
|
|
||||||
url: 'git.santinova-soft.org',
|
|
||||||
desc: 'Dépôt Git principal',
|
|
||||||
href: 'https://git.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: LayoutDashboard,
|
|
||||||
color: 'blue',
|
|
||||||
name: 'Dashboard',
|
|
||||||
url: 'dashboard.santinova-soft.org',
|
|
||||||
desc: 'Monitoring temps réel',
|
|
||||||
href: 'https://dashboard.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Globe,
|
|
||||||
color: 'teal',
|
|
||||||
name: 'Portail Applicatif',
|
|
||||||
url: 'portail.santinova-soft.org',
|
|
||||||
desc: 'Vitrine applicative production',
|
|
||||||
href: 'https://portail.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Shield,
|
|
||||||
color: 'gray',
|
|
||||||
name: 'Traefik',
|
|
||||||
url: 'Reverse Proxy SSL',
|
|
||||||
desc: "Let's Encrypt — Routage dynamique",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
const CICD_STEPS = [
|
|
||||||
{ icon: GitBranch, label: 'Push code', desc: 'Développeur pousse sur Gitea' },
|
|
||||||
{ icon: Zap, label: 'Webhook', desc: 'Gitea déclenche le webhook' },
|
|
||||||
{ icon: Package, label: 'docker compose build', desc: 'Build de la nouvelle image' },
|
|
||||||
{ icon: Server, label: 'docker compose up -d', desc: 'Redémarrage du conteneur' },
|
|
||||||
{ icon: CheckCircle, label: 'Health check', desc: 'Vérification de disponibilité' },
|
|
||||||
];
|
|
||||||
|
|
||||||
/* ─────────────────────────────────────────────
|
|
||||||
Helpers de couleur
|
|
||||||
───────────────────────────────────────────── */
|
|
||||||
const colorMap = {
|
|
||||||
purple: 'border-purple-500/40 bg-purple-500/10 text-purple-300',
|
|
||||||
blue: 'border-blue-500/40 bg-blue-500/10 text-blue-300',
|
|
||||||
teal: 'border-teal-500/40 bg-teal-500/10 text-teal-300',
|
|
||||||
gray: 'border-gray-500/40 bg-gray-500/10 text-gray-300',
|
|
||||||
green: 'border-green-500/40 bg-green-500/10 text-green-300',
|
|
||||||
indigo: 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300',
|
|
||||||
cyan: 'border-cyan-500/40 bg-cyan-500/10 text-cyan-300',
|
|
||||||
pink: 'border-pink-500/40 bg-pink-500/10 text-pink-300',
|
|
||||||
yellow: 'border-yellow-500/40 bg-yellow-500/10 text-yellow-300',
|
|
||||||
orange: 'border-orange-500/40 bg-orange-500/10 text-orange-300',
|
|
||||||
};
|
|
||||||
|
|
||||||
/* ─────────────────────────────────────────────
|
|
||||||
Composants
|
|
||||||
───────────────────────────────────────────── */
|
|
||||||
function ServerBadge({ env }) {
|
|
||||||
const isAmber = env.color === 'amber';
|
|
||||||
const borderColor = isAmber ? 'border-amber-500/30' : 'border-emerald-500/30';
|
|
||||||
const bgColor = isAmber ? 'bg-amber-500/5' : 'bg-emerald-500/5';
|
|
||||||
return (
|
|
||||||
<div className={`flex flex-wrap gap-4 p-3 rounded-xl border ${borderColor} ${bgColor} mb-5`}>
|
|
||||||
{[
|
|
||||||
{ icon: Server, label: env.ip },
|
|
||||||
{ icon: Cpu, label: env.cpu },
|
|
||||||
{ icon: Activity, label: env.ram + ' RAM' },
|
|
||||||
{ icon: HardDrive, label: env.disk + ' Disque' },
|
|
||||||
{ icon: Network, label: env.os },
|
|
||||||
].map(({ icon: Icon, label }) => (
|
|
||||||
<div key={label} className="flex items-center gap-1.5 text-xs text-gray-400">
|
|
||||||
<Icon className="w-3.5 h-3.5 text-gray-500" />
|
|
||||||
<span>{label}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ServiceCard({ item, withDb = false }) {
|
|
||||||
const cls = colorMap[item.color] || colorMap.gray;
|
|
||||||
const Icon = item.icon;
|
|
||||||
return (
|
|
||||||
<div className={`flex items-start gap-3 p-3 rounded-xl border ${cls} transition-all hover:scale-[1.01]`}>
|
|
||||||
<div className="mt-0.5 flex-shrink-0">
|
|
||||||
{typeof Icon === 'string' ? (
|
|
||||||
<span className="text-xl">{Icon}</span>
|
|
||||||
) : (
|
|
||||||
<Icon className="w-5 h-5" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="font-semibold text-sm text-white">{item.name}</span>
|
|
||||||
{item.href && (
|
|
||||||
<a
|
|
||||||
href={item.href}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-gray-500 hover:text-gray-300 transition-colors"
|
|
||||||
>
|
|
||||||
<ExternalLink className="w-3 h-3" />
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-gray-400 truncate">{item.url}</p>
|
|
||||||
{item.desc && <p className="text-xs text-gray-500 mt-0.5">{item.desc}</p>}
|
|
||||||
</div>
|
|
||||||
{withDb && (
|
|
||||||
<div className="flex items-center gap-1 text-xs text-gray-600 flex-shrink-0">
|
|
||||||
<Database className="w-3 h-3" />
|
|
||||||
<span>MySQL</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SectionTitle({ children, color = 'amber' }) {
|
|
||||||
const cls = color === 'amber' ? 'text-amber-400' : 'text-emerald-400';
|
|
||||||
return <h3 className={`text-xs font-bold uppercase tracking-widest ${cls} mb-3`}>{children}</h3>;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ─────────────────────────────────────────────
|
|
||||||
Page principale
|
|
||||||
───────────────────────────────────────────── */
|
|
||||||
export default function DocumentationPage() {
|
|
||||||
const [schemaOpen, setSchemaOpen] = useState(true);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-8 pb-12">
|
|
||||||
{/* ── En-tête ── */}
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center shadow-lg shadow-blue-500/20">
|
|
||||||
<BookOpen className="w-6 h-6 text-white" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1 className="text-2xl font-bold text-white">Documentation Infrastructure</h1>
|
|
||||||
<p className="text-sm text-gray-400">Architecture de déploiement Santinova — Recette & Production</p>
|
|
||||||
</div>
|
|
||||||
<div className="ml-auto flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20">
|
|
||||||
<Clock className="w-3.5 h-3.5 text-emerald-400" />
|
|
||||||
<span className="text-xs text-emerald-400">Mis à jour le 04 Mai 2026</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Schéma d'architecture ── */}
|
|
||||||
<div className="rounded-2xl border border-dark-700 bg-dark-900 overflow-hidden">
|
|
||||||
<button
|
|
||||||
onClick={() => setSchemaOpen((v) => !v)}
|
|
||||||
className="w-full flex items-center justify-between px-6 py-4 hover:bg-dark-800 transition-colors"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="w-8 h-8 rounded-lg bg-blue-600/20 flex items-center justify-center">
|
|
||||||
<Network className="w-4 h-4 text-blue-400" />
|
|
||||||
</div>
|
|
||||||
<span className="font-semibold text-white">Schéma d'Architecture</span>
|
|
||||||
</div>
|
|
||||||
{schemaOpen ? (
|
|
||||||
<ChevronUp className="w-5 h-5 text-gray-400" />
|
|
||||||
) : (
|
|
||||||
<ChevronDown className="w-5 h-5 text-gray-400" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
{schemaOpen && (
|
|
||||||
<div className="px-6 pb-6">
|
|
||||||
<img
|
|
||||||
src="/infra_schema_v2.png"
|
|
||||||
alt="Schéma d'architecture infrastructure Santinova"
|
|
||||||
className="w-full rounded-xl border border-dark-700 shadow-2xl"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Grille Recette / CI-CD / Production ── */}
|
|
||||||
<div className="grid grid-cols-1 xl:grid-cols-[1fr_auto_1fr] gap-6">
|
|
||||||
|
|
||||||
{/* ── RECETTE ── */}
|
|
||||||
<div className="rounded-2xl border border-amber-500/30 bg-dark-900 p-6">
|
|
||||||
<div className="flex items-center gap-3 mb-4">
|
|
||||||
<div className="w-3 h-3 rounded-full bg-amber-400 shadow-lg shadow-amber-400/50" />
|
|
||||||
<h2 className="text-xl font-bold text-amber-400 tracking-wide">RECETTE</h2>
|
|
||||||
<span className="ml-auto text-xs text-gray-500 font-mono">78.138.58.109</span>
|
|
||||||
</div>
|
|
||||||
<ServerBadge env={RECETTE} />
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
||||||
{/* Infra de base */}
|
|
||||||
<div>
|
|
||||||
<SectionTitle color="amber">Infrastructure de base</SectionTitle>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{RECETTE.infra.map((item) => (
|
|
||||||
<ServiceCard key={item.name} item={item} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Applications */}
|
|
||||||
<div>
|
|
||||||
<SectionTitle color="amber">Applications déployées</SectionTitle>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{RECETTE.apps.map((item) => (
|
|
||||||
<ServiceCard key={item.name} item={item} withDb />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── CI/CD Pipeline ── */}
|
|
||||||
<div className="flex flex-col items-center justify-center gap-3 px-4 xl:px-2 py-6">
|
|
||||||
<span className="text-xs font-bold uppercase tracking-widest text-blue-400 mb-2">CI/CD</span>
|
|
||||||
{CICD_STEPS.map((step, i) => {
|
|
||||||
const Icon = step.icon;
|
|
||||||
return (
|
|
||||||
<React.Fragment key={step.label}>
|
|
||||||
<div className="flex flex-col items-center gap-1 group">
|
|
||||||
<div className="w-10 h-10 rounded-xl bg-blue-600/20 border border-blue-500/30 flex items-center justify-center group-hover:bg-blue-600/30 transition-colors">
|
|
||||||
<Icon className="w-5 h-5 text-blue-400" />
|
|
||||||
</div>
|
|
||||||
<span className="text-xs text-gray-400 text-center max-w-[80px] leading-tight">{step.label}</span>
|
|
||||||
</div>
|
|
||||||
{i < CICD_STEPS.length - 1 && (
|
|
||||||
<div className="w-px h-4 bg-gradient-to-b from-blue-500/50 to-blue-500/10" />
|
|
||||||
)}
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<div className="mt-4 flex items-center gap-2 px-3 py-2 rounded-xl bg-blue-600/10 border border-blue-500/20">
|
|
||||||
<ArrowRight className="w-4 h-4 text-blue-400" />
|
|
||||||
<span className="text-xs text-blue-300 font-semibold whitespace-nowrap">Promotion → PROD</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── PRODUCTION ── */}
|
|
||||||
<div className="rounded-2xl border border-emerald-500/30 bg-dark-900 p-6">
|
|
||||||
<div className="flex items-center gap-3 mb-4">
|
|
||||||
<div className="w-3 h-3 rounded-full bg-emerald-400 shadow-lg shadow-emerald-400/50" />
|
|
||||||
<h2 className="text-xl font-bold text-emerald-400 tracking-wide">PRODUCTION</h2>
|
|
||||||
<span className="ml-auto text-xs text-gray-500 font-mono">180.149.196.138</span>
|
|
||||||
</div>
|
|
||||||
<ServerBadge env={PRODUCTION} />
|
|
||||||
|
|
||||||
<SectionTitle color="emerald">Services actifs</SectionTitle>
|
|
||||||
<div className="space-y-2 mb-4">
|
|
||||||
{PRODUCTION.services.map((item) => (
|
|
||||||
<ServiceCard key={item.name} item={item} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Carte "Applications à venir" */}
|
|
||||||
<div className="flex items-center gap-3 p-3 rounded-xl border border-dashed border-gray-600/40 bg-gray-500/5">
|
|
||||||
<Package className="w-5 h-5 text-gray-500" />
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-semibold text-gray-400">Applications à venir</p>
|
|
||||||
<p className="text-xs text-gray-600">Déploiement progressif via CI/CD</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Badge metrics-collector */}
|
|
||||||
<div className="mt-4 flex items-center gap-2 px-3 py-2 rounded-lg bg-emerald-500/5 border border-emerald-500/20">
|
|
||||||
<Activity className="w-3.5 h-3.5 text-emerald-400" />
|
|
||||||
<span className="text-xs text-emerald-400">metrics-collector · systemd · actif</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ── Légende technologique ── */}
|
|
||||||
<div className="rounded-2xl border border-dark-700 bg-dark-900 p-6">
|
|
||||||
<h3 className="text-sm font-bold text-white mb-4">Stack Technologique</h3>
|
|
||||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
|
||||||
{[
|
|
||||||
{ emoji: '🐳', label: 'Docker', desc: 'Conteneurisation' },
|
|
||||||
{ emoji: '🔒', label: 'HTTPS', desc: "Let's Encrypt SSL" },
|
|
||||||
{ emoji: '🗄️', label: 'MySQL 8.0', desc: 'Base de données' },
|
|
||||||
{ emoji: '🔀', label: 'Traefik', desc: 'Reverse Proxy' },
|
|
||||||
].map((t) => (
|
|
||||||
<div
|
|
||||||
key={t.label}
|
|
||||||
className="flex items-center gap-3 p-3 rounded-xl bg-dark-800 border border-dark-700"
|
|
||||||
>
|
|
||||||
<span className="text-2xl">{t.emoji}</span>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-semibold text-white">{t.label}</p>
|
|
||||||
<p className="text-xs text-gray-500">{t.desc}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,227 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import {
|
|
||||||
GitBranch,
|
|
||||||
RefreshCw,
|
|
||||||
ExternalLink,
|
|
||||||
Lock,
|
|
||||||
Unlock,
|
|
||||||
GitCommit,
|
|
||||||
Clock,
|
|
||||||
User,
|
|
||||||
Code,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import { getGiteaRepos, getGiteaCommits } from '../utils/api';
|
|
||||||
|
|
||||||
function formatDate(dateStr) {
|
|
||||||
if (!dateStr) return 'N/A';
|
|
||||||
try {
|
|
||||||
return new Date(dateStr).toLocaleString('fr-FR');
|
|
||||||
} catch {
|
|
||||||
return dateStr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatSize(kb) {
|
|
||||||
if (!kb) return 'N/A';
|
|
||||||
if (kb < 1024) return `${kb} KB`;
|
|
||||||
return `${(kb / 1024).toFixed(1)} MB`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function GiteaPage() {
|
|
||||||
const [repos, setRepos] = useState([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [selectedRepo, setSelectedRepo] = useState(null);
|
|
||||||
const [commits, setCommits] = useState([]);
|
|
||||||
const [loadingCommits, setLoadingCommits] = useState(false);
|
|
||||||
|
|
||||||
const fetchRepos = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const res = await getGiteaRepos();
|
|
||||||
setRepos(res.data);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur chargement repos:', err);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchCommits = async (fullName) => {
|
|
||||||
setLoadingCommits(true);
|
|
||||||
setSelectedRepo(fullName);
|
|
||||||
try {
|
|
||||||
const [owner, repo] = fullName.split('/');
|
|
||||||
const res = await getGiteaCommits(owner, repo);
|
|
||||||
setCommits(res.data);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur chargement commits:', err);
|
|
||||||
setCommits([]);
|
|
||||||
} finally {
|
|
||||||
setLoadingCommits(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchRepos();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
|
||||||
<GitBranch className="w-7 h-7 text-primary-400" />
|
|
||||||
Dépôts Gitea
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-400 mt-1">
|
|
||||||
Explorez les dépôts sur{' '}
|
|
||||||
<a
|
|
||||||
href="https://git.recette.santinova-soft.org"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-primary-400 hover:text-primary-300"
|
|
||||||
>
|
|
||||||
git.recette.santinova-soft.org
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={fetchRepos}
|
|
||||||
className="btn-secondary flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
|
||||||
Rafraîchir
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
||||||
{/* Repos List */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
<h3 className="text-sm font-medium text-gray-400 uppercase tracking-wider">
|
|
||||||
Dépôts ({repos.length})
|
|
||||||
</h3>
|
|
||||||
{loading ? (
|
|
||||||
<div className="card p-8 text-center">
|
|
||||||
<RefreshCw className="w-6 h-6 text-gray-600 mx-auto animate-spin" />
|
|
||||||
</div>
|
|
||||||
) : repos.length === 0 ? (
|
|
||||||
<div className="card p-8 text-center">
|
|
||||||
<GitBranch className="w-10 h-10 text-gray-600 mx-auto mb-3" />
|
|
||||||
<p className="text-gray-400">Aucun dépôt trouvé</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
repos.map((repo) => (
|
|
||||||
<div
|
|
||||||
key={repo.id}
|
|
||||||
className={`card p-4 cursor-pointer transition-all ${
|
|
||||||
selectedRepo === repo.fullName
|
|
||||||
? 'border-primary-500/50 bg-primary-500/5'
|
|
||||||
: 'hover:border-dark-600'
|
|
||||||
}`}
|
|
||||||
onClick={() => fetchCommits(repo.fullName)}
|
|
||||||
>
|
|
||||||
<div className="flex items-start justify-between">
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Code className="w-4 h-4 text-primary-400" />
|
|
||||||
<h4 className="text-sm font-semibold text-white">
|
|
||||||
{repo.name}
|
|
||||||
</h4>
|
|
||||||
{repo.private ? (
|
|
||||||
<Lock className="w-3 h-3 text-gray-500" />
|
|
||||||
) : (
|
|
||||||
<Unlock className="w-3 h-3 text-gray-500" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-gray-500 mt-1">
|
|
||||||
{repo.description || 'Pas de description'}
|
|
||||||
</p>
|
|
||||||
<div className="flex items-center gap-4 mt-2">
|
|
||||||
{repo.language && (
|
|
||||||
<span className="text-xs text-gray-400">
|
|
||||||
{repo.language}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
{formatSize(repo.size)}
|
|
||||||
</span>
|
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
Mis à jour: {formatDate(repo.updatedAt)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href={repo.htmlUrl}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-gray-500 hover:text-primary-400 transition-colors"
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
<ExternalLink className="w-4 h-4" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Commits */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
<h3 className="text-sm font-medium text-gray-400 uppercase tracking-wider">
|
|
||||||
{selectedRepo
|
|
||||||
? `Commits — ${selectedRepo}`
|
|
||||||
: 'Sélectionnez un dépôt'}
|
|
||||||
</h3>
|
|
||||||
{!selectedRepo ? (
|
|
||||||
<div className="card p-8 text-center">
|
|
||||||
<GitCommit className="w-10 h-10 text-gray-600 mx-auto mb-3" />
|
|
||||||
<p className="text-gray-400 text-sm">
|
|
||||||
Cliquez sur un dépôt pour voir ses commits
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : loadingCommits ? (
|
|
||||||
<div className="card p-8 text-center">
|
|
||||||
<RefreshCw className="w-6 h-6 text-gray-600 mx-auto animate-spin" />
|
|
||||||
</div>
|
|
||||||
) : commits.length === 0 ? (
|
|
||||||
<div className="card p-8 text-center">
|
|
||||||
<GitCommit className="w-10 h-10 text-gray-600 mx-auto mb-3" />
|
|
||||||
<p className="text-gray-400">Aucun commit trouvé</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-2">
|
|
||||||
{commits.map((commit, idx) => (
|
|
||||||
<div key={commit.sha || idx} className="card p-3">
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<div className="mt-1">
|
|
||||||
<GitCommit className="w-4 h-4 text-gray-500" />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-sm text-gray-200 truncate">
|
|
||||||
{commit.message}
|
|
||||||
</p>
|
|
||||||
<div className="flex items-center gap-3 mt-1">
|
|
||||||
<code className="text-xs bg-dark-700 text-primary-400 px-1.5 py-0.5 rounded font-mono">
|
|
||||||
{commit.shortSha}
|
|
||||||
</code>
|
|
||||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
|
||||||
<User className="w-3 h-3" />
|
|
||||||
{commit.author}
|
|
||||||
</span>
|
|
||||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
|
||||||
<Clock className="w-3 h-3" />
|
|
||||||
{formatDate(commit.date)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,458 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { Table, RefreshCw, GitBranch, CheckCircle, XCircle, ExternalLink, Tag, AlertCircle, ArrowUp, ArrowDown, Minus, AlertTriangle } from 'lucide-react';
|
|
||||||
import api from '../utils/api';
|
|
||||||
|
|
||||||
const APPS_CONFIG = [
|
|
||||||
{
|
|
||||||
id: 'itinova-contacts',
|
|
||||||
name: 'Itinova Contacts',
|
|
||||||
repoName: 'itinova-contacts',
|
|
||||||
urlRecette: 'https://contacts.recette.santinova-soft.org',
|
|
||||||
urlProd: 'https://contacts.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'itinova-podcasts',
|
|
||||||
name: 'Itinova Podcasts',
|
|
||||||
repoName: 'itinova-podcasts',
|
|
||||||
urlRecette: 'https://podcasts.recette.santinova-soft.org',
|
|
||||||
urlProd: 'https://podcasts.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'veille-reglementaire',
|
|
||||||
name: 'Veille Réglementaire',
|
|
||||||
repoName: 'veille-reglementaire',
|
|
||||||
urlRecette: 'https://veille.recette.santinova-soft.org',
|
|
||||||
urlProd: 'https://veille.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'itinova-vehicle-exchange',
|
|
||||||
name: 'Itinova Gestion de Flotte',
|
|
||||||
repoName: 'itinova-vehicle-exchange',
|
|
||||||
urlRecette: 'https://flotte.recette.santinova-soft.org',
|
|
||||||
urlProd: 'https://flotte.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'sonum',
|
|
||||||
name: 'SONUM',
|
|
||||||
repoName: 'sonum',
|
|
||||||
urlRecette: 'https://sonum.recette.santinova-soft.org',
|
|
||||||
urlProd: 'https://sonum.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'demat-facturation-dsi',
|
|
||||||
name: 'Démat. Facturation DSI',
|
|
||||||
repoName: 'demat-facturation-dsi',
|
|
||||||
urlRecette: 'https://demat-facturation.recette.santinova-soft.org',
|
|
||||||
urlProd: 'https://demat-facturation.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'facturation-santinova',
|
|
||||||
name: 'Facturation Santinova',
|
|
||||||
repoName: 'facturation-santinova',
|
|
||||||
urlRecette: 'https://facturation.recette.santinova-soft.org',
|
|
||||||
urlProd: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'formation-manager-itinova',
|
|
||||||
name: 'Formation Manager',
|
|
||||||
repoName: 'formation-manager-itinova',
|
|
||||||
urlRecette: 'https://formation.recette.santinova-soft.org',
|
|
||||||
urlProd: 'https://formations.itinova.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'pilotage-masse-salariale',
|
|
||||||
name: 'Pilotage Masse Salariale',
|
|
||||||
repoName: 'pilotage-masse-salariale',
|
|
||||||
urlRecette: 'https://pilotage-ms.recette.santinova-soft.org',
|
|
||||||
urlProd: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'itinova-budget-si',
|
|
||||||
name: 'Gestion Budget Informatique',
|
|
||||||
repoName: 'itinova-budget-si',
|
|
||||||
urlRecette: 'https://budget-si.recette.santinova-soft.org',
|
|
||||||
urlProd: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'falc-generator',
|
|
||||||
name: 'FALC Generator',
|
|
||||||
repoName: 'falc-generator',
|
|
||||||
urlRecette: 'https://falc.recette.santinova-soft.org',
|
|
||||||
urlProd: 'https://falc.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'portail-santinova',
|
|
||||||
name: 'Portail Applicatif',
|
|
||||||
repoName: 'portail-santinova',
|
|
||||||
urlRecette: 'https://portail.recette.santinova-soft.org',
|
|
||||||
urlProd: 'https://portail.santinova-soft.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'manus-dashboard',
|
|
||||||
name: 'Dashboard',
|
|
||||||
repoName: 'manus-dashboard',
|
|
||||||
urlRecette: 'https://dashboard.recette.santinova-soft.org',
|
|
||||||
urlProd: 'https://dashboard.santinova-soft.org',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
|
|
||||||
function SyncBadge({ versionRecette, versionProd }) {
|
|
||||||
// Extraire le SHA (7 premiers caractères avant l'espace)
|
|
||||||
const shaRec = versionRecette ? versionRecette.split(' ')[0] : null;
|
|
||||||
const shaProd = versionProd ? versionProd.split(' ')[0] : null;
|
|
||||||
// Extraire la date entre parenthèses pour comparer
|
|
||||||
const dateRec = versionRecette ? versionRecette.match(/\((.+?)\)/)?.[1] : null;
|
|
||||||
const dateProd = versionProd ? versionProd.match(/\((.+?)\)/)?.[1] : null;
|
|
||||||
|
|
||||||
if (!shaRec && !shaProd) {
|
|
||||||
return (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500 italic">
|
|
||||||
<Minus className="w-3 h-3" />
|
|
||||||
Non déployé
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (!shaRec) {
|
|
||||||
return (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-green-900/40 text-green-300 border border-green-700/40" title="Uniquement en production">
|
|
||||||
<ArrowDown className="w-3 h-3" />
|
|
||||||
Prod en avance
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (!shaProd) {
|
|
||||||
return (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-orange-900/40 text-orange-300 border border-orange-700/40" title="Recette déployée, production vide">
|
|
||||||
<ArrowUp className="w-3 h-3" />
|
|
||||||
Non déployé en prod
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (shaRec === shaProd) {
|
|
||||||
return (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-900/40 text-emerald-300 border border-emerald-700/40" title="Versions identiques">
|
|
||||||
<CheckCircle className="w-3 h-3" />
|
|
||||||
Synchronisé
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
// Comparer les dates pour savoir qui est en avance
|
|
||||||
// Format fr-FR : dd/mm/yyyy
|
|
||||||
const parseDate = (s) => {
|
|
||||||
if (!s) return null;
|
|
||||||
const parts = s.split('/');
|
|
||||||
if (parts.length === 3) return new Date(`${parts[2]}-${parts[1]}-${parts[0]}`);
|
|
||||||
return new Date(s);
|
|
||||||
};
|
|
||||||
const dRec = parseDate(dateRec);
|
|
||||||
const dProd = parseDate(dateProd);
|
|
||||||
|
|
||||||
if (dRec && dProd) {
|
|
||||||
if (dRec > dProd) {
|
|
||||||
return (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-orange-900/40 text-orange-300 border border-orange-700/40" title={`Recette : ${versionRecette} | Prod : ${versionProd}`}>
|
|
||||||
<ArrowUp className="w-3 h-3" />
|
|
||||||
Recette en avance
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
} else if (dProd > dRec) {
|
|
||||||
return (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-green-900/40 text-green-300 border border-green-700/40" title={`Recette : ${versionRecette} | Prod : ${versionProd}`}>
|
|
||||||
<ArrowDown className="w-3 h-3" />
|
|
||||||
Prod en avance
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// SHA différents mais dates non comparables
|
|
||||||
return (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-yellow-900/40 text-yellow-300 border border-yellow-700/40" title={`Recette : ${versionRecette} | Prod : ${versionProd}`}>
|
|
||||||
<AlertTriangle className="w-3 h-3" />
|
|
||||||
Divergent
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function VersionBadge({ version, loading }) {
|
|
||||||
if (!version) {
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-700 text-gray-400 animate-pulse">
|
|
||||||
<Tag className="w-3 h-3" />
|
|
||||||
Chargement...
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500 italic">
|
|
||||||
<AlertCircle className="w-3 h-3" />
|
|
||||||
Non déployé
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-blue-900/40 text-blue-300 border border-blue-700/40">
|
|
||||||
<Tag className="w-3 h-3" />
|
|
||||||
{version}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function RepoBadge({ present, url, label }) {
|
|
||||||
if (!present) {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<XCircle className="w-4 h-4 text-red-500 flex-shrink-0" />
|
|
||||||
<span className="text-gray-500 text-xs">Absent</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-0.5">
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0" />
|
|
||||||
<a
|
|
||||||
href={url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-xs text-primary-400 hover:text-primary-300 hover:underline flex items-center gap-1 truncate max-w-[180px]"
|
|
||||||
title={url}
|
|
||||||
>
|
|
||||||
{label}
|
|
||||||
<ExternalLink className="w-3 h-3 flex-shrink-0" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function InventairePage() {
|
|
||||||
const [inventory, setInventory] = useState([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [lastUpdate, setLastUpdate] = useState(null);
|
|
||||||
|
|
||||||
const fetchInventory = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const res = await api.get('/inventory');
|
|
||||||
setInventory(res.data);
|
|
||||||
setLastUpdate(new Date());
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur chargement inventaire:', err);
|
|
||||||
// Fallback : construire l'inventaire depuis la config statique
|
|
||||||
const fallback = APPS_CONFIG.map((app) => ({
|
|
||||||
...app,
|
|
||||||
repoRecette: { present: false, url: null, version: null },
|
|
||||||
repoProd: { present: false, url: null, version: null },
|
|
||||||
}));
|
|
||||||
setInventory(fallback);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Auto-refresh toutes les 5 minutes
|
|
||||||
useEffect(() => {
|
|
||||||
fetchInventory();
|
|
||||||
const interval = setInterval(fetchInventory, 5 * 60 * 1000);
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
|
||||||
<Table className="w-7 h-7 text-emerald-400" />
|
|
||||||
Inventaire des Applications
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-400 mt-1">
|
|
||||||
État des dépôts Git et versions déployées par environnement
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{lastUpdate && (
|
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
Mis à jour : {lastUpdate.toLocaleTimeString('fr-FR')}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
onClick={fetchInventory}
|
|
||||||
disabled={loading}
|
|
||||||
className="btn-secondary flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
|
||||||
Rafraîchir
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats */}
|
|
||||||
{!loading && inventory.length > 0 && (
|
|
||||||
<div className="grid grid-cols-5 gap-4">
|
|
||||||
<div className="card p-4 text-center border border-dark-700">
|
|
||||||
<div className="text-2xl font-bold text-white">{inventory.length}</div>
|
|
||||||
<div className="text-xs text-gray-400 mt-1">Applications totales</div>
|
|
||||||
</div>
|
|
||||||
<div className="card p-4 text-center border border-orange-700/30">
|
|
||||||
<div className="text-2xl font-bold text-orange-400">
|
|
||||||
{inventory.filter((a) => a.repoRecette?.present).length}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-400 mt-1">Dépôts Recette</div>
|
|
||||||
</div>
|
|
||||||
<div className="card p-4 text-center border border-green-700/30">
|
|
||||||
<div className="text-2xl font-bold text-green-400">
|
|
||||||
{inventory.filter((a) => a.repoProd?.present).length}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-400 mt-1">Dépôts Production</div>
|
|
||||||
</div>
|
|
||||||
<div className="card p-4 text-center border border-emerald-700/30">
|
|
||||||
<div className="text-2xl font-bold text-emerald-400">
|
|
||||||
{inventory.filter((a) => {
|
|
||||||
const shaRec = a.repoRecette?.version?.split(' ')[0];
|
|
||||||
const shaProd = a.repoProd?.version?.split(' ')[0];
|
|
||||||
return shaRec && shaProd && shaRec === shaProd;
|
|
||||||
}).length}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-400 mt-1">Synchronisés</div>
|
|
||||||
</div>
|
|
||||||
<div className="card p-4 text-center border border-blue-700/30">
|
|
||||||
<div className="text-2xl font-bold text-blue-400">
|
|
||||||
{inventory.filter((a) => a.repoRecette?.present && a.repoProd?.present).length}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-400 mt-1">Déployés sur les 2 envs</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{/* Légende */}
|
|
||||||
<div className="flex items-center gap-6 text-xs text-gray-400">
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
|
||||||
Dépôt présent
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<XCircle className="w-4 h-4 text-red-500" />
|
|
||||||
Dépôt absent
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<Tag className="w-4 h-4 text-blue-400" />
|
|
||||||
Version (dernier commit)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Tableau */}
|
|
||||||
<div className="card overflow-hidden">
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<table className="w-full">
|
|
||||||
<thead>
|
|
||||||
<tr className="border-b border-dark-700">
|
|
||||||
<th className="text-left px-4 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider w-48">
|
|
||||||
Application
|
|
||||||
</th>
|
|
||||||
<th className="text-center px-4 py-3 text-xs font-semibold text-purple-400 uppercase tracking-wider">
|
|
||||||
<div className="flex items-center justify-center gap-2">
|
|
||||||
<ArrowUp className="w-4 h-4" />
|
|
||||||
Synchronisation
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th className="text-center px-4 py-3 text-xs font-semibold text-orange-400 uppercase tracking-wider" colSpan={2}>
|
|
||||||
<div className="flex items-center justify-center gap-2">
|
|
||||||
<GitBranch className="w-4 h-4" />
|
|
||||||
Recette
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th className="text-center px-4 py-3 text-xs font-semibold text-green-400 uppercase tracking-wider" colSpan={2}>
|
|
||||||
<div className="flex items-center justify-center gap-2">
|
|
||||||
<GitBranch className="w-4 h-4" />
|
|
||||||
Production
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
<tr className="border-b border-dark-700 bg-dark-800/50">
|
|
||||||
<th className="px-4 py-2"></th>
|
|
||||||
<th className="px-4 py-2"></th>
|
|
||||||
<th className="text-center px-3 py-2 text-xs text-gray-500 font-medium">Dépôt Git</th>
|
|
||||||
<th className="text-center px-3 py-2 text-xs text-gray-500 font-medium">Version</th>
|
|
||||||
<th className="text-center px-3 py-2 text-xs text-gray-500 font-medium">Dépôt Git</th>
|
|
||||||
<th className="text-center px-3 py-2 text-xs text-gray-500 font-medium">Version</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody className="divide-y divide-dark-700">
|
|
||||||
{loading && inventory.length === 0
|
|
||||||
? APPS_CONFIG.map((app) => (
|
|
||||||
<tr key={app.id} className="hover:bg-dark-800/30 transition-colors">
|
|
||||||
<td className="px-4 py-3">
|
|
||||||
<span className="text-sm font-medium text-white">{app.name}</span>
|
|
||||||
</td>
|
|
||||||
{[...Array(5)].map((_, i) => (
|
|
||||||
<td key={i} className="px-3 py-3 text-center">
|
|
||||||
<div className="h-5 bg-dark-700 rounded animate-pulse mx-auto w-24" />
|
|
||||||
</td>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
))
|
|
||||||
: inventory.map((app) => {
|
|
||||||
const isInfra = ['portail-santinova', 'manus-dashboard'].includes(app.id);
|
|
||||||
return (
|
|
||||||
<tr key={app.id} className={`hover:bg-dark-800/30 transition-colors${isInfra ? ' bg-amber-950/10 border-l-2 border-amber-500/40' : ''}`}>
|
|
||||||
<td className="px-4 py-3">
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className={`text-sm font-medium ${isInfra ? 'text-amber-300' : 'text-white'}`}>{app.name}</span>
|
|
||||||
{isInfra && (
|
|
||||||
<span className="text-xs px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-400 border border-amber-500/25 font-semibold">Infra</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<span className="text-xs text-gray-500 mt-0.5">{app.repoName}</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
{/* Synchronisation */}
|
|
||||||
<td className="px-3 py-3 text-center">
|
|
||||||
<SyncBadge
|
|
||||||
versionRecette={app.repoRecette?.version}
|
|
||||||
versionProd={app.repoProd?.version}
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
{/* Recette - Dépôt */}
|
|
||||||
<td className="px-3 py-3">
|
|
||||||
<RepoBadge
|
|
||||||
present={app.repoRecette?.present}
|
|
||||||
url={app.repoRecette?.url}
|
|
||||||
label={`git.recette/…/${app.repoName}`}
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
{/* Recette - Version */}
|
|
||||||
<td className="px-3 py-3 text-center">
|
|
||||||
<VersionBadge
|
|
||||||
version={app.repoRecette?.version}
|
|
||||||
loading={loading}
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
{/* Prod - Dépôt */}
|
|
||||||
<td className="px-3 py-3">
|
|
||||||
<RepoBadge
|
|
||||||
present={app.repoProd?.present}
|
|
||||||
url={app.repoProd?.url}
|
|
||||||
label={`git.santinova/…/${app.repoName}`}
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
{/* Prod - Version */}
|
|
||||||
<td className="px-3 py-3 text-center">
|
|
||||||
<VersionBadge
|
|
||||||
version={app.repoProd?.version}
|
|
||||||
loading={loading}
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,140 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { Lock, User, AlertCircle, Server } from 'lucide-react';
|
|
||||||
import { login } from '../utils/api';
|
|
||||||
|
|
||||||
export default function LoginPage({ onLogin }) {
|
|
||||||
const [username, setUsername] = useState('');
|
|
||||||
const [password, setPassword] = useState('');
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
const handleSubmit = async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setError('');
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await login(username, password);
|
|
||||||
localStorage.setItem('dashboard_token', response.data.token);
|
|
||||||
onLogin(response.data);
|
|
||||||
} catch (err) {
|
|
||||||
setError(
|
|
||||||
err.response?.data?.error || 'Erreur de connexion. Veuillez réessayer.'
|
|
||||||
);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center bg-dark-950 px-4">
|
|
||||||
<div className="w-full max-w-md">
|
|
||||||
{/* Logo / Header */}
|
|
||||||
<div className="text-center mb-8">
|
|
||||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-600 mb-4">
|
|
||||||
<Server className="w-8 h-8 text-white" />
|
|
||||||
</div>
|
|
||||||
<h1 className="text-2xl font-bold text-white">
|
|
||||||
Dashboard {window.location.hostname.includes('recette') ? 'Recette' : 'Production'}
|
|
||||||
</h1>
|
|
||||||
<p className="text-gray-400 mt-2">Gestion des applications</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Login Form */}
|
|
||||||
<div className="card p-8">
|
|
||||||
<form onSubmit={handleSubmit} className="space-y-6">
|
|
||||||
{error && (
|
|
||||||
<div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm">
|
|
||||||
<AlertCircle className="w-4 h-4 flex-shrink-0" />
|
|
||||||
<span>{error}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
htmlFor="username"
|
|
||||||
className="block text-sm font-medium text-gray-300 mb-2"
|
|
||||||
>
|
|
||||||
Nom d'utilisateur
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
|
|
||||||
<input
|
|
||||||
id="username"
|
|
||||||
type="text"
|
|
||||||
value={username}
|
|
||||||
onChange={(e) => setUsername(e.target.value)}
|
|
||||||
className="input-field pl-11"
|
|
||||||
placeholder="Entrez votre identifiant"
|
|
||||||
required
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
htmlFor="password"
|
|
||||||
className="block text-sm font-medium text-gray-300 mb-2"
|
|
||||||
>
|
|
||||||
Mot de passe
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
|
|
||||||
<input
|
|
||||||
id="password"
|
|
||||||
type="password"
|
|
||||||
value={password}
|
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
|
||||||
className="input-field pl-11"
|
|
||||||
placeholder="Entrez votre mot de passe"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={loading}
|
|
||||||
className="btn-primary w-full flex items-center justify-center gap-2 py-3"
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<>
|
|
||||||
<svg
|
|
||||||
className="animate-spin h-5 w-5"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<circle
|
|
||||||
className="opacity-25"
|
|
||||||
cx="12"
|
|
||||||
cy="12"
|
|
||||||
r="10"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="4"
|
|
||||||
fill="none"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
className="opacity-75"
|
|
||||||
fill="currentColor"
|
|
||||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
Connexion...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Lock className="w-4 h-4" />
|
|
||||||
Se connecter
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-center text-gray-600 text-sm mt-6">
|
|
||||||
Santinova Soft — Serveur de recette
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,251 +0,0 @@
|
|||||||
import React, { useState, useEffect, useCallback } from 'react';
|
|
||||||
import {
|
|
||||||
Cpu,
|
|
||||||
MemoryStick,
|
|
||||||
HardDrive,
|
|
||||||
Network,
|
|
||||||
Activity,
|
|
||||||
RefreshCw,
|
|
||||||
Clock,
|
|
||||||
Server,
|
|
||||||
TrendingUp,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import { getServerMetrics } from '../utils/api';
|
|
||||||
|
|
||||||
function formatBytes(bytes) {
|
|
||||||
if (!bytes || bytes === 0) return '0 B';
|
|
||||||
const k = 1024;
|
|
||||||
const sizes = ['B', 'Ko', 'Mo', 'Go', 'To'];
|
|
||||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
||||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatUptime(seconds) {
|
|
||||||
if (!seconds) return 'N/A';
|
|
||||||
const days = Math.floor(seconds / 86400);
|
|
||||||
const hours = Math.floor((seconds % 86400) / 3600);
|
|
||||||
const mins = Math.floor((seconds % 3600) / 60);
|
|
||||||
if (days > 0) return `${days}j ${hours}h ${mins}m`;
|
|
||||||
if (hours > 0) return `${hours}h ${mins}m`;
|
|
||||||
return `${mins}m`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function GaugeBar({ value, max = 100, color = 'primary', label, sublabel }) {
|
|
||||||
const pct = Math.min(100, Math.round((value / max) * 100));
|
|
||||||
const colorMap = {
|
|
||||||
primary: { bar: 'bg-primary-500', text: 'text-primary-400', border: 'border-primary-500/30' },
|
|
||||||
emerald: { bar: 'bg-emerald-500', text: 'text-emerald-400', border: 'border-emerald-500/30' },
|
|
||||||
amber: { bar: 'bg-amber-500', text: 'text-amber-400', border: 'border-amber-500/30' },
|
|
||||||
red: { bar: 'bg-red-500', text: 'text-red-400', border: 'border-red-500/30' },
|
|
||||||
};
|
|
||||||
const dangerColor = pct > 85 ? 'red' : pct > 65 ? 'amber' : color;
|
|
||||||
const c = colorMap[dangerColor] || colorMap.primary;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`card p-5 border ${c.border}`}>
|
|
||||||
<div className="flex items-center justify-between mb-3">
|
|
||||||
<span className="text-sm font-medium text-gray-300">{label}</span>
|
|
||||||
<span className={`text-2xl font-bold ${c.text}`}>{pct}%</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-full bg-dark-700 rounded-full h-3 mb-3 overflow-hidden">
|
|
||||||
<div
|
|
||||||
className={`h-3 rounded-full transition-all duration-700 ${c.bar}`}
|
|
||||||
style={{ width: `${pct}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-gray-500">{sublabel}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function MetricCard({ icon: Icon, label, value, sub, color = 'primary' }) {
|
|
||||||
const colorMap = {
|
|
||||||
primary: 'text-primary-400 bg-primary-500/10 border-primary-500/20',
|
|
||||||
emerald: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
|
|
||||||
amber: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
|
|
||||||
blue: 'text-blue-400 bg-blue-500/10 border-blue-500/20',
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div className={`card p-5 border ${colorMap[color]}`}>
|
|
||||||
<div className="flex items-start gap-4">
|
|
||||||
<div className={`p-3 rounded-xl border ${colorMap[color]}`}>
|
|
||||||
<Icon className="w-6 h-6" />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-xs text-gray-500 uppercase tracking-wider mb-1">{label}</p>
|
|
||||||
<p className="text-xl font-bold text-white truncate">{value}</p>
|
|
||||||
{sub && <p className="text-xs text-gray-500 mt-1">{sub}</p>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function MonitoringPage() {
|
|
||||||
const [metrics, setMetrics] = useState(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [lastUpdate, setLastUpdate] = useState(null);
|
|
||||||
const [autoRefresh, setAutoRefresh] = useState(true);
|
|
||||||
|
|
||||||
const fetchMetrics = useCallback(async () => {
|
|
||||||
try {
|
|
||||||
const res = await getServerMetrics();
|
|
||||||
setMetrics(res.data);
|
|
||||||
setLastUpdate(new Date());
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur métriques:', err);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchMetrics();
|
|
||||||
}, [fetchMetrics]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!autoRefresh) return;
|
|
||||||
const interval = setInterval(fetchMetrics, 10000);
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, [autoRefresh, fetchMetrics]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
|
||||||
<Activity className="w-7 h-7 text-primary-400" />
|
|
||||||
Monitoring Serveur
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-400 mt-1">
|
|
||||||
Consommation des ressources en temps réel
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{lastUpdate && (
|
|
||||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
|
||||||
<Clock className="w-3.5 h-3.5" />
|
|
||||||
Mis à jour : {lastUpdate.toLocaleTimeString('fr-FR')}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
onClick={() => setAutoRefresh((v) => !v)}
|
|
||||||
className={`btn-secondary text-sm flex items-center gap-2 ${autoRefresh ? 'text-emerald-400' : ''}`}
|
|
||||||
>
|
|
||||||
<Activity className="w-4 h-4" />
|
|
||||||
{autoRefresh ? 'Auto (10s)' : 'Manuel'}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={fetchMetrics}
|
|
||||||
disabled={loading}
|
|
||||||
className="btn-secondary flex items-center gap-2 text-sm"
|
|
||||||
>
|
|
||||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
|
||||||
Rafraîchir
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{loading && !metrics ? (
|
|
||||||
<div className="card p-12 text-center">
|
|
||||||
<RefreshCw className="w-8 h-8 text-primary-400 animate-spin mx-auto mb-3" />
|
|
||||||
<p className="text-gray-400">Chargement des métriques...</p>
|
|
||||||
</div>
|
|
||||||
) : metrics?.error ? (
|
|
||||||
<div className="card p-8 text-center border border-red-500/20">
|
|
||||||
<p className="text-red-400">Erreur : {metrics.error}</p>
|
|
||||||
</div>
|
|
||||||
) : metrics ? (
|
|
||||||
<>
|
|
||||||
{/* Jauges principales */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
||||||
<GaugeBar
|
|
||||||
value={metrics.cpu?.usage || 0}
|
|
||||||
label="Processeur (CPU)"
|
|
||||||
sublabel={`Load avg: ${metrics.load?.load1?.toFixed(2)} / ${metrics.load?.load5?.toFixed(2)} / ${metrics.load?.load15?.toFixed(2)}`}
|
|
||||||
color="primary"
|
|
||||||
/>
|
|
||||||
<GaugeBar
|
|
||||||
value={metrics.memory?.usagePercent || 0}
|
|
||||||
label="Mémoire RAM"
|
|
||||||
sublabel={`${formatBytes(metrics.memory?.used)} utilisés sur ${formatBytes(metrics.memory?.total)} — ${formatBytes(metrics.memory?.available)} disponibles`}
|
|
||||||
color="emerald"
|
|
||||||
/>
|
|
||||||
<GaugeBar
|
|
||||||
value={metrics.disk?.usagePercent || 0}
|
|
||||||
label="Espace Disque"
|
|
||||||
sublabel={`${formatBytes(metrics.disk?.used)} utilisés sur ${formatBytes(metrics.disk?.total)} — ${formatBytes(metrics.disk?.free)} libres`}
|
|
||||||
color="amber"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Métriques détaillées */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
||||||
<MetricCard
|
|
||||||
icon={Server}
|
|
||||||
label="Uptime serveur"
|
|
||||||
value={formatUptime(metrics.uptime)}
|
|
||||||
sub="Depuis le dernier redémarrage"
|
|
||||||
color="primary"
|
|
||||||
/>
|
|
||||||
<MetricCard
|
|
||||||
icon={TrendingUp}
|
|
||||||
label="Charge système (1 min)"
|
|
||||||
value={metrics.load?.load1?.toFixed(2) || 'N/A'}
|
|
||||||
sub={`5 min: ${metrics.load?.load5?.toFixed(2)} — 15 min: ${metrics.load?.load15?.toFixed(2)}`}
|
|
||||||
color="blue"
|
|
||||||
/>
|
|
||||||
<MetricCard
|
|
||||||
icon={Network}
|
|
||||||
label="Réseau — Reçu"
|
|
||||||
value={formatBytes(metrics.network?.rx)}
|
|
||||||
sub="Total depuis le démarrage"
|
|
||||||
color="emerald"
|
|
||||||
/>
|
|
||||||
<MetricCard
|
|
||||||
icon={Network}
|
|
||||||
label="Réseau — Envoyé"
|
|
||||||
value={formatBytes(metrics.network?.tx)}
|
|
||||||
sub="Total depuis le démarrage"
|
|
||||||
color="amber"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Tableau récapitulatif */}
|
|
||||||
<div className="card overflow-hidden">
|
|
||||||
<div className="px-6 py-4 border-b border-dark-700">
|
|
||||||
<h3 className="text-base font-semibold text-white flex items-center gap-2">
|
|
||||||
<HardDrive className="w-5 h-5 text-primary-400" />
|
|
||||||
Récapitulatif des ressources
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="divide-y divide-dark-700">
|
|
||||||
{[
|
|
||||||
{ label: 'CPU — Utilisation', value: `${metrics.cpu?.usage?.toFixed(1) || 0}%`, status: metrics.cpu?.usage > 85 ? 'critical' : metrics.cpu?.usage > 65 ? 'warning' : 'ok' },
|
|
||||||
{ label: 'RAM — Utilisée', value: `${formatBytes(metrics.memory?.used)} / ${formatBytes(metrics.memory?.total)}`, status: metrics.memory?.usagePercent > 85 ? 'critical' : metrics.memory?.usagePercent > 65 ? 'warning' : 'ok' },
|
|
||||||
{ label: 'RAM — Disponible', value: formatBytes(metrics.memory?.available), status: 'ok' },
|
|
||||||
{ label: 'Disque — Utilisé', value: `${formatBytes(metrics.disk?.used)} / ${formatBytes(metrics.disk?.total)}`, status: metrics.disk?.usagePercent > 85 ? 'critical' : metrics.disk?.usagePercent > 65 ? 'warning' : 'ok' },
|
|
||||||
{ label: 'Disque — Libre', value: formatBytes(metrics.disk?.free), status: 'ok' },
|
|
||||||
{ label: 'Réseau — Trafic entrant', value: formatBytes(metrics.network?.rx), status: 'ok' },
|
|
||||||
{ label: 'Réseau — Trafic sortant', value: formatBytes(metrics.network?.tx), status: 'ok' },
|
|
||||||
{ label: 'Uptime', value: formatUptime(metrics.uptime), status: 'ok' },
|
|
||||||
].map((row) => (
|
|
||||||
<div key={row.label} className="px-6 py-3 flex items-center justify-between hover:bg-dark-800/50 transition-colors">
|
|
||||||
<span className="text-sm text-gray-400">{row.label}</span>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<span className="text-sm font-medium text-white">{row.value}</span>
|
|
||||||
<span className={`w-2 h-2 rounded-full ${
|
|
||||||
row.status === 'critical' ? 'bg-red-400' :
|
|
||||||
row.status === 'warning' ? 'bg-amber-400' : 'bg-emerald-400'
|
|
||||||
}`} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,449 +0,0 @@
|
|||||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
||||||
import { Terminal, Wifi, WifiOff, X, Plus, ChevronDown } from 'lucide-react';
|
|
||||||
|
|
||||||
// Serveurs SSH prédéfinis
|
|
||||||
const PRESET_SERVERS = [
|
|
||||||
{
|
|
||||||
id: 'recette',
|
|
||||||
label: 'Recette (78.138.58.109)',
|
|
||||||
host: '78.138.58.109',
|
|
||||||
port: 22,
|
|
||||||
username: 'root',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'production',
|
|
||||||
label: 'Production (180.149.196.138)',
|
|
||||||
host: '180.149.196.138',
|
|
||||||
port: 22,
|
|
||||||
username: 'root',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function TerminalPage() {
|
|
||||||
const terminalRef = useRef(null);
|
|
||||||
const xtermRef = useRef(null);
|
|
||||||
const fitAddonRef = useRef(null);
|
|
||||||
const wsRef = useRef(null);
|
|
||||||
const [connected, setConnected] = useState(false);
|
|
||||||
const [connecting, setConnecting] = useState(false);
|
|
||||||
const [xtermLoaded, setXtermLoaded] = useState(false);
|
|
||||||
|
|
||||||
// Formulaire de connexion
|
|
||||||
const [form, setForm] = useState({
|
|
||||||
preset: 'recette',
|
|
||||||
host: '78.138.58.109',
|
|
||||||
port: 22,
|
|
||||||
username: 'root',
|
|
||||||
password: '',
|
|
||||||
});
|
|
||||||
const [showForm, setShowForm] = useState(true);
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
|
|
||||||
// Charger xterm.js dynamiquement depuis CDN
|
|
||||||
useEffect(() => {
|
|
||||||
const loadXterm = async () => {
|
|
||||||
if (window.Terminal) {
|
|
||||||
setXtermLoaded(true);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Charger le CSS xterm
|
|
||||||
const link = document.createElement('link');
|
|
||||||
link.rel = 'stylesheet';
|
|
||||||
link.href = 'https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css';
|
|
||||||
document.head.appendChild(link);
|
|
||||||
|
|
||||||
// Charger xterm.js
|
|
||||||
await loadScript('https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js');
|
|
||||||
await loadScript('https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js');
|
|
||||||
|
|
||||||
setXtermLoaded(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
loadXterm();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const loadScript = (src) => {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const script = document.createElement('script');
|
|
||||||
script.src = src;
|
|
||||||
script.onload = resolve;
|
|
||||||
script.onerror = reject;
|
|
||||||
document.head.appendChild(script);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Initialiser xterm quand il est chargé et que le terminal est visible
|
|
||||||
useEffect(() => {
|
|
||||||
if (!xtermLoaded || !terminalRef.current || xtermRef.current) return;
|
|
||||||
|
|
||||||
const term = new window.Terminal({
|
|
||||||
cursorBlink: true,
|
|
||||||
fontSize: 14,
|
|
||||||
fontFamily: '"Cascadia Code", "Fira Code", "JetBrains Mono", monospace',
|
|
||||||
theme: {
|
|
||||||
background: '#0d1117',
|
|
||||||
foreground: '#e6edf3',
|
|
||||||
cursor: '#58a6ff',
|
|
||||||
cursorAccent: '#0d1117',
|
|
||||||
black: '#484f58',
|
|
||||||
red: '#ff7b72',
|
|
||||||
green: '#3fb950',
|
|
||||||
yellow: '#d29922',
|
|
||||||
blue: '#58a6ff',
|
|
||||||
magenta: '#bc8cff',
|
|
||||||
cyan: '#39c5cf',
|
|
||||||
white: '#b1bac4',
|
|
||||||
brightBlack: '#6e7681',
|
|
||||||
brightRed: '#ffa198',
|
|
||||||
brightGreen: '#56d364',
|
|
||||||
brightYellow: '#e3b341',
|
|
||||||
brightBlue: '#79c0ff',
|
|
||||||
brightMagenta: '#d2a8ff',
|
|
||||||
brightCyan: '#56d4dd',
|
|
||||||
brightWhite: '#f0f6fc',
|
|
||||||
},
|
|
||||||
scrollback: 1000,
|
|
||||||
allowProposedApi: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
const fitAddon = new window.FitAddon.FitAddon();
|
|
||||||
term.loadAddon(fitAddon);
|
|
||||||
term.open(terminalRef.current);
|
|
||||||
fitAddon.fit();
|
|
||||||
|
|
||||||
xtermRef.current = term;
|
|
||||||
fitAddonRef.current = fitAddon;
|
|
||||||
|
|
||||||
term.writeln('\x1b[1;34m╔══════════════════════════════════════════════════╗\x1b[0m');
|
|
||||||
term.writeln('\x1b[1;34m║ Terminal SSH — Dashboard Recette Santinova ║\x1b[0m');
|
|
||||||
term.writeln('\x1b[1;34m╚══════════════════════════════════════════════════╝\x1b[0m');
|
|
||||||
term.writeln('');
|
|
||||||
term.writeln('\x1b[90mSélectionnez un serveur et connectez-vous pour démarrer.\x1b[0m');
|
|
||||||
term.writeln('');
|
|
||||||
|
|
||||||
// Gérer la saisie utilisateur
|
|
||||||
term.onData((data) => {
|
|
||||||
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
|
|
||||||
wsRef.current.send(JSON.stringify({ type: 'input', data }));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Gérer le redimensionnement
|
|
||||||
const resizeObserver = new ResizeObserver(() => {
|
|
||||||
if (fitAddonRef.current) {
|
|
||||||
fitAddonRef.current.fit();
|
|
||||||
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
|
|
||||||
wsRef.current.send(JSON.stringify({
|
|
||||||
type: 'resize',
|
|
||||||
rows: term.rows,
|
|
||||||
cols: term.cols,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (terminalRef.current) {
|
|
||||||
resizeObserver.observe(terminalRef.current);
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
resizeObserver.disconnect();
|
|
||||||
};
|
|
||||||
}, [xtermLoaded]);
|
|
||||||
|
|
||||||
const handlePresetChange = (presetId) => {
|
|
||||||
const preset = PRESET_SERVERS.find(s => s.id === presetId);
|
|
||||||
if (preset) {
|
|
||||||
setForm(prev => ({
|
|
||||||
...prev,
|
|
||||||
preset: presetId,
|
|
||||||
host: preset.host,
|
|
||||||
port: preset.port,
|
|
||||||
username: preset.username,
|
|
||||||
}));
|
|
||||||
} else {
|
|
||||||
setForm(prev => ({ ...prev, preset: 'custom' }));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleConnect = useCallback(() => {
|
|
||||||
if (!form.host || !form.username || !form.password) {
|
|
||||||
setError('Hôte, utilisateur et mot de passe sont requis');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setError('');
|
|
||||||
setConnecting(true);
|
|
||||||
setShowForm(false);
|
|
||||||
|
|
||||||
const token = localStorage.getItem('dashboard_token');
|
|
||||||
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
||||||
const wsUrl = `${wsProtocol}//${window.location.host}/ws-ssh?token=${token}`;
|
|
||||||
|
|
||||||
const ws = new WebSocket(wsUrl);
|
|
||||||
wsRef.current = ws;
|
|
||||||
|
|
||||||
ws.onopen = () => {
|
|
||||||
ws.send(JSON.stringify({
|
|
||||||
type: 'connect',
|
|
||||||
host: form.host,
|
|
||||||
port: parseInt(form.port),
|
|
||||||
username: form.username,
|
|
||||||
password: form.password,
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onmessage = (event) => {
|
|
||||||
try {
|
|
||||||
const msg = JSON.parse(event.data);
|
|
||||||
|
|
||||||
switch (msg.type) {
|
|
||||||
case 'status':
|
|
||||||
if (xtermRef.current) {
|
|
||||||
xtermRef.current.writeln(`\x1b[33m${msg.message}\x1b[0m`);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'connected':
|
|
||||||
setConnected(true);
|
|
||||||
setConnecting(false);
|
|
||||||
if (xtermRef.current) {
|
|
||||||
xtermRef.current.writeln(`\x1b[32m✓ ${msg.message}\x1b[0m`);
|
|
||||||
xtermRef.current.writeln('');
|
|
||||||
xtermRef.current.focus();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'output':
|
|
||||||
if (xtermRef.current) {
|
|
||||||
const data = atob(msg.data);
|
|
||||||
xtermRef.current.write(data);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'disconnected':
|
|
||||||
setConnected(false);
|
|
||||||
setConnecting(false);
|
|
||||||
if (xtermRef.current) {
|
|
||||||
xtermRef.current.writeln('');
|
|
||||||
xtermRef.current.writeln(`\x1b[33m⚠ ${msg.message}\x1b[0m`);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'error':
|
|
||||||
setConnected(false);
|
|
||||||
setConnecting(false);
|
|
||||||
setError(msg.message);
|
|
||||||
if (xtermRef.current) {
|
|
||||||
xtermRef.current.writeln(`\x1b[31m✗ Erreur: ${msg.message}\x1b[0m`);
|
|
||||||
}
|
|
||||||
setShowForm(true);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Erreur parsing message SSH:', err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onclose = () => {
|
|
||||||
setConnected(false);
|
|
||||||
setConnecting(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onerror = () => {
|
|
||||||
setConnected(false);
|
|
||||||
setConnecting(false);
|
|
||||||
setError('Erreur de connexion WebSocket');
|
|
||||||
setShowForm(true);
|
|
||||||
};
|
|
||||||
}, [form]);
|
|
||||||
|
|
||||||
const handleDisconnect = () => {
|
|
||||||
if (wsRef.current) {
|
|
||||||
wsRef.current.send(JSON.stringify({ type: 'disconnect' }));
|
|
||||||
wsRef.current.close();
|
|
||||||
wsRef.current = null;
|
|
||||||
}
|
|
||||||
setConnected(false);
|
|
||||||
setConnecting(false);
|
|
||||||
setShowForm(true);
|
|
||||||
if (xtermRef.current) {
|
|
||||||
xtermRef.current.writeln('');
|
|
||||||
xtermRef.current.writeln('\x1b[90mDéconnecté. Configurez une nouvelle connexion.\x1b[0m');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
|
||||||
<Terminal className="w-7 h-7 text-emerald-400" />
|
|
||||||
Terminal SSH
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-400 mt-1">
|
|
||||||
Connexion SSH sécurisée aux serveurs de l'infrastructure
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{connected ? (
|
|
||||||
<>
|
|
||||||
<span className="flex items-center gap-2 text-emerald-400 text-sm">
|
|
||||||
<Wifi className="w-4 h-4" />
|
|
||||||
Connecté à {form.host}
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
onClick={handleDisconnect}
|
|
||||||
className="flex items-center gap-2 px-3 py-1.5 bg-red-600/20 text-red-400 border border-red-500/30 rounded-lg text-sm hover:bg-red-600/30 transition-colors"
|
|
||||||
>
|
|
||||||
<X className="w-4 h-4" />
|
|
||||||
Déconnecter
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
) : connecting ? (
|
|
||||||
<span className="flex items-center gap-2 text-yellow-400 text-sm">
|
|
||||||
<div className="w-4 h-4 border-2 border-yellow-400 border-t-transparent rounded-full animate-spin" />
|
|
||||||
Connexion en cours...
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="flex items-center gap-2 text-gray-500 text-sm">
|
|
||||||
<WifiOff className="w-4 h-4" />
|
|
||||||
Non connecté
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Formulaire de connexion */}
|
|
||||||
{showForm && (
|
|
||||||
<div className="bg-dark-800 border border-dark-600 rounded-xl p-6">
|
|
||||||
<h3 className="text-white font-semibold mb-4 flex items-center gap-2">
|
|
||||||
<Plus className="w-4 h-4 text-primary-400" />
|
|
||||||
Nouvelle connexion SSH
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div className="mb-4 px-4 py-3 bg-red-900/30 border border-red-500/40 rounded-lg text-red-400 text-sm">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
{/* Serveur prédéfini */}
|
|
||||||
<div className="md:col-span-2">
|
|
||||||
<label className="block text-sm text-gray-400 mb-1">Serveur prédéfini</label>
|
|
||||||
<div className="relative">
|
|
||||||
<select
|
|
||||||
value={form.preset}
|
|
||||||
onChange={(e) => handlePresetChange(e.target.value)}
|
|
||||||
className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm appearance-none focus:outline-none focus:border-primary-500"
|
|
||||||
>
|
|
||||||
{PRESET_SERVERS.map(s => (
|
|
||||||
<option key={s.id} value={s.id}>{s.label}</option>
|
|
||||||
))}
|
|
||||||
<option value="custom">Serveur personnalisé...</option>
|
|
||||||
</select>
|
|
||||||
<ChevronDown className="absolute right-3 top-3 w-4 h-4 text-gray-400 pointer-events-none" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Hôte */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm text-gray-400 mb-1">Hôte / IP</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={form.host}
|
|
||||||
onChange={(e) => setForm(prev => ({ ...prev, host: e.target.value, preset: 'custom' }))}
|
|
||||||
placeholder="192.168.1.1"
|
|
||||||
className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-primary-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Port */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm text-gray-400 mb-1">Port SSH</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
value={form.port}
|
|
||||||
onChange={(e) => setForm(prev => ({ ...prev, port: e.target.value }))}
|
|
||||||
placeholder="22"
|
|
||||||
className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-primary-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Utilisateur */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm text-gray-400 mb-1">Utilisateur</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={form.username}
|
|
||||||
onChange={(e) => setForm(prev => ({ ...prev, username: e.target.value }))}
|
|
||||||
placeholder="root"
|
|
||||||
className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-primary-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Mot de passe */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm text-gray-400 mb-1">Mot de passe</label>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
value={form.password}
|
|
||||||
onChange={(e) => setForm(prev => ({ ...prev, password: e.target.value }))}
|
|
||||||
placeholder="••••••••"
|
|
||||||
onKeyDown={(e) => e.key === 'Enter' && handleConnect()}
|
|
||||||
className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-primary-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-4 flex justify-end">
|
|
||||||
<button
|
|
||||||
onClick={handleConnect}
|
|
||||||
disabled={connecting}
|
|
||||||
className="flex items-center gap-2 px-5 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<Terminal className="w-4 h-4" />
|
|
||||||
Se connecter
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Terminal xterm.js */}
|
|
||||||
<div className="bg-dark-900 border border-dark-600 rounded-xl overflow-hidden">
|
|
||||||
{/* Barre de titre style terminal */}
|
|
||||||
<div className="flex items-center gap-2 px-4 py-3 bg-dark-800 border-b border-dark-600">
|
|
||||||
<div className="w-3 h-3 rounded-full bg-red-500/70" />
|
|
||||||
<div className="w-3 h-3 rounded-full bg-yellow-500/70" />
|
|
||||||
<div className="w-3 h-3 rounded-full bg-green-500/70" />
|
|
||||||
<span className="ml-2 text-xs text-gray-500 font-mono">
|
|
||||||
{connected ? `${form.username}@${form.host}` : 'terminal — non connecté'}
|
|
||||||
</span>
|
|
||||||
{connected && !showForm && (
|
|
||||||
<button
|
|
||||||
onClick={() => setShowForm(!showForm)}
|
|
||||||
className="ml-auto text-xs text-gray-500 hover:text-gray-300 transition-colors"
|
|
||||||
>
|
|
||||||
{showForm ? 'Masquer' : 'Nouvelle connexion'}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Zone du terminal */}
|
|
||||||
<div
|
|
||||||
ref={terminalRef}
|
|
||||||
style={{ height: '500px', padding: '8px', backgroundColor: '#0d1117' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{!xtermLoaded && (
|
|
||||||
<div className="text-center text-gray-500 text-sm py-4">
|
|
||||||
Chargement du terminal...
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
const api = axios.create({
|
|
||||||
baseURL: '/api',
|
|
||||||
withCredentials: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Intercepteur pour gérer les erreurs d'auth
|
|
||||||
api.interceptors.request.use((config) => {
|
|
||||||
const token = localStorage.getItem('dashboard_token');
|
|
||||||
if (token) {
|
|
||||||
config.headers.Authorization = `Bearer ${token}`;
|
|
||||||
}
|
|
||||||
return config;
|
|
||||||
});
|
|
||||||
|
|
||||||
api.interceptors.response.use(
|
|
||||||
(response) => response,
|
|
||||||
(error) => {
|
|
||||||
if (error.response && error.response.status === 401) {
|
|
||||||
localStorage.removeItem('dashboard_token');
|
|
||||||
window.location.href = '/login';
|
|
||||||
}
|
|
||||||
return Promise.reject(error);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
export default api;
|
|
||||||
|
|
||||||
// Auth
|
|
||||||
export const login = (username, password) =>
|
|
||||||
api.post('/auth/login', { username, password });
|
|
||||||
|
|
||||||
export const logout = () => api.post('/auth/logout');
|
|
||||||
|
|
||||||
export const getMe = () => api.get('/auth/me');
|
|
||||||
|
|
||||||
// Apps
|
|
||||||
export const getApps = () => api.get('/apps');
|
|
||||||
export const getApp = (id) => api.get(`/apps/${id}`);
|
|
||||||
export const checkApp = (id) => api.post(`/apps/${id}/check`);
|
|
||||||
export const deployApp = (id) => api.post(`/apps/${id}/deploy`);
|
|
||||||
export const getAppLogs = (id, tail = 100) =>
|
|
||||||
api.get(`/apps/${id}/logs`, { params: { tail } });
|
|
||||||
|
|
||||||
// App creation
|
|
||||||
export const getAvailableStacks = () => api.get('/apps-config/stacks');
|
|
||||||
export const createApp = (formData) =>
|
|
||||||
api.post('/apps-config/create', formData, {
|
|
||||||
headers: { 'Content-Type': 'multipart/form-data' },
|
|
||||||
timeout: 600000, // 10 minutes timeout
|
|
||||||
});
|
|
||||||
|
|
||||||
// Deployments
|
|
||||||
export const getDeployments = (appId) =>
|
|
||||||
api.get('/deployments', { params: { appId } });
|
|
||||||
|
|
||||||
// Gitea
|
|
||||||
export const getGiteaRepos = () => api.get('/gitea/repos');
|
|
||||||
export const getGiteaCommits = (owner, repo) =>
|
|
||||||
api.get(`/gitea/repos/${owner}/${repo}/commits`);
|
|
||||||
|
|
||||||
// Docker
|
|
||||||
export const getContainers = () => api.get('/docker/containers');
|
|
||||||
|
|
||||||
// System
|
|
||||||
export const getSystemInfo = () => api.get('/system/info');
|
|
||||||
export const getServerMetrics = () => api.get('/system/metrics');
|
|
||||||
|
|
||||||
// Container control
|
|
||||||
export const startApp = (id) => api.post(`/apps/${id}/start`);
|
|
||||||
export const stopApp = (id) => api.post(`/apps/${id}/stop`);
|
|
||||||
export const restartApp = (id) => api.post(`/apps/${id}/restart`);
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
export default {
|
|
||||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
primary: {
|
|
||||||
50: '#eff6ff',
|
|
||||||
100: '#dbeafe',
|
|
||||||
200: '#bfdbfe',
|
|
||||||
300: '#93c5fd',
|
|
||||||
400: '#60a5fa',
|
|
||||||
500: '#3b82f6',
|
|
||||||
600: '#2563eb',
|
|
||||||
700: '#1d4ed8',
|
|
||||||
800: '#1e40af',
|
|
||||||
900: '#1e3a8a',
|
|
||||||
950: '#172554',
|
|
||||||
},
|
|
||||||
dark: {
|
|
||||||
50: '#f8fafc',
|
|
||||||
100: '#f1f5f9',
|
|
||||||
200: '#e2e8f0',
|
|
||||||
300: '#cbd5e1',
|
|
||||||
400: '#94a3b8',
|
|
||||||
500: '#64748b',
|
|
||||||
600: '#475569',
|
|
||||||
700: '#334155',
|
|
||||||
800: '#1e293b',
|
|
||||||
900: '#0f172a',
|
|
||||||
950: '#020617',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
};
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
import { defineConfig } from 'vite';
|
|
||||||
import react from '@vitejs/plugin-react';
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [react()],
|
|
||||||
server: {
|
|
||||||
proxy: {
|
|
||||||
'/api': 'http://localhost:3001',
|
|
||||||
'/ws': {
|
|
||||||
target: 'ws://localhost:3001',
|
|
||||||
ws: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
build: {
|
|
||||||
outDir: 'dist',
|
|
||||||
sourcemap: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -434,7 +434,7 @@ function addDynamicApp(appDef) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function initDynamicApps() {
|
function initDynamicApps() {
|
||||||
// 1. Charger les apps depuis .dashboard-apps.json (créées via l'interface)
|
// 1. Charger les apps depuis .dashboard-apps.json (legacy)
|
||||||
const dynamicApps = loadDynamicApps();
|
const dynamicApps = loadDynamicApps();
|
||||||
for (const app of dynamicApps) {
|
for (const app of dynamicApps) {
|
||||||
const existingInConfig = config.apps.findIndex((a) => a.id === app.id);
|
const existingInConfig = config.apps.findIndex((a) => a.id === app.id);
|
||||||
@@ -442,39 +442,32 @@ function initDynamicApps() {
|
|||||||
config.apps.push(app);
|
config.apps.push(app);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// 2. Scanner les dossiers app.json (découverte automatique)
|
||||||
// 2. Découverte automatique : scanner les dossiers apps/*.json
|
|
||||||
let discovered = 0;
|
|
||||||
try {
|
try {
|
||||||
const appsBasePath = config.appsBasePath;
|
const appsBasePath = config.appsBasePath || process.env.APPS_BASE_PATH || '/opt/manus-deploy/apps';
|
||||||
if (fs.existsSync(appsBasePath)) {
|
const entries = fs.readdirSync(appsBasePath, { withFileTypes: true });
|
||||||
const entries = fs.readdirSync(appsBasePath, { withFileTypes: true });
|
let scanned = 0;
|
||||||
for (const entry of entries) {
|
for (const entry of entries) {
|
||||||
if (!entry.isDirectory()) continue;
|
if (!entry.isDirectory()) continue;
|
||||||
const appJsonPath = path.join(appsBasePath, entry.name, 'app.json');
|
const appJsonPath = path.join(appsBasePath, entry.name, 'app.json');
|
||||||
if (!fs.existsSync(appJsonPath)) continue;
|
if (!fs.existsSync(appJsonPath)) continue;
|
||||||
try {
|
try {
|
||||||
const appDef = JSON.parse(fs.readFileSync(appJsonPath, 'utf-8'));
|
const appDef = JSON.parse(fs.readFileSync(appJsonPath, 'utf-8'));
|
||||||
if (!appDef.id) continue;
|
if (!appDef.id) continue;
|
||||||
// Ne pas écraser une app déjà en config (statique ou dynamique)
|
const existingInConfig = config.apps.findIndex((a) => a.id === appDef.id);
|
||||||
const existingIdx = config.apps.findIndex((a) => a.id === appDef.id);
|
if (existingInConfig < 0) {
|
||||||
if (existingIdx >= 0) {
|
config.apps.push(appDef);
|
||||||
// Mettre à jour avec les données du app.json (source de vérité)
|
scanned++;
|
||||||
config.apps[existingIdx] = { ...config.apps[existingIdx], ...appDef };
|
|
||||||
} else {
|
|
||||||
config.apps.push(appDef);
|
|
||||||
discovered++;
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.warn(`[discovery] Erreur lecture ${appJsonPath}:`, e.message);
|
|
||||||
}
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`Erreur lecture app.json dans ${entry.name}:`, e.message);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
console.log(`Apps découvertes via app.json: ${scanned}`);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('[discovery] Erreur scan apps:', err.message);
|
console.error('Erreur scan app.json:', err.message);
|
||||||
}
|
}
|
||||||
|
console.log(`Total apps chargées: ${config.apps.length}`);
|
||||||
console.log(`Apps chargées: ${dynamicApps.length} dynamiques + ${discovered} découvertes (total: ${config.apps.length})`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ============ CREATION D'APPLICATION ============
|
// ============ CREATION D'APPLICATION ============
|
||||||
|
|||||||
@@ -38,23 +38,6 @@ module.exports = {
|
|||||||
category: 'ITINOVA',
|
category: 'ITINOVA',
|
||||||
status: 'production',
|
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',
|
id: 'itinova-podcasts',
|
||||||
name: 'Itinova Podcasts',
|
name: 'Itinova Podcasts',
|
||||||
@@ -154,6 +137,7 @@ module.exports = {
|
|||||||
containerName: 'demat-facturation-app',
|
containerName: 'demat-facturation-app',
|
||||||
healthCheckUrl: 'https://demat-facturation.recette.santinova-soft.org',
|
healthCheckUrl: 'https://demat-facturation.recette.santinova-soft.org',
|
||||||
port: 3000,
|
port: 3000,
|
||||||
|
image: 'images/demat-facturation-dsi.jpg',
|
||||||
category: 'SANTINOVA',
|
category: 'SANTINOVA',
|
||||||
status: 'production',
|
status: 'production',
|
||||||
},
|
},
|
||||||
@@ -205,7 +189,7 @@ module.exports = {
|
|||||||
containerName: 'portail-santinova',
|
containerName: 'portail-santinova',
|
||||||
healthCheckUrl: 'https://portail.recette.santinova-soft.org',
|
healthCheckUrl: 'https://portail.recette.santinova-soft.org',
|
||||||
port: 3000,
|
port: 3000,
|
||||||
category: 'SANTINOVA',
|
category: 'INFRA',
|
||||||
status: 'production',
|
status: 'production',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -139,11 +139,38 @@ function gitPull(appConfig) {
|
|||||||
/**
|
/**
|
||||||
* Démarrer un conteneur Docker
|
* Démarrer un conteneur Docker
|
||||||
*/
|
*/
|
||||||
async function startContainer(containerName) {
|
async function startContainer(containerName, appId) {
|
||||||
try {
|
try {
|
||||||
|
// Tenter d'abord un docker start (conteneur existant mais arrêté)
|
||||||
const container = docker.getContainer(containerName);
|
const container = docker.getContainer(containerName);
|
||||||
await container.start();
|
const info = await container.inspect().catch(() => null);
|
||||||
return { success: true, message: `Conteneur ${containerName} démarré` };
|
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) {
|
} catch (err) {
|
||||||
return { success: false, message: err.message };
|
return { success: false, message: err.message };
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -33,6 +33,10 @@ app.use(cors({
|
|||||||
origin: true,
|
origin: true,
|
||||||
credentials: 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
|
// 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) => {
|
app.use('/api/webhook', express.raw({ type: 'application/json', limit: '10mb' }), (req, res, next) => {
|
||||||
@@ -42,11 +46,6 @@ app.use('/api/webhook', express.raw({ type: 'application/json', limit: '10mb' })
|
|||||||
}
|
}
|
||||||
next();
|
next();
|
||||||
}, webhookRoutes);
|
}, webhookRoutes);
|
||||||
|
|
||||||
app.use(express.json({ limit: '50mb' }));
|
|
||||||
app.use(express.urlencoded({ extended: true, limit: '50mb' }));
|
|
||||||
app.use(cookieParser());
|
|
||||||
app.use(morgan('combined'));
|
|
||||||
// API routes
|
// API routes
|
||||||
app.use('/api', routes);
|
app.use('/api', routes);
|
||||||
|
|
||||||
|
|||||||
@@ -482,7 +482,7 @@ router.post('/apps/:id/start', authMiddleware, async (req, res) => {
|
|||||||
const app = config.apps.find((a) => a.id === req.params.id);
|
const app = config.apps.find((a) => a.id === req.params.id);
|
||||||
if (!app) return res.status(404).json({ error: 'Application non trouvée' });
|
if (!app) return res.status(404).json({ error: 'Application non trouvée' });
|
||||||
const containerName = app.containerName || app.id;
|
const containerName = app.containerName || app.id;
|
||||||
const result = await startContainer(containerName);
|
const result = await startContainer(containerName, app.id);
|
||||||
res.json(result);
|
res.json(result);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
res.status(500).json({ error: err.message });
|
res.status(500).json({ error: err.message });
|
||||||
|
|||||||
@@ -19,14 +19,11 @@ const LOG_DIR = '/var/log/manus-deploy';
|
|||||||
// Mapping dépôt Gitea -> nom du dossier application sur le serveur
|
// Mapping dépôt Gitea -> nom du dossier application sur le serveur
|
||||||
const REPO_TO_APP_MAP = {
|
const REPO_TO_APP_MAP = {
|
||||||
'itinova-contacts': 'itinova-contacts',
|
'itinova-contacts': 'itinova-contacts',
|
||||||
'gestion-at-v2': 'gestion-at-v2',
|
|
||||||
'itinova-podcasts': 'itinova-podcasts',
|
'itinova-podcasts': 'itinova-podcasts',
|
||||||
'veille-reglementaire': 'veille-reglementaire',
|
'veille-reglementaire': 'veille-reglementaire',
|
||||||
'itinova-vehicle-exchange': 'itinova-vehicle-exchange',
|
'itinova-vehicle-exchange': 'itinova-vehicle-exchange',
|
||||||
'manus-dashboard': 'manus-dashboard',
|
'manus-dashboard': 'manus-dashboard',
|
||||||
'itinova-budget-si': 'itinova-budget-si',
|
'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)
|
// Déploiements en cours (évite les doubles déclenchements)
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Dashboard Recette - Gestion des Applications</title>
|
<title>Dashboard - Gestion des Applications</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-dark-900 text-white">
|
<body class="bg-dark-900 text-white">
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ export default function Sidebar({
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-lg font-bold text-white">Dashboard</h1>
|
<h1 className="text-lg font-bold text-white">Dashboard</h1>
|
||||||
<p className="text-xs text-gray-500">Recette</p>
|
<p className="text-xs text-gray-500">{window.location.hostname.includes('recette') ? 'Recette' : 'Production'}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -89,7 +89,7 @@ const APPS_CONFIG = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'manus-dashboard',
|
id: 'manus-dashboard',
|
||||||
name: 'Dashboard Recette',
|
name: 'Dashboard',
|
||||||
repoName: 'manus-dashboard',
|
repoName: 'manus-dashboard',
|
||||||
urlRecette: 'https://dashboard.recette.santinova-soft.org',
|
urlRecette: 'https://dashboard.recette.santinova-soft.org',
|
||||||
urlProd: 'https://dashboard.santinova-soft.org',
|
urlProd: 'https://dashboard.santinova-soft.org',
|
||||||
@@ -107,9 +107,9 @@ function SyncBadge({ versionRecette, versionProd }) {
|
|||||||
|
|
||||||
if (!shaRec && !shaProd) {
|
if (!shaRec && !shaProd) {
|
||||||
return (
|
return (
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500">
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500 italic">
|
||||||
<Minus className="w-3 h-3" />
|
<Minus className="w-3 h-3" />
|
||||||
N/A
|
Non déployé
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -123,9 +123,9 @@ function SyncBadge({ versionRecette, versionProd }) {
|
|||||||
}
|
}
|
||||||
if (!shaProd) {
|
if (!shaProd) {
|
||||||
return (
|
return (
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-orange-900/40 text-orange-300 border border-orange-700/40" title="Uniquement en recette">
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-orange-900/40 text-orange-300 border border-orange-700/40" title="Recette déployée, production vide">
|
||||||
<ArrowUp className="w-3 h-3" />
|
<ArrowUp className="w-3 h-3" />
|
||||||
Recette en avance
|
Non déployé en prod
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -175,19 +175,19 @@ function SyncBadge({ versionRecette, versionProd }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function VersionBadge({ version, loading }) {
|
function VersionBadge({ version, loading }) {
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-700 text-gray-400 animate-pulse">
|
|
||||||
<Tag className="w-3 h-3" />
|
|
||||||
Chargement...
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (!version) {
|
if (!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 (
|
return (
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500">
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500 italic">
|
||||||
<AlertCircle className="w-3 h-3" />
|
<AlertCircle className="w-3 h-3" />
|
||||||
N/A
|
Non déployé
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -34,7 +34,9 @@ export default function LoginPage({ onLogin }) {
|
|||||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-600 mb-4">
|
<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" />
|
<Server className="w-8 h-8 text-white" />
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-2xl font-bold text-white">Dashboard Recette</h1>
|
<h1 className="text-2xl font-bold text-white">
|
||||||
|
Dashboard {window.location.hostname.includes('recette') ? 'Recette' : 'Production'}
|
||||||
|
</h1>
|
||||||
<p className="text-gray-400 mt-2">Gestion des applications</p>
|
<p className="text-gray-400 mt-2">Gestion des applications</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user