From 2113c435a4c12fc561bdf98493e3b3f7e565409d Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 19 Aug 2021 15:54:38 +0800
Subject: [PATCH 1/2] =?UTF-8?q?NEZ-916=20feat=EF=BC=9A=20module=20endpoint?=
 =?UTF-8?q?=20=E6=94=AF=E6=8C=81relabel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/js/constants.js     |  20 +--
 .../src/components/common/js/validate.js      |   8 +
 .../src/components/common/language/cn.js      |   4 +-
 .../src/components/common/language/en.js      |   4 +-
 .../components/common/rightBox/agentBox.vue   |  17 ++-
 .../common/rightBox/batchAddEndpoint.vue      |   7 +
 .../common/rightBox/editEndpointBoxNew.vue    | 141 +++++++++++++++++-
 .../components/common/rightBox/moduleBox.vue  | 136 ++++++++++++++++-
 .../page/monitor/endpoint/endpointList.vue    |   8 +
 .../page/monitor/module/moduleList.vue        |  17 +++
 10 files changed, 326 insertions(+), 36 deletions(-)

diff --git a/nezha-fronted/src/components/common/js/constants.js b/nezha-fronted/src/components/common/js/constants.js
index dad15dcc9..8bdca6e8e 100644
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -18,11 +18,11 @@ export const agent = {
           value: 2,
           text: 'Per-datacenter'
         },
-        {
-          label: 'Loki',
-          value: 11,
-          text: 'Loki'
-        }
+        // {
+        //   label: 'Loki',
+        //   value: 11,
+        //   text: 'Loki'
+        // }
       ]
     },
     {
@@ -70,12 +70,12 @@ export const agent2 = {
       label: 'Per-datacenter',
       value: 2,
       text: 'Per-datacenter'
-    },
-    {
-      label: 'Loki',
-      value: 11,
-      text: 'Loki'
     }
+    // {
+    //   label: 'Loki',
+    //   value: 11,
+    //   text: 'Loki'
+    // }
   ],
   theDataGroup: [
     {
diff --git a/nezha-fronted/src/components/common/js/validate.js b/nezha-fronted/src/components/common/js/validate.js
index bcf9a0f99..612c0b972 100644
--- a/nezha-fronted/src/components/common/js/validate.js
+++ b/nezha-fronted/src/components/common/js/validate.js
@@ -170,6 +170,14 @@ export function checkExprTempAge (rule, value, callback) {
   }, 100)
 }
 
