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

This commit is contained in:
zhangyu
2021-08-20 13:53:31 +08:00
parent 1bc1c91277
commit e95898eaa5
4 changed files with 117 additions and 35 deletions

View File

@@ -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' }]">
<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-form-item :prop="'configs.0.config.relabel_config.' + index + '.action'" class="" :label="'Action'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
<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' }]">
<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>
@@ -536,7 +560,7 @@
</template>
<script>
import { noSpecialChar, port, nzNumber , arrLength} 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'
@@ -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 = {}