improve user experience

1. add config generator to easytier-web
2. add command to show tcp/kcp proxy entries

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

@@ -1,6 +1,7 @@
 import axios, { AxiosError, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 import { Md5 } from 'ts-md5'
 import { UUID } from './utils';
+import { NetworkConfig } from '../types/network';
 
 export interface ValidateConfigResponse {
     toml_config: string;
@@ -37,6 +38,15 @@ export interface ListNetworkInstanceIdResponse {
     disabled_inst_ids: Array<UUID>,
 }
 
+export interface GenerateConfigRequest {
+    config: NetworkConfig;
+}
+
+export interface GenerateConfigResponse {
+    toml_config?: string;
+    error?: string;
+}
+
 export class ApiClient {
     private client: AxiosInstance;
     private authFailedCb: Function | undefined;
@@ -193,6 +203,18 @@ export class ApiClient {
     public captcha_url() {
         return this.client.defaults.baseURL + '/auth/captcha';
     }
+
+    public async generate_config(config: GenerateConfigRequest): Promise<GenerateConfigResponse> {
+        try {
+            const response = await this.client.post<any, GenerateConfigResponse>('/generate-config', config);
+            return response;
+        } catch (error) {
+            if (error instanceof AxiosError) {
+                return { error: error.response?.data };
+            }
+            return { error: 'Unknown error: ' + error };
+        }
+    }
 }
 
 export default ApiClient;

easytier-web/frontend/src/components/ConfigGenerator.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { NetworkTypes } from 'easytier-frontend-lib';
+import { ref } from 'vue';
+import { Api } from 'easytier-frontend-lib'
+
+const defaultApiHost = 'https://config-server.easytier.cn'
+const api = new Api.ApiClient(defaultApiHost);
+
+const newNetworkConfig = ref<NetworkTypes.NetworkConfig>(NetworkTypes.DEFAULT_NETWORK_CONFIG());
+const toml_config = ref<string>("Press 'Run Network' to generate TOML configuration");
+
+const generateConfig = (config: NetworkTypes.NetworkConfig) => {
+    api.generate_config({
+        config: config
+    }).then((res) => {
+        if (res.error) {
+            toml_config.value = res.error;
+        } else if (res.toml_config) {
+            toml_config.value = res.toml_config;
+        } else {
+            toml_config.value = "Api server returned an unexpected response";
+        }
+    });
+};
+
+</script>
+
+<template>
+    <div class="flex items-center justify-center m-5">
+        <div class="flex w-full">
+            <div class="w-1/2 p-4">
+                <Config :cur-network="newNetworkConfig" @run-network="generateConfig" />
+            </div>
+            <div class="w-1/2 p-4 bg-gray-100">
+                <pre class="whitespace-pre-wrap">{{ toml_config }}</pre>
+            </div>
+        </div>
+    </div>
+</template>

easytier-web/frontend/src/main.ts

@@ -15,6 +15,7 @@ import DeviceManagement from './components/DeviceManagement.vue'
 import Dashboard from './components/Dashboard.vue'
 import DialogService from 'primevue/dialogservice';
 import ToastService from 'primevue/toastservice';
+import ConfigGenerator from './components/ConfigGenerator.vue'
 
 const routes = [
     {
@@ -66,6 +67,10 @@ const routes = [
             }
         }
     },
+    {
+        path: '/config_generator',
+        component: ConfigGenerator,
+    }
 ]
 
 const router = createRouter({

easytier-web/src/restful/mod.rs

@@ -6,11 +6,14 @@ mod users;
 use std::{net::SocketAddr, sync::Arc};
 
 use axum::http::StatusCode;
+use axum::routing::post;
 use axum::{extract::State, routing::get, Json, Router};
 use axum_login::tower_sessions::{ExpiredDeletion, SessionManagerLayer};
 use axum_login::{login_required, AuthManagerLayerBuilder, AuthzBackend};
 use axum_messages::MessagesManagerLayer;
+use easytier::common::config::ConfigLoader;
 use easytier::common::scoped_task::ScopedTask;
+use easytier::launcher::NetworkConfig;
 use easytier::proto::rpc_types;
 use network::NetworkApi;
 use sea_orm::DbErr;
@@ -48,6 +51,17 @@ struct GetSummaryJsonResp {
     device_count: u32,
 }
 
+#[derive(Debug, serde::Deserialize, serde::Serialize)]
+struct GenerateConfigRequest {
+    config: NetworkConfig,
+}
+
+#[derive(Debug, serde::Deserialize, serde::Serialize)]
+struct GenerateConfigResponse {
+    error: Option<String>,
+    toml_config: Option<String>,
+}
+
 #[derive(Debug, serde::Deserialize, serde::Serialize)]
 pub struct Error {
     message: String,
@@ -131,6 +145,24 @@ impl RestfulServer {
         .into())
     }
 
+    async fn handle_generate_config(
+        Json(req): Json<GenerateConfigRequest>,
+    ) -> Result<Json<GenerateConfigResponse>, HttpHandleError> {
+        let config = req.config.gen_config();
+        match config {
+            Ok(c) => Ok(GenerateConfigResponse {
+                error: None,
+                toml_config: Some(c.dump()),
+            }
+            .into()),
+            Err(e) => Ok(GenerateConfigResponse {
+                error: Some(format!("{:?}", e)),
+                toml_config: None,
+            }
+            .into()),
+        }
+    }
+
     pub async fn start(&mut self) -> Result<(), anyhow::Error> {
         let listener = TcpListener::bind(self.bind_addr).await?;
 
@@ -178,6 +210,10 @@ impl RestfulServer {
             .route_layer(login_required!(Backend))
             .merge(auth::router())
             .with_state(self.client_mgr.clone())
+            .route(
+                "/api/v1/generate-config",
+                post(Self::handle_generate_config),
+            )
             .layer(MessagesManagerLayer)
             .layer(auth_layer)
             .layer(tower_http::cors::CorsLayer::very_permissive())