From eae7116cba16ac430c0626454c7b72ce9f748bfa Mon Sep 17 00:00:00 2001 From: Joachim Wiberg Date: Mon, 15 Jun 2026 10:44:29 +0200 Subject: [PATCH] webui: final touches - Add missing Configure -> shortcuts - For shortcuts into YANG tree, expand and mark the tree node - Revamp the /mdns status page to mimic /ntp => more vertical space Signed-off-by: Joachim Wiberg --- src/webui/static/css/style.css | 8 ++ src/webui/static/js/app.js | 83 ++++++++++++++ src/webui/templates/pages/containers.html | 16 ++- src/webui/templates/pages/firewall.html | 8 +- src/webui/templates/pages/interfaces.html | 16 ++- src/webui/templates/pages/mdns.html | 127 ++++++++++------------ src/webui/templates/pages/ntp.html | 12 +- src/webui/templates/pages/vpn.html | 13 ++- src/webui/templates/pages/wifi.html | 5 + src/webui/templates/pages/yang-tree.html | 2 +- 10 files changed, 212 insertions(+), 78 deletions(-) diff --git a/src/webui/static/css/style.css b/src/webui/static/css/style.css index 6fdbe6f5..37e24315 100644 --- a/src/webui/static/css/style.css +++ b/src/webui/static/css/style.css @@ -3020,6 +3020,14 @@ details.cfg-fold[open] > summary::before { transform: rotate(90deg); } background: var(--border-subtle); color: var(--primary); } +/* Currently-selected node: set on click and when arriving via a status-page + "Configure →" deep link, so the left tree shows where the right pane is. */ +.yt-label.yt-active { + background: var(--border-subtle); + color: var(--primary); + font-weight: 600; + box-shadow: inset 2px 0 0 var(--primary); +} /* Chevron rotates on open */ .yt-chevron { diff --git a/src/webui/static/js/app.js b/src/webui/static/js/app.js index 19d9425e..9b5a946a 100644 --- a/src/webui/static/js/app.js +++ b/src/webui/static/js/app.js @@ -1878,6 +1878,89 @@ function openModal(message, onConfirm) { }, true); })(); +// ─── YANG tree: selected-node highlight + deep-link reveal ────────────────── +// Two related orientation fixes for the tree editor: +// 1. Clicking a node loads it in the right pane but left no cue of where you +// are — mark the clicked summary .yt-active. +// 2. A status-page "Configure →" deep link (/configure/tree?path=…) only +// filled the right pane, leaving the left tree collapsed and the user +// disoriented. Walk the ancestor chain, opening each
in turn — +// children load lazily over htmx on toggle, so wait for each level's swap +// before descending — then highlight and scroll the target into view. +(function() { + function setActive(summary) { + document.querySelectorAll('.yt-label.yt-active').forEach(function (s) { + if (s !== summary) s.classList.remove('yt-active'); + }); + if (summary) summary.classList.add('yt-active'); + } + + document.addEventListener('click', function (e) { + var summary = e.target.closest && e.target.closest('summary[data-yang-path]'); + if (summary) setActive(summary); + }); + + // Load a node's children into its .yt-children with a direct htmx.ajax + // request, resolving with the children
    . We deliberately do NOT route + // through the node's lazy "toggle once" trigger: the toggle event from a + // programmatic .open is async and, on a freshly htmx-swapped tree, did not + // reliably reach htmx — the node opened but its body stayed empty until a + // manual reload. htmx.ajax sidesteps all of that. + function loadChildren(details) { + var childUl = details.querySelector(':scope > .yt-children'); + if (!childUl || childUl.children.length) return Promise.resolve(childUl); + var url = details.getAttribute('hx-get'); + if (!url || !window.htmx || !window.htmx.ajax) return Promise.resolve(childUl); + return window.htmx.ajax('GET', url, { target: childUl, swap: 'innerHTML' }) + .then(function () { return childUl; }); + } + + function step(ul, target) { + var best = null; + ul.querySelectorAll(':scope > li > details.yt-node > summary[data-yang-path]').forEach(function (s) { + var p = s.getAttribute('data-yang-path'); + if (p === target || target.indexOf(p + '/') === 0) { + if (!best || p.length > best.getAttribute('data-yang-path').length) best = s; + } + }); + if (!best) return; + + var details = best.parentElement; + var isTarget = best.getAttribute('data-yang-path') === target; + details.open = true; // chevron + reveal the children area + + if (isTarget) { + // Highlight and scroll right away — neither depends on the child load — + // then pull in the target's own children so its subtree shows. + setActive(best); + best.scrollIntoView({ block: 'center' }); + loadChildren(details); + return; + } + // Ancestor: load its children, then descend toward the target. + loadChildren(details).then(function (childUl) { + if (childUl) step(childUl, target); + }); + } + + function initReveal() { + var tree = document.querySelector('.yang-tree[data-initial-path]'); + if (!tree) return; + var target = tree.getAttribute('data-initial-path'); + tree.removeAttribute('data-initial-path'); // process once + var rootChildren = tree.querySelector('.yt-children'); + if (!target || !rootChildren) return; + // Defer a tick: on an htmx navigation the tree was just swapped in and htmx + // is still settling, so a child load triggered now is dropped (the node + // then highlights only after a manual reload). On a full reload it's + // already settled, so the tick is harmless. + setTimeout(function () { step(rootChildren, target); }, 0); + } + + document.addEventListener('DOMContentLoaded', initReveal); + document.addEventListener('htmx:afterSwap', initReveal); +})(); + // ─── ⓘ field-info tooltip (position:fixed to escape overflow clipping) ─────── (function() { var tip = null; diff --git a/src/webui/templates/pages/containers.html b/src/webui/templates/pages/containers.html index d7a3496a..df6abe27 100644 --- a/src/webui/templates/pages/containers.html +++ b/src/webui/templates/pages/containers.html @@ -5,7 +5,13 @@ {{if .Containers}}
    -
    Containers
    +
    Containers + Configure → +
    @@ -45,7 +51,13 @@ {{else if not .Error}}
    -
    Containers
    +
    Containers + Configure → +

    No containers configured.

    {{end}} diff --git a/src/webui/templates/pages/firewall.html b/src/webui/templates/pages/firewall.html index 701ffee5..41701d20 100644 --- a/src/webui/templates/pages/firewall.html +++ b/src/webui/templates/pages/firewall.html @@ -10,7 +10,13 @@
    -
    Firewall Status
    +
    Firewall Status + Configure → +
    diff --git a/src/webui/templates/pages/interfaces.html b/src/webui/templates/pages/interfaces.html index 7892771e..a64789a5 100644 --- a/src/webui/templates/pages/interfaces.html +++ b/src/webui/templates/pages/interfaces.html @@ -9,7 +9,13 @@ {{if .Interfaces}}
    -
    Interfaces
    +
    Interfaces + Configure → +
    Firewall
    @@ -43,7 +49,13 @@ {{else if not .Error}}
    -
    Interfaces
    +
    Interfaces + Configure → +

    No interfaces found.

    {{end}} diff --git a/src/webui/templates/pages/mdns.html b/src/webui/templates/pages/mdns.html index c4a5d124..64770fff 100644 --- a/src/webui/templates/pages/mdns.html +++ b/src/webui/templates/pages/mdns.html @@ -7,77 +7,68 @@
    {{.Error}}
    {{end}} -
    +
    +
    mDNS + Configure → +
    +
    + + + + + + {{if .Allow}}{{end}} + {{if .Deny}}{{end}} + {{if .Reflector}} + + + + + {{end}} +
    Status + + {{.EnabledText}} +
    Domain{{.Domain}}
    Allow{{.Allow}}
    Deny{{.Deny}}
    Reflector Active{{if .SvcFilter}} — filter: {{.SvcFilter}}{{end}}
    -
    -
    mDNS Status - Configure → -
    - - - - - - - {{if .Allow}}{{end}} - {{if .Deny}}{{end}} - {{if .Reflector}} - - - - - {{end}} +

    Neighbors

    + {{if .Neighbors}} +
    +
    mDNS - - {{.EnabledText}} -
    Domain{{.Domain}}
    Allow{{.Allow}}
    Deny{{.Deny}}
    Reflector Active{{if .SvcFilter}} — filter: {{.SvcFilter}}{{end}}
    + + + + + + + + + + {{range .Neighbors}} + {{$host := .Hostname}} + + + + + + + {{range .ExtraAddrs}} + + + + + + + {{end}} + {{end}} +
    HostnameAddressLast SeenServices
    {{if .ExtraAddrs}} {{end}}{{.Hostname}}{{.PrimaryAddr}}{{.LastSeen}}{{range $i, $svc := .Services}}{{if $i}} {{end}}{{if $svc.URL}}{{$svc.Label}}{{else}}{{$svc.Label}}({{$svc.Port}}){{end}}{{end}}
    {{.}}
    - - {{if .Neighbors}} -
    -
    Neighbors
    -
    - - - - - - - - - - - {{range .Neighbors}} - {{$host := .Hostname}} - - - - - - - {{range .ExtraAddrs}} - - - - - - - {{end}} - {{end}} - -
    HostnameAddressLast SeenServices
    {{if .ExtraAddrs}} {{end}}{{.Hostname}}{{.PrimaryAddr}}{{.LastSeen}}{{range $i, $svc := .Services}}{{if $i}} {{end}}{{if $svc.URL}}{{$svc.Label}}{{else}}{{$svc.Label}}({{$svc.Port}}){{end}}{{end}}
    {{.}}
    -
    -
    - {{else if not .Error}} -
    -
    Neighbors
    -

    No mDNS neighbors discovered.

    -
    + {{else}} +

    No mDNS neighbors discovered.

    {{end}} -
    {{end}} diff --git a/src/webui/templates/pages/ntp.html b/src/webui/templates/pages/ntp.html index 17934c79..4d24f7b6 100644 --- a/src/webui/templates/pages/ntp.html +++ b/src/webui/templates/pages/ntp.html @@ -9,7 +9,13 @@ {{if .NTP}}
    -

    NTP

    +
    NTP + Configure → +
    @@ -69,8 +75,8 @@ {{else if not .Error}}
    NTP - Configure → diff --git a/src/webui/templates/pages/vpn.html b/src/webui/templates/pages/vpn.html index b272d58c..e1f0fde6 100644 --- a/src/webui/templates/pages/vpn.html +++ b/src/webui/templates/pages/vpn.html @@ -11,6 +11,11 @@
    {{.Name}}{{if .ListenPort}} :{{.ListenPort}}{{end}} + Configure →
    {{if .Addresses}}
    @@ -51,7 +56,13 @@ {{end}} {{else if not .Error}}
    -
    WireGuard
    +
    WireGuard + Configure → +

    No WireGuard tunnels configured.

    {{end}} diff --git a/src/webui/templates/pages/wifi.html b/src/webui/templates/pages/wifi.html index 58b48553..b6d8a3bd 100644 --- a/src/webui/templates/pages/wifi.html +++ b/src/webui/templates/pages/wifi.html @@ -15,6 +15,11 @@
    {{.Name}}
    + Configure →
    Sync Status
    diff --git a/src/webui/templates/pages/yang-tree.html b/src/webui/templates/pages/yang-tree.html index a21009e4..3da28bdd 100644 --- a/src/webui/templates/pages/yang-tree.html +++ b/src/webui/templates/pages/yang-tree.html @@ -18,7 +18,7 @@ {{/* ── Left pane: navigation tree ───────────────────────── */}}
    {{if .ReadOnly}}View all{{else}}Edit all{{end}}
    -
      +