+export function arrLength (rule, value, callback) { // 校验经纬度
+  if (value.length > 0) {
+    callback()
+  } else {
+    callback(new Error(vm.$t('validate.required')))
+  }
+}
+
 export function longAndLat (rule, value, callback) { // 校验经纬度
 
 }
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index e29bcdcf8..d6cdf4307 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -150,7 +150,9 @@ const cn = {
     generate: '生产',
     personalCenter: '个人中心',
     operationRecord: '操作记录',
-    changePassword: '修改密码'
+    changePassword: '修改密码',
+    relabelConfigRegex: '默认是 (.*) ',
+    relabelConfigReplacement: '默认是 $1'
   },
   setup: {
     step0: '欢迎',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 3b7791e47..3300aac3c 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -155,7 +155,9 @@ const en = {
     generate: 'Generate',
     personalCenter: 'Personal center',
     operationRecord: 'Operation record',
-    changePassword: 'Change password'
+    changePassword: 'Change password',
+    relabelConfigRegex: 'Default is (.*) ',
+    relabelConfigReplacement: 'Default is $1'
   },
   pageSize: '/page',
   setup: {
diff --git a/nezha-fronted/src/components/common/rightBox/agentBox.vue b/nezha-fronted/src/components/common/rightBox/agentBox.vue
index 31db5bab4..777867f26 100644
--- a/nezha-fronted/src/components/common/rightBox/agentBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/agentBox.vue
@@ -43,14 +43,15 @@
   <!--            :props="{ multiple: false, checkStrictly: false ,emitPath:false}"-->
   <!--            clearable></el-cascader>-->
             <el-select  v-model="editPromServer.type" :disabled="editPromServer.id != null&& editPromServer.id != ''" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value">
-              <el-option-group
-                v-for="group in agent2.theDataGroup"
-                :key="group.label"
-                :label="group.label">
-                <el-option v-for="item in group.option" :key="item.value" :label="item.label" :value="item.value" :disabled="federationEnabled && item.value == 2">
-                  <span class="panel-dropdown-label-txt" >{{item.label}}</span>
-                </el-option>
-              </el-option-group>
+<!--              <el-option-group-->
+<!--                v-for="group in agent2.theData"-->
+<!--                :key="group.label"-->
+<!--                :label="group.label">-->
+<!--                -->
+<!--              </el-option-group>-->
+              <el-option v-for="item in agent2.theData" :key="item.value" :label="item.label" :value="item.value" :disabled="federationEnabled && item.value == 2">
+                <span class="panel-dropdown-label-txt" >{{item.label}}</span>
+              </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="Token" prop="token">
diff --git a/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue b/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue
index 7bb5cad36..1ebb4a10d 100644
--- a/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue
+++ b/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue
@@ -404,6 +404,13 @@ export default {
       // this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : ''
       this.object.paramObj = []
       this.object.labelModule = []
+      if (!this.object.configs[0].config.relabel_config) {
+        this.object.configs[0].config.relabel_config = []
+      }
+      this.object.configs[0].config.relabel_config && this.object.configs[0].config.relabel_config.forEach(item => {
+        item.showAllRelabelOption = false
+        item.tags = ''
+      })
       this.object.configs[1].config.forEach(item => {
         item.labelModule = []
         if (JSON.stringify(item.labels) !== '{}' && item.labels) {
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
index da6a29816..c9207f465 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -116,7 +116,7 @@
                 <!--port-->
                 <el-form-item :label='$t("project.endpoint.port")' class="half-form-item" prop="configs.0.config.port" :rules="[
                 { validator: port, trigger: 'blur' },
-                { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+                { required: true, message: $t('validate.required'), trigger: 'blur' }
               ]">
                   <el-input id="module-box-input-port" v-model.number="editEndpoint.configs[0].config.port" placeholder="" size="small"></el-input>
                 </el-form-item>
@@ -137,7 +137,7 @@
                     <div class="sub-label sub-label-required" style="padding-left: 0">{{$t('project.module.walk')}}</div>
                   </el-col>
                   <el-col :span="24">
-                    <el-form-item prop="configs.0.config.walk"  :rules="[{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]">
+                    <el-form-item prop="configs.0.config.walk"  :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]">
                       <select-walk ref="selectWalk" :currentWalk="editEndpoint.configs[0].config.walk" :expandedWalk="expandedWalkData" :placement="'bottom-start'" :walkData="walkData" @selectWalk="selectWalk">
                         <template v-slot:trigger>
                           <div class="el-cascader">
@@ -235,6 +235,61 @@
               </span>
                 </div>
               </el-tab-pane>
+              <el-tab-pane label="Relabel" name="Relabel">
+                <div id="module-box-relabel" ref="labelBoxScrollbar" style="height: 100%; overflow: hidden;">
+                  <div v-for="(item, index) in  this.editEndpoint.configs[0].config.relabel_config" :key="index" class="">
+                    <div class="pipeline-box">
+                      <span class="pipeline-title">{{'item' + index}}</span>
+                      <span class="pipeline-option">
+                      <i class="nz-icon nz-icon-shanchu1" @click="removeRelabel(index)"></i>
+                    </span>
+                    </div>
+                    <div>
+                      <el-form-item :prop="'configs.0.config.relabel_config.' + index + '.source_labels'" class="" :label="'Source labels'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' },{ validator:  arrLength, trigger: 'change' }]">
+                        <vue-tags-input
+                          v-model="item.tags"
+                          :maxlength="32"
+                          :placeholder="'add parameter'"
+                          :tags="item.source_labels"
+                          @tags-changed="(newTags)=>{tagsChangeRelabel(newTags, index)}"
+                        />
+                      </el-form-item>
+                      <el-form-item :prop="'configs.0.config.relabel_config.' + index + '.action'" class="half-form-item" :label="'Action'">
+                        <el-select v-model="item.action" :id="'action' + index " class="right-box__select " placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="actionChange(index)" :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]">
+                          <el-option v-for="item2 in actionList" :id="'module-action-'+item2.label" :key="item2.label" :label="item2.label" :value="item2.value"></el-option>
+                        </el-select>
+                      </el-form-item>
+                      <el-form-item :prop="'configs.0.config.relabel_config.' + index + '.target_label'" class="half-form-item" :label="'Target label'" :rules="[{ required: item.action === 'replace', message: $t('validate.required'), trigger: 'blur' },{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]">
+                        <el-input id="module-box-input-target_label" v-model="item.target_label" placeholder='' size="small"></el-input>
+                      </el-form-item>
+                    </div>
+                    <!--                    <span :id="'moduel-remove-label-'+index" class="param-box-row-symbol" @click="removeRelabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>-->
+                    <transition name="el-zoom-in-top">
+                      <div v-show="item.showAllRelabelOption" >
+                        <!--scrape_interval-->
+                        <el-form-item :label='"Regex"' class="half-form-item" :prop="'configs.0.config.relabel_config.' + index + '.regex'">
+                          <el-input id="module-box-input-regex" v-model="item.regex" :placeholder="$t('overall.relabelConfigRegex')" size="small"></el-input>
+                        </el-form-item>
+                        <!--scrape_timeout-->
+                        <el-form-item :label='"Replacement"' class="half-form-item" :prop="'configs.0.config.relabel_config.' + index + '.replacement'">
+                          <el-input id="module-box-input-replacement" v-model="item.replacement" :placeholder="$t('overall.relabelConfigReplacement')" size="small"></el-input>
+                        </el-form-item>
+                      </div>
+                    </transition>
+                    <div style="text-align: center">
+                  <span class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" style="border: none" @click="item.showAllRelabelOption=!item.showAllRelabelOption">
+                    {{$t('overall.moreOption')}}
+                    <i :class="item.showAllRelabelOption?'is-active':''" class="nz-icon nz-icon-arrow-down need-rotate" ></i>
+                  </span>
+                    </div>
+                  </div>
+                </div>
+                <div style="text-align: center">
+                 <span id="module-add-relabel" class="right-box-form-add module-add-label margin-t-10" type="button" @click="addRelabel">
+                   <span><i class="nz-icon nz-icon-plus" style="font-size: 16px;"></i></span>
+                 </span>
+                </div>
+              </el-tab-pane>
               <el-tab-pane v-if="editEndpoint.configs[0].config.protocol !== 'snmp'" label="Auth" name="Auth">
                 <!--authtype-->
                 <el-form-item :label='$t("project.endpoint.type")' prop="authtype">
@@ -244,16 +299,16 @@
                 </el-form-item>
 
                 <!--authtype 1-->
-                <el-form-item v-if="authType === 1" :label='$t("project.endpoint.username")' class="half-form-item" prop="configs.0.config.basic_auth.username" :rules="[{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]">
+                <el-form-item v-if="authType === 1" :label='$t("project.endpoint.username")' class="half-form-item" prop="configs.0.config.basic_auth.username" :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]">
                   <el-input id="module-box-input-uername" v-model="editEndpoint.configs[0].config.basic_auth.username" placeholder='' size="small"></el-input>
                 </el-form-item>
 
-                <el-form-item v-if="authType === 1" :label='$t("project.endpoint.pin")' class="half-form-item" prop="configs.0.config.basic_auth.pin" :rules="[{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]">
+                <el-form-item v-if="authType === 1" :label='$t("project.endpoint.pin")' class="half-form-item" prop="configs.0.config.basic_auth.pin" :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]">
                   <el-input id="module-box-input-password" v-model="editEndpoint.configs[0].config.basic_auth.pin" type="password" autocomplete="new-password" placeholder='' size="small"></el-input>
                 </el-form-item>
 
                 <!--authtype 2-->
-                <el-form-item v-if="authType === 2" :label='$t("project.endpoint.bearer_token")' prop="configs.0.config.bearer_token" :rules="[{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]">
+                <el-form-item v-if="authType === 2" :label='$t("project.endpoint.bearer_token")' prop="configs.0.config.bearer_token" :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]">
                   <el-input id="module-box-input-bearer_token" v-model="editEndpoint.configs[0].config.bearer_token" placeholder='' size="small"></el-input>
                 </el-form-item>
 
@@ -501,12 +556,11 @@
 </template>
 
 <script>
-import { noSpecialChar, port } from '../js/validate'
+import { noSpecialChar, port, arrLength } from '../js/validate'
 import pipelineSelect from './pipelineSelect'
 import selectWalk from '../popBox/selectWalk'
 import editRigthBox from '../mixin/editRigthBox'
 import VueTagsInput from '@johmun/vue-tags-input'
-import project from '@/components/page/monitor/project/project'
 
 export default {
   name: 'editEndpointBoxNew',
@@ -701,11 +755,31 @@ export default {
         }
       ],
       timestampList: ['ANSIC', 'UnixDate', 'RubyDate', 'RFC822', 'RFC822Z', 'RFC850', 'RFC1123', 'RFC1123Z', 'RFC3339', 'RFC3339Nano', 'Unix', 'UnixMs', 'UnixUs', 'UnixNs'],
+      actionList: [{
+        value: 'replace',
+        label: 'Replace'
+      }, {
+        value: 'keep',
+        label: 'Keep'
+      }, {
+        value: 'drop',
+        label: 'Drop'
+      }, {
+        value: 'labelmap',
+        label: 'Labelmap'
+      }, {
+        value: 'labeldrop',
+        label: 'Labeldrop'
+      }, {
+        value: 'labelkeep',
+        label: 'Labelkeep'
+      }],
       metricsShow: true,
       logsShow: true
     }
   },
   methods: {
+    arrLength: arrLength,
     port: port,
     selectWalk (walk) {
       if (this.editEndpoint.configs[0].config.walk.indexOf(walk) != -1) {
@@ -858,6 +932,10 @@ export default {
             delete item.unit
           }
         })
+        params.configs[0].config.relabel_config.relabel_config && params.configs[0].config.relabel_config.forEach(item => {
+          delete item.tags
+          delete item.showAllRelabelOption
+        })
         params.configs = JSON.stringify(params.configs)
         this.$nextTick(() => {
           this.$refs.moduleForm.validate((valid, errorKey) => {
@@ -868,8 +946,10 @@ export default {
                 const keyArr = key.split('.')
                 if (keyArr[3] === 'basic_auth' || keyArr[3] === 'bearer_token') {
                   this.activeName = 'Auth'
-                } else if (keyArr[3] === 'basic' || keyArr[3] === 'port') {
+                } else if (keyArr[3] === 'basic' || keyArr[3] === 'port' || keyArr[3] === 'host') {
                   this.activeName = 'Basic'
+                } else {
+                  this.activeName = 'Relabel'
                 }
               } else if (key.indexOf('configs.1') !== -1) {
                 const keyArr = key.split('.')
@@ -1284,6 +1364,10 @@ export default {
             })
             this.editEndpoint.paramObj = []
             this.editEndpoint.labelModule = []
+            this.editEndpoint.configs[0].config.relabel_config && this.editEndpoint.configs[0].config.relabel_config.forEach(item => {
+              item.showAllRelabelOption = false
+              item.tags = ''
+            })
             if (JSON.stringify(this.editEndpoint.configs[0].config.labels) !== '{}' && this.editEndpoint.configs[0].config.labels) {
               Object.keys(this.editEndpoint.configs[0].config.labels).forEach(key => {
                 this.editEndpoint.labelModule.push({ key, value: this.editEndpoint.configs[0].config.labels[key] })
@@ -1307,6 +1391,37 @@ export default {
           // }
         })
       }
+    },
+    removeRelabel (index) {
+      // if (this.editEndpoint.configs[0].config.relabel_config.length === 1) {
+      //   this.editEndpoint.configs[0].config.relabel_config = [{
+      //     source_labels: [],
+      //     target_label: '',
+      //     action: '',
+      //     regex: '',
+      //     replacement: '',
+      //     showAllRelabelOption: false
+      //   }]
+      //   return
+      // }
+      this.editEndpoint.configs[0].config.relabel_config.splice(index, 1)
+    },
+    tagsChangeRelabel (newTags, index) {
+      this.editEndpoint.configs[0].config.relabel_config[index].source_labels = newTags.map(item => item.text)
+      this.$refs.moduleForm.clearValidate('configs.0.config.relabel_config.' + index + '.source_labels')
+    },
+    actionChange (index) {
+      this.$refs.moduleForm.clearValidate('configs.0.config.relabel_config.' + index + '.target_label')
+    },
+    addRelabel () {
+      this.editEndpoint.configs[0].config.relabel_config.push({
+        source_labels: [],
+        target_label: '',
+        action: 'replace',
+        regex: '(.*)',
+        replacement: '$1',
+        showAllRelabelOption: false
+      })
     }
   },
   mounted () {
@@ -1380,6 +1495,10 @@ export default {
           if (params[0].config.labels && !Object.keys(params[0].config.labels).length) {
             delete params[0].config.labels
           }
+          params[0].config.relabel_config && params[0].config.relabel_config.forEach(item => {
+            delete item.tags
+            delete item.showAllRelabelOption
+          })
           params[1].config.forEach(item => {
             if (item.labelModule) {
               item.labels = this.labelsToJson(item.labelModule)
@@ -1596,6 +1715,12 @@ export default {
     color: #FA901C;
     box-sizing: border-box;
   }
+  #module-box-relabel /deep/ .vue-tags-input{
+    max-width: unset;
+  }
+  /deep/ .is-error .vue-tags-input{
+    border: 1px solid #F56C6C;
+  }
   .pipeline-box{
     display: flex;
     justify-content: space-between;
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 360d2688b..3a8589018 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -96,7 +96,7 @@
               <!--port-->
               <el-form-item :label='$t("project.endpoint.port")' class="half-form-item" prop="configs.0.config.port" :rules="[
                 { validator: port, trigger: 'blur' },
-                { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+                { required: true, message: $t('validate.required'), trigger: 'blur' }
               ]">
                 <el-input id="module-box-input-port" v-model.number="editModule.configs[0].config.port" placeholder="" size="small"></el-input>
               </el-form-item>
@@ -107,7 +107,7 @@
                 </el-select>
               </el-form-item>
               <!--host-->
-              <el-form-item :label='$t("project.endpoint.host")' class="half-form-item" prop="configs.0.config.host" :rules="[{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]">
+              <el-form-item :label='$t("project.endpoint.host")' class="half-form-item" prop="configs.0.config.host" :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]">
                 <el-input id="module-box-input-host" v-model="editModule.configs[0].config.host" placeholder="" size="small"></el-input>
               </el-form-item>
               <!-- snmp表单 -->
@@ -117,7 +117,7 @@
                     <div class="sub-label sub-label-required" style="padding-left: 0">{{$t('project.module.walk')}}</div>
                   </el-col>
                   <el-col :span="24">
-                    <el-form-item prop="configs.0.config.walk" :rules="[{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]">
+                    <el-form-item prop="configs.0.config.walk" :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]">
                       <select-walk ref="selectWalk" :currentWalk="editModule.configs[0].config.walk" :expandedWalk="expandedWalkData" :placement="'bottom-start'" :walkData="walkData" @selectWalk="selectWalk">
                         <template v-slot:trigger>
                           <div class="el-cascader">
@@ -147,6 +147,7 @@
                 </el-select>
               </el-form-item>
           </div>
+<!--              more option-->
               <transition name="el-zoom-in-top">
                 <div v-show="showAllBasicOption" >
                   <!--scrape_interval-->
@@ -215,6 +216,61 @@
               </span>
               </div>
             </el-tab-pane>
+             <el-tab-pane label="Relabel" name="Relabel">
+                <div id="module-box-relabel" ref="labelBoxScrollbar" style="height: 100%; overflow: hidden;">
+                  <div v-for="(item, index) in  this.editModule.configs[0].config.relabel_config" :key="index" class="">
+                    <div class="pipeline-box">
+                      <span class="pipeline-title">{{'item' + index}}</span>
+                      <span class="pipeline-option">
+                      <i class="nz-icon nz-icon-shanchu1" @click="removeRelabel(index)"></i>
+                    </span>
+                    </div>
+                   <div>
+                     <el-form-item :prop="'configs.0.config.relabel_config.' + index + '.source_labels'" class="" :label="'Source labels'"  :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' },{ validator:  arrLength, trigger: 'change' }]">
+                       <vue-tags-input
+                         v-model="item.tags"
+                         :maxlength="32"
+                         :placeholder="'add parameter'"
+                         :tags="item.source_labels"
+                         @tags-changed="(newTags)=>{tagsChangeRelabel(newTags, index)}"
+                       />
+                     </el-form-item>
+                     <el-form-item :prop="'configs.0.config.relabel_config.' + index + '.action'" class="half-form-item" :label="'Action'">
+                       <el-select v-model="item.action" :id="'action' + index " class="right-box__select " placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="actionChange(index)" :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]">
+                         <el-option v-for="item2 in actionList" :id="'module-action-'+item2.label" :key="item2.label" :label="item2.label" :value="item2.value"></el-option>
+                       </el-select>
+                     </el-form-item>
+                     <el-form-item :prop="'configs.0.config.relabel_config.' + index + '.target_label'" class="half-form-item" :label="'Target label'" :rules="[{ required: item.action === 'replace', message: $t('validate.required'), trigger: 'blur' },{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]">
+                       <el-input id="module-box-input-target_label" v-model="item.target_label" placeholder='' size="small"></el-input>
+                     </el-form-item>
+                   </div>
+<!--                    <span :id="'moduel-remove-label-'+index" class="param-box-row-symbol" @click="removeRelabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>-->
+                    <transition name="el-zoom-in-top">
+                      <div v-show="item.showAllRelabelOption" >
+                        <!--Regex-->
+                        <el-form-item :label='"Regex"' class="half-form-item" :prop="'configs.0.config.relabel_config.' + index + '.regex'">
+                          <el-input id="module-box-input-regex" v-model="item.regex" :placeholder="$t('overall.relabelConfigRegex')" size="small"></el-input>
+                        </el-form-item>
+                        <!--replacement-->
+                        <el-form-item :label='"Replacement"' class="half-form-item" :prop="'configs.0.config.relabel_config.' + index + '.replacement'">
+                          <el-input id="module-box-input-replacement" v-model="item.replacement" :placeholder="$t('overall.relabelConfigReplacement')" size="small"></el-input>
+                        </el-form-item>
+                      </div>
+                    </transition>
+                    <div style="text-align: center">
+                  <span class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" style="border: none" @click="item.showAllRelabelOption=!item.showAllRelabelOption">
+                    {{$t('overall.moreOption')}}
+                    <i :class="item.showAllRelabelOption?'is-active':''" class="nz-icon nz-icon-arrow-down need-rotate" ></i>
+                  </span>
+                    </div>
+                  </div>
+                </div>
+                <div style="text-align: center">
+                 <span id="module-add-relabel" class="right-box-form-add module-add-label margin-t-10" type="button" @click="addRelabel">
+                   <span><i class="nz-icon nz-icon-plus" style="font-size: 16px;"></i></span>
+                 </span>
+                </div>
+              </el-tab-pane>
             <el-tab-pane v-if="editModule.configs[0].config.protocol !== 'snmp'" label="Auth" name="Auth">
               <!--authtype-->
               <el-form-item :label='$t("project.endpoint.type")' prop="authtype">
@@ -224,16 +280,16 @@
               </el-form-item>
 
               <!--authtype 1-->
-              <el-form-item v-if="authType === 1" :label='$t("project.endpoint.username")' class="half-form-item" prop="configs.0.config.basic_auth.username" :rules="[{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]">
+              <el-form-item v-if="authType === 1" :label='$t("project.endpoint.username")' class="half-form-item" prop="configs.0.config.basic_auth.username" :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]">
                 <el-input id="module-box-input-uername" v-model="editModule.configs[0].config.basic_auth.username" placeholder='' size="small"></el-input>
               </el-form-item>
 
-              <el-form-item v-if="authType === 1" :label='$t("project.endpoint.pin")' class="half-form-item" prop="configs.0.config.basic_auth.pin" :rules="[{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]">
+              <el-form-item v-if="authType === 1" :label='$t("project.endpoint.pin")' class="half-form-item" prop="configs.0.config.basic_auth.pin" :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]">
                 <el-input id="module-box-input-password" v-model="editModule.configs[0].config.basic_auth.pin" type="password" autocomplete="new-password" placeholder='' size="small"></el-input>
               </el-form-item>
 
               <!--authtype 2-->
-              <el-form-item v-if="authType === 2" :label='$t("project.endpoint.bearer_token")' prop="configs.0.config.bearer_token" :rules="[{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]">
+              <el-form-item v-if="authType === 2" :label='$t("project.endpoint.bearer_token")' prop="configs.0.config.bearer_token" :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]">
                 <el-input id="module-box-input-bearer_token" v-model="editModule.configs[0].config.bearer_token" placeholder='' size="small"></el-input>
               </el-form-item>
 
@@ -480,7 +536,7 @@
 </template>
 
 <script>
-import { noSpecialChar, port, nzNumber } from '../js/validate'
+import { noSpecialChar, port, nzNumber , arrLength} from '../js/validate'
 import selectWalk from '../popBox/selectWalk'
 import editRigthBox from '../mixin/editRigthBox'
 import pipelineSelect from './pipelineSelect'
@@ -640,12 +696,32 @@ export default {
           ]
         }],
       timestampList: ['ANSIC', 'UnixDate', 'RubyDate', 'RFC822', 'RFC822Z', 'RFC850', 'RFC1123', 'RFC1123Z', 'RFC3339', 'RFC3339Nano', 'Unix', 'UnixMs', 'UnixUs', 'UnixNs'],
+      actionList: [{
+        value: 'replace',
+        label: 'Replace'
+      }, {
+        value: 'keep',
+        label: 'Keep'
+      }, {
+        value: 'drop',
+        label: 'Drop'
+      }, {
+        value: 'labelmap',
+        label: 'Labelmap'
+      }, {
+        value: 'labeldrop',
+        label: 'Labeldrop'
+      }, {
+        value: 'labelkeep',
+        label: 'Labelkeep'
+      }],
       metricsShow: true,
       logsShow: true
     }
   },
   methods: {
     port: port,
+    arrLength: arrLength,
     selectWalk (walk) {
       if (this.editModule.configs[0].config.walk.indexOf(walk) != -1) {
         this.editModule.configs[0].config.walk.splice(this.editModule.configs[0].config.walk.indexOf(walk), 1)
@@ -787,6 +863,10 @@ export default {
             delete item.unit
           }
         })
+        params.configs[0].config.relabel_config.relabel_config && params.configs[0].config.relabel_config.forEach(item => {
+          delete item.tags
+          delete item.showAllRelabelOption
+        })
         params.configs = JSON.stringify(params.configs)
         this.$refs.moduleForm.validate((valid, errorKey) => {
           let key = Object.keys(errorKey)
@@ -796,8 +876,10 @@ export default {
               const keyArr = key.split('.')
               if (keyArr[3] === 'basic_auth' || keyArr[3] === 'bearer_token') {
                 this.activeName = 'Auth'
-              } else if (keyArr[3] === 'basic' || keyArr[3] === 'port') {
+              } else if (keyArr[3] === 'basic' || keyArr[3] === 'port' || keyArr[3] === 'host') {
                 this.activeName = 'Basic'
+              } else {
+                this.activeName = 'Relabel'
               }
             } else if (key.indexOf('configs.1') !== -1) {
               const keyArr = key.split('.')
@@ -917,9 +999,40 @@ export default {
       }
       this.editModule.configs[1].config[logsIndex].labelModule.splice(i, 1)
     },
+    actionChange () {
+      this.$refs.moduleForm.clearValidate('configs.0.config.relabel_config.' + index + '.target_label')
+    },
+    addRelabel () {
+      this.editModule.configs[0].config.relabel_config.push({
+        source_labels: [],
+        target_label: '',
+        action: 'replace',
+        regex: '(.*)',
+        replacement: '$1',
+        showAllRelabelOption: false
+      })
+    },
+    removeRelabel (index) {
+      // if (this.editModule.configs[0].config.relabel_config.length === 1) {
+      //   this.editModule.configs[0].config.relabel_config = [{
+      //     source_labels: [],
+      //     target_label: '',
+      //     action: '',
+      //     regex: '',
+      //     replacement: '',
+      //     showAllRelabelOption: false
+      //   }]
+      //   return
+      // }
+      this.editModule.configs[0].config.relabel_config.splice(index, 1)
+    },
     tagsChange (newTags, index) {
       this.editModule.paramObj[index].value = newTags.map(item => item.text)
     },
+    tagsChangeRelabel (newTags, index) {
+      this.editModule.configs[0].config.relabel_config[index].source_labels = newTags.map(item => item.text)
+      this.$refs.moduleForm.clearValidate('configs.0.config.relabel_config.' + index + '.source_labels')
+    },
     // 将param转为json字符串格式
     paramToJson (param) {
       const tempParam = {}
@@ -1193,6 +1306,10 @@ export default {
           if (params[0].config.labels && !Object.keys(params[0].config.labels).length) {
             delete params[0].config.labels
           }
+          params[0].config.relabel_config && params[0].config.relabel_config.forEach(item => {
+            delete item.tags
+            delete item.showAllRelabelOption
+          })
           params[1].config.forEach(item => {
             if (item.labelModule) {
               item.labels = this.labelsToJson(item.labelModule)
@@ -1409,6 +1526,9 @@ export default {
     color: #FA901C;
     box-sizing: border-box;
   }
+  #module-box-relabel /deep/ .vue-tags-input{
+    max-width: unset;
+  }
   .pipeline-box{
     display: flex;
     justify-content: space-between;
diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
index cab15316d..ce6a5ca90 100644
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -184,6 +184,7 @@ export default {
                 username: '',
                 pin: ''
               },
+              relabel_config: [],
               bearer_token: ''
             },
             enable: 1
@@ -324,6 +325,13 @@ export default {
         })
         this.object.paramObj = []
         this.object.labelModule = []
+        if (!this.object.configs[0].config.relabel_config) {
+          this.object.configs[0].config.relabel_config = []
+        }
+        this.object.configs[0].config.relabel_config && this.object.configs[0].config.relabel_config.forEach(item => {
+          item.showAllRelabelOption = false
+          item.tags = ''
+        })
         this.object.configs[1].config.forEach(item => {
           item.labelModule = []
           if (JSON.stringify(item.labels) !== '{}' && item.labels) {
diff --git a/nezha-fronted/src/components/page/monitor/module/moduleList.vue b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
index 8bb2a7f4d..f51b72530 100644
--- a/nezha-fronted/src/components/page/monitor/module/moduleList.vue
+++ b/nezha-fronted/src/components/page/monitor/module/moduleList.vue
@@ -114,6 +114,16 @@ export default {
               scrape_timeout: '',
               params: '',
               labels: '',
+              relabel_config: [
+                // {
+                //   source_labels: [],
+                //   target_label: '',
+                //   action: 'replace',
+                //   regex: '',
+                //   replacement: '',
+                //   showAllRelabelOption: false
+                // }
+              ],
               basic_auth: {
                 username: '',
                 pin: ''
@@ -199,6 +209,13 @@ export default {
           // this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : ''
           this.object.paramObj = []
           this.object.labelModule = []
+          if (!this.object.configs[0].config.relabel_config) {
+            this.object.configs[0].config.relabel_config = []
+          }
+          this.object.configs[0].config.relabel_config && this.object.configs[0].config.relabel_config.forEach(item => {
+            item.showAllRelabelOption = false
+            item.tags = ''
+          })
           this.object.configs[1].config.forEach(item => {
             item.labelModule = []
             if (JSON.stringify(item.labels) !== '{}' && item.labels) {

From eed2715dc1434bc4a81640ac2febcc9243cd7774 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 19 Aug 2021 15:58:13 +0800
Subject: [PATCH 2/2] =?UTF-8?q?style=20=EF=BC=9A=20=E8=A1=A5=E5=85=85=20mo?=
 =?UTF-8?q?dule=20=E6=8A=A5=E9=94=99=E7=BA=A2=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/common/rightBox/moduleBox.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 3a8589018..8afec7e92 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -1529,6 +1529,9 @@ export default {
   #module-box-relabel /deep/ .vue-tags-input{
     max-width: unset;
   }
+  /deep/ .is-error .vue-tags-input{
+    border: 1px solid #F56C6C;
+  }
   .pipeline-box{
     display: flex;
     justify-content: space-between;