Skip to content

Feat/search peers by mac - #683

Open
a-elkaim wants to merge 2 commits into
netbirdio:mainfrom
a-elkaim:feat/search-peers-by-mac
Open

a-elkaim wants to merge 2 commits into
netbirdio:mainfrom
a-elkaim:feat/search-peers-by-mac

Conversation

@a-elkaim

@a-elkaim a-elkaim commented Jun 26, 2026

Copy link
Copy Markdown

The management API now returns each peer's per-interface MAC addresses (in a new network_addresses field). This PR uses that data in the dashboard so you can search the peer list by MAC address and see a peer's MAC on its detail page.

Describe your changes

  • Search: peers are now matched by MAC in the User Devices / Servers list.
    Added a hidden mac column feeding the existing client-side global filter, and updated the search placeholder to
    "Search by name, IP, MAC, owner or group…".
  • Display: the peer detail page shows a copyable MAC Address row. A device that reports several interfaces lists each MAC, de-duplicated (the same NIC is otherwise repeated across its IPv4/IPv6 addresses).
  • Type: added NetworkAddress + network_addresses to the Peer interface and a small peerMacAddresses() helper.
  • Minor fix: right-justified value rows in Card.ListItem so copy icons line up in multi-line lists (the MAC list, and the existing Domain field).

Depends on the management API change that adds the network_addresses field to the peers response: netbirdio/netbird#6553 (netbirdio/netbird#6553). Without it the field is absent and the search/detail simply show nothing (no regression to existing behavior).

Issue ticket number and link

Discussion thread: https://netbirdio.slack.com/archives/C02KHAE8VLZ/p1782489164474579

Documentation

Select exactly one:

  • I added/updated documentation for this change
  • Documentation is not needed for this change (explain why)

This is a self-explanatory UI affordance (an extra searchable value and a field on the peer detail page); it doesn't introduce new concepts or workflows that require documentation.

Docs PR URL (required if "docs added" is checked)

N/A

E2E tests

Optional: override the image tags used by the Playwright e2e workflow.
Defaults to main when omitted.

management-cloud-tag: main
reverse-proxy-tag: main

Summary by CodeRabbit

  • New Features

    • Added MAC address visibility to peer details, showing a primary address and additional addresses when available.
    • Added a MAC address column to the peers table, displaying addresses as a comma-separated list when enabled.
  • Enhancements

    • Updated peer table search to include MAC addresses.
    • Improved card row alignment for clearer label and value presentation.

@CLAassistant

CLAassistant commented Jun 26, 2026

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

@coderabbitai

coderabbitai Bot commented Jun 26, 2026

Copy link
Copy Markdown
Contributor

Review Change StackReview Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 534a8d18-3555-44fc-a8c3-4e3bbdaa282c

📥 Commits

Reviewing files that changed from the base of the PR and between af271eb and dd13613.

📒 Files selected for processing (1)
  • src/app/(dashboard)/peer/page.tsx

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.


📝 Walkthrough

Walkthrough

Peer data now includes network address metadata and a helper that de-duplicates MAC addresses. The peer table adds a MAC column and search text. The peer details page conditionally displays MAC addresses.

Changes

Peer MAC address display

Layer / File(s) Summary
Peer network model
src/interfaces/Peer.ts
Adds NetworkAddress, Peer.network_addresses, and peerMacAddresses(peer) for filtered, de-duplicated MAC extraction.
Peers table MAC column
src/modules/peers/PeersTable.tsx
Imports the helper, adds a mac column, updates the search placeholder, and hides the column by default.
Peer details MAC row
src/app/(dashboard)/peer/page.tsx, src/components/Card.tsx
Imports the helper, conditionally renders a MAC address row, and adjusts CardTextItem alignment.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~15 minutes

Change: Feature

Suggested reviewers: heisbrot

Merge Risk: ⚪ Minimal · up to dd136

The MAC-address display changes have no unresolved merge-blocking risk in the available evidence.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 3 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly identifies the main change: enabling peer searches by MAC address. It is concise and directly related to the pull request.
Description check ✅ Passed The description explains the search, display, type, alignment, dependency, documentation decision, and E2E configuration. It follows the required template. The issue section provides a Slack discussio…
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
  • Fix all pre-merge checks with AI
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

