refactor: instance update config api

Author: yumao233

src/app/views/InstanceDetail.vue

@@ -500,12 +500,11 @@ Copyright (C) 2022 MCSManager <[email protected]>
     </Panel>
 
     <NetworkTip
-      v-if="instanceInfo.config?.extraServiceConfig"
-      v-model:visible="networkTip"
+      ref="networkTip"
       :extraServiceConfig="instanceInfo.config.extraServiceConfig"
-      @submit="saveConfig"
-    >
-    </NetworkTip>
+      :instanceUuid="instanceUuid"
+      :serviceUuid="serviceUuid"
+    ></NetworkTip>
 
     <!-- 命令助手 -->
     <CommandAssist v-model="commandAssistPanel" :result="commandAssistCallback"></CommandAssist>
@@ -599,7 +598,7 @@ export default {
       router.go(-1);
     },
     openNetwork() {
-      this.networkTip = true;
+      this.$refs.networkTip.open();
     },
     instanceTypeChange(type) {
       const config = INSTANCE_TYPE_DEF_CONFIG[type];
@@ -637,12 +636,9 @@ export default {
         } else {
           postData.docker.extraVolumes = [];
         }
-        console.log(this.instanceInfo.config);
         if (!this.instanceInfo.config.endTime) postData.endTime = "";
         else if (typeof this.instanceInfo.config.endTime === "object")
           postData.endTime = this.instanceInfo.config.endTime.toLocaleDateString();
-
-        console.log(postData);
         await request({
           method: "PUT",
           url: API_INSTANCE,

src/app/views/Terminal/TermSetting.vue

@@ -239,8 +239,6 @@ export default {
             terminalOption: {
               ...this.options
             },
-            pingConfig: {},
-            eventTask: {},
             crlf: this.options.crlf,
             ie: this.options.ie,
             oe: this.options.oe,

src/app/views/Terminal/index.vue

@@ -546,7 +546,14 @@
     >
     </TermSetting>
 
-    <NetworkTip v-model:visible="visibleNetworkTip" :daemonUuid="serviceUuid"></NetworkTip>
+    <NetworkTip
+      ref="networkTip"
+      :extraServiceConfig="instanceInfo.config.extraServiceConfig"
+      :instanceUuid="instanceUuid"
+      :serviceUuid="serviceUuid"
+    >
+    </NetworkTip>
+
     <DockerInfo
       v-if="instanceInfo.config.docker"
       ref="dockerInfoDialog"
@@ -997,9 +1004,8 @@ export default {
           url: API_INSTANCE_UPDATE,
           params: { remote_uuid: this.serviceUuid, uuid: this.instanceUuid },
           data: {
-            pingConfig: this.pingConfigForm.is ? this.pingConfigForm : {},
-            eventTask: this.eventConfigPanel.visible ? this.eventConfigPanel : {},
-            terminalOption: {}
+            pingConfig: this.pingConfigForm.is ? this.pingConfigForm : null,
+            eventTask: this.eventConfigPanel.visible ? this.eventConfigPanel : null
           }
         });
         this.$message({
@@ -1176,6 +1182,10 @@ export default {
     } catch (error) {
       console.error(error);
       // neglect
+    } finally {
+      if (this.visibleNetworkTip) {
+        this.$refs.networkTip.open();
+      }
     }
 
     // Listen for window change events

src/components/NetworkTip.vue

@@ -1,3 +1,6 @@
+<!--
+  Copyright (C) 2022 MCSManager <[email protected]>
+-->
 <template>
   <Dialog v-model="v" :cancel="close">
     <template #title> {{ $t("CommonText.012") }} </template>
@@ -65,12 +68,15 @@
         </div>
 
         <div v-if="viewType === 2">
-          <p class="sub-title-title row-mb">
-            {{ $t("components.NetworkTip.008") }}
-          </p>
-          <p class="sub-title-title">
-            {{ $t("components.NetworkTip.009") }}
-          </p>
+          <div class="row-mb">
+            <p class="sub-title-title">
+              {{ $t("components.NetworkTip.008") }}
+            </p>
+            <p class="sub-title-title">
+              {{ $t("components.NetworkTip.009") }}
+            </p>
+          </div>
+
           <!-- <p>
             {{ $t("CommonText.013") }}
             <span class="color-gray" v-if="taskInfo.status == 0"> {{ $t("CommonText.014") }} </span>
@@ -151,35 +157,16 @@
 </template>
 
 <script>
-// "extraServiceConfig": { "isOpenFrp": false, "openFrpTunnelId": "", "openFrpToken": "" } }
 import Dialog from "@/components/Dialog";
 import SelectBlock from "@/components/SelectBlock";
-// import {
-//   API_INSTANCE_ASYNC_QUERY,
-//   API_INSTANCE_ASYNC_STOP,
-//   API_INSTANCE_ASYNC_TASK
-// } from "@/app/service/common";
 import { request } from "@/app/service/protocol";
-import { API_FORWARD_REQUEST, QUERY_PUBLIC_IP } from "../app/service/common";
+import { API_FORWARD_REQUEST, API_INSTANCE_UPDATE, QUERY_PUBLIC_IP } from "../app/service/common";
 export default {
   components: {
     Dialog,
     SelectBlock
   },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    daemonUuid: {
-      type: String,
-      default: ""
-    },
-    extraServiceConfig: {
-      type: Object,
-      default: () => {}
-    }
-  },
+  props: ["serviceUuid", "instanceUuid", "extraServiceConfig"],
 
   data() {
     return {
@@ -188,13 +175,12 @@ export default {
       ipv4: "",
       indexCode: "",
       tunnelId: "",
-      config: {},
+      // config: {},
       taskInfo: {
         status: 0,
         taskId: "--",
         ip: ""
-      },
-      timeTask: null
+      }
     };
   },
 
@@ -205,17 +191,9 @@ export default {
 
     isFromTerminal() {
       const r = this.$route.query.network_tip ? true : false;
-
       return r;
     }
   },
-  watch: {
-    visible(n) {
-      this.v = n;
-      this.config = this.extraServiceConfig;
-      if (n) this.init();
-    }
-  },
 
   methods: {
     async getPublicIP() {
@@ -233,117 +211,58 @@ export default {
       }
     },
 
-    clearIntervalTask() {
-      if (this.timeTask) clearInterval(this.timeTask);
-    },
-
     init() {
-      this.clearIntervalTask();
       this.getPublicIP();
     },
 
-    show() {
-      this.$emit("update:visible", true);
+    open() {
+      this.init();
+      this.v = true;
     },
 
     close() {
-      this.$emit("update:visible", false);
+      this.v = false;
       this.clearIntervalTask();
       this.viewType = 0;
     },
 
     select(type) {
+      console.log("extraServiceConfig", this.extraServiceConfig);
+      this.config = this.extraServiceConfig;
       this.viewType = type;
     },
 
-    saveConfig() {
+    async saveConfig() {
       this.$emit("submit", this.config);
+      await this.updateFrpConfig();
       this.close();
-    }
-
-    // async startHiPer() {
-    //   if (!this.indexCode) {
-    //     return this.$message({
-    //       message: window.$t("components.NetworkTip.015"),
-    //       type: "error"
-    //     });
-    //   }
-
-    //   try {
-    //     await request({
-    //       method: "POST",
-    //       url: API_INSTANCE_ASYNC_TASK,
-    //       params: {
-    //         remote_uuid: this.daemonUuid,
-    //         uuid: "-",
-    //         task_name: "hiper"
-    //       },
-    //       data: {
-    //         indexCode: this.indexCode
-    //       }
-    //     });
-    //     this.$message({
-    //       message: this.$t("general.success"),
-    //       type: "success"
-    //     });
-    //   } catch (error) {
-    //     this.$message({
-    //       message: `${this.$t("general.error")}: ${error.message}`,
-    //       type: "error"
-    //     });
-    //   }
-    // },
-
-    // async stopHiPer() {
-    //   try {
-    //     await request({
-    //       method: "POST",
-    //       url: API_INSTANCE_ASYNC_STOP,
-    //       params: {
-    //         remote_uuid: this.daemonUuid,
-    //         uuid: "-",
-    //         task_name: "hiper"
-    //       },
-    //       data: {
-    //         taskId: this.taskInfo.taskId
-    //       }
-    //     });
-    //     this.$message({
-    //       message: this.$t("general.success"),
-    //       type: "success"
-    //     });
-    //   } catch (error) {
-    //     this.$message({
-    //       message: `${this.$t("general.error")}: ${error.message}`,
-    //       type: "error"
-    //     });
-    //   }
-    // },
-
-    // async queryStatus() {
-    //   const taskInfo = await request({
-    //     method: "POST",
-    //     url: API_INSTANCE_ASYNC_QUERY,
-    //     params: {
-    //       remote_uuid: this.daemonUuid,
-    //       uuid: "-",
-    //       task_name: "hiper"
-    //     },
-    //     data: {}
-    //   });
+    },
 
-    //   if (taskInfo.length > 0) {
-    //     this.taskInfo = taskInfo[0];
-    //   }
-    // }
+    async updateFrpConfig() {
+      try {
+        await request({
+          method: "PUT",
+          url: API_INSTANCE_UPDATE,
+          params: { remote_uuid: this.serviceUuid, uuid: this.instanceUuid },
+          data: {
+            extraServiceConfig: this.config
+          }
+        });
+        this.$message({
+          type: "success",
+          message: this.$t("termSet.setUpdate")
+        });
+      } catch (error) {
+        this.$message({
+          message: `${this.$t("general.error")}: ${error.message}`,
+          type: "error"
+        });
+      }
+    }
   }
 };
 </script>
 
-<!--
-  Copyright (C) 2022 MCSManager <[email protected]>
--->
-
 <style scoped>
 .wrapper {
   margin: 16px;

src/language/zh_cn.json

@@ -1125,7 +1125,7 @@
       "010": "IP 地址：",
       "011": "访问密钥",
       "012": "密钥是使用 FRP 网络的必备钥匙，您可以点击底部的“获取密钥”来获得。",
-      "013": "请输入密钥",
+      "013": "请输入密钥，列如：3vz4776d72b28sfw13eefasx9eb01548",
       "014": "注册账号并获取密钥",
       "015": "请填写索引码",
       "016": "Hi~，第一次部署服务器吗？请选择一个网络连接方式吧！",