From 79203e325f47618b85f8ec34eaabf2457fa29e5c Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Mon, 14 Feb 2022 14:39:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E6=8B=86=E5=88=86sys?=
 =?UTF-8?q?tem=20=E7=9A=84=20emai=E3=80=81=20ladp=E3=80=81monitor=E3=80=81?=
 =?UTF-8?q?=20terminal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/mixin/routerPathParams.js          |   7 +
 .../src/components/page/config/basic.vue      |   6 +-
 .../src/components/page/config/email.vue      | 101 ++++++++++-
 .../src/components/page/config/ldap.vue       |  75 +++++++-
 .../src/components/page/config/monitor.vue    | 170 +++++++++++++++++-
 .../src/components/page/config/terminal.vue   |  53 +++++-
 6 files changed, 395 insertions(+), 17 deletions(-)

diff --git a/nezha-fronted/src/components/common/mixin/routerPathParams.js b/nezha-fronted/src/components/common/mixin/routerPathParams.js
index 08109041c..2ef0e5f72 100644
--- a/nezha-fronted/src/components/common/mixin/routerPathParams.js
+++ b/nezha-fronted/src/components/common/mixin/routerPathParams.js
@@ -56,6 +56,13 @@ export default {
           // this.$refs[dataList].$refs.searchInput.searchLabelList = this.$refs[dataList].$refs.searchInput.searchLabelList.filter(item => item.label !== 'projectIds')
         }, 500)
       }
+    },
+    switchChange (formName) {
+      const $temp = this
+      $temp.$refs[formName].clearValidate()
+      setTimeout(() => {
+        $temp.$refs[formName].validate()
+      }, 100)
     }
   }
 }
diff --git a/nezha-fronted/src/components/page/config/basic.vue b/nezha-fronted/src/components/page/config/basic.vue
index f0ce41294..a5c0628c5 100644
--- a/nezha-fronted/src/components/page/config/basic.vue
+++ b/nezha-fronted/src/components/page/config/basic.vue
@@ -120,10 +120,6 @@
 <script>
 import draggable from 'vuedraggable'
 import latlngPicker from '@/components/common/latlngPicker'
-import notifyMethod from '@/components/page/config/system/notifyMethodTab'
-import linkTab from '@/components/page/config/system/linkTab'
-import apiKeyTab from '@/components/page/config/system/apiKeyTab'
-import License from '@/components/page/config/system/license'
 import { latlng, port, positiveInteger, uSize } from '@/components/common/js/validate'
 import systemMixin from '@/components/common/mixin/system/systemMixin'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
