Add admin panel, WebSocket support, and API versioning
Introduce an admin portal (React + Nginx), WebSocket routing, and API versioning middleware with `/api/v1/` prefix deprecation. Add master API key authentication, new Prometheus metrics for AI token consumption and active WebSockets, and extend S3 config with a public endpoint URL. Update test paths and fixtures to align with the new routing structure.
This commit is contained in:
@@ -0,0 +1,115 @@
|
||||
# Imago Hub — Portail d'Administration
|
||||
|
||||
Portail d'administration web pour [Imago Hub](../README.md), construit avec **React 19**, **TypeScript**, **Vite**, et **Tailwind CSS**.
|
||||
|
||||
## Fonctionnalités
|
||||
|
||||
### Section Admin
|
||||
- **Tableau de bord** — KPIs, graphiques uploads/stockage, santé des composants, activité récente
|
||||
- **Clients** — CRUD complet, rotation de clés API, gestion des plans et scopes
|
||||
- **Détail client** — Quotas (images/stockage/tokens), scopes, images récentes
|
||||
- **File de tâches** — Jobs en attente/cours/échec, retraitement unitaire et en lot
|
||||
- **Métriques** — Visualisation Prometheus : uploads, tokens, stockage, erreurs par étape
|
||||
- **Santé** — État des composants (DB, Redis, Queue, OCR, AI, Disque)
|
||||
- **Configuration** — Affichage lecture seule de la configuration backend
|
||||
- **Logs** — Flux de logs en temps réel avec filtres et export
|
||||
|
||||
### Section Galerie
|
||||
- **Galerie** — Grille/liste, filtres avancés, recherche, pagination
|
||||
- **Détail image** — 5 onglets (AI Vision, EXIF + carte GPS, OCR, Technique, Provenance)
|
||||
- **Galerie client** — Images filtrées par application
|
||||
|
||||
## Stack technique
|
||||
|
||||
| Technologie | Usage |
|
||||
|---|---|
|
||||
| React 19 | UI framework |
|
||||
| TypeScript 5 | Typage statique strict |
|
||||
| Vite 7 | Bundler et dev server |
|
||||
| Tailwind CSS 3 | Styling utility-first, thème sombre |
|
||||
| TanStack Query 5 | Data fetching et cache |
|
||||
| Zustand 5 | State management (auth, filtres) |
|
||||
| React Router 7 | Routage SPA |
|
||||
| Recharts 3 | Graphiques et visualisations |
|
||||
| React-Leaflet 5 | Cartes GPS interactives |
|
||||
| Lucide React | Icônes |
|
||||
| Vitest | Tests unitaires |
|
||||
|
||||
## Démarrage rapide
|
||||
|
||||
### Développement
|
||||
```bash
|
||||
# Installation des dépendances
|
||||
npm install
|
||||
|
||||
# Lancer le serveur de développement
|
||||
npm run dev
|
||||
|
||||
# Le portail est accessible sur http://localhost:5173
|
||||
# Les requêtes API sont proxifiées vers http://localhost:8000
|
||||
```
|
||||
|
||||
### Scripts disponibles
|
||||
```bash
|
||||
npm run dev # Serveur dev avec HMR
|
||||
npm run build # Build production
|
||||
npm run preview # Prévisualiser le build
|
||||
npm run test # Lancer les tests unitaires
|
||||
npm run test:watch # Tests en mode watch
|
||||
npm run typecheck # Vérification TypeScript
|
||||
npm run lint # ESLint
|
||||
```
|
||||
|
||||
### Docker
|
||||
|
||||
#### Build et lancement autonome
|
||||
```bash
|
||||
docker build -t imago-admin .
|
||||
docker run -p 3000:3000 imago-admin
|
||||
```
|
||||
|
||||
#### Via docker-compose (stack complète)
|
||||
Depuis la racine du projet Imago (`../`), le `docker-compose.yml` inclut le service `admin` :
|
||||
```bash
|
||||
cd ..
|
||||
docker compose up -d
|
||||
# Admin : http://localhost:3000
|
||||
# Backend : http://localhost:8000
|
||||
```
|
||||
|
||||
## Architecture du projet
|
||||
|
||||
```
|
||||
src/
|
||||
├── api/ # Client HTTP + services (auth, images, metrics, health)
|
||||
├── components/
|
||||
│ ├── layout/ # Sidebar, TopBar, PageLayout
|
||||
│ └── shared/ # 12 composants UI réutilisables
|
||||
├── hooks/ # 6 hooks React (TanStack Query + WebSocket)
|
||||
├── pages/
|
||||
│ ├── admin/ # 8 pages admin
|
||||
│ └── gallery/ # 3 pages galerie
|
||||
├── store/ # 4 stores Zustand
|
||||
├── types/ # Interfaces TypeScript (API + métriques)
|
||||
├── utils/ # Utilitaires + tests (formats, couleurs, Prometheus, constantes)
|
||||
└── test/ # Configuration des tests
|
||||
```
|
||||
|
||||
## Authentification
|
||||
|
||||
Le portail utilise une **clé API** pour l'authentification :
|
||||
1. Saisie sur la page de login
|
||||
2. Stockée **uniquement en mémoire** (Zustand — pas de localStorage)
|
||||
3. Envoyée dans le header `Authorization: Bearer <clé>`
|
||||
4. Déconnexion automatique sur réponse 401/403
|
||||
|
||||
## Variables d'environnement
|
||||
|
||||
| Variable | Défaut | Description |
|
||||
|---|---|---|
|
||||
| `VITE_API_BASE_URL` | `http://localhost:8000` | URL de l'API backend |
|
||||
| `VITE_APP_TITLE` | `Imago Hub Admin` | Titre de l'application |
|
||||
|
||||
## Licence
|
||||
|
||||
Projet interne — voir la licence du projet parent.
|
||||
Reference in New Issue
Block a user