# syntax=docker/dockerfile:1.4 # Utiliser une image Node.js légère FROM node:20-alpine # Build arguments pour invalider le cache si nécessaire ARG BUILD_DATE=unknown ARG BUILD_VERSION=unknown ARG CACHE_BUST=1 LABEL build.date="${BUILD_DATE}" \ build.version="${BUILD_VERSION}" \ cache.bust="${CACHE_BUST}" # Invalider le cache en utilisant CACHE_BUST dans une instruction RUN # Cela force Docker à reconstruire à partir de cette ligne si CACHE_BUST change # Utiliser CACHE_BUST dans une variable d'environnement pour forcer l'invalidation RUN echo "Cache bust: ${CACHE_BUST}" && \ echo "Build date: ${BUILD_DATE}" && \ date && \ echo "${CACHE_BUST}" > /tmp/cache_bust.txt WORKDIR /app # Variables d'environnement à définir AVANT npm install ENV HUSKY=0 ENV HUSKY_SKIP_INSTALL=1 ENV NODE_PATH=/app/node_modules ENV NODE_ENV=production # Installation des dépendances système RUN apk add --no-cache git python3 # Copie des fichiers de dépendances COPY package.json package-lock.json* ./ # Installation des dépendances Node RUN npm install --legacy-peer-deps --ignore-scripts cytoscape cytoscape-cose-bilkent echarts-for-react # Patch du package aoe_technology_radar pour inclure gray-matter dans les dépendances runtime RUN node -e "const fs=require('fs');const pkgPath='./node_modules/aoe_technology_radar/package.json';const pkg=JSON.parse(fs.readFileSync(pkgPath,'utf8'));pkg.dependencies=pkg.dependencies||{};pkg.dependencies['gray-matter']='^4.0.3';pkg.dependencies['postcss']='^8.4.47';pkg.scripts=pkg.scripts||{};pkg.scripts.prepare='';fs.writeFileSync(pkgPath,JSON.stringify(pkg,null,2));" # Copie du reste du projet COPY . . RUN chmod +x scripts/start-business.sh # Préparer .techradar une fois pour toutes (évite les réinstallations au runtime) # Le script techradar.js crée automatiquement .techradar lors de l'exécution # Création manuelle de .techradar en copiant depuis node_modules RUN mkdir -p .techradar && \ cp -r node_modules/aoe_technology_radar/* .techradar/ # Créer le fichier hash pour éviter la recréation (calculé séparément pour éviter les problèmes d'échappement) RUN node -e "const crypto=require('crypto');const fs=require('fs');const hash=crypto.createHash('sha256').update(fs.readFileSync('package.json')).digest('hex');fs.writeFileSync('.techradar/hash',hash);" RUN node -e "const fs=require('fs');const p='.techradar/package.json';if(!fs.existsSync(p)){console.error('.techradar/package.json not found');process.exit(1);}const pkg=JSON.parse(fs.readFileSync(p,'utf8'));pkg.scripts=pkg.scripts||{};pkg.scripts.prepare='';fs.writeFileSync(p,JSON.stringify(pkg,null,2));" # Installer les dépendances dans .techradar (y compris devDependencies pour tsx nécessaire à build:data) RUN cd .techradar && npm install --legacy-peer-deps --include=dev cytoscape cytoscape-cose-bilkent echarts-for-react RUN cd .techradar && npm run build:icons # --- CONFIGURATION BUSINESS --- # Application de la logique Business (remplacement de la config et des données) # Préserver la structure de dossiers par date pour que le framework puisse parser les dates RUN cp radar-business/config-business.json config.json && \ rm -rf radar/* && \ mkdir -p radar/2025-01-15 && \ cp -r radar-business/2025-01-15/* radar/2025-01-15/ # Générer les données de visualisation équipe si nécessaire RUN if [ ! -f "public/team-visualization-data.json" ]; then \ echo "⚠️ team-visualization-data.json non trouvé, génération..." && \ node scripts/generate-team-visualization-data.js && \ echo "✅ Données de visualisation équipe générées"; \ else \ echo "✅ team-visualization-data.json existe déjà"; \ fi && \ echo "🔍 Vérification contenu team-visualization-data.json:" && \ ls -la public/team-visualization-data.json && \ head -20 public/team-visualization-data.json # Copier les fichiers nécessaires dans .techradar avant le build (comme le fait techradar.js) RUN rm -rf .techradar/data/radar && \ mkdir -p .techradar/data/radar/2025-01-15 && \ cp -r radar-business/2025-01-15/* .techradar/data/radar/2025-01-15/ && \ # Supprimer toute release de démo (2017-03-01, 2024-03-01, etc.) éventuellement recopiée depuis le package find .techradar/data/radar -mindepth 1 -maxdepth 1 ! -name '2025-01-15' -exec rm -rf {} + && \ cp radar-business/config-business.json .techradar/data/config.json && \ rm -rf .techradar/public && mkdir -p .techradar/public && \ cp -r public/* .techradar/public/ && \ cp public/team.html .techradar/public/team.html 2>/dev/null || true && \ cp public/team-visualization-data.json .techradar/public/team-visualization-data.json 2>/dev/null || true && \ cp about.md .techradar/data/about.md 2>/dev/null || echo "about.md not found, skipping" && \ cp custom.css .techradar/src/styles/custom.css 2>/dev/null || echo "custom.css not found, skipping" && \ echo "Fichiers public copiés" && \ echo "📁 Vérification des fichiers team dans .techradar/public/:" && \ ls -la .techradar/public/ | grep -E "(team\.html|team-visualization)" && echo "✅ Fichiers team trouvés" || (echo "⚠️ Fichiers team non trouvés dans .techradar/public/" && echo "📁 Contenu de public/ source:" && ls -la public/ | head -10) && \ echo "📁 Vérification que team.html existe dans public/ source:" && \ test -f public/team.html && echo "✅ public/team.html existe" || echo "❌ public/team.html n'existe pas" # Diagnostic : compter les fichiers markdown copiés dans .techradar/data/radar RUN echo "📊 Comptage des fichiers .md dans .techradar/data/radar" && \ find .techradar/data/radar -name "*.md" | wc -l && \ find .techradar/data/radar -name "*.md" | head -10 # Créer la page Next.js /team ET un fichier HTML statique /team/index.html # La page Next.js pour le routing, le HTML statique pour garantir l'affichage RUN mkdir -p .techradar/src/pages && \ cat > .techradar/src/pages/team.tsx << 'EOF' import { useEffect, useState, useRef } from 'react'; import dynamic from 'next/dynamic'; // Chargement dynamique des bibliothèques pour éviter les erreurs SSR const CytoscapeComponent = dynamic(() => import('cytoscape'), { ssr: false }); const EChartsComponent = dynamic(() => import('echarts-for-react'), { ssr: false }); export default function TeamPage() { const [activeTab, setActiveTab] = useState('network'); const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const networkRef = useRef(null); const matrixRef = useRef(null); useEffect(() => { // Charger les données équipe loadTeamData(); }, []); useEffect(() => { // Initialiser les graphiques quand les données sont chargées et l'onglet actif change if (data && !loading) { if (activeTab === 'network') { initNetworkGraph(); } else if (activeTab === 'congestion') { initCongestionMatrix(); } } }, [data, loading, activeTab]); const loadTeamData = async () => { try { console.log('🔄 Chargement des données équipe...'); const response = await fetch('/team-visualization-data.json'); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`); } const jsonData = await response.json(); console.log('✅ Données chargées:', Object.keys(jsonData)); setData(jsonData); } catch (err) { console.error('❌ Erreur chargement données:', err); setError(err.message); } finally { setLoading(false); } }; const initNetworkGraph = () => { if (!data?.network || !networkRef.current) return; console.log('📊 Initialisation graphe réseau...'); // Import dynamique pour éviter les erreurs SSR import('cytoscape').then((cytoscape) => { import('cytoscape-cose-bilkent').then(() => { const cy = cytoscape.default({ container: networkRef.current, elements: data.network, style: [ { selector: 'node[type="technology"]', style: { 'background-color': 'data(color)', 'label': 'data(label)', 'width': function(ele) { const coverage = ele.data('coverage') || 0; return Math.max(30, 30 + (coverage * 8)); }, 'height': function(ele) { const coverage = ele.data('coverage') || 0; return Math.max(30, 30 + (coverage * 8)); }, 'font-size': '12px', 'text-valign': 'center', 'text-halign': 'center', 'color': '#ffffff', 'text-outline-color': '#1a4d3a', 'text-outline-width': '2px' } }, { selector: 'node[type="member"]', style: { 'background-color': '#88ff88', 'label': 'data(label)', 'width': function(ele) { const availability = ele.data('availability') || 0; return Math.max(25, 25 + (availability / 3)); }, 'height': function(ele) { const availability = ele.data('availability') || 0; return Math.max(25, 25 + (availability / 3)); }, 'font-size': '10px', 'text-valign': 'center', 'text-halign': 'center', 'color': '#1a4d3a', 'text-outline-color': '#ffffff', 'text-outline-width': '1px' } }, { selector: 'edge', style: { 'width': function(ele) { return 1 + (ele.data('weight') || 0.5); }, 'line-color': '#4ade80', 'target-arrow-color': '#4ade80', 'target-arrow-shape': 'triangle', 'curve-style': 'bezier' } } ], layout: { name: 'cose-bilkent', animate: true, animationDuration: 1000, nodeRepulsion: 4500, idealEdgeLength: 100, edgeElasticity: 0.45 } }); // Gestionnaire de clics cy.on('tap', 'node', function(evt) { const node = evt.target; const nodeData = node.data(); let tooltip = ''; if (nodeData.type === 'technology') { tooltip = \`\${nodeData.label}\\n\` + \`Ring: \${nodeData.ring}\\n\` + \`Couverture: \${nodeData.coverage} personne(s)\\n\` + \`Impact: \${nodeData.businessImpact}\\n\` + \`Gap: \${nodeData.skillGap}\`; } else { tooltip = \`\${nodeData.label}\\n\` + \`Disponibilité: \${nodeData.availability}%\` + (nodeData.role ? \`\\nRôle: \${nodeData.role}\` : ''); } alert(tooltip); }); console.log('✅ Graphe réseau initialisé'); }); }); }; const initCongestionMatrix = () => { if (!data?.congestionMatrix || !matrixRef.current) return; console.log('📈 Initialisation matrice congestion...'); // Import dynamique pour éviter les erreurs SSR import('echarts-for-react').then(() => { import('echarts').then((echarts) => { const techs = data.congestionMatrix.map(r => r.technology); const members = data.congestionMatrix[0]?.members.map(m => m.fullName || m.member) || []; const scatterData = []; data.congestionMatrix.forEach((row, i) => { row.members.forEach((member, j) => { scatterData.push([j, i, member.availability, member]); }); }); const chart = echarts.default.init(matrixRef.current); const option = { title: { text: 'Disponibilité des Technologies Core', left: 'center', textStyle: { color: '#e0e0e0' } }, tooltip: { formatter: function(params) { if (params.data && params.data[3]) { const member = params.data[3]; return \`\${member.fullName || member.member}
\` + \`Technologie: \${techs[params.data[1]]}
\` + \`Disponibilité: \${params.data[2]}%\`; } } }, grid: { left: '10%', right: '10%', top: '15%', bottom: '15%', containLabel: true }, xAxis: { type: 'category', data: members, axisLabel: { color: '#e0e0e0', rotate: 45 } }, yAxis: { type: 'category', data: techs, axisLabel: { color: '#e0e0e0' } }, visualMap: { min: 0, max: 100, dimension: 2, orient: 'horizontal', left: 'center', top: 'top', text: ['Élevé', 'Faible'], textStyle: { color: '#e0e0e0' }, inRange: { color: ['#ff4444', '#ff8800', '#4488ff', '#88ff88'] }, outOfRange: { color: '#444444' } }, series: [{ name: 'Disponibilité', type: 'scatter', data: scatterData, symbolSize: function(data) { return 15 + (data[2] || 0) / 2; } }] }; chart.setOption(option); console.log('✅ Matrice congestion initialisée'); }); }); }; const renderGenesisTeam = () => { if (!data?.genesisTeam) return
Données équipe non disponibles
; const genesis = data.genesisTeam; return (

Équipe de Genèse MVP

Critères de Sélection

{genesis.selectedMembers.map(member => (
{member.fullName || member.member}
{member.role || ''} • {member.seniority} • {member.coverage} technologie(s)
{member.availability}%
Disponibilité
{member.skills.slice(0, 8).map(skill => ( {skill} ))} {member.skills.length > 8 && ( +{member.skills.length - 8} )}
))}
); }; if (loading) { return (
Chargement des visualisations équipe...
); } if (error) { return (
Erreur: {error}
); } return (
← Retour au Radar

👥 Équipe & Technologies

Visualisation des compétences et identification de l'équipe de genèse MVP

{activeTab === 'network' && (

Graphe Réseau - Technologies et Compétences

Technologies Core
Technologies Avancées
Technologies Utilitaires
Membres Équipe
)} {activeTab === 'congestion' && (

Matrice de Congestion - Technologies Core

)} {activeTab === 'genesis' && (
{renderGenesisTeam()}
)}
); } EOF # Script Python pour ajouter le lien Équipe dans Navigation.tsx (supprime TOUS les doublons) RUN cat > /tmp/add_team_link.py << 'PYEOF' #!/usr/bin/env python3 import sys import re import os f = ".techradar/src/components/Navigation/Navigation.tsx" try: # Vérifier que le fichier existe if not os.path.exists(f): print(f"❌ Fichier {f} introuvable", file=sys.stderr) sys.exit(1) with open(f, 'r', encoding='utf-8') as file: content = file.read() # VÉRIFICATION PRÉLIMINAIRE: Détecter les doublons structurels print("🔍 Vérification de la structure du composant...") # Compter les éléments structurels nav_patterns = [ r']*>', content)) # Compter les logos (Image avec logo ou logoFile) logo_patterns = [ r'logoFile', r'logo\.svg', r'[Ll]ogo', r'Image.*logo' ] logo_count = sum(len(re.findall(pattern, content)) for pattern in logo_patterns) # Compter les fonctions Navigation function_count = len(re.findall(r'(export\s+(default\s+)?function\s+Navigation|const\s+Navigation\s*=\s*\(|function\s+Navigation\s*\()', content)) print(f"📊 Structure détectée: {nav_count} nav, {ul_count} ul, {logo_count} logo, {function_count} fonction(s)") # Détecter les duplications structurelles if function_count > 1: print(f"⚠️ ATTENTION: {function_count} fonction(s) Navigation détectée(s) - possible duplication du composant", file=sys.stderr) # Extraire uniquement la première fonction Navigation matches = list(re.finditer(r'(export\s+(default\s+)?function\s+Navigation|const\s+Navigation\s*=\s*\(|function\s+Navigation\s*\()', content)) if len(matches) > 1: # Garder seulement jusqu'à la fin de la première fonction first_end = matches[1].start() if len(matches) > 1 else len(content) content = content[:first_end] # Trouver la fin de la fonction (dernière accolade fermante avant la prochaine fonction) brace_count = 0 in_function = False for i, char in enumerate(content[matches[0].start():], matches[0].start()): if char == '{': brace_count += 1 in_function = True elif char == '}': brace_count -= 1 if in_function and brace_count == 0: content = content[:i+1] break print(f"✅ Duplication du composant supprimée") if ul_count > 3: # Plus de 3 ul suggère une duplication print(f"⚠️ ATTENTION: {ul_count} éléments