feat： module endpoint relabel 必填项 跟action的值有关 label符合正则

nezha-fronted/src/components/common/language/cn.js

@@ -604,7 +604,8 @@ const cn = {
     confirmDuplicate: '确认复制吗？',
     confirmCancel: '您所做的修改将不会被保存？',
     copySuccess: '复制成功',
-    lnglatError: '经纬度格式错误'
+    lnglatError: '经纬度格式错误',
+    tagError: '不符合正则 /^[a-zA-Z_][a-zA-Z0-9_]*/!'
   },
   asset: {
     asset: '资产',

nezha-fronted/src/components/common/language/en.js

@@ -611,7 +611,8 @@ const en = {
     confirmDuplicate: 'Are you sure to duplicate this chart?',
     confirmCancel: 'Changes you made are not saved?',
     copySuccess: 'Copy success',
-    lnglatError: 'Wrong format of latitude and longitude'
+    lnglatError: 'Wrong format of latitude and longitude',
+    tagError: 'Does not conform to regular expressions /^[a-zA-Z_][a-zA-Z0-9_]*/!'
   },
   asset: {
     asset: 'Asset ',

nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue

@@ -245,33 +245,57 @@
                     </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' }]">
+                      <el-form-item :prop="'configs.0.config.relabel_config.' + index + '.action'" class="" :label="'Action'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
-                        <vue-tags-input
+                        <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: 'change' }]">
-                          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-form-item
+                        :prop="'configs.0.config.relabel_config.' + index + '.source_labels'"
+                        class="half-form-item" :label="'Source labels'"
+                        :rules="[
+                                       { required: item.action === 'replace' || item.action === 'keep' || item.action === 'drop', message: $t('validate.required'), trigger: 'change' },
+                                       { validator: item.action === 'replace' || item.action === 'keep' || item.action === 'drop'? arrLength : '', trigger: 'change' }
+                                     ]">
+                        <vue-tags-input
+                          v-model="item.tags"
+                          :maxlength="32"
+                          ref="relabelTag"
+                          tabindex="9999"
+                          :placeholder="'add parameter'"
+                          :tags="item.source_labels"
+                          @before-adding-tag="beforeAddingTag"
+                          @blur="relabelTabBlur"
+                          @tags-changed="(newTags)=>{tagsChangeRelabel(newTags, index)}"
+                        />
+                      </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-->
+                        <!--Regex-->
-                        <el-form-item :label='"Regex"' class="half-form-item" :prop="'configs.0.config.relabel_config.' + index + '.regex'">
+                        <el-form-item
+                          :label='"Regex"'
+                          class="half-form-item"
+                          :prop="'configs.0.config.relabel_config.' + index + '.regex'"
+                          :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
                           <el-input id="module-box-input-regex" v-model="item.regex" :placeholder="$t('overall.relabelConfigRegex')" size="small"></el-input>
                         </el-form-item>
-                        <!--scrape_timeout-->
+                        <!--replacement-->
-                        <el-form-item :label='"Replacement"' class="half-form-item" :prop="'configs.0.config.relabel_config.' + index + '.replacement'">
+                        <el-form-item
+                          :label='"Replacement"'
+                          class="half-form-item"
+                          :prop="'configs.0.config.relabel_config.' + index + '.replacement'"
+                          :rules="[{ required: item.action === 'replace' || item.action === 'labelmap', message: $t('validate.required'), trigger: 'change' }]">
                           <el-input id="module-box-input-replacement" v-model="item.replacement" :placeholder="$t('overall.relabelConfigReplacement')" size="small"></el-input>
                         </el-form-item>
                       </div>
