Merge pull request #417 from EasyTier/perf/detail

🎈 perf: event log

EasyTier.code-workspace

@@ -4,84 +4,23 @@
 			"path": "."
 		},
 		{
+			"name": "gui",
 			"path": "easytier-gui"
 		},
 		{
+			"name": "core",
 			"path": "easytier"
+		},
+		{
+			"name": "vpnservice",
+			"path": "tauri-plugin-vpnservice"
 		}
 	],
 	"settings": {
-		"eslint.useFlatConfig": true,
+		"i18n-ally.sourceLanguage": "cn",
+		"i18n-ally.keystyle": "nested",
+		"i18n-ally.sortKeys": true,
+		// Disable the default formatter
 		"prettier.enable": false,
-		"editor.formatOnSave": false,
-		"editor.codeActionsOnSave": {
-			"source.fixAll.eslint": "explicit",
-			"source.organizeImports": "never"
-		},
-		"eslint.rules.customizations": [
-			{
-				"rule": "style/*",
-				"severity": "off"
-			},
-			{
-				"rule": "style/eol-last",
-				"severity": "error"
-			},
-			{
-				"rule": "format/*",
-				"severity": "off"
-			},
-			{
-				"rule": "*-indent",
-				"severity": "off"
-			},
-			{
-				"rule": "*-spacing",
-				"severity": "off"
-			},
-			{
-				"rule": "*-spaces",
-				"severity": "off"
-			},
-			{
-				"rule": "*-order",
-				"severity": "off"
-			},
-			{
-				"rule": "*-dangle",
-				"severity": "off"
-			},
-			{
-				"rule": "*-newline",
-				"severity": "off"
-			},
-			{
-				"rule": "*quotes",
-				"severity": "off"
-			},
-			{
-				"rule": "*semi",
-				"severity": "off"
-			}
-		],
-		"eslint.validate": [
-			"code-workspace",
-			"javascript",
-			"javascriptreact",
-			"typescript",
-			"typescriptreact",
-			"vue",
-			"html",
-			"markdown",
-			"json",
-			"jsonc",
-			"yaml",
-			"toml",
-			"gql",
-			"graphql"
-		],
-		"i18n-ally.localesPaths": [
-			"easytier-gui/locales"
-		]
 	}
 }

easytier-gui/.vscode/settings.json

@@ -12,12 +12,7 @@
     "unplugin",
     "pnpm"
   ],
-  "i18n-ally.sourceLanguage": "en",
-  "i18n-ally.keystyle": "nested",
   "i18n-ally.localesPaths": "locales",
-  "i18n-ally.sortKeys": true,
-  // Disable the default formatter
-  "prettier.enable": false,
   "editor.formatOnSave": false,
   // Auto fix
   "editor.codeActionsOnSave": {
@@ -83,4 +78,4 @@
     "jsonc",
     "yaml"
   ]
-}
+}

easytier-gui/locales/cn.yml

@@ -72,6 +72,8 @@ loss_rate: 丢包率
 status:
   version: 内核版本
   local: 本机
+  server: 服务器
+  relay: 中继
 
 run_network: 运行网络
 stop_network: 停止网络
@@ -91,3 +93,23 @@ about:
   license: 许可证
   description: 一个简单、安全、去中心化的内网穿透 VPN 组网方案，使用 Rust 语言和 Tokio 框架实现。
   check_update: 检查更新
+
+event:
+  Unknown: 未知
+  TunDeviceReady: Tun设备就绪
+  TunDeviceError: Tun设备错误
+  PeerAdded: 对端添加
+  PeerRemoved: 对端移除
+  PeerConnAdded: 对端连接添加
+  PeerConnRemoved: 对端连接移除
+  ListenerAdded: 监听器添加
+  ListenerAddFailed: 监听器添加失败
+  ListenerAcceptFailed: 监听器接受连接失败
+  ConnectionAccepted: 连接已接受
+  ConnectionError: 连接错误
+  Connecting: 正在连接
+  ConnectError: 连接错误
+  VpnPortalClientConnected: VPN门户客户端已连接
+  VpnPortalClientDisconnected: VPN门户客户端已断开连接
+  DhcpIpv4Changed: DHCP IPv4地址更改
+  DhcpIpv4Conflicted: DHCP IPv4地址冲突

easytier-gui/locales/en.yml

@@ -71,6 +71,8 @@ loss_rate: Loss Rate
 status:
   version: Version
   local: Local
+  server: Server
+  relay: Relay
 
 run_network: Run Network
 stop_network: Stop Network
