Feature: Add External / Internal IPs to UI#1069
Conversation
- Added externalIP to GraphQL queries (GET_HOST_QUERY, GET_TASK_QUERY, GET_TAG_FILTERS) - Updated HostNode TypeScript interface to include externalIP - Updated HostTile component to show both IPs in hosts list - Updated HostDetailsSection to show both IPs in host details page - Updated BeaconTile to show both IPs for beacons - Updated TaskHostBeacon to show both IPs in task cards - Rebuilt frontend assets
|
Right now, if an imix agent fails to determine the internal (primary) IP address, it returns an empty string "". If tavern fails to determine the external IP address, it returns "unknown". This becomes a bit of a mismatch on the frontend, and we should look into normalizing it. I believe it would be better for imix to also return "unknown" if it fails to get the primary IP. |
cmp5987
left a comment
cmp5987
left a comment
There was a problem hiding this comment.
Hello Bri5ee, Thanks for contributing this.
I think as we start to add more tags to beacons, we are going to want to add icon symbols to represent the tag types rather than text labels like 'External/Internal'.
If you would like to take this next step,
- Install Lucid so we can have more expansive icons, we can slowly swap away from heroicons
- Modify badges to optionally display icons to the left of text.
- For 'External IP' display the globe icon
- For 'Internal IP' display the network icon
If not, we can merge this as is and add this tag iconography improvement to our backlog.
|
Hey @cmp5987! Got around to doing this. Would something like this be what you're looking for? 
Note the environment I'm deving this in does not have 1:1 NAT so the IPs internal/external are the same but the functionality works. |
|
Thanks for making that change. I think we were looking to remove the 'internal' and external' as well and keep just the icon. Mind just pushing those changes so I can review them and give approval. The issue KaliPatriot mentioned, we can tackle that in a different (backend) PR. |
|
Yep sounds good I'll get that pushed out by EOD =] |
- Install lucide-react package for icon library - Add Globe icon for External IP badges - Add Network icon for Internal IP badges - Update Badge component to properly render left icons with spacing - Update HostTile, BeaconTile, TaskHostBeacon, and HostDetailsSection components - Remove text labels, display only icons with IP addresses - Build production bundle with updated changes
|
Alright should be good to go let me know if there's anything I need to change =] |
cmp5987
left a comment
cmp5987
left a comment
There was a problem hiding this comment.
Really great job on this PR, Thanks for the contribution!
|
@bri5ee can you re-run: |
* feat: display both internal and external IPs across all UI components * Added externalIP to GraphQL queries (GET_HOST_QUERY, GET_TASK_QUERY, GET_TAG_FILTERS) * Add Lucide icons to External/Internal IP badges
4 participants
Adds display of external IP addresses alongside internal IPs throughout the UI. This helps with competitions that utilize 1:1 NAT where beacons would all show the same IP address as they all have the same internal IP address and the external IP address would need to be identified to determine which team is which. For example, in the image below the internal IP address would be the same IP address for that host across every team. However, the external IP address would be something along the lines of 172.16.{team number}.{box number} where the {box number} would stay the same i.e. 106 but the {team number} would change i.e. 172.16.1.106, 172.16.2.106, 172.16.3.106, etc.
externalIPfield to GraphQL queries (GET_HOST_QUERY,GET_TASK_QUERY,GET_TAG_FILTERS)HostNodeTypeScript interface to includeexternalIPHostTile)HostDetailsSection)BeaconTile)TaskHostBeacon)