feat: improve dashboard monitoring & reset cache feature flags (#557)

Author: zhravan

api/api/versions.json

@@ -3,7 +3,7 @@
     {
       "version": "v1",
       "status": "active",
-      "release_date": "2025-10-30T23:05:56.030438+05:30",
+      "release_date": "2025-11-02T07:52:11.101731+05:30",
       "end_of_life": "0001-01-01T00:00:00Z",
       "changes": [
         "Initial API version"

view/app/dashboard/components/system/disk-usage.tsx

@@ -101,13 +101,16 @@ function DiskMountsTable({ mounts }: { mounts: MountData[] }) {
   ];
 
   return (
-    <DataTable
-      data={mounts}
-      columns={columns}
-      tableClassName="min-w-full overflow-x-hidden"
-      showBorder={false}
-      hoverable={false}
-      striped={false}
-    />
+    <div className="max-h-[300px] overflow-y-auto overflow-x-hidden">
+      <DataTable
+        data={mounts}
+        columns={columns}
+        tableClassName="min-w-full"
+        containerClassName="overflow-x-hidden"
+        showBorder={false}
+        hoverable={false}
+        striped={false}
+      />
+    </div>
   );
 }

view/app/dashboard/hooks/use-monitor.ts

@@ -1,7 +1,7 @@
 'use client';
 import { useWebSocket } from '@/hooks/socket-provider';
 import { ContainerData, SystemStatsType } from '@/redux/types/monitor';
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
 
 function use_monitor() {
   const { sendJsonMessage, message, isReady } = useWebSocket();
@@ -12,6 +12,33 @@ function use_monitor() {
   const reconnectTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const isInitializedRef = useRef(false);
 
+  const startMonitoring = useCallback(() => {
+    if (!isReady) {
+      console.log('WebSocket not ready, skipping monitoring start');
+      return;
+    }
+    
+    console.log('Starting dashboard monitoring');
+    sendJsonMessage({
+      action: 'dashboard_monitor',
+      data: {
+        interval: 10,
+        operations: ['get_containers', 'get_system_stats']
+      }
+    });
+    setIsMonitoring(true);
+    setLastError(null);
+  }, [isReady, sendJsonMessage]);
+
+  const stopMonitoring = useCallback(() => {
+    console.log('Stopping dashboard monitoring');
+    sendJsonMessage({
+      action: 'stop_dashboard_monitor'
+    });
+    setIsMonitoring(false);
+  }, [sendJsonMessage]);
+
+  // Handle incoming WebSocket messages
   useEffect(() => {
     if (message) {
       try {
@@ -30,65 +57,50 @@ function use_monitor() {
           setLastError(null);
         } else if (parsedMessage.action === 'error') {
           setLastError(parsedMessage.error || 'Unknown error occurred');
-          if (isMonitoring) {
-            stopMonitoring();
-            setTimeout(startMonitoring, 5000);
-          }
+          // Retry after error
+          setTimeout(() => {
+            if (isReady) {
+              startMonitoring();
+            }
+          }, 5000);
         }
       } catch (error) {
         console.error('Error parsing WebSocket message:', error);
         setLastError('Failed to parse message');
       }
     }
-  }, [message]);
-
-  const startMonitoring = () => {
-    if (!isMonitoring) {
-      sendJsonMessage({
-        action: 'dashboard_monitor',
-        data: {
-          interval: 10,
-          operations: ['get_containers', 'get_system_stats']
-        }
-      });
-      setIsMonitoring(true);
-      setLastError(null);
-    }
-  };
-
-  const stopMonitoring = () => {
-    if (isMonitoring) {
-      sendJsonMessage({
-        action: 'stop_dashboard_monitor'
-      });
-      setIsMonitoring(false);
-    }
-  };
+  }, [message, isReady, startMonitoring]);
 
+  // Initialize monitoring when WebSocket is ready
   useEffect(() => {
     if (isReady && !isInitializedRef.current) {
+      console.log('WebSocket ready, initializing monitoring');
       startMonitoring();
       isInitializedRef.current = true;
     }
+    
     return () => {
       if (reconnectTimeoutRef.current) {
         clearTimeout(reconnectTimeoutRef.current);
       }
     };
-  }, [isReady]);
+  }, [isReady, startMonitoring]);
 
+  // Retry monitoring on error
   useEffect(() => {
     if (isReady && !isMonitoring && lastError) {
+      console.log('Retrying monitoring after error');
       reconnectTimeoutRef.current = setTimeout(() => {
         startMonitoring();
       }, 5000);
     }
+    
     return () => {
       if (reconnectTimeoutRef.current) {
         clearTimeout(reconnectTimeoutRef.current);
       }
     };
-  }, [isReady, isMonitoring, lastError]);
+  }, [isReady, isMonitoring, lastError, startMonitoring]);
 
   return {
     containersData,

view/hooks/use-app-sidebar.ts

@@ -14,6 +14,7 @@ import { GithubConnectorApi } from '@/redux/services/connector/githubConnectorAp
 import { deployApi } from '@/redux/services/deploy/applicationsApi';
 import { fileManagersApi } from '@/redux/services/file-manager/fileManagersApi';
 import { auditApi } from '@/redux/services/audit';
+import { FeatureFlagsApi } from '@/redux/services/feature-flags/featureFlagsApi';
 import { useState, useMemo, useEffect } from 'react';
 import { Folder, Home, Package, SettingsIcon, Container, Puzzle } from 'lucide-react';
 
@@ -132,7 +133,8 @@ export function useAppSidebar() {
       GithubConnectorApi,
       deployApi,
       fileManagersApi,
-      auditApi
+      auditApi,
+      FeatureFlagsApi
     ];
     apis.forEach((api) => dispatch(api.util.resetApiState()));
   };

view/hooks/use-team-switcher.ts

@@ -10,6 +10,7 @@ import { domainsApi } from '@/redux/services/settings/domainsApi';
 import { GithubConnectorApi } from '@/redux/services/connector/githubConnectorApi';
 import { deployApi } from '@/redux/services/deploy/applicationsApi';
 import { notificationApi } from '@/redux/services/settings/notificationApi';
+import { FeatureFlagsApi } from '@/redux/services/feature-flags/featureFlagsApi';
 import { UserOrganization } from '@/redux/types/orgs';
 
 const ACTIVE_ORGANIZATION_KEY = 'active_organization';
@@ -49,6 +50,7 @@ function useTeamSwitcher() {
       dispatch(GithubConnectorApi.util.invalidateTags([{ type: 'GithubConnector', id: 'LIST' }]));
       dispatch(deployApi.util.invalidateTags([{ type: 'Deploy', id: 'LIST' }]));
       dispatch(notificationApi.util.invalidateTags([{ type: 'Notification', id: 'LIST' }]));
+      dispatch(FeatureFlagsApi.util.invalidateTags([{ type: 'FeatureFlags', id: 'LIST' }]));
     } catch (error) {
       console.error('Failed to invalidate cache:', error);
     }