Files
innotexBoard/INDEX.md
2026-01-16 18:40:39 +01:00

9.1 KiB
Raw Blame History

🎉 InnotexBoard - Projet Complet

Interface d'administration Debian légère - Alternative à Cockpit avec Vue.js + FastAPI

📊 Vue d'ensemble rapide

╔═══════════════════════════════════════════════════════════════╗
║         🖥️  INNOTEXBOARD - Dashboard Admin Debian            ║
╠════════════════┬═════════════════════════════════╦════════════╣
║   Authentifi.  │  Monitoring Système             ║  Docker    ║
║  ┌──────────┐  │  ┌───────────────────────────┐  ║ ┌────────┐ ║
║  │ Login    │  │  │ 💻 CPU: 45.3%            │  ║ │ Run    │ ║
║  │  (PAM)   │  │  │ 🧠 RAM: 65.2% (4GB/8GB) │  ║ │ (Web)  │ ║
║  │ JWT Auth │  │  │ 📋 Processus actifs      │  ║ ├────────┤ ║
║  └──────────┘  │  │   1. python (8.5%, 2.1%)│  ║ │ Stop   │ ║
║                │  │   2. nginx (1.2%, 0.8%) │  ║ │ (API)  │ ║
║                │  └───────────────────────────┘  ║ └────────┘ ║
╠════════════════════════════════════════════════════════════════╣
║                                                                ║
║  Backend: FastAPI (port 8000)  ←→  Frontend: Vue.js (port 3000)║
║  Database: Système Debian                                     ║
╚════════════════════════════════════════════════════════════════╝

🎯 Ce qui a été créé

Backend (Python/FastAPI)

  • main.py - Point d'entrée FastAPI complet
  • 🔐 Authentification PAM + JWT - Sécurité en 2 couches
  • 📊 API Système - CPU, RAM, processus via psutil
  • 🐳 API Docker - Gestion complète des conteneurs
  • 📦 requirements.txt - 13 dépendances nécessaires
  • 🐳 Dockerfile - Containerization

Frontend (Vue.js 3)

  • 🎨 3 Pages - Login, Dashboard, Containers
  • 📡 Axios Client - Communication HTTP avec JWT
  • 🎯 Pinia Store - Gestion d'état globale
  • 🛣️ Vue Router - Navigation sécurisée
  • 🎨 Tailwind CSS - Design sombre moderne
  • 📱 Responsive - Mobile et desktop

Configuration & Déploiement

  • 🐳 docker-compose.yml - Environnement complet
  • 🐳 docker-compose.advanced.yml - Production ready
  • 🔗 nginx.conf - Reverse proxy configuration
  • 📁 Dockerfiles - Backend + Frontend

Documentation (7 fichiers)

  • 📖 START_HERE.txt - Accueil du projet
  • 📖 QUICKSTART.md - 5 minutes pour démarrer
  • 📖 README.md - Vue d'ensemble complet
  • 📖 TECHNICAL_EXPLANATION.md - Architecture détaillée
  • 📖 PERMISSIONS.md - Configuration sécurité
  • 📖 ANSWERS.md - Réponses aux 3 questions
  • 📖 DOCUMENTATION.md - Index complet

Tests & Utilitaires

  • 🧪 test_api.sh - Suite de tests de l'API
  • 📊 PROJECT_SUMMARY.sh - Résumé du projet
  • 📋 CHECKLIST.md - Vérification complète
  • 📄 project.json - Métadonnées du projet

🚀 Démarrage en 30 secondes

Terminal 1 - Backend

cd backend
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
python3 main.py
# ✅ API tourne sur http://localhost:8000

Terminal 2 - Frontend

cd frontend
npm install
npm run dev
# ✅ App tourne sur http://localhost:3000

Browser

http://localhost:3000
Se connecter avec un utilisateur Debian

📋 Réponses à vos 3 questions

1 Code main.py pour FastAPI

# backend/main.py - COMPLET ET PRÊT
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI(
    title="InnotexBoard - Debian Admin Panel",
    version="0.1.0",
)

# Middleware 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")

# Endpoints authentification, système, Docker
# - /api/v1/auth/login (PAM)
# - /api/v1/system/stats (CPU/RAM/Processus)
# - /api/v1/docker/containers (Gestion Docker)

