a27b74cf22
- 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>
142 lines
5.7 KiB
HTML
142 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Diagnostic Documentation - Visual Workflow Builder</title>
|
||
<style>
|
||
body { font-family: Arial, sans-serif; margin: 20px; background: #f5f5f5; }
|
||
.container { max-width: 900px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; }
|
||
.result { padding: 15px; margin: 10px 0; border-radius: 5px; border-left: 4px solid; }
|
||
.error { background: #f8d7da; color: #721c24; border-color: #dc3545; }
|
||
.success { background: #d4edda; color: #155724; border-color: #28a745; }
|
||
.info { background: #d1ecf1; color: #0c5460; border-color: #17a2b8; }
|
||
.warning { background: #fff3cd; color: #856404; border-color: #ffc107; }
|
||
textarea { width: 100%; height: 350px; font-family: monospace; font-size: 11px; }
|
||
.instructions { background: #e7f3ff; padding: 15px; border-radius: 5px; margin: 15px 0; }
|
||
.step { margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 3px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🧪 Diagnostic Documentation - Visual Workflow Builder</h1>
|
||
|
||
<div class="error result">
|
||
<strong>PROBLÈME RAPPORTÉ:</strong><br>
|
||
L'onglet "Documentation" ne montre pas de contenu quand on clique dessus.<br>
|
||
Il y a un "effet de changement d'une fraction de seconde" mais pas de documentation visible.
|
||
</div>
|
||
|
||
<div class="instructions">
|
||
<h3>🔧 Instructions de test:</h3>
|
||
<div class="step">
|
||
<strong>1.</strong> Ouvrez <a href="http://localhost:3000" target="_blank">http://localhost:3000</a> dans un nouvel onglet
|
||
</div>
|
||
<div class="step">
|
||
<strong>2.</strong> Créez un élément de workflow (glissez un outil depuis la palette vers l'espace de travail)
|
||
</div>
|
||
<div class="step">
|
||
<strong>3.</strong> Cliquez sur l'élément créé pour ouvrir le panneau des propriétés à droite
|
||
</div>
|
||
<div class="step">
|
||
<strong>4.</strong> Ouvrez les outils de développement (F12) et allez dans l'onglet "Console"
|
||
</div>
|
||
<div class="step">
|
||
<strong>5.</strong> Copiez le script ci-dessous et collez-le dans la console
|
||
</div>
|
||
<div class="step">
|
||
<strong>6.</strong> Appuyez sur Entrée pour exécuter le script
|
||
</div>
|
||
<div class="step">
|
||
<strong>7.</strong> Copiez TOUS les résultats affichés dans la console
|
||
</div>
|
||
</div>
|
||
|
||
<h3>📋 Script de diagnostic:</h3>
|
||
<textarea readonly onclick="this.select()">
|
||
// === DIAGNOSTIC DOCUMENTATION VISUAL WORKFLOW BUILDER ===
|
||
console.log('🧪 DÉBUT DU DIAGNOSTIC DOCUMENTATION');
|
||
|
||
async function diagnosticComplet() {
|
||
console.log('\n1️⃣ VÉRIFICATION ENVIRONNEMENT');
|
||
|
||
if (typeof React !== 'undefined') {
|
||
console.log('✅ React est chargé');
|
||
} else {
|
||
console.log('❌ React n\'est pas chargé - PROBLÈME CRITIQUE');
|
||
return;
|
||
}
|
||
|
||
console.log('\n2️⃣ RECHERCHE DES ONGLETS');
|
||
|
||
const allTabs = document.querySelectorAll('[role="tab"], .MuiTab-root, [class*="tab"]');
|
||
console.log(`📑 ${allTabs.length} onglets trouvés`);
|
||
|
||
let documentationTab = null;
|
||
allTabs.forEach((tab, index) => {
|
||
const text = tab.textContent || '';
|
||
console.log(` ${index}: "${text}"`);
|
||
|
||
if (text.toLowerCase().includes('documentation')) {
|
||
documentationTab = tab;
|
||
console.log(' ✅ >>> ONGLET DOCUMENTATION TROUVÉ <<<');
|
||
}
|
||
});
|
||
|
||
if (!documentationTab) {
|
||
console.log('❌ PROBLÈME: Onglet Documentation non trouvé');
|
||
return;
|
||
}
|
||
|
||
console.log('\n3️⃣ TEST ACTIVATION ONGLET');
|
||
|
||
const activeBefore = documentationTab.getAttribute('aria-selected') === 'true';
|
||
console.log(` Avant clic: ${activeBefore ? 'actif' : 'inactif'}`);
|
||
|
||
documentationTab.click();
|
||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||
|
||
const activeAfter = documentationTab.getAttribute('aria-selected') === 'true';
|
||
console.log(` Après clic: ${activeAfter ? 'actif' : 'inactif'}`);
|
||
|
||
if (!activeAfter) {
|
||
console.log('❌ PROBLÈME: Onglet ne s\'active pas');
|
||
return;
|
||
}
|
||
|
||
console.log('\n4️⃣ RECHERCHE CONTENU');
|
||
|
||
const panels = document.querySelectorAll('[role="tabpanel"]');
|
||
console.log(`📋 ${panels.length} panneaux trouvés`);
|
||
|
||
let contentFound = false;
|
||
panels.forEach((panel, i) => {
|
||
const visible = panel.offsetParent !== null;
|
||
const hasContent = panel.textContent.trim().length > 0;
|
||
console.log(` Panel ${i}: visible=${visible}, contenu=${hasContent}`);
|
||
|
||
if (visible && hasContent) {
|
||
console.log(' ✅ CONTENU TROUVÉ!');
|
||
console.log(` Aperçu: ${panel.textContent.substring(0, 100)}...`);
|
||
contentFound = true;
|
||
}
|
||
});
|
||
|
||
if (!contentFound) {
|
||
console.log('❌ PROBLÈME PRINCIPAL: Aucun contenu visible');
|
||
}
|
||
|
||
console.log('\n📊 RÉSUMÉ:');
|
||
console.log(` Onglet trouvé: ${documentationTab ? 'OUI' : 'NON'}`);
|
||
console.log(` Onglet actif: ${activeAfter ? 'OUI' : 'NON'}`);
|
||
console.log(` Contenu visible: ${contentFound ? 'OUI' : 'NON'}`);
|
||
}
|
||
|
||
diagnosticComplet().catch(console.error);
|
||
</textarea>
|
||
|
||
<div class="success result">
|
||
<h3>📞 Après le test:</h3>
|
||
<p><strong>Copiez TOUS les résultats de la console</strong> et partagez-les pour un diagnostic précis.</p>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |