v0.28.0

src/admin/web/app/runtime.js

@@ -359,7 +359,28 @@ function renderDiagnostics(status, appendSample = true) {
     const l = status.listeners || {};
     $("listener-pending").hidden = !l.restart_required;
     $("listener-pending").textContent = t("restartPending");
-    $("listener-active").textContent = `${t("activeListeners")}: ${l.active_endpoints?.map(e => `${e.tls ? "HTTPS" : "HTTP"} ${e.address}${e.http3 ? " + H3/UDP" : ""}`).join(" | ") || `HTTP ${status.proxy_listen} / HTTPS ${status.tls_listen || t("notEnabled")}`}`;
+    const activeListeners = $("listener-active"), listenerItems = el("div", undefined, "listener-active-items");
+    let endpoints = Array.isArray(l.active_endpoints) ? l.active_endpoints : [];
+    if (!endpoints.length) {
+        endpoints = [];
+        if (status.proxy_listen) endpoints.push({ tls: false, address: status.proxy_listen, http3: false });
+        if (status.tls_listen) endpoints.push({ tls: true, address: status.tls_listen, http3: false });
+    }
+    for (const endpoint of endpoints) {
+        const item = el("div", undefined, "listener-active-item");
+        item.append(el("strong", endpoint.tls ? "HTTPS" : "HTTP", "listener-active-protocol"), el("code", endpoint.address || "-", "listener-active-address"));
+        const protocols = ["H1"];
+        if (endpoint.tls) {
+            if (endpoint.http2) protocols.push("H2");
+            if (endpoint.http3) protocols.push("H3/UDP");
+        } else if (endpoint.h2c) {
+            protocols.push("H2C");
+        }
+        for (const protocol of protocols) item.append(el("span", protocol, "listener-active-feature"));
+        listenerItems.append(item);
+    }
+    if (!endpoints.length) listenerItems.append(el("span", t("notEnabled"), "fine"));
+    activeListeners.replaceChildren(el("strong", t("activeListeners"), "listener-active-title"), listenerItems);
 }
 function renderHeaderRules(direction, rules) {
     const target = $(`${direction}-header-rules`); target.replaceChildren();