feat: show NAT type of all nodes in GUI (#1464)

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

@@ -22,6 +22,7 @@ const peerRouteInfos = computed(() => {
         ipv4_addr: my_node_info?.virtual_ipv4,
         hostname: my_node_info?.hostname,
         version: my_node_info?.version,
+        stun_info: my_node_info?.stun_info
       },
     }, ...(props.curNetworkInst.detail?.peer_route_pairs || [])]
   }
@@ -145,6 +146,34 @@ interface Chip {
   icon: string
 }
 
+// udp nat type
+enum NatType {
+  // has NAT; but own a single public IP, port is not changed
+  Unknown = 0,
+  OpenInternet = 1,
+  NoPAT = 2,
+  FullCone = 3,
+  Restricted = 4,
+  PortRestricted = 5,
+  Symmetric = 6,
+  SymUdpFirewall = 7,
+  SymmetricEasyInc = 8,
+  SymmetricEasyDec = 9,
+};
+
+const udpNatTypeStrMap = {
+  [NatType.Unknown]: 'Unknown',
+  [NatType.OpenInternet]: 'Open Internet',
+  [NatType.NoPAT]: 'No PAT',
+  [NatType.FullCone]: 'Full Cone',
+  [NatType.Restricted]: 'Restricted',
+  [NatType.PortRestricted]: 'Port Restricted',
+  [NatType.Symmetric]: 'Symmetric',
+  [NatType.SymUdpFirewall]: 'Symmetric UDP Firewall',
+  [NatType.SymmetricEasyInc]: 'Symmetric Easy Inc',
+  [NatType.SymmetricEasyDec]: 'Symmetric Easy Dec',
+}
+
 const myNodeInfoChips = computed(() => {
   if (!props.curNetworkInst)
     return []
@@ -213,35 +242,8 @@ const myNodeInfoChips = computed(() => {
     } as Chip)
   }
 
-  // udp nat type
-  enum NatType {
-    // has NAT; but own a single public IP, port is not changed
-    Unknown = 0,
-    OpenInternet = 1,
-    NoPAT = 2,
-    FullCone = 3,
-    Restricted = 4,
-    PortRestricted = 5,
-    Symmetric = 6,
-    SymUdpFirewall = 7,
-    SymmetricEasyInc = 8,
-    SymmetricEasyDec = 9,
-  };
   const udpNatType: NatType = my_node_info.stun_info?.udp_nat_type
   if (udpNatType !== undefined) {
-    const udpNatTypeStrMap = {
-      [NatType.Unknown]: 'Unknown',
-      [NatType.OpenInternet]: 'Open Internet',
-      [NatType.NoPAT]: 'No PAT',
-      [NatType.FullCone]: 'Full Cone',
-      [NatType.Restricted]: 'Restricted',
-      [NatType.PortRestricted]: 'Port Restricted',
-      [NatType.Symmetric]: 'Symmetric',
-      [NatType.SymUdpFirewall]: 'Symmetric UDP Firewall',
-      [NatType.SymmetricEasyInc]: 'Symmetric Easy Inc',
-      [NatType.SymmetricEasyDec]: 'Symmetric Easy Dec',
-    }
-
     chips.push({
       label: `UDP NAT Type: ${udpNatTypeStrMap[udpNatType]}`,
       icon: '',
@@ -272,6 +274,14 @@ function rxGlobalSum() {
   return globalSumCommon('stats.rx_bytes')
 }
 
+function natType(info: PeerRoutePair): string {
+  const udpNatType = info.route?.stun_info?.udp_nat_type;
+  if (udpNatType !== undefined)
+    return udpNatTypeStrMap[udpNatType as NatType]
+
+  return ''
+}
+
 const peerCount = computed(() => {
   if (!peerRouteInfos.value)
     return 0
@@ -439,6 +449,7 @@ function showEventLogs() {
             <Column :field="txBytes" :header="t('upload_bytes')" />
             <Column :field="rxBytes" :header="t('download_bytes')" />
             <Column :field="lossRate" :header="t('loss_rate')" />
+            <Column :field="natType" :header="t('nat_type')" />
             <Column :header="t('status.version')">
               <template #body="slotProps">
                 <span>{{ version(slotProps.data) }}</span>

easytier-web/frontend-lib/src/locales/cn.yaml

@@ -78,6 +78,7 @@ latency: 延迟
 upload_bytes: 上传
 download_bytes: 下载
 loss_rate: 丢包率
+nat_type: NAT 类型
 
 flags_switch: 功能开关
 

easytier-web/frontend-lib/src/locales/en.yaml

@@ -77,6 +77,7 @@ latency: Latency
 upload_bytes: Upload
 download_bytes: Download
 loss_rate: Loss Rate
+nat_type: NAT Type
 
 flags_switch: Feature Switch