perf(web): Optimize User Interface

Optimize User Interface

libcs/client/config.go

@@ -84,7 +84,7 @@ type Options struct {
 	LogLevel        string `yaml:"logLevel,omitempty" json:",omitempty" usage:"Log level: trace, debug, info, warn, error, fatal, panic, disable"`
 	Version         bool   `arg:"version" yaml:"-" json:"-" usage:"Show the version of this program"`
 
-	WebAddr     string `arg:"webAddr"  yaml:"webAddr,omitempty" json:"-" usage:"The address of web server"`
+	WebAddr     string `arg:"webAddr"  yaml:"webAddr,omitempty" json:"webAddr,omitempty" usage:"The address of web server"`
 	WebCertFile string `arg:"webCertFile" yaml:"webCertFile,omitempty" json:"-" usage:"The path to cert file for GT-Web server"`
 	WebKeyFile  string `arg:"webKeyFile" yaml:"webKeyFile,omitempty" json:"-" usage:"The path to key file for GT-Web server"`
 	EnablePprof bool   `arg:"pprof"  yaml:"pprof,omitempty" json:"-" usage:"Enable pprof in web server"`

libcs/client/web/api/api.go

@@ -1,5 +1,6 @@
 package api
 
+import "C"
 import (
 	"github.com/gin-gonic/gin"
 	"github.com/isrc-cas/gt/client"
@@ -9,6 +10,8 @@ import (
 	"github.com/isrc-cas/gt/web/server/model/request"
 	"github.com/isrc-cas/gt/web/server/model/response"
 	"github.com/isrc-cas/gt/web/server/util"
+	"os"
+	"os/exec"
 )
 
 func HealthCheck(ctx *gin.Context) {
@@ -179,19 +182,24 @@ func SaveConfigToFile(c *client.Client) gin.HandlerFunc {
 			return
 		}
 		c.Logger.Info().Str("config", fullPath).Msg("save config to file")
+
+		err = ReloadServicesCommand(c)
+		if err != nil {
+			response.FailWithMessage(err.Error(), ctx)
+			return
+		}
 		response.SuccessWithMessage("save config to "+fullPath, ctx)
 	}
 }
-
-// ReloadServices reloads the services in the config file
-// without restarting the current process
-func ReloadServices(ctx *gin.Context) {
-	err := util.SendSignal("reload")
+func ReloadServicesCommand(c *client.Client) (err error) {
+	execPath := os.Args[0]
+	command := exec.Command(execPath, "-s", "reload")
+	_, err = command.CombinedOutput()
 	if err != nil {
-		response.FailWithMessage(err.Error(), ctx)
+		c.Logger.Logger.Info().Msg("failed to exec command-reload:" + err.Error())
 		return
 	}
-	response.SuccessWithMessage("reload services done", ctx)
+	return
 }
 
 // Restart for a brand-new config process,

libcs/client/web/web.go

@@ -177,7 +177,6 @@ func setRoutes(c *client.Client, tm *server.TokenManager, r *gin.Engine) error {
 		serverGroup := apiGroup.Group("/server")
 		{
 			serverGroup.GET("/info", api.GetServerInfo)
-			serverGroup.PUT("/reload", api.ReloadServices)
 			serverGroup.PUT("/restart", api.Restart)
 			serverGroup.PUT("/stop", api.Stop)
 			serverGroup.PUT("/kill", api.Kill)

libcs/server/config.go

@@ -92,7 +92,7 @@ type Options struct {
 	LogLevel        string `yaml:"logLevel,omitempty" json:",omitempty" usage:"Log level: trace, debug, info, warn, error, fatal, panic, disable"`
 	Version         bool   `arg:"version" yaml:"-" json:"-" usage:"Show the version of this program"`
 
-	WebAddr     string `arg:"webAddr"  yaml:"webAddr,omitempty" json:"-" usage:"The address to listen on for web server"`
+	WebAddr     string `arg:"webAddr"  yaml:"webAddr,omitempty" json:"webAddr,omitempty" usage:"The address to listen on for web server"`
 	WebCertFile string `arg:"webCertFile" yaml:"webCertFile,omitempty" json:"-" usage:"The path to cert file for GT-Web server"`
 	WebKeyFile  string `arg:"webKeyFile" yaml:"webKeyFile,omitempty" json:"-" usage:"The path to key file for GT-Web server"`
 	EnablePprof bool   `arg:"pprof"  yaml:"pprof,omitempty" json:"-" usage:"Enable pprof in web server"`

libcs/web/front/src/api/modules/clientConfig.ts

@@ -2,10 +2,6 @@ import http from "@/api";
 import { Config } from "@/api/interface/index";
 import { ClientConfig, ClientConfigBackend, transToBackendConfig } from "@/components/ClientConfigForm/interface";
 
-export const getRunningClientConfigApi = () => {
-  return http.get<Config.Client.ResConfigBackend>(`/config/running`);
-};
-
 export const getClientConfigFromFileApi = () => {
   return http.get<Config.Client.ResConfigBackend>(`/config/file`);
 };

libcs/web/front/src/components/ClientConfigForm/components/GeneralSetting.vue

@@ -91,6 +91,16 @@
                   <el-input v-model="localSetting.RemoteAPI"></el-input>
                 </el-form-item>
               </el-descriptions-item>
+              <!-- WebAddr -->
+              <el-descriptions-item>
+                <template #label>
+                  {{ $t("cconfig.WebAddr") }}
+                  <UsageTooltip :usage-text="$t('cusage[\'WebAddr\']')" />
+                </template>
+                <el-form-item prop="WebAddr">
+                  <el-input v-model="localSetting.WebAddr"></el-input>
+                </el-form-item>
+              </el-descriptions-item>
               <!-- RemoteCert -->
               <el-descriptions-item>
                 <template #label>

libcs/web/front/src/components/ClientConfigForm/index.vue

@@ -41,23 +41,20 @@
     </template>
   </Anchor>
   <el-button type="primary" @click="submit"> {{ $t("cconfig.Submit") }}</el-button>
-  <el-button type="primary" @click="getFromFile">{{ $t("cconfig.GetFromFile") }}</el-button>
-  <el-button type="primary" @click="reloadServices">{{ $t("cconfig.ReloadServices") }}</el-button>
 </template>
 
 <script setup lang="ts" name="ClientConfigForm">
 import { ElMessage, ElMessageBox } from "element-plus";
 import { markRaw, Ref, reactive, ref, watchEffect, onMounted, computed } from "vue";
-import { ClientConfig, transToFrontConfig } from "./interface";
+import { ClientConfig } from "./interface";
 import Anchor, { Tab } from "@/components/Anchor/index.vue";
 import GeneralSetting from "./components/GeneralSetting.vue";
 import SentrySetting from "./components/SentrySetting.vue";
 import WebRTCSetting from "./components/WebRTCSetting.vue";
 import TCPForwardSetting from "./components/TCPForwardSetting.vue";
 import LogSetting from "./components/LogSetting.vue";
 import ServiceSetting from "./components/ServiceSetting.vue";
-import { getClientConfigFromFileApi, getRunningClientConfigApi, saveClientConfigApi } from "@/api/modules/clientConfig";
-import { reloadServicesApi } from "@/api/modules/server";
+import { getClientConfigFromFileApi, saveClientConfigApi } from "@/api/modules/clientConfig";
 import { v4 as uuidv4 } from "uuid";
 import { Config } from "@/api/interface";
 import {
@@ -280,16 +277,6 @@ const updateData = (data: Config.Client.ResConfig) => {
 };
 
 //check if the options are consistent with the running system
-const checkOptionsConsistency = (runningConfig: ClientConfig.Config, sendingConfig: ClientConfig.Config): boolean => {
-  const runningOptions = { ...runningConfig };
-  const sendingOptions = { ...sendingConfig };
-
-  delete runningOptions.Services;
-  delete sendingOptions.Services;
-
-  return JSON.stringify(runningOptions) === JSON.stringify(sendingOptions);
-};
-
 //submit the configuration to save in file
 const submit = async () => {
   try {
@@ -319,11 +306,6 @@ const submit = async () => {
 
 const getFromFile = async () => {
   try {
-    await ElMessageBox.confirm(i18n.global.t("cconfig.GetFromFileConfirm"), i18n.global.t("cconfig.GetFromFileTitle"), {
-      confirmButtonText: i18n.global.t("cconfig.GetFromFileConfirmBtn"),
-      cancelButtonText: i18n.global.t("cconfig.GetFromFileCancelBtn"),
-      type: "info"
-    });
     const { data } = await getClientConfigFromFileApi();
     updateData(transClientConfigRes(data));
     ElMessage.success(i18n.global.t("cconfig.OperationSuccess"));
@@ -336,30 +318,6 @@ const getFromFile = async () => {
   }
 };
 
-const reloadServices = async () => {
-  try {
-    await ElMessageBox.confirm(i18n.global.t("cconfig.ReloadServicesConfirm"), i18n.global.t("cconfig.ReloadServicesTitle"), {
-      confirmButtonText: i18n.global.t("cconfig.ReloadServicesConfirmBtn"),
-      cancelButtonText: i18n.global.t("cconfig.ReloadServicesCancelBtn"),
-      type: "info"
-    });
-    const runningConfig = await getRunningClientConfigApi();
-    const fileConfig = await getClientConfigFromFileApi();
-    if (checkOptionsConsistency(transToFrontConfig(runningConfig.data.config), transToFrontConfig(fileConfig.data.config))) {
-      await reloadServicesApi();
-      ElMessage.success(i18n.global.t("cconfig.OperationSuccess"));
-    } else {
-      ElMessage.warning(i18n.global.t("cconfig.InconsistentOptionsWarning"));
-    }
-  } catch (e) {
-    if (e instanceof Error) {
-      ElMessage.error(e.message);
-    } else {
-      ElMessage.error(i18n.global.t("cconfig.FailedOperation"));
-    }
-  }
-};
-
 onMounted(() => {
   getFromFile();
 });

libcs/web/front/src/components/ClientConfigForm/interface/index.ts

@@ -10,6 +10,7 @@ export namespace ClientConfig {
     ID: string;
     Secret: string;
     ReconnectDelay: string;
+    WebAddr: string;
     Remote: Url[];
     RemoteSTUN: string[];
     RemoteAPI: string;
@@ -60,6 +61,7 @@ export namespace ClientConfig {
     ID: "",
     Secret: "",
     ReconnectDelay: "0s",
+    WebAddr: "",
     RemoteTimeout: "0s",
     Remote: [
       {
@@ -128,6 +130,7 @@ export namespace ClientConfigBackend {
     ID: string;
     Secret: string;
     ReconnectDelay: string;
+    WebAddr: string;
     Remote: string[];
     RemoteSTUN: string[];
     RemoteAPI: string;

libcs/web/front/src/components/ServerConfigForm/components/GeneralSetting.vue

@@ -34,6 +34,16 @@
             <el-input-number v-model="localSetting.TCPNumber" :min="0" />
           </el-form-item>
         </el-descriptions-item>
+        <!-- WebAddr -->
+        <el-descriptions-item>
+          <template #label>
+            {{ $t("sconfig.WebAddr") }}
+            <UsageTooltip :usage-text="$t('susage[\'WebAddr\']')" />
+          </template>
+          <el-form-item prop="WebAddr">
+            <el-input v-model="localSetting.WebAddr"></el-input>
+          </el-form-item>
+        </el-descriptions-item>
       </el-descriptions>
       <el-row style="width: 100%">
         <el-collapse style="width: 100%">
@@ -88,7 +98,7 @@ watch(
     localSetting.UserPath = props.setting.UserPath;
     localSetting.AuthAPI = props.setting.AuthAPI;
     localSetting.TCPNumber = props.setting.TCPNumber;
-
+    localSetting.WebAddr = props.setting.WebAddr;
     tcpSetting.splice(0, tcpSetting.length, ...props.setting.TCPs);
     hostSetting.Number = props.setting.Host.Number;
     hostSetting.RegexStr.splice(0, hostSetting.RegexStr.length, ...props.setting.Host?.RegexStr);

libcs/web/front/src/components/ServerConfigForm/index.vue

@@ -41,7 +41,6 @@
     </template>
   </Anchor>
   <el-button type="primary" @click="submit">{{ $t("sconfig.Submit") }}</el-button>
-  <el-button type="primary" @click="getFromFile">{{ $t("sconfig.GetFromFile") }}</el-button>
 </template>
 
 <script setup lang="ts" name="ServerConfigForm">
@@ -111,7 +110,6 @@ watch(
   },
   { deep: true }
 );
-
 //generalSetting is used for serverConfig
 //generalSettingProps is used for child component -- GeneralSetting
 const generalSetting = reactive<ServerConfig.GeneralSetting>({ ...ServerConfig.defaultGeneralSetting });
@@ -121,7 +119,6 @@ const generalSettingProps = reactive<ServerConfig.GeneralSettingProps>({
   TCPs: tcps, //global Setting
   Host: host //global Setting
 });
-
 //Sync generalSetting with generalSettingProps
 watch(
   () => generalSetting,
@@ -136,6 +133,7 @@ watch(
     generalSetting.UserPath = newSetting.UserPath;
     generalSetting.AuthAPI = newSetting.AuthAPI;
     generalSetting.TCPNumber = newSetting.TCPNumber;
+    generalSetting.WebAddr = newSetting.WebAddr;
   },
   { deep: true }
 );
@@ -191,6 +189,7 @@ const updateGeneralSetting = (newSetting: ServerConfig.GeneralSettingProps) => {
   generalSettingProps.UserPath = newSetting.UserPath;
   generalSettingProps.AuthAPI = newSetting.AuthAPI;
   generalSettingProps.TCPNumber = newSetting.TCPNumber;
+  generalSettingProps.WebAddr = newSetting.WebAddr;
   tcps.splice(0, tcps.length, ...newSetting.TCPs);
   host.Number = newSetting.Host.Number;
   host.RegexStr.splice(0, host.RegexStr.length, ...newSetting.Host.RegexStr);
@@ -448,11 +447,6 @@ const submit = async () => {
 
 const getFromFile = async () => {
   try {
-    await ElMessageBox.confirm(i18n.global.t("sconfig.GetFromFileConfirm"), i18n.global.t("sconfig.GetFromFileTitle"), {
-      confirmButtonText: i18n.global.t("sconfig.GetFromFileConfirmBtn"),
-      cancelButtonText: i18n.global.t("sconfig.GetFromFileCancelBtn"),
-      type: "info"
-    });
     const { data } = await getServerConfigFromFileApi();
     updateData(data);
     ElMessage.success(i18n.global.t("sconfig.GetFromFileSuccess"));

libcs/web/front/src/components/ServerConfigForm/interface/index.ts

@@ -32,13 +32,15 @@ export namespace ServerConfig {
     UserPath: string;
     AuthAPI: string;
     TCPNumber: number;
+    WebAddr: string;
   }
   export interface GeneralSettingProps {
     UserPath: string;
     AuthAPI: string;
     TCPs: TCP[];
     TCPNumber: number;
     Host: Host;
+    WebAddr: string;
   }
   export interface NetworkSetting {
     Addr: string;
@@ -108,15 +110,17 @@ export namespace ServerConfig {
   export const defaultGeneralSetting: GeneralSetting = {
     UserPath: "",
     AuthAPI: "",
-    TCPNumber: 0
+    TCPNumber: 0,
+    WebAddr: ""
   };
   export function getDefaultGeneralSettingProps(): GeneralSettingProps {
     return {
       UserPath: "",
       AuthAPI: "",
       TCPs: [],
       TCPNumber: 0,
-      Host: getDefaultHostSetting()
+      Host: getDefaultHostSetting(),
+      WebAddr: ""
     };
   }
   export const defaultNetworkSetting: NetworkSetting = {

libcs/web/front/src/languages/lang/en.ts

@@ -8,6 +8,7 @@ export namespace en {
     TLSMinVersion: "The tls min version. Supports values: tls1.1, tls1.2, tls1.3",
     CertFile: "The path to cert file",
     KeyFile: "The path to key file",
+    WebAddr: "WebServer Addr,default:127.0.0.1:8000,if addr:0.0.0.0:8000,it will provide services to external network hosts",
 
     IDs: "The user id",
     Secrets: "The secret for user id",
@@ -93,6 +94,7 @@ export namespace en {
     RemoteIdleConnections: "The number of idle server connections kept in the pool",
     RemoteTimeout: "The timeout of remote connections. Supports values like '30s', '5m'",
     Version: "Show the version of this program",
+    WebAddr: "WebServer Addr,default:127.0.0.1:7000,if addr:0.0.0.0:7000,it will provide services to external network hosts",
 
     // Service Setting
     HostPrefix: "The server will recognize this host prefix and forward data to local",
@@ -131,6 +133,7 @@ export namespace en {
     SelectLogLevel: "Select log level"
   };
   export const sconfig = {
+    WebAddr: "WebAddr",
     APIAddr: "APIAddr",
     APITLSMinVersion: "APITLSMinVersion",
     APICertFile: "APICertFile",
@@ -217,6 +220,7 @@ export namespace en {
     FailedToGetFromRunning: "Failed to get from running system!"
   };
   export const cconfig = {
+    WebAddr: "WebAddr",
     ID: "ID",
     ReconnectDelay: "ReconnectDelay",
     RemoteTimeout: "RemoteTimeout",

libcs/web/front/src/languages/lang/zh.ts

@@ -8,6 +8,7 @@ export namespace zh {
     TLSMinVersion: "TLS 的最小版本。支持的值：tls1.1、tls1.2、tls1.3",
     CertFile: "证书文件的路径",
     KeyFile: "密钥文件的路径",
+    WebAddr: "Web服务地址，默认地址为：127.0.0.1:8000，当地址为0.0.0.0:8000时，可以向外部网络主机提供服务",
 
     IDs: "用户 ID",
     Secrets: "用户 ID 的密钥",
@@ -92,6 +93,7 @@ export namespace zh {
     RemoteIdleConnections: "保持在连接池中的空闲服务器连接数",
     RemoteTimeout: "远程连接的超时时间。支持值如 '30s'、'5m'",
     Version: "显示此程序的版本",
+    WebAddr: "Web服务地址，默认地址为：127.0.0.1:7000，当地址为0.0.0.0:7000时，可以向外部网络主机提供服务",
 
     // 服务设置
     HostPrefix: "服务器将识别此主机前缀并将数据转发到本地",
@@ -130,6 +132,7 @@ export namespace zh {
     SelectLogLevel: "请选择日志等级"
   };
   export const sconfig = {
+    WebAddr: "Web 服务地址",
     APIAddr: "API 地址",
     APITLSMinVersion: "API TLS 最小版本",
     APICertFile: "API 证书文件",
@@ -210,6 +213,7 @@ export namespace zh {
   export const cconfig = {
     ID: "ID",
     ReconnectDelay: "重连延迟",
+    WebAddr: "Web 服务地址",
     RemoteTimeout: "GT-Server超时时间",
     Remote: "GT-Server地址",
     RemoteSTUN: "STUN 地址",