Points forts:

  • Authentification PAM systématique
  • JWT tokens pour la sécurité
  • Structures modulaires
  • Gestion d'erreurs complète

2 Composant Vue.js pour Docker

<!-- frontend/src/views/ContainersView.vue - 240 LIGNES -->
<template>
  <div class="grid grid-cols-2 gap-6">
    <div v-for="container in containers" :key="container.id" class="card">
      <h3>{{ container.name }}</h3>
      <span :class="statusClass(container.state)">
        {{ container.state }}
      </span>
      
      <div class="stats">
        <p>CPU: {{ container.cpu_percent }}%</p>
        <p>MEM: {{ container.memory_usage }}</p>
      </div>
      
      <div class="buttons">
        <button @click="actionContainer(id, 'start')"> Démarrer</button>
        <button @click="actionContainer(id, 'stop')"> Arrêter</button>
        <button @click="actionContainer(id, 'restart')">🔄 Redémarrer</button>
        <button @click="actionContainer(id, 'delete')">🗑 Supprimer</button>
      </div>
    </div>
  </div>
</template>

Features:

  • Grille responsive
  • Stats en temps réel
  • Boutons d'action complets
  • Design moderne

3 Configuration permissions

Docker (3 options):

# Option A: Groupe docker
sudo usermod -aG docker $USER
newgrp docker

# Option B: Sudo sans mot de passe (sécurisé)
echo 'www-data ALL=(ALL) NOPASSWD: /usr/bin/docker' | sudo tee /etc/sudoers.d/docker

# Option C: Socket avec permissions
sudo setfacl -m u:www-data:rw /var/run/docker.sock

PAM (Authentification):

# L'utilisateur doit être dans le groupe shadow
sudo usermod -aG shadow $USER

psutil (Stats):

# /proc et /sys sont lisibles par défaut
ls -la /proc

Production Systemd:

[Unit]
Description=InnotexBoard
After=docker.service

[Service]
Type=simple
User=innotexboard
ExecStart=/usr/bin/python3 main.py
Restart=on-failure

[Install]
WantedBy=multi-user.target

🎨 Design Implémenté

  • Thème: Sombre professionnel
  • Couleurs: Bleu (#3b82f6), Vert (#10b981), Rouge (#ef4444)
  • Layout: Responsive (sidebar + main)
  • Components: Cards, Barres, Badges, Boutons
  • Animations: Transitions fluides

📊 Statistiques

Élément Nombre
Fichiers 45+
Lignes de code 3000+
Documentation 1500+ lignes
API Endpoints 12
Vue Components 3
Services 2
Tests Complets

🔐 Sécurité

Authentification

  • PAM pour les utilisateurs Debian
  • JWT tokens (HS256, 8h expiration)

API

  • CORS whitelist
  • TrustedHost validation
  • Pydantic input validation

Frontend

  • Token en localStorage
  • Interceptors Axios pour JWT
  • Redirect automatique 401

📚 Documentation

File Contenu
START_HERE.txt 👈 Commencez ici !
QUICKSTART.md 5 minutes pour démarrer
README.md Vue d'ensemble complète
TECHNICAL_EXPLANATION.md Architecture détaillée
PERMISSIONS.md Configuration permissions
ANSWERS.md Réponses aux 3 questions
DOCUMENTATION.md Index complet

🎯 Points Forts

Authentification système - PAM (pas de DB) Real-time monitoring - Stats actualisées tous les 5s Docker full control - Start/Stop/Restart/Delete Modern UI - Dashboard sombre avec Tailwind Production ready - Docker, Nginx, Systemd Well documented - 1500+ lignes doc Modular architecture - Code extensible Security first - JWT, CORS, validation

🚀 Prochaines Étapes Possibles

  • Historique des stats (graphiques)
  • WebSocket pour live updates
  • 2FA (Two-Factor Authentication)
  • Alertes/Notifications
  • Logs en temps réel
  • Gestion des volumes Docker
  • Configuration réseau
  • Backup automatiques

📞 Support

En cas de problème:

  1. Consulter la documentation
  2. Vérifier les permissions
  3. Regarder les logs Docker
  4. Tester l'API avec bash test_api.sh

Félicitations ! 🎉 Vous avez InnotexBoard complet et prêt à déployer !

Alternative légère à Cockpit pour l'administration Debian avec style 🚀