@@ -131,7 +127,7 @@ import routerPathParams from '@/components/common/mixin/routerPathParams'
 export default {
   name: 'basic',
   mixins: [systemMixin, routerPathParams],
-  components: { draggable, latlngPicker, notifyMethod, linkTab, apiKeyTab, License },
+  components: { draggable, latlngPicker },
   data () {
     return {
       switchTab: 'basic',
diff --git a/nezha-fronted/src/components/page/config/email.vue b/nezha-fronted/src/components/page/config/email.vue
index 53a33fb2b..6331a89d7 100644
--- a/nezha-fronted/src/components/page/config/email.vue
+++ b/nezha-fronted/src/components/page/config/email.vue
@@ -1,10 +1,107 @@
 <template>
-<div>email</div>
+  <div class="system">
+    <div class="system-config-form">
+    <div class="system-title">{{$t('config.system.basic.title')}}</div>
+    <el-form :model="email"  label-width="180px" size="small" ref="emailForm" :rules="email.email_enable=='on'?emailRules:{}" :validate-on-rule-change="false">
+      <el-form-item :label="$t('config.system.email.enable')" prop="email_enable">
+        <el-checkbox v-model="email.email_enable" true-label="on" false-label="off"  @change="switchChange('emailForm')" id="system-email-email_enable"></el-checkbox>
+      </el-form-item>
+      <el-form-item :label="$t('config.system.email.smtpHost')" prop="email_host">
+        <el-input v-model="email.email_host" :disabled="email.email_enable == 'off'" id="system-email-email_smtp_host"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('config.system.email.smtpPort')" prop="email_port">
+        <el-input v-model.number="email.email_port" :disabled="email.email_enable == 'off'" id="system-email-email_smtp_port"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('config.system.email.timeout')" prop="email_timeout">
+        <el-input v-model.number="email.email_timeout" >
+          <template slot="append"><span >{{$t('config.system.basic.second')}}</span></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item :label="$t('config.system.email.smtpAccount')" prop="email_auth_account">
+        <el-input  v-model="email.email_auth_account" :disabled="email.email_enable == 'off'" id="system-email-email_smtp_account"> autocomplete="off"</el-input>
+      </el-form-item>
+      <el-form-item :label="$t('config.system.email.smtpPin')" class="has-tip" prop="email_auth_password">
+        <el-input v-model="email.email_auth_password" type="password" :show-password="false" :disabled="email.email_enable == 'off'"  autocomplete="off" id="system-email-email_smtp_password"></el-input>
+        <div class="el-form-item__tip">{{$t("config.system.email.pinTip")}}</div>
+      </el-form-item>
+      <el-form-item :label="$t('config.system.email.sendAccount')" class="has-tip" prop="email_send_account">
+        <el-input v-model="email.email_send_account" :disabled="email.email_enable == 'off'" id="system-email-email_send_account"></el-input>
+        <div class="el-form-item__tip">{{$t("config.system.email.sendAccountTip")}}</div>
+      </el-form-item>
+      <el-form-item :label="$t('config.system.email.testAccount')" class="has-tip" prop="email_test_reciver">
+        <el-input v-model="email.email_test_account" :disabled="email.email_enable == 'off'" id="system-email-email_test_reciver"></el-input>
+        <div class="el-form-item__tip">{{$t("config.system.email.testAccountTip")}}</div>
+      </el-form-item>
+      <el-form-item :label="$t('config.system.email.securityType')" prop="email_security_type">
+        <el-select v-model="email.email_security_type" :disabled="email.email_enable == 'off'" popper-class="right-box-select-top right-public-box-dropdown-top">
+          <el-option label="None" value="NONE"></el-option>
+          <el-option label="SSL" value="SSL"></el-option>
+          <el-option label="TLS" value="TLS"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item style="padding-top: 20px;">
+        <!--              <button id="system-email-reset" @click="resetForm('emailForm','email')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light" type="button">{{$t('overall.reset')}}</button>-->
+        <button id="system-email-test" :class="{'nz-btn-disabled':email.email_enable == 'off','nz-btn-disabled':prevent_opt.save}" :disabled="email.email_enable == 'off' || prevent_opt.save" @click="testSetInfo('email','emailForm')" class="nz-btn nz-btn-size-normal nz-btn-style-light" type="button">{{$t('config.system.email.testConnection')}}</button>
+        <button id="system-email-save" v-has="'system_email_edit'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" @click="saveSetInfo('email','emailForm')">{{$t('overall.submit')}}</button>
+      </el-form-item>
+    </el-form>
+  </div>
+  </div>
 </template>
 
 <script>
+import systemMixin from '../../common/mixin/system/systemMixin'
+import routerPathParams from '../../common/mixin/routerPathParams'
+import { hostPlus, port } from '../../common/js/validate'
+
 export default {
-  name: 'email'
+  name: 'email',
+  mixins: [systemMixin, routerPathParams],
+  data () {
+    return {
+      switchTab: 'email',
+      email: {
+        email_enable: 'on',
+        email_host: '',
+        email_port: 25,
+        email_timeout: 10,
+        email_auth_account: '',
+        email_auth_password: '',
+        email_send_account: '',
+        email_test_account: '',
+        email_security_type: 'NONE'
+      },
+      emailCopy: null,
+      emailRules: {
+        email_host: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: hostPlus, trigger: 'blur' }
+        ],
+        email_port: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: port, trigger: 'blur' }
+        ],
+        email_auth_account: [
+          // { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { type: 'email', message: this.$t('validate.email'), trigger: 'blur' }
+        ],
+        email_send_account: [{ type: 'email', message: this.$t('validate.email'), trigger: 'blur' }],
+        email_test_account: [{ type: 'email', message: this.$t('validate.email'), trigger: 'blur' }]
+      }
+    }
+  },
+  mounted () {
+    this.querySetInfo(this.switchTab)
+  },
+  methods: {
+    switchChange: function (formName) {
+      const $temp = this
+      $temp.$refs[formName].clearValidate()
+      setTimeout(() => {
+        $temp.$refs[formName].validate()
+      }, 100)
+    }
+  }
 }
 </script>
 