@@ -1120,6 +1144,19 @@ export default {
     tagsChange (newTags, index) {
       this.editEndpoint.paramObj[index].value = newTags.map(item => item.text)
     },
+    beforeAddingTag (tag) {
+      const regx = /[a-zA-Z_:][a-zA-Z0-9_:]*/
+      if (regx.test(tag.tag.text)) {
+        tag.addTag()
+      } else {
+        this.$message.error(this.$t('tip.tagError'))
+      }
+    },
+    relabelTabBlur (tag) {
+      this.$nextTick(() => {
+        this.$refs.relabelTag[0].newTag = ''
+      })
+    },
     // 将param转为json字符串格式
     paramToJson (param) {
       const tempParam = {}
@@ -1412,6 +1449,9 @@ export default {
     },
     actionChange (index) {
       this.$refs.moduleForm.clearValidate('configs.0.config.relabel_config.' + index + '.target_label')
+      this.$refs.moduleForm.clearValidate('configs.0.config.relabel_config.' + index + '.source_labels')
+      this.$refs.moduleForm.clearValidate('configs.0.config.relabel_config.' + index + '.regex')
+      this.$refs.moduleForm.clearValidate('configs.0.config.relabel_config.' + index + '.replacement')
     },
     addRelabel () {
       this.editEndpoint.configs[0].config.relabel_config.push({

nezha-fronted/src/components/common/rightBox/moduleBox.vue

@@ -226,21 +226,37 @@
                     </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' }]">
+                     <el-form-item :prop="'configs.0.config.relabel_config.' + index + '.action'" class="" :label="'Action'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
-                       <vue-tags-input
+                       <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: 'change' }]">
-                         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-form-item
+                             :prop="'configs.0.config.relabel_config.' + index + '.source_labels'"
+                             class="half-form-item" :label="'Source labels'"
+                             :rules="[
+                                       { required: item.action === 'replace' || item.action === 'keep' || item.action === 'drop', message: $t('validate.required'), trigger: 'change' },
+                                       { validator: item.action === 'replace' || item.action === 'keep' || item.action === 'drop'? arrLength : '', trigger: 'change' }
+                                     ]">
+                       <vue-tags-input
+                         v-model="item.tags"
+                         :maxlength="32"
+                         ref="relabelTag"
+                         tabindex="9999"
+                         :placeholder="'add parameter'"
+                         :tags="item.source_labels"
+                         @before-adding-tag="beforeAddingTag"
+                         @blur="relabelTabBlur"
+                         @tags-changed="(newTags)=>{tagsChangeRelabel(newTags, index)}"
+                       />
+                     </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>
@@ -248,11 +264,19 @@
                     <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-form-item
+                                :label='"Regex"'
+                                class="half-form-item"
+                                :prop="'configs.0.config.relabel_config.' + index + '.regex'"
+                                :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
                           <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-form-item
+                                :label='"Replacement"'
+                                class="half-form-item"
+                                :prop="'configs.0.config.relabel_config.' + index + '.replacement'"
+                                :rules="[{ required: item.action === 'replace' || item.action === 'labelmap', message: $t('validate.required'), trigger: 'change' }]">
                           <el-input id="module-box-input-replacement" v-model="item.replacement" :placeholder="$t('overall.relabelConfigReplacement')" size="small"></el-input>
                         </el-form-item>
                       </div>
@@ -999,14 +1023,17 @@ export default {
       }
       this.editModule.configs[1].config[logsIndex].labelModule.splice(i, 1)
     },
-    actionChange () {
+    actionChange (index) {
       this.$refs.moduleForm.clearValidate('configs.0.config.relabel_config.' + index + '.target_label')
+      this.$refs.moduleForm.clearValidate('configs.0.config.relabel_config.' + index + '.source_labels')
+      this.$refs.moduleForm.clearValidate('configs.0.config.relabel_config.' + index + '.regex')
+      this.$refs.moduleForm.clearValidate('configs.0.config.relabel_config.' + index + '.replacement')
     },
     addRelabel () {
       this.editModule.configs[0].config.relabel_config.push({
         source_labels: [],
         target_label: '',
-        action: 'replace',
+        action: '',
         regex: '(.*)',
         replacement: '$1',
         showAllRelabelOption: false
@@ -1033,6 +1060,19 @@ export default {
       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')
     },
+    beforeAddingTag (tag) {
+      const regx = /[a-zA-Z_:][a-zA-Z0-9_:]*/
+      if (regx.test(tag.tag.text)) {
+        tag.addTag()
+      } else {
+        this.$message.error(this.$t('tip.tagError'))
+      }
+    },
+    relabelTabBlur (tag) {
+      this.$nextTick(() => {
+        this.$refs.relabelTag[0].newTag = ''
+      })
+    },
     // 将param转为json字符串格式
     paramToJson (param) {
       const tempParam = {}