mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
admin/system: fetch()-based tab switching, no full-page reload
Add system-fragment.php — a thin authenticated endpoint that returns only the tab-panel HTML (toolbar + meta + log/nginx-config output) for a given ?tab=&n= combination. No page shell, no status section, no DB queries. system.php changes: - Tab <a> elements gain data-tab= attributes used by JS to identify the target without parsing hrefs. - Tab panel content wrapped in <div id=sys-tab-panel data-tab= data-n=> which JS uses as both the swap target and its own state store. - JS rewritten: tab clicks and lines-select changes call loadPanel() which fetch()es system-fragment.php, swaps innerHTML, updates active tab ARIA attributes, and pushes state via history.pushState. - Browser back/forward handled via popstate listener. - bindPanelControls() re-wires the lines-select and copy-to-clipboard button after every innerHTML swap (event delegation not feasible here because log-output is replaced wholesale). - fetch() failure falls back to window.location.href (full page load). - Tabs without JS still work: <a href> links go to system.php?tab=… as before. system-fragment.php: - Requires AdminAuth::isAuthenticated(); returns 403 on failure. - Validates tab and n params against the same whitelist as system.php. - All helper functions namespaced with frag_ prefix to avoid redeclaration if PHP ever includes both files in the same process. - Renders identical HTML to the corresponding section in system.php. system.css: - #sys-tab-panel gets min-height:8rem and position:relative to prevent layout jump during fetch. - .sys-panel-loading: opacity 0.4 + pointer-events:none + subtle diagonal-stripe ::after overlay with shimmer animation.
This commit is contained in:
Pontoporeia
217
public/admin/system-fragment.php
Normal file
217
public/admin/system-fragment.php
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* system-fragment.php — returns only the tab-panel HTML for the admin system page.
|
||||||
|
*
|
||||||
|
* Called by fetch() from system.php JS when switching tabs or changing line count.
|
||||||
|
* With JS disabled the user never hits this URL directly; the tab <a> hrefs still
|
||||||
|
* point at system.php?tab=… so navigation degrades gracefully.
|
||||||
|
*
|
||||||
|
* Response: text/html fragment (no <html>/<head>/<body> wrapper).
|
||||||
|
* On any auth failure or bad request: 403 / 400 with a plain-text body.
|
||||||
|
*/
|
||||||
|
require_once __DIR__ . "/../../config/bootstrap.php";
|
||||||
|
require_once __DIR__ . '/../../src/AdminAuth.php';
|
||||||
|
|
||||||
|
if (!AdminAuth::isAuthenticated()) {
|
||||||
|
http_response_code(403);
|
||||||
|
header('Content-Type: text/plain; charset=utf-8');
|
||||||
|
echo 'Non autorisé';
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Validate inputs ────────────────────────────────────────────────────────
|
||||||
|
const LOG_FILES_FRAG = [
|
||||||
|
'nginx_access' => ['label' => 'nginx — accès', 'path' => '/var/log/nginx/posterg_access.log'],
|
||||||
|
'nginx_error' => ['label' => 'nginx — erreurs', 'path' => '/var/log/nginx/posterg_error.log'],
|
||||||
|
'php_error' => ['label' => 'PHP-FPM — erreurs', 'path' => '/var/log/php8.4-fpm.log'],
|
||||||
|
];
|
||||||
|
const ALLOWED_LINES_FRAG = [50, 100, 200, 500];
|
||||||
|
|
||||||
|
$tab = $_GET['tab'] ?? 'nginx_access';
|
||||||
|
if ($tab !== 'nginx_config' && !array_key_exists($tab, LOG_FILES_FRAG)) {
|
||||||
|
$tab = 'nginx_access';
|
||||||
|
}
|
||||||
|
|
||||||
|
$n = isset($_GET['n']) ? (int)$_GET['n'] : 100;
|
||||||
|
if (!in_array($n, ALLOWED_LINES_FRAG, true)) {
|
||||||
|
$n = 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
header('Content-Type: text/html; charset=utf-8');
|
||||||
|
header('X-Robots-Tag: noindex');
|
||||||
|
|
||||||
|
// ── Helpers (duplicated from system.php — small enough to inline) ──────────
|
||||||
|
function frag_readLogTail(string $logPath, int $lines, ?string &$errorMsg): ?array
|
||||||
|
{
|
||||||
|
$errorMsg = null;
|
||||||
|
if (!function_exists('exec')) {
|
||||||
|
$errorMsg = "exec() est désactivé sur ce serveur.";
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (!file_exists($logPath)) {
|
||||||
|
$errorMsg = "Fichier introuvable : " . htmlspecialchars($logPath);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (!is_readable($logPath)) {
|
||||||
|
$errorMsg = "Fichier non lisible (permissions insuffisantes) : " . htmlspecialchars($logPath);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
$output = [];
|
||||||
|
$rc = 0;
|
||||||
|
exec('tail -n ' . intval($lines) . ' ' . escapeshellarg($logPath) . ' 2>/dev/null', $output, $rc);
|
||||||
|
if ($rc !== 0) {
|
||||||
|
$errorMsg = "Erreur lors de la lecture du fichier journal.";
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return array_reverse($output);
|
||||||
|
}
|
||||||
|
|
||||||
|
function frag_logLineClass(string $line): string
|
||||||
|
{
|
||||||
|
if (preg_match('/\[(crit|emerg|alert)\]/', $line)) return 'log-crit';
|
||||||
|
if (preg_match('/\[error\]/', $line)) return 'log-error';
|
||||||
|
if (preg_match('/\[warn\]/', $line)) return 'log-warn';
|
||||||
|
if (preg_match('/\[notice\]/', $line)) return 'log-notice';
|
||||||
|
if (preg_match('/" [45]\d\d /', $line)) return 'log-error';
|
||||||
|
if (preg_match('/" 3\d\d /', $line)) return 'log-notice';
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function frag_nginxLineClass(string $line): string
|
||||||
|
{
|
||||||
|
$trimmed = ltrim($line);
|
||||||
|
if ($trimmed === '' || str_starts_with($trimmed, '#')) return 'nginx-comment';
|
||||||
|
if (preg_match('/^\s*(location|server|upstream|events|http|geo|map|types)\b/', $line)) return 'nginx-block';
|
||||||
|
return 'nginx-directive';
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Render ─────────────────────────────────────────────────────────────────
|
||||||
|
if ($tab === 'nginx_config') {
|
||||||
|
$livePath = '/etc/nginx/sites-available/posterg';
|
||||||
|
$localPath = APP_ROOT . '/nginx/posterg.conf';
|
||||||
|
|
||||||
|
$lines = null;
|
||||||
|
$source = null;
|
||||||
|
$meta = null;
|
||||||
|
$error = null;
|
||||||
|
|
||||||
|
foreach ([[$livePath, 'live'], [$localPath, 'local']] as [$path, $src]) {
|
||||||
|
if (file_exists($path) && is_readable($path)) {
|
||||||
|
$raw = file($path, FILE_IGNORE_NEW_LINES);
|
||||||
|
if ($raw !== false) {
|
||||||
|
$lines = $raw;
|
||||||
|
$source = $src;
|
||||||
|
$sz = filesize($path);
|
||||||
|
$meta = [
|
||||||
|
'path' => $path,
|
||||||
|
'size' => $sz > 1048576
|
||||||
|
? number_format($sz / 1048576, 2) . ' MB'
|
||||||
|
: number_format($sz / 1024, 1) . ' KB',
|
||||||
|
'mtime' => date('d/m/Y H:i:s', filemtime($path)),
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($lines === null) {
|
||||||
|
$error = file_exists($livePath)
|
||||||
|
? "Fichier non lisible (permissions insuffisantes) : " . htmlspecialchars($livePath)
|
||||||
|
: "Config live introuvable (" . htmlspecialchars($livePath) . ") et config locale introuvable (" . htmlspecialchars($localPath) . ").";
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($meta): ?>
|
||||||
|
<div class="log-meta">
|
||||||
|
<span data-label="Fichier"><?= htmlspecialchars($meta['path']) ?></span>
|
||||||
|
<span data-label="Taille"><?= $meta['size'] ?></span>
|
||||||
|
<span data-label="Modifié"><?= $meta['mtime'] ?></span>
|
||||||
|
<?php if ($source === 'live'): ?>
|
||||||
|
<span class="nginx-source-badge nginx-source-badge--live">● Config déployée</span>
|
||||||
|
<?php else: ?>
|
||||||
|
<span class="nginx-source-badge nginx-source-badge--local">⚠ Référence locale (config live inaccessible)</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<?php endif;
|
||||||
|
|
||||||
|
if ($error !== null): ?>
|
||||||
|
<div class="log-unavailable">
|
||||||
|
<strong>Configuration nginx non disponible</strong>
|
||||||
|
<div class="log-unavail-path"><?= htmlspecialchars($error) ?></div>
|
||||||
|
<?php if (php_sapi_name() === 'cli-server'): ?>
|
||||||
|
<div class="log-unavail-dev">
|
||||||
|
En développement, <code>/etc/nginx/sites-available/posterg</code> n'existe pas.
|
||||||
|
La config de référence se trouve dans <code>nginx/posterg.conf</code>.
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<?php elseif (empty($lines)): ?>
|
||||||
|
<div class="log-empty">Le fichier de configuration est vide.</div>
|
||||||
|
<?php else: ?>
|
||||||
|
<div class="log-output" id="log-output" role="region" aria-label="Configuration nginx">
|
||||||
|
<button class="log-copy-btn" id="log-copy-btn" type="button" title="Copier la configuration">Copier</button>
|
||||||
|
<?php foreach ($lines as $i => $line): ?>
|
||||||
|
<span class="log-line <?= frag_nginxLineClass($line) ?>"
|
||||||
|
data-n="<?= $i + 1 ?>"><?= htmlspecialchars($line, ENT_QUOTES | ENT_SUBSTITUTE) ?></span>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
<?php endif;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// ── Log tab ────────────────────────────────────────────────────────
|
||||||
|
$logPath = LOG_FILES_FRAG[$tab]['path'];
|
||||||
|
$logError = null;
|
||||||
|
$logLines = frag_readLogTail($logPath, $n, $logError);
|
||||||
|
$logMeta = null;
|
||||||
|
if (file_exists($logPath)) {
|
||||||
|
$sz = filesize($logPath);
|
||||||
|
$logMeta = [
|
||||||
|
'size' => $sz > 1048576
|
||||||
|
? number_format($sz / 1048576, 2) . ' MB'
|
||||||
|
: number_format($sz / 1024, 1) . ' KB',
|
||||||
|
'mtime' => date('d/m/Y H:i:s', filemtime($logPath)),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<div class="log-toolbar">
|
||||||
|
<label for="lines-select" style="font-size:.84rem;color:var(--admin-text-muted);">Afficher</label>
|
||||||
|
<select id="lines-select" aria-label="Nombre de lignes">
|
||||||
|
<?php foreach (ALLOWED_LINES_FRAG as $opt): ?>
|
||||||
|
<option value="<?= $opt ?>" <?= $opt === $n ? 'selected' : '' ?>><?= $opt ?> dernières lignes</option>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</select>
|
||||||
|
<?php if ($logLines !== null && count($logLines) > 0): ?>
|
||||||
|
<span class="log-count-badge"><?= count($logLines) ?> ligne(s)</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php if ($logMeta): ?>
|
||||||
|
<div class="log-meta">
|
||||||
|
<span data-label="Fichier"><?= htmlspecialchars($logPath) ?></span>
|
||||||
|
<span data-label="Taille"><?= $logMeta['size'] ?></span>
|
||||||
|
<span data-label="Modifié"><?= $logMeta['mtime'] ?></span>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if ($logError !== null): ?>
|
||||||
|
<div class="log-unavailable">
|
||||||
|
<strong>Journaux non disponibles</strong>
|
||||||
|
<div class="log-unavail-path"><?= $logError ?></div>
|
||||||
|
<?php if (php_sapi_name() === 'cli-server'): ?>
|
||||||
|
<div class="log-unavail-dev">
|
||||||
|
En environnement de développement, les logs nginx ne sont pas disponibles.
|
||||||
|
Cette page est pleinement fonctionnelle sur le serveur de production.
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<?php elseif (empty($logLines)): ?>
|
||||||
|
<div class="log-empty">Le fichier journal est vide.</div>
|
||||||
|
<?php else: ?>
|
||||||
|
<div class="log-output" id="log-output" role="log" aria-live="off" aria-label="Contenu du journal">
|
||||||
|
<button class="log-copy-btn" id="log-copy-btn" type="button" title="Copier le contenu">Copier</button>
|
||||||
|
<?php foreach ($logLines as $i => $line): ?>
|
||||||
|
<span class="log-line <?= frag_logLineClass($line) ?>"
|
||||||
|
data-n="<?= count($logLines) - $i ?>"><?= htmlspecialchars($line, ENT_QUOTES | ENT_SUBSTITUTE) ?></span>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
<?php endif;
|
||||||
|
}
|
||||||
@@ -362,7 +362,8 @@ $isAdmin = true; $bodyClass = 'admin-body';
|
|||||||
$extraCss = ['/assets/css/system.css'];
|
$extraCss = ['/assets/css/system.css'];
|
||||||
$extraJsInline = <<<'JS'
|
$extraJsInline = <<<'JS'
|
||||||
(function () {
|
(function () {
|
||||||
// ── Status section toggle ──────────────────────────────────────────
|
|
||||||
|
// ── Status section collapse toggle ────────────────────────────────
|
||||||
var toggleBtn = document.getElementById('sys-status-toggle');
|
var toggleBtn = document.getElementById('sys-status-toggle');
|
||||||
var statusBody = document.getElementById('sys-status-body');
|
var statusBody = document.getElementById('sys-status-body');
|
||||||
if (toggleBtn && statusBody) {
|
if (toggleBtn && statusBody) {
|
||||||
@@ -373,7 +374,6 @@ $extraJsInline = <<<'JS'
|
|||||||
toggleBtn.textContent = collapsed ? '▲ Réduire' : '▼ Développer';
|
toggleBtn.textContent = collapsed ? '▲ Réduire' : '▼ Développer';
|
||||||
try { localStorage.setItem('sys_status_collapsed', collapsed ? '0' : '1'); } catch(e) {}
|
try { localStorage.setItem('sys_status_collapsed', collapsed ? '0' : '1'); } catch(e) {}
|
||||||
});
|
});
|
||||||
// Restore collapsed state
|
|
||||||
try {
|
try {
|
||||||
if (localStorage.getItem('sys_status_collapsed') === '1') {
|
if (localStorage.getItem('sys_status_collapsed') === '1') {
|
||||||
statusBody.hidden = true;
|
statusBody.hidden = true;
|
||||||
@@ -383,43 +383,118 @@ $extraJsInline = <<<'JS'
|
|||||||
} catch(e) {}
|
} catch(e) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── Instant tab switch on lines-select change ──────────────────────
|
// ── fetch()-based tab panel loading ───────────────────────────────
|
||||||
var sel = document.getElementById('lines-select');
|
var panel = document.getElementById('sys-tab-panel');
|
||||||
if (sel) {
|
var tabNav = document.querySelector('.sys-tabs');
|
||||||
sel.addEventListener('change', function () {
|
if (!panel || !tabNav || !window.fetch) return;
|
||||||
|
|
||||||
|
var currentTab = panel.dataset.tab;
|
||||||
|
var currentN = panel.dataset.n;
|
||||||
|
|
||||||
|
function loadPanel(tab, n, pushState) {
|
||||||
var url = new URL(window.location.href);
|
var url = new URL(window.location.href);
|
||||||
url.searchParams.set('n', this.value);
|
var fragUrl = new URL('/admin/system-fragment.php', window.location.origin);
|
||||||
|
fragUrl.searchParams.set('tab', tab);
|
||||||
|
fragUrl.searchParams.set('n', n);
|
||||||
|
|
||||||
|
// Mark the panel as loading
|
||||||
|
panel.classList.add('sys-panel-loading');
|
||||||
|
|
||||||
|
fetch(fragUrl.toString(), { credentials: 'same-origin' })
|
||||||
|
.then(function (r) {
|
||||||
|
if (!r.ok) throw new Error('HTTP ' + r.status);
|
||||||
|
return r.text();
|
||||||
|
})
|
||||||
|
.then(function (html) {
|
||||||
|
panel.innerHTML = html;
|
||||||
|
panel.dataset.tab = tab;
|
||||||
|
panel.dataset.n = n;
|
||||||
|
currentTab = tab;
|
||||||
|
currentN = n;
|
||||||
|
panel.classList.remove('sys-panel-loading');
|
||||||
|
|
||||||
|
// Update active tab indicators
|
||||||
|
tabNav.querySelectorAll('.sys-tab').forEach(function (a) {
|
||||||
|
var isActive = a.dataset.tab === tab;
|
||||||
|
a.classList.toggle('active', isActive);
|
||||||
|
if (isActive) {
|
||||||
|
a.setAttribute('aria-current', 'page');
|
||||||
|
} else {
|
||||||
|
a.removeAttribute('aria-current');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Re-bind inner controls (lines-select, copy btn)
|
||||||
|
bindPanelControls();
|
||||||
|
|
||||||
|
// Update browser URL without reloading
|
||||||
|
if (pushState) {
|
||||||
|
url.searchParams.set('tab', tab);
|
||||||
|
url.searchParams.set('n', n);
|
||||||
|
history.pushState({ tab: tab, n: n }, '', url.toString());
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(function () {
|
||||||
|
// Graceful degradation: fall back to full page load
|
||||||
|
panel.classList.remove('sys-panel-loading');
|
||||||
|
url.searchParams.set('tab', tab);
|
||||||
|
url.searchParams.set('n', n);
|
||||||
window.location.href = url.toString();
|
window.location.href = url.toString();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── Copy-to-clipboard ─────────────────────────────────────────────
|
// Wire tab links
|
||||||
var copyBtn = document.getElementById('log-copy-btn');
|
tabNav.querySelectorAll('.sys-tab').forEach(function (a) {
|
||||||
var logOut = document.getElementById('log-output');
|
a.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var tab = a.dataset.tab;
|
||||||
|
if (tab && tab !== currentTab) {
|
||||||
|
loadPanel(tab, currentN, true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle browser back/forward
|
||||||
|
window.addEventListener('popstate', function (e) {
|
||||||
|
if (e.state && e.state.tab) {
|
||||||
|
loadPanel(e.state.tab, e.state.n || 100, false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function bindPanelControls() {
|
||||||
|
// Lines-select
|
||||||
|
var sel = panel.querySelector('#lines-select');
|
||||||
|
if (sel) {
|
||||||
|
sel.addEventListener('change', function () {
|
||||||
|
loadPanel(currentTab, parseInt(this.value, 10), true);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// Copy button
|
||||||
|
var copyBtn = panel.querySelector('#log-copy-btn');
|
||||||
|
var logOut = panel.querySelector('#log-output');
|
||||||
if (copyBtn && logOut) {
|
if (copyBtn && logOut) {
|
||||||
copyBtn.addEventListener('click', function () {
|
copyBtn.addEventListener('click', function () {
|
||||||
// Collect text from all .log-line spans (strip the gutter number
|
var text = Array.from(logOut.querySelectorAll('.log-line'))
|
||||||
// rendered via CSS ::before — it's not in the DOM text content).
|
|
||||||
var lines = Array.from(logOut.querySelectorAll('.log-line'))
|
|
||||||
.map(function (el) { return el.textContent; })
|
.map(function (el) { return el.textContent; })
|
||||||
.join('\n');
|
.join('\n');
|
||||||
|
|
||||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||||
navigator.clipboard.writeText(lines).then(function () {
|
navigator.clipboard.writeText(text).then(function () {
|
||||||
copyBtn.textContent = '✓ Copié';
|
copyBtn.textContent = '✓ Copié';
|
||||||
copyBtn.classList.add('copied');
|
copyBtn.classList.add('copied');
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
copyBtn.textContent = 'Copier';
|
copyBtn.textContent = 'Copier';
|
||||||
copyBtn.classList.remove('copied');
|
copyBtn.classList.remove('copied');
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}).catch(function () {
|
}).catch(function () { fallbackCopy(text); });
|
||||||
fallbackCopy(lines);
|
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
fallbackCopy(lines);
|
fallbackCopy(text);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bind controls already present on first load
|
||||||
|
bindPanelControls();
|
||||||
|
|
||||||
function fallbackCopy(text) {
|
function fallbackCopy(text) {
|
||||||
var ta = document.createElement('textarea');
|
var ta = document.createElement('textarea');
|
||||||
@@ -430,6 +505,7 @@ $extraJsInline = <<<'JS'
|
|||||||
try { document.execCommand('copy'); } catch (e) {}
|
try { document.execCommand('copy'); } catch (e) {}
|
||||||
document.body.removeChild(ta);
|
document.body.removeChild(ta);
|
||||||
}
|
}
|
||||||
|
|
||||||
})();
|
})();
|
||||||
JS;
|
JS;
|
||||||
require_once APP_ROOT . '/templates/head.php';
|
require_once APP_ROOT . '/templates/head.php';
|
||||||
@@ -516,15 +592,22 @@ require_once APP_ROOT . '/templates/head.php';
|
|||||||
<?php foreach (LOG_FILES as $key => $def): ?>
|
<?php foreach (LOG_FILES as $key => $def): ?>
|
||||||
<a href="?tab=<?= htmlspecialchars($key) ?>&n=<?= $selectedN ?>"
|
<a href="?tab=<?= htmlspecialchars($key) ?>&n=<?= $selectedN ?>"
|
||||||
class="sys-tab <?= $activeTab === $key ? 'active' : '' ?>"
|
class="sys-tab <?= $activeTab === $key ? 'active' : '' ?>"
|
||||||
|
data-tab="<?= htmlspecialchars($key) ?>"
|
||||||
<?= $activeTab === $key ? 'aria-current="page"' : '' ?>>
|
<?= $activeTab === $key ? 'aria-current="page"' : '' ?>>
|
||||||
<?= htmlspecialchars($def['label']) ?>
|
<?= htmlspecialchars($def['label']) ?>
|
||||||
</a>
|
</a>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
<a href="?tab=nginx_config"
|
<a href="?tab=nginx_config"
|
||||||
class="sys-tab <?= $activeTab === 'nginx_config' ? 'active' : '' ?>"
|
class="sys-tab <?= $activeTab === 'nginx_config' ? 'active' : '' ?>"
|
||||||
|
data-tab="nginx_config"
|
||||||
<?= $activeTab === 'nginx_config' ? 'aria-current="page"' : '' ?>>nginx — config</a>
|
<?= $activeTab === 'nginx_config' ? 'aria-current="page"' : '' ?>>nginx — config</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<!-- Tab panel — content swapped by fetch(); data-* attrs drive JS state -->
|
||||||
|
<div id="sys-tab-panel"
|
||||||
|
data-tab="<?= htmlspecialchars($activeTab) ?>"
|
||||||
|
data-n="<?= $selectedN ?>">
|
||||||
|
|
||||||
<?php if ($activeTab === 'nginx_config'): ?>
|
<?php if ($activeTab === 'nginx_config'): ?>
|
||||||
<!-- ════════════════════════════════════════════════════════════════════
|
<!-- ════════════════════════════════════════════════════════════════════
|
||||||
NGINX CONFIG PANEL
|
NGINX CONFIG PANEL
|
||||||
@@ -640,6 +723,8 @@ require_once APP_ROOT . '/templates/head.php';
|
|||||||
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
|
</div><!-- #sys-tab-panel -->
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -170,6 +170,36 @@
|
|||||||
margin-top: .25rem;
|
margin-top: .25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Tab panel loading state ──────────────────────────────────────────────── */
|
||||||
|
#sys-tab-panel {
|
||||||
|
min-height: 8rem; /* prevent layout jump while fetching */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#sys-tab-panel.sys-panel-loading {
|
||||||
|
opacity: 0.4;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.1s;
|
||||||
|
}
|
||||||
|
#sys-tab-panel.sys-panel-loading::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
-45deg,
|
||||||
|
transparent,
|
||||||
|
transparent 6px,
|
||||||
|
rgba(255,255,255,.03) 6px,
|
||||||
|
rgba(255,255,255,.03) 12px
|
||||||
|
);
|
||||||
|
border-radius: 4px;
|
||||||
|
animation: sys-panel-shimmer 1s linear infinite;
|
||||||
|
background-size: 200% 200%;
|
||||||
|
}
|
||||||
|
@keyframes sys-panel-shimmer {
|
||||||
|
0% { background-position: 0 0; }
|
||||||
|
100% { background-position: 100% 100%; }
|
||||||
|
}
|
||||||
|
|
||||||
/* ── Log viewer ────────────────────────────────────────────────────────── */
|
/* ── Log viewer ────────────────────────────────────────────────────────── */
|
||||||
.log-toolbar {
|
.log-toolbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -30,4 +30,4 @@ The admin system page (`/admin/system.php`) runs expensive operations on every l
|
|||||||
|
|
||||||
- Log caching deliberately omitted: `tail` output is inherently real-time and caching even 30s would show stale data during the moments it matters most (deploys, errors). The existing tab guard already ensures only the active log file is read.
|
- Log caching deliberately omitted: `tail` output is inherently real-time and caching even 30s would show stale data during the moments it matters most (deploys, errors). The existing tab guard already ensures only the active log file is read.
|
||||||
- nginx config could be cached but `file()` on a small static config file is negligible; not worth the added complexity.
|
- nginx config could be cached but `file()` on a small static config file is negligible; not worth the added complexity.
|
||||||
- A future improvement could stream log tabs via `fetch()` to avoid full-page reloads on tab switch.
|
- [x] Log tab switching and line-count changes now use `fetch()` via `system-fragment.php`; no full page reload on tab switch.
|
||||||
|
|||||||
Reference in New Issue
Block a user