diff --git a/nezha-fronted/src/components/page/config/ldap.vue b/nezha-fronted/src/components/page/config/ldap.vue
index 8c035dbde..973ec0154 100644
--- a/nezha-fronted/src/components/page/config/ldap.vue
+++ b/nezha-fronted/src/components/page/config/ldap.vue
@@ -1,10 +1,81 @@
 <template>
-<div>ldap</div>
+  <div class="system">
+    <div class="system-config-form">
+      <div class="system-title">{{$t('config.system.basic.title')}}</div>
+      <el-form :model="ldap"  label-width="180px" size="small" ref="ldapForm" :rules="ldap.ldap_enable == 'on'?ldapRules:{}" :validate-on-rule-change="false">
+        <el-form-item :label="$t('config.system.ldap.active')" prop="ldap_enable">
+          <el-checkbox v-model="ldap.ldap_enable" true-label='on' false-label='off' @change="switchChange('ldapForm')" id="system-ldap-ldap_enable"></el-checkbox>
+        </el-form-item>
+        <el-form-item :label="$t('config.system.ldap.address')" prop="ldap_address">
+          <el-input v-model="ldap.ldap_address" id="system-ldap-ldap_address"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.system.ldap.dn')" prop="ldap_dn">
+          <el-input v-model="ldap.ldap_dn" id="system-ldap-ldap_dn"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.system.ldap.pin')" prop="ldap_password">
+          <el-input id="system-ldap-ldap_password" v-model="ldap.ldap_password" type="password"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.system.ldap.ou')" class="has-tip" prop="ldap_ou">
+          <el-input v-model="ldap.ldap_ou" id="system-ldap-ldap_ou"></el-input>
+          <div class="el-form-item__tip">{{$t("config.system.ldap.ouTip")}}</div>
+        </el-form-item>
+        <el-form-item :label="$t('config.system.ldap.filter')" class="has-tip" prop="ldap_user_filter">
+          <el-input v-model="ldap.ldap_user_filter" id="system-ldap-ldap_user_filter"></el-input>
+          <div class="el-form-item__tip">{{$t("config.system.ldap.filterTip")}}</div>
+        </el-form-item>
+        <el-form-item :label="$t('config.system.ldap.map')" class="has-tip--two-row" prop="ldap_mapping">
+          <el-input v-model="ldap.ldap_mapping" id="system-ldap-ldap_mapping"></el-input>
+          <!--借用错误提示的样式-->
+          <div class="el-form-item__tip el-form-item__tip--two-row">{{$t("config.system.ldap.mapTip")}}</div>
+        </el-form-item>
+        <el-form-item :label="$t('config.system.ldap.timeout')" prop="ldap_timeout">
+          <el-input v-model.number="ldap.ldap_timeout" >
+            <template slot="append"><span >{{$t('config.system.basic.second')}}</span></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <!--              <button id='system-ldap-reset' @click="resetForm('ldapForm','ldap')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light" type="button">{{$t('overall.reset')}}</button>-->
+          <button id='system-ldap-test' :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-light" type="button" @click="testSetInfo('ldap','ldapForm')">{{$t('config.system.email.testConnection')}}</button>
+          <button id='system-ldap-save' v-has="'system_ldap_edit'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" @click="saveSetInfo('ldap','ldapForm')">{{$t('overall.submit')}}</button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
 </template>
 
 <script>