@@ -90,3 +92,23 @@ about:
   license: License
   description: 'EasyTier is a simple, safe and decentralized VPN networking solution implemented with the Rust language and Tokio framework.'
   check_update: Check Update
+
+event:
+  Unknown: Unknown
+  TunDeviceReady: TunDeviceReady
+  TunDeviceError: TunDeviceError
+  PeerAdded: PeerAdded
+  PeerRemoved: PeerRemoved
+  PeerConnAdded: PeerConnAdded
+  PeerConnRemoved: PeerConnRemoved
+  ListenerAdded: ListenerAdded
+  ListenerAddFailed: ListenerAddFailed
+  ListenerAcceptFailed: ListenerAcceptFailed
+  ConnectionAccepted: ConnectionAccepted
+  ConnectionError: ConnectionError
+  Connecting: Connecting
+  ConnectError: ConnectError
+  VpnPortalClientConnected: VpnPortalClientConnected
+  VpnPortalClientDisconnected: VpnPortalClientDisconnected
+  DhcpIpv4Changed: DhcpIpv4Changed
+  DhcpIpv4Conflicted: DhcpIpv4Conflicted

easytier-gui/src-tauri/capabilities/migrated.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "migrated",
   "description": "permissions that were migrated from v1",
   "local": true,
@@ -13,6 +14,7 @@
     "core:window:allow-show",
     "core:window:allow-hide",
     "core:window:allow-set-focus",
+    "core:window:allow-set-title",
     "core:app:default",
     "core:resources:default",
     "core:menu:default",
@@ -24,7 +26,6 @@
     "shell:default",
     "process:default",
     "clipboard-manager:default",
-    "core:tray:default",
     "core:tray:allow-new",
     "core:tray:allow-set-menu",
     "core:tray:allow-set-title",

easytier-gui/src/App.vue

@@ -1,3 +1,12 @@
+<script setup lang="ts">
+import { getCurrentWindow } from '@tauri-apps/api/window'
+import pkg from '~/../package.json'
+
+onBeforeMount(async () => {
+  await getCurrentWindow().setTitle(`Easytier GUI: v${pkg.version}`)
+})
+</script>
+
 <template>
   <RouterView />
 </template>

easytier-gui/src/auto-imports.d.ts

