UI & Cluster Enhancements + Test Coverage Improvements#63
Merged
cgalibern merged 17 commits intoopensvc:mainfrom Feb 20, 2026
Merged
UI & Cluster Enhancements + Test Coverage Improvements#63cgalibern merged 17 commits intoopensvc:mainfrom
cgalibern merged 17 commits intoopensvc:mainfrom
Conversation
- Added tableLayout: 'fixed' and width: '100%' to Table component for consistent layout - Defined explicit minWidth, width, and maxWidth for all table cells: - Selection column: 60px fixed width - Status column: 150px fixed width - Object column: 200px min width with auto expansion - Node columns: 130px fixed width each - Actions column: 100px fixed width - Added boxSizing: 'border-box' to include padding in total width calculations - Applied consistent padding values across header and body cells - Added noWrap to object name text to prevent content-based width changes - Ensured column headers and body cells share identical width properties - Fixed table overflow and scroll behavior with proper container styling These changes ensure column spacing remains stable during scroll and when displaying large numbers of rows, preventing layout shifts that occurred when many rows were rendered.
Add support for creating empty keys, text input, and binary visualization in the KeysSection component.
Changes:
- Add ability to create keys without content (empty keys)
- Add text input mode for creating/updating keys directly from text
- Add key visualization dialog with automatic binary/text detection
- Display binary content in hexadecimal format with ASCII representation
- Add input mode selection via radio buttons for create (empty/file/text) and update (file/text) operations
- Add view button with eye icon for each key in the table
UI improvements:
- New FormControl with RadioGroup for input mode selection in create dialog
- TextField multiline support for direct text input
- View dialog shows content type indicator (Text/Binary)
- Binary content displayed in hex dump format (offset, hex bytes, ASCII)
- Text content displayed in monospace font for better readability
Technical details:
- handleViewKey: Fetches key content and determines if text or binary
- Text detection uses UTF-8 decoder with printable character validation
- Binary content formatted as hex dump with 16 bytes per line
- Empty key creation sends empty Blob to API
- Text input mode converts text to Blob before API submission
- All existing functionality preserved and backward compatible
Tests:
- Update KeysSection.test.js to support new radio button interface
- Add helper function selectInputMode for test interaction with radio buttons
- Update uploadFile helper to select file mode before uploading
- Fix React reference error in Material-UI mocks using require('react')
- All existing tests updated and passing
Related components:
- KeysSection.jsx: Main implementation
- KeysSection.test.js: Updated test suite
…ip style -Remove unfrozenCount prop from GridNodes component and its usages -Replace plain text subtitle with a styled Chip for frozen count display -Use info.main color for frozen chip to align with other status chips -Add loading state and ClickLoader next to the chip for consistent UX -Maintain card click behavior and chip click navigation to /nodes
… grouping Refactor heartbeat statistics to use base IDs (strip .rx/.tx suffixes) Update GridHeartbeats to show aggregated health status per base ID Modify filtering logic to match against base IDs in Heartbeats component Add perHeartbeatStats tracking for detailed health information Improve URL parameter handling for heartbeat ID filtering
- Add pools state in ClusterOverview to store full pool list - Pass pools data to GridPools component via gridPoolsProps - Enhance GridPools to display chips for each pool showing: - Pool name - Usage percentage - Visual warning (red background) when free space < 10% - Maintain existing navigation behavior on card click
…ponsiveness - Split "My Information" and "Permission Details" into two separate cards - Reposition action buttons (Dark Mode & Logout) under the left column cards on desktop - Ensure buttons appear at the bottom of the page on mobile using useMediaQuery - Reduce vertical padding and use compact typography to minimize empty space - Add "Identity" heading back to satisfy existing tests - Use CSS Grid and Flexbox for balanced column heights and better space utilization - Maintain all existing functionality and test coverage
Exclude 'n/a' status objects from being displayed in the NamespaceChip component to clean up the UI. Only show up, warn, down, and unprovisioned status indicators for a clearer visualization of namespace health. - Modified statusTypes array in NamespaceChip to exclude 'n/a' - Grey objects no longer appear as small status dots on namespace chips
- Create useKindData hook to aggregate object statuses by kind from event store - Implement Kinds page with table display, sorting, filtering, and infinite scroll - Add GridKinds component to cluster overview showing kind chips with status dots - Exclude 'n/a' (grey) status objects from display in both Namespaces and Kinds grids - Update ClusterStatGrids.jsx with new GridKinds component and KindChip - Modify Cluster.jsx to integrate GridKinds in the right column alongside GridNamespaces - Add route for /kinds in App.jsx with lazy loading - Update NavBar with FaTags icon for Kinds menu item - Enhance Cluster.test.js with: - Mock for useKindData hook - GridKinds component in ClusterStatGrids mock - Tests for kind count display and navigation - Proper initialization of kind data in all test cases This addition provides users with a new way to visualize and filter objects by their kind, complementing the existing namespace-based views and improving cluster observability.
…n tests This commit replaces the entire ClusterStatGrids test file with comprehensive tests for the ConfigSection component. The new test suite includes: -Mock implementations for Material-UI components, icons, and localStorage -Tests for configuration display and dialog interactions -Configuration file upload and update functionality -Parameter management (add, unset, delete operations) -Error handling for various failure scenarios -Network error handling and loading states -Edge cases (missing tokens, invalid inputs, empty states) -Keyword dialog functionality with d
- Add conditional filter panel visibility based on screen size - Filters always visible on wide screens (lg and up) - Filters collapsed by default on mobile devices - Filter toggle button only appears on mobile screens - Fix Objects component filter initialization - Initialize showFilters based on isWideScreen to ensure proper visibility - Maintain filter state consistency across screen size changes - Update Heartbeats component with same responsive pattern - Add isWideScreen media query for consistent behavior - Implement conditional filter button display - Fix Objects test suite - Reset useMediaQuery mock after each test to prevent state leakage - Update filter toggle test to use aria-label instead of text content - Ensure node columns visibility tests work correctly - Fix all failing test cases related to responsive behavior This change improves mobile usability by reducing visual clutter while maintaining full filter functionality on desktop displays.
- Delete the Typography components displaying item counts in Objects, Namespaces, Heartbeats, and Kinds pages - Remove the associated Box wrappers that contained the count information - Maintain all other functionality including filters, sorting, and infinite scrolling - Keep loading indicators and empty state messages intact
…con for better visibility - Replace custom <span>×</span> delete icons with MUI CloseIcon in filter chips - Set fontSize="small" to maintain consistency with chip size="small" - Preserve cursor:pointer style for better UX - Apply changes to Global State, Namespace, and Kind filter chips This improves the visibility and clickability of the delete buttons on filter chips, addressing the issue of previously too small and unclear removal indicators.
-Added dedicated onChange handlers for each Select component to manage multiple selections. -Removed checkbox-specific onChange handlers inside MenuItem; checkboxes now only display checked state. -Full row click in the dropdown now toggles selection, improving usability. -Preserved chip delete functionality for quick removal of selected filters.
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 multiple UI improvements, new features, layout refinements, and significant test coverage enhancements across the application.