+import { positiveInteger } from '../../common/js/validate'
+import systemMixin from '../../common/mixin/system/systemMixin'
+import routerPathParams from '../../common/mixin/routerPathParams'
+
 export default {
-  name: 'ldap'
+  name: 'ldap',
+  mixins: [systemMixin, routerPathParams],
+  data () {
+    return {
+      switchTab: 'ldap',
+      ldap: {
+        ldap_address: '',
+        ldap_dn: '',
+        ldap_password: '',
+        ldap_ou: '',
+        ldap_user_filter: '',
+        ldap_mapping: '',
+        ldap_enable: 'off',
+        ldap_timeout: ''
+      },
+      ldapCopy: null,
+      ldapRules: {
+        ldap_address: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        ldap_user_filter: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        ldap_mapping: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        ldap_timeout: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }]
+      }
+    }
+  },
+  mounted () {
+    this.querySetInfo(this.switchTab)
+  }
 }
 </script>
 
diff --git a/nezha-fronted/src/components/page/config/monitor.vue b/nezha-fronted/src/components/page/config/monitor.vue
index ae5ac8e7e..05cd681dc 100644
--- a/nezha-fronted/src/components/page/config/monitor.vue
+++ b/nezha-fronted/src/components/page/config/monitor.vue
@@ -1,13 +1,171 @@
 <template>
