feat(webui/node): redesign node page #327
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## unstable #327 +/- ##
============================================
+ Coverage 43.38% 47.08% +3.69%
============================================
Files 37 45 +8
Lines 2971 4420 +1449
============================================
+ Hits 1289 2081 +792
- Misses 1544 2130 +586
- Partials 138 209 +71
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull Request Overview
This PR redesigns the node page in the webui with a complete UI overhaul, introducing a responsive sidebar, comprehensive search/filter functionality, and a modernized card-based layout for displaying nodes. The changes significantly enhance the user experience by adding mobile responsiveness and improved visual hierarchy.
- Added responsive sidebar with mobile toggle functionality and adaptive width
- Implemented search, filter, and sort controls for nodes with comprehensive filter/sort popovers
- Redesigned node display from grid cards to a streamlined list-based layout with enhanced visual elements
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| webui/src/app/ui/sidebar.tsx | Added responsive sidebar with mobile detection, toggle functionality, and adaptive width controls |
| webui/src/app/ui/formDialog.tsx | Updated dialog typography from subtitle1 to h6 and enhanced input styling with increased height |
| webui/src/app/ui/formCreation.tsx | Added optional children prop to NodeCreation component for custom trigger elements |
| webui/src/app/namespaces/[namespace]/clusters/[cluster]/shards/[shard]/page.tsx | Complete page redesign with search/filter/sort functionality and modernized node display layout |
Comments suppressed due to low confidence (4)
webui/src/app/namespaces/[namespace]/clusters/[cluster]/shards/[shard]/page.tsx:143
- The sort option 'uptime-desc' is misleading as it actually sorts by creation time (newest first), not uptime. Consider renaming to 'created-desc' or 'newest' for clarity.
case "uptime-desc":
webui/src/app/namespaces/[namespace]/clusters/[cluster]/shards/[shard]/page.tsx:145
- The sort option 'uptime-asc' is misleading as it actually sorts by creation time (oldest first), not uptime. Consider renaming to 'created-asc' or 'oldest' for clarity.
case "uptime-asc":
webui/src/app/namespaces/[namespace]/clusters/[cluster]/shards/[shard]/page.tsx:465
- The label 'Newest' corresponds to 'uptime-desc' sort option, but the actual sorting is by creation time. This creates confusion between uptime and creation time concepts.
Newest
webui/src/app/namespaces/[namespace]/clusters/[cluster]/shards/[shard]/page.tsx:489
- The label 'Oldest' corresponds to 'uptime-asc' sort option, but the actual sorting is by creation time. This creates confusion between uptime and creation time concepts.
Oldest
| if (!`node ${idx + 1}`.toLowerCase().includes(searchTerm.toLowerCase())) { | ||
| return false; | ||
| } |
There was a problem hiding this comment.
The search logic uses a hardcoded string 'node ${idx + 1}' which creates a coupling between the search functionality and the display label. Consider extracting this to a utility function or using actual node properties for searching.
| if (!`node ${idx + 1}`.toLowerCase().includes(searchTerm.toLowerCase())) { | |
| return false; | |
| } | |
| const displayLabel = generateNodeLabel(idx); | |
| if (!displayLabel.toLowerCase().includes(searchTerm.toLowerCase())) { | |
| return false; |
Copilot uses AI. Check for mistakes.
|
Thank you for your contribution! |
redesigned node page
