/stats)
-// - Memory-limit gauge if a limit is set; otherwise text "unlimited"
-// - CPU quota / shares summary
-// - Health-check state + last log entries (if a healthcheck is configured)
-// - Image, image digest (short), created/started timestamps
-// - Networks (name, IP, MAC, gateway) and published ports
-// - Mounts (volumes + binds), with type/mode badges
-// - Recent log tail (collapsible, last 200 lines, refresh button)
-//
-// One backend hit at mount: GET /api/system/containers (list). Per-card
-// detail (limits, mounts, networks) comes from GET /api/system/containers/:id.
-// Live numbers come from GET /api/system/containers/:id/stats every 2s.
-// Stats endpoint is cached server-side, so multiple tabs share the cost.
-
-class SystemAppPage {
- constructor(rootId = 'config-section') {
- this.rootId = rootId;
- this.appName = null;
- this.members = []; // [{ id, name, ... }] from /containers
- this.details = new Map(); // id -> /containers/:id detail
- this.stats = new Map(); // id -> latest /containers/:id/stats sample
- this._timer = null;
- this._onClick = this._onClick.bind(this);
- }
-
- root() { return document.getElementById(this.rootId); }
-
- async mount(name) {
- this.appName = name;
- await this._loadList();
- this._renderShell();
- // Kick off detail + stats fetches for each member in parallel.
- await Promise.all(this.members.map(m => this._loadDetail(m.id)));
- await Promise.all(this.members.map(m => this._loadStats(m.id)));
- this._renderCards();
- this._bind();
- // Poll live stats every 2s. Containers refresh list every 15s.
- this._timer = setInterval(() => {
- if (!document.querySelector('.sys-app-page')) {
- clearInterval(this._timer); this._timer = null;
- return;
- }
- this._tickStats();
- }, 2000);
- this._slowTimer = setInterval(() => {
- if (!document.querySelector('.sys-app-page')) {
- clearInterval(this._slowTimer); this._slowTimer = null;
- return;
- }
- this._loadList().then(() => this._renderHeader());
- }, 15000);
- }
-
- dispose() {
- if (this._timer) { clearInterval(this._timer); this._timer = null; }
- if (this._slowTimer) { clearInterval(this._slowTimer); this._slowTimer = null; }
- const r = this.root();
- if (r) r.removeEventListener('click', this._onClick);
- }
-
- async _loadList() {
- try {
- const r = await fetch('/api/system/containers');
- const j = await r.json().catch(() => ({}));
- const apps = Array.isArray(j?.apps) ? j.apps : [];
- const me = apps.find(a => a.app === this.appName);
- this.members = me && Array.isArray(me.members) ? me.members : [];
- } catch (_) {
- this.members = [];
- }
- }
-
- async _loadDetail(id) {
- try {
- const r = await fetch(`/api/system/containers/${encodeURIComponent(id)}`);
- if (!r.ok) return;
- const d = await r.json();
- this.details.set(id, d);
- } catch (_) { /* leave missing */ }
- }
-
- async _loadStats(id) {
- try {
- const r = await fetch(`/api/system/containers/${encodeURIComponent(id)}/stats`);
- if (!r.ok) return;
- this.stats.set(id, await r.json());
- } catch (_) { /* leave missing */ }
- }
-
- async _tickStats() {
- // Only stat running containers — stats for stopped containers return
- // zeros and waste a daemon roundtrip.
- const running = this.members.filter(m => m.state === 'running').map(m => m.id);
- await Promise.all(running.map(id => this._loadStats(id)));
- for (const id of running) this._renderLive(id);
- }
-
- _bind() {
- const r = this.root();
- if (r) r.addEventListener('click', this._onClick);
- }
-
- _onClick(e) {
- const lt = e.target.closest('[data-logs-toggle]');
- if (lt) {
- const id = lt.dataset.logsToggle;
- const body = this.root().querySelector(`[data-logs-body="${id}"]`);
- if (body) {
- const open = !body.hidden;
- body.hidden = open;
- lt.textContent = open ? 'Show logs' : 'Hide logs';
- if (!open && !body.dataset.loaded) {
- this._loadLogs(id, body);
- }
- }
- return;
- }
- const lr = e.target.closest('[data-logs-refresh]');
- if (lr) {
- const id = lr.dataset.logsRefresh;
- const body = this.root().querySelector(`[data-logs-body="${id}"]`);
- if (body) { body.dataset.loaded = ''; this._loadLogs(id, body); }
- return;
- }
- const back = e.target.closest('[data-back]');
- if (back && window.navigateToRoute) {
- window.navigateToRoute('/admin/config/system');
- }
- }
-
- async _loadLogs(id, bodyEl) {
- bodyEl.innerHTML = 'Loading…
';
- try {
- const r = await fetch(`/api/system/containers/${encodeURIComponent(id)}/logs?tail=200`);
- const text = await r.text();
- bodyEl.dataset.loaded = '1';
- // Render as a pre-block; strip ANSI just in case (rare in our
- // containers but cheap to do).
- const clean = text.replace(/\x1b\[[0-9;]*[A-Za-z]/g, '');
- bodyEl.innerHTML = `${(window.SystemFmt?.escape || ((s)=>s))(clean) || 'empty'}`;
- const pre = bodyEl.querySelector('pre');
- if (pre) pre.scrollTop = pre.scrollHeight;
- } catch (err) {
- bodyEl.innerHTML = `Failed to load logs: ${(err && err.message) || err}
`;
- }
- }
-
- _renderShell() {
- const r = this.root();
- if (!r) return;
- const fmt = window.SystemFmt;
- const totalRunning = this.members.filter(m => m.state === 'running').length;
- const header = `
- `;
- if (!this.members.length) {
- r.innerHTML = `
-
- ${header}
-
- No containers found for "${fmt.escape(this.appName)}".
- It may not be installed, or its compose project label differs from the app name.
-
-
- ${header}
-
- ${this.members.map(m => this._cardSkeleton(m)).join('')}
-
-
-
-
- ${fmt.escape(member.state || 'unknown')}
- ${service}
-
-
${fmt.escape(member.name)}
-
- ${fmt.escape(member.image || '—')}
- ·
- ${fmt.escape(member.short || '')}
-
-
${fmt.escape(member.status || '')}
-
-
-
-
CPU—
-
Memory—
-
↓ rx—
-
↑ tx—
-
Block r/w—
-
PIDs—
-
-
Loading container detail…
-
Couldn't load container detail.
`;
- return;
- }
- const fmt = window.SystemFmt;
- const lim = d.limits || {};
- const memLimit = lim.memory;
- const cpuLimit = lim.nano_cpus
- ? `${(lim.nano_cpus / 1e9).toFixed(2)} CPU${(lim.nano_cpus / 1e9) === 1 ? '' : 's'}`
- : (lim.cpu_quota && lim.cpu_period
- ? `${(lim.cpu_quota / lim.cpu_period).toFixed(2)} CPU equiv`
- : 'unlimited');
- const limitsRow = `
-
-
- Memory limit
- ${memLimit ? fmt.bytes(memLimit) : 'unlimited'}
-
-
- CPU limit
- ${fmt.escape(cpuLimit)}
-
-
- PIDs limit
- ${lim.pids ? lim.pids : 'unlimited'}
-
-
- Restart policy
- ${fmt.escape(lim.restart_policy || 'no')}${lim.restart_max ? ` (max ${lim.restart_max})` : ''}
-
-
- Restart count
- ${d.state?.restart_count ?? 0}
-
-
- Started
- ${d.state?.started_at ? fmt.timeAgoIso(d.state.started_at) : '—'}
-
-
-
Healthcheck
-
- ${fmt.escape(d.state.health.status || 'unknown')}
- ${d.state.health.failing_streak ? `${d.state.health.failing_streak} failing in a row` : ''}
-
- ${(d.state.health.log || []).slice(-3).reverse().map(l =>
- `
${fmt.escape(l.end || l.start || '')} · exit ${l.exit_code ?? '?'}
${fmt.escape(l.output || '')}`
- ).join('')}
-
-
Networks
-
- | Name | IP | Gateway | MAC |
|---|
- ${d.networks.map(n => `
- | ${fmt.escape(n.name)} | ${fmt.escape(n.ip || '—')} | ${fmt.escape(n.gateway || '—')} | ${fmt.escape(n.mac || '—')} |
- `).join('')}
-
-
-
Published ports
-
${(d.ports || []).filter(p => p.host).map(p =>
- `- ${p.host} → ${p.container}/${fmt.escape(p.proto || '')}
`
- ).join('')}
-
-
Mounts
-
- | Type | Source | Target | Mode |
|---|
- ${d.mounts.map(m => `
- | ${fmt.escape(m.type || '')} |
- ${fmt.escape(m.source || '')} |
- ${fmt.escape(m.target || '')} |
- ${fmt.escape(m.mode || '')}${m.rw === false ? ' (ro)' : ''} |
- `).join('')}
-
-
+
Image${escapeHtml(d.image || '—')}
+
Container ID${escapeHtml(d.short || '')}
+
Started${d.state?.started_at ? escapeHtml(fmt.timeAgoIso(d.state.started_at)) : '—'}
+
Restart count${d.state?.restart_count ?? 0}
+
Memory limit${memLimit ? escapeHtml(fmt.bytes(memLimit)) : 'unlimited'}
+
CPU limit${escapeHtml(cpuLimit)}
+
PIDs limit${lim.pids ? lim.pids : 'unlimited'}
+
Restart policy${escapeHtml(lim.restart_policy || 'no')}${lim.restart_max ? ` (max ${lim.restart_max})` : ''}
+
+
Healthcheck
+
+ ${escapeHtml(d.state.health.status || 'unknown')}
+ ${d.state.health.failing_streak ? `${d.state.health.failing_streak} failing in a row` : ''}
+
+ ${(d.state.health.log || []).slice(-3).reverse().map(l =>
+ `
${escapeHtml(l.end || l.start || '')} · exit ${l.exit_code ?? '?'}
${escapeHtml(l.output || '')}`
+ ).join('')}
+
+
Networks
+
+ | Name | IP | Gateway | MAC |
|---|
+ ${d.networks.map(n => `
+ | ${escapeHtml(n.name)} | ${escapeHtml(n.ip || '—')} | ${escapeHtml(n.gateway || '—')} | ${escapeHtml(n.mac || '—')} |
+ `).join('')}
+
+
+
Mounts
+
+ | Type | Source | Target | Mode |
|---|
+ ${d.mounts.map(m => `
+
+ | ${escapeHtml(m.type || '')} |
+ ${escapeHtml(m.source || '')} |
+ ${escapeHtml(m.target || '')} |
+ ${escapeHtml(m.mode || '')}${m.rw === false ? ' (ro)' : ''} |
+
`).join('')}
+
+
${limitsRow}${health}${nets}${mounts}
`;
+ }
+
+ _paintLiveChips(serviceName, info) {
+ const item = document.querySelector(`.service-item[data-service="${cssEscape(serviceName)}"]`);
+ if (!item) return;
+ const stats = info?.stats;
+ const detail = info?.detail;
+ const memLimit = detail?.limits?.memory || 0;
+ const fmt = window.SystemFmt;
+ const cpuEl = item.querySelector('[data-svc-live="cpu"]');
+ const memEl = item.querySelector('[data-svc-live="mem"]');
+ if (cpuEl) cpuEl.textContent = stats ? `${(stats.cpu_percent ?? 0).toFixed(1)}% CPU` : '—';
+ if (memEl && fmt) {
+ const used = stats?.memory?.used ?? 0;
+ const pct = memLimit > 0 ? (used / memLimit) * 100 : (stats?.memory?.percent ?? 0);
+ const txt = memLimit > 0
+ ? `${fmt.bytes(used)} (${pct.toFixed(0)}% of ${fmt.bytes(memLimit)})`
+ : fmt.bytes(used);
+ memEl.textContent = stats ? txt : '—';
+ memEl.classList.toggle('warn', memLimit > 0 && pct >= 80);
+ memEl.classList.toggle('danger', memLimit > 0 && pct >= 95);
+ }
+ }
+
// ------------------------------------------------------------------
// Rendering
// ------------------------------------------------------------------
@@ -239,6 +391,28 @@ class ServicesManager {
? `
`
: '';
+ // Live stat chips — populated inline if /api/system/containers already
+ // returned for this service, otherwise rendered as placeholders that
+ // the periodic stats refresh fills in.
+ const info = this.containerInfo.get(svc.serviceName) || {};
+ const stats = info.stats;
+ const detail = info.detail;
+ const memLimit = detail?.limits?.memory || 0;
+ const fmt = window.SystemFmt;
+ const cpuTxt = stats ? `${(stats.cpu_percent ?? 0).toFixed(1)}% CPU` : '—';
+ const memUsed = stats?.memory?.used ?? 0;
+ const memPct = memLimit > 0 ? (memUsed / memLimit) * 100 : (stats?.memory?.percent ?? 0);
+ const memTxt = stats && fmt
+ ? (memLimit > 0
+ ? `${fmt.bytes(memUsed)} (${memPct.toFixed(0)}% of ${fmt.bytes(memLimit)})`
+ : fmt.bytes(memUsed))
+ : '—';
+ const memCls = memLimit > 0 && memPct >= 95 ? ' danger' : (memLimit > 0 && memPct >= 80 ? ' warn' : '');
+ const liveChips = state === 'running'
+ ? `${escapeHtml(cpuTxt)}
+ ${escapeHtml(memTxt)}`
+ : '';
+
return `
@@ -274,6 +449,7 @@ class ServicesManager {
State: ${escapeHtml(state)}
Status: ${escapeHtml(svc.statusText)}
@@ -450,7 +626,11 @@ class ServicesManager {
_startRefreshLoop() {
this._stopRefreshLoop();
+ // Status (state + statusText) is cheap; refresh every 10s. Live stats
+ // tick faster (5s) so the chips feel alive but still let the server
+ // cache (1.5s) absorb concurrent tabs.
this.refreshTimer = setInterval(() => this._refreshStatusOnly(), 10_000);
+ this.statsTimer = setInterval(() => this._refreshStatsOnly(), 5_000);
}
_stopRefreshLoop() {
@@ -458,6 +638,10 @@ class ServicesManager {
clearInterval(this.refreshTimer);
this.refreshTimer = null;
}
+ if (this.statsTimer) {
+ clearInterval(this.statsTimer);
+ this.statsTimer = null;
+ }
}
async _refreshStatusOnly() {
diff --git a/containers/libreportal/frontend/js/components/config/config-manager.js b/containers/libreportal/frontend/js/components/config/config-manager.js
index 2a528d4..7d0cd8d 100755
--- a/containers/libreportal/frontend/js/components/config/config-manager.js
+++ b/containers/libreportal/frontend/js/components/config/config-manager.js
@@ -103,7 +103,6 @@ if (typeof window.ConfigManager === 'undefined') {
lazyLoad('/js/components/admin/charts.js'),
lazyLoad('/js/components/admin/admin-system.js'),
lazyLoad('/js/components/admin/system-metric-page.js'),
- lazyLoad('/js/components/admin/system-app-page.js'),
lazyLoad('/js/components/admin/system-storage-page.js')
]);
if (typeof AdminSystem !== 'undefined') {