-<div>monitor</div>
+  <div class="system">
+    <div class="system-config-form basicForm">
+      <div class="system-title">{{$t('config.system.basic.title')}}</div>
+      <el-form :model="monitor"  label-width="180px" size="small" ref="monitorForm" :rules="monitorRules" :validate-on-rule-change="false">
+        <el-form-item :label="$t('config.system.monitor.prometheusFederation')" prop="prometheus_federation_enabled">
+          <el-checkbox v-model="monitor.prometheus_federation_enabled" true-label="1" false-label="0"  id="system-monitor-prometheus_federation_enabled"></el-checkbox>
+        </el-form-item>
+        <el-form-item :label="$t('config.system.basic.scrapeInterval')" prop="default_scrape_interval">
+          <el-input v-model.number="monitor.default_scrape_interval" >
+            <template slot="append"><span >{{$t('config.system.basic.second')}}</span></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.system.basic.scrapeTimeout')" prop="default_scrape_timeout">
+          <el-input v-model.number="monitor.default_scrape_timeout" >
+            <template slot="append"><span >{{$t('config.system.basic.second')}}</span></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.system.basic.assetPingInterval')" prop="asset_ping_interval">
+          <el-input v-model.number="monitor.asset_ping_interval" >
+            <template slot="append"><span >{{$t('config.system.basic.second')}}</span></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.system.monitor.asset_ping_from')" prop="asset_ping_from">
+          <el-select v-model="monitor.asset_ping_from" popper-class="right-box-select-top right-public-box-dropdown-top">
+            <el-option label="Global" value="1"></el-option>
+            <el-option label="Per-datacenter" value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <!--metrics-->
+        <div class="system-title system-title-border">{{$t('config.system.monitor.metricsTitle')}}</div>
+        <el-form-item :label="$t('config.system.monitor.metrics_storage_retention')" prop="metrics_storage_retention">
+          <el-input v-model.number="monitor.metrics_storage_retention" id="monitor-metrics_storage_retention">
+            <template slot="append"><span >{{$t('config.system.basic.day')}}</span></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.system.monitor.metrics_storage_type')" prop="metrics_storage_type">
+          <el-select v-model="monitor.metrics_storage_type" popper-class="right-box-select-top right-public-box-dropdown-top">
+            <el-option :label="$t('config.system.monitor.local')" value="1"></el-option>
+            <el-option :label="$t('config.system.monitor.s3')" value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <transition name="el-zoom-in-top">
+          <div v-show="monitor.metrics_storage_type == 2">
+            <el-form-item :label="$t('config.system.monitor.metrics_storage_s3_endpoint')" prop="metrics_storage_s3_endpoint" :rules=" [ { required: monitor.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
+              <el-input v-model="monitor.metrics_storage_s3_endpoint" id="monitor-metrics_storage_s3_endpoint">
+              </el-input>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.monitor.metrics_storage_s3_bucket')" prop="metrics_storage_s3_bucket" :rules=" [ { required: monitor.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
+              <el-input v-model="monitor.metrics_storage_s3_bucket" id="monitor-metrics_storage_s3_bucket">
+              </el-input>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.monitor.metrics_storage_s3_access_key')" prop="metrics_storage_s3_access_key" :rules=" [ { required: monitor.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
+              <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.system.monitor.metrics_storage_s3_secret_access_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-input v-model="monitor.metrics_storage_s3_secret_access_key" id="monitor-metrics_storage_s3_secret_access_key">
+              </el-input>
+            </el-form-item>
+          </div>
+        </transition>
+        <el-form-item :label="$t('config.system.basic.maxSeries')" prop="metrics_query_max_series">
+          <el-input-number v-model="monitor.metrics_query_max_series" controls-position="right" :min="-1" :max="1000" :precision="0" id="system-monitor-metrics_query_max_series"></el-input-number>
+        </el-form-item>
+        <!--logs-->
+        <div class="system-title system-title-border">{{$t('config.system.monitor.logsTitle')}}</div>
+        <el-form-item :label="$t('config.system.monitor.logs_storage_retention')" prop="logs_storage_retention">
+          <el-input v-model.number="monitor.logs_storage_retention" id="monitor-logs_storage_retention">
+            <template slot="append"><span >{{$t('config.system.basic.day')}}</span></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.system.monitor.logs_storage_type')" prop="logs_storage_type">
+          <el-select v-model="monitor.logs_storage_type" popper-class="right-box-select-top right-public-box-dropdown-top">
+            <el-option :label="$t('config.system.monitor.local')" value="1"></el-option>
+            <el-option :label="$t('config.system.monitor.s3')" value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <transition name="el-zoom-in-top">
+          <div v-show="monitor.logs_storage_type == 2">
+            <el-form-item :label="$t('config.system.monitor.logs_storage_s3_endpoint')" prop="logs_storage_s3_endpoint" :rules=" [ { required: monitor.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
+              <el-input v-model="monitor.logs_storage_s3_endpoint" id="monitor-logs_storage_s3_endpoint">
+              </el-input>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.monitor.logs_storage_s3_bucket')" prop="logs_storage_s3_bucket" :rules=" [ { required: monitor.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
+              <el-input v-model="monitor.logs_storage_s3_bucket" id="monitor-logs_storage_s3_bucket">
+              </el-input>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.monitor.logs_storage_s3_access_key')" prop="logs_storage_s3_access_key" :rules=" [ { required: monitor.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
+              <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.system.monitor.logs_storage_s3_secret_access_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-input v-model="monitor.logs_storage_s3_secret_access_key" id="monitor-logs_storage_s3_secret_access_key">
+              </el-input>
+            </el-form-item>
+          </div>
+        </transition>
+        <el-form-item :label="$t('config.system.monitor.logs_query_range_default_limit')" prop="logs_query_range_default_limit">
+          <el-input-number v-model="monitor.logs_query_range_default_limit" controls-position="right" :min="-1" :max="1000" :precision="0" id="system-monitor-logs_query_range_default_limit"></el-input-number>
+        </el-form-item>
+        <el-form-item>
+          <button id="system-monitor-save" v-has="'system_basic_edit'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-normal"  type="button" @click="saveSetInfo('monitor','monitorForm')">{{$t('overall.submit')}}</button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
 </template>
 
 <script>
