@@ -808,12 +811,13 @@ HTML = r"""
let selection = -1;
let selectionNom = null;
let ongletActif = 'reseau';
- let modifie = false;
let occupe = false;
let verifie = {};
let motVault = '';
let modaleResolveur = null;
let intrants = null;
+ let chronoConsole = null;
+ let consoleDebut = 0;
const ONGLETS = {
reseau: [
@@ -835,10 +839,36 @@ HTML = r"""
],
};
- function message(texte, type='') {
- const el = document.getElementById('message');
- el.textContent = texte;
- el.className = 'message' + (type ? ' ' + type : '');
+ let toastSeq = 0;
+ function message(texte, type='', opts={}) {
+ const conteneur = document.getElementById('toasts');
+ if (!conteneur) return null;
+ const t = document.createElement('div');
+ t.className = 'toast' + (type ? ' ' + type : '');
+ t.id = 'toast-' + (++toastSeq);
+ const corps = document.createElement('span');
+ corps.textContent = texte;
+ t.appendChild(corps);
+ const x = document.createElement('button');
+ x.type = 'button'; x.className = 'x'; x.textContent = '×';
+ x.onclick = () => retirerToast(t);
+ t.appendChild(x);
+ conteneur.appendChild(t);
+ while (conteneur.children.length > 6) conteneur.removeChild(conteneur.firstChild);
+ const duree = opts.persistant ? 0 : (opts.duree != null ? opts.duree : (type === 'erreur' ? 7000 : 3500));
+ if (duree > 0) setTimeout(() => retirerToast(t), duree);
+ return t; // renvoie le nœud pour permettre de le mettre à jour (opérations longues)
+ }
+ function majToast(t, texte, type, dureeFin) {
+ if (!t) return;
+ if (type !== undefined) t.className = 'toast' + (type ? ' ' + type : '');
+ const corps = t.querySelector('span'); if (corps) corps.textContent = texte;
+ if (dureeFin) setTimeout(() => retirerToast(t), dureeFin);
+ }
+ function retirerToast(t) {
+ if (!t || !t.parentNode) return;
+ t.classList.add('sortant');
+ setTimeout(() => { if (t.parentNode) t.parentNode.removeChild(t); }, 260);
}
async function charger() {
@@ -854,7 +884,7 @@ HTML = r"""
chargerServeurs(data);
hotes = data.hotes;
estProduction = !!data.production;
- modifie = false; verifie = {};
+ verifie = {};
document.getElementById('chemin').textContent = data.inventaire;
restaurerSelection();
dessiner();
@@ -877,40 +907,6 @@ HTML = r"""
dessiner();
}
- function marquerModifie() { modifie = true; verifie = {}; majIndicateurSauvegarde(); majBoutonsDeploiement(); }
-
- function ajouterHote() {
- hotes.unshift({nom:'', etat:'planifie', utilisateur_ansible:'ansible', groupes:['serveur_debian','serveur_durci']});
- selection = 0; selectionNom = ''; filtre = ''; filtreEtat = 'tous';
- document.getElementById('filtre').value = '';
- marquerModifie(); dessiner();
- const champNom = document.querySelector('.detail-nom input');
- if (champNom) champNom.focus();
- }
-
- function supprimerHote(index) {
- const nom = hotes[index] && hotes[index].nom;
- if (nom && !confirm('Retirer ' + nom + ' de l\'inventaire ?')) return;
- hotes.splice(index, 1);
- if (selection >= hotes.length) selection = hotes.length - 1;
- selectionNom = selection >= 0 ? hotes[selection].nom : null;
- marquerModifie(); dessiner();
- }
-
- function definir(index, champ, valeur) { hotes[index][champ] = valeur; marquerModifie(); }
- function definirNom(index, valeur) {
- hotes[index].nom = valeur; selectionNom = valeur;
- const c = document.getElementById('carte-' + index);
- if (c) { const n = c.querySelector('.carte-nom'); if (n) { n.textContent = valeur || '(sans nom)'; n.className = 'carte-nom' + (valeur ? '' : ' sans'); } }
- marquerModifie();
- }
- function definirEtat(index, etat) { hotes[index].etat = etat; marquerModifie(); dessiner(); }
- function basculerGroupe(index, groupe, actif) {
- const ensemble = new Set(hotes[index].groupes || []);
- if (actif) ensemble.add(groupe); else ensemble.delete(groupe);
- hotes[index].groupes = Array.from(ensemble).sort();
- marquerModifie(); dessiner();
- }
function setOnglet(o) { ongletActif = o; dessinerDetail(); }
function setFiltreEtat(e) { filtreEtat = e; dessinerChips(); dessinerGrilles(); }
function filtrer(valeur) { filtre = (valeur || '').trim().toLowerCase(); dessinerGrilles(); }
@@ -936,7 +932,15 @@ HTML = r"""
function majIndicateurSauvegarde() {
const b = document.getElementById('btn-sauver');
- if (b) { b.classList.toggle('attention', modifie); b.textContent = modifie ? 'Sauvegarder •' : 'Sauvegarder'; }
+ if (!b) return;
+ const editable = vuePrincipale === 'serveurs' || vuePrincipale === 'applications' || vuePrincipale === 'bases';
+ const sale = (vuePrincipale === 'serveurs' && serveursModifie)
+ || (vuePrincipale === 'applications' && applicationsModifie)
+ || (vuePrincipale === 'bases' && basesModifie);
+ b.classList.toggle('attention', sale);
+ b.textContent = sale ? 'Sauvegarder •' : 'Sauvegarder';
+ b.disabled = !editable;
+ b.title = editable ? 'Sauvegarder cette vue (Ctrl+S)' : 'Lecture seule — édite dans Serveurs / Applications / Bases';
}
function dessinerResume() {
@@ -992,6 +996,7 @@ HTML = r"""
document.getElementById('btn-vue-applications').classList.toggle('on', v === 'applications');
document.getElementById('btn-vue-bases').classList.toggle('on', v === 'bases');
dessinerGrilles();
+ majIndicateurSauvegarde();
}
function dessinerGrilles() {
@@ -1257,14 +1262,14 @@ HTML = r"""
const lignes = serveurs.length ? serveurs.map((s, i) => {
const d = deriveServeur(s.nom, s.fonction);
return ``;
}
+ function serveurValeurValide(cle, v) {
+ const s = String(v == null ? '' : v).trim();
+ if (s === '') return true; // vide = dérivé / défaut, autorisé
+ if (cle === 'nom') return /^[a-z0-9]+(-[a-z0-9]+)*-\d+$/.test(s);
+ if (cle === 'memoire') return /^\d+$/.test(s) && +s >= 64 && +s <= 1048576;
+ if (cle === 'coeurs') return /^\d+$/.test(s) && +s >= 1 && +s <= 256;
+ if (cle === 'disque') return /^\d+\s*[GMgm]?$/.test(s);
+ return true;
+ }
+ function validerChampServeur(el) {
+ const ok = serveurValeurValide(el.getAttribute('data-v'), el.value);
+ el.classList.toggle('invalide', !ok);
+ return ok;
+ }
+
async function sauvegarderServeurs() {
+ const invalides = Array.from(document.querySelectorAll('#grilles [data-v]')).filter(el => !validerChampServeur(el));
+ if (invalides.length) {
+ message('Corrige les ' + invalides.length + ' champ(s) en rouge avant de sauvegarder.', 'erreur');
+ invalides[0].focus();
+ return;
+ }
const srv = {};
serveurs.forEach(s => {
if (!String(s.nom).trim()) return;
@@ -1302,12 +1328,16 @@ HTML = r"""
}
async function appliquerPlan() {
- message('Application du plan…');
- const rep = await fetch('/api/instancier', {method: 'POST', headers: {'Content-Type': 'application/json', 'X-Jeton': JETON}, body: '{}'});
- const data = await rep.json();
- const derniere = (data.sortie || '').split('\n').pop();
- message((data.ok ? 'Plan appliqué : ' : 'Échec : ') + derniere, data.ok ? 'ok' : 'erreur');
- if (data.ok) charger();
+ const t = message('Application du plan…', '', {persistant: true});
+ try {
+ const rep = await fetch('/api/instancier', {method: 'POST', headers: {'Content-Type': 'application/json', 'X-Jeton': JETON}, body: '{}'});
+ const data = await rep.json();
+ const derniere = (data.sortie || '').split('\n').pop();
+ majToast(t, (data.ok ? 'Plan appliqué : ' : 'Échec : ') + derniere, data.ok ? 'ok' : 'erreur', data.ok ? 4000 : 8000);
+ if (data.ok) charger();
+ } catch (e) {
+ majToast(t, 'Erreur réseau : ' + e, 'erreur', 8000);
+ }
}
function dessinerDependances() {
@@ -1333,16 +1363,12 @@ HTML = r"""
}).join('');
}
- function champ(index, cle, libelle, opts={}) {
- const h = hotes[index];
- const type = opts.type || 'text';
- const attrs = [`type="${type}"`, `value="${echapper(h[cle] != null ? h[cle] : '')}"`,
- opts.placeholder ? `placeholder="${echapper(opts.placeholder)}"` : '',
- opts.min != null ? `min="${opts.min}"` : '', opts.max != null ? `max="${opts.max}"` : '',
- type === 'number' ? 'inputmode="numeric"' : ''].filter(Boolean).join(' ');
+ function champLecture(h, cle, libelle, opts={}) {
+ const brut = h[cle];
+ const v = (brut === '' || brut == null) ? '—' : String(brut);
const unite = opts.unite ? ` · ${echapper(opts.unite)} ` : '';
return `${echapper(libelle)}${unite}
- ${echapper(v)}
`;
}
function tuile(valeur, libelle) {
@@ -1353,7 +1379,7 @@ HTML = r"""
function dessinerDetail() {
const cible = document.getElementById('detail');
if (selection < 0 || !hotes[selection]) {
- cible.innerHTML = 'Aucun hôte sélectionné Choisissez une carte, ou ajoutez un hôte.
Aucun hôte sélectionné Choisissez une carte pour l\'inspecter.
${onglet.map(([c, l, o]) => champ(index, c, l, o)).join('')}
`;
+ corps = `${onglet.map(([c, l, o]) => champLecture(h, c, l, o)).join('')}
`;
} else if (ongletActif === 'chaine') {
corps = renduChaine(h);
} else {
- corps = `${groupes.map(g => renduGroupe(index, h, g)).join('')}
`;
+ const gs = h.groupes || [];
+ corps = gs.length
+ ? `${gs.map(g => renduGroupe(h, g)).join('')}
`
+ : 'Aucun groupe rattaché à cet hôte.
';
}
cible.innerHTML = `
-
-
✨ Proposer
-
- actif
- planifié
-
-
✕
+
${echapper(h.nom || '(sans nom)')} ${zoneHint}
+
+
${libelleStatut(st)}
${tuile(h.vmid, 'VMID')}
@@ -1414,26 +1439,22 @@ HTML = r"""
const bv = document.getElementById('btn-verifier');
const bd = document.getElementById('btn-deployer');
const hote = selection >= 0 && hotes[selection] ? (hotes[selection].nom || '') : '';
- if (bv) { bv.disabled = occupe || modifie; bv.title = modifie ? 'Sauvegardez d\'abord' : (occupe ? 'Exécution en cours' : 'Dry-run (--check --diff), aucune modification'); }
- if (bd) { bd.disabled = occupe || modifie || !verifie[hote]; bd.title = modifie ? 'Sauvegardez d\'abord' : (!verifie[hote] ? 'Vérifiez (dry-run) d\'abord' : 'Applique les playbooks sur la VM réelle'); }
+ if (bv) { bv.disabled = occupe; bv.title = occupe ? 'Exécution en cours' : 'Dry-run (--check --diff), aucune modification'; }
+ if (bd) { bd.disabled = occupe || !verifie[hote]; bd.title = !verifie[hote] ? 'Vérifiez (dry-run) d\'abord' : 'Applique les playbooks sur la VM réelle'; }
}
- function renduGroupe(index, hote, groupe) {
- const selectionne = (hote.groupes || []).includes(groupe);
+ function renduGroupe(hote, groupe) {
const manquants = manquantsPourGroupe(groupe);
const config = dependances[groupe] || {};
- let statut = selectionne ? 'selectionne' : '';
- if (selectionne && hote.etat === 'actif' && manquants.length) statut = 'bloque';
- else if (selectionne && hote.etat === 'actif') statut = 'ok';
- else if (selectionne && hote.etat !== 'actif' && (config.requiert_groupes_actifs || []).length) statut = 'attente';
+ let statut = 'selectionne';
+ if (hote.etat === 'actif' && manquants.length) statut = 'bloque';
+ else if (hote.etat === 'actif') statut = 'ok';
+ else if ((config.requiert_groupes_actifs || []).length) statut = 'attente';
return `
-
-
- ${echapper(groupe)}
-
+
+ ${echapper(groupe)} ${echapper(detailGroupe(groupe, hote))}
- `;
+
`;
}
function detailGroupe(groupe, hote) {
@@ -1465,32 +1486,6 @@ HTML = r"""
if (!c) return null;
return {categorie: d.categorie, service: d.service, libelle: c.libelle, vlan: c.vlan, sous_reseau: c.sous_reseau, passerelle: c.passerelle};
}
- function prochainSeqLibre(fonction) {
- const pris = new Set();
- hotes.forEach(h => { const x = fonctionDe(h.nom); if (x.fonction === fonction && x.seq != null) pris.add(x.seq); });
- let s = 1; while (pris.has(s)) s++; return s;
- }
- function proposer(index, silencieux=false) {
- const h = hotes[index];
- let {fonction, seq} = fonctionDe(h.nom);
- const info = infoFonction(fonction);
- if (!info) { if (!silencieux) message('Fonction inconnue de la nomenclature : ' + (fonction || '(vide)'), 'erreur'); return; }
- if (seq == null) { seq = prochainSeqLibre(fonction); h.nom = fonction + '-' + String(seq).padStart(2, '0'); selectionNom = h.nom; }
- if (seq > 9) { if (!silencieux) message('Séquence > 9 pour ' + fonction + ' : hors plage d\'adressage, à saisir à la main.', 'erreur'); return; }
- const base3 = info.sous_reseau.split('.').slice(0, 3).join('.');
- h.vmid = '9' + info.categorie + info.service + String(seq).padStart(2, '0');
- h.vlan = String(info.vlan);
- h.adresse_ip = base3 + '.' + (info.service * 10 + seq);
- h.passerelle = info.passerelle;
- h.cidr = String(nomenclature.cidr_hote || 24);
- marquerModifie(); dessiner();
- if (!silencieux) message('Valeurs proposées pour ' + h.nom + ' (' + info.libelle + ', VLAN ' + info.vlan + ').', 'ok');
- }
- function autoProposer(index) {
- const h = hotes[index];
- if (!String(h.vmid || '').trim() && infoFonction(fonctionDe(h.nom).fonction)) proposer(index, true);
- }
-
function echapper(valeur) {
return String(valeur).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
}
@@ -1502,12 +1497,20 @@ HTML = r"""
etat.className = 'console-etat actif'; etat.textContent = '● en cours';
document.getElementById('btn-fermer-console').disabled = true;
document.getElementById('console').hidden = false;
+ consoleDebut = Date.now();
+ clearInterval(chronoConsole);
+ chronoConsole = setInterval(() => {
+ const s = Math.round((Date.now() - consoleDebut) / 1000);
+ etat.textContent = '● en cours · ' + s + 's';
+ }, 1000);
}
function ecrireConsole(t) { const p = document.getElementById('console-sortie'); p.textContent += t; p.scrollTop = p.scrollHeight; }
function finirConsole(rc) {
+ clearInterval(chronoConsole); chronoConsole = null;
+ const s = Math.round((Date.now() - consoleDebut) / 1000);
const etat = document.getElementById('console-etat');
etat.className = 'console-etat ' + (rc === 0 ? 'ok' : 'echec');
- etat.textContent = rc === 0 ? '✓ succès' : '✗ échec (rc=' + rc + ')';
+ etat.textContent = (rc === 0 ? '✓ succès' : '✗ échec (rc=' + rc + ')') + ' · ' + s + 's';
document.getElementById('btn-fermer-console').disabled = false;
}
function fermerConsole() { if (!occupe) document.getElementById('console').hidden = true; }
@@ -1636,8 +1639,7 @@ HTML = r"""
async function lancer(mode, index) {
const hote = hotes[index] ? hotes[index].nom : '';
- if (!hote) { message('Nommez l\'hôte d\'abord.', 'erreur'); return; }
- if (modifie) { message('Sauvegardez avant d\'exécuter.', 'erreur'); return; }
+ if (!hote) { message('Hôte introuvable.', 'erreur'); return; }
if (occupe) return;
let vault = '';
if (mode === 'deployer') {
@@ -1680,27 +1682,52 @@ HTML = r"""
occupe = false; majBoutonsDeploiement();
}
- async function sauvegarder() {
- const reponse = await fetch('/api/inventaire', {
- method: 'POST', headers: {'Content-Type': 'application/json', 'X-Jeton': JETON}, body: JSON.stringify({hotes})
- });
- const data = await reponse.json();
- if (!reponse.ok) { message(data.erreur || 'Sauvegarde refusée.', 'erreur'); return; }
- dependances = data.dependances || {};
- nomenclature = data.nomenclature || {};
- chaine = data.chaine || {};
- groupes = data.groupes;
- hotes = data.hotes;
- estProduction = !!data.production;
- modifie = false; verifie = {};
- restaurerSelection();
- dessiner();
- message('Inventaire sauvegardé.', 'ok');
+ function sauvegarderVue() {
+ if (occupe) return;
+ if (vuePrincipale === 'serveurs') sauvegarderServeurs();
+ else if (vuePrincipale === 'applications') sauvegarderApplications();
+ else if (vuePrincipale === 'bases') sauvegarderBases();
+ else message('Vue en lecture seule — édite dans Serveurs / Applications / Bases.');
+ }
+
+ function ordreHotesVisibles() {
+ const vis = hotes.map((h, i) => [h, i]).filter(([h]) => correspond(h));
+ return [...vis.filter(([h]) => h.etat === 'actif'), ...vis.filter(([h]) => h.etat !== 'actif')].map(([, i]) => i);
+ }
+ function naviguerHotes(delta) {
+ const ordre = ordreHotesVisibles();
+ if (!ordre.length) return;
+ let pos = ordre.indexOf(selection);
+ pos = pos < 0 ? (delta > 0 ? 0 : ordre.length - 1)
+ : Math.min(ordre.length - 1, Math.max(0, pos + delta));
+ selectionner(ordre[pos]);
+ const c = document.getElementById('carte-' + ordre[pos]);
+ if (c) c.scrollIntoView({block: 'nearest', behavior: 'smooth'});
}
document.addEventListener('keydown', e => {
if (e.key === 'Escape' && modaleResolveur) { annulerModale(); return; }
- if ((e.ctrlKey || e.metaKey) && e.key === 's') { e.preventDefault(); if (!occupe) sauvegarder(); }
+ if ((e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'S')) { e.preventDefault(); sauvegarderVue(); return; }
+ const dansSaisie = /^(INPUT|SELECT|TEXTAREA)$/.test((document.activeElement || {}).tagName || '');
+ if (dansSaisie || e.ctrlKey || e.metaKey || e.altKey) return;
+ const vues = {'1': 'cartes', '2': 'serveurs', '3': 'chaine', '4': 'applications', '5': 'bases'};
+ if (vues[e.key]) { setVue(vues[e.key]); return; }
+ if (e.key === '/') { e.preventDefault(); const f = document.getElementById('filtre'); if (f) f.focus(); return; }
+ if (vuePrincipale !== 'cartes') return;
+ if (e.key === 'j') { naviguerHotes(1); return; }
+ if (e.key === 'k') { naviguerHotes(-1); return; }
+ if (e.key === 'v') { const b = document.getElementById('btn-verifier'); if (b && !b.disabled) lancer('verifier', selection); return; }
+ if (e.key === 'd') { const b = document.getElementById('btn-deployer'); if (b && !b.disabled) lancer('deployer', selection); return; }
+ });
+
+ // Validation inline des champs du plan (vue Serveurs) — liseré rouge avant l'envoi.
+ document.addEventListener('input', e => {
+ if (e.target && e.target.matches && e.target.matches('[data-v]')) validerChampServeur(e.target);
+ });
+
+ // Garde-fou : prévenir la perte d'éditions de plan non sauvegardées.
+ window.addEventListener('beforeunload', e => {
+ if (serveursModifie || applicationsModifie || basesModifie) { e.preventDefault(); e.returnValue = ''; }
});
// ------ Info-bulles d'aide au survol de la description d'un champ ------