fix: correct dynamic page behavior on lifecycle events

fe-app-podkop/src/podkop/services/socket.service.ts

@@ -18,6 +18,27 @@ class SocketManager {
     return SocketManager.instance;
   }
 
+  resetAll(): void {
+    for (const [url, ws] of this.sockets.entries()) {
+      try {
+        if (
+          ws.readyState === WebSocket.OPEN ||
+          ws.readyState === WebSocket.CONNECTING
+        ) {
+          ws.close();
+        }
+      } catch (err) {
+        console.warn(`resetAll: failed to close socket ${url}`, err);
+      }
+    }
+
+    this.sockets.clear();
+    this.listeners.clear();
+    this.errorListeners.clear();
+    this.connected.clear();
+    console.info('[SocketManager] All connections and state have been reset.');
+  }
+
   connect(url: string): void {
     if (this.sockets.has(url)) return;
 

fe-app-podkop/src/podkop/tabs/dashboard/initController.ts

@@ -38,6 +38,7 @@ async function fetchDashboardSections() {
 }
 
 async function connectToClashSockets() {
+  console.log('[SOCKET] connectToClashSockets');
   socket.subscribe(
     `${getClashWsUrl()}/traffic?token=`,
     (msg) => {
@@ -388,25 +389,60 @@ async function onStoreUpdate(
   }
 }
 
-export async function initController(): Promise<void> {
+async function onPageMount() {
-  onMount('dashboard-status').then(() => {
+  // Cleanup before mount
-    // Remove old listener
+  onPageUnmount();
-    store.unsubscribe(onStoreUpdate);
-    // Clear store
-    store.reset([
-      'bandwidthWidget',
-      'trafficTotalWidget',
-      'systemInfoWidget',
-      'servicesInfoWidget',
-      'sectionsWidget',
-    ]);
 
-    // Add new listener
+  // Add new listener
-    store.subscribe(onStoreUpdate);
+  store.subscribe(onStoreUpdate);
 
-    // Initial sections fetch
+  // Initial sections fetch
-    fetchDashboardSections();
+  await fetchDashboardSections();
-    fetchServicesInfo();
+  await fetchServicesInfo();
-    connectToClashSockets();
+  await connectToClashSockets();
+}
+
+function onPageUnmount() {
+  // Remove old listener
+  store.unsubscribe(onStoreUpdate);
+  // Clear store
+  store.reset([
+    'bandwidthWidget',
+    'trafficTotalWidget',
+    'systemInfoWidget',
+    'servicesInfoWidget',
+    'sectionsWidget',
+  ]);
+  socket.resetAll();
+}
+
+function registerLifecycleListeners() {
+  store.subscribe((next, prev, diff) => {
+    if (
+      diff.tabService &&
+      next.tabService.current !== prev.tabService.current
+    ) {
+      console.log(
+        new Date().toISOString(),
+        '[Active Tab on dashboard]',
+        diff.tabService.current,
+      );
+      const isDashboardVisible = next.tabService.current === 'dashboard';
+
+      if (isDashboardVisible) {
+        return onPageMount();
+      }
+
+      if (!isDashboardVisible) {
+        onPageUnmount();
+      }
+    }
+  });
+}
+
+export async function initController(): Promise<void> {
+  onMount('dashboard-status').then(() => {
+    onPageMount();
+    registerLifecycleListeners();
   });
 }

fe-app-podkop/src/podkop/tabs/diagnostic/initController.ts

@@ -477,31 +477,73 @@ async function runChecks() {
   }
 }
 
-export async function initController(): Promise<void> {
+function onPageMount() {
-  onMount('diagnostic-status').then(() => {
+  console.log('diagnostic controller initialized.');
-    console.log('diagnostic controller initialized.');
+  // Cleanup before mount
-    // Remove old listener
+  onPageUnmount();
-    store.unsubscribe(onStoreUpdate);
 
-    // Add new listener
+  // Add new listener
-    store.subscribe(onStoreUpdate);
+  store.subscribe(onStoreUpdate);
 
-    // Initial checks render
+  // Initial checks render
-    renderDiagnosticsChecks();
+  renderDiagnosticsChecks();
 
-    // Initial run checks action render
+  // Initial run checks action render
-    renderDiagnosticRunActionWidget();
+  renderDiagnosticRunActionWidget();
 
-    // Initial available actions render
+  // Initial available actions render
-    renderDiagnosticAvailableActionsWidget();
+  renderDiagnosticAvailableActionsWidget();
 
-    // Initial system info render
+  // Initial system info render
-    renderDiagnosticSystemInfoWidget();
+  renderDiagnosticSystemInfoWidget();
 
-    // Initial services info fetch
+  // Initial services info fetch
-    fetchServicesInfo();
+  fetchServicesInfo();
 
-    // Initial system info fetch
+  // Initial system info fetch
-    fetchSystemInfo();
+  fetchSystemInfo();
+}
+
+function onPageUnmount() {
+  // Remove old listener
+  store.unsubscribe(onStoreUpdate);
+
+  // Clear store
+  store.reset([
+    'diagnosticsActions',
+    'diagnosticsSystemInfo',
+    'diagnosticsChecks',
+    'diagnosticsRunAction',
+  ]);
+}
+
+function registerLifecycleListeners() {
+  store.subscribe((next, prev, diff) => {
+    if (
+      diff.tabService &&
+      next.tabService.current !== prev.tabService.current
+    ) {
+      console.log(
+        new Date().toISOString(),
+        '[Active Tab on diagnostics]',
+        diff.tabService.current,
+      );
+      const isDashboardVisible = next.tabService.current === 'diagnostic';
+
+      if (isDashboardVisible) {
+        return onPageMount();
+      }
+
+      if (!isDashboardVisible) {
+        onPageUnmount();
+      }
+    }
+  });
+}
+
+export async function initController(): Promise<void> {
+  onMount('diagnostic-status').then(() => {
+    onPageMount();
+    registerLifecycleListeners();
   });
 }

luci-app-podkop/htdocs/luci-static/resources/view/podkop/main.js

@@ -1192,6 +1192,22 @@ var SocketManager = class _SocketManager {
     }
     return _SocketManager.instance;
   }
+  resetAll() {
+    for (const [url, ws] of this.sockets.entries()) {
+      try {
+        if (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING) {
+          ws.close();
+        }
+      } catch (err) {
+        console.warn(`resetAll: failed to close socket ${url}`, err);
+      }
+    }
+    this.sockets.clear();
+    this.listeners.clear();
+    this.errorListeners.clear();
+    this.connected.clear();
+    console.info("[SocketManager] All connections and state have been reset.");
+  }
   connect(url) {
     if (this.sockets.has(url)) return;
     let ws;
@@ -1576,6 +1592,7 @@ async function fetchDashboardSections() {
   });
 }
 async function connectToClashSockets() {
+  console.log("[SOCKET] connectToClashSockets");
   socket.subscribe(
     `${getClashWsUrl()}/traffic?token=`,
     (msg) => {
@@ -1866,20 +1883,46 @@ async function onStoreUpdate(next, prev, diff) {
     renderServicesInfoWidget();
   }
 }
+async function onPageMount() {
+  onPageUnmount();
+  store.subscribe(onStoreUpdate);
+  await fetchDashboardSections();
+  await fetchServicesInfo();
+  await connectToClashSockets();
+}
+function onPageUnmount() {
+  store.unsubscribe(onStoreUpdate);
+  store.reset([
+    "bandwidthWidget",
+    "trafficTotalWidget",
+    "systemInfoWidget",
+    "servicesInfoWidget",
+    "sectionsWidget"
+  ]);
+  socket.resetAll();
+}
+function registerLifecycleListeners() {
+  store.subscribe((next, prev, diff) => {
+    if (diff.tabService && next.tabService.current !== prev.tabService.current) {
+      console.log(
+        (/* @__PURE__ */ new Date()).toISOString(),
+        "[Active Tab on dashboard]",
+        diff.tabService.current
+      );
+      const isDashboardVisible = next.tabService.current === "dashboard";
+      if (isDashboardVisible) {
+        return onPageMount();
+      }
+      if (!isDashboardVisible) {
+        onPageUnmount();
+      }
+    }
+  });
+}
 async function initController() {
   onMount("dashboard-status").then(() => {
-    store.unsubscribe(onStoreUpdate);
+    onPageMount();
-    store.reset([
+    registerLifecycleListeners();
-      "bandwidthWidget",
-      "trafficTotalWidget",
-      "systemInfoWidget",
-      "servicesInfoWidget",
-      "sectionsWidget"
-    ]);
-    store.subscribe(onStoreUpdate);
-    fetchDashboardSections();
-    fetchServicesInfo();
-    connectToClashSockets();
   });
 }
 
@@ -3744,17 +3787,48 @@ async function runChecks() {
     store.set({ diagnosticsRunAction: { loading: false } });
   }
 }
+function onPageMount2() {
+  console.log("diagnostic controller initialized.");
+  onPageUnmount2();
+  store.subscribe(onStoreUpdate2);
+  renderDiagnosticsChecks();
+  renderDiagnosticRunActionWidget();
+  renderDiagnosticAvailableActionsWidget();
+  renderDiagnosticSystemInfoWidget();
+  fetchServicesInfo();
+  fetchSystemInfo();
+}
+function onPageUnmount2() {
+  store.unsubscribe(onStoreUpdate2);
+  store.reset([
+    "diagnosticsActions",
+    "diagnosticsSystemInfo",
+    "diagnosticsChecks",
+    "diagnosticsRunAction"
+  ]);
+}
+function registerLifecycleListeners2() {
+  store.subscribe((next, prev, diff) => {
+    if (diff.tabService && next.tabService.current !== prev.tabService.current) {
+      console.log(
+        (/* @__PURE__ */ new Date()).toISOString(),
+        "[Active Tab on diagnostics]",
+        diff.tabService.current
+      );
+      const isDashboardVisible = next.tabService.current === "diagnostic";
+      if (isDashboardVisible) {
+        return onPageMount2();
+      }
+      if (!isDashboardVisible) {
+        onPageUnmount2();
+      }
+    }
+  });
+}
 async function initController2() {
   onMount("diagnostic-status").then(() => {
-    console.log("diagnostic controller initialized.");
+    onPageMount2();
-    store.unsubscribe(onStoreUpdate2);
+    registerLifecycleListeners2();
-    store.subscribe(onStoreUpdate2);
-    renderDiagnosticsChecks();
-    renderDiagnosticRunActionWidget();
-    renderDiagnosticAvailableActionsWidget();
-    renderDiagnosticSystemInfoWidget();
-    fetchServicesInfo();
-    fetchSystemInfo();
   });
 }