feat/ui: real-time event logger, offline detection, dark theme + various fixes & test improvements#56
Merged
cgalibern merged 16 commits intoopensvc:mainfrom Nov 25, 2025
Merged
Conversation
- Refactor status icons positioning to ensure consistent alignment regardless of additional icons (frozen, warn, etc.) - Use absolute positioning with fixed container sizes to maintain icon alignment - Main status icons (up/down) are always centered, additional icons positioned on sides - Increase TableHead z-index from 1 to 3 to prevent icon overlap during scrolling - Maintain responsive design and all existing functionality The changes ensure that: - Status icons remain perfectly aligned in all cases - No visual shifting occurs when additional icons are displayed - Headers stay visible above content during scrolling - All tooltips and interactive features continue to work as expected"
- Change dialog maxWidth from "lg" to "sm" for better mobile fit - Add responsive styling using MUI breakpoints (xs/sm) - Implement wordBreak and whiteSpace properties for long URL handling - Make buttons responsive with conditional sizing based on screen width - Adjust padding, margins and typography for mobile optimization - Center buttons on mobile screens for better touch targets - Ensure dialog stays within viewport boundaries on small screens - Maintain desktop experience while improving mobile usability
-Add visibility/focus handlers in App.jsx to detect when the user returns to the page (visibilitychange / window focus). -On tab return, check authentication state/token and force a redirect to the login/OIDC entry page when the user is no longer authenticated or the token is expired. -Prevents users from remaining on a protected page after their session has expired (they'll be sent to authenticate before performing actions). -Keeps checks lightweight and centralized at the app entrypoint; logic defers to existing auth/context methods for determining signed-in status.
-Added missing tests to cover all branches in App.jsx -Added tests for OIDC errors, expired tokens, missing authInfo, and event listeners -Covered redirects, storage/focus/visibility events, and unknown route handling -Fixed mock scoping issues and consolidated mock setup -Increased branch coverage significantly
-Add a small reusable hook useOnlineStatus.js that tracks navigator.onLine and listens to online / offline events (with a short periodic check fallback). -Display an "Offline" badge in the top navigation bar when the browser is offline; tooltip reads: "You are offline — some features may be limited".
- Add event logging system with Zustand store (useEventLogStore) - Integrate event logging into EventSourceManager for all SSE events - Create reusable EventLogger component with floating action button - Implement real-time event monitoring with filtering and statistics - Add pause/resume functionality for event stream inspection - Support event counting and type-based color coding - Make logger available across multiple pages via reusable component
- Convert EventLogger from a global fixed logger to a fully reusable component - Add props: `eventTypes`, `objectName`, `title`, and `buttonLabel` for contextual usage - Implement pre-filtering by event type and/or specific object path (supports nested paths in data/labels) - Hide the floating button when drawer is open to avoid duplicate buttons when multiple instances exist - Show filtered/total count based on context (e.g., only events for a specific node/namespace) - Add object name chip in header when filtering by `objectName` - Improve memoization with separated base filtering and UI filtering layers - Fix badge count to reflect only relevant events for the current context - Update forceUpdate logic to react to new logs even when drawer is open This allows adding targeted EventLogger buttons in NodesTable, ObjectDetails, Heartbeats, Cluster, and Namespaces views without interference or duplicate global floating buttons.
Introduce zustand's persist middleware to the event store to enable state persistence in localStorage. This ensures key state properties, including heartbeatStatus, are retained across page refreshes, fixing data loss issues. -Added import for persist from 'zustand/middleware'. -Wrapped the store creation in persist() with name 'event-store'. -Defined partialize to selectively persist: objectStatus, objectInstanceStatus, instanceMonitor, instanceConfig, and heartbeatStatus.
- Add complete test coverage for EventLogger component functionality - Test drawer open/close behavior and initial rendering - Verify event log display with mock data - Test search and filter functionality by event type and content - Cover pause/resume logging functionality - Test clear logs and scroll behavior - Verify event color coding for different event types - Test objectName filtering with various data structures - Cover custom props (title, buttonLabel, eventTypes) - Test resize functionality and cleanup on unmount - Verify timestamp formatting and event count display - Test edge cases (empty logs, invalid JSON, non-matching filters) - Ensure CONNECTION events are always included with objectName filter - Cover component lifecycle and forceUpdate mechanism - Add comprehensive test suite for useEventStore hook - Test state initialization with default values - Verify all setter functions (setNodeStatuses, setNodeMonitors, setNodeStats, etc.) - Test instance status management with encapsulated resources preservation - Verify config update handling with various formats (direct, SSE, JSON strings) - Test object removal functionality and state cleanup - Cover edge cases (invalid JSON, incomplete data, invalid formats) - Verify config update clearing with different naming formats - Test state isolation between test cases with proper beforeEach cleanup - Add complete test coverage for EventLogger component functionality - Test drawer open/close behavior and initial rendering - Verify event log display with mock data - Test search and filter functionality by event type and content - Cover pause/resume logging functionality - Test clear logs and scroll behavior - Verify event color coding for different event types - Test objectName filtering with various data structures - Cover custom props (title, buttonLabel, eventTypes) - Test resize functionality and cleanup on unmount - Verify timestamp formatting and event count display - Test edge cases (empty logs, invalid JSON, non-matching filters) - Ensure CONNECTION events are always included with objectName filter - Cover component lifecycle and forceUpdate mechanism
- Improve error handling in resize function with null checks for mouse events - Add try-catch block in timestamp formatting to handle invalid dates - Replace sx styles with inline styles for drawer paper and resize handle to ensure consistent test behavior - Remove unused Search icon import - Add explicit PaperProps to Drawer for better style control - Enhance test reliability with proper cleanup using jest.restoreAllMocks() - Maintain all existing functionality while improving code resilience These changes ensure better test coverage and more robust error handling while maintaining the same component behavior.
- Add ThemeProvider from @mui/material/styles - Create custom theme with grey[900] as primary color - Wrap Router and App components with ThemeProvider
…L on token refresh - Add filter validation in `createQueryString()`: invalid filters are now filtered out with a clear warning log - Preserve the exact current URL when refreshing the token in `updateEventSourceToken()` by reusing `currentEventSource.url` instead of rebuilding with default filters - Ensure custom filters and object-specific subscriptions (with `objectName`) are maintained across token updates and reconnections Fixes a bug where token refresh would unintentionally reset to default filters, potentially dropping important event subscriptions.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
This PR introduces a powerful real-time EventLogger, offline awareness, a refreshed dark-grey MUI theme, and several UX/test improvements.