A rabbit found MACs in the peer data,
And removed duplicates from the metadata.
The table can search and show each one,
The detail card displays the chosen.
The aligned values now sit just right. 🐇

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 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 `@src/app/`(dashboard)/peer/page.tsx:
- Around line 681-695: The MAC Address row in Card.ListItem is only copying the
first entry because it relies on value as the fallback copy source while
extraText is display-only. Update the peerMacAddresses(peer) rendering so the
clipboard content is built explicitly from the full set of MAC addresses, and
pass that separate copied value through the copy/copyText behavior in this
Card.ListItem usage. Keep the displayed value and notification text in sync with
the complete MAC address list, not just peerMacAddresses(peer)[0].
🪄 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: CHILL

Plan: Pro

Run ID: 90dd3d71-2ab1-4105-bea2-7fed6ae87144

📥 Commits

Reviewing files that changed from the base of the PR and between c325c17 and f351f51.

📒 Files selected for processing (4)
  • src/app/(dashboard)/peer/page.tsx
  • src/components/Card.tsx
  • src/interfaces/Peer.ts
  • src/modules/peers/PeersTable.tsx

Comment on lines +681 to +695
{peerMacAddresses(peer).length > 0 && (
<Card.ListItem
copy
copyText={"MAC Address"}
label={
<>
<NetworkIcon size={16} className={"shrink-0"} />
MAC Address
</>
}
className={
peerMacAddresses(peer).length > 1 ? "items-start" : ""
}
value={peerMacAddresses(peer)[0]}
extraText={peerMacAddresses(peer).slice(1)}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Copying this row drops all but the first MAC address.

Card.ListItem only copies valueToCopy (or value as a fallback), so this new row copies peerMacAddresses(peer)[0] and ignores extraText. For peers with multiple NICs, the clipboard content won't match what the UI shows.

Proposed fix
           {peerMacAddresses(peer).length > 0 && (
             <Card.ListItem
               copy
               copyText={"MAC Address"}
+              valueToCopy={peerMacAddresses(peer).join(", ")}
               label={
                 <>
                   <NetworkIcon size={16} className={"shrink-0"} />
                   MAC Address
                 </>

Based on learnings, the copied content should be passed separately from the notification text, and both should match the displayed value set.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{peerMacAddresses(peer).length > 0 && (
<Card.ListItem
copy
copyText={"MAC Address"}
label={
<>
<NetworkIcon size={16} className={"shrink-0"} />
MAC Address
</>
}
className={
peerMacAddresses(peer).length > 1 ? "items-start" : ""
}
value={peerMacAddresses(peer)[0]}
extraText={peerMacAddresses(peer).slice(1)}
{peerMacAddresses(peer).length > 0 && (
<Card.ListItem
copy
copyText={"MAC Address"}
valueToCopy={peerMacAddresses(peer).join(", ")}
label={
<>
<NetworkIcon size={16} className={"shrink-0"} />
MAC Address
</>
}
className={
peerMacAddresses(peer).length > 1 ? "items-start" : ""
}
value={peerMacAddresses(peer)[0]}
extraText={peerMacAddresses(peer).slice(1)}
🤖 Prompt for 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.

In `@src/app/`(dashboard)/peer/page.tsx around lines 681 - 695, The MAC Address
row in Card.ListItem is only copying the first entry because it relies on value
as the fallback copy source while extraText is display-only. Update the
peerMacAddresses(peer) rendering so the clipboard content is built explicitly
from the full set of MAC addresses, and pass that separate copied value through
the copy/copyText behavior in this Card.ListItem usage. Keep the displayed value
and notification text in sync with the complete MAC address list, not just
peerMacAddresses(peer)[0].

Source: Learnings

@a-elkaim
a-elkaim force-pushed the feat/search-peers-by-mac branch 2 times, most recently from 705fc20 to af271eb Compare August 3, 2026 17:52
Surface the network_addresses (IP + MAC) now returned by the management API.
Peers are searchable by MAC via a hidden table column wired into the global
filter, and their MAC address is shown on the peer detail page.
Right-justify each value row in Card.ListItem so the copy icons line up on
the column edge even when values render at slightly different widths (e.g.
the per-interface MAC address list on the peer detail page).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants