refactor: fiabiliser le portail dynamique production

.gitignore

@@ -4,3 +4,7 @@ node_modules/
 dist/
 build/
 .DS_Store
+# Sauvegardes locales : les versions de référence restent dans Git.
+*.bak
+*.bak-*
+*.tmp

app.json

@@ -0,0 +1,10 @@
+{
+  "id": "portail-santinova",
+  "name": "Portail Applicatif",
+  "category": "INFRA",
+  "urls": {"recette": "https://portail.recette.santinova-soft.org", "prod": "https://portail.santinova-soft.org"},
+  "containerName": "portail-santinova",
+  "image": "images/portail.png",
+  "giteaRepo": "portail-santinova",
+  "giteaOwner": "manus-admin"
+}

index.html

@@ -322,10 +322,10 @@
       </div>
       <div>
         <div class="header-title">Portail Applicatif</div>
-        <div class="header-subtitle">Environnement de recette</div>
+        <div class="header-subtitle">Environnement de production</div>
       </div>
     </div>
-    <div class="header-badge">Recette</div>
+    <div class="header-badge">Production</div>
   </header>
 
   <!-- TABS NAV -->
@@ -375,111 +375,138 @@
   </footer>
 
   <script>
-    // URL de l'API du dashboard de recette
+    /*
-    var DASHBOARD_APPS_URL = 'https://dashboard.recette.santinova-soft.org/api/public/apps';
+     * Configuration d'environnement. Cette version est exclusivement destinée
-    var DASHBOARD_STATUS_URL = 'https://dashboard.recette.santinova-soft.org/api/public/status';
+     * à la recette. La version production ne diffère que par ces quatre valeurs.
+     */
+    var ENV = 'prod';
+    var ENV_LABEL = 'Production';
+    var DASHBOARD_APPS_URL = 'https://dashboard.santinova-soft.org/api/public/apps';
+    var DASHBOARD_STATUS_URL = 'https://dashboard.santinova-soft.org/api/public/status';
+    var STATUS_REFRESH_MS = 30000;
+    var APPS_REFRESH_MS = 300000;
+    var hasRenderedApps = false;
 
-    function switchTab(tabName, btn) {
+    function switchTab(tabName, button) {
-      document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
+      document.querySelectorAll('.tab-btn').forEach(function(tab) { tab.classList.remove('active'); });
-      document.querySelectorAll('.tab-panel').forEach(function(p) { p.classList.remove('active'); });
+      document.querySelectorAll('.tab-panel').forEach(function(panel) { panel.classList.remove('active'); });
-      btn.classList.add('active');
+      button.classList.add('active');
       document.getElementById('panel-' + tabName).classList.add('active');
     }
 
-    /**
+    function escapeHtml(value) {
-     * Construit une tuile HTML pour une application.
+      return String(value || '').replace(/[&<>'"]/g, function(character) {
-     */
+        return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' })[character];
+      });
+    }
+
+    function isHttpsUrl(value) {
+      try {
+        return new URL(value).protocol === 'https:';
+      } catch (error) {
+        return false;
+      }
+    }
+
+    function isOffline(app) {
+      return app.status === 'offline' || app.status === 'error' || app.containerRunning === false;
+    }
+
+    /** Construit une tuile depuis un manifeste validé par le dashboard local. */
     function buildCard(app) {
-      var url = (app.urls && app.urls.recette) ? app.urls.recette : '#';
+      var url = app.urls && app.urls[ENV];
+      if (!isHttpsUrl(url)) return '';
+
       var image = app.image || ('images/' + app.id + '.png');
-      var isOffline = app.status === 'offline' || !app.containerRunning;
+      var offline = isOffline(app);
-      var offlineClass = isOffline ? ' offline' : '';
+      var offlineClass = offline ? ' offline' : '';
-      return '<a class="app-card' + offlineClass + '" data-app-id="' + app.id + '" href="' + url + '" target="_blank" rel="noopener noreferrer">' +
+      var ariaDisabled = offline ? ' aria-disabled="true"' : '';
-        '<div class="card-image-wrapper"><img src="' + image + '" alt="' + app.name + '" onerror="this.src=\'images/default.png\'" /></div>' +
+
-        '<div class="card-name">' + app.name + '</div>' +
+      return '<a class="app-card' + offlineClass + '" data-app-id="' + escapeHtml(app.id) + '" href="' + escapeHtml(url) + '" target="_blank" rel="noopener noreferrer"' + ariaDisabled + '>' +
-        '<div class="card-env-badge">Recette</div>' +
+        '<div class="card-image-wrapper"><img src="' + escapeHtml(image) + '" alt="' + escapeHtml(app.name) + '" onerror="this.style.display=\'none\'" /></div>' +
+        '<div class="card-name">' + escapeHtml(app.name) + '</div>' +
+        '<div class="card-env-badge">' + ENV_LABEL + '</div>' +
         '<div class="card-status-badge">Hors ligne</div>' +
         '</a>';
     }
 