+import systemMixin from '../../common/mixin/system/systemMixin'
+import routerPathParams from '../../common/mixin/routerPathParams'
+
 export default {
-  name: 'monitor'
+  name: 'monitor',
+  mixins: [systemMixin, routerPathParams],
+  data () {
+    return {
+      switchTab: 'monitor',
+      monitor: {
+        // alert_api: '',
+        asset_ping_from: '',
+        asset_ping_interval: '',
+        default_scrape_interval: '',
+        default_scrape_timeout: '',
+        logs_query_range_default_limit: '',
+        logs_storage_retention: '',
+        logs_storage_s3_access_key: '',
+        logs_storage_s3_bucket: '',
+        logs_storage_s3_endpoint: '',
+        logs_storage_s3_secret_access_key: '',
+        logs_storage_type: '',
+        metrics_query_max_series: '',
+        metrics_storage_retention: '',
+        metrics_storage_s3_access_key: '',
+        metrics_storage_s3_bucket: '',
+        metrics_storage_s3_endpoint: '',
+        metrics_storage_s3_secret_access_key: '',
+        metrics_storage_type: '',
+        prometheus_federation_enabled: ''
+      },
+      monitorRules: {
+        // alert_api: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        asset_ping_from: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        asset_ping_interval: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        default_scrape_interval: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        default_scrape_timeout: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        logs_query_range_default_limit: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        logs_storage_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        logs_storage_type: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        metrics_query_max_series: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        metrics_storage_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        metrics_storage_type: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        prometheus_federation_enabled: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
+      }
+    }
+  },
+  mounted () {
+    this.querySetInfo(this.switchTab)
+  },
+  methods: {
+    lnglatChange (lnglat, zoom) {
+      const lnglatData = lnglat.split('.')
+      this.basic.map_center_config.longitude = lnglatData[0]
+      this.basic.map_center_config.latitude = lnglatData[1]
+      this.basic.map_center_config.zoom = zoom
+      this.basic.lnglat = lnglat
+    }
+  }
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/nezha-fronted/src/components/page/config/terminal.vue b/nezha-fronted/src/components/page/config/terminal.vue
index 6fe7b9731..12e244600 100644
--- a/nezha-fronted/src/components/page/config/terminal.vue
+++ b/nezha-fronted/src/components/page/config/terminal.vue
@@ -1,10 +1,59 @@
 <template>
-<div>terminal</div>
+  <div class="system">
+    <div class="system-config-form terminal">
+      <div class="system-title">{{$t('config.system.basic.title')}}</div>
+      <el-form :model="terminal"  label-width="180px" size="small" ref="terminalForm" :rules="terminalRules">
+        <!--            <el-form-item :label="$t('config.system.terminal.timeout')" prop="terminal_timeout">-->
+        <!--              <el-input v-model="terminal.terminal_timeout" controls-position="right" :min="1"  id="system-terminal-max_terminal_num">-->
+        <!--                <template slot="append"><span >{{$t('config.system.basic.second')}}</span></template>-->
+        <!--              </el-input>-->
+        <!--            </el-form-item>-->
+        <el-form-item :label="$t('config.system.terminal.userTip')" prop="terminal_telnet_user_tip">
+          <el-input id="system-terminal-user-tip" v-model="terminal.terminal_telnet_user_tip"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.system.terminal.pinTip')" prop="terminal_telnet_pin_tip">
+          <el-input id="system-terminal_telnet_pin_tip" v-model="terminal.terminal_telnet_pin_tip"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.system.terminal.localRetention')" prop="terminal_record_local_retention">
+          <el-input v-model="terminal.terminal_record_local_retention" controls-position="right" :min="1"  id="system-terminal_record_local_retention">
+            <template slot="append"><span >{{$t('config.system.basic.day')}}</span></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <button v-has="'system_terminal_edit'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" @click="saveSetInfo('terminal','terminalForm')">{{$t('overall.submit')}}</button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
 </template>
 
 <script>
+import { positiveInteger } from '../../common/js/validate'
+import systemMixin from '../../common/mixin/system/systemMixin'
+import routerPathParams from '../../common/mixin/routerPathParams'
+
 export default {
-  name: 'terminal'
+  name: 'terminal',
+  mixins: [systemMixin, routerPathParams],
+  data () {
+    return {
+      switchTab: 'terminal',
+      terminal: {
+        terminal_timeout: 30,
+        terminal_telnet_user_tip: 'ogin:',
+        terminal_telnet_pin_tip: 'assword:',
+        terminal_record_local_retention: 365
+      },
+      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' }]
+      }
+    }
+  },
+  mounted () {
+    this.querySetInfo(this.switchTab)
+  }
 }
 </script>