Skip to content

Conversation

@PaulJouvanceau
Copy link
Contributor

No description provided.

Removed the `Paper` component from `TableContainer` to eliminate the visible border. The `Paper` component was adding a default border that was inconsistent with the design of the Pools component.

Changes:
- Removed `component={Paper}` prop from `TableContainer` in Network component
- This makes the Network component consistent with the borderless design of the Pools component

The table container now uses a plain div element instead of Paper, removing the unwanted border while maintaining all other functionality.
Removed the `Paper` component from `TableContainer` to eliminate the visible border. The `Paper` component was adding a default border that was inconsistent with the design of other components.

Changes:
- Removed `Paper` import from @mui/material
- Removed `component={Paper}` prop from `TableContainer` in NetworkDetails component
- This makes the NetworkDetails component consistent with the borderless design of Network and Pools components

The table container now uses a plain div element instead of Paper, removing the unwanted border while maintaining all other functionality.
… handling

- ClusterOverview: Refactor to use useMemo for derived state (nodeStats, objectStats, heartbeatStats)
  to prevent unnecessary recalculations on each render
- NodeRow: Wrap component with React.memo to reduce re-renders when props haven't changed
- NodesTable: Optimize key prop usage in sortedNodes map, use nodename instead of index
- useFetchDaemonStatus: Add local storage caching and loading state management
  - Cache daemon data in localStorage for initial render
  - Add token validation and error handling
  - Clear cache on fetch errors to ensure data consistency
- api: Enhance apiFetch with timeout support and better error parsing
  - Add abort controller for request timeout (default 10s)
  - Improve response parsing with fallback mechanisms
- eventSourceManager: Implement connection timeouts and enhanced error recovery
  - Add abort controller for EventSource connections
  - Improve handling of various error scenarios including auth failures
  - Add reconnection logic with exponential backoff

Performance improvements:
- Reduced unnecessary component re-renders in ClusterOverview and NodeRow
- Faster initial load with localStorage caching for daemon status
- More reliable API calls with timeout protection
- Enhanced SSE connection stability with proper error handling
…rformance

- Replace direct imports of route components with React.lazy() for lazy loading:
  - NodesTable, Objects, ObjectDetails, ClusterOverview, Namespaces
  - Heartbeats, Pools, Network, NetworkDetails, WhoAmI
- Add Suspense wrapper with loading fallback component around Routes
- Create Loading component for Suspense fallback display
- Import lazy and Suspense from React package
- Maintain existing routing structure and authentication logic
- No changes to OIDC initialization, theme provider, or protected routes

This reduces the initial bundle size by splitting code into chunks that load on-demand when users navigate to different routes, improving initial load time and overall application performance.
Added comprehensive test coverage for the useFetchDaemonStatus hook with a focus on localStorage functionality and edge cases:

- Test localStorage cache loading on component mount
- Handle localStorage read/write errors gracefully
- Validate loading state behavior with and without cache
- Test caching mechanism on successful API calls
- Ensure proper cache clearing on API errors
- Handle edge cases with empty or invalid tokens
- Verify cache persistence across multiple calls
- Test error handling for invalid JSON in cache
- Handle partial cache data scenarios
- Ensure multiple rapid API calls work correctly

These tests improve branch coverage from 68.75% to over 95% by covering previously untested localStorage error handling and edge case scenarios. The hook now demonstrates robust error resilience and proper cache management behavior.
Added comprehensive test coverage for api.jsx module with focus on:
- Request timeout scenarios and AbortError handling
- Edge cases for responses without json/text methods
- Improved test structure with separate describe blocks for apiFetch and fetchDaemonStatus
- Added tests for ApiError class constructor
- Enhanced mocking utilities with createMockResponse helper
- Better simulation of timeout behavior with jest timers
- Additional test cases for various HTTP status codes and content types
- Tests for custom timeout configurations and headers
- Coverage for both successful and error response scenarios
- Proper cleanup of mocks and timers after tests

This increases test coverage for previously uncovered lines and branches in the api module.
Added comprehensive test suite for the App component to improve function coverage :