-    /**
+    function renderApps(apps) {
-     * Charge les apps depuis l'API et construit les grilles.
+      // Défense en profondeur : le dashboard exclut INFRA et le portail le fait aussi.
-     */
+      var visibleApps = apps.filter(function(app) {
-    function loadApps() {
+        return app.category !== 'INFRA' && isHttpsUrl(app.urls && app.urls[ENV]);
-      fetch(DASHBOARD_APPS_URL, { cache: 'no-store' })
+      });
-        .then(function(r) {
+      var itinovaApps = visibleApps.filter(function(app) { return app.category === 'ITINOVA'; });
-          if (!r.ok) throw new Error('HTTP ' + r.status);
+      var santinovaApps = visibleApps.filter(function(app) { return app.category === 'SANTINOVA'; });
-          return r.json();
-        })
-        .then(function(apps) {
-          var itinovaApps = apps.filter(function(a) { return a.category === 'ITINOVA'; });
-          var santinovaApps = apps.filter(function(a) { return a.category === 'SANTINOVA'; });
 
-          var gridI = document.getElementById('grid-itinova');
+      var gridItinova = document.getElementById('grid-itinova');
-          var gridS = document.getElementById('grid-santinova');
+      var gridSantinova = document.getElementById('grid-santinova');
+      gridItinova.innerHTML = itinovaApps.length
+        ? itinovaApps.map(buildCard).join('')
+        : '<div class="loading-msg">Aucune application Itinova déployée.</div>';
+      gridSantinova.innerHTML = santinovaApps.length
+        ? santinovaApps.map(buildCard).join('')
+        : '<div class="loading-msg">Aucune application Santinova déployée.</div>';
 
-          if (itinovaApps.length === 0) {
+      document.getElementById('count-itinova').textContent = itinovaApps.length;
-            gridI.innerHTML = '<div class="loading-msg">Aucune application Itinova déployée.</div>';
+      document.getElementById('count-santinova').textContent = santinovaApps.length;
-          } else {
+      hasRenderedApps = true;
-            gridI.innerHTML = itinovaApps.map(buildCard).join('');
-          }
-
-          if (santinovaApps.length === 0) {
-            gridS.innerHTML = '<div class="loading-msg">Aucune application Santinova déployée.</div>';
-          } else {
-            gridS.innerHTML = santinovaApps.map(buildCard).join('');
-          }
-
-          document.getElementById('count-itinova').textContent = itinovaApps.length;
-          document.getElementById('count-santinova').textContent = santinovaApps.length;
-        })
-        .catch(function(err) {
-          console.warn('[Portail] Impossible de charger les apps:', err.message);
-          document.getElementById('grid-itinova').innerHTML = '<div class="loading-msg">Erreur de chargement. Veuillez rafraîchir la page.</div>';
-          document.getElementById('grid-santinova').innerHTML = '<div class="loading-msg">Erreur de chargement. Veuillez rafraîchir la page.</div>';
-        });
     }
 
