Merge branch 'EasyTier:main' into perf/ts-type

easytier-gui/locales/cn.yml

@@ -32,6 +32,7 @@ settings: 设置
 exchange_language: Switch to English
 exit: 退出
 chips_placeholder: 例如： {0}, 按回车添加
+hostname_placeholder: '留空默认为主机名: {0}'
 off_text: 点击关闭
 on_text: 点击开启
 show_config: 显示配置

easytier-gui/locales/en.yml

@@ -33,6 +33,7 @@ exchange_language: 切换中文
 exit: Exit
 
 chips_placeholder: 'e.g: {0}, press Enter to add'
+hostname_placeholder: 'Leave blank and default to host name: {0}'
 off_text: Press to disable
 on_text: Press to enable
 show_config: Show Config

easytier-gui/src-tauri/Cargo.toml

@@ -11,7 +11,11 @@ edition = "2021"
 tauri-build = { version = "1", features = [] }
 
 [dependencies]
-tauri = { version = "1", features = [ "process-exit", "system-tray", "shell-open"] }
+tauri = { version = "1", features = [
+  "process-exit",
+  "system-tray",
+  "shell-open",
+] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 
@@ -24,7 +28,7 @@ once_cell = "1.18.0"
 dashmap = "5.5.3"
 
 privilege = "0.3"
-
+gethostname = "0.4.3"
 [features]
 # This feature is used for production builds or when a dev server is not specified, DO NOT REMOVE!!
 custom-protocol = ["tauri/custom-protocol"]

easytier-gui/src-tauri/src/main.rs

@@ -42,6 +42,7 @@ struct NetworkConfig {
     instance_id: String,
 
     virtual_ipv4: String,
+    hostname: Option<String>,
     network_name: String,
     network_secret: String,
     networking_method: NetworkingMethod,
@@ -70,6 +71,7 @@ impl NetworkConfig {
                 .parse()
                 .with_context(|| format!("failed to parse instance id: {}", self.instance_id))?,
         );
+        cfg.set_hostname(self.hostname.clone());
         cfg.set_inst_name(self.network_name.clone());
         cfg.set_network_identity(NetworkIdentity::new(
             self.network_name.clone(),
@@ -281,6 +283,11 @@ fn collect_network_infos() -> Result<String, String> {
     Ok(serde_json::to_string(&ret).map_err(|e| e.to_string())?)
 }
 
+#[tauri::command]
+fn get_os_hostname() -> Result<String, String> {
+    Ok(gethostname::gethostname().to_string_lossy().to_string())
+}
+
 fn toggle_window_visibility(window: &Window) {
     if window.is_visible().unwrap() {
         window.hide().unwrap();
@@ -318,7 +325,8 @@ fn main() {
             parse_network_config,
             run_network_instance,
             retain_network_instance,
-            collect_network_infos
+            collect_network_infos,
+            get_os_hostname
         ])
         .system_tray(SystemTray::new().with_menu(tray_menu))
         .on_system_tray_event(|app, event| match event {

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

@@ -20,6 +20,7 @@ declare global {
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getOsHostname: typeof import('./composables/network')['getOsHostname']
   const h: typeof import('vue')['h']
   const inject: typeof import('vue')['inject']
   const isProxy: typeof import('vue')['isProxy']
@@ -108,6 +109,7 @@ declare module 'vue' {
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly getOsHostname: UnwrapRef<typeof import('./composables/network')['getOsHostname']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
@@ -189,6 +191,7 @@ declare module '@vue/runtime-core' {
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly getOsHostname: UnwrapRef<typeof import('./composables/network')['getOsHostname']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>

easytier-gui/src/components/Config.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import InputGroup from 'primevue/inputgroup'
 import InputGroupAddon from 'primevue/inputgroupaddon'
+import { getOsHostname } from '~/composables/network'
 import { i18n } from '~/modules/i18n'
 import { NetworkingMethod } from '~/types/network'
 
@@ -32,6 +33,24 @@ const curNetwork = computed(() => {
 const presetPublicServers = [
   'tcp://easytier.public.kkrainbow.top:11010',
 ]
+
+function validateHostname() {
+  if (curNetwork.value.hostname) {
+    // eslint no-useless-escape
+    let name = curNetwork.value.hostname!.replaceAll(/[^\u4E00-\u9FA5a-zA-Z0-9\-]*/g, '')
+    if (name.length > 32)
+      name = name.substring(0, 32)
+
+    if (curNetwork.value.hostname !== name)
+      curNetwork.value.hostname = name
+  }
+}
+
+const osHostname = ref<string>('')
+
+onMounted(async () => {
+  osHostname.value = await getOsHostname()
+})
 </script>
 
 <template>
@@ -151,6 +170,15 @@ const presetPublicServers = [
                 />
               </div>
             </div>
+            <div class="flex flex-row gap-x-9 flex-wrap">
+              <div class="flex flex-column gap-2 basis-5/12 grow">
+                <label for="hostname">{{ $t('hostname') }}</label>
+                <InputText
+                  id="hostname" v-model="curNetwork.hostname" aria-describedby="hostname-help" :format="true"
+                  :placeholder="$t('hostname_placeholder', [osHostname])" @blur="validateHostname"
+                />
+              </div>
+            </div>
           </div>
         </Panel>
 

easytier-gui/src/components/Status.vue

@@ -350,14 +350,14 @@ function showEventLogs() {
         {{ $t('peer_info') }}
       </template>
       <template #content>
-        <DataTable :value="peerRouteInfos" table-style="min-width: 50rem">
-          <Column field="route.ipv4_addr" :header="$t('virtual_ipv4')" />
-          <Column field="route.hostname" :header="$t('hostname')" />
-          <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')" />
+        <DataTable :value="peerRouteInfos" column-resize-mode="fit" table-style="width: 100%">
+          <Column field="route.ipv4_addr" style="width: 100px;" :header="$t('virtual_ipv4')" />
+          <Column field="route.hostname" style="max-width: 250px;" :header="$t('hostname')" />
+          <Column :field="routeCost" style="width: 60px;" :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: 60px;" :header="$t('loss_rate')" />
         </DataTable>
       </template>
     </Card>

easytier-gui/src/composables/network.ts

@@ -16,3 +16,7 @@ export async function retainNetworkInstance(instanceIds: string[]): Promise<stri
 export async function collectNetworkInfos(): Promise<Record<string, NetworkInstanceRunningInfo>> {
   return JSON.parse(await invoke<string>('collect_network_infos'))
 }
+
+export async function getOsHostname(): Promise<string> {
+  return await invoke('get_os_hostname')
+}

easytier-gui/src/types/network.ts

@@ -10,6 +10,7 @@ export interface NetworkConfig {
   instance_id: string
 
   virtual_ipv4: string
+  hostname?: string
   network_name: string
   network_secret: string