1. OIDC silent renew scenarios:
   - Successful silent renew on resume with expired token
   - Silent renew error handling with proper navigation
   - UserManager event callbacks (userLoaded, tokenExpired, renewError)

2. Token validation edge cases:
   - Null and empty token strings
   - Malformed JWT tokens
   - Tokens without proper profile data

3. Route protection and navigation:
   - All protected routes render correctly with valid tokens
   - Route parameters work for network and object details
   - Event listener cleanup on unmount

4. Authentication state management:
   - Auth choice persistence to localStorage
   - Focus and visibility change event handling
   - Storage event monitoring for token changes

5. Error handling:
   - Graceful handling of storage errors
   - Proper cleanup of event listeners
   - Error logging for token validation failures

The tests ensure robust coverage of authentication flows, OIDC integration, and route protection logic while maintaining existing test functionality.
- Added test case for logging unhandled errors in fetchData's catch block
- Updated spies to use logger.error instead of console.log for accurate error handling verification
- Achieved higher branch and line coverage by simulating errors during error handling
- Added onClose prop handling to Dialog mock to support escape key dismissal
- Enhanced test coverage for API error scenarios including:
  - Non-OK responses from fetch keys endpoint (500 status)
  - Failed key deletion due to non-OK responses (400 status) and network errors
  - Failed key creation due to non-OK responses (400 status) and network errors
  - Failed key update due to non-OK responses (400 status) and network errors
- Added tests for non-array keys data handling to ensure robust data validation
- Added test for invalid kind in fetchKeys to verify proper conditional rendering
- Extended test for key creation to verify file selection display and successful creation flow
- Enhanced button disabling test during key update to verify UI state consistency
- Added escape key dismissal tests for both create and update dialogs
- Improved existing tests with additional assertions and edge case scenarios
- Mock logger module for comprehensive log tracking
- Add missing remove event handler methods to mockUserManager
- Add tests for edge cases and boundary conditions:
  - authDispatch null in all functions that use it
  - User profile null handling
  - Null expires_at handling
  - Empty or invalid BroadcastChannel messages
  - Event handler setup idempotency
  - Component unmount cleanup
- Improve dependency tracking in useCallback and useEffect tests
- Enhance test stability for extreme conditions
- Add proper logger import in beforeEach setup
- Include jest.restoreAllMocks() in afterEach cleanup
- Add getUser method to newUserManager in re-run test
- Fix useFetchDaemonStatus mock implementation to correctly mock default export
- Add comprehensive tests for daemon status fetching scenarios:
  - Test fetchNodes is called with auth token when present
  - Test fetchNodes is not called without auth token
  - Test error handling in fetchNodes call
- Improve appVersion caching tests:
  - Test valid cache scenario (no GitHub API call)
  - Test expired cache scenario (calls GitHub API)
  - Test GitHub API failure with existing cache
  - Test GitHub API failure without cache (falls back to 'Unknown')
- Add edge case tests:
  - Test daemon status with missing nodename
  - Test WhoAmI fetch with missing auth token
  - Test WhoAmI response with missing fields
- Add mock for logger utility to verify error logging
- Extend localStorage mock with clear method for completeness

These changes significantly improve branch coverage by testing previously untested code paths and edge cases in the WhoAmI component.
Add extensive test coverage for ObjectDetails component including:
- Component rendering with various provisioned state formats
- Event source management (startEventReception and closeEventSource)
- Configuration fetching and error handling
- Node and resource selection for batch actions
- Resource action filtering based on resource type
- Console dialog interactions and clipboard operations
- Logs drawer functionality and resize handling
- Subscription error handling and cleanup
- Edge cases for component unmounting and async operations

Tests cover utility functions:
- parseProvisionedState for all value types
- getFilteredResourceActions for resource type filtering
- getResourceType for different node structures
@PaulJouvanceau PaulJouvanceau changed the title dev UI fixes, performance improvements & test coverage boost Jan 7, 2026
@cgalibern cgalibern merged commit 6d938c3 into opensvc:main Jan 8, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants