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