chore: inclusion complète du code source (src/) - suppression submodule imbriqué
This commit is contained in:
Manus Admin
parent
0543e7f31f
commit
800d82a929
1
src
1
src
|
|
@ -1 +0,0 @@
|
|||
Subproject commit f1f3f93befabe1cce72460ad9f3c3d127587bbcd
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
node_modules
|
||||
.git
|
||||
.gitignore
|
||||
README.md
|
||||
*.log
|
||||
frontend/node_modules
|
||||
backend/node_modules
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
node_modules/
|
||||
dist/
|
||||
.env
|
||||
*.log
|
||||
.DS_Store
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
# Stage 1: Build frontend
|
||||
FROM node:20-alpine AS frontend-builder
|
||||
|
||||
WORKDIR /app/frontend
|
||||
|
||||
# Copy frontend package files
|
||||
COPY frontend/package.json frontend/pnpm-lock.yaml* ./
|
||||
RUN npm install
|
||||
|
||||
# Copy frontend source
|
||||
COPY frontend/ ./
|
||||
|
||||
# Build frontend
|
||||
RUN npm run build
|
||||
|
||||
# Stage 2: Production
|
||||
FROM node:20-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Install docker CLI for docker compose commands
|
||||
RUN apk add --no-cache docker-cli docker-cli-compose git curl unzip bash openssh-client
|
||||
|
||||
# Configure git global identity to avoid "Author identity unknown" errors
|
||||
RUN git config --global user.email "admin@santinova-soft.org" && \
|
||||
git config --global user.name "Manus Dashboard"
|
||||
|
||||
# Copy backend
|
||||
COPY backend/package.json ./backend/
|
||||
WORKDIR /app/backend
|
||||
RUN npm install --production
|
||||
|
||||
COPY backend/ ./
|
||||
|
||||
# Copy built frontend
|
||||
WORKDIR /app
|
||||
COPY --from=frontend-builder /app/frontend/dist ./frontend/dist
|
||||
|
||||
WORKDIR /app/backend
|
||||
|
||||
EXPOSE 3001
|
||||
|
||||
CMD ["node", "src/index.js"]
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
# Manus Dashboard
|
||||
|
||||
Tableau de bord de gestion des applications Manus, déployé sur le serveur de recette.
|
||||
|
||||
## Fonctionnalités
|
||||
|
||||
- Liste des applications déployées avec état en temps réel
|
||||
- Health checks HTTP périodiques avec indicateurs visuels
|
||||
- Redéploiement en un clic (docker compose build + up)
|
||||
- Logs de déploiement et logs conteneurs
|
||||
- Intégration Gitea (commits, branches, dépôts)
|
||||
- Authentification par login/mot de passe
|
||||
- Interface moderne avec TailwindCSS
|
||||
|
||||
## Stack technique
|
||||
|
||||
- **Backend** : Node.js / Express
|
||||
- **Frontend** : React / TailwindCSS / Vite
|
||||
- **Conteneurisation** : Docker / Docker Compose
|
||||
- **Reverse Proxy** : Traefik avec SSL Let's Encrypt
|
||||
|
||||
## Déploiement
|
||||
|
||||
```bash
|
||||
cd /opt/manus-deploy/apps/manus-dashboard
|
||||
docker compose build --no-cache && docker compose up -d
|
||||
```
|
||||
|
||||
## Accès
|
||||
|
||||
- URL : https://dashboard.santinova-soft.org
|
||||
- Login : adminItinova / Itinova69!
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"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"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.1.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,710 @@
|
|||
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() {
|
||||
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);
|
||||
}
|
||||
}
|
||||
console.log(`Apps dynamiques chargées: ${dynamicApps.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,
|
||||
};
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
const jwt = require('jsonwebtoken');
|
||||
const bcrypt = require('bcryptjs');
|
||||
const config = require('./config');
|
||||
|
||||
// Hash du mot de passe au démarrage
|
||||
let passwordHash = null;
|
||||
|
||||
async function initAuth() {
|
||||
passwordHash = await bcrypt.hash(config.auth.password, 10);
|
||||
}
|
||||
|
||||
async function authenticate(username, password) {
|
||||
if (username !== config.auth.username) {
|
||||
return null;
|
||||
}
|
||||
// Comparer directement car on stocke le mot de passe en clair dans la config
|
||||
if (password !== config.auth.password) {
|
||||
return null;
|
||||
}
|
||||
const token = jwt.sign(
|
||||
{ username, role: 'admin' },
|
||||
config.jwtSecret,
|
||||
{ expiresIn: config.jwtExpiry }
|
||||
);
|
||||
return token;
|
||||
}
|
||||
|
||||
function verifyToken(token) {
|
||||
try {
|
||||
return jwt.verify(token, config.jwtSecret);
|
||||
} catch (err) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function authMiddleware(req, res, next) {
|
||||
// Check Authorization header
|
||||
let token = null;
|
||||
const authHeader = req.headers.authorization;
|
||||
if (authHeader && authHeader.startsWith('Bearer ')) {
|
||||
token = authHeader.substring(7);
|
||||
}
|
||||
// Check cookie
|
||||
if (!token && req.cookies) {
|
||||
token = req.cookies.dashboard_token;
|
||||
}
|
||||
|
||||
if (!token) {
|
||||
return res.status(401).json({ error: 'Non authentifié' });
|
||||
}
|
||||
|
||||
const decoded = verifyToken(token);
|
||||
if (!decoded) {
|
||||
return res.status(401).json({ error: 'Token invalide ou expiré' });
|
||||
}
|
||||
|
||||
req.user = decoded;
|
||||
next();
|
||||
}
|
||||
|
||||
module.exports = { initAuth, authenticate, verifyToken, authMiddleware };
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
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 || 'https://git.santinova-soft.org',
|
||||
username: process.env.GITEA_USERNAME || 'manus-admin',
|
||||
password: process.env.GITEA_PASSWORD || 'ManusGitea2026!',
|
||||
},
|
||||
// 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 - can be extended
|
||||
apps: [
|
||||
{
|
||||
id: 'itinova-contacts',
|
||||
name: 'Itinova Contacts',
|
||||
description: 'Application de gestion des contacts',
|
||||
directory: 'itinova-contacts',
|
||||
giteaRepo: 'itinova-contacts',
|
||||
giteaOwner: 'manus-admin',
|
||||
urls: {
|
||||
recette: 'https://contacts.recette.santinova-soft.org',
|
||||
prod: null,
|
||||
},
|
||||
containerName: 'itinova-contacts',
|
||||
healthCheckUrl: 'https://contacts.recette.santinova-soft.org',
|
||||
port: 3000,
|
||||
},
|
||||
{
|
||||
id: 'itinova-podcasts',
|
||||
name: 'Itinova Podcasts',
|
||||
description: 'Application de gestion de podcasts',
|
||||
directory: 'itinova-podcasts',
|
||||
giteaRepo: 'itinova-podcasts',
|
||||
giteaOwner: 'manus-admin',
|
||||
urls: {
|
||||
recette: 'https://podcasts.recette.santinova-soft.org',
|
||||
prod: null,
|
||||
},
|
||||
containerName: 'itinova-podcasts',
|
||||
healthCheckUrl: 'https://podcasts.recette.santinova-soft.org',
|
||||
port: 3000,
|
||||
},
|
||||
{
|
||||
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: null,
|
||||
},
|
||||
containerName: 'veille-reglementaire',
|
||||
healthCheckUrl: 'https://veille.recette.santinova-soft.org',
|
||||
port: 3000,
|
||||
},
|
||||
{
|
||||
id: 'itinova-vehicle-exchange',
|
||||
name: 'Itinova Gestion de Flotte',
|
||||
description: 'Application de gestion de flotte de véhicules',
|
||||
directory: 'itinova-vehicle-exchange',
|
||||
giteaRepo: 'itinova-vehicle-exchange',
|
||||
giteaOwner: 'manus-admin',
|
||||
urls: {
|
||||
recette: 'https://flotte.recette.santinova-soft.org',
|
||||
prod: null,
|
||||
},
|
||||
containerName: 'itinova-vehicle-exchange',
|
||||
healthCheckUrl: 'https://flotte.recette.santinova-soft.org',
|
||||
port: 3000,
|
||||
},
|
||||
{
|
||||
id: 'sonum',
|
||||
name: 'Sonum',
|
||||
description: 'Application Sonum',
|
||||
directory: 'sonum',
|
||||
giteaRepo: 'sonum',
|
||||
giteaOwner: 'manus-admin',
|
||||
urls: {
|
||||
recette: 'https://sonum.recette.santinova-soft.org',
|
||||
prod: null,
|
||||
},
|
||||
containerName: 'sonum',
|
||||
healthCheckUrl: 'https://sonum.recette.santinova-soft.org',
|
||||
port: 3000,
|
||||
},
|
||||
{
|
||||
id: 'facturation-santinova',
|
||||
name: 'Facturation Santinova',
|
||||
description: 'Application de gestion de la facturation',
|
||||
directory: 'facturation-santinova',
|
||||
giteaRepo: 'facturation-santinova',
|
||||
giteaOwner: 'manus-admin',
|
||||
urls: {
|
||||
recette: 'https://facturation.recette.santinova-soft.org',
|
||||
prod: null,
|
||||
},
|
||||
containerName: 'facturation-santinova-app',
|
||||
healthCheckUrl: 'https://facturation.recette.santinova-soft.org',
|
||||
port: 3001,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -0,0 +1,293 @@
|
|||
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) {
|
||||
try {
|
||||
const container = docker.getContainer(containerName);
|
||||
await container.start();
|
||||
return { success: true, message: `Conteneur ${containerName} démarré` };
|
||||
} 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");
|
||||
try {
|
||||
// nsenter -t 1 -m lit les métriques réelles de l'hôte VPS (pas de l'hyperviseur)
|
||||
const ns = "nsenter -t 1 -m --";
|
||||
|
||||
// CPU : delta /proc/stat sur 200ms
|
||||
let cpuUsage = 0;
|
||||
try {
|
||||
const s1 = execSync(`${ns} cat /proc/stat | grep '^cpu '`).toString().trim().split(/\s+/);
|
||||
execSync("sleep 0.2");
|
||||
const s2 = execSync(`${ns} cat /proc/stat | grep '^cpu '`).toString().trim().split(/\s+/);
|
||||
const idle1 = parseInt(s1[4]), total1 = s1.slice(1).reduce((a,b)=>a+parseInt(b),0);
|
||||
const idle2 = parseInt(s2[4]), total2 = s2.slice(1).reduce((a,b)=>a+parseInt(b),0);
|
||||
const dIdle = idle2 - idle1, dTotal = total2 - total1;
|
||||
cpuUsage = dTotal > 0 ? Math.round((1 - dIdle / dTotal) * 100) : 0;
|
||||
} catch(e) {
|
||||
try {
|
||||
const cpuRaw = execSync(`${ns} top -bn1 | grep 'Cpu(s)' | awk '{print $2}'`).toString().trim();
|
||||
cpuUsage = parseFloat(cpuRaw) || 0;
|
||||
} catch(e2) {}
|
||||
}
|
||||
|
||||
// RAM : cgroup de l'hôte (fiable même en environnement VPS virtualisé)
|
||||
// La RAM totale est lue depuis /sys/fs/cgroup/memory.max de l'hôte
|
||||
// La RAM utilisée est calculée via docker stats (valeurs réelles du VPS)
|
||||
let memTotal = 8589934592; // 8 Go par défaut
|
||||
try {
|
||||
const cgroupMax = execSync(`${ns} cat /sys/fs/cgroup/memory.max 2>/dev/null || cat /sys/fs/cgroup/memory/memory.limit_in_bytes 2>/dev/null`).toString().trim();
|
||||
if (cgroupMax && cgroupMax !== 'max' && !isNaN(parseInt(cgroupMax))) {
|
||||
memTotal = parseInt(cgroupMax);
|
||||
}
|
||||
} catch(e) {}
|
||||
|
||||
// RAM utilisée : somme de tous les conteneurs via docker stats
|
||||
let memUsed = 0;
|
||||
try {
|
||||
const statsRaw = execSync("docker stats --no-stream --format '{{.MemUsage}}'").toString().trim();
|
||||
statsRaw.split('\n').forEach(line => {
|
||||
const match = line.match(/([\d.]+)(\w+)\s*\//);
|
||||
if (match) {
|
||||
const val = parseFloat(match[1]);
|
||||
const unit = match[2].toLowerCase();
|
||||
if (unit === 'gib') memUsed += val * 1024 * 1024 * 1024;
|
||||
else if (unit === 'mib') memUsed += val * 1024 * 1024;
|
||||
else if (unit === 'kib') memUsed += val * 1024;
|
||||
else memUsed += val;
|
||||
}
|
||||
});
|
||||
} catch(e) {}
|
||||
const memAvailable = memTotal - memUsed;
|
||||
const memFree = memAvailable;
|
||||
|
||||
// Disque : df sur l'hôte
|
||||
const diskRaw = execSync(`${ns} df -B1 / | tail -1`).toString().trim().split(/\s+/);
|
||||
const diskTotal = parseInt(diskRaw[1]);
|
||||
const diskUsed = parseInt(diskRaw[2]);
|
||||
const diskFree = parseInt(diskRaw[3]);
|
||||
|
||||
// Uptime et load
|
||||
const uptimeRaw = execSync(`${ns} cat /proc/uptime`).toString().trim().split(" ");
|
||||
const uptimeSeconds = parseFloat(uptimeRaw[0]);
|
||||
const loadRaw = execSync(`${ns} cat /proc/loadavg`).toString().trim().split(" ");
|
||||
const load1 = parseFloat(loadRaw[0]);
|
||||
const load5 = parseFloat(loadRaw[1]);
|
||||
const load15 = parseFloat(loadRaw[2]);
|
||||
|
||||
// Réseau
|
||||
let netRx = 0, netTx = 0;
|
||||
try {
|
||||
const netRaw = execSync(`${ns} cat /proc/net/dev | grep -E 'eth0|ens|enp' | head -1`).toString().trim().split(/\s+/);
|
||||
netRx = parseInt(netRaw[1]) || 0;
|
||||
netTx = parseInt(netRaw[9]) || 0;
|
||||
} catch(e) {}
|
||||
|
||||
resolve({
|
||||
cpu: { usage: cpuUsage },
|
||||
memory: {
|
||||
total: memTotal,
|
||||
used: memUsed,
|
||||
free: memFree,
|
||||
available: memAvailable,
|
||||
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,
|
||||
};
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
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)
|
||||
const giteaClient = axios.create({
|
||||
baseURL: `${config.gitea.url}/api/v1`,
|
||||
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,
|
||||
};
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
const axios = require('axios');
|
||||
const https = require('https');
|
||||
const config = require('./config');
|
||||
const { getContainerInfo } = require('./docker');
|
||||
|
||||
// Store pour les statuts des apps
|
||||
const appStatuses = new Map();
|
||||
|
||||
// Store pour les logs de déploiement
|
||||
const deploymentLogs = [];
|
||||
const MAX_DEPLOYMENT_LOGS = 50;
|
||||
|
||||
// Store pour les commits Gitea
|
||||
const giteaCommits = new Map();
|
||||
|
||||
// Agent HTTPS qui ignore les certificats auto-signés
|
||||
const httpsAgent = new https.Agent({ rejectUnauthorized: false });
|
||||
|
||||
// Au démarrage : marquer tous les déploiements "running" orphelins comme "failed"
|
||||
// (ils ont été interrompus lors du dernier redémarrage du Dashboard)
|
||||
function cleanupOrphanedDeployments() {
|
||||
const orphans = deploymentLogs.filter((l) => l.status === 'running');
|
||||
if (orphans.length > 0) {
|
||||
console.log(`[healthcheck] Nettoyage de ${orphans.length} déploiement(s) orphelin(s) au démarrage`);
|
||||
orphans.forEach((l) => {
|
||||
l.status = 'failed';
|
||||
l.message = 'Déploiement interrompu (redémarrage du Dashboard)';
|
||||
l.endedAt = new Date().toISOString();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Vérifier la santé d'une URL
|
||||
*/
|
||||
async function checkUrl(url) {
|
||||
try {
|
||||
const start = Date.now();
|
||||
const response = await axios.get(url, {
|
||||
timeout: 10000,
|
||||
httpsAgent,
|
||||
validateStatus: (status) => status < 500,
|
||||
});
|
||||
const responseTime = Date.now() - start;
|
||||
return {
|
||||
online: true,
|
||||
statusCode: response.status,
|
||||
responseTime,
|
||||
};
|
||||
} catch (err) {
|
||||
return {
|
||||
online: false,
|
||||
statusCode: null,
|
||||
responseTime: null,
|
||||
error: err.message,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Vérifier la santé d'une application
|
||||
*/
|
||||
async function checkApp(appConfig) {
|
||||
const result = {
|
||||
id: appConfig.id,
|
||||
name: appConfig.name,
|
||||
description: appConfig.description,
|
||||
urls: appConfig.urls,
|
||||
containerName: appConfig.containerName,
|
||||
lastCheck: new Date().toISOString(),
|
||||
status: 'unknown',
|
||||
container: null,
|
||||
health: {
|
||||
recette: null,
|
||||
prod: null,
|
||||
},
|
||||
};
|
||||
|
||||
// Vérifier le conteneur Docker
|
||||
const containerInfo = await getContainerInfo(appConfig.containerName);
|
||||
result.container = containerInfo;
|
||||
|
||||
// Health check recette
|
||||
if (appConfig.urls.recette) {
|
||||
result.health.recette = await checkUrl(appConfig.urls.recette);
|
||||
}
|
||||
|
||||
// Health check prod
|
||||
if (appConfig.urls.prod) {
|
||||
result.health.prod = await checkUrl(appConfig.urls.prod);
|
||||
}
|
||||
|
||||
// Déterminer le statut global
|
||||
if (!containerInfo || !containerInfo.running) {
|
||||
result.status = 'offline';
|
||||
} else if (result.health.recette && result.health.recette.online) {
|
||||
result.status = 'online';
|
||||
} else if (containerInfo.running) {
|
||||
result.status = 'error';
|
||||
} else {
|
||||
result.status = 'offline';
|
||||
}
|
||||
|
||||
// Stocker le résultat
|
||||
appStatuses.set(appConfig.id, result);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Lancer les health checks pour toutes les apps
|
||||
*/
|
||||
async function checkAllApps() {
|
||||
const results = [];
|
||||
for (const app of config.apps) {
|
||||
const result = await checkApp(app);
|
||||
results.push(result);
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ajouter un log de déploiement (retourne l'entrée créée avec son id)
|
||||
*/
|
||||
function addDeploymentLog(appId, log) {
|
||||
const entry = {
|
||||
id: Date.now().toString(),
|
||||
appId,
|
||||
timestamp: new Date().toISOString(),
|
||||
...log,
|
||||
};
|
||||
deploymentLogs.unshift(entry);
|
||||
if (deploymentLogs.length > MAX_DEPLOYMENT_LOGS) {
|
||||
deploymentLogs.pop();
|
||||
}
|
||||
return entry;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mettre à jour un log de déploiement existant par son id
|
||||
* Permet de passer de "running" à "success" ou "failed" sans créer une nouvelle entrée
|
||||
*/
|
||||
function updateDeploymentLog(entryId, updates) {
|
||||
const entry = deploymentLogs.find((l) => l.id === entryId);
|
||||
if (entry) {
|
||||
Object.assign(entry, updates, { updatedAt: new Date().toISOString() });
|
||||
return entry;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Récupérer les logs de déploiement
|
||||
*/
|
||||
function getDeploymentLogs(appId = null) {
|
||||
if (appId) {
|
||||
return deploymentLogs.filter((l) => l.appId === appId);
|
||||
}
|
||||
return deploymentLogs;
|
||||
}
|
||||
|
||||
/**
|
||||
* Récupérer le statut d'une app
|
||||
*/
|
||||
function getAppStatus(appId) {
|
||||
return appStatuses.get(appId) || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Récupérer tous les statuts
|
||||
*/
|
||||
function getAllStatuses() {
|
||||
return Array.from(appStatuses.values());
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
checkUrl,
|
||||
checkApp,
|
||||
checkAllApps,
|
||||
addDeploymentLog,
|
||||
updateDeploymentLog,
|
||||
getDeploymentLogs,
|
||||
getAppStatus,
|
||||
getAllStatuses,
|
||||
cleanupOrphanedDeployments,
|
||||
appStatuses,
|
||||
giteaCommits,
|
||||
};
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
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 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' });
|
||||
|
||||
// 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);
|
||||
});
|
||||
|
|
@ -0,0 +1,477 @@
|
|||
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 });
|
||||
}
|
||||
});
|
||||
|
||||
// ============ 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);
|
||||
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;
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
// 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;
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
services:
|
||||
dashboard:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
container_name: manus-dashboard
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- PORT=3001
|
||||
- JWT_SECRET=manus-dashboard-jwt-secret-2026-recette
|
||||
- ADMIN_USERNAME=adminItinova
|
||||
- ADMIN_PASSWORD=Itinova69!
|
||||
- GITEA_URL=https://git.santinova-soft.org
|
||||
- GITEA_USERNAME=manus-admin
|
||||
- GITEA_PASSWORD=ManusGitea2026!
|
||||
- APPS_BASE_PATH=/opt/manus-deploy/apps
|
||||
- INFRA_BASE_PATH=/opt/manus-deploy/infrastructure
|
||||
- HEALTH_CHECK_INTERVAL=30000
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
- /opt/manus-deploy:/opt/manus-deploy
|
||||
networks:
|
||||
- web
|
||||
labels:
|
||||
- "traefik.enable=true"
|
||||
# Route HTTPS via dashboard.santinova-soft.org
|
||||
- "traefik.http.routers.manus-dashboard.rule=Host(`dashboard.santinova-soft.org`)"
|
||||
- "traefik.http.routers.manus-dashboard.entrypoints=websecure"
|
||||
- "traefik.http.routers.manus-dashboard.tls=true"
|
||||
- "traefik.http.routers.manus-dashboard.tls.certresolver=letsencrypt"
|
||||
- "traefik.http.routers.manus-dashboard.service=manus-dashboard-svc"
|
||||
- "traefik.http.routers.manus-dashboard.priority=100"
|
||||
# Service
|
||||
- "traefik.http.services.manus-dashboard-svc.loadbalancer.server.port=3001"
|
||||
- "traefik.docker.network=web"
|
||||
|
||||
networks:
|
||||
web:
|
||||
external: true
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Manus 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>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"name": "manus-dashboard-frontend",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.26.0",
|
||||
"axios": "^1.7.0",
|
||||
"lucide-react": "^0.441.0",
|
||||
"date-fns": "^3.6.0",
|
||||
"date-fns-tz": "^3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.4.41",
|
||||
"tailwindcss": "^3.4.10",
|
||||
"vite": "^5.4.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<rect width="100" height="100" rx="20" fill="#2563eb"/>
|
||||
<text x="50" y="68" font-family="Arial, sans-serif" font-size="50" font-weight="bold" fill="white" text-anchor="middle">M</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 259 B |
|
|
@ -0,0 +1,134 @@
|
|||
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 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 />;
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,679 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
X,
|
||||
Upload,
|
||||
GitBranch,
|
||||
Server,
|
||||
Database,
|
||||
Globe,
|
||||
Package,
|
||||
FileText,
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
Loader2,
|
||||
ChevronDown,
|
||||
} from 'lucide-react';
|
||||
import { getAvailableStacks, createApp, getGiteaRepos } from '../utils/api';
|
||||
|
||||
const STEPS = [
|
||||
{ id: 1, title: 'Informations', icon: FileText },
|
||||
{ id: 2, title: 'Source', icon: GitBranch },
|
||||
{ id: 3, title: 'Stack & Options', icon: Server },
|
||||
{ id: 4, title: 'Confirmation', icon: CheckCircle },
|
||||
];
|
||||
|
||||
export default function AddAppModal({ isOpen, onClose, onSuccess }) {
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
const [stacks, setStacks] = useState([]);
|
||||
const [giteaRepos, setGiteaRepos] = useState([]);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submitResult, setSubmitResult] = useState(null);
|
||||
const [errors, setErrors] = useState({});
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
subdomain: '',
|
||||
sourceType: 'zip',
|
||||
zipFile: null,
|
||||
giteaRepoUrl: '',
|
||||
stack: 'nodejs',
|
||||
port: '',
|
||||
needsDb: false,
|
||||
dbType: 'mysql',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
getAvailableStacks()
|
||||
.then((res) => setStacks(res.data))
|
||||
.catch(console.error);
|
||||
getGiteaRepos()
|
||||
.then((res) => setGiteaRepos(res.data))
|
||||
.catch(console.error);
|
||||
// Reset
|
||||
setCurrentStep(1);
|
||||
setSubmitResult(null);
|
||||
setErrors({});
|
||||
setFormData({
|
||||
name: '',
|
||||
description: '',
|
||||
subdomain: '',
|
||||
sourceType: 'zip',
|
||||
zipFile: null,
|
||||
giteaRepoUrl: '',
|
||||
stack: 'nodejs',
|
||||
port: '',
|
||||
needsDb: false,
|
||||
dbType: 'mysql',
|
||||
});
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const updateField = (field, value) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
setErrors((prev) => ({ ...prev, [field]: null }));
|
||||
};
|
||||
|
||||
const autoSubdomain = (name) => {
|
||||
return name
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9\s-]/g, '')
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/-+/g, '-')
|
||||
.replace(/^-|-$/g, '');
|
||||
};
|
||||
|
||||
const handleNameChange = (value) => {
|
||||
updateField('name', value);
|
||||
if (!formData.subdomain || formData.subdomain === autoSubdomain(formData.name)) {
|
||||
updateField('subdomain', autoSubdomain(value));
|
||||
}
|
||||
};
|
||||
|
||||
const validateStep = (step) => {
|
||||
const newErrors = {};
|
||||
if (step === 1) {
|
||||
if (!formData.name.trim()) newErrors.name = 'Le nom est requis';
|
||||
if (!formData.subdomain.trim()) newErrors.subdomain = 'Le sous-domaine est requis';
|
||||
else if (!/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/.test(formData.subdomain)) {
|
||||
newErrors.subdomain = 'Lettres minuscules, chiffres et tirets uniquement';
|
||||
}
|
||||
}
|
||||
if (step === 2) {
|
||||
if (formData.sourceType === 'zip' && !formData.zipFile) {
|
||||
newErrors.zipFile = 'Un fichier ZIP est requis';
|
||||
}
|
||||
if (formData.sourceType === 'gitea' && !formData.giteaRepoUrl) {
|
||||
newErrors.giteaRepoUrl = 'Sélectionnez un dépôt Gitea';
|
||||
}
|
||||
}
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const nextStep = () => {
|
||||
if (validateStep(currentStep)) {
|
||||
setCurrentStep((prev) => Math.min(prev + 1, 4));
|
||||
}
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
setCurrentStep((prev) => Math.max(prev - 1, 1));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setIsSubmitting(true);
|
||||
setSubmitResult(null);
|
||||
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append('name', formData.name);
|
||||
fd.append('description', formData.description);
|
||||
fd.append('subdomain', formData.subdomain);
|
||||
fd.append('stack', formData.stack);
|
||||
fd.append('sourceType', formData.sourceType);
|
||||
fd.append('needsDb', formData.needsDb.toString());
|
||||
fd.append('dbType', formData.dbType);
|
||||
if (formData.port) fd.append('port', formData.port);
|
||||
|
||||
if (formData.sourceType === 'zip' && formData.zipFile) {
|
||||
fd.append('zipFile', formData.zipFile);
|
||||
}
|
||||
if (formData.sourceType === 'gitea') {
|
||||
fd.append('giteaRepoUrl', formData.giteaRepoUrl);
|
||||
}
|
||||
|
||||
const res = await createApp(fd);
|
||||
setSubmitResult({ success: true, data: res.data });
|
||||
|
||||
// Rafraîchir après un délai
|
||||
setTimeout(() => {
|
||||
if (onSuccess) onSuccess();
|
||||
}, 3000);
|
||||
} catch (err) {
|
||||
setSubmitResult({
|
||||
success: false,
|
||||
error: err.response?.data?.error || err.message,
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const selectedStack = stacks.find((s) => s.id === formData.stack);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
{/* Overlay */}
|
||||
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
|
||||
|
||||
{/* Modal */}
|
||||
<div className="relative bg-dark-800 border border-dark-600 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-dark-600">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-white flex items-center gap-2">
|
||||
<Package className="w-5 h-5 text-primary-400" />
|
||||
Ajouter une application
|
||||
</h2>
|
||||
<p className="text-sm text-gray-400 mt-0.5">
|
||||
Déployez une nouvelle application sur le serveur de recette
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-gray-400 hover:text-white hover:bg-dark-600 rounded-lg transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Steps indicator */}
|
||||
<div className="px-6 py-3 border-b border-dark-600 bg-dark-900/50">
|
||||
<div className="flex items-center justify-between">
|
||||
{STEPS.map((step, idx) => (
|
||||
<div key={step.id} className="flex items-center">
|
||||
<div
|
||||
className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
|
||||
currentStep === step.id
|
||||
? 'bg-primary-500/20 text-primary-400 border border-primary-500/30'
|
||||
: currentStep > step.id
|
||||
? 'bg-green-500/20 text-green-400'
|
||||
: 'text-gray-500'
|
||||
}`}
|
||||
>
|
||||
<step.icon className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">{step.title}</span>
|
||||
</div>
|
||||
{idx < STEPS.length - 1 && (
|
||||
<div
|
||||
className={`w-8 h-0.5 mx-1 ${
|
||||
currentStep > step.id ? 'bg-green-500' : 'bg-dark-600'
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="px-6 py-5 overflow-y-auto max-h-[55vh]">
|
||||
{/* Step 1: Informations */}
|
||||
{currentStep === 1 && (
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
||||
Nom de l'application <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleNameChange(e.target.value)}
|
||||
placeholder="Mon Application"
|
||||
className={`w-full px-4 py-2.5 bg-dark-700 border rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent ${
|
||||
errors.name ? 'border-red-500' : 'border-dark-500'
|
||||
}`}
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="text-red-400 text-xs mt-1">{errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.description}
|
||||
onChange={(e) => updateField('description', e.target.value)}
|
||||
placeholder="Description de l'application..."
|
||||
rows={3}
|
||||
className="w-full px-4 py-2.5 bg-dark-700 border border-dark-500 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
||||
Sous-domaine <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<div className="flex items-center gap-0">
|
||||
<input
|
||||
type="text"
|
||||
value={formData.subdomain}
|
||||
onChange={(e) => updateField('subdomain', e.target.value.toLowerCase())}
|
||||
placeholder="mon-app"
|
||||
className={`flex-1 px-4 py-2.5 bg-dark-700 border rounded-l-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent ${
|
||||
errors.subdomain ? 'border-red-500' : 'border-dark-500'
|
||||
}`}
|
||||
/>
|
||||
<span className="px-3 py-2.5 bg-dark-600 border border-dark-500 border-l-0 rounded-r-lg text-gray-400 text-sm whitespace-nowrap">
|
||||
.recette.santinova-soft.org
|
||||
</span>
|
||||
</div>
|
||||
{errors.subdomain && (
|
||||
<p className="text-red-400 text-xs mt-1">{errors.subdomain}</p>
|
||||
)}
|
||||
{formData.subdomain && !errors.subdomain && (
|
||||
<p className="text-gray-500 text-xs mt-1 flex items-center gap-1">
|
||||
<Globe className="w-3 h-3" />
|
||||
URL: https://{formData.subdomain}.recette.santinova-soft.org
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Source */}
|
||||
{currentStep === 2 && (
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-3">
|
||||
Source du code
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
onClick={() => updateField('sourceType', 'zip')}
|
||||
className={`p-4 rounded-xl border-2 text-left transition-all ${
|
||||
formData.sourceType === 'zip'
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
||||
}`}
|
||||
>
|
||||
<Upload className={`w-6 h-6 mb-2 ${formData.sourceType === 'zip' ? 'text-primary-400' : 'text-gray-400'}`} />
|
||||
<div className={`font-medium ${formData.sourceType === 'zip' ? 'text-white' : 'text-gray-300'}`}>
|
||||
Upload ZIP
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Uploadez une archive ZIP contenant les sources
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => updateField('sourceType', 'gitea')}
|
||||
className={`p-4 rounded-xl border-2 text-left transition-all ${
|
||||
formData.sourceType === 'gitea'
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
||||
}`}
|
||||
>
|
||||
<GitBranch className={`w-6 h-6 mb-2 ${formData.sourceType === 'gitea' ? 'text-primary-400' : 'text-gray-400'}`} />
|
||||
<div className={`font-medium ${formData.sourceType === 'gitea' ? 'text-white' : 'text-gray-300'}`}>
|
||||
Dépôt Gitea
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Utilisez un dépôt Gitea existant
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{formData.sourceType === 'zip' && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
||||
Fichier ZIP <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<div
|
||||
className={`relative border-2 border-dashed rounded-xl p-8 text-center transition-colors ${
|
||||
formData.zipFile
|
||||
? 'border-green-500/50 bg-green-500/5'
|
||||
: errors.zipFile
|
||||
? 'border-red-500/50 bg-red-500/5'
|
||||
: 'border-dark-500 hover:border-dark-400 bg-dark-700'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
accept=".zip"
|
||||
onChange={(e) => updateField('zipFile', e.target.files[0])}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
||||
/>
|
||||
{formData.zipFile ? (
|
||||
<div>
|
||||
<CheckCircle className="w-8 h-8 text-green-400 mx-auto mb-2" />
|
||||
<p className="text-green-400 font-medium">{formData.zipFile.name}</p>
|
||||
<p className="text-gray-500 text-sm mt-1">
|
||||
{(formData.zipFile.size / 1024 / 1024).toFixed(2)} MB
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<Upload className="w-8 h-8 text-gray-500 mx-auto mb-2" />
|
||||
<p className="text-gray-400">Cliquez ou glissez un fichier ZIP ici</p>
|
||||
<p className="text-gray-600 text-sm mt-1">Maximum 500 MB</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{errors.zipFile && (
|
||||
<p className="text-red-400 text-xs mt-1">{errors.zipFile}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{formData.sourceType === 'gitea' && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
||||
Dépôt Gitea <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
{giteaRepos.length === 0 ? (
|
||||
<div className="p-4 bg-dark-700 rounded-lg text-center text-gray-500">
|
||||
<Loader2 className="w-5 h-5 animate-spin mx-auto mb-2" />
|
||||
Chargement des dépôts...
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2 max-h-48 overflow-y-auto pr-1">
|
||||
{giteaRepos.map((repo) => (
|
||||
<button
|
||||
key={repo.id}
|
||||
onClick={() => updateField('giteaRepoUrl', repo.cloneUrl)}
|
||||
className={`w-full p-3 rounded-lg border text-left transition-all ${
|
||||
formData.giteaRepoUrl === repo.cloneUrl
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-medium text-white text-sm">{repo.name}</div>
|
||||
{repo.description && (
|
||||
<div className="text-xs text-gray-500 mt-0.5">{repo.description}</div>
|
||||
)}
|
||||
</div>
|
||||
{repo.language && (
|
||||
<span className="text-xs px-2 py-0.5 bg-dark-600 rounded text-gray-400">
|
||||
{repo.language}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{errors.giteaRepoUrl && (
|
||||
<p className="text-red-400 text-xs mt-1">{errors.giteaRepoUrl}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Stack & Options */}
|
||||
{currentStep === 3 && (
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-3">
|
||||
Type de stack <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{stacks.map((s) => (
|
||||
<button
|
||||
key={s.id}
|
||||
onClick={() => updateField('stack', s.id)}
|
||||
className={`p-3 rounded-lg border text-center transition-all ${
|
||||
formData.stack === s.id
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
||||
}`}
|
||||
>
|
||||
<div className={`text-sm font-medium ${formData.stack === s.id ? 'text-white' : 'text-gray-300'}`}>
|
||||
{s.name}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{selectedStack && (
|
||||
<p className="text-gray-500 text-xs mt-2">{selectedStack.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1.5">
|
||||
Port de l'application (optionnel)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.port}
|
||||
onChange={(e) => updateField('port', e.target.value)}
|
||||
placeholder="Auto-détecté selon la stack"
|
||||
className="w-full px-4 py-2.5 bg-dark-700 border border-dark-500 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="border border-dark-500 rounded-xl p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Database className={`w-5 h-5 ${formData.needsDb ? 'text-primary-400' : 'text-gray-500'}`} />
|
||||
<div>
|
||||
<div className="text-sm font-medium text-white">Base de données</div>
|
||||
<div className="text-xs text-gray-500">Ajouter un conteneur de base de données</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => updateField('needsDb', !formData.needsDb)}
|
||||
className={`relative w-12 h-6 rounded-full transition-colors ${
|
||||
formData.needsDb ? 'bg-primary-500' : 'bg-dark-600'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${
|
||||
formData.needsDb ? 'translate-x-6' : 'translate-x-0.5'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{formData.needsDb && (
|
||||
<div className="mt-4 pt-4 border-t border-dark-500">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Type de base de données
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
onClick={() => updateField('dbType', 'mysql')}
|
||||
className={`p-3 rounded-lg border text-center transition-all ${
|
||||
formData.dbType === 'mysql'
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
||||
}`}
|
||||
>
|
||||
<div className={`text-sm font-medium ${formData.dbType === 'mysql' ? 'text-white' : 'text-gray-300'}`}>
|
||||
MySQL 8.0
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateField('dbType', 'postgres')}
|
||||
className={`p-3 rounded-lg border text-center transition-all ${
|
||||
formData.dbType === 'postgres'
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-dark-500 bg-dark-700 hover:border-dark-400'
|
||||
}`}
|
||||
>
|
||||
<div className={`text-sm font-medium ${formData.dbType === 'postgres' ? 'text-white' : 'text-gray-300'}`}>
|
||||
PostgreSQL 16
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 4: Confirmation */}
|
||||
{currentStep === 4 && (
|
||||
<div className="space-y-5">
|
||||
{submitResult ? (
|
||||
<div
|
||||
className={`p-6 rounded-xl border ${
|
||||
submitResult.success
|
||||
? 'border-green-500/30 bg-green-500/10'
|
||||
: 'border-red-500/30 bg-red-500/10'
|
||||
}`}
|
||||
>
|
||||
{submitResult.success ? (
|
||||
<div className="text-center">
|
||||
<CheckCircle className="w-12 h-12 text-green-400 mx-auto mb-3" />
|
||||
<h3 className="text-lg font-bold text-green-400">
|
||||
Création lancée avec succès !
|
||||
</h3>
|
||||
<p className="text-gray-400 mt-2 text-sm">
|
||||
L'application est en cours de déploiement. Suivez la progression dans l'onglet Déploiements.
|
||||
</p>
|
||||
<p className="text-gray-500 mt-2 text-xs">
|
||||
URL: https://{formData.subdomain}.recette.santinova-soft.org
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<AlertCircle className="w-12 h-12 text-red-400 mx-auto mb-3" />
|
||||
<h3 className="text-lg font-bold text-red-400">Erreur</h3>
|
||||
<p className="text-gray-400 mt-2 text-sm">{submitResult.error}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<h3 className="text-lg font-semibold text-white">Récapitulatif</h3>
|
||||
<div className="bg-dark-700 rounded-xl divide-y divide-dark-600">
|
||||
<div className="flex justify-between items-center px-4 py-3">
|
||||
<span className="text-gray-400 text-sm">Nom</span>
|
||||
<span className="text-white font-medium">{formData.name}</span>
|
||||
</div>
|
||||
{formData.description && (
|
||||
<div className="flex justify-between items-center px-4 py-3">
|
||||
<span className="text-gray-400 text-sm">Description</span>
|
||||
<span className="text-white text-sm text-right max-w-xs truncate">{formData.description}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between items-center px-4 py-3">
|
||||
<span className="text-gray-400 text-sm">URL</span>
|
||||
<span className="text-primary-400 text-sm">
|
||||
https://{formData.subdomain}.recette.santinova-soft.org
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center px-4 py-3">
|
||||
<span className="text-gray-400 text-sm">Source</span>
|
||||
<span className="text-white text-sm">
|
||||
{formData.sourceType === 'zip'
|
||||
? `ZIP: ${formData.zipFile?.name || '-'}`
|
||||
: `Gitea: ${formData.giteaRepoUrl.split('/').pop()}`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center px-4 py-3">
|
||||
<span className="text-gray-400 text-sm">Stack</span>
|
||||
<span className="text-white text-sm">
|
||||
{selectedStack?.name || formData.stack}
|
||||
</span>
|
||||
</div>
|
||||
{formData.port && (
|
||||
<div className="flex justify-between items-center px-4 py-3">
|
||||
<span className="text-gray-400 text-sm">Port</span>
|
||||
<span className="text-white text-sm">{formData.port}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between items-center px-4 py-3">
|
||||
<span className="text-gray-400 text-sm">Base de données</span>
|
||||
<span className="text-white text-sm">
|
||||
{formData.needsDb
|
||||
? formData.dbType === 'mysql'
|
||||
? 'MySQL 8.0'
|
||||
: 'PostgreSQL 16'
|
||||
: 'Aucune'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-yellow-500/10 border border-yellow-500/30 rounded-xl p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-yellow-400 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="text-yellow-400 text-sm font-medium">
|
||||
Le déploiement peut prendre plusieurs minutes
|
||||
</p>
|
||||
<p className="text-gray-400 text-xs mt-1">
|
||||
Le build Docker et le démarrage des conteneurs seront exécutés en arrière-plan.
|
||||
Vous pourrez suivre la progression dans l'onglet Déploiements.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-t border-dark-600 bg-dark-900/50">
|
||||
<div>
|
||||
{currentStep > 1 && !submitResult && (
|
||||
<button
|
||||
onClick={prevStep}
|
||||
className="px-4 py-2 text-gray-400 hover:text-white transition-colors text-sm"
|
||||
>
|
||||
Retour
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{submitResult ? (
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="btn-primary px-6"
|
||||
>
|
||||
Fermer
|
||||
</button>
|
||||
) : currentStep < 4 ? (
|
||||
<button onClick={nextStep} className="btn-primary px-6">
|
||||
Suivant
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
className="btn-primary px-6 flex items-center gap-2"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
Création en cours...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Package className="w-4 h-4" />
|
||||
Créer et déployer
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,361 @@
|
|||
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;
|
||||
|
||||
return (
|
||||
<div className="card overflow-hidden">
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
Server,
|
||||
LayoutDashboard,
|
||||
Box,
|
||||
GitBranch,
|
||||
ScrollText,
|
||||
Container,
|
||||
LogOut,
|
||||
Wifi,
|
||||
WifiOff,
|
||||
Activity,
|
||||
} 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 },
|
||||
];
|
||||
|
||||
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">Manus</h1>
|
||||
<p className="text-xs text-gray-500">Dashboard</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 p-4 space-y-1">
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = currentPage === item.id;
|
||||
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
|
||||
? 'bg-primary-600/10 text-primary-400 border border-primary-500/20'
|
||||
: '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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import React from 'react';
|
||||
|
||||
const statusConfig = {
|
||||
online: {
|
||||
label: 'En ligne',
|
||||
className: 'status-online',
|
||||
dotColor: 'bg-emerald-400',
|
||||
},
|
||||
offline: {
|
||||
label: 'Hors ligne',
|
||||
className: 'status-offline',
|
||||
dotColor: 'bg-gray-400',
|
||||
},
|
||||
error: {
|
||||
label: 'Erreur',
|
||||
className: 'status-error',
|
||||
dotColor: 'bg-red-400',
|
||||
},
|
||||
unknown: {
|
||||
label: 'Inconnu',
|
||||
className: 'status-warning',
|
||||
dotColor: 'bg-amber-400',
|
||||
},
|
||||
running: {
|
||||
label: 'En cours',
|
||||
className: 'status-warning',
|
||||
dotColor: 'bg-amber-400',
|
||||
},
|
||||
success: {
|
||||
label: 'Succès',
|
||||
className: 'status-online',
|
||||
dotColor: 'bg-emerald-400',
|
||||
},
|
||||
failed: {
|
||||
label: 'Échoué',
|
||||
className: 'status-error',
|
||||
dotColor: 'bg-red-400',
|
||||
},
|
||||
};
|
||||
|
||||
export default function StatusBadge({ status, size = 'sm' }) {
|
||||
const config = statusConfig[status] || statusConfig.unknown;
|
||||
|
||||
return (
|
||||
<span className={config.className}>
|
||||
<span
|
||||
className={`w-2 h-2 rounded-full ${config.dotColor} mr-1.5 ${
|
||||
status === 'online' || status === 'running' ? 'animate-pulse-dot' : ''
|
||||
}`}
|
||||
/>
|
||||
{config.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import { useEffect, useRef, useState, useCallback } from 'react';
|
||||
|
||||
export default function useWebSocket(onMessage) {
|
||||
const wsRef = useRef(null);
|
||||
const [connected, setConnected] = useState(false);
|
||||
const reconnectTimeout = useRef(null);
|
||||
|
||||
const connect = useCallback(() => {
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsUrl = `${protocol}//${window.location.host}/ws`;
|
||||
|
||||
try {
|
||||
const ws = new WebSocket(wsUrl);
|
||||
wsRef.current = ws;
|
||||
|
||||
ws.onopen = () => {
|
||||
setConnected(true);
|
||||
console.log('WebSocket connecté');
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
if (onMessage) onMessage(data);
|
||||
} catch (e) {
|
||||
console.error('Erreur parsing WS message:', e);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
setConnected(false);
|
||||
console.log('WebSocket déconnecté, reconnexion dans 5s...');
|
||||
reconnectTimeout.current = setTimeout(connect, 5000);
|
||||
};
|
||||
|
||||
ws.onerror = (err) => {
|
||||
console.error('Erreur WebSocket:', err);
|
||||
ws.close();
|
||||
};
|
||||
} catch (err) {
|
||||
console.error('Erreur connexion WebSocket:', err);
|
||||
reconnectTimeout.current = setTimeout(connect, 5000);
|
||||
}
|
||||
}, [onMessage]);
|
||||
|
||||
useEffect(() => {
|
||||
connect();
|
||||
return () => {
|
||||
if (wsRef.current) wsRef.current.close();
|
||||
if (reconnectTimeout.current) clearTimeout(reconnectTimeout.current);
|
||||
};
|
||||
}, [connect]);
|
||||
|
||||
return { connected };
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply bg-dark-950 text-gray-100 antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn-primary {
|
||||
@apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-dark-900 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
@apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-dark-900 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-dark-700 hover:bg-dark-600 text-gray-200 font-medium py-2 px-4 rounded-lg transition-colors duration-200 border border-dark-600 focus:outline-none focus:ring-2 focus:ring-dark-500 focus:ring-offset-2 focus:ring-offset-dark-900;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-dark-800 border border-dark-700 rounded-xl shadow-lg;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
@apply w-full bg-dark-700 border border-dark-600 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
.status-online {
|
||||
@apply status-badge bg-emerald-500/20 text-emerald-400 border border-emerald-500/30;
|
||||
}
|
||||
|
||||
.status-offline {
|
||||
@apply status-badge bg-gray-500/20 text-gray-400 border border-gray-500/30;
|
||||
}
|
||||
|
||||
.status-error {
|
||||
@apply status-badge bg-red-500/20 text-red-400 border border-red-500/30;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
@apply status-badge bg-amber-500/20 text-amber-400 border border-amber-500/30;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-dark-900;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-dark-600 rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-dark-500;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.animate-pulse-dot {
|
||||
animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
/* Log viewer */
|
||||
.log-viewer {
|
||||
@apply font-mono text-sm leading-relaxed whitespace-pre-wrap break-all;
|
||||
}
|
||||
|
||||
.log-viewer .log-timestamp {
|
||||
@apply text-gray-500;
|
||||
}
|
||||
|
||||
.log-viewer .log-error {
|
||||
@apply text-red-400;
|
||||
}
|
||||
|
||||
.log-viewer .log-success {
|
||||
@apply text-emerald-400;
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Box, RefreshCw, Plus } from 'lucide-react';
|
||||
import AppCard from '../components/AppCard';
|
||||
import AddAppModal from '../components/AddAppModal';
|
||||
import { getApps, getGiteaCommits } from '../utils/api';
|
||||
|
||||
export default function AppsPage({ apps, onRefresh }) {
|
||||
const [commitsMap, setCommitsMap] = useState({});
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Charger les commits pour chaque app
|
||||
apps.forEach((app) => {
|
||||
const owner = app.giteaOwner || 'manus-admin';
|
||||
const repo = app.giteaRepo || app.id;
|
||||
getGiteaCommits(owner, repo)
|
||||
.then((res) => {
|
||||
setCommitsMap((prev) => ({
|
||||
...prev,
|
||||
[app.id]: res.data,
|
||||
}));
|
||||
})
|
||||
.catch(() => {
|
||||
// Ignorer les erreurs Gitea pour les apps sans dépôt
|
||||
});
|
||||
});
|
||||
}, [apps]);
|
||||
|
||||
const handleAddSuccess = () => {
|
||||
setShowAddModal(false);
|
||||
// Rafraîchir la liste après un délai pour laisser le temps au health check
|
||||
setTimeout(() => {
|
||||
if (onRefresh) onRefresh();
|
||||
}, 5000);
|
||||
// Rafraîchir encore après 15s
|
||||
setTimeout(() => {
|
||||
if (onRefresh) onRefresh();
|
||||
}, 15000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
||||
<Box className="w-7 h-7 text-primary-400" />
|
||||
Applications
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Gérez et surveillez vos applications déployées
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button onClick={onRefresh} className="btn-secondary flex items-center gap-2">
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
Rafraîchir
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className="btn-primary flex items-center gap-2"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Ajouter une application
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Apps List */}
|
||||
{apps.length === 0 ? (
|
||||
<div className="card p-12 text-center">
|
||||
<Box className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-400">
|
||||
Aucune application
|
||||
</h3>
|
||||
<p className="text-gray-600 mt-2">
|
||||
Les applications déployées apparaîtront ici
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className="btn-primary mt-4 inline-flex items-center gap-2"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Ajouter votre première application
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{apps.map((app) => (
|
||||
<AppCard
|
||||
key={app.id}
|
||||
app={app}
|
||||
commits={commitsMap[app.id] || []}
|
||||
onRefresh={onRefresh}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add App Modal */}
|
||||
<AddAppModal
|
||||
isOpen={showAddModal}
|
||||
onClose={() => setShowAddModal(false)}
|
||||
onSuccess={handleAddSuccess}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Activity,
|
||||
Box,
|
||||
Container,
|
||||
Server,
|
||||
Clock,
|
||||
TrendingUp,
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
} from 'lucide-react';
|
||||
import { getApps, getSystemInfo } from '../utils/api';
|
||||
import StatusBadge from '../components/StatusBadge';
|
||||
|
||||
function StatCard({ icon: Icon, label, value, color, subtext }) {
|
||||
return (
|
||||
<div className="card p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">{label}</p>
|
||||
<p className="text-2xl font-bold text-white mt-1">{value}</p>
|
||||
{subtext && <p className="text-xs text-gray-500 mt-1">{subtext}</p>}
|
||||
</div>
|
||||
<div
|
||||
className={`w-12 h-12 rounded-xl flex items-center justify-center ${color}`}
|
||||
>
|
||||
<Icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardPage({ apps }) {
|
||||
const [systemInfo, setSystemInfo] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
getSystemInfo()
|
||||
.then((res) => setSystemInfo(res.data))
|
||||
.catch(console.error);
|
||||
}, []);
|
||||
|
||||
const onlineApps = apps.filter((a) => a.status === 'online').length;
|
||||
const offlineApps = apps.filter((a) => a.status === 'offline').length;
|
||||
const errorApps = apps.filter((a) => a.status === 'error').length;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white">Tableau de bord</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Vue d'ensemble de l'infrastructure Manus
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
icon={Box}
|
||||
label="Applications"
|
||||
value={apps.length}
|
||||
color="bg-primary-600"
|
||||
subtext="Applications déployées"
|
||||
/>
|
||||
<StatCard
|
||||
icon={CheckCircle2}
|
||||
label="En ligne"
|
||||
value={onlineApps}
|
||||
color="bg-emerald-600"
|
||||
subtext="Applications fonctionnelles"
|
||||
/>
|
||||
<StatCard
|
||||
icon={XCircle}
|
||||
label="Hors ligne"
|
||||
value={offlineApps}
|
||||
color="bg-gray-600"
|
||||
subtext="Applications arrêtées"
|
||||
/>
|
||||
<StatCard
|
||||
icon={AlertCircle}
|
||||
label="Erreurs"
|
||||
value={errorApps}
|
||||
color="bg-red-600"
|
||||
subtext="Applications en erreur"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* System Info + Apps Overview */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* System Info */}
|
||||
<div className="card p-6">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Server className="w-5 h-5 text-primary-400" />
|
||||
Informations système
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between py-2 border-b border-dark-700">
|
||||
<span className="text-sm text-gray-400">Serveur</span>
|
||||
<span className="text-sm text-gray-200">
|
||||
78.138.58.109 (Recette)
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-2 border-b border-dark-700">
|
||||
<span className="text-sm text-gray-400">Conteneurs actifs</span>
|
||||
<span className="text-sm text-gray-200">
|
||||
{systemInfo?.runningContainers || '...'} /{' '}
|
||||
{systemInfo?.totalContainers || '...'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-2 border-b border-dark-700">
|
||||
<span className="text-sm text-gray-400">Gitea</span>
|
||||
<a
|
||||
href="https://git.santinova-soft.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-primary-400 hover:text-primary-300"
|
||||
>
|
||||
git.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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
ScrollText,
|
||||
RefreshCw,
|
||||
Clock,
|
||||
User,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Loader,
|
||||
} from 'lucide-react';
|
||||
import { getDeployments } from '../utils/api';
|
||||
import StatusBadge from '../components/StatusBadge';
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return 'N/A';
|
||||
try {
|
||||
return new Date(dateStr).toLocaleString('fr-FR');
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
function DeploymentEntry({ deployment }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const statusIcon = {
|
||||
success: <CheckCircle2 className="w-5 h-5 text-emerald-400" />,
|
||||
failed: <XCircle className="w-5 h-5 text-red-400" />,
|
||||
running: <Loader className="w-5 h-5 text-amber-400 animate-spin" />,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card overflow-hidden">
|
||||
<div
|
||||
className="p-4 flex items-center justify-between cursor-pointer hover:bg-dark-700/50 transition-colors"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
{statusIcon[deployment.status] || statusIcon.running}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-200">
|
||||
{deployment.message}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 mt-1">
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{formatDate(deployment.timestamp)}
|
||||
</span>
|
||||
{deployment.user && (
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<User className="w-3 h-3" />
|
||||
{deployment.user}
|
||||
</span>
|
||||
)}
|
||||
{deployment.duration && (
|
||||
<span className="text-xs text-gray-500">
|
||||
Durée: {deployment.duration}s
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<StatusBadge status={deployment.status} />
|
||||
{expanded ? (
|
||||
<ChevronUp className="w-4 h-4 text-gray-500" />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4 text-gray-500" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{expanded && deployment.logs && (
|
||||
<div className="px-4 pb-4 border-t border-dark-700">
|
||||
<div className="bg-dark-950 rounded-lg p-4 mt-3 max-h-96 overflow-auto">
|
||||
<pre className="log-viewer text-xs text-gray-400">
|
||||
{deployment.logs}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DeploymentsPage() {
|
||||
const [deployments, setDeployments] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchDeployments = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getDeployments();
|
||||
setDeployments(res.data);
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement déploiements:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchDeployments();
|
||||
const interval = setInterval(fetchDeployments, 10000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
||||
<ScrollText className="w-7 h-7 text-primary-400" />
|
||||
Historique des déploiements
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Consultez les logs des derniers déploiements
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={fetchDeployments}
|
||||
className="btn-secondary flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
Rafraîchir
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Deployments List */}
|
||||
{loading && deployments.length === 0 ? (
|
||||
<div className="card p-12 text-center">
|
||||
<RefreshCw className="w-8 h-8 text-gray-600 mx-auto mb-4 animate-spin" />
|
||||
<p className="text-gray-400">Chargement...</p>
|
||||
</div>
|
||||
) : deployments.length === 0 ? (
|
||||
<div className="card p-12 text-center">
|
||||
<ScrollText className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-400">
|
||||
Aucun déploiement
|
||||
</h3>
|
||||
<p className="text-gray-600 mt-2">
|
||||
L'historique des déploiements apparaîtra ici après le premier
|
||||
redéploiement
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{deployments.map((d) => (
|
||||
<DeploymentEntry key={d.id} deployment={d} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Container, RefreshCw, Clock } from 'lucide-react';
|
||||
import { getContainers } from '../utils/api';
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return 'N/A';
|
||||
try {
|
||||
return new Date(dateStr).toLocaleString('fr-FR');
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
export default function DockerPage() {
|
||||
const [containers, setContainers] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchContainers = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getContainers();
|
||||
setContainers(res.data);
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement conteneurs:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchContainers();
|
||||
const interval = setInterval(fetchContainers, 15000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const stateColors = {
|
||||
running: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
|
||||
exited: 'text-red-400 bg-red-500/10 border-red-500/20',
|
||||
created: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
|
||||
restarting: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
||||
<Container className="w-7 h-7 text-primary-400" />
|
||||
Conteneurs Docker
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Vue d'ensemble de tous les conteneurs sur le serveur
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={fetchContainers}
|
||||
className="btn-secondary flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
Rafraîchir
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Containers Table */}
|
||||
<div className="card overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-dark-700">
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
Nom
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
Image
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
État
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
Statut
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
ID
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
Créé
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-dark-700">
|
||||
{loading && containers.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan="6" className="px-6 py-8 text-center">
|
||||
<RefreshCw className="w-6 h-6 text-gray-600 mx-auto animate-spin" />
|
||||
</td>
|
||||
</tr>
|
||||
) : containers.length === 0 ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan="6"
|
||||
className="px-6 py-8 text-center text-gray-500"
|
||||
>
|
||||
Aucun conteneur trouvé
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
containers.map((c) => (
|
||||
<tr
|
||||
key={c.id}
|
||||
className="hover:bg-dark-700/30 transition-colors"
|
||||
>
|
||||
<td className="px-6 py-3">
|
||||
<span className="text-sm font-medium text-gray-200">
|
||||
{c.names.join(', ')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<code className="text-xs text-gray-400 bg-dark-700 px-2 py-0.5 rounded">
|
||||
{c.image}
|
||||
</code>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<span
|
||||
className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border ${
|
||||
stateColors[c.state] || stateColors.created
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`w-1.5 h-1.5 rounded-full mr-1.5 ${
|
||||
c.state === 'running'
|
||||
? 'bg-emerald-400'
|
||||
: c.state === 'exited'
|
||||
? 'bg-red-400'
|
||||
: 'bg-amber-400'
|
||||
}`}
|
||||
/>
|
||||
{c.state}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<span className="text-xs text-gray-400">{c.status}</span>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<code className="text-xs text-gray-500 font-mono">
|
||||
{c.id}
|
||||
</code>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{formatDate(c.created)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,227 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
GitBranch,
|
||||
RefreshCw,
|
||||
ExternalLink,
|
||||
Lock,
|
||||
Unlock,
|
||||
GitCommit,
|
||||
Clock,
|
||||
User,
|
||||
Code,
|
||||
} from 'lucide-react';
|
||||
import { getGiteaRepos, getGiteaCommits } from '../utils/api';
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return 'N/A';
|
||||
try {
|
||||
return new Date(dateStr).toLocaleString('fr-FR');
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
function formatSize(kb) {
|
||||
if (!kb) return 'N/A';
|
||||
if (kb < 1024) return `${kb} KB`;
|
||||
return `${(kb / 1024).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
export default function GiteaPage() {
|
||||
const [repos, setRepos] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedRepo, setSelectedRepo] = useState(null);
|
||||
const [commits, setCommits] = useState([]);
|
||||
const [loadingCommits, setLoadingCommits] = useState(false);
|
||||
|
||||
const fetchRepos = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getGiteaRepos();
|
||||
setRepos(res.data);
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement repos:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchCommits = async (fullName) => {
|
||||
setLoadingCommits(true);
|
||||
setSelectedRepo(fullName);
|
||||
try {
|
||||
const [owner, repo] = fullName.split('/');
|
||||
const res = await getGiteaCommits(owner, repo);
|
||||
setCommits(res.data);
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement commits:', err);
|
||||
setCommits([]);
|
||||
} finally {
|
||||
setLoadingCommits(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchRepos();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
||||
<GitBranch className="w-7 h-7 text-primary-400" />
|
||||
Dépôts Gitea
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Explorez les dépôts sur{' '}
|
||||
<a
|
||||
href="https://git.santinova-soft.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary-400 hover:text-primary-300"
|
||||
>
|
||||
git.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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
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">Manus Dashboard</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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,251 @@
|
|||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
Cpu,
|
||||
MemoryStick,
|
||||
HardDrive,
|
||||
Network,
|
||||
Activity,
|
||||
RefreshCw,
|
||||
Clock,
|
||||
Server,
|
||||
TrendingUp,
|
||||
} from 'lucide-react';
|
||||
import { getServerMetrics } from '../utils/api';
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (!bytes || bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'Ko', 'Mo', 'Go', 'To'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
function formatUptime(seconds) {
|
||||
if (!seconds) return 'N/A';
|
||||
const days = Math.floor(seconds / 86400);
|
||||
const hours = Math.floor((seconds % 86400) / 3600);
|
||||
const mins = Math.floor((seconds % 3600) / 60);
|
||||
if (days > 0) return `${days}j ${hours}h ${mins}m`;
|
||||
if (hours > 0) return `${hours}h ${mins}m`;
|
||||
return `${mins}m`;
|
||||
}
|
||||
|
||||
function GaugeBar({ value, max = 100, color = 'primary', label, sublabel }) {
|
||||
const pct = Math.min(100, Math.round((value / max) * 100));
|
||||
const colorMap = {
|
||||
primary: { bar: 'bg-primary-500', text: 'text-primary-400', border: 'border-primary-500/30' },
|
||||
emerald: { bar: 'bg-emerald-500', text: 'text-emerald-400', border: 'border-emerald-500/30' },
|
||||
amber: { bar: 'bg-amber-500', text: 'text-amber-400', border: 'border-amber-500/30' },
|
||||
red: { bar: 'bg-red-500', text: 'text-red-400', border: 'border-red-500/30' },
|
||||
};
|
||||
const dangerColor = pct > 85 ? 'red' : pct > 65 ? 'amber' : color;
|
||||
const c = colorMap[dangerColor] || colorMap.primary;
|
||||
|
||||
return (
|
||||
<div className={`card p-5 border ${c.border}`}>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-sm font-medium text-gray-300">{label}</span>
|
||||
<span className={`text-2xl font-bold ${c.text}`}>{pct}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-dark-700 rounded-full h-3 mb-3 overflow-hidden">
|
||||
<div
|
||||
className={`h-3 rounded-full transition-all duration-700 ${c.bar}`}
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">{sublabel}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MetricCard({ icon: Icon, label, value, sub, color = 'primary' }) {
|
||||
const colorMap = {
|
||||
primary: 'text-primary-400 bg-primary-500/10 border-primary-500/20',
|
||||
emerald: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
|
||||
amber: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
|
||||
blue: 'text-blue-400 bg-blue-500/10 border-blue-500/20',
|
||||
};
|
||||
return (
|
||||
<div className={`card p-5 border ${colorMap[color]}`}>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className={`p-3 rounded-xl border ${colorMap[color]}`}>
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-wider mb-1">{label}</p>
|
||||
<p className="text-xl font-bold text-white truncate">{value}</p>
|
||||
{sub && <p className="text-xs text-gray-500 mt-1">{sub}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MonitoringPage() {
|
||||
const [metrics, setMetrics] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [lastUpdate, setLastUpdate] = useState(null);
|
||||
const [autoRefresh, setAutoRefresh] = useState(true);
|
||||
|
||||
const fetchMetrics = useCallback(async () => {
|
||||
try {
|
||||
const res = await getServerMetrics();
|
||||
setMetrics(res.data);
|
||||
setLastUpdate(new Date());
|
||||
} catch (err) {
|
||||
console.error('Erreur métriques:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMetrics();
|
||||
}, [fetchMetrics]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!autoRefresh) return;
|
||||
const interval = setInterval(fetchMetrics, 10000);
|
||||
return () => clearInterval(interval);
|
||||
}, [autoRefresh, fetchMetrics]);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
||||
<Activity className="w-7 h-7 text-primary-400" />
|
||||
Monitoring Serveur
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Consommation des ressources en temps réel
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{lastUpdate && (
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<Clock className="w-3.5 h-3.5" />
|
||||
Mis à jour : {lastUpdate.toLocaleTimeString('fr-FR')}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setAutoRefresh((v) => !v)}
|
||||
className={`btn-secondary text-sm flex items-center gap-2 ${autoRefresh ? 'text-emerald-400' : ''}`}
|
||||
>
|
||||
<Activity className="w-4 h-4" />
|
||||
{autoRefresh ? 'Auto (10s)' : 'Manuel'}
|
||||
</button>
|
||||
<button
|
||||
onClick={fetchMetrics}
|
||||
disabled={loading}
|
||||
className="btn-secondary flex items-center gap-2 text-sm"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
Rafraîchir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading && !metrics ? (
|
||||
<div className="card p-12 text-center">
|
||||
<RefreshCw className="w-8 h-8 text-primary-400 animate-spin mx-auto mb-3" />
|
||||
<p className="text-gray-400">Chargement des métriques...</p>
|
||||
</div>
|
||||
) : metrics?.error ? (
|
||||
<div className="card p-8 text-center border border-red-500/20">
|
||||
<p className="text-red-400">Erreur : {metrics.error}</p>
|
||||
</div>
|
||||
) : metrics ? (
|
||||
<>
|
||||
{/* Jauges principales */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<GaugeBar
|
||||
value={metrics.cpu?.usage || 0}
|
||||
label="Processeur (CPU)"
|
||||
sublabel={`Load avg: ${metrics.load?.load1?.toFixed(2)} / ${metrics.load?.load5?.toFixed(2)} / ${metrics.load?.load15?.toFixed(2)}`}
|
||||
color="primary"
|
||||
/>
|
||||
<GaugeBar
|
||||
value={metrics.memory?.usagePercent || 0}
|
||||
label="Mémoire RAM"
|
||||
sublabel={`${formatBytes(metrics.memory?.used)} utilisés sur ${formatBytes(metrics.memory?.total)} — ${formatBytes(metrics.memory?.available)} disponibles`}
|
||||
color="emerald"
|
||||
/>
|
||||
<GaugeBar
|
||||
value={metrics.disk?.usagePercent || 0}
|
||||
label="Espace Disque"
|
||||
sublabel={`${formatBytes(metrics.disk?.used)} utilisés sur ${formatBytes(metrics.disk?.total)} — ${formatBytes(metrics.disk?.free)} libres`}
|
||||
color="amber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Métriques détaillées */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<MetricCard
|
||||
icon={Server}
|
||||
label="Uptime serveur"
|
||||
value={formatUptime(metrics.uptime)}
|
||||
sub="Depuis le dernier redémarrage"
|
||||
color="primary"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={TrendingUp}
|
||||
label="Charge système (1 min)"
|
||||
value={metrics.load?.load1?.toFixed(2) || 'N/A'}
|
||||
sub={`5 min: ${metrics.load?.load5?.toFixed(2)} — 15 min: ${metrics.load?.load15?.toFixed(2)}`}
|
||||
color="blue"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={Network}
|
||||
label="Réseau — Reçu"
|
||||
value={formatBytes(metrics.network?.rx)}
|
||||
sub="Total depuis le démarrage"
|
||||
color="emerald"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={Network}
|
||||
label="Réseau — Envoyé"
|
||||
value={formatBytes(metrics.network?.tx)}
|
||||
sub="Total depuis le démarrage"
|
||||
color="amber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tableau récapitulatif */}
|
||||
<div className="card overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-dark-700">
|
||||
<h3 className="text-base font-semibold text-white flex items-center gap-2">
|
||||
<HardDrive className="w-5 h-5 text-primary-400" />
|
||||
Récapitulatif des ressources
|
||||
</h3>
|
||||
</div>
|
||||
<div className="divide-y divide-dark-700">
|
||||
{[
|
||||
{ label: 'CPU — Utilisation', value: `${metrics.cpu?.usage?.toFixed(1) || 0}%`, status: metrics.cpu?.usage > 85 ? 'critical' : metrics.cpu?.usage > 65 ? 'warning' : 'ok' },
|
||||
{ label: 'RAM — Utilisée', value: `${formatBytes(metrics.memory?.used)} / ${formatBytes(metrics.memory?.total)}`, status: metrics.memory?.usagePercent > 85 ? 'critical' : metrics.memory?.usagePercent > 65 ? 'warning' : 'ok' },
|
||||
{ label: 'RAM — Disponible', value: formatBytes(metrics.memory?.available), status: 'ok' },
|
||||
{ label: 'Disque — Utilisé', value: `${formatBytes(metrics.disk?.used)} / ${formatBytes(metrics.disk?.total)}`, status: metrics.disk?.usagePercent > 85 ? 'critical' : metrics.disk?.usagePercent > 65 ? 'warning' : 'ok' },
|
||||
{ label: 'Disque — Libre', value: formatBytes(metrics.disk?.free), status: 'ok' },
|
||||
{ label: 'Réseau — Trafic entrant', value: formatBytes(metrics.network?.rx), status: 'ok' },
|
||||
{ label: 'Réseau — Trafic sortant', value: formatBytes(metrics.network?.tx), status: 'ok' },
|
||||
{ label: 'Uptime', value: formatUptime(metrics.uptime), status: 'ok' },
|
||||
].map((row) => (
|
||||
<div key={row.label} className="px-6 py-3 flex items-center justify-between hover:bg-dark-800/50 transition-colors">
|
||||
<span className="text-sm text-gray-400">{row.label}</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-medium text-white">{row.value}</span>
|
||||
<span className={`w-2 h-2 rounded-full ${
|
||||
row.status === 'critical' ? 'bg-red-400' :
|
||||
row.status === 'warning' ? 'bg-amber-400' : 'bg-emerald-400'
|
||||
}`} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import axios from 'axios';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: '/api',
|
||||
withCredentials: true,
|
||||
});
|
||||
|
||||
// Intercepteur pour gérer les erreurs d'auth
|
||||
api.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem('dashboard_token');
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
api.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error) => {
|
||||
if (error.response && error.response.status === 401) {
|
||||
localStorage.removeItem('dashboard_token');
|
||||
window.location.href = '/login';
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default api;
|
||||
|
||||
// Auth
|
||||
export const login = (username, password) =>
|
||||
api.post('/auth/login', { username, password });
|
||||
|
||||
export const logout = () => api.post('/auth/logout');
|
||||
|
||||
export const getMe = () => api.get('/auth/me');
|
||||
|
||||
// Apps
|
||||
export const getApps = () => api.get('/apps');
|
||||
export const getApp = (id) => api.get(`/apps/${id}`);
|
||||
export const checkApp = (id) => api.post(`/apps/${id}/check`);
|
||||
export const deployApp = (id) => api.post(`/apps/${id}/deploy`);
|
||||
export const getAppLogs = (id, tail = 100) =>
|
||||
api.get(`/apps/${id}/logs`, { params: { tail } });
|
||||
|
||||
// App creation
|
||||
export const getAvailableStacks = () => api.get('/apps-config/stacks');
|
||||
export const createApp = (formData) =>
|
||||
api.post('/apps-config/create', formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
timeout: 600000, // 10 minutes timeout
|
||||
});
|
||||
|
||||
// Deployments
|
||||
export const getDeployments = (appId) =>
|
||||
api.get('/deployments', { params: { appId } });
|
||||
|
||||
// Gitea
|
||||
export const getGiteaRepos = () => api.get('/gitea/repos');
|
||||
export const getGiteaCommits = (owner, repo) =>
|
||||
api.get(`/gitea/repos/${owner}/${repo}/commits`);
|
||||
|
||||
// Docker
|
||||
export const getContainers = () => api.get('/docker/containers');
|
||||
|
||||
// System
|
||||
export const getSystemInfo = () => api.get('/system/info');
|
||||
export const getServerMetrics = () => api.get('/system/metrics');
|
||||
|
||||
// Container control
|
||||
export const startApp = (id) => api.post(`/apps/${id}/start`);
|
||||
export const stopApp = (id) => api.post(`/apps/${id}/stop`);
|
||||
export const restartApp = (id) => api.post(`/apps/${id}/restart`);
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#eff6ff',
|
||||
100: '#dbeafe',
|
||||
200: '#bfdbfe',
|
||||
300: '#93c5fd',
|
||||
400: '#60a5fa',
|
||||
500: '#3b82f6',
|
||||
600: '#2563eb',
|
||||
700: '#1d4ed8',
|
||||
800: '#1e40af',
|
||||
900: '#1e3a8a',
|
||||
950: '#172554',
|
||||
},
|
||||
dark: {
|
||||
50: '#f8fafc',
|
||||
100: '#f1f5f9',
|
||||
200: '#e2e8f0',
|
||||
300: '#cbd5e1',
|
||||
400: '#94a3b8',
|
||||
500: '#64748b',
|
||||
600: '#475569',
|
||||
700: '#334155',
|
||||
800: '#1e293b',
|
||||
900: '#0f172a',
|
||||
950: '#020617',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': 'http://localhost:3001',
|
||||
'/ws': {
|
||||
target: 'ws://localhost:3001',
|
||||
ws: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
sourcemap: false,
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue