From 01a8ff67eae5a737d42d611da946f069e5aab052 Mon Sep 17 00:00:00 2001
From: likexuan <likexuan@geedgenetworks.com>
Date: Thu, 17 Nov 2022 10:19:03 +0800
Subject: [PATCH] =?UTF-8?q?fix=20:=20APM=20settings=E3=80=81Web=20terminal?=
 =?UTF-8?q?=20setting=E9=A1=B5=E9=9D=A2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/page/config/system.scss    | 159 +++++++++++-------
 .../common/mixin/system/systemMixin.js        |  10 +-
 .../src/components/page/config/monitor.vue    |  18 +-
 .../src/components/page/config/terminal.vue   |   2 +-
 4 files changed, 108 insertions(+), 81 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/page/config/system.scss b/nezha-fronted/src/assets/css/components/page/config/system.scss
index 96a757283..d811aa361 100644
--- a/nezha-fronted/src/assets/css/components/page/config/system.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/system.scss
@@ -3,7 +3,7 @@
   position: relative;
   overflow: auto;
   margin: 0px;
-  .el-form{
+  .el-form {
     padding-left: 15px;
   }
   .el-tag.el-tag--info {
@@ -36,34 +36,49 @@
       .el-input.el-input--small {
         width: calc(100% - 49px);
       }
-
     }
   }
-  #system-basic{
+  #system-basic {
     display: flex;
     align-items: center;
-    .el-form-item__content{
+    .el-form-item__content {
       margin-left: 0px !important;
     }
   }
 }
