v0.31.0

src/admin/web/traffic-panel.js

@@ -1,6 +1,6 @@
 "use strict";
 (() => {
-    let loading = false, timer = null, lastData = null, activeTab = "overview";
+    let loading = false, lastData = null, activeTab = "overview";
     const chartPalette = ["var(--chart-accent)", "var(--chart-secondary)", "var(--chart-tertiary)", "var(--chart-quaternary)", "var(--chart-quinary)", "var(--chart-senary)", "var(--chart-septenary)", "var(--chart-octonary)"];
     const scope = () => $("traffic-scope")?.value || "*";
     const number = value => fmt(Number(value) || 0);
@@ -101,12 +101,17 @@
         $("traffic-panel-state").textContent = `${t("trafficUpdated")}: ${formatTime(new Date())}`;
     }
 
-    async function refresh() {
-        if (!authenticated || loading) return; loading = true;
-        try { render(await api(`/api/traffic?vhost=${encodeURIComponent(scope())}`)); }
-        catch (error) { $("traffic-panel-state").textContent = error.message; }
-        finally { loading = false; }
+    async function loadTraffic({ signal, isCurrent }) {
+        if (!authenticated || currentPanel !== "traffic" || loading) return;
+        loading = true;
+        try {
+            const data = await api(`/api/traffic?vhost=${encodeURIComponent(scope())}`, { signal });
+            if (isCurrent()) render(data);
+        } catch (error) {
+            if (error?.name !== "AbortError" && isCurrent()) $("traffic-panel-state").textContent = error.message;
+        } finally { loading = false; }
     }
+    function refresh() { return rustProxyRefresh.manual("traffic"); }
 
     function reset() {
         lastData = null; if ($("traffic-panel-state")) $("traffic-panel-state").textContent = "";
@@ -121,7 +126,12 @@
     document.querySelectorAll("[data-traffic-tab]").forEach(button => button.addEventListener("click", () => selectTab(button.dataset.trafficTab)));
     $("traffic-refresh")?.addEventListener("click", () => void refresh()); $("traffic-scope")?.addEventListener("change", () => void refresh());
     $("traffic-settings")?.addEventListener("click", () => { setPanel("settings"); window.rustProxySettings?.select("logging"); });
-    timer = setInterval(() => { if (authenticated && $("traffic-live")?.checked && !$("panel-traffic")?.hidden) void refresh(); }, 3000);
+    rustProxyRefresh.register("traffic", {
+        interval: () => rustProxyRefresh.current().traffic_seconds,
+        active: () => currentPanel === "traffic" && !!$("traffic-live")?.checked,
+        run: loadTraffic
+    });
+    $("traffic-live")?.addEventListener("change", () => rustProxyRefresh.sync());
     selectTab(activeTab);
     window.rustProxyTrafficPanel = { refresh, reset, rerender: () => lastData && render(lastData), select: selectTab };
 })();