v0.32.6_fix1

src/admin/web/vhosts/render.js

@@ -101,6 +101,30 @@ async function toggleVhostEnabled(vhost) {
   if (await saveSection("vhosts", next.vhosts || [])) render();
 }
 
+const VHOST_PROTOCOL_FRESH_MS = 5 * 60 * 1000;
+function upstreamProtocolBadgeText(backend, member, now = Date.now()) {
+  const mode = { http1: "H1", auto: "AUTO", http2: "H2 compatible", h2: "H2 only" }[backend.protocol || "http1"] || "H1";
+  const seen = Number(member?.upstream_protocol_last_seen_ms);
+  const recent = member && (member.upstream_protocol_observed === "h1" || member.upstream_protocol_observed === "h2") &&
+    Number.isFinite(seen) && seen > 0 && now >= seen && now - seen <= VHOST_PROTOCOL_FRESH_MS;
+  return { label: `${backend.id} · ${mode} → ${recent ? member.upstream_protocol_observed.toUpperCase() : "?"}`, recent };
+}
+function renderUpstreamProtocolBadges(status) {
+  const members = new Map((status.backend_pools || []).flatMap(pool => (pool.members || []).map(member =>
+    [`${pool.id}\u0000${member.id}`, member])));
+  const now = Date.now();
+  document.querySelectorAll("[data-upstream-protocol-vhost]").forEach(node => {
+    const vhost = node.dataset.upstreamProtocolVhost, id = node.dataset.upstreamProtocolBackend;
+    const backend = (envelope?.config.vhosts || []).find(host => host.id === vhost)?.backends?.find(item => item.id === id);
+    if (!backend) return;
+    const member = members.get(`${vhost}\u0000${id}`);
+    const observed = upstreamProtocolBadgeText(backend, member, now);
+    node.textContent = observed.label;
+    node.dataset.observed = String(!!observed.recent);
+    const counts = member && observed.recent ? ` H1: ${member.upstream_protocol_http1_total || 0}; H2: ${member.upstream_protocol_http2_total || 0}.` : "";
+    node.title = `${t(observed.recent ? "vhBackendProtocolRecent" : "vhBackendProtocolUnobserved")}${counts}`;
+  });
+}
 function render() {
   if (!envelope) return;
   if (!initialized) load(defaults(), [], false);
@@ -187,6 +211,19 @@ function render() {
     ];
     for (const [key, value] of detailItems) { const item = el("div", undefined, "vhost-detail"); item.append(text("span", key, "small-label"), el("b", value)); details.append(item); }
     box.append(details);
+    if ((v.backends || []).length && (v.source?.type !== "web_server" || (v.routes || []).some(route =>
+      !route.response && (route.source?.type || "reverse_proxy") === "reverse_proxy"))) {
+      const badges = el("div", undefined, "vhost-backend-protocols");
+      for (const backend of v.backends) {
+        const badge = el("span", undefined, "vhost-backend-protocol-badge");
+        badge.dataset.upstreamProtocolVhost = v.id;
+        badge.dataset.upstreamProtocolBackend = backend.id;
+        badge.textContent = upstreamProtocolBadgeText(backend, null).label;
+        badge.title = t("vhBackendProtocolUnobserved");
+        badges.append(badge);
+      }
+      box.append(badges);
+    }
 
     const live = el("div", undefined, "vhost-live-grid");
     const metric = (key, suffix) => { const item = el("div", undefined, "vhost-live-metric"); item.append(text("span", key), el("strong", "-")); item.querySelector("strong").dataset[suffix] = v.id; live.append(item); };
@@ -246,6 +283,7 @@ function vhostTrafficRate(id, metrics, snapshot, now, seen) {
   return rate;
 }
 function renderStatus(status) {
+  renderUpstreamProtocolBadges(status);
   form.querySelectorAll(".vh-member").forEach(row => row.syncLocalRisk?.());
   const rows = [], summaries = new Map(), aggregate = new Map();
   const trafficSnapshot = status, trafficNow = performance.now(), seenTraffic = new Set(), seenVhostTraffic = new Set();