feat: 联调module新增接口 处理细节参数的相关问题

This commit is contained in:
zhangyu
2021-08-03 14:12:14 +08:00
parent 7b1d2168c1
commit bf65cb5330
3 changed files with 107 additions and 86 deletions

View File

@@ -23,27 +23,28 @@
<div ref="scrollbar" class="right-box__container"> <div ref="scrollbar" class="right-box__container">
<div class="container__form"> <div class="container__form">
<el-form ref="moduleForm" :model="editEndpoint" :rules="rules" label-position = "top" label-width="120px"> <el-form ref="moduleForm" :model="editEndpoint" :rules="rules" label-position = "top" label-width="120px">
<!--name-->
<el-form-item v-if="optionType!=='batch'" :label='$t("project.module.name")' label-width="125px" prop="name">
<el-input id="module-box-input-name" v-model="editEndpoint.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
</el-form-item>
<!--project--> <!--project-->
<el-form-item :label='$t("project.project.projectName")' prop="projectId"> <el-form-item :label='$t("project.project.projectName")' prop="projectId">
<el-select id="module-box-input-project" v-model="editEndpoint.projectId" :disabled="disabled" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeProject"> <el-select id="module-box-input-project" v-model="editEndpoint.projectId" :disabled="disabled" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeProject">
<el-option v-for="item in projectList" :id="'module-project-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option> <el-option v-for="item in projectList" :id="'module-project-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!--asset-->
<el-form-item :label='$t("project.module.asset")' label-width="125px" prop="asset">
<el-input id="module-box-input-assetName" v-model="editEndpoint.assetName" :disabled="disabled" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
</el-form-item>
<!--module--> <!--module-->
<el-form-item :label='$t("project.module.module")' prop="remark"> <el-form-item :label='$t("project.module.module")' prop="remark">
<el-select id="module-box-input-module" v-model="editEndpoint.moduleId" :disabled="!editEndpoint.projectId || disabled " class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id"> <el-select id="module-box-input-module" v-model="editEndpoint.moduleId" :disabled="!editEndpoint.projectId || disabled " class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
<el-option v-for="item in moduleList" :id="'module-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option> <el-option v-for="item in moduleList" :id="'module-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!--asset-->
<el-form-item :label='$t("project.module.asset")' label-width="125px" prop="asset">
<el-select id="module-box-input-module" v-model="editEndpoint.moduleId" :disabled="!editEndpoint.projectId || disabled " class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
<el-option v-for="item in moduleList" :id="'module-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<!--name-->
<el-form-item v-if="optionType!=='batch'" :label='$t("project.module.name")' label-width="125px" prop="name">
<el-input id="module-box-input-name" v-model="editEndpoint.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
</el-form-item>
<!-- snmp表单 --> <!-- snmp表单 -->
<span v-if="editEndpoint.type && editEndpoint.type == 'snmp'" class="snmp-form"> <span v-if="editEndpoint.type && editEndpoint.type == 'snmp'" class="snmp-form">
<div class="right-box-sub-title">SNMP settings</div> <div class="right-box-sub-title">SNMP settings</div>
@@ -137,7 +138,7 @@
<el-input id="module-box-input-path" v-model="editEndpoint.configs[0].config.metrics_path" placeholder="" size="small"></el-input> <el-input id="module-box-input-path" v-model="editEndpoint.configs[0].config.metrics_path" placeholder="" size="small"></el-input>
</el-form-item> </el-form-item>
<!--port--> <!--port-->
<el-form-item :label='$t("project.endpoint.port")' class="half-form-item" prop="configs[0].config.port" :rules="[ <el-form-item :label='$t("project.endpoint.port")' class="half-form-item" prop="configs.0.config.port" :rules="[
{ validator: port, trigger: 'blur' }, { validator: port, trigger: 'blur' },
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } { required: true, message: this.$t('validate.required'), trigger: 'blur' }
]"> ]">
@@ -150,7 +151,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<!--host--> <!--host-->
<el-form-item :label='$t("project.endpoint.host")' class="half-form-item" prop="host"> <el-form-item :label='$t("project.endpoint.host")' class="half-form-item" prop="configs.0.config.host">
<el-input id="module-box-input-host" v-model="editEndpoint.configs[0].config.host" placeholder="" size="small"></el-input> <el-input id="module-box-input-host" v-model="editEndpoint.configs[0].config.host" placeholder="" size="small"></el-input>
</el-form-item> </el-form-item>
<!-- snmp表单 --> <!-- snmp表单 -->
@@ -160,7 +161,7 @@
<div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div> <div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-form-item prop="walk"> <el-form-item prop="configs.0.config.walk" :rules="[{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]">
<select-walk ref="selectWalk" :currentWalk="editEndpoint.configs[0].config.walk" :expandedWalk="expandedWalkData" :placement="'bottom-start'" :walkData="walkData" @selectWalk="selectWalk"> <select-walk ref="selectWalk" :currentWalk="editEndpoint.configs[0].config.walk" :expandedWalk="expandedWalkData" :placement="'bottom-start'" :walkData="walkData" @selectWalk="selectWalk">
<template v-slot:trigger> <template v-slot:trigger>
<div class="el-cascader"> <div class="el-cascader">
@@ -267,17 +268,17 @@
</el-form-item> </el-form-item>
<!--authtype 1--> <!--authtype 1-->
<el-form-item v-if="authType === 1" :label='$t("project.endpoint.username")' class="half-form-item" prop="authtype"> <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-input id="module-box-input-uername" v-model.number="editEndpoint.configs[0].config.basic_auth.username" placeholder='' size="small"></el-input> <el-input id="module-box-input-uername" v-model.number="editEndpoint.configs[0].config.basic_auth.username" placeholder='' size="small"></el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="authType === 1" :label='$t("project.endpoint.pin")' class="half-form-item" prop="authtype"> <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-input id="module-box-input-password" v-model.number="editEndpoint.configs[0].config.basic_auth.pin" placeholder='' size="small"></el-input> <el-input id="module-box-input-password" v-model.number="editEndpoint.configs[0].config.basic_auth.pin" placeholder='' size="small"></el-input>
</el-form-item> </el-form-item>
<!--authtype 2--> <!--authtype 2-->
<el-form-item v-if="authType === 2" :label='$t("project.endpoint.bearer_token")' prop="authtype"> <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-input id="module-box-input-bearer_token" v-model.number=editEndpoint.configs[0].config.bearer_token" placeholder='' size="small"></el-input> <el-input id="module-box-input-bearer_token" v-model.number="editEndpoint.configs[0].config.bearer_token" placeholder='' size="small"></el-input>
</el-form-item> </el-form-item>
</el-tab-pane> </el-tab-pane>
@@ -569,6 +570,9 @@ export default {
name: [ name: [
{ validator: this.optionType === 'batch' ? '' : noSpecialChar, trigger: 'change' } { validator: this.optionType === 'batch' ? '' : noSpecialChar, trigger: 'change' }
], ],
asset: [
{ required: !(this.optionType === 'batch'), message: this.$t('validate.required'), trigger: 'change' }
],
projectId: [ projectId: [
{ required: !(this.optionType === 'batch'), message: this.$t('validate.required'), trigger: 'change' } { required: !(this.optionType === 'batch'), message: this.$t('validate.required'), trigger: 'change' }
], ],
@@ -784,13 +788,6 @@ export default {
params.configs.walk = params.walk params.configs.walk = params.walk
params.configs.port = params.port params.configs.port = params.port
params.configs = JSON.stringify(params.configs) params.configs = JSON.stringify(params.configs)
if (this.authType === 2 && !this.editEndpoint.configs.bearer_token) {
this.$message.error("'token' is required")
} else if (this.authType === 1 && !(this.editEndpoint.configs.basic_auth.username && this.editEndpoint.configs.basic_auth.pin)) {
this.$message.error("'username' and 'password' is required")
} else {
this.authType = 0
}
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.moduleForm.validate((valid, errorKey) => { this.$refs.moduleForm.validate((valid, errorKey) => {
let key = Object.keys(errorKey) let key = Object.keys(errorKey)
@@ -863,7 +860,7 @@ export default {
logsLogsArrAdd () { logsLogsArrAdd () {
this.activeNameLogs.push('Basic') this.activeNameLogs.push('Basic')
this.logsCopyValue.push('') this.logsCopyValue.push('')
this.editModule.configs[1].config.push({ this.editEndpoint.configs[1].config.push({
basic: { basic: {
type: 'file', type: 'file',
fileName: '' fileName: ''
@@ -874,24 +871,24 @@ export default {
}) })
}, },
removeLogsArr (index) { removeLogsArr (index) {
if (this.editModule.configs[1].config.length !== 1) { if (this.editEndpoint.configs[1].config.length !== 1) {
this.editModule.configs[1].config.splice(index, 1) this.editEndpoint.configs[1].config.splice(index, 1)
} }
}, },
logsBasicTypeChange (i) { logsBasicTypeChange (i) {
const type = this.editModule.configs[1].config[i].basic.type const type = this.editEndpoint.configs[1].config[i].basic.type
if (type === 'file') { if (type === 'file') {
this.editModule.configs[1].config[i].basic = { this.editEndpoint.configs[1].config[i].basic = {
type, type,
fileName: '' fileName: ''
} }
} else if (type === 'journal') { } else if (type === 'journal') {
this.editModule.configs[1].config[i].basic = { this.editEndpoint.configs[1].config[i].basic = {
type, type,
unit: '' unit: ''
} }
} else if (type === 'syslog') { } else if (type === 'syslog') {
this.editModule.configs[1].config[i].basic = { this.editEndpoint.configs[1].config[i].basic = {
type, type,
appName: '', appName: '',
listenAddress: '' listenAddress: ''
@@ -1044,7 +1041,7 @@ export default {
}, },
tabClick (index) { tabClick (index) {
if (this.activeNameLogs[index] === 'Preview') { if (this.activeNameLogs[index] === 'Preview') {
const params = JSON.parse(JSON.stringify(this.editModule.configs[1].config[index])) const params = JSON.parse(JSON.stringify(this.editEndpoint.configs[1].config[index]))
params.labels = this.labelsToJson(params.labelModule) params.labels = this.labelsToJson(params.labelModule)
delete params.labelModule delete params.labelModule
Object.keys(params).forEach(key => { Object.keys(params).forEach(key => {
@@ -1074,42 +1071,52 @@ export default {
// 添加pipeline // 添加pipeline
addPipeline (obj, logsIndex, pipeLineIndex, type) { addPipeline (obj, logsIndex, pipeLineIndex, type) {
if (type == 'splice') { if (type == 'splice') {
this.editModule.configs[1].config[logsIndex].pipeline.splice(pipeLineIndex, 0, obj) this.editEndpoint.configs[1].config[logsIndex].pipeline.splice(pipeLineIndex, 0, obj)
} }
if (type == 'push') { if (type == 'push') {
this.editModule.configs[1].config[logsIndex].pipeline.push(obj) this.editEndpoint.configs[1].config[logsIndex].pipeline.push(obj)
} }
}, },
addLogsLabel (index) {
this.editEndpoint.configs[1].config[index].labelModule.push({ key: '', value: '' })
},
removeLogsLabel (logsIndex, i) {
if (this.editEndpoint.configs[1].config[logsIndex].labelModule.length === 1) {
this.editEndpoint.configs[1].config[logsIndex].labelModule = [{ key: '', value: '' }]
return
}
this.editEndpoint.configs[1].config[logsIndex].labelModule.splice(i, 1)
},
// 删除pipeline // 删除pipeline
delPipeline (logsIndex, pipeLineIndex) { delPipeline (logsIndex, pipeLineIndex) {
this.editModule.configs[1].config[logsIndex].pipeline.splice(pipeLineIndex, 1) this.editEndpoint.configs[1].config[logsIndex].pipeline.splice(pipeLineIndex, 1)
}, },
// 添加pipelineItem // 添加pipelineItem
addPipelineItem (logsIndex, pipelineIndex) { addPipelineItem (logsIndex, pipelineIndex) {
const val = this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].type const val = this.editEndpoint.configs[1].config[logsIndex].pipeline[pipelineIndex].type
if (val === 'regex') { if (val === 'regex') {
this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].expression.push('') this.editEndpoint.configs[1].config[logsIndex].pipeline[pipelineIndex].expression.push('')
} else if (val === 'json') { } else if (val === 'json') {
this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].expressions.push('') this.editEndpoint.configs[1].config[logsIndex].pipeline[pipelineIndex].expressions.push('')
} else if (val === 'template') { } else if (val === 'template') {
this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].expressions.push('') this.editEndpoint.configs[1].config[logsIndex].pipeline[pipelineIndex].expressions.push('')
} else if (val === 'timestamp') { } else if (val === 'timestamp') {
this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].expressions.push('') this.editEndpoint.configs[1].config[logsIndex].pipeline[pipelineIndex].expressions.push('')
} else if (val === 'labels') { } else if (val === 'labels') {
this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].labels.push({ this.editEndpoint.configs[1].config[logsIndex].pipeline[pipelineIndex].labels.push({
key: '', key: '',
value: '' value: ''
}) })
} else if (val === 'output') { } else if (val === 'output') {
this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].expressions.push('') this.editEndpoint.configs[1].config[logsIndex].pipeline[pipelineIndex].expressions.push('')
} }
}, },
delPipelineItem (logsIndex, pipelineIndex, itemIndex) { delPipelineItem (logsIndex, pipelineIndex, itemIndex) {
const val = this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].type const val = this.editEndpoint.configs[1].config[logsIndex].pipeline[pipelineIndex].type
if (val === 'json') { if (val === 'json') {
this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].expressions.splice(itemIndex, 1) this.editEndpoint.configs[1].config[logsIndex].pipeline[pipelineIndex].expressions.splice(itemIndex, 1)
} else if (val === 'labels') { } else if (val === 'labels') {
this.editModule.configs[1].config[logsIndex].pipeline[pipelineIndex].labels.splice(itemIndex, 1) this.editEndpoint.configs[1].config[logsIndex].pipeline[pipelineIndex].labels.splice(itemIndex, 1)
} }
}, },
resultFormat (resp) { resultFormat (resp) {

View File

@@ -63,21 +63,20 @@
<!-- ChartTemplate --> <!-- ChartTemplate -->
<el-form-item :label="$t('config.model.ChartTemplate')" prop="ChartTemplate"> <el-form-item :label="$t('config.model.ChartTemplate')" prop="ChartTemplate">
<v-selectpage <v-selectpage
v-model="editModule.chartIds"
:data="chartTempList" :data="chartTempList"
:language="language" :tb-columns="ChartSearchShowFields"
:multiple="true"
:params="{ :params="{
varType: 2, panelId: 0, varType: 2, panelId: 0,
returnChildren:0,groupId:0, returnChildren:0,groupId:0,
}" }"
:result-format="resultFormat" :multiple="true"
:tb-columns="ChartSearchShowFields" :language="language"
class="form-control" title="ChartSearch"
key-field="id" key-field="id"
show-field="name" show-field="name"
title="ChartSearch" v-model="editModule.chartIds"
@values="(data) => {editModule.chartIds = data.map(d => d.id).join(',')}" class="form-control"
:result-format="resultFormat"
></v-selectpage> ></v-selectpage>
</el-form-item> </el-form-item>
<div class="endpoint-title"> <div class="endpoint-title">
@@ -731,28 +730,27 @@ export default {
this.editModule.configs[0].config.params = this.paramToJson(this.editModule.paramObj) this.editModule.configs[0].config.params = this.paramToJson(this.editModule.paramObj)
this.editModule.configs[0].config.labels = this.labelsToJson(this.editModule.labelModule) this.editModule.configs[0].config.labels = this.labelsToJson(this.editModule.labelModule)
this.editModule.configs[1].config.forEach(item => { this.editModule.configs[1].config.forEach(item => {
if (item.labels) { if (item.labelModule) {
item.labels = this.labelsToJson(item.labels) item.labels = this.labelsToJson(item.labelModule)
} else {
item.labels = ''
} }
}) })
const params = { ...this.editModule } const params = JSON.parse(JSON.stringify(this.editModule))
// params.configs = JSON.stringify(params.configs) params.configs[1].config.forEach(item => {
if (this.authType === 2 && !this.editModule.configs[0].config.bearer_token) { item.pipeline && item.pipeline.forEach((pipeline) => {
// this.$message.error("'token' is required") if (pipeline.type === 'labels') {
// return pipeline.labels = this.labelsToJson(pipeline.labels)
} else if (this.authType === 1 && !(this.editModule.configs[0].config.basic_auth.username && this.editModule.configs[0].config.basic_auth.pin)) {
// this.$message.error("'username' and 'password' is required")
// return
} else {
this.authType = 0
} }
})
})
params.configs = JSON.stringify(params.configs)
this.$refs.moduleForm.validate((valid, errorKey) => { this.$refs.moduleForm.validate((valid, errorKey) => {
let key = Object.keys(errorKey) let key = Object.keys(errorKey)
if (key.length) { if (key.length) {
key = key[0] key = key[0]
if (key.indexOf('configs.0') !== -1) { if (key.indexOf('configs.0') !== -1) {
const keyArr = key.split('.') const keyArr = key.split('.')
console.log(keyArr)
if (keyArr[3] === 'basic_auth' || keyArr[3] === 'bearer_token') { if (keyArr[3] === 'basic_auth' || keyArr[3] === 'bearer_token') {
this.activeName = 'Auth' this.activeName = 'Auth'
} else if (keyArr[3] === 'basic' || keyArr[3] === 'port') { } else if (keyArr[3] === 'basic' || keyArr[3] === 'port') {
@@ -1085,12 +1083,13 @@ export default {
} }
}, },
mounted () { mounted () {
this.getWalkData()
this.ChartTemplateList()
}, },
created () { created () {
this.getProjectList() this.getProjectList()
this.getCredential() this.getCredential()
this.getWalkData()
this.ChartTemplateList()
}, },
computed: { computed: {
mibName () { mibName () {

View File

@@ -187,36 +187,51 @@ export default {
if (res.code === 200) { if (res.code === 200) {
this.object = JSON.parse(JSON.stringify(res.data)) this.object = JSON.parse(JSON.stringify(res.data))
this.object.configs = JSON.parse(this.object.configs) this.object.configs = JSON.parse(this.object.configs)
this.object.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : [] this.object.configs.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : []
this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : '' this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : ''
this.object.paramObj = [] this.object.paramObj = []
this.object.labelModule = [] this.object.labelModule = []
this.object.logsConfig.forEach(item => { this.object.configs[1].config.forEach(item => {
item.labelModule = [] item.labelModule = []
if (JSON.stringify(item.labels) !== '{}' && item.labels) { if (JSON.stringify(item.labels) !== '{}' && item.labels) {
Object.keys(this.object.configs.labels).forEach(key => { Object.keys(item.labels).forEach(key => {
item.labelModule.push({ key, value: item.labels[key] }) item.labelModule.push({ key, value: item.labels[key] })
}) })
} else { } else {
item.labelModule.push({ key: '', value: '' }) item.labelModule.push({ key: '', value: '' })
} }
item.pipeline && item.pipeline.forEach((pipeline) => {
if (pipeline.type === 'labels') {
const labelsArr = []
if (JSON.stringify(pipeline.labels) !== '{}' && pipeline.labels) {
Object.keys(pipeline.labels).forEach(key => {
labelsArr.push({ key, value: pipeline.labels[key] })
}) })
if (JSON.stringify(this.object.configs.labels) !== '{}' && this.object.configs.labels) { } else {
Object.keys(this.object.configs.labels).forEach(key => { labelsArr.push({ key: '', value: '' })
this.object.labelModule.push({ key, value: this.object.configs.labels[key] }) }
pipeline.labels = labelsArr
}
})
})
if (JSON.stringify(this.object.configs[0].config.labels) !== '{}' && this.object.configs[0].config.labels) {
Object.keys(this.object.configs[0].config.labels).forEach(key => {
this.object.labelModule.push({ key, value: this.object.configs[0].config.labels[key] })
}) })
} else { } else {
this.object.labelModule.push({ key: '', value: '' }) this.object.labelModule.push({ key: '', value: '' })
} }
if (JSON.stringify(this.object.configs.params) !== '{}' && this.object.configs.params) { if (JSON.stringify(this.object.configs[0].config.params) !== '{}' && this.object.configs[0].config.params) {
Object.keys(this.object.configs.params).forEach(key => { Object.keys(this.object.configs[0].config.params).forEach(key => {
this.object.paramObj.push({ key, value: this.object.configs.params[key] }) this.object.paramObj.push({ key, value: this.object.configs[0].params[key] })
}) })
} else { } else {
this.object.paramObj.push({ key: '', value: [] }) this.object.paramObj.push({ key: '', value: [] })
} }
if (!this.object.chartIds) { if (!this.object.chartIds) {
this.object.chartIds = '' this.object.chartIds = ''
} else {
// this.object.chartIds = this.object.chartIds.split(',')
} }
this.rightBox.show = true this.rightBox.show = true
} }