bruno
2f2a5e9b4a
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.
116 lines
3.8 KiB
Markdown
116 lines
3.8 KiB
Markdown
# 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.
|