-    /**
+    async function requestJson(url) {
-     * Met à jour l'état visuel des tuiles en fonction des statuts reçus du dashboard.
+      var controller = new AbortController();
-     */
+      var timeoutId = setTimeout(function() { controller.abort(); }, 8000);
-    function applyStatuses(statuses) {
+      try {
-      document.querySelectorAll('.app-card[data-app-id]').forEach(function(card) {
+        var response = await fetch(url, { cache: 'no-store', signal: controller.signal });
-        var appId = card.getAttribute('data-app-id');
+        if (!response.ok) throw new Error('HTTP ' + response.status);
-        var appStatus = statuses.find(function(s) { return s.id === appId; });
+        return await response.json();
-        if (appStatus) {
+      } finally {
-          var isOffline = appStatus.status === 'offline' || !appStatus.containerRunning;
+        clearTimeout(timeoutId);
-          if (isOffline) {
+      }
-            card.classList.add('offline');
+    }
-          } else {
+
-            card.classList.remove('offline');
+    async function loadApps() {
-          }
+      try {
+        var apps = await requestJson(DASHBOARD_APPS_URL);
+        if (!Array.isArray(apps)) throw new Error('réponse applications invalide');
+        renderApps(apps);
+        await fetchAndApplyStatuses();
+      } catch (error) {
+        console.warn('[Portail] Chargement des applications impossible :', error.message);
+        if (!hasRenderedApps) {
+          var message = '<div class="loading-msg">Dashboard indisponible — veuillez réessayer.</div>';
+          document.getElementById('grid-itinova').innerHTML = message;
+          document.getElementById('grid-santinova').innerHTML = message;
+          document.getElementById('count-itinova').textContent = '!';
+          document.getElementById('count-santinova').textContent = '!';
         }
+      }
+    }
+
+    function applyStatuses(statuses) {
+      if (!Array.isArray(statuses)) return;
+      var byId = new Map(statuses.map(function(status) { return [status.id, status]; }));
+      document.querySelectorAll('.app-card[data-app-id]').forEach(function(card) {
+        var status = byId.get(card.getAttribute('data-app-id'));
+        if (!status) return;
+        var offline = isOffline(status);
+        card.classList.toggle('offline', offline);
+        card.setAttribute('aria-disabled', String(offline));
       });
     }
 
-    /**
+    async function fetchAndApplyStatuses() {
-     * Interroge le dashboard pour obtenir les statuts et met à jour les tuiles.
+      try {
-     */
+        applyStatuses(await requestJson(DASHBOARD_STATUS_URL));
-    function fetchAndApplyStatuses() {
+      } catch (error) {
-      fetch(DASHBOARD_STATUS_URL, { cache: 'no-store' })
+        // Conserver le dernier état connu est préférable à un grisage erroné.
-        .then(function(r) {
+        console.warn('[Portail] Mise à jour des statuts impossible :', error.message);
-          if (!r.ok) throw new Error('HTTP ' + r.status);
+      }
-          return r.json();
-        })
-        .then(applyStatuses)
-        .catch(function(err) {
-          console.warn('[Portail] Impossible de récupérer les statuts:', err.message);
-        });
     }
 
     document.addEventListener('DOMContentLoaded', function() {
-      // Charger les apps au démarrage
       loadApps();
-      // Polling statuts toutes les 30 secondes
+      setInterval(fetchAndApplyStatuses, STATUS_REFRESH_MS);
-      setInterval(fetchAndApplyStatuses, 30000);
+      setInterval(loadApps, APPS_REFRESH_MS);
-      // Premier check statuts après 3s (laisser le temps aux tuiles d'être rendues)
-      setTimeout(fetchAndApplyStatuses, 3000);
     });
   </script>
 </body>

test/portal-contract.test.js

@@ -0,0 +1,21 @@
+/*
+ * Contrat de non-régression du portail dynamique.
+ * Il bloque les marqueurs de conflit, les doublons de configuration
+ * et le mélange des URLs recette/production.
+ */
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+
+const html = fs.readFileSync(path.join(__dirname, '..', 'index.html'), 'utf8');
+
+assert.equal(/^(<<<<<<<|=======|>>>>>>>)/m.test(html), false, 'aucun marqueur de conflit Git ne doit être livré');
+assert.equal((html.match(/var DASHBOARD_APPS_URL/g) || []).length, 1, 'une seule URL API applications doit être déclarée');
+assert.equal((html.match(/var DASHBOARD_STATUS_URL/g) || []).length, 1, 'une seule URL API statuts doit être déclarée');
+assert.match(html, /var ENV = 'prod';/, 'la version recette doit déclarer explicitement son environnement');
+assert.match(html, /app\.urls\[ENV\]/, 'les liens doivent être sélectionnés depuis l’environnement déclaré');
+assert.match(html, /app\.category !== 'INFRA'/, 'les tuiles INFRA doivent être filtrées côté portail');
+assert.match(html, /var STATUS_REFRESH_MS = 30000;/, 'le délai de grisage doit être explicite');
+assert.match(html, /setInterval\(fetchAndApplyStatuses, STATUS_REFRESH_MS\)/, 'le grisage doit être réactualisé périodiquement');
+
+console.log('OK portal-contract');