@@ -21,6 +21,7 @@ declare global {
   const definePage: typeof import('unplugin-vue-router/runtime')['definePage']
   const defineStore: typeof import('pinia')['defineStore']
   const effectScope: typeof import('vue')['effectScope']
+  const event2human: typeof import('./composables/utils')['event2human']
   const generateMenuItem: typeof import('./composables/tray')['generateMenuItem']
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
@@ -83,6 +84,7 @@ declare global {
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
   const storeToRefs: typeof import('pinia')['storeToRefs']
+  const timeAgoCn: typeof import('./composables/utils')['timeAgoCn']
   const toRaw: typeof import('vue')['toRaw']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']

easytier-gui/src/components/HumanEvent.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { EventType } from '~/types/network'
+
+const props = defineProps<{
+  event: {
+    [key: string]: any
+  }
+}>()
+const { t } = useI18n()
+
+const eventKey = computed(() => {
+  const key = Object.keys(props.event)[0]
+  return Object.keys(EventType).includes(key) ? key : 'Unknown'
+})
+
+const eventValue = computed(() => {
+  const value = props.event[eventKey.value]
+  return typeof value === 'object' ? value : value
+})
+</script>
+
+<template>
+  <Fieldset :legend="t(`event.${eventKey}`)">
+    <template v-if="eventKey !== 'Unknown'">
+      <div v-if="event.DhcpIpv4Changed">
+        {{ `${eventValue[0]} -> ${eventValue[1]}` }}
+      </div>
+      <pre v-else>{{ eventValue }}</pre>
+    </template>
+    <pre v-else>{{ eventValue }}</pre>
+  </Fieldset>
+</template>

easytier-gui/src/components/Status.vue

@@ -325,7 +325,7 @@ function showEventLogs() {
           <small class="text-surface-500 dark:text-surface-400">{{ useTimeAgo(Date.parse(slotProps.item[0])) }}</small>
         </template>
         <template #content="slotProps">
-          {{ slotProps.item[1] }}
+          <HumanEvent :event="slotProps.item[1]" />
         </template>
       </Timeline>
     </Dialog>
@@ -410,19 +410,33 @@ function showEventLogs() {
           {{ t('peer_info') }}
         </template>
         <template #content>
-          <DataTable :value="peerRouteInfos" column-resize-mode="fit" table-style="width: 100%">
-            <Column :field="ipFormat" style="width: 100px;" :header="t('virtual_ipv4')" />
-            <Column style="max-width: 250px;" :header="t('hostname')">
+          <DataTable :value="peerRouteInfos" column-resize-mode="fit" table-class="w-full">
+            <Column :field="ipFormat" :header="t('virtual_ipv4')" />
+            <Column :header="t('hostname')">
               <template #body="slotProps">
-                <span v-tooltip="slotProps.data.route.hostname">{{ slotProps.data.route.hostname }}</span>
+                <div
+                  v-if="!slotProps.data.route.cost || !slotProps.data.route.feature_flag.is_public_server"
+                  v-tooltip="slotProps.data.route.hostname"
+                >
+                  {{
+                    slotProps.data.route.hostname }}
+                </div>
+                <div v-else v-tooltip="slotProps.data.route.hostname" class="space-x-1">
+                  <Tag v-if="slotProps.data.route.feature_flag.is_public_server" severity="info" value="Info">
+                    {{ t('status.server') }}
+                  </Tag>
+                  <Tag v-if="slotProps.data.route.no_relay_data" severity="warn" value="Warn">
+                    {{ t('status.relay') }}
+                  </Tag>
+                </div>
               </template>
             </Column>
-            <Column :field="routeCost" style="width: 100px;" :header="t('route_cost')" />
-            <Column :field="latencyMs" style="width: 80px;" :header="t('latency')" />
-            <Column :field="txBytes" style="width: 80px;" :header="t('upload_bytes')" />
-            <Column :field="rxBytes" style="width: 80px;" :header="t('download_bytes')" />
-            <Column :field="lossRate" style="width: 100px;" :header="t('loss_rate')" />
-            <Column style="width: 100px;" :header="t('status.version')">
+            <Column :field="routeCost" :header="t('route_cost')" />
+            <Column :field="latencyMs" :header="t('latency')" />
+            <Column :field="txBytes" :header="t('upload_bytes')" />
+            <Column :field="rxBytes" :header="t('download_bytes')" />
+            <Column :field="lossRate" :header="t('loss_rate')" />
+            <Column :header="t('status.version')">
               <template #body="slotProps">
                 <span>{{ version(slotProps.data) }}</span>
               </template>
@@ -433,3 +447,9 @@ function showEventLogs() {
     </template>
   </div>
 </template>
+
+<style lang="postcss" scoped>
+.p-timeline :deep(.p-timeline-event-opposite) {
+  @apply flex-none;
+}
+</style>

easytier-gui/src/types/network.ts

@@ -158,6 +158,7 @@ export interface PeerInfo {
 export interface PeerConnInfo {
   conn_id: string
   my_peer_id: number
+  is_client: boolean
   peer_id: number
   features: string[]
   tunnel?: TunnelInfo
@@ -183,3 +184,28 @@ export interface PeerConnStats {
   tx_packets: number
   latency_us: number
 }
+
+export enum EventType {
+  TunDeviceReady = 'TunDeviceReady', // string
+  TunDeviceError = 'TunDeviceError', // string
+
+  PeerAdded = 'PeerAdded', // number
+  PeerRemoved = 'PeerRemoved', // number
+  PeerConnAdded = 'PeerConnAdded', // PeerConnInfo
+  PeerConnRemoved = 'PeerConnRemoved', // PeerConnInfo
+
+  ListenerAdded = 'ListenerAdded', // any
+  ListenerAddFailed = 'ListenerAddFailed', // any, string
+  ListenerAcceptFailed = 'ListenerAcceptFailed', // any, string
+  ConnectionAccepted = 'ConnectionAccepted', // string, string
+  ConnectionError = 'ConnectionError', // string, string, string
+
+  Connecting = 'Connecting', // any
+  ConnectError = 'ConnectError', // string, string, string
+
+  VpnPortalClientConnected = 'VpnPortalClientConnected', // string, string
+  VpnPortalClientDisconnected = 'VpnPortalClientDisconnected', // string, string, string
+
+  DhcpIpv4Changed = 'DhcpIpv4Changed', // ipv4 | null, ipv4 | null
+  DhcpIpv4Conflicted = 'DhcpIpv4Conflicted', // ipv4 | null
+}

easytier/build.rs

@@ -1,10 +1,5 @@
 #[cfg(target_os = "windows")]
-use std::{
-    env,
-    fs::File,
-    io::{copy, Cursor},
-    path::PathBuf,
-};
+use std::{env, io::Cursor, path::PathBuf};
 
 #[cfg(target_os = "windows")]
 struct WindowsBuild {}