From 455210a61e94bc644624225ae9984c5273487f58 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Wed, 5 Jun 2024 14:01:25 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-3486=20fix:=20Collectors=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E4=BE=A7=E6=BB=91=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/agent.scss     |   2 +-
 .../css/components/page/config/system.scss    |   2 +-
 .../common/rightBox/configurationBox.vue      | 131 ++++++++++++++++--
 .../src/components/page/config/collectors.vue |  21 ++-
 4 files changed, 133 insertions(+), 23 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/page/config/agent.scss b/nezha-fronted/src/assets/css/components/page/config/agent.scss
index 579d3586f..bb3637213 100644
--- a/nezha-fronted/src/assets/css/components/page/config/agent.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/agent.scss
@@ -48,7 +48,7 @@
   display: flex;
   flex-direction: column;
   background-color: $--background-color-empty;
-  .system-title {
+  &>.system-title {
     font-family: Roboto-Medium;
     font-size: 14px;
     color: $--license-left-title-color;
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 030fc7b8c..e3e590ffe 100644
--- a/nezha-fronted/src/assets/css/components/page/config/system.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/system.scss
@@ -46,7 +46,7 @@
     }
   }
 }
-.system-config-form.basicForm {
+.system-config-form.basicForm, .right-box-APMSettings{
   .vue-tags-input {
     max-width: unset !important;
   }
diff --git a/nezha-fronted/src/components/common/rightBox/configurationBox.vue b/nezha-fronted/src/components/common/rightBox/configurationBox.vue
index f04ead376..828ba51e2 100644
--- a/nezha-fronted/src/components/common/rightBox/configurationBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/configurationBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-clickoutside="{obj: editBox, func: esc}" class="right-box">
+  <div v-clickoutside="{obj: editBox, func: esc}" class="right-box right-box-APMSettings">
     <div class="right-box__header">
       <div class="header__title">{{$t('config.edit_APM_settings')}}</div>
       <div class="header__operation">
@@ -9,30 +9,121 @@
     <div class="right-box__container">
       <div class="container__form">
         <el-form ref="form" :model="editBox" :rules="rules" label-position="top" label-width="120px">
-          <!-- asset_ping_interval -->
-          <el-form-item :label="$t('overall.name')" prop="asset_ping_interval">
-            <el-input v-model.number="editBox.asset_ping_interval" size="small">
-              <template slot="append"><span>{{$t('alert.config.second')}}</span></template>
-            </el-input>
+          <!-- prometheus_federation_enabled -->
+          <el-form-item :label="$t('setup.system.federation')" prop="prometheus_federation_enabled">
+            <el-checkbox v-model="editBox.prometheus_federation_enabled" true-label="1" false-label="0"></el-checkbox>
           </el-form-item>
           <!-- default_scrape_interval -->
-          <el-form-item :label="$t('config.default_scrape_interval')" prop="default_scrape_interval">
+          <el-form-item :label="$t('project.endpoint.scrape_interval')" prop="default_scrape_interval">
             <el-input v-model.number="editBox.default_scrape_interval" size="small">
               <template slot="append"><span>{{$t('alert.config.second')}}</span></template>
             </el-input>
           </el-form-item>
+          <!-- default_scrape_timeout -->
+          <el-form-item :label="$t('config.system.basic.scrapeTimeout')" prop="default_scrape_timeout">
+            <el-input v-model.number="editBox.default_scrape_timeout" size="small">
+              <template slot="append"><span >{{$t('alert.config.second')}}</span></template>
+            </el-input>
+          </el-form-item>
+          <!-- asset_ping_interval -->
+          <el-form-item :label="$t('config.system.basic.assetPingInterval')" prop="asset_ping_interval">
+            <el-input v-model.number="editBox.asset_ping_interval" size="small">
+              <template slot="append"><span>{{$t('alert.config.second')}}</span></template>
+            </el-input>
+          </el-form-item>
+          <!-- asset_ping_from -->
+          <el-form-item :label="$t('config.system.monitor.asset_ping_from')" prop="asset_ping_from">
+            <el-select v-model="editBox.asset_ping_from" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top" size="small">
+              <el-option label="Global" value="1"></el-option>
+              <el-option label="Per-datacenter" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+          <!-- interface_name -->
+          <el-form-item :label="$t('config.system.monitor.interface_name')" prop="interface_name">
+            <vue-tags-input
+              v-model="tag"
+              :class="editBox.interface_name.length !== 0 ? 'interface-name' : ''"
+              :placeholder="$t('tagsInput.placeholder')"
+              :tags="editBox.interface_name"
+              @tags-changed="newTags=> editBox.interface_name = newTags"
+            />
+          </el-form-item>
+
+          <!-- metrics -->
+          <div class="form__sub-title" >
+            <span>{{$t('config.system.monitor.metricsTitle')}}</span>
+          </div>
           <!-- metrics_storage_retention -->
           <el-form-item :label="$t('config.metric_retention_days')" prop="metrics_storage_retention">
             <el-input v-model.number="editBox.metrics_storage_retention" size="small">
               <template slot="append"><span>{{$t('config.system.basic.day')}}</span></template>
             </el-input>
           </el-form-item>
+          <!-- metrics_storage_type -->
+          <el-form-item :label="$t('config.system.monitor.metrics_storage_type')" prop="metrics_storage_type">
+            <el-select v-model="editBox.metrics_storage_type" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top" size="small">
+              <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="editBox.metrics_storage_type == 2">
+              <el-form-item :label="$t('asset.endpoint')" prop="metrics_storage_s3_endpoint" :rules=" [ { required: editBox.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
+                <el-input v-model="editBox.metrics_storage_s3_endpoint" size="small"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.monitor.metrics_storage_s3_bucket')" prop="metrics_storage_s3_bucket" :rules=" [ { required: editBox.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
+                <el-input v-model="editBox.metrics_storage_s3_bucket" size="small"></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: editBox.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
+                <el-input v-model="editBox.metrics_storage_s3_access_key" size="small"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.terminallog.key')" prop="metrics_storage_s3_secret_access_key" :rules=" [ { required: editBox.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
+                <el-input v-model="editBox.metrics_storage_s3_secret_access_key" type="password" auto-complete="new-password" size="small"></el-input>
+              </el-form-item>
+            </div>
+          </transition>
+          <!-- metrics_query_max_series -->
+          <el-form-item :label="$t('config.system.basic.maxSeries')" prop="metrics_query_max_series">
+            <el-input-number v-model="editBox.metrics_query_max_series" controls-position="right" :min="-1" :max="1000" :precision="0" size="small" style="width: 100%"></el-input-number>
+          </el-form-item>
+
+          <!-- logs -->
+          <div class="form__sub-title" >
+            <span>{{$t('config.system.monitor.logsTitle')}}</span>
+          </div>
           <!-- logs_storage_retention -->
           <el-form-item :label="$t('config.log_retention_days')" prop="logs_storage_retention">
             <el-input v-model.number="editBox.logs_storage_retention" size="small">
               <template slot="append"><span>{{$t('config.system.basic.day')}}</span></template>
             </el-input>
           </el-form-item>
+          <!-- logs_storage_type -->
+          <el-form-item :label="$t('config.system.monitor.metrics_storage_type')" prop="logs_storage_type">
+            <el-select v-model="editBox.logs_storage_type" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top" size="small">
+              <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="editBox.logs_storage_type == 2">
+              <el-form-item :label="$t('asset.endpoint')" prop="logs_storage_s3_endpoint" :rules=" [ { required: editBox.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
+                <el-input v-model="editBox.logs_storage_s3_endpoint" size="small"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.monitor.metrics_storage_s3_bucket')" prop="logs_storage_s3_bucket" :rules=" [ { required: editBox.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
+                <el-input v-model="editBox.logs_storage_s3_bucket" size="small"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.system.monitor.metrics_storage_s3_access_key')" prop="logs_storage_s3_access_key" :rules=" [ { required: editBox.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
+                <el-input v-model="editBox.logs_storage_s3_access_key" size="small"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('config.terminallog.key')" prop="logs_storage_s3_secret_access_key" :rules=" [ { required: editBox.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
+                <el-input v-model="editBox.logs_storage_s3_secret_access_key" type="password" auto-complete="new-password" size="small"></el-input>
+              </el-form-item>
+            </div>
+          </transition>
+          <!-- logs_query_range_default_limit -->
+          <el-form-item :label="$t('config.system.monitor.logs_query_range_default_limit')" prop="logs_query_range_default_limit">
+            <el-input-number v-model="editBox.logs_query_range_default_limit" controls-position="right" :min="-1" :max="1000" :precision="0" size="small" style="width: 100%"></el-input-number>
+          </el-form-item>
         </el-form>
       </div>
     </div>
@@ -49,6 +140,7 @@
 
 <script>
 import editRigthBox from '../mixin/editRigthBox'
+import VueTagsInput from '@johmun/vue-tags-input'
 export default {
   name: 'configurationBox',
   props: {
@@ -57,21 +149,28 @@ export default {
     }
   },
   mixins: [editRigthBox],
+  components: {
+    VueTagsInput
+  },
   data () {
     return {
       url: '/sys/config/monitor',
       editBox: {
-        asset_ping_interval: '',
-        default_scrape_interval: '',
-        metrics_storage_retention: '',
-        logs_storage_retention: ''
       },
       rules: {
-        asset_ping_interval: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        prometheus_federation_enabled: [{ 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' }],
+        asset_ping_interval: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        asset_ping_from: [{ 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' }],
+        logs_query_range_default_limit: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
         metrics_storage_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
-        logs_storage_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
-      }
+        metrics_storage_type: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        metrics_query_max_series: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
+      },
+      tag: ''
     }
   },
   methods: {
@@ -93,6 +192,10 @@ export default {
           const params = {
             ...this.editBox
           }
+          const str = this.editBox.interface_name.map(item => {
+            return item.text
+          })
+          params.interface_name = str.join(',')
           this.$put(this.url, params).then(res => {
             this.prevent_opt.save = false
             if (res.code === 200) {
diff --git a/nezha-fronted/src/components/page/config/collectors.vue b/nezha-fronted/src/components/page/config/collectors.vue
index 7fdd33a8f..65e01052a 100644
--- a/nezha-fronted/src/components/page/config/collectors.vue
+++ b/nezha-fronted/src/components/page/config/collectors.vue
@@ -473,18 +473,25 @@ export default {
       this.configurationBox = false
     },
     configurationEdit () {
-      this.$get('/sys/config/monitor').then(res => {
-        if (res.code === 200) {
-          this.configurationObject = res.data
+      this.$get('/sys/config/monitor').then(response => {
+        if (response.code === 200) {
+          this.configurationObject = response.data
+          if (response.data.interface_name) {
+            const arr = response.data.interface_name.split(',')
+            this.configurationObject.interface_name = arr.map(item => {
+              return { text: item }
+            })
+          }
           this.configurationBox = true
         }
       })
     },
     getConfiguration () {
-      this.$get('/sys/config/monitor').then((res) => {
-        if (res.code == 200) {
-          if (res.data) {
-            this.$set(this.configurationData, 0, res.data)
+      this.$get('/sys/config/monitor').then((response) => {
+        if (response.code == 200) {
+          if (response.data) {
+            this.$set(this.configurationData, 0, response.data)
+            localStorage.setItem('nz-prometheus-federation-enabled', response.data.prometheus_federation_enabled)
           }
         }
       })