gui use frontend-lib, fix memory leak (#467)

easytier-web/frontend-lib/package.json

@@ -22,6 +22,7 @@
     "@vueuse/core": "^11.1.0",
     "aura": "link:@primevue\\themes\\aura",
     "axios": "^1.7.7",
+    "floating-vue": "^5.2",
     "ip-num": "1.5.1",
     "primeicons": "^7.0.0",
     "primevue": "^4.2.1",
@@ -42,6 +43,6 @@
     "typescript": "~5.6.3",
     "vite": "^5.4.10",
     "vite-plugin-dts": "^4.3.0",
-    "vue-tsc": "^2.1.8"
+    "vue-tsc": "^2.1.10"
   }
 }

easytier-web/frontend-lib/src/components/Config.vue

@@ -8,7 +8,6 @@ import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{
   configInvalid?: boolean
-  instanceId?: string
   hostname?: string
 }>()
 

easytier-web/frontend-lib/src/components/Status.vue

@@ -4,7 +4,7 @@ import { IPv4 } from 'ip-num/IPNumber'
 import { NetworkInstance, type NodeInfo, type PeerRoutePair } from '../types/network'
 import { useI18n } from 'vue-i18n';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
-import { num2ipv4, num2ipv6 } from '../modules/utils';
+import { ipv4InetToString, ipv4ToString, ipv6ToString } from '../modules/utils';
 import { DataTable, Column, Tag, Chip, Button, Dialog, ScrollPanel, Timeline, Divider, Card, } from 'primevue';
 
 const props = defineProps<{
@@ -138,7 +138,7 @@ const myNodeInfoChips = computed(() => {
 
   // virtual ipv4
   chips.push({
-    label: `Virtual IPv4: ${my_node_info.virtual_ipv4}`,
+    label: `Virtual IPv4: ${ipv4InetToString(my_node_info.virtual_ipv4)}`,
     icon: '',
   } as Chip)
 
@@ -146,7 +146,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}: ${num2ipv4(ip)}`,
+      label: `Local IPv4 ${idx}: ${ipv4ToString(ip)}`,
       icon: '',
     } as Chip)
   }
@@ -155,7 +155,7 @@ 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}: ${num2ipv6(ip)}`,
+      label: `Local IPv6 ${idx}: ${ipv6ToString(ip)}`,
       icon: '',
     } as Chip)
   }
@@ -172,7 +172,7 @@ const myNodeInfoChips = computed(() => {
   const public_ipv6 = my_node_info.ips?.public_ipv6
   if (public_ipv6) {
     chips.push({
-      label: `Public IPv6: ${num2ipv6(public_ipv6)}`,
+      label: `Public IPv6: ${ipv6ToString(public_ipv6)}`,
       icon: '',
     } as Chip)
   }

easytier-web/frontend-lib/src/easytier-frontend-lib.ts

@@ -8,12 +8,17 @@ import PrimeVue from 'primevue/config'
 import I18nUtils from './modules/i18n'
 import * as NetworkTypes from './types/network'
 import HumanEvent from './components/HumanEvent.vue';
-import Tooltip from 'primevue/tooltip';
+
+// do not use primevue tooltip, it has serious memory leak issue
+// https://github.com/primefaces/primevue/issues/5856
+// import Tooltip from 'primevue/tooltip';
+import { vTooltip } from 'floating-vue';
+
 import * as Api from './modules/api';
 import * as Utils from './modules/utils';
 
 export default {
-    install: (app: App) => {
+    install: (app: App): void => {
         app.use(I18nUtils.i18n, { useScope: 'global' })
         app.use(PrimeVue, {
             theme: {
@@ -32,7 +37,7 @@ export default {
         app.component('Config', Config);
         app.component('Status', Status);
         app.component('HumanEvent', HumanEvent);
-        app.directive('tooltip', Tooltip);
+        app.directive('tooltip', vTooltip as any);
     }
 };
 

easytier-web/frontend-lib/src/modules/utils.ts

@@ -1,11 +1,18 @@
 import { IPv4, IPv6 } from 'ip-num/IPNumber'
-import { Ipv4Addr, Ipv6Addr } from '../types/network'
+import { Ipv4Addr, Ipv4Inet, Ipv6Addr } from '../types/network'
 
-export function num2ipv4(ip: Ipv4Addr) {
-    return IPv4.fromNumber(ip.addr)
+export function ipv4ToString(ip: Ipv4Addr) {
+    return IPv4.fromNumber(ip.addr).toString()
 }
 
-export function num2ipv6(ip: Ipv6Addr) {
+export function ipv4InetToString(ip: Ipv4Inet | undefined) {
+    if (ip?.address === undefined) {
+        return 'undefined'
+    }
+    return `${ipv4ToString(ip.address)}/${ip.network_length}`
+}
+
+export function ipv6ToString(ip: Ipv6Addr) {
     return IPv6.fromBigInt(
         (BigInt(ip.part1) << BigInt(96))
         + (BigInt(ip.part2) << BigInt(64))

easytier-web/frontend-lib/src/style.css

@@ -1,4 +1,5 @@
 @import 'primeicons/primeicons.css';
+@import 'floating-vue/dist/style.css';
 
 .frontend-lib {
 

easytier-web/frontend-lib/src/types/network.ts

@@ -85,7 +85,6 @@ export interface NetworkInstanceRunningInfo {
   dev_name: string
   my_node_info: NodeInfo
   events: Array<string>,
-  node_info: NodeInfo
   routes: Route[]
   peers: PeerInfo[]
   peer_route_pairs: PeerRoutePair[]
@@ -97,6 +96,11 @@ export interface Ipv4Addr {
   addr: number
 }
 
+export interface Ipv4Inet {
+  address: Ipv4Addr
+  network_length: number
+}
+
 export interface Ipv6Addr {
   part1: number
   part2: number
@@ -109,7 +113,7 @@ export interface Url {
 }
 
 export interface NodeInfo {
-  virtual_ipv4: string
+  virtual_ipv4: Ipv4Inet,
   hostname: string
   version: string
   ips: {
@@ -143,10 +147,7 @@ export interface StunInfo {
 
 export interface Route {
   peer_id: number
-  ipv4_addr: {
-    address: Ipv4Addr
-    network_length: number
-  } | string | null
+  ipv4_addr: Ipv4Inet | string | null
   next_hop_peer_id: number
   cost: number
   proxy_cidrs: string[]