This PR improves overall performance, stability, and reliability of the application by optimizing logging, event handling, state management, and fixing a critical search-related bug. The changes reduce unnecessary re-renders, prevent duplicated side effects, and improve navigation and event source behavior. #59
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ping The logger was causing duplicate log messages because each log level was configured to call multiple console methods. For example, the 'info' level was mapped to ['log', 'info'], which resulted in both console.log() and console.info() being called for a single logger.info() call. Changes made: - Simplified LOGGER_BEHAVIOR mapping from arrays to single method names - Updated callConsoleMethod() to accept a single method string instead of array - Added proper fallback handling using console.log() with level prefixes - Maintained all existing functionality including safeSerialize() and NODE_ENV detection The fix ensures that each logger method calls only one corresponding console method, eliminating the duplicate log output while preserving backward compatibility.
…ring This commit introduces performance optimizations for event source management and adds buffer flushing before navigation to ensure data consistency. Key Changes: Event Source Manager Optimizations: Added CONNECTION_EVENTS constant for connection lifecycle tracking Introduced OVERVIEW_FILTERS with only essential events for Cluster Overview Enhanced buffer management with atomic updates via updateBuffer() function Added prepareForNavigation() and forceFlush() functions for buffer control Improved reconnection handling with proper cleanup and reference checks Added page state management (setPageActive(), cleanupAllEventSources()) Fixed event data logging by passing parsed data directly instead of wrapped objects App Component Updates: Added prepareForNavigation() call before route changes using useLocation effect Added new route /nodes/:node/objects/:objectName for ObjectInstanceView Enhanced navigation flow with buffer flushing to prevent stale data Cluster Component Performance: Added memoization for all grid components using React.memo Optimized data calculations with early returns and efficient loops Parallelized data fetching with Promise.all for pools and networks Created memoized constants and callbacks to reduce re-renders Used selective store subscriptions to minimize updates ClusterStatGrids Optimizations: Memoized all grid components for better rendering performance Added prepareForNavigation() calls before navigation events Enhanced namespace chip rendering with memoized status elements Improved click handling with debounced navigation Performance Improvements: Reduced unnecessary re-renders through memoization Optimized event processing with better buffer management Prevented memory leaks with proper cleanup Enhanced navigation experience with pre-flush data consistency Bug Fixes: Fixed ObjectDeleted logging by passing data directly instead of wrapped object Fixed InstanceConfigUpdated warning by using correct data parameter Improved error handling in reconnection logic These changes ensure smoother navigation, better performance, and more reliable event handling across the application.
…ments Commit Description: Add custom equality checks (React.memo comparisons) to prevent unnecessary re-renders of components StatusIcon: Compare avail, isNotProvisioned, frozen props NodeStatus: Compare objectName, node, and derived node state TableRowComponent: Compare multiple props including object status and node arrays Simplify status calculation by precomputing objectStatusWithGlobalExpect memoized value Optimize useEventStore with shallow equality checks to prevent unnecessary state updates Add helper functions parseObjectPath and shallowEqual for cleaner code Improve handleSort function to use functional state updates Remove redundant getObjectStatus function in favor of direct status access Maintain same functionality while significantly reducing render cycles
Problem: - The search field was completely broken due to an infinite loop between state updates and URL parameter synchronization - The useEffect that initialized state from URL parameters was resetting searchQuery every time the URL changed - Since typing in the search field triggered debounced URL updates, this created a circular dependency Solution: 1. Separated searchQuery initialization from other filters - searchQuery is now initialized only once on component mount - Other filters (globalState, namespace, kind) are still synced from URL parameters 2. Modified debouncedUpdateQuery to only include searchQuery in URL when it's not empty - Prevents unnecessary URL updates and parameter conflicts 3. Added dedicated handleSearchChange function for search input 4. Cleaned up useEffect dependencies to prevent unnecessary re-renders Key changes: - Removed searchQuery from the URL parameter sync effect - Changed search parameter to only update URL when trimmed value is non-empty - Fixed the circular dependency that was causing the infinite loop Result: - Search functionality now works correctly - No more infinite re-renders or state resetting while typing - URL still reflects search when active, but doesn't interfere with typing - All other filter functionalities remain intact
…w and detailed ObjectInstanceView - Simplify NodeCard component to only show node overview with basic actions - Remove resource management logic and UI from NodeCard - Add new ObjectInstanceView component for detailed instance management - Move all resource display, selection, and action logic to ObjectInstanceView - Add navigation from NodeCard to ObjectInstanceView via "View instance details" button - Implement comprehensive resource management in dedicated instance view - Improve UI/UX by separating list and detail views for better performance and clarity Changes include: - NodeCard now acts as lightweight entry point in node lists - ObjectInstanceView provides full instance monitoring and control - Resource status display, selection, and batch actions moved to detail view - All resource-specific dialogs and menus consolidated in ObjectInstanceView - Event logging and real-time updates focused on single instance context - Responsive design with resizable logs drawer in detail view
- Reorganized HeaderSection and ConfigSection to display side by side using Grid layout for better space utilization - Removed border from ConfigSection for cleaner integration with main layout - Added expand/collapse functionality to ConfigSection with simple toggle button - Removed dedicated "View Instance Details" button from NodeCard - Implemented clickable NodeCard with mouseover effects: - Entire card is now clickable to navigate to instance resources page - Visual hover feedback with background color change and border highlighting - Added "(view resources)" text that appears on hover for clear user guidance - Preserved all existing functionality while improving UX - Maintained all action buttons and checkboxes with proper event propagation handling The redesign creates a more streamlined interface where users can: 1. View object header and configuration side by side 2. Collapse configuration to save space when not needed 3. Click anywhere on a NodeCard (except interactive elements) to view instance resources 4. See clear visual indicators of interactivity through hover effects
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Logging
Fixed duplicated console logs by simplifying the logger method mapping.
Ensures each log level is emitted only once.
Events & Navigation
Optimized EventSource handling to avoid redundant connections.
Improved lifecycle management of event listeners.
Added a navigation buffer to prevent event loss during route changes.
Performance Improvements
Introduced memoization to reduce unnecessary re-renders.
Improved store structure and access patterns for better performance and readability.
Bug Fixes
Fixed an infinite loop caused by the search query logic in the Objects component.
Ensures stable behavior when updating search parameters.
Impact
Reduced console noise and cleaner logs.
More reliable real-time updates via EventSource.
Improved UI responsiveness and lower rendering cost.
Fixed a blocking bug affecting object search and navigation.
Testing
Verified EventSource behavior during navigation and refresh.
Manually tested search functionality to confirm the infinite loop is resolved.
Checked logger output to ensure logs are not duplicated.
Validated no regressions in object listing and navigation flows.