428 lines
11 KiB
Markdown
428 lines
11 KiB
Markdown
# 📋 Réponses aux questions - InnotexBoard
|
|
|
|
## ❓ Question 1 : Code du fichier main.py pour FastAPI
|
|
|
|
### ✅ Réponse
|
|
|
|
Le fichier [backend/main.py](backend/main.py) contient tout ce qu'il faut.
|
|
|
|
**Points clés :**
|
|
|
|
```python
|
|
from fastapi import FastAPI
|
|
from fastapi.middleware.cors import CORSMiddleware
|
|
|
|
# Initialisation
|
|
app = FastAPI(
|
|
title="InnotexBoard - Debian Admin Panel",
|
|
description="Interface d'administration légère pour Debian",
|
|
version="0.1.0",
|
|
)
|
|
|
|
# Middleware de sécurité CORS
|
|
app.add_middleware(
|
|
CORSMiddleware,
|
|
allow_origins=["http://localhost:3000"],
|
|
allow_credentials=True,
|
|
allow_methods=["*"],
|
|
allow_headers=["*"],
|
|
)
|
|
|
|
# Routes
|
|
app.include_router(api_router, prefix="/api/v1")
|
|
|
|
# Lancement
|
|
if __name__ == "__main__":
|
|
uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)
|
|
```
|
|
|
|
**Structuration modulaire :**
|
|
|
|
- `app/core/config.py` → Configuration globale
|
|
- `app/core/security.py` → Authentification PAM + JWT
|
|
- `app/api/endpoints/` → Routes (auth, system, docker)
|
|
- `app/services/` → Logique métier (psutil, Docker SDK)
|
|
|
|
---
|
|
|
|
## ❓ Question 2 : Composant Vue.js pour Docker
|
|
|
|
### ✅ Réponse
|
|
|
|
Voir [frontend/src/views/ContainersView.vue](frontend/src/views/ContainersView.vue) - Composant complet avec :
|
|
|
|
#### Code minimaliste
|
|
|
|
```vue
|
|
<template>
|
|
<div class="p-8">
|
|
<!-- Liste des conteneurs -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div
|
|
v-for="container in containers"
|
|
:key="container.id"
|
|
class="card"
|
|
>
|
|
<!-- En-tête -->
|
|
<h3 class="text-lg font-semibold text-blue-400">{{ container.name }}</h3>
|
|
<p class="text-gray-400 text-sm">{{ container.image }}</p>
|
|
|
|
<!-- Badge statut -->
|
|
<span :class="getStatusClass(container.state)" class="badge">
|
|
{{ container.state }}
|
|
</span>
|
|
|
|
<!-- Stats -->
|
|
<div class="mt-4 grid grid-cols-2 gap-3">
|
|
<div class="stat-box">CPU: {{ container.cpu_percent }}%</div>
|
|
<div class="stat-box">MEM: {{ container.memory_usage }}</div>
|
|
</div>
|
|
|
|
<!-- Ports -->
|
|
<div v-if="container.ports.length > 0" class="mt-3">
|
|
<p class="text-xs text-gray-400">Ports:</p>
|
|
<div v-for="port in container.ports" :key="port.private_port" class="text-xs text-gray-300">
|
|
{{ port.public_port }}:{{ port.private_port }}/{{ port.type }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Boutons d'action -->
|
|
<div class="mt-4 flex space-x-2">
|
|
<button
|
|
v-if="container.state !== 'running'"
|
|
@click="actionContainer(container.id, 'start')"
|
|
class="btn btn-secondary flex-1"
|
|
>
|
|
▶ Démarrer
|
|
</button>
|
|
<button
|
|
v-if="container.state === 'running'"
|
|
@click="actionContainer(container.id, 'stop')"
|
|
class="btn btn-danger flex-1"
|
|
>
|
|
⏹ Arrêter
|
|
</button>
|
|
<button
|
|
@click="actionContainer(container.id, 'restart')"
|
|
class="btn btn-primary"
|
|
>
|
|
🔄
|
|
</button>
|
|
<button
|
|
@click="actionContainer(container.id, 'delete')"
|
|
class="btn btn-danger"
|
|
>
|
|
🗑
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import api from '../api'
|
|
|
|
const containers = ref([])
|
|
|
|
// Récupérer les conteneurs
|
|
const fetchContainers = async () => {
|
|
const response = await api.get('/docker/containers', { params: { all: true } })
|
|
containers.value = response.data
|
|
}
|
|
|
|
// Exécuter une action (start/stop/restart/delete)
|
|
const actionContainer = async (id, action) => {
|
|
try {
|
|
if (action === 'start') {
|
|
await api.post(`/docker/containers/${id}/start`)
|
|
} else if (action === 'stop') {
|
|
await api.post(`/docker/containers/${id}/stop`)
|
|
} else if (action === 'restart') {
|
|
await api.post(`/docker/containers/${id}/restart`)
|
|
} else if (action === 'delete') {
|
|
if (confirm('Êtes-vous sûr ?')) {
|
|
await api.delete(`/docker/containers/${id}`)
|
|
}
|
|
}
|
|
// Rafraîchir la liste
|
|
await fetchContainers()
|
|
} catch (error) {
|
|
console.error('Erreur:', error)
|
|
}
|
|
}
|
|
|
|
// Style du badge de statut
|
|
const getStatusClass = (state) => {
|
|
if (state === 'running') return 'badge-green'
|
|
if (state === 'exited') return 'badge-red'
|
|
return 'badge-gray'
|
|
}
|
|
|
|
// Charger les conteneurs au montage
|
|
onMounted(() => {
|
|
fetchContainers()
|
|
})
|
|
</script>
|
|
```
|
|
|
|
**Caractéristiques :**
|
|
|
|
- ✅ Affichage en grille responsive (1 col mobile, 2 cols desktop)
|
|
- ✅ Statut avec couleurs (vert=running, rouge=stopped)
|
|
- ✅ Stats CPU/RAM temps réel
|
|
- ✅ Affichage des ports mappés
|
|
- ✅ Boutons d'action (Start/Stop/Restart/Delete)
|
|
- ✅ Gestion des erreurs
|
|
- ✅ Design moderne avec Tailwind
|
|
|
|
---
|
|
|
|
## ❓ Question 3 : Configuration des permissions
|
|
|
|
### ✅ Réponse
|
|
|
|
Voir [PERMISSIONS.md](PERMISSIONS.md) pour le guide complet.
|
|
|
|
#### Résumé pour le démarrage rapide
|
|
|
|
### 1. **Permissions Docker**
|
|
|
|
```bash
|
|
# Option A (Développement - simple)
|
|
sudo usermod -aG docker $USER
|
|
newgrp docker
|
|
docker ps # Vérifier
|
|
|
|
# Option B (Production - sécurisé)
|
|
sudo visudo
|
|
# Ajouter: www-data ALL=(ALL) NOPASSWD: /usr/bin/docker
|
|
```
|
|
|
|
### 2. **Permissions PAM** (Authentification système)
|
|
|
|
```bash
|
|
# L'utilisateur doit être dans le groupe shadow
|
|
sudo usermod -aG shadow $USER
|
|
|
|
# Vérifier
|
|
id $USER
|
|
# Doit contenir "shadow"
|
|
```
|
|
|
|
### 3. **Permissions psutil** (Stats système)
|
|
|
|
```bash
|
|
# psutil lit /proc et /sys (accessible par défaut)
|
|
ls -la /proc | head
|
|
|
|
# Si problèmes d'accès:
|
|
sudo python3 main.py # Temporaire
|
|
|
|
# Ou modifier les permissions (attention!)
|
|
sudo chmod 755 /proc
|
|
```
|
|
|
|
### 4. **Configuration recommandée pour production**
|
|
|
|
```bash
|
|
# Créer un utilisateur dédié
|
|
sudo useradd -r -s /bin/false innotexboard
|
|
|
|
# Ajouter aux groupes
|
|
sudo usermod -aG docker innotexboard
|
|
sudo usermod -aG shadow innotexboard
|
|
|
|
# Sudo sans mot de passe pour Docker
|
|
echo "innotexboard ALL=(ALL) NOPASSWD: /usr/bin/docker" | sudo tee /etc/sudoers.d/innotexboard
|
|
sudo chmod 440 /etc/sudoers.d/innotexboard
|
|
|
|
# Lancer le service avec cet utilisateur
|
|
sudo -u innotexboard python3 main.py
|
|
```
|
|
|
|
### 5. **Vérification des permissions**
|
|
|
|
```bash
|
|
# Tester Docker
|
|
sudo -u innotexboard docker ps
|
|
|
|
# Tester psutil
|
|
sudo -u innotexboard python3 -c "import psutil; print(psutil.virtual_memory())"
|
|
|
|
# Tester PAM
|
|
python3 -c "import pam; print(pam.pam().authenticate('user', 'pass'))"
|
|
```
|
|
|
|
### 6. **Systemd Service (Optionnel)**
|
|
|
|
Créer `/etc/systemd/system/innotexboard.service` :
|
|
|
|
```ini
|
|
[Unit]
|
|
Description=InnotexBoard Admin Panel
|
|
After=network.target docker.service
|
|
Wants=docker.service
|
|
|
|
[Service]
|
|
Type=simple
|
|
User=innotexboard
|
|
WorkingDirectory=/opt/innotexboard/backend
|
|
ExecStart=/usr/bin/python3 main.py
|
|
Restart=on-failure
|
|
RestartSec=10
|
|
|
|
[Install]
|
|
WantedBy=multi-user.target
|
|
```
|
|
|
|
```bash
|
|
# Activer et démarrer
|
|
sudo systemctl daemon-reload
|
|
sudo systemctl enable innotexboard
|
|
sudo systemctl start innotexboard
|
|
sudo systemctl status innotexboard
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Design : Dashboard moderne sombre
|
|
|
|
### Caractéristiques implémentées
|
|
|
|
✅ **Couleurs sombres** :
|
|
- Fond: `bg-gray-900` (#0f172a)
|
|
- Cards: `bg-gray-800` (#1e293b)
|
|
- Texte: `text-gray-100`
|
|
|
|
✅ **Cards élégantes** :
|
|
```css
|
|
.card {
|
|
@apply bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700;
|
|
}
|
|
```
|
|
|
|
✅ **Barres de progression** :
|
|
```vue
|
|
<div class="w-full bg-gray-700 rounded-full h-2">
|
|
<div
|
|
class="bg-gradient-to-r from-blue-500 to-blue-600 h-2 rounded-full"
|
|
:style="{ width: percentage + '%' }"
|
|
></div>
|
|
</div>
|
|
```
|
|
|
|
✅ **Responsive** :
|
|
- Sidebar + Main content en desktop
|
|
- Stack verticalement en mobile
|
|
|
|
✅ **Interactive** :
|
|
- Hover effects sur les cards
|
|
- Transitions smooth
|
|
- Notifications toast
|
|
- Chargement avec spinner
|
|
|
|
---
|
|
|
|
## 📊 Fichiers créés
|
|
|
|
### Backend (Python/FastAPI)
|
|
|
|
| Fichier | Description |
|
|
|---------|-------------|
|
|
| [main.py](backend/main.py) | Point d'entrée FastAPI |
|
|
| [requirements.txt](backend/requirements.txt) | Dépendances Python |
|
|
| [app/core/config.py](backend/app/core/config.py) | Configuration globale |
|
|
| [app/core/security.py](backend/app/core/security.py) | Auth PAM + JWT |
|
|
| [app/api/endpoints/auth.py](backend/app/api/endpoints/auth.py) | Routes login |
|
|
| [app/api/endpoints/system.py](backend/app/api/endpoints/system.py) | Routes CPU/RAM |
|
|
| [app/api/endpoints/docker.py](backend/app/api/endpoints/docker.py) | Routes Docker |
|
|
| [app/services/system.py](backend/app/services/system.py) | Logique psutil |
|
|
| [app/services/docker_service.py](backend/app/services/docker_service.py) | Logique Docker |
|
|
|
|
### Frontend (Vue.js 3)
|
|
|
|
| Fichier | Description |
|
|
|---------|-------------|
|
|
| [src/main.js](frontend/src/main.js) | Point d'entrée Vue |
|
|
| [src/App.vue](frontend/src/App.vue) | Layout principal |
|
|
| [src/api/index.js](frontend/src/api/index.js) | Client Axios |
|
|
| [src/stores/auth.js](frontend/src/stores/auth.js) | State Pinia |
|
|
| [src/router/index.js](frontend/src/router/index.js) | Routes Vue Router |
|
|
| [src/views/LoginView.vue](frontend/src/views/LoginView.vue) | Écran login |
|
|
| [src/views/DashboardView.vue](frontend/src/views/DashboardView.vue) | Écran stats |
|
|
| [src/views/ContainersView.vue](frontend/src/views/ContainersView.vue) | Écran Docker |
|
|
| [src/assets/styles.css](frontend/src/assets/styles.css) | Tailwind CSS |
|
|
|
|
### Configuration
|
|
|
|
| Fichier | Description |
|
|
|---------|-------------|
|
|
| [README.md](README.md) | Documentation générale |
|
|
| [QUICKSTART.md](QUICKSTART.md) | Guide de démarrage rapide |
|
|
| [PERMISSIONS.md](PERMISSIONS.md) | Guide permissions |
|
|
| [TECHNICAL_EXPLANATION.md](TECHNICAL_EXPLANATION.md) | Explication technique |
|
|
| [docker-compose.yml](docker-compose.yml) | Compose basique |
|
|
| [docker-compose.advanced.yml](docker-compose.advanced.yml) | Compose production |
|
|
| [nginx.conf](nginx.conf) | Configuration Nginx |
|
|
| [test_api.sh](test_api.sh) | Script de test |
|
|
|
|
---
|
|
|
|
## 🚀 Démarrage rapide (30 secondes)
|
|
|
|
### Terminal 1 - Backend
|
|
|
|
```bash
|
|
cd backend
|
|
python3 -m venv venv
|
|
source venv/bin/activate
|
|
pip install -r requirements.txt
|
|
python3 main.py
|
|
```
|
|
|
|
### Terminal 2 - Frontend
|
|
|
|
```bash
|
|
cd frontend
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
### Terminal 3 - Accéder
|
|
|
|
- Frontend: http://localhost:3000
|
|
- API Docs: http://localhost:8000/docs
|
|
- Se connecter avec un utilisateur Debian
|
|
|
|
---
|
|
|
|
## ✨ Points forts de cette implémentation
|
|
|
|
1. ✅ **Authentification sécurisée** - PAM + JWT tokens
|
|
2. ✅ **Monitoring temps réel** - Stats CPU/RAM/processus
|
|
3. ✅ **Gestion Docker complète** - Start/stop/restart/delete
|
|
4. ✅ **UI moderne** - Dashboard dark mode avec Tailwind
|
|
5. ✅ **Architecture modulaire** - Code facilement extensible
|
|
6. ✅ **Documentation complète** - Guides et explications
|
|
7. ✅ **Prêt pour production** - Dockerfile, docker-compose, Nginx
|
|
8. ✅ **Permissions configurables** - Dev et production
|
|
|
|
---
|
|
|
|
## 🎯 Prochaines étapes possibles
|
|
|
|
- [ ] Ajouter la gestion des fichiers/logs
|
|
- [ ] Support des alertes/notifications
|
|
- [ ] Graphiques de tendance (historique)
|
|
- [ ] Gestion des volumes Docker
|
|
- [ ] Configuration réseau
|
|
- [ ] Backup automatiques
|
|
- [ ] 2FA (Two-Factor Authentication)
|
|
- [ ] API WebSocket pour live updates
|
|
|
|
---
|
|
|
|
**Voilà ! Vous avez maintenant une interface d'administration Debian complète et moderne ! 🎉**
|