From 00f990f8b0d440633b81f724604e9add70f5fd3c Mon Sep 17 00:00:00 2001 From: marvin Date: Fri, 18 Sep 2026 18:17:51 -0400 Subject: [PATCH] Side-by-side Integrations tiles, fix Sync button placement, track remaining job last-run times (v0.16.8) --- README.md | 2 +- ROADMAP.md | 2 ++ package.json | 2 +- src/public/features.js | 34 +++++++++++++++++++++------------- src/public/index.html | 4 ++-- src/public/styles.css | 6 ++---- src/server.js | 14 ++++++++------ 7 files changed, 37 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index b047a44..c23965f 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Docker Architectures Caddy - Version + Version

Why Site Gateway · diff --git a/ROADMAP.md b/ROADMAP.md index 2014e23..31d1658 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -142,3 +142,5 @@ Roughly in priority order: `v0.16.6` fixes the real cause of the System tab's Scheduled jobs section always showing "No scheduled jobs reported.": the dashboard API nests job data under `dashboard.system.jobs`, but the System tab was reading `dashboard.jobs` — one level too shallow, so it was always undefined regardless of what the server returned. Also fixes the Docker socket status tile rendering wider than the `BACKUP_PASSWORD` tile above it — it wasn't wrapped in the same `.health-grid` container, so it spanned the full panel width instead of matching the two-column tile layout used everywhere else on the System tab. `v0.16.7` fixes the real cause of the System tab visibly blinking in and out on every page reload: unlike every other Administration tab (Users, Groups, Gateway defaults, Audit log, Backup & restore, Logs & Retention, Danger Zone — all static HTML present from the first paint), System and API Access were built entirely by JavaScript after the initial data fetch completed, so there was a real window on every reload where every other tab was already visible and these two genuinely were not there yet. Confirmed via a screenshot taken mid-reload showing exactly that. Fix: gave System and API Access the same static tab-button-and-panel shell every other tab already has, so they're present immediately; their content still fills in a moment later via JavaScript, same as every other tab already does. Also reworked the Scheduled Jobs section to match the Storage section's card styling (health-tile grid instead of a plain list) and added last-run timestamps where the server tracks them (scheduled backups, log pruning, public IP checks, configuration drift checks). + +`v0.16.8` reworks the System tab's Integrations section: the `BACKUP_PASSWORD` and Docker socket status tiles now share a single two-column grid and sit side by side, instead of each occupying its own separate grid and leaving an empty column next to it. Dropped the redundant "Docker container selection" heading text since the tile's own "Docker socket" label already says the same thing. Moved the Sync section's "Resync now" button out of the panel heading row and into its own row below the status text, matching the layout every other actioned section (like Reload & Restart) already uses, instead of crowding the button into the title row. Also added real last-run tracking for the two jobs that previously always showed "No run recorded yet": Upstream checks and Access-log import now record a timestamp every time their interval actually runs. diff --git a/package.json b/package.json index 5492f29..8baed02 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "site-gateway", - "version": "0.16.7", + "version": "0.16.8", "private": true, "description": "Site Gateway: simple self-hosted website publishing, reverse proxying, and automatic HTTPS.", "type": "module", diff --git a/src/public/features.js b/src/public/features.js index 61fc3b1..37ee795 100644 --- a/src/public/features.js +++ b/src/public/features.js @@ -446,16 +446,24 @@ async function renderBackupHistory() { // saved value, so the integration can never be switched on without its prerequisite. function renderDockerPanel() { if (state.user?.role !== "administrator") return; - const panel = document.querySelector('[data-admin-panel="system"] .system-integrations'); if (!panel) return; + const scope = document.querySelector('[data-admin-panel="system"]'); if (!scope) return; + const envStatus = scope.querySelector("#system-env-status"), integrations = scope.querySelector(".system-integrations"); + if (!envStatus || !integrations) return; const socketMounted = state.config?.docker?.socketMounted === true; const enabled = socketMounted && (state.settings?.dockerIntegration?.enabled === true || state.config?.docker?.enabled === true); - let section = panel.querySelector(".docker-integration-section"); - if (!section) { - section = document.createElement("div"); - section.className = "docker-integration-section"; - section.innerHTML = '

