194 lines
3.5 KiB
Markdown
194 lines
3.5 KiB
Markdown
# OMOP Pipeline - Frontend
|
|
|
|
Interface web React pour gérer le pipeline ETL OMOP CDM 5.4.
|
|
|
|
## Technologies
|
|
|
|
- **React** 18.3 - Framework UI
|
|
- **Vite** 5.1 - Build tool rapide
|
|
- **React Router** 6.22 - Routing
|
|
- **Axios** - Client HTTP
|
|
- **TanStack Query** - State management et cache
|
|
- **Recharts** - Graphiques
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
## Développement
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
L'application sera disponible sur http://localhost:3000
|
|
|
|
## Build
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Les fichiers de production seront dans `dist/`
|
|
|
|
## Structure
|
|
|
|
```
|
|
src/
|
|
├── api/
|
|
│ └── client.js # Client API Axios
|
|
├── pages/
|
|
│ ├── Dashboard.jsx # Page dashboard
|
|
│ ├── ETLManager.jsx # Gestion ETL
|
|
│ ├── SchemaManager.jsx # Gestion schémas
|
|
│ ├── Validation.jsx # Validation
|
|
│ └── Logs.jsx # Logs
|
|
├── App.jsx # Application principale
|
|
├── App.css # Styles
|
|
├── main.jsx # Point d'entrée
|
|
└── index.css # Styles de base
|
|
```
|
|
|
|
## Configuration
|
|
|
|
### API Backend
|
|
|
|
L'URL de l'API est configurée dans `src/api/client.js` :
|
|
|
|
```javascript
|
|
const API_BASE_URL = 'http://localhost:8000/api'
|
|
```
|
|
|
|
### Proxy Vite
|
|
|
|
Le proxy est configuré dans `vite.config.js` pour rediriger `/api` vers le backend.
|
|
|
|
## Pages
|
|
|
|
### Dashboard
|
|
- Statistiques en temps réel
|
|
- Historique des exécutions
|
|
- Métriques de performance
|
|
|
|
### ETL Manager
|
|
- Lancer des pipelines ETL
|
|
- Configurer les paramètres
|
|
- Suivre les jobs en cours
|
|
|
|
### Schema Manager
|
|
- Créer les schémas
|
|
- Valider les schémas
|
|
- Voir l'état des tables
|
|
|
|
### Validation
|
|
- Lancer la validation
|
|
- Voir les codes non mappés
|
|
- Consulter les erreurs
|
|
|
|
### Logs
|
|
- Logs système
|
|
- Filtres par niveau
|
|
- Erreurs de validation
|
|
|
|
## Développement
|
|
|
|
### Ajouter une nouvelle page
|
|
|
|
1. Créer le composant dans `src/pages/`
|
|
2. Ajouter la route dans `App.jsx`
|
|
3. Ajouter le lien dans la sidebar
|
|
|
|
### Ajouter un endpoint API
|
|
|
|
1. Ajouter la fonction dans `src/api/client.js`
|
|
2. Utiliser avec TanStack Query dans le composant
|
|
|
|
### Modifier les styles
|
|
|
|
- Styles globaux : `App.css`
|
|
- Styles de base : `index.css`
|
|
- Styles inline : Dans les composants
|
|
|
|
## Scripts
|
|
|
|
- `npm run dev` - Serveur de développement
|
|
- `npm run build` - Build de production
|
|
- `npm run preview` - Prévisualiser le build
|
|
|
|
## Dépendances
|
|
|
|
### Production
|
|
- react
|
|
- react-dom
|
|
- react-router-dom
|
|
- axios
|
|
- recharts
|
|
- @tanstack/react-query
|
|
|
|
### Développement
|
|
- @vitejs/plugin-react
|
|
- vite
|
|
|
|
## Troubleshooting
|
|
|
|
### Port déjà utilisé
|
|
|
|
Si le port 3000 est déjà utilisé, Vite proposera automatiquement le port 5173.
|
|
|
|
### Erreur CORS
|
|
|
|
Vérifier que le backend autorise l'origine dans `src/api/main.py` :
|
|
|
|
```python
|
|
allow_origins=["http://localhost:3000", "http://localhost:5173"]
|
|
```
|
|
|
|
### Erreur de connexion API
|
|
|
|
Vérifier que le backend est démarré sur http://localhost:8000
|
|
|
|
## Production
|
|
|
|
### Build
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
### Servir les fichiers statiques
|
|
|
|
Option 1 - Serveur HTTP simple :
|
|
```bash
|
|
npm install -g serve
|
|
serve -s dist
|
|
```
|
|
|
|
Option 2 - Nginx :
|
|
```nginx
|
|
server {
|
|
listen 80;
|
|
server_name example.com;
|
|
root /path/to/dist;
|
|
|
|
location / {
|
|
try_files $uri $uri/ /index.html;
|
|
}
|
|
|
|
location /api {
|
|
proxy_pass http://localhost:8000;
|
|
}
|
|
}
|
|
```
|
|
|
|
Option 3 - Depuis FastAPI :
|
|
```python
|
|
from fastapi.staticfiles import StaticFiles
|
|
app.mount("/", StaticFiles(directory="frontend/dist", html=True))
|
|
```
|
|
|
|
## License
|
|
|
|
MIT
|