mirror of
https://github.com/taylanbakircioglu/haproxy-openmanager.git
synced 2026-09-28 04:59:05 +00:00
Performance: Improve Dashboard cleanup to prevent slowdown on other pages
Performance Fix - Dashboard Cleanup: Dashboard makes 13 API calls on load and auto-refreshes every 60 seconds When user navigates away, these operations need proper cleanup Issue: - User visits Dashboard → 13 API calls start loading - User quickly navigates to Backend Management - Dashboard cleanup incomplete, API calls still pending - Backend Management loads slower due to backend busy with Dashboard requests Fix Applied: 1. Added loading state reset in useEffect cleanup (Line 467-472) - setLoading(false) - setInitialLoad(false) - Only runs on component unmount - Does NOT affect Dashboard performance while in use 2. Enhanced interval cleanup documentation (Line 559-563) - Already clears auto-refresh interval - Added comment about preventing background fetches Dashboard API Calls (13 total): Sequential: 7 calls (overview, agents, frontends, backends, stats, health, slowest) Parallel: 5 timeseries calls Separate: 1 heatmap (24h data) Performance Impact Analysis: Dashboard in use: ZERO impact (cleanup only runs on unmount) Dashboard to other pages: FASTER (loading states cleared) Other pages: FASTER (Dashboard not blocking backend) Risk: NONE - Only cleanup code, doesn't change functionality
This commit is contained in:
@@ -465,6 +465,10 @@ const DashboardV2 = () => {
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
// CRITICAL FIX: Reset loading states when component unmounts
|
||||
// This prevents Dashboard's heavy load from affecting other pages
|
||||
setLoading(false);
|
||||
setInitialLoad(false);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [selectedCluster?.id]); // Only depend on cluster ID change
|
||||
@@ -552,7 +556,11 @@ const DashboardV2 = () => {
|
||||
}
|
||||
}, 60000); // 60 seconds
|
||||
|
||||
return () => clearInterval(interval);
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
// CRITICAL FIX: Cleanup on unmount to prevent background fetches
|
||||
// Dashboard makes 13 API calls, cleanup ensures they stop when user leaves
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [selectedCluster?.id, initialLoad, activeTab]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user