Docker container selection

Docker socket
'; - panel.append(section); - section.querySelector("#docker-integration-toggle").addEventListener("change", async event => { + let tile = envStatus.querySelector("#docker-integration-status"); + if (!tile) { + tile = document.createElement("div"); + tile.className = "health-tile"; + tile.id = "docker-integration-status"; + tile.innerHTML = 'Docker socket'; + envStatus.append(tile); + } + let control = integrations.querySelector(".check-control"); + if (!control) { + integrations.innerHTML = ''; + control = integrations.querySelector(".check-control"); + control.querySelector("#docker-integration-toggle").addEventListener("change", async event => { const checkbox = event.currentTarget; checkbox.disabled = true; try { state.settings = await api("/api/settings", { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ dockerIntegration: { enabled: checkbox.checked } }) }); toast(checkbox.checked ? "Container selection enabled." : "Container selection disabled."); } @@ -463,14 +471,14 @@ function renderDockerPanel() { finally { checkbox.disabled = false; renderDockerPanel(); decorateContainerPickers(); } }); } - const toggle = section.querySelector("#docker-integration-toggle"); + const toggle = integrations.querySelector("#docker-integration-toggle"); toggle.checked = enabled; toggle.disabled = !socketMounted; - section.querySelector("#docker-integration-status .status-dot").className = `status-dot ${socketMounted ? "running" : "idle"}`; - section.querySelector("#docker-integration-help").textContent = socketMounted + tile.querySelector(".status-dot").className = `status-dot ${socketMounted ? "running" : "idle"}`; + tile.querySelector("#docker-integration-help").textContent = socketMounted ? "Site Gateway reads the Docker socket read-only to list running containers, and only offers containers that share a Docker network with it." : "Docker socket not detected — mount /var/run/docker.sock into this container to enable container selection."; - section.querySelector(".check-control").classList.toggle("is-disabled", !socketMounted); + control.classList.toggle("is-disabled", !socketMounted); } // Adds the "Pick from running containers" button beside every target field, and keeps its // visibility in step with the integration's current state. @@ -540,7 +548,7 @@ function renderSystemPanel() { '

System

What\u2019s configured, what\u2019s running, and what this deployment can do. Nothing here is customizable except the Docker toggle below and the action buttons \u2014 everything else is status.

', '

Environment

Integrations

', '

Environment

Security status

', - '

Gateway

Sync

', + '

Gateway

Sync

', '

Operations

Scheduled jobs

', '

Storage

Disk usage

', '

Build

Version

', diff --git a/src/public/index.html b/src/public/index.html index d8056fc..90d619e 100644 --- a/src/public/index.html +++ b/src/public/index.html @@ -8,7 +8,7 @@ Site Gateway - + - + diff --git a/src/public/styles.css b/src/public/styles.css index 4884a9e..e726153 100644 --- a/src/public/styles.css +++ b/src/public/styles.css @@ -773,10 +773,8 @@ label.check-control:has(input[name="upstreamTlsInsecure"]){position:relative;hei label.check-control:has(input[name="upstreamTlsInsecure"]) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} label.check-control:has(input[name="upstreamTlsInsecure"]) small{position:absolute;left:0;top:calc(100% + 7px);width:100%;padding:0!important;white-space:normal} -.docker-integration-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} -.docker-integration-heading{font-weight:600;margin:0 0 var(--space-2)} -.docker-integration-section .health-tile{margin-bottom:var(--space-3)} -.docker-integration-section .check-control{margin-top:var(--space-3)} +.system-integrations:not(:empty){margin-top:var(--space-3)} +.system-integrations .check-control{margin:0} #system-restart-status{margin-top:var(--space-3)} /* Custom-drawn select (Task #20): native