feat(webui/shard): redesign shard page #325
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR redesigns the shard page with a complete UI overhaul, featuring improved mobile responsiveness, enhanced filtering and sorting capabilities, and a more modern dashboard-style interface.
- Transforms the shard listing from a simple grid to a sophisticated table with search, filter, and sort functionality
- Adds comprehensive resource statistics dashboard with visual metrics for shards, nodes, slots, and migration status
- Implements responsive design improvements for the sidebar with mobile-specific toggle behavior
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| webui/src/app/ui/sidebar.tsx | Adds mobile responsiveness with dynamic width control and toggle functionality |
| webui/src/app/ui/formCreation.tsx | Extends ShardCreation component to support children prop for flexible button rendering |
| webui/src/app/namespaces/[namespace]/clusters/[cluster]/page.tsx | Complete redesign with dashboard metrics, advanced filtering/sorting, and responsive layout |
| onClick: () => {}, | ||
| }} | ||
| /> | ||
| </Box> | ||
| <div className="hidden"> | ||
| <ShardCreation | ||
| position="card" | ||
| namespace={namespace} | ||
| cluster={cluster} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
The EmptyState action onClick handler is defined as an empty function () => {}, which means clicking the 'Create Shard' button will do nothing. This should either trigger the ShardCreation dialog or be removed if not functional.
Copilot uses AI. Check for mistakes.
| onClick: () => {}, | ||
| }} | ||
| /> | ||
| </Box> | ||
| <div className="hidden"> | ||
| <ShardCreation | ||
| position="card" | ||
| namespace={namespace} | ||
| cluster={cluster} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
The ShardCreation component is rendered with className="hidden" which suggests it's not being used properly. If this is meant to be triggered by the EmptyState action, it should be implemented correctly rather than hidden.
Copilot uses AI. Check for mistakes.
| setSortAnchorEl(null); | ||
| }; | ||
|
|
||
| const filteredAndSortedShards = shardsData |
There was a problem hiding this comment.
The filtering and sorting logic runs on every render without memoization. Consider using useMemo to optimize performance, especially with large datasets: const filteredAndSortedShards = useMemo(() => shardsData.filter(...).sort(...), [shardsData, searchTerm, filterOption, sortOption])
Copilot uses AI. Check for mistakes.
| > | ||
| Cluster in namespace: {namespace} | ||
| Manage shards in this cluster |
There was a problem hiding this comment.
[nitpick] Consider using more descriptive text. 'Manage shards in this cluster' could be 'View and manage cluster shards' or 'Monitor cluster shard distribution' for better clarity.
| Manage shards in this cluster | |
| View and manage cluster shards |
Copilot uses AI. Check for mistakes.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## unstable #325 +/- ##
============================================
+ Coverage 43.38% 47.01% +3.62%
============================================
Files 37 45 +8
Lines 2971 4401 +1430
============================================
+ Hits 1289 2069 +780
- Misses 1544 2124 +580
- Partials 138 208 +70
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:
|
|
@Jitmisra Thanks for your great improvement. |
redesigned shard page. If you have any feedback or want to add anything, feel free to tell.
Monosnap.screencast.2025-07-14.03-46-04.mp4