gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-943 feat：module endpoint 编辑页面 metric snmp 类型输入校验修改

Browse Source
This commit is contained in:
zhangyu
2021-08-27 16:15:05 +08:00
parent 17addd5a02
commit 416a14dccc
3 changed files with 38 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
nezha-fronted/src/components/common/popBox/selectWalk.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<el-popover @show="tempWalk.detailShow = false" v-if="popBox.show" :placement="placement" width="367" ref="selectWalkPopBox" popper-class="nz-pop nz-pop-select-walk" transition="slide"> <el-popover :disabled="disabled" @show="tempWalk.detailShow = false" v-if="popBox.show" :placement="placement" width="367" ref="selectWalkPopBox" popper-class="nz-pop nz-pop-select-walk" transition="slide">
<div class="pop-item-wider" @click="tempWalk.detailShow = false"> <div class="pop-item-wider" @click="tempWalk.detailShow = false">
<div v-if="tempWalk.detailShow" class="el-popover walk-pop" :style="{left: detailPopPosition.left, top: detailPopPosition.top}"> <div v-if="tempWalk.detailShow" class="el-popover walk-pop" :style="{left: detailPopPosition.left, top: detailPopPosition.top}">
<p><span class="metirc-tip-list">Name&nbsp;:&nbsp;</span><span>{{tempWalk.name}}</span></p> <p><span class="metirc-tip-list">Name&nbsp;:&nbsp;</span><span>{{tempWalk.name}}</span></p>
@@ -54,7 +54,8 @@ export default {
placement: { type: String }, placement: { type: String },
walkData: { type: Array }, walkData: { type: Array },
currentWalk: { type: Array }, currentWalk: { type: Array },
expandedWalk: { type: Array } expandedWalk: { type: Array },
disabled: {type: Boolean, default: false }
}, },
data () { data () {
return { return {

32
nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
View File

@@ -109,9 +109,19 @@
<transition name="el-zoom-in-top"> <transition name="el-zoom-in-top">
<el-tabs v-model="activeName" v-show="metricsShow" v-if="editEndpoint.configs[0].enable"> <el-tabs v-model="activeName" v-show="metricsShow" v-if="editEndpoint.configs[0].enable">
<el-tab-pane :label="$t('project.endpoint.basic')" name="Basic"> <el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
<!--type-->
<el-form-item :label='$t("project.endpoint.type")' class="half-form-item" prop="type">
<el-select id="module-box-input-type" v-model="editEndpoint.configs[0].config.protocol" :disabled="!!editEndpoint.id || true" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
<el-option v-for="item in typeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select>
</el-form-item>
<!--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-form-item>
<!--path--> <!--path-->
<el-form-item :label='$t("project.endpoint.path")' class="half-form-item" prop="configs.metrics_path"> <el-form-item :label='$t("project.endpoint.path")' class="half-form-item" prop="configs.metrics_path">
<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" disabled></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="[
@@ -120,16 +130,6 @@
]"> ]">
<el-input id="module-box-input-port" v-model.number="editEndpoint.configs[0].config.port" placeholder="" size="small"></el-input> <el-input id="module-box-input-port" v-model.number="editEndpoint.configs[0].config.port" placeholder="" size="small"></el-input>
</el-form-item> </el-form-item>
<!--type-->
<el-form-item :label='$t("project.endpoint.type")' class="half-form-item" prop="type">
<el-select id="module-box-input-type" v-model="editEndpoint.configs[0].config.protocol" :disabled="!!editEndpoint.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
<el-option v-for="item in typeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select>
</el-form-item>
<!--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-form-item>
<!-- snmp表单 --> <!-- snmp表单 -->
<div v-if="editEndpoint.configs[0].config.protocol && editEndpoint.configs[0].config.protocol == 'snmp'"> <div v-if="editEndpoint.configs[0].config.protocol && editEndpoint.configs[0].config.protocol == 'snmp'">
<el-row> <el-row>
@@ -138,9 +138,9 @@
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-form-item prop="configs.0.config.walk" :rules="[{ required: true, message: $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"> <select-walk ref="selectWalk" :currentWalk="editEndpoint.configs[0].config.walk" :expandedWalk="expandedWalkData" :placement="'bottom-start'" :walkData="walkData" @selectWalk="selectWalk" :disabled="true">
<template v-slot:trigger> <template v-slot:trigger>
<div class="el-cascader"> <div class="el-cascader" style="position: relative;">
<div class="el-input"> <div class="el-input">
<input aria-expanded="false" autocomplete="off" class="el-input__inner" readonly="readonly" type="text"> <input aria-expanded="false" autocomplete="off" class="el-input__inner" readonly="readonly" type="text">
</div> </div>
@@ -154,6 +154,7 @@
</span> </span>
</div> </div>
</div> </div>
<div style="position: absolute;width: 100%;height: 100%;left: 0;top: 0;background: rgba(245,247,250,0.5)"></div>
</div> </div>
</template> </template>
</select-walk> </select-walk>
@@ -162,7 +163,7 @@
</el-row> </el-row>
<!--credentials--> <!--credentials-->
<el-form-item :label='$t("project.endpoint.credentials")' prop="credentials"> <el-form-item :label='$t("project.endpoint.credentials")' prop="credentials">
<el-select id="module-box-input-credentials" v-model="editEndpoint.configs[0].config.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id"> <el-select id="module-box-input-credentials" v-model="editEndpoint.configs[0].config.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" disabled>
<el-option v-for="item in credentialList" :id="'module-type-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option> <el-option v-for="item in credentialList" :id="'module-type-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -1760,6 +1761,9 @@ export default {
/deep/ .is-error .vue-tags-input{ /deep/ .is-error .vue-tags-input{
border: 1px solid #F56C6C; border: 1px solid #F56C6C;
} }
.right-box-module .el-cascader .el-input__inner {
height: 150px;
}
.pipeline-box{ .pipeline-box{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

29
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -89,9 +89,19 @@
<transition name="el-zoom-in-top"> <transition name="el-zoom-in-top">
<el-tabs v-model="activeName" v-show="metricsShow" v-if="editModule.configs[0].enable"> <el-tabs v-model="activeName" v-show="metricsShow" v-if="editModule.configs[0].enable">
<el-tab-pane :label="$t('project.endpoint.basic')" name="Basic"> <el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
<!--type-->
<el-form-item :label='$t("project.endpoint.type")' class="half-form-item" prop="type">
<el-select id="module-box-input-type" v-model="editModule.configs[0].config.protocol" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeBasicType">
<el-option v-for="item in typeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
</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: $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>
<!--path--> <!--path-->
<el-form-item :label='$t("project.endpoint.path")' class="half-form-item" prop="configs.metrics_path"> <el-form-item :label='$t("project.endpoint.path")' class="half-form-item" prop="configs.metrics_path" :disabled="editModule.configs[0].config.protocol === 'snmp'">
<el-input id="module-box-input-path" v-model="editModule.configs[0].config.metrics_path" placeholder="" size="small"></el-input> <el-input id="module-box-input-path" v-model="editModule.configs[0].config.metrics_path" placeholder="" size="small" :disabled="editModule.configs[0].config.protocol === 'snmp'"></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="[
@@ -100,16 +110,6 @@
]"> ]">
<el-input id="module-box-input-port" v-model.number="editModule.configs[0].config.port" placeholder="" size="small"></el-input> <el-input id="module-box-input-port" v-model.number="editModule.configs[0].config.port" placeholder="" size="small"></el-input>
</el-form-item> </el-form-item>
<!--type-->
<el-form-item :label='$t("project.endpoint.type")' class="half-form-item" prop="type">
<el-select id="module-box-input-type" v-model="editModule.configs[0].config.protocol" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
<el-option v-for="item in typeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
</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: $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表单 --> <!-- snmp表单 -->
<div v-if="editModule.configs[0].config.protocol && editModule.configs[0].config.protocol == 'snmp'" class=""> <div v-if="editModule.configs[0].config.protocol && editModule.configs[0].config.protocol == 'snmp'" class="">
<el-row> <el-row>
@@ -1114,6 +1114,11 @@ export default {
pin: '' pin: ''
} }
}, },
changeBasicType () {
if (this.editModule.configs[0].config.protocol === 'snmp') {
this.editModule.configs[0].config.metrics_path = ''
}
},
logsLogsArrAdd () { logsLogsArrAdd () {
this.activeNameLogs.push('Basic') this.activeNameLogs.push('Basic')
this.logsCopyValue.push('') this.logsCopyValue.push('')