This PR improves UI reliability and usability by fixing a Safari-specific z-index issue, enhancing object filtering capabilities, and resolving SSE synchronization problems that prevented the UI from updating correctly.#62
Merged
cgalibern merged 3 commits intoopensvc:mainfrom Feb 10, 2026
Conversation
- Replaced Popper components with Menu for action menus - Removed Safari-specific workarounds (isSafari, disablePortal) - Moved row menu logic to parent component - Better cross-browser compatibility and accessibility Fixes: Action menus appearing behind sticky header on Safari
- Replace Autocomplete components with multi-select Select components for Global State, Namespace, and Kind filters - Update state management to handle arrays of selected values instead of single strings - Modify URL query parameter handling to support comma-separated values for multi-select filters - Add Chip display for selected filter values with delete functionality - Update filtering logic to support multiple selected values per filter category - Add React.useId for unique form label associations - Remove "all" option from globalStates array as empty array now represents "all" - Update useEffect dependencies to track array changes instead of string values Key changes: - Single selection (selectedGlobalState, selectedNamespace, selectedKind) → Array selection (selectedGlobalStates, selectedNamespaces, selectedKinds) - URL params: single value → comma-separated values (e.g., "globalState=up,down") - Filter UI: Dropdown with single selection → Multi-select with checkboxes and chips - Filter logic: OR logic within each filter category (object matches any selected value)
…e in real-time This commit fixes multiple critical bugs in the event buffering and flushing system that prevented real-time updates to the UI, particularly for freeze actions and node display issues. Issues Fixed 1. Event loss during flush - Events arriving during an active flush were silently ignored. Added needsFlush flag to queue events that arrive during flush and schedule an immediate re-flush after completion. 2. Stale store state - Store reference was captured once at the start of flush, causing subsequent updates to use outdated state. Now getState() is called for each update to always use the current state. 3. Object reference mutations - Used Object.assign() which mutated existing objects instead of creating new references, breaking Zustand's reactivity. Changed to use spread operator for proper shallow copies. 4. Partial event data loss - Multiple events for the same object would overwrite the buffer instead of merging. Now buffer updates merge with existing data instead of replacing it. 5. Missing shallow copy in store updates - setInstanceStatuses would mutate existing objects. Added explicit shallow copy before modifications. 6. Excessive flush delays - Reduced FLUSH_DELAY from 50ms to 10ms and MIN_FLUSH_INTERVAL from 50ms to 10ms for more responsive updates. 7. Duplicate return statement - Removed duplicate return in setNodeStatuses. Technical Changes - eventSourceManager.jsx: - Added needsFlush flag to detect events arriving during flush - Modified scheduleFlush() to queue events during flush instead of dropping them - Added re-flush logic in flushBuffers() finally block - Changed updateBuffer() to merge data instead of replacing it - Fixed hasObjectStatus/hasInstanceStatus merging to use spread operator - Call getState() for each store update instead of once at the start - Reduced buffer flush delays from 50ms/100ms to 10ms - useEventStore.js: - Fixed setInstanceStatuses to always create shallow copy before modification - Improved logging for debugging state changes The fix ensures that all event properties are preserved, frozen indicators display correctly, nodes are all shown, and the UI updates immediately when actions are performed without requiring a page refresh.
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.
Changes
Fix: Replaced Popper with Menu to resolve a Safari z-index issue causing dropdowns to appear behind other UI elements.
Feature (Objects): Reworked object filters from single-select to multi-select, allowing more flexible and powerful filtering.
Fix: Resolved Server-Sent Events (SSE) synchronization issues that could cause the UI to not update when backend events were received.
Impact
Better cross-browser behavior (especially Safari).
Improved user experience when filtering objects.
More reliable real-time UI updates driven by SSE events.
Testing
Manually tested filter behavior with multiple selections.
Verified dropdown rendering and layering in Safari.
Confirmed UI updates correctly on SSE events (no stale state observed).