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>
252 lines
9.9 KiB
HTML
252 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Diagnostic Documentation - CORRIGÉ</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: 300px; 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; }
|
||
.button { background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin: 5px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🧪 Diagnostic Documentation - SCRIPT CORRIGÉ</h1>
|
||
|
||
<div class="error result">
|
||
<strong>PROBLÈME IDENTIFIÉ:</strong><br>
|
||
Le script précédent avait une erreur de syntaxe JavaScript.<br>
|
||
Voici la version corrigée qui fonctionne.
|
||
</div>
|
||
|
||
<div class="instructions">
|
||
<h3>🔧 Instructions (version corrigée):</h3>
|
||
<div class="step">
|
||
<strong>1.</strong> Ouvrez <a href="http://localhost:3000" target="_blank">http://localhost:3000</a>
|
||
</div>
|
||
<div class="step">
|
||
<strong>2.</strong> Créez un élément de workflow (glissez depuis la palette)
|
||
</div>
|
||
<div class="step">
|
||
<strong>3.</strong> Cliquez sur l'élément pour ouvrir le panneau des propriétés
|
||
</div>
|
||
<div class="step">
|
||
<strong>4.</strong> Ouvrez F12 → Console
|
||
</div>
|
||
<div class="step">
|
||
<strong>5.</strong> Copiez le script ci-dessous (SANS erreur de syntaxe)
|
||
</div>
|
||
<div class="step">
|
||
<strong>6.</strong> Collez dans la console et appuyez sur Entrée
|
||
</div>
|
||
</div>
|
||
|
||
<h3>📋 Script de diagnostic CORRIGÉ:</h3>
|
||
<textarea readonly onclick="this.select()">
|
||
console.log('🧪 DIAGNOSTIC DOCUMENTATION - VERSION CORRIGÉE');
|
||
|
||
async function diagnosticDocumentation() {
|
||
console.log('');
|
||
console.log('1️⃣ VÉRIFICATION ENVIRONNEMENT');
|
||
console.log('--------------------------------');
|
||
|
||
if (typeof React !== 'undefined') {
|
||
console.log('✅ React chargé');
|
||
} else {
|
||
console.log('❌ React non chargé - PROBLÈME CRITIQUE');
|
||
return;
|
||
}
|
||
|
||
console.log('');
|
||
console.log('2️⃣ RECHERCHE ONGLETS');
|
||
console.log('----------------------');
|
||
|
||
const allTabs = document.querySelectorAll('[role="tab"], .MuiTab-root, [class*="tab"]');
|
||
console.log('📑 Onglets trouvés:', allTabs.length);
|
||
|
||
let documentationTab = null;
|
||
allTabs.forEach((tab, index) => {
|
||
const text = tab.textContent || '';
|
||
console.log(' Onglet', index + ':', '"' + text + '"');
|
||
|
||
if (text.toLowerCase().includes('documentation') ||
|
||
text.toLowerCase().includes('help') ||
|
||
text.toLowerCase().includes('aide')) {
|
||
documentationTab = tab;
|
||
console.log(' ✅ >>> ONGLET DOCUMENTATION TROUVÉ <<<');
|
||
}
|
||
});
|
||
|
||
if (!documentationTab) {
|
||
console.log('❌ PROBLÈME: Onglet Documentation non trouvé');
|
||
console.log('');
|
||
console.log('🔍 RECHERCHE ALTERNATIVE:');
|
||
const altElements = document.querySelectorAll('*');
|
||
let found = false;
|
||
Array.from(altElements).slice(0, 100).forEach(el => {
|
||
if (el.textContent && el.textContent.toLowerCase().includes('documentation')) {
|
||
console.log(' Trouvé "documentation" dans:', el.tagName, '-', el.textContent.substring(0, 50));
|
||
found = true;
|
||
}
|
||
});
|
||
if (!found) {
|
||
console.log(' Aucun élément contenant "documentation" trouvé');
|
||
}
|
||
return;
|
||
}
|
||
|
||
console.log('');
|
||
console.log('3️⃣ TEST ACTIVATION ONGLET');
|
||
console.log('---------------------------');
|
||
|
||
const activeBefore = documentationTab.getAttribute('aria-selected') === 'true';
|
||
console.log('État AVANT clic:', activeBefore ? 'ACTIF' : 'INACTIF');
|
||
|
||
console.log('🖱️ Clic sur onglet Documentation...');
|
||
documentationTab.click();
|
||
|
||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||
|
||
const activeAfter = documentationTab.getAttribute('aria-selected') === 'true';
|
||
console.log('État APRÈS clic:', activeAfter ? 'ACTIF' : 'INACTIF');
|
||
|
||
if (!activeAfter) {
|
||
console.log('❌ PROBLÈME: Onglet ne s\'active pas');
|
||
console.log('Debug état onglet:');
|
||
console.log(' aria-selected:', documentationTab.getAttribute('aria-selected'));
|
||
console.log(' classes:', documentationTab.className);
|
||
return;
|
||
}
|
||
|
||
console.log('');
|
||
console.log('4️⃣ RECHERCHE CONTENU');
|
||
console.log('---------------------');
|
||
|
||
const panels = document.querySelectorAll('[role="tabpanel"]');
|
||
console.log('📋 Panneaux trouvés:', panels.length);
|
||
|
||
let contentFound = false;
|
||
panels.forEach((panel, i) => {
|
||
const isVisible = panel.offsetParent !== null &&
|
||
getComputedStyle(panel).display !== 'none';
|
||
const hasContent = panel.textContent.trim().length > 0;
|
||
const hasDocContent = panel.textContent.toLowerCase().includes('documentation') ||
|
||
panel.textContent.toLowerCase().includes('guide');
|
||
|
||
console.log(' Panneau', i + ':');
|
||
console.log(' Visible:', isVisible);
|
||
console.log(' A du contenu:', hasContent);
|
||
console.log(' Contenu doc:', hasDocContent);
|
||
|
||
if (hasContent) {
|
||
const preview = panel.textContent.substring(0, 100).replace(/\s+/g, ' ');
|
||
console.log(' Aperçu:', '"' + preview + '..."');
|
||
}
|
||
|
||
if (isVisible && hasDocContent) {
|
||
console.log(' ✅ >>> CONTENU DOCUMENTATION TROUVÉ <<<');
|
||
contentFound = true;
|
||
}
|
||
});
|
||
|
||
if (!contentFound) {
|
||
console.log('❌ PROBLÈME PRINCIPAL: Aucun contenu de documentation visible');
|
||
|
||
console.log('');
|
||
console.log('🔍 DIAGNOSTIC APPROFONDI');
|
||
console.log('-------------------------');
|
||
|
||
const docElements = document.querySelectorAll('[class*="documentation"], [class*="Documentation"]');
|
||
console.log('Composants documentation:', docElements.length);
|
||
|
||
const errorElements = document.querySelectorAll('[class*="error"], [class*="Error"]');
|
||
console.log('Éléments erreur:', errorElements.length);
|
||
|
||
try {
|
||
if (typeof TOOLS_DOCUMENTATION !== 'undefined') {
|
||
console.log('✅ TOOLS_DOCUMENTATION disponible');
|
||
} else {
|
||
console.log('❌ TOOLS_DOCUMENTATION non disponible');
|
||
}
|
||
} catch (e) {
|
||
console.log('⚠️ Erreur accès TOOLS_DOCUMENTATION:', e.message);
|
||
}
|
||
}
|
||
|
||
console.log('');
|
||
console.log('📊 RÉSUMÉ FINAL');
|
||
console.log('================');
|
||
console.log('Onglet Documentation trouvé:', documentationTab ? 'OUI' : 'NON');
|
||
console.log('Onglet s\'active au clic:', activeAfter ? 'OUI' : 'NON');
|
||
console.log('Contenu documentation visible:', contentFound ? 'OUI' : 'NON');
|
||
|
||
if (!contentFound) {
|
||
console.log('');
|
||
console.log('🚨 CONCLUSION: PROBLÈME CONFIRMÉ');
|
||
console.log('Le contenu de documentation ne s\'affiche pas correctement');
|
||
} else {
|
||
console.log('');
|
||
console.log('✅ CONCLUSION: Documentation fonctionne');
|
||
}
|
||
|
||
console.log('');
|
||
console.log('=== FIN DIAGNOSTIC ===');
|
||
}
|
||
|
||
diagnosticDocumentation().catch(error => {
|
||
console.error('❌ Erreur diagnostic:', error);
|
||
});
|
||
</textarea>
|
||
|
||
<div class="success result">
|
||
<h3>✅ Script corrigé:</h3>
|
||
<ul>
|
||
<li>Suppression des caractères d'échappement problématiques</li>
|
||
<li>Syntaxe JavaScript valide</li>
|
||
<li>Messages de debug plus clairs</li>
|
||
<li>Gestion d'erreur améliorée</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="warning result">
|
||
<h3>⚠️ Si le problème persiste:</h3>
|
||
<p>Essayez cette version encore plus simple :</p>
|
||
<textarea readonly onclick="this.select()" style="height: 150px;">
|
||
console.log('TEST SIMPLE DOCUMENTATION');
|
||
|
||
// Chercher onglets
|
||
const tabs = document.querySelectorAll('[role="tab"]');
|
||
console.log('Onglets:', tabs.length);
|
||
|
||
tabs.forEach((tab, i) => {
|
||
console.log(i + ':', tab.textContent);
|
||
if (tab.textContent.includes('Documentation')) {
|
||
console.log('>>> DOCUMENTATION TROUVÉ');
|
||
tab.click();
|
||
setTimeout(() => {
|
||
const panels = document.querySelectorAll('[role="tabpanel"]');
|
||
panels.forEach((p, j) => {
|
||
if (p.offsetParent !== null) {
|
||
console.log('Panel visible', j + ':', p.textContent.substring(0, 50));
|
||
}
|
||
});
|
||
}, 1000);
|
||
}
|
||
});
|
||
</textarea>
|
||
</div>
|
||
|
||
<div class="info result">
|
||
<h3>📞 Après le test:</h3>
|
||
<p><strong>Copiez TOUS les résultats</strong> et partagez-les pour identifier précisément le problème.</p>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |