Add conversion method from TomlConfigLoader to NetworkConfig to enhance configuration experience (#990)

* add method to create NetworkConfig from TomlConfigLoader
* allow web export/import toml config file and gui edit toml config
* Extract the configuration file dialog into a separate component and allow direct editing of the configuration file on the web

easytier-gui/locales/cn.yml

@@ -50,7 +50,11 @@ dev_name_placeholder: 注意：当多个网络同时使用相同的TUN接口名
 off_text: 点击关闭
 on_text: 点击开启
 show_config: 显示配置
+edit_config: 编辑配置文件
 close: 关闭
+save: 保存
+config_saved: 配置已保存
+
 
 use_latency_first: 延迟优先模式
 my_node_info: 当前节点信息

easytier-gui/locales/en.yml

@@ -51,7 +51,10 @@ dev_name_placeholder: 'Note: When multiple networks use the same TUN interface n
 off_text: Press to disable
 on_text: Press to enable
 show_config: Show Config
+edit_config: Edit Config File
 close: Close
+save: Save
+config_saved: Configuration saved
 my_node_info: My Node Info
 peer_count: Connected
 upload: Upload

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

@@ -4,11 +4,9 @@
 use std::collections::BTreeMap;
 
 use easytier::{
-    common::config::{
-        ConfigLoader, FileLoggerConfig, LoggingConfigBuilder,
-    },
-    launcher::{ConfigSource, NetworkConfig, NetworkInstanceRunningInfo},
+    common::config::{ConfigLoader, FileLoggerConfig, LoggingConfigBuilder, TomlConfigLoader},
     instance_manager::NetworkInstanceManager,
+    launcher::{ConfigSource, NetworkConfig, NetworkInstanceRunningInfo},
     utils::{self, NewFilterSender},
 };
 
@@ -44,6 +42,13 @@ fn parse_network_config(cfg: NetworkConfig) -> Result<String, String> {
     Ok(toml.dump())
 }
 
+#[tauri::command]
+fn generate_network_config(toml_config: String) -> Result<NetworkConfig, String> {
+    let config = TomlConfigLoader::new_from_str(&toml_config).map_err(|e| e.to_string())?;
+    let cfg = NetworkConfig::new_from_config(&config).map_err(|e| e.to_string())?;
+    Ok(cfg)
+}
+
 #[tauri::command]
 fn run_network_instance(cfg: NetworkConfig) -> Result<(), String> {
     let instance_id = cfg.instance_id().to_string();
@@ -226,6 +231,7 @@ pub fn run() {
         })
         .invoke_handler(tauri::generate_handler![
             parse_network_config,
+            generate_network_config,
             run_network_instance,
             retain_network_instance,
             collect_network_infos,

easytier-gui/src/App.vue

@@ -8,5 +8,6 @@ onBeforeMount(async () => {
 </script>
 
 <template>
+  <Toast position="bottom-right" />
   <RouterView />
 </template>

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

@@ -23,6 +23,7 @@ declare global {
   const effectScope: typeof import('vue')['effectScope']
   const event2human: typeof import('./composables/utils')['event2human']
   const generateMenuItem: typeof import('./composables/tray')['generateMenuItem']
+  const generateNetworkConfig: typeof import('./composables/network')['generateNetworkConfig']
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
@@ -134,6 +135,7 @@ declare module 'vue' {
     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly generateMenuItem: UnwrapRef<typeof import('./composables/tray')['generateMenuItem']>
+    readonly generateNetworkConfig: UnwrapRef<typeof import('./composables/network')['generateNetworkConfig']>
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>

easytier-gui/src/composables/network.ts

@@ -8,6 +8,10 @@ export async function parseNetworkConfig(cfg: NetworkConfig) {
   return invoke<string>('parse_network_config', { cfg })
 }
 
+export async function generateNetworkConfig(tomlConfig: string) {
+  return invoke<NetworkConfig>('generate_network_config', { tomlConfig })
+}
+
 export async function runNetworkInstance(cfg: NetworkConfig) {
   return invoke('run_network_instance', { cfg })
 }

easytier-gui/src/pages/index.vue

@@ -8,7 +8,7 @@ import { exit } from '@tauri-apps/plugin-process'
 import { open } from '@tauri-apps/plugin-shell'
 import TieredMenu from 'primevue/tieredmenu'
 import { useToast } from 'primevue/usetoast'
-import { NetworkTypes, Config, Status, Utils, I18nUtils } from 'easytier-frontend-lib'
+import { NetworkTypes, Config, Status, Utils, I18nUtils, ConfigEditDialog } from 'easytier-frontend-lib'
 
 import { isAutostart, setLoggingLevel } from '~/composables/network'
 import { useTray } from '~/composables/tray'
@@ -23,7 +23,7 @@ useTray(true)
 
 const items = ref([
   {
-    label: () => t('show_config'),
+    label: () => activeStep.value == "2" ? t('show_config') : t('edit_config'),
     icon: 'pi pi-file-edit',
     command: async () => {
       try {
@@ -262,6 +262,13 @@ onMounted(async () => {
 function isRunning(id: string) {
   return networkStore.networkInstanceIds.includes(id)
 }
+
+async function saveTomlConfig(tomlConfig: string) {
+  const config = await generateNetworkConfig(tomlConfig)
+  networkStore.replaceCurNetwork(config);
+  toast.add({ severity: 'success', detail: t('config_saved'), life: 3000 })
+  visible.value = false
+}
 </script>
 
 <script lang="ts">
@@ -269,17 +276,8 @@ function isRunning(id: string) {
 
 <template>
   <div id="root" class="flex flex-col">
-    <Dialog v-model:visible="visible" modal header="Config File" :style="{ width: '70%' }">
-      <Panel>
-        <ScrollPanel style="width: 100%; height: 300px">
-          <pre>{{ tomlConfig }}</pre>
-        </ScrollPanel>
-      </Panel>
-      <Divider />
-      <div class="flex gap-2 justify-end">
-        <Button type="button" :label="t('close')" @click="visible = false" />
-      </div>
-    </Dialog>
+    <ConfigEditDialog v-model:visible="visible" :cur-network="curNetworkConfig" :readonly="activeStep !== '1'"
+      :save-config="saveTomlConfig" :generate-config="parseNetworkConfig" />
 
     <Dialog v-model:visible="aboutVisible" modal :header="t('about.title')" :style="{ width: '70%' }">
       <About />

easytier-gui/src/stores/network.ts

@@ -48,6 +48,12 @@ export const useNetworkStore = defineStore('networkStore', {
       this.curNetwork = this.networkList[nextCurNetworkIdx]
     },
 
+    replaceCurNetwork(cfg: NetworkTypes.NetworkConfig) {
+      const curNetworkIdx = this.networkList.indexOf(this.curNetwork)
+      this.networkList[curNetworkIdx] = cfg
+      this.curNetwork = cfg
+    },
+
     removeNetworkInstance(instanceId: string) {
       delete this.instances[instanceId]
     },