Fix IP address display in the status page of GUI

Signed-off-by: Hs_Yeah <bYeahq@gmail.com>

easytier-gui/package.json

@@ -19,6 +19,7 @@
     "@tauri-apps/plugin-process": "2.0.0-rc.1",
     "@tauri-apps/plugin-shell": "2.0.0-rc.1",
     "aura": "link:@primevue/themes/aura",
+    "ip-num": "1.5.1",
     "pinia": "^2.2.2",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",

easytier-gui/pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       aura:
         specifier: link:@primevue/themes/aura
         version: link:@primevue/themes/aura
+      ip-num:
+        specifier: 1.5.1
+        version: 1.5.1
       pinia:
         specifier: ^2.2.2
         version: 2.2.2(typescript@5.6.2)(vue@3.5.3(typescript@5.6.2))
@@ -2243,6 +2246,9 @@ packages:
     resolution: {integrity: sha512-2qVAe0Q9+Y+5nGvmogwK9y4kefD5Ks5l/IG0Jo1lhU9gIF34jifhqrwXwzkIl+LC594Q6SyAlngs4p890xsXVw==}
     engines: {node: '>=16'}
 
+  ip-num@1.5.1:
+    resolution: {integrity: sha512-QziFxgxq3mjIf5CuwlzXFYscHxgLqdEdJKRo2UJ5GurL5zrSRMzT/O+nK0ABimoFH8MWF8YwIiwECYsHc1LpUQ==}
+
   ip-regex@5.0.0:
     resolution: {integrity: sha512-fOCG6lhoKKakwv+C6KdsOnGvgXnmgfmp0myi3bcNwj3qfwPAxRKWEuFhvEFF7ceYIz6+1jRZ+yguLFAmUNPEfw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -5846,6 +5852,8 @@ snapshots:
 
   ip-bigint@7.3.0: {}
 
+  ip-num@1.5.1: {}
+
   ip-regex@5.0.0: {}
 
   is-arrayish@0.2.1: {}

easytier-gui/src/components/Status.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { IPv4, IPv6 } from 'ip-num/IPNumber'
 import type { NodeInfo, PeerRoutePair } from '~/types/network'
 
 const props = defineProps<{
@@ -150,7 +151,7 @@ const myNodeInfoChips = computed(() => {
   const local_ipv4s = my_node_info.ips?.interface_ipv4s
   for (const [idx, ip] of local_ipv4s?.entries()) {
     chips.push({
-      label: `Local IPv4 ${idx}: ${ip}`,
+      label: `Local IPv4 ${idx}: ${IPv4.fromNumber(ip.addr)}`,
       icon: '',
     } as Chip)
   }
@@ -159,7 +160,11 @@ const myNodeInfoChips = computed(() => {
   const local_ipv6s = my_node_info.ips?.interface_ipv6s
   for (const [idx, ip] of local_ipv6s?.entries()) {
     chips.push({
-      label: `Local IPv6 ${idx}: ${ip}`,
+      label: `Local IPv6 ${idx}: ${IPv6.fromBigInt((BigInt(ip.part1) << BigInt(96))
+        + (BigInt(ip.part2) << BigInt(64))
+        + (BigInt(ip.part3) << BigInt(32))
+        + BigInt(ip.part4),
+      )}`,
       icon: '',
     } as Chip)
   }
@@ -168,7 +173,19 @@ const myNodeInfoChips = computed(() => {
   const public_ip = my_node_info.ips?.public_ipv4
   if (public_ip) {
     chips.push({
-      label: `Public IP: ${public_ip}`,
+      label: `Public IP: ${IPv4.fromNumber(public_ip.addr)}`,
+      icon: '',
+    } as Chip)
+  }
+
+  const public_ipv6 = my_node_info.ips?.public_ipv6
+  if (public_ipv6) {
+    chips.push({
+      label: `Public IPv6: ${IPv6.fromBigInt((BigInt(public_ipv6.part1) << BigInt(96))
+        + (BigInt(public_ipv6.part2) << BigInt(64))
+        + (BigInt(public_ipv6.part3) << BigInt(32))
+        + BigInt(public_ipv6.part4),
+      )}`,
       icon: '',
     } as Chip)
   }

easytier-gui/src/types/network.ts

@@ -91,15 +91,26 @@ export interface NetworkInstanceRunningInfo {
   error_msg?: string
 }
 
+export interface Ipv4Addr {
+  addr: number
+}
+
+export interface Ipv6Addr {
+  part1: number
+  part2: number
+  part3: number
+  part4: number
+}
+
 export interface NodeInfo {
   virtual_ipv4: string
   hostname: string
   version: string
   ips: {
-    public_ipv4: string
-    interface_ipv4s: string[]
-    public_ipv6: string
-    interface_ipv6s: string[]
+    public_ipv4: Ipv4Addr
+    interface_ipv4s: Ipv4Addr[]
+    public_ipv6: Ipv6Addr
+    interface_ipv6s: Ipv6Addr[]
     listeners: {
       serialization: string
       scheme_end: number

easytier/src/proto/common.proto

@@ -62,8 +62,10 @@ enum NatType {
 message Ipv4Addr { uint32 addr = 1; }
 
 message Ipv6Addr {
-  uint64 high = 1;
-  uint64 low = 2;
+  uint32 part1 = 1;
+  uint32 part2 = 2;
+  uint32 part3 = 3;
+  uint32 part4 = 4;
 }
 
 message Url { string url = 1; }

easytier/src/proto/common.rs

@@ -45,19 +45,25 @@ impl From<std::net::Ipv6Addr> for Ipv6Addr {
     fn from(value: std::net::Ipv6Addr) -> Self {
         let b = value.octets();
         Self {
-            low: u64::from_be_bytes([b[0], b[1], b[2], b[3], b[4], b[5], b[6], b[7]]),
-            high: u64::from_be_bytes([b[8], b[9], b[10], b[11], b[12], b[13], b[14], b[15]]),
+            part1: u32::from_be_bytes([b[0], b[1], b[2], b[3]]),
+            part2: u32::from_be_bytes([b[4], b[5], b[6], b[7]]),
+            part3: u32::from_be_bytes([b[8], b[9], b[10], b[11]]),
+            part4: u32::from_be_bytes([b[12], b[13], b[14], b[15]]),
         }
     }
 }
 
 impl From<Ipv6Addr> for std::net::Ipv6Addr {
     fn from(value: Ipv6Addr) -> Self {
-        let low = value.low.to_be_bytes();
-        let high = value.high.to_be_bytes();
+        let part1 = value.part1.to_be_bytes();
+        let part2 = value.part2.to_be_bytes();
+        let part3 = value.part3.to_be_bytes();
+        let part4 = value.part4.to_be_bytes();
         std::net::Ipv6Addr::from([
-            low[0], low[1], low[2], low[3], low[4], low[5], low[6], low[7], high[0], high[1],
-            high[2], high[3], high[4], high[5], high[6], high[7],
+            part1[0], part1[1], part1[2], part1[3], 
+            part2[0], part2[1], part2[2], part2[3], 
+            part3[0], part3[1], part3[2], part3[3], 
+            part4[0], part4[1], part4[2], part4[3]
         ])
     }
 }