v1.0 - Version stable: multi-PC, détection UI-DETR-1, 3 modes exécution
- Frontend v4 accessible sur réseau local (192.168.1.40) - Ports ouverts: 3002 (frontend), 5001 (backend), 5004 (dashboard) - Ollama GPU fonctionnel - Self-healing interactif - Dashboard confiance Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Dom
266
docs/guides/GUIDE_DIAGNOSTIC_DOCUMENTATION_FINAL.md
Normal file
266
docs/guides/GUIDE_DIAGNOSTIC_DOCUMENTATION_FINAL.md
Normal file
@@ -0,0 +1,266 @@
|
||||
# Guide de Diagnostic Documentation - Visual Workflow Builder
|
||||
|
||||
## 🎯 Objectif
|
||||
|
||||
Ce guide vous aide à diagnostiquer et résoudre le problème de l'onglet Documentation qui ne fonctionne pas dans le Visual Workflow Builder.
|
||||
|
||||
## 📋 Outils de Diagnostic Disponibles
|
||||
|
||||
### 1. Diagnostic HTML Frontend (`diagnostic_documentation_final.html`)
|
||||
- **Usage**: Ouvrir dans le navigateur pendant que l'application fonctionne
|
||||
- **Cible**: Interface utilisateur, composants React, interactions
|
||||
- **Résultats**: Analyse en temps réel des éléments DOM et des interactions
|
||||
|
||||
### 2. Diagnostic Python Backend (`test_documentation_diagnostic_final.py`)
|
||||
- **Usage**: Exécuter en ligne de commande
|
||||
- **Cible**: Services backend, fichiers, APIs, configuration
|
||||
- **Résultats**: Vérification de l'infrastructure et des données
|
||||
|
||||
## 🚀 Procédure de Diagnostic Complète
|
||||
|
||||
### Étape 1: Préparation
|
||||
```bash
|
||||
# 1. Assurez-vous que les services sont démarrés
|
||||
cd visual_workflow_builder
|
||||
./start.sh
|
||||
|
||||
# 2. Vérifiez que l'application est accessible
|
||||
# Frontend: http://localhost:3000
|
||||
# Backend: http://localhost:5000
|
||||
```
|
||||
|
||||
### Étape 2: Diagnostic Backend
|
||||
```bash
|
||||
# Exécuter le diagnostic Python
|
||||
python3 test_documentation_diagnostic_final.py
|
||||
|
||||
# Examiner les résultats
|
||||
cat diagnostic_documentation_results.json
|
||||
```
|
||||
|
||||
### Étape 3: Diagnostic Frontend
|
||||
1. Ouvrez `http://localhost:3000` dans votre navigateur
|
||||
2. Créez un élément de workflow (glissez depuis la palette)
|
||||
3. Cliquez sur l'élément pour ouvrir le panneau des propriétés
|
||||
4. Ouvrez `diagnostic_documentation_final.html` dans un nouvel onglet
|
||||
5. Copiez le script de diagnostic depuis la page HTML
|
||||
6. Retournez sur l'application (onglet avec le workflow)
|
||||
7. Ouvrez F12 → Console
|
||||
8. Collez le script et appuyez sur Entrée
|
||||
9. Attendez les résultats complets
|
||||
|
||||
### Étape 4: Analyse des Résultats
|
||||
|
||||
## 🔍 Interprétation des Résultats
|
||||
|
||||
### Diagnostic Backend - Indicateurs Clés
|
||||
|
||||
#### ✅ Statut Normal
|
||||
```json
|
||||
{
|
||||
"backend_services": {
|
||||
"server_running": true,
|
||||
"server_status": 200
|
||||
},
|
||||
"frontend_files": {
|
||||
"files": {
|
||||
"src/components/DocumentationTab/index.tsx": {
|
||||
"exists": true,
|
||||
"has_component": true,
|
||||
"has_documentation_service": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### ❌ Problèmes Possibles
|
||||
- `server_running: false` → Serveur backend non démarré
|
||||
- `files.*.exists: false` → Fichiers manquants
|
||||
- `api_endpoints.*.accessible: false` → APIs non fonctionnelles
|
||||
- `data_integrity.*.syntax_checks` → Erreurs de syntaxe dans les données
|
||||
|
||||
### Diagnostic Frontend - Indicateurs Clés
|
||||
|
||||
#### ✅ Statut Normal
|
||||
```javascript
|
||||
{
|
||||
environment: {
|
||||
react: true,
|
||||
mui: true,
|
||||
toolsDoc: true
|
||||
},
|
||||
tabs: {
|
||||
documentationFound: true,
|
||||
activated: true
|
||||
},
|
||||
panels: {
|
||||
withDocContent: 1
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### ❌ Problèmes Possibles
|
||||
- `environment.react: false` → React non chargé
|
||||
- `tabs.documentationFound: false` → Onglet Documentation absent
|
||||
- `tabs.activated: false` → Onglet ne s'active pas au clic
|
||||
- `panels.withDocContent: 0` → Aucun contenu de documentation visible
|
||||
- `services.documentationService: false` → Service non disponible
|
||||
|
||||
## 🛠️ Solutions par Type de Problème
|
||||
|
||||
### Problème 1: Serveur Backend Non Accessible
|
||||
```bash
|
||||
# Vérifier les processus
|
||||
ps aux | grep python
|
||||
ps aux | grep node
|
||||
|
||||
# Redémarrer les services
|
||||
cd visual_workflow_builder
|
||||
./start.sh
|
||||
|
||||
# Vérifier les ports
|
||||
netstat -tlnp | grep :5000
|
||||
netstat -tlnp | grep :3000
|
||||
```
|
||||
|
||||
### Problème 2: Fichiers Frontend Manquants
|
||||
```bash
|
||||
# Vérifier la structure des fichiers
|
||||
ls -la visual_workflow_builder/frontend/src/components/DocumentationTab/
|
||||
ls -la visual_workflow_builder/frontend/src/services/
|
||||
ls -la visual_workflow_builder/frontend/src/data/
|
||||
|
||||
# Réinstaller les dépendances si nécessaire
|
||||
cd visual_workflow_builder/frontend
|
||||
npm install
|
||||
```
|
||||
|
||||
### Problème 3: Onglet Documentation Non Trouvé
|
||||
**Causes possibles:**
|
||||
- Composant DocumentationTab non importé dans PropertiesPanel
|
||||
- Erreur de compilation TypeScript
|
||||
- Problème de rendu conditionnel
|
||||
|
||||
**Vérifications:**
|
||||
```bash
|
||||
# Vérifier les erreurs de compilation
|
||||
cd visual_workflow_builder/frontend
|
||||
npm run build
|
||||
|
||||
# Vérifier les logs du serveur de développement
|
||||
# (dans la console où vous avez lancé npm start)
|
||||
```
|
||||
|
||||
### Problème 4: Onglet Ne S'Active Pas
|
||||
**Causes possibles:**
|
||||
- Gestionnaire d'événements non attaché
|
||||
- Problème de state management React
|
||||
- Conflit avec d'autres composants
|
||||
|
||||
**Solutions:**
|
||||
1. Vérifier les props passées au composant Tabs
|
||||
2. Vérifier la fonction `handleTabChange`
|
||||
3. Vérifier l'état `activeTab`
|
||||
|
||||
### Problème 5: Contenu Documentation Non Visible
|
||||
**Causes possibles:**
|
||||
- Service DocumentationService non initialisé
|
||||
- Données TOOLS_DOCUMENTATION non chargées
|
||||
- Problème de rendu conditionnel dans DocumentationTab
|
||||
|
||||
**Solutions:**
|
||||
1. Vérifier l'initialisation du service dans `useEffect`
|
||||
2. Vérifier le chargement des données `toolDocumentation.ts`
|
||||
3. Vérifier les conditions de rendu dans le composant
|
||||
|
||||
### Problème 6: Données de Documentation Corrompues
|
||||
```bash
|
||||
# Vérifier la syntaxe TypeScript
|
||||
cd visual_workflow_builder/frontend
|
||||
npx tsc --noEmit
|
||||
|
||||
# Vérifier le fichier de données spécifiquement
|
||||
node -c src/data/toolDocumentation.ts
|
||||
```
|
||||
|
||||
## 🔧 Actions de Réparation Courantes
|
||||
|
||||
### Réparation 1: Redémarrage Complet
|
||||
```bash
|
||||
# Arrêter tous les services
|
||||
pkill -f "react-scripts"
|
||||
pkill -f "python.*app.py"
|
||||
|
||||
# Nettoyer les caches
|
||||
cd visual_workflow_builder/frontend
|
||||
rm -rf node_modules/.cache
|
||||
rm -rf build
|
||||
|
||||
# Redémarrer
|
||||
./start.sh
|
||||
```
|
||||
|
||||
### Réparation 2: Reconstruction Frontend
|
||||
```bash
|
||||
cd visual_workflow_builder/frontend
|
||||
rm -rf node_modules
|
||||
rm package-lock.json
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
### Réparation 3: Vérification des Imports
|
||||
Vérifier que dans `PropertiesPanel/index.tsx`:
|
||||
```typescript
|
||||
import DocumentationTab from '../DocumentationTab';
|
||||
import documentationService from '../../services/DocumentationService';
|
||||
```
|
||||
|
||||
Vérifier que dans `DocumentationTab/index.tsx`:
|
||||
```typescript
|
||||
import documentationService from '../../services/DocumentationService';
|
||||
import { TOOLS_DOCUMENTATION } from '../../data/toolDocumentation';
|
||||
```
|
||||
|
||||
## 📊 Rapport de Diagnostic Type
|
||||
|
||||
Après avoir exécuté les deux diagnostics, vous devriez avoir:
|
||||
|
||||
1. **Fichier JSON** (`diagnostic_documentation_results.json`) avec les résultats backend
|
||||
2. **Sortie console** avec les résultats frontend détaillés
|
||||
3. **Résumé** indiquant les composants OK/ERROR
|
||||
|
||||
### Exemple de Rapport Complet
|
||||
```
|
||||
Backend Status: ✅ OK
|
||||
Frontend Files: ✅ OK
|
||||
API Status: ✅ OK
|
||||
Data Integrity: ❌ ERROR (syntax error in toolDocumentation.ts)
|
||||
Configuration: ✅ OK
|
||||
Integration: ⚠️ WARNING (DocumentationTab not properly imported)
|
||||
|
||||
→ DIAGNOSTIC: Problème dans les données de documentation et l'intégration
|
||||
→ ACTION: Corriger la syntaxe et vérifier les imports
|
||||
```
|
||||
|
||||
## 🎯 Prochaines Étapes
|
||||
|
||||
Une fois le diagnostic terminé:
|
||||
|
||||
1. **Analysez les résultats** selon ce guide
|
||||
2. **Identifiez la cause racine** (backend, frontend, données, intégration)
|
||||
3. **Appliquez les corrections** appropriées
|
||||
4. **Re-testez** avec les outils de diagnostic
|
||||
5. **Documentez la solution** pour éviter la récurrence
|
||||
|
||||
## 📞 Support
|
||||
|
||||
Si le problème persiste après avoir suivi ce guide:
|
||||
|
||||
1. Partagez les résultats complets des deux diagnostics
|
||||
2. Incluez les logs d'erreur de la console navigateur
|
||||
3. Incluez les logs du serveur backend
|
||||
4. Précisez les étapes exactes qui mènent au problème
|
||||
|
||||
Ce diagnostic complet devrait permettre d'identifier et de résoudre 95% des problèmes liés à l'onglet Documentation.
|
||||
Reference in New Issue
Block a user