feat: device fingerprinting icons in network graph nodes#5
Conversation
…urvol - MAX_ROWS passé de 5 à 500 - tbody scrollable avec scrollbar fine - auto-scroll vers le bas sur nouveaux paquets - pause auto-scroll si l'utilisateur remonte dans l'historique Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add OUI-based MAC vendor lookup (~80 entries: Apple, Cisco, Ubiquiti, TP-Link, Raspberry Pi, Samsung, Dell, HP, VMware, Microsoft, printers…) - Add IP heuristics (.1/.254 → router, public IP → internet) - Override-node slot renders colored ring (private/public) + dark fill + SVG icon - 10 device types: router, server, computer, phone, apple, windows, linux, printer, vm, internet (default: server) - Manual override via dropdown in node edit panel, updates graph immediately - Update README with all implemented features Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly upgrades the network analysis tool by introducing intelligent device fingerprinting and visualization within the network graph, allowing for clearer identification of connected devices. It also brings crucial performance and usability enhancements to the real-time packet table, ensuring a smoother experience when monitoring high-traffic captures. The changes aim to provide users with more insightful and interactive network visualizations. Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![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 a great new feature for device fingerprinting in the network graph, complete with automatic detection via OUI/IP and manual overrides. The custom node icons are a nice touch and significantly improve the graph's readability. The related updates to the packet table for auto-scrolling and performance are also valuable additions.
I've found a few issues to address:
- A critical syntax error in
BottomLong.vuedue to incorrect quote characters. - A memory leak in the same component from an un-removed event listener.
- A couple of medium-severity items in
NetworkGraphComponent.vuerelated to improving IPv6 detection and code clarity.
Once these are fixed, this will be a solid contribution.
| // Si ton store renvoie une fonction d’unsubscribe, garde-la | ||
| const maybeOff = this.captureStore.onPacket(onPacket) | ||
| if (typeof maybeOff === 'function') this.offPacket = maybeOff | ||
| if (typeof maybeOff === ‘function’) this.offPacket = maybeOff |
There was a problem hiding this comment.
This line uses typographic quotes (‘ and ’) instead of standard single quotes ('). This will cause a JavaScript syntax error and prevent the component from working correctly. The same issue is present on line 84.
if (typeof maybeOff === 'function') this.offPacket = maybeOff
| // Pause auto-scroll si l’utilisateur remonte | ||
| const tbody = this.$refs.tbodyEl as HTMLElement | undefined | ||
| if (tbody) { | ||
| tbody.addEventListener(‘scroll’, () => { |
There was a problem hiding this comment.
This line uses a typographic quote (‘) instead of a standard single quote ('). This will cause a JavaScript syntax error.
tbody.addEventListener('scroll', () => {
| const tbody = this.$refs.tbodyEl as HTMLElement | undefined | ||
| if (tbody) { | ||
| tbody.addEventListener(‘scroll’, () => { | ||
| const atBottom = tbody.scrollHeight - tbody.scrollTop - tbody.clientHeight < 32 | ||
| this.autoScroll = atBottom | ||
| }) | ||
| } |
There was a problem hiding this comment.
An event listener is added to the tbody element here, but it's never removed. This will cause a memory leak because the listener holds a reference to the component instance, preventing it from being garbage collected when it's unmounted. You should store the listener function in data and remove it in the beforeUnmount lifecycle hook, similar to how it's done for export handlers in NetworkGraphComponent.vue.
| if (ip) { | ||
| const last = ip.split(".").pop() || "" | ||
| if (last === "1" || last === "254") return "router" | ||
| if (!isPrivateIp(ip) && /^\d+\.\d+\.\d+\.\d+$/.test(ip)) return "internet" |
There was a problem hiding this comment.
The current logic for detecting an 'internet' device only checks for public IPv4 addresses. Public IPv6 addresses will not be correctly identified and will fall back to the default 'server' type. You should extend this check to also identify public IPv6 addresses.
if (!isPrivateIp(ip) && (/^\d+\.\d+\.\d+\.\d+$/.test(ip) || ip.includes(':'))) return "internet"
| this.editedLabel = "" | ||
| this.editedDeviceType = "" | ||
| }, | ||
| async editNodeLabel() { |
There was a problem hiding this comment.
The name editNodeLabel is now misleading, as the method also updates the device type. Consider renaming it to something more descriptive, like saveNodeChanges or updateNodeProperties, to better reflect its new functionality. Remember to also update the call site in the template (line 892).
1 participant
Summary
#override-nodeslot renders a colored ring (private/public indicator) + dark fill + SVG icon per device typeshallowReactivenode replacementTest plan
.1/.254addresses get router icon🤖 Generated with Claude Code