refactor: fiabiliser le portail dynamique recette
This commit is contained in:
Manus
189
index.html
189
index.html
@@ -375,111 +375,138 @@
|
|||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// URL de l'API du dashboard de recette
|
/*
|
||||||
|
* Configuration d'environnement. Cette version est exclusivement destinée
|
||||||
|
* à la recette. La version production ne diffère que par ces quatre valeurs.
|
||||||
|
*/
|
||||||
|
var ENV = 'recette';
|
||||||
|
var ENV_LABEL = 'Recette';
|
||||||
var DASHBOARD_APPS_URL = 'https://dashboard.recette.santinova-soft.org/api/public/apps';
|
var DASHBOARD_APPS_URL = 'https://dashboard.recette.santinova-soft.org/api/public/apps';
|
||||||
var DASHBOARD_STATUS_URL = 'https://dashboard.recette.santinova-soft.org/api/public/status';
|
var DASHBOARD_STATUS_URL = 'https://dashboard.recette.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');
|
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 ({ '&': '&', '<': '<', '>': '>', "'": ''', '"': '"' })[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) {
|
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 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>' +
|
'<div class="card-status-badge">Hors ligne</div>' +
|
||||||
'</a>';
|
'</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() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
// Charger les apps au démarrage
|
|
||||||
loadApps();
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
21
test/portal-contract.test.js
Normal file
21
test/portal-contract.test.js
Normal file
@@ -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 = 'recette';/, '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');
|
||||||
Reference in New Issue
Block a user