Paginate the list/table renders the audit missed (#475)#489
Conversation
The #475 audit triaged several container components by filename and missed the unbounded lists they host; the drift panels were flagged but only their data source (#480) was fixed, never the badge rendering. Paginate all of them with the shared common/Pagination component: - ConversationDetail — packets table rendered every packet (the backend loads them uncapped); a 15k-packet conversation put 15k rows in the DOM. Now pages at 50, and a ?highlight deep-link jumps to the page holding that packet. - SnapshotDetailModal — Changes tab paginates a snapshot's change events (15/pg), matching the already-paged network-wide ChangeEventsSection. - NodeDetails — peers table (15/pg) and capture-history list (10/pg). - IpDriftPanel / ProtocolDriftPanel — per-group badge pagination (50/pg) inside the shared badge-group component, preserving the subnet / app-vs-protocol grouping. - DeviceDriftPanel — paginates the combined active/absent MAC badge cloud (50/pg). All clamp the page in render and reset on search/filter change so a shrinking list can't strand the view. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Warning Review limit reached
Next review available in: 24 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughSix frontend components (ConversationDetail, DeviceDriftPanel, IpDriftPanel, ProtocolDriftPanel, SnapshotDetailModal, NodeDetails) add local pagination state, page-size constants, and a shared Pagination control to previously fully-rendered lists of packets, badges, changes, peers, and history entries, slicing data for the current page. ChangesClient-side pagination rollout
Estimated code review effort: 2 (Simple) | ~12 minutes Sequence Diagram(s)Not applicable — the changes apply a consistent, repetitive pagination pattern across independent UI components without multi-component sequential interactions warranting a diagram. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces pagination across several components (including ConversationDetail, DeviceDriftPanel, IpDriftPanel, ProtocolDriftPanel, SnapshotDetailModal, and NodeDetails) to prevent rendering hundreds of badges or table rows at once, improving performance and usability. The review feedback highlights critical state-management issues where pagination and expansion states are not reset when switching between different entities (such as conversations or nodes) or when filtering lists via search. These omissions can cause users to be stranded on out-of-bounds pages or experience unexpected page jumps, and the reviewer has provided actionable code suggestions to reset these states using useEffect hooks.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/components/monitor/DeviceDriftPanel/DeviceDriftPanel.tsx`:
- Around line 109-118: The combined active/absent badge pagination logic is
duplicated in DeviceDriftPanel, IpDriftPanel, and ProtocolDriftPanel, so it
should be centralized to prevent divergence. Extract the shared behavior
currently in the badge-group logic into a reusable hook or generic component,
such as a paged-badge helper used by DeviceDriftPanel, IpBadgeGroup, and
BadgeGroup, and make those panels consume that shared implementation for
building the combined list, calculating currentPage/totalPages, slicing
pageItems, and rendering pagination controls.
In `@frontend/src/components/monitor/ProtocolDriftPanel/ProtocolDriftPanel.tsx`:
- Around line 52-63: The BadgeGroup pagination state in ProtocolDriftPanel is
not reset when the search filter changes, so users can stay on a stale page
after results shrink. Update the search onChange handler and/or the BadgeGroup
state flow in ProtocolDriftPanel.tsx to reset the local page state back to 1
whenever the filtered items/absentItems input changes, matching the behavior in
DeviceDriftPanel and keeping pagination aligned with the current filtered
results.
In `@frontend/src/components/network/NodeDetails/NodeDetails.tsx`:
- Around line 67-69: The peer/history pagination state in NodeDetails is not
being reset when the selected node changes, so users can carry over stale page
numbers between nodes. Update NodeDetails to reset both peersPage and
historyPage back to 1 in the existing “reset on entity change” effect that
already clears history state, and make sure the pagination logic in the node
data loaders/render paths uses those local state values consistently after a
node switch.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 14b1fe80-b27f-4756-a93e-9a7fe2c21059
📒 Files selected for processing (6)
frontend/src/components/conversation/ConversationDetail/ConversationDetail.tsxfrontend/src/components/monitor/DeviceDriftPanel/DeviceDriftPanel.tsxfrontend/src/components/monitor/IpDriftPanel/IpDriftPanel.tsxfrontend/src/components/monitor/ProtocolDriftPanel/ProtocolDriftPanel.tsxfrontend/src/components/monitor/SnapshotDetailModal/SnapshotDetailModal.tsxfrontend/src/components/network/NodeDetails/NodeDetails.tsx
…nges The render-time clamp prevented crashes, but the stale `page` state persisted, so clearing a search or switching entities could snap back to a stale page: - ConversationDetail: reset packetPage + collapse expanded hex on conversation.id change (before the highlight effect so a deep-link's page jump still wins). - IpBadgeGroup / BadgeGroup: reset page when the filtered item counts change (the parent search box). - NodeDetails: reset peersPage + historyPage on entity change (the modal isn't remounted between node selections). Addresses PR #489 review (Gemini + CodeRabbit). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1 participant
Fixes the Tier-1 gaps found when re-auditing #475 properly (after a user spotted an unpaginated Changes tab). See the reopened #475 accounting — the original audit triaged container components by filename and missed the lists they host, and the drift panels were flagged but only their data source (#480) was fixed, never the badge rendering.
Changes (all use the shared
common/Pagination)?highlightdeep-link jumps to the page holding that packetsnapshotEvents.map(), all eventsChangeEventsSection) — the user-spotted oneAll clamp the page in render and reset on search/filter change, so a shrinking list can't strand the view (the lessons from #479/#481).
Verification (Playwright, real over-threshold data, zero console errors)
tsc --noEmitclean;docker compose up -d --buildsucceeds.Not in this PR
Tier-2 (chat log, filter-option lists, per-payload hex, LLM timelines) — documented as conventionally-acceptable in #475, deferred.
🤖 Generated with Claude Code
Summary by CodeRabbit