-.system-config-form{
+.system-config-form.basicForm {
+  .vue-tags-input {
+    max-width: unset !important;
+  }
+  .vue-tags-input .ti-input {
+    min-height: 32px;
+    padding: 0px 0px 0px 15px !important;
+  }
+  .vue-tags-input .ti-input .ti-new-tag-input-wrapper {
+    padding: 0;
+    margin: 0;
+  }
+  .vue-tags-input.interface-name .ti-input .ti-new-tag-input-wrapper {
+    padding-left: 7px;
+  }
+}
+.system-config-form {
   width: 61.8% !important;
   position: relative;
 }
 
-.linkBox{
+.linkBox {
   max-height: 800px;
   width: 800px;
 }
-.scrollBox{
+.scrollBox {
   position: relative;
   height: 600px;
   margin-bottom: 20px;
 }
-.linkTitle{
+.linkTitle {
   display: flex;
-  align-items:center;
+  align-items: center;
   border-bottom: 2px solid $--border-color-base;
   color: #6b778c;
   font-size: 12px;
@@ -71,40 +86,40 @@
   line-height: 24px;
   font-weight: 600;
 }
-.handle{
+.handle {
   cursor: move !important;
-  padding:0 5px;
+  padding: 0 5px;
   line-height: 34px;
 }
-.linkBtn{
+.linkBtn {
   height: 28px;
   line-height: 0;
   font-size: 12px;
 }
-.linkTitleHandle{
+.linkTitleHandle {
   padding: 0 13px;
 }
-.linkAddBox{
+.linkAddBox {
   display: flex;
   padding: 10px 0;
   border-bottom: 1px solid $--border-color-base;
   font-size: 13px;
   line-height: 34px;
 }
-.linkContent{
+.linkContent {
   display: flex;
   padding: 10px 0;
   font-size: 13px;
   line-height: 34px;
 }
-.linkContent:not(:last-child){
+.linkContent:not(:last-child) {
   border-bottom: 1px solid $--border-color-base;
 }
-.linkFormContent{
+.linkFormContent {
   display: flex;
   line-height: 34px;
 }
-.linkTitleName{
+.linkTitleName {
   width: 100px;
   margin-right: 12px;
   overflow: hidden;
@@ -112,12 +127,12 @@
   white-space: nowrap;
   height: 31px;
 }
-.linkTitleUrl{
+.linkTitleUrl {
   width: 462px;
   margin-right: 12px;
   height: 31px;
 }
-.linkTitleUrlContent{
+.linkTitleUrlContent {
   display: inline-block;
   width: 460px;
   overflow: hidden;
@@ -127,39 +142,39 @@
   cursor: pointer;
   outline: none;
 }
-.linkFormBtn .nz-icon-delete{
+.linkFormBtn .nz-icon-delete {
   cursor: pointer;
   color: $--color-primary;
   margin-left: 10px;
 }
-.linkFormBtn .nz-icon-edit{
+.linkFormBtn .nz-icon-edit {
   font-size: 14px;
   cursor: pointer;
 }
-.nz-icon-create-square{
+.nz-icon-create-square {
   cursor: pointer;
   color: $--color-text-primary;
 }
-.el-form-item--small .el-form-item__error{
+.el-form-item--small .el-form-item__error {
   padding-top: 0;
 }
-.linkUrlTip{
+.linkUrlTip {
   width: 430px;
 }
-.system-config-form.terminal .el-input-number--small{
+.system-config-form.terminal .el-input-number--small {
   width: 512px;
 }
-.system-config-form.basicForm .el-input-number--small{
+.system-config-form.basicForm .el-input-number--small {
   width: 512px;
 }
-.system-config-form .el-input input{
+.system-config-form .el-input input {
   text-align: left;
 }
 .utc-item {
   color: $--color-text-secondary;
   font-size: 12px;
 }
-.system-title{
+.system-title {
   font-size: 14px;
   color: $--color-text-regular;
   letter-spacing: 0;
@@ -168,7 +183,7 @@
   font-weight: 500;
   margin-bottom: 30px;
 }
-.system-title-border{
+.system-title-border {
   border-top: 1px dashed $--border-color-light;
   padding-top: 30px;
   width: 699px;
@@ -178,19 +193,25 @@
   background-color: $--background-color-empty;
   padding: 10px;
   .el-form-item:last-of-type.monitorLastEle {
-    .el-form-item__content{
+    .el-form-item__content {
       margin-left: 180px !important;
       margin-bottom: 20px;
     }
   }
-  .el-tabs__nav-scroll{
+  .el-form-item:last-of-type.monitorLastElement {
+    .el-form-item__content {
+      margin-left: 180px !important;
+    }
+  }
+  .el-tabs__nav-scroll {
     background-color: $--background-color-empty;
   }
-  .el-tabs__nav-scroll,.el-tabs__header,.el-tabs__nav-wrap{
+  .el-tabs__nav-scroll,
+  .el-tabs__header,
+  .el-tabs__nav-wrap {
     border-bottom: 0;
   }
   .el-form-item:last-of-type {
-
     .el-form-item__content {
       margin-left: 0 !important;
       text-align: center;
@@ -200,13 +221,14 @@
     }
   }
   .full-table {
-    .el-tabs__content{
-      height:  calc( 100% - 100px);
+    .el-tabs__content {
+      height: calc(100% - 100px);
     }
-    .list-page .main-container{
+    .list-page .main-container {
       padding: unset;
     }
-    .table-column-setting,.pagination-bottom{
+    .table-column-setting,
+    .pagination-bottom {
       display: none;
     }
   }
@@ -218,17 +240,17 @@
     outline: none;
     box-sizing: border-box;
   }
-  .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
     color: $--color-primary;
     background: $--background-color-empty;
     border-bottom: none;
-    margin-left: .1px;
+    margin-left: 0.1px;
   }
-  .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
     color: $--color-primary;
-    opacity: .8;
+    opacity: 0.8;
   }
-  .el-tabs--border-card>.el-tabs__header .el-tabs__item {
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item {
     height: 40px;
     background: $--background-color-base;
     border: 1px solid $--border-color-light;
@@ -236,7 +258,7 @@
     border-top-right-radius: 4px;
     margin-top: 0;
   }
-  .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(:first-child) {
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(:first-child) {
     margin-left: 5px;
   }
   .el-input-group__prepend {
@@ -249,7 +271,10 @@
     border: 1px solid $--border-color-light;
     border-left: none;
   }
-  .el-input-number__decrease,.el-input-number__increase,.el-input-number__decrease.is-disabled,.el-input-number__increase.is-disabled {
+  .el-input-number__decrease,
+  .el-input-number__increase,
+  .el-input-number__decrease.is-disabled,
+  .el-input-number__increase.is-disabled {
     background-color: $--popover-background-color;
   }
   .el-input-number__decrease {
@@ -273,21 +298,21 @@
     border-color: $--color-primary;
   }
 }
-.system-config-form .el-form-item__content{
+.system-config-form .el-form-item__content {
   width: 512px;
 }
 
-.system-config-form .el-input{
+.system-config-form .el-input {
   width: 512px;
   text-align: left;
 }
 .system-tabs {
   box-shadow: unset !important;
-  border:unset;
+  border: unset;
   border-top: unset;
   height: 100%;
 }
-.system-tabs.el-tabs--border-card{
+.system-tabs.el-tabs--border-card {
   box-shadow: unset !important;
   height: 100%;
   width: 100%;
@@ -295,7 +320,7 @@
   border-left: unset;
   background-color: $--background-color-empty;
 }
-.reset-form .el-checkbox-group{
+.reset-form .el-checkbox-group {
   margin-left: -28px !important;
 }
 .el-form-item__tip {
@@ -318,22 +343,32 @@
   margin-bottom: 54px;
 }
 @keyframes warnBackground {
-  0% {background-color: #FFFFFF;}
-  25% {background-color: #EF7458;}
-  50% {background-color: #FFFFFF;}
-  75% {background-color: #EF7458;}
-  100% {background-color: #FFFFFF;}
+  0% {
+    background-color: #ffffff;
+  }
+  25% {
+    background-color: #ef7458;
+  }
+  50% {
+    background-color: #ffffff;
+  }
+  75% {
+    background-color: #ef7458;
+  }
+  100% {
+    background-color: #ffffff;
+  }
 }
 .warn-pop {
-  background-color: #FEF0F0;
-  border-color: #FEF0F0;
-  color:#F66C6C;
+  background-color: #fef0f0;
+  border-color: #fef0f0;
+  color: #f66c6c;
 }
-.warn-pop .popper__arrow:after{
-  border-top-color: #FEF0F0 !important;
+.warn-pop .popper__arrow:after {
+  border-top-color: #fef0f0 !important;
 }
-.system .logo-upload-tip{
-  color:#F66C6C;
+.system .logo-upload-tip {
+  color: #f66c6c;
   font-size: 12px;
   line-height: 20px;
 }
diff --git a/nezha-fronted/src/components/common/mixin/system/systemMixin.js b/nezha-fronted/src/components/common/mixin/system/systemMixin.js
index 615ae875f..8e52afb00 100644
--- a/nezha-fronted/src/components/common/mixin/system/systemMixin.js
+++ b/nezha-fronted/src/components/common/mixin/system/systemMixin.js
@@ -119,12 +119,18 @@ export default {
         terminal_timeout: 30,
         terminal_telnet_user_tip: 'ogin:',
         terminal_telnet_pin_tip: 'assword:',
-        terminal_record_local_retention: 365
+        terminal_record_local_retention: 365,
+        terminal_storage_type: '',
+        terminal_storage_s3_endpoint: '',
+        terminal_storage_s3_bucket: '',
+        terminal_storage_s3_access_key: '',
+        terminal_storage_s3_secret_access_key: ''
       },
       terminalCopy: null,
       terminalRules: {
         terminal_timeout: [{ validator: positiveInteger, trigger: 'blur' }],
-        terminal_record_local_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }]
+        terminal_record_local_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }],
+        terminal_storage_type: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
       },
       ldap: {
         ldap_address: '',
diff --git a/nezha-fronted/src/components/page/config/monitor.vue b/nezha-fronted/src/components/page/config/monitor.vue
index 163197b55..9e76d80fe 100644
--- a/nezha-fronted/src/components/page/config/monitor.vue
+++ b/nezha-fronted/src/components/page/config/monitor.vue
@@ -64,7 +64,7 @@
               <el-input v-model="monitor.metrics_storage_s3_access_key" id="monitor-metrics_storage_s3_access_key">
               </el-input>
             </el-form-item>
-            <el-form-item :label="$t('config.terminallog.key')" prop="metrics_storage_s3_secret_access_key" :rules=" [ { required: monitor.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastEle">
+            <el-form-item :label="$t('config.terminallog.key')" prop="metrics_storage_s3_secret_access_key" :rules=" [ { required: monitor.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastElement">
               <el-input v-model="monitor.metrics_storage_s3_secret_access_key" id="monitor-metrics_storage_s3_secret_access_key" type="password">
               </el-input>
             </el-form-item>
@@ -100,7 +100,7 @@
               <el-input v-model="monitor.logs_storage_s3_access_key" id="monitor-logs_storage_s3_access_key">
               </el-input>
             </el-form-item>
-            <el-form-item :label="$t('config.terminallog.key')" prop="logs_storage_s3_secret_access_key" :rules=" [ { required: monitor.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastEle">
+            <el-form-item :label="$t('config.terminallog.key')" prop="logs_storage_s3_secret_access_key" :rules=" [ { required: monitor.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastElement">
               <el-input v-model="monitor.logs_storage_s3_secret_access_key" id="monitor-logs_storage_s3_secret_access_key" type="password">
               </el-input>
             </el-form-item>
@@ -186,18 +186,4 @@ export default {
 }
 </script>
 <style scoped>
-.vue-tags-input{
-  max-width: unset;
-}
-/deep/ .vue-tags-input .ti-input{
-    min-height: 32px;
-    padding: 0px 0px 0px 15px !important;
-}
-/deep/ .vue-tags-input .ti-input .ti-new-tag-input-wrapper{
-  padding: 0;
-  margin: 0;
-}
-/deep/ .vue-tags-input.interface-name .ti-input .ti-new-tag-input-wrapper{
-  padding-left: 7px;
-}
 </style>
diff --git a/nezha-fronted/src/components/page/config/terminal.vue b/nezha-fronted/src/components/page/config/terminal.vue
index 94d071176..7d12161da 100644
--- a/nezha-fronted/src/components/page/config/terminal.vue
+++ b/nezha-fronted/src/components/page/config/terminal.vue
@@ -39,7 +39,7 @@
               <el-input v-model="terminal.terminal_storage_s3_access_key" id="terminal-terminal_storage_s3_access_key">
               </el-input>
             </el-form-item>
-            <el-form-item :label="$t('config.terminallog.key')" prop="terminal_storage_s3_secret_access_key" :rules=" [ { required: terminal.terminal_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastEle">
+            <el-form-item :label="$t('config.terminallog.key')" prop="terminal_storage_s3_secret_access_key" :rules=" [ { required: terminal.terminal_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]" class="monitorLastElement">
               <el-input v-model="terminal.terminal_storage_s3_secret_access_key" id="terminal-terminal_storage_s3_secret_access_key" type="password">
               </el-input>
             </el-form-item>