fix: 修复add-endpoint时会自动补全port问题
This commit is contained in:
chenjinsong
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" v-clickoutside="{obj:endpoint,func:clickOutside}">
|
||||
<div v-clickoutside="{obj:endpoint,func:clickOutside}" :class="{'right-box-add-endpoint-snmp': currentModule.type && currentModule.type.toLowerCase() == 'snmp'}" class="right-box right-box-add-endpoint">
|
||||
<div class="right-box__header">
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">{{$t("overall.createEndpoint")}}</div>
|
||||
<div class="header__title">{{$t("overall.createEndpoint")}}</div>
|
||||
<!-- end--标题-->
|
||||
<div class="header__operation">
|
||||
<span v-cancel="{obj: object, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
|
||||
@@ -10,45 +10,46 @@
|
||||
</div>
|
||||
|
||||
<!-- begin--表单-->
|
||||
<div class="right-box-form-box right-box__container" style="overflow: hidden">
|
||||
<el-form class="right-box-form right-box-form-left" label-position = "top" ref="addEndpoint" :model="endpoint" :rules="rules">
|
||||
<div class="right-box__container">
|
||||
<div class="container__form">
|
||||
<el-form ref="addEndpoint" :model="endpoint" :rules="rules" label-position = "top">
|
||||
<!--project-->
|
||||
<el-form-item :label='$t("project.project.projectName")' prop="projectId" class="select-warp">
|
||||
<el-select @change="((val) => {changeProject(val)})" value-key="id" popper-class="config-dropdown" v-model="currentProjectCopy" placeholder="" size="small" id="add-endpoint-project">
|
||||
<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item" :id="'project-'+item.id"></el-option>
|
||||
<el-form-item :label='$t("project.project.projectName")' class="select-warp" prop="projectId">
|
||||
<el-select id="add-endpoint-project" v-model="currentProject" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="((val) => {changeProject(val)})">
|
||||
<el-option v-for="item in projectList" :id="'project-'+item.id" :key="item.id" :label="item.name" :value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!--module-->
|
||||
<el-form-item :label='$t("project.module.module")' prop="moduleId" class="select-warp">
|
||||
<el-select @change="((val) => {changeModule(val)})" value-key="id" popper-class="config-dropdown" v-model="currentModuleCopy" placeholder="" size="small" id="add-endpoint-module" :disabled="!currentProjectCopy.id">
|
||||
<el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item" :id="'module-'+item.id"></el-option>
|
||||
<el-form-item :label='$t("project.module.module")' class="select-warp" prop="moduleId">
|
||||
<el-select id="add-endpoint-module" v-model="currentModule" :disabled="!currentProject.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="((val) => {changeModule(val)})">
|
||||
<el-option v-for="item in moduleList" :id="'module-'+item.id" :key="item.id" :label="item.name" :value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!--asset和endpoint-->
|
||||
<div class="asset-and-endpoint">
|
||||
<!--asset-->
|
||||
<div class="right-box-asset-table">
|
||||
<div v-show="!currentModuleCopy.id" class="disabled-asset-table">
|
||||
<div v-show="!currentModule.id" class="disabled-asset-table">
|
||||
</div>
|
||||
<div class="search-box">
|
||||
<search-input
|
||||
ref="searchInput"
|
||||
:placeholder="$t('overall.placeHolder')"
|
||||
:searchMsg="searchMsg"
|
||||
@search="search"
|
||||
style="width:100%"
|
||||
:show-history="false"
|
||||
:show-search="false"
|
||||
:placeholder="$t('overall.placeHolder')"
|
||||
style="width:100%"
|
||||
@search="search"
|
||||
></search-input>
|
||||
</div>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="assetTableData"
|
||||
tooltip-effect="dark"
|
||||
class="asset-table"
|
||||
:row-class-name="setRowShow"
|
||||
style="width: 100%"
|
||||
class="asset-table"
|
||||
height="calc(100% - 97px)"
|
||||
style="width: 100%"
|
||||
tooltip-effect="dark"
|
||||
@selection-change="handleSelectionChangeAsset">
|
||||
<el-table-column
|
||||
type="selection"
|
||||
@@ -120,34 +121,34 @@
|
||||
<!--endpoint-->
|
||||
<div class="right-box-endpoint-table">
|
||||
<div class="search-box" style="display: flex;justify-content: flex-end">
|
||||
<el-button @click="showRightBox" class="top-tool-btn" type="button">
|
||||
<el-button class="top-tool-btn" type="button" @click="showRightBox">
|
||||
<i class="nz-icon-gear nz-icon"></i>
|
||||
</el-button>
|
||||
<el-button @click="editAllEndpoint" class="top-tool-btn" type="button">
|
||||
<el-button class="top-tool-btn" type="button" @click="editAllEndpoint">
|
||||
<i class="nz-icon-batch-edit nz-icon"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="endpointTableData"
|
||||
ref="endpointTable"
|
||||
style="width:100%;border-radius: 4px;"
|
||||
height="calc(100% - 95px)"
|
||||
id="add-endpoint-asset-table"
|
||||
@selection-change="handleSelectionChangeEndpoint"
|
||||
empty-text=" ">
|
||||
ref="endpointTable"
|
||||
:data="endpointTableData"
|
||||
empty-text=" "
|
||||
height="calc(100% - 95px)"
|
||||
style="width:100%;border-radius: 4px;"
|
||||
@selection-change="handleSelectionChangeEndpoint">
|
||||
<el-table-column
|
||||
style="padding: 0 1px;"
|
||||
type="selection"
|
||||
width="25"
|
||||
style="padding: 0 1px;">
|
||||
width="25">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label-class-name="endpoints-box-endpoints-title"
|
||||
v-for="(title, index) in endpointTableTitle"
|
||||
v-if="title.show"
|
||||
:min-width="title.width"
|
||||
:key="index"
|
||||
:label="title.label"
|
||||
:min-width="title.width"
|
||||
:resizable="true"
|
||||
label-class-name="endpoints-box-endpoints-title"
|
||||
>
|
||||
<template slot-scope="scope" :column="title">
|
||||
<span v-if="title.prop == 'asset'">{{scope.row.assetName}}</span>
|
||||
@@ -155,18 +156,18 @@
|
||||
{{scope.row.name}}
|
||||
</span>
|
||||
<template v-else-if="title.prop === 'configs'">
|
||||
<el-tooltip placement="right" effect="light" :popper-class="'endpointConfigsTips'">
|
||||
<el-tooltip effect="light" placement="right" popper-class="prevent-clickoutside">
|
||||
<span class="configs-endpoint">{ ... }</span>
|
||||
<div class="endpointConfigsTips" slot="content">
|
||||
<!-- <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row[title.prop])"></i></span>-->
|
||||
<div slot="content" class="endpointConfigsTips">
|
||||
<!-- <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row[title.prop])"></i></span>-->
|
||||
<pre >{{JSON.stringify(scope.row[title.prop],null,2)}}</pre>
|
||||
<!-- <pre>{{}}</pre>-->
|
||||
<!-- <pre>{{}}</pre>-->
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="" width="56" fixed="right">
|
||||
<el-table-column fixed="right" label="" width="56">
|
||||
<template slot-scope="scope" style="text-align: center">
|
||||
<span @click="editEndpointRow(scope.row, scope.$index)">
|
||||
<i class="nz-icon-gear nz-icon"></i>
|
||||
@@ -183,6 +184,7 @@
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--底部按钮-->
|
||||
<div class="right-box__footer">
|
||||
@@ -204,10 +206,6 @@
|
||||
import editEndpointBoxNew from './editEndpointBoxNew'
|
||||
export default {
|
||||
name: 'endpointBox',
|
||||
props: {
|
||||
currentProject: Object,
|
||||
currentModule: Object
|
||||
},
|
||||
components: {
|
||||
'edit-endpoint-box-new': editEndpointBoxNew
|
||||
},
|
||||
@@ -235,8 +233,8 @@ export default {
|
||||
paramBorderColor: '#dcdfe6',
|
||||
endpointTouch: false,
|
||||
endpoint: { projectId: '', moduleId: '', endpointList: [] },
|
||||
currentModuleCopy: {},
|
||||
currentProjectCopy: { id: '' },
|
||||
currentModule: {},
|
||||
currentProject: { id: '' },
|
||||
tempParamObj: [],
|
||||
tempLabelModule: [],
|
||||
inputKeyErr: [],
|
||||
@@ -250,12 +248,12 @@ export default {
|
||||
projectId: '',
|
||||
endpointNameTmpl: '{{module.name}}-{{asset.name}}',
|
||||
type: 'http',
|
||||
port: 9100,
|
||||
port: '',
|
||||
configs: {
|
||||
walk: [],
|
||||
snmpCredentialsId: '',
|
||||
metrics_path: '',
|
||||
port: 9100,
|
||||
port: '',
|
||||
host: '{{asset.manageIp}}',
|
||||
scrape_interval: '',
|
||||
scrape_timeout: '',
|
||||
@@ -452,7 +450,7 @@ export default {
|
||||
this.$get('monitor/project', { pageSize: -1, pageNo: 1 }).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.projectList = response.data.list
|
||||
this.getModuleList(this.currentProjectCopy.id)
|
||||
this.getModuleList(this.currentProject.id)
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -484,7 +482,7 @@ export default {
|
||||
},
|
||||
|
||||
changeProject (project) {
|
||||
this.currentModuleCopy = {}
|
||||
this.currentModule = {}
|
||||
this.endpoint.moduleId = ''
|
||||
this.endpoint.projectId = project.id
|
||||
this.editParamBox.show = false
|
||||
@@ -548,9 +546,9 @@ export default {
|
||||
save () {
|
||||
if (this.prevent_opt.save) { return } ;
|
||||
this.prevent_opt.save = true
|
||||
this.endpoint.projectId = this.currentProjectCopy.id
|
||||
this.endpoint.moduleId = this.currentModuleCopy.id
|
||||
if (this.endpointTableData.length == 0) {
|
||||
this.endpoint.projectId = this.currentProject.id
|
||||
this.endpoint.moduleId = this.currentModule.id
|
||||
if (this.endpointTableData.length === 0) {
|
||||
this.endpointTouch = true
|
||||
this.$refs.addEndpoint.validate()
|
||||
return false
|
||||
@@ -616,12 +614,12 @@ export default {
|
||||
assetId: item.id,
|
||||
assetName: item.name,
|
||||
// asset: item,
|
||||
type: this.currentModuleCopy.type,
|
||||
projectId: this.currentModuleCopy.projectId,
|
||||
configs: { ...JSON.parse(this.currentModuleCopy.configs), host: item.manageIp },
|
||||
moduleId: this.currentModuleCopy.id
|
||||
type: this.currentModule.type,
|
||||
projectId: this.currentModule.projectId,
|
||||
configs: { ...JSON.parse(this.currentModule.configs), host: item.manageIp },
|
||||
moduleId: this.currentModule.id
|
||||
}
|
||||
obj.name = this.currentModuleCopy.endpointNameTmpl
|
||||
obj.name = this.currentModule.endpointNameTmpl
|
||||
obj.configs = JSON.stringify(obj.configs)
|
||||
arr.push(obj)
|
||||
})
|
||||
@@ -673,14 +671,14 @@ export default {
|
||||
this.optionType = 'add'
|
||||
this.object = JSON.parse(JSON.stringify(u))
|
||||
this.object.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)) : 9100
|
||||
this.object.configs.port && (this.object.port = this.object.configs.port)
|
||||
this.rightBox.show = true
|
||||
},
|
||||
showRightBox () {
|
||||
this.optionType = 'batch'
|
||||
this.object = { ...JSON.parse(JSON.stringify(this.blankEndpoint)), projectId: this.currentModuleCopy.projectId, moduleId: this.currentModuleCopy.id, assetName: '', type: this.currentModuleCopy.type }
|
||||
this.object = { ...JSON.parse(JSON.stringify(this.blankEndpoint)), projectId: this.currentModule.projectId, moduleId: this.currentModule.id, assetName: '', type: this.currentModule.type }
|
||||
this.object.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)) : 9100
|
||||
this.object.configs.port && (this.object.port = this.object.configs.port)
|
||||
this.rightBox.show = true
|
||||
},
|
||||
editAllEndpoint () {
|
||||
@@ -734,32 +732,11 @@ export default {
|
||||
currentProject: {
|
||||
immediate: true,
|
||||
handler (n, o) {
|
||||
if (n) {
|
||||
this.currentProjectCopy = Object.assign({}, n)
|
||||
this.endpoint.projectId = n.id
|
||||
this.getModuleList(n.id)
|
||||
}
|
||||
}
|
||||
},
|
||||
currentModule: {
|
||||
immediate: true,
|
||||
handler (n, o) {
|
||||
if (n) {
|
||||
this.endpoint.moduleId = n.id
|
||||
this.currentModuleCopy = JSON.parse(JSON.stringify(n))
|
||||
}
|
||||
}
|
||||
},
|
||||
currentModuleCopy: {
|
||||
immediate: true,
|
||||
handler (n, o) {
|
||||
// if (n.type && n.type.toLowerCase() == 'snmp') {
|
||||
// this.endpointTableTitle[4].show = false
|
||||
// this.endpointTableTitle[5].show = false
|
||||
// } else {
|
||||
// this.endpointTableTitle[4].show = true
|
||||
// this.endpointTableTitle[5].show = true
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -318,7 +318,7 @@ export default {
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('asset.host'),
|
||||
label: this.$t('asset.manageIp'),
|
||||
prop: 'manageIp',
|
||||
show: true
|
||||
}
|
||||
@@ -430,6 +430,17 @@ export default {
|
||||
handler (n) {
|
||||
this.getTableData()
|
||||
}
|
||||
},
|
||||
'editData.editType': {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler (n) {
|
||||
if (n !== assetConstants.editTypeData.account) {
|
||||
this.editData.authProtocol = 0
|
||||
} else {
|
||||
this.getTableData()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="right-box right-box-add-endpoint" v-clickoutside="{obj:endpoint,func:clickOutside}">
|
||||
<div class="right-box__header">
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">{{$t("overall.batchEndpoint")}}</div>
|
||||
<div class="header__title">{{$t("overall.batchEndpoint")}}</div>
|
||||
<!-- end--标题-->
|
||||
<div class="header__operation">
|
||||
<span v-cancel="{obj: endpoint, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="right-box right-box-module" v-clickoutside="{obj:editEndpoint,func:clickOutside}">
|
||||
<div class="right-box__header">
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">
|
||||
<div class="header__title">
|
||||
<span v-if="optionType === 'edit'">
|
||||
{{ $t("project.module.editEndpoint")}}
|
||||
</span>
|
||||
@@ -20,40 +20,40 @@
|
||||
</div>
|
||||
|
||||
<!-- begin--表单-->
|
||||
<div class="right-box-form-box right-box__container" ref="scrollbar">
|
||||
<el-form class="right-box-form right-box-form-left" :model="editEndpoint" label-position = "top" label-width="120px" :rules="rules" ref="moduleForm">
|
||||
<div ref="scrollbar" class="right-box__container">
|
||||
<div class="container__form">
|
||||
<el-form ref="moduleForm" :model="editEndpoint" :rules="rules" label-position = "top" label-width="120px">
|
||||
<!--name-->
|
||||
<el-form-item :label='$t("project.module.name")' prop="name" label-width="125px" v-if="optionType!=='batch'">
|
||||
<el-input placeholder="" maxlength="64" show-word-limit v-model="editEndpoint.name" size="small" id="module-box-input-name"></el-input>
|
||||
<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-->
|
||||
<el-form-item :label='$t("project.project.projectName")' prop="projectId">
|
||||
<el-select value-key="id" popper-class="config-dropdown" v-model="editEndpoint.projectId" placeholder="" size="small" id="module-box-input-project" @change="changeProject" :disabled="disabled">
|
||||
<el-option :id="'module-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
<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-select>
|
||||
</el-form-item>
|
||||
<!--asset-->
|
||||
<el-form-item :label='$t("project.module.asset")' prop="asset" label-width="125px">
|
||||
<el-input placeholder="" maxlength="64" show-word-limit v-model="editEndpoint.assetName" size="small" id="module-box-input-assetName" :disabled="disabled"></el-input>
|
||||
<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-->
|
||||
<el-form-item :label='$t("project.module.module")' prop="remark">
|
||||
<el-select value-key="id" popper-class="config-dropdown" v-model="editEndpoint.moduleId" placeholder="" size="small" :disabled="!editEndpoint.projectId || disabled " id="module-box-input-module">
|
||||
<el-option :id="'module-'+item.id" v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
<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>
|
||||
|
||||
<!--type-->
|
||||
<el-form-item :label='$t("project.endpoint.type")' prop="type">
|
||||
<el-select value-key="id" popper-class="config-dropdown" v-model="editEndpoint.type" placeholder="" size="small" id="module-box-input-type" :disabled="!!editEndpoint.id || disabled" @change="changeAuthType" >
|
||||
<el-option :id="'module-type-'+item.id" v-for="item in typetList" :key="item.value" :label="item.name" :value="item.value"></el-option>
|
||||
<el-select id="module-box-input-type" v-model="editEndpoint.type" :disabled="!!editEndpoint.id || disabled" 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 typetList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- snmp表单 -->
|
||||
<span class="snmp-form" v-if="editEndpoint.type && editEndpoint.type == 'snmp'">
|
||||
<div class="right-box-sub-title">SNMP settings
|
||||
</div>
|
||||
<span v-if="editEndpoint.type && editEndpoint.type == 'snmp'" class="snmp-form">
|
||||
<div class="right-box-sub-title">SNMP settings</div>
|
||||
<div class="right-box-line"></div>
|
||||
|
||||
<el-row>
|
||||
@@ -86,7 +86,7 @@
|
||||
</el-row>
|
||||
<!--credentials-->
|
||||
<el-form-item :label='$t("project.endpoint.credentials")' prop="credentials">
|
||||
<el-select value-key="id" popper-class="config-dropdown" v-model="editEndpoint.configs.snmpCredentialsId" placeholder="" size="small" id="module-box-input-credentials">
|
||||
<el-select id="module-box-input-credentials" v-model="editEndpoint.configs.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
|
||||
<el-option :id="'module-type-'+item.id" v-for="item in credentialList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -94,7 +94,7 @@
|
||||
|
||||
<!--Enpoint template-->
|
||||
<div class="right-box-sub-title">{{ $t("overall.endpointTemplate") }}
|
||||
<el-tooltip placement="top" effect="light">
|
||||
<el-tooltip effect="light" placement="top">
|
||||
<div slot="content">
|
||||
{{$t('project.module.tip.defaultEndpointSet')}}
|
||||
<div></div>
|
||||
@@ -108,40 +108,40 @@
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="Basic" name="Basic">
|
||||
<!--path-->
|
||||
<el-form-item :label='$t("project.endpoint.path")' prop="configs.metrics_path" class="half-form-item">
|
||||
<el-input placeholder="" v-model="editEndpoint.configs.metrics_path" size="small" id="module-box-input-path"></el-input>
|
||||
<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.metrics_path" placeholder="" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<!--port-->
|
||||
<el-form-item :label='$t("project.endpoint.port")' prop="port" class="half-form-item">
|
||||
<el-input placeholder="" v-model.number="editEndpoint.port" size="small" id="module-box-input-port"></el-input>
|
||||
<el-form-item :label='$t("project.endpoint.port")' class="half-form-item" prop="port">
|
||||
<el-input id="module-box-input-port" v-model.number="editEndpoint.port" placeholder="" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<!--host-->
|
||||
<el-form-item :label='$t("project.endpoint.host")' prop="host">
|
||||
<el-input placeholder="" v-model="editEndpoint.configs.host" size="small" id="module-box-input-host"></el-input>
|
||||
<el-input id="module-box-input-host" v-model="editEndpoint.configs.host" placeholder="" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div v-show="showAllBasicOption" >
|
||||
<!-- <!–name pattern–>-->
|
||||
<!-- <el-form-item :label='$t("project.endpoint.pattern")' prop="pattern" class="half-form-item">-->
|
||||
<!-- <!– <el-input placeholder="" v-model=""></el-input>–>-->
|
||||
<!-- <el-autocomplete-->
|
||||
<!-- class="inline-input"-->
|
||||
<!-- size="small"-->
|
||||
<!-- id="module-box-input-pattern"-->
|
||||
<!-- v-model="editEndpoint.endpointNameTmpl"-->
|
||||
<!-- :fetch-suggestions="querySearch"-->
|
||||
<!-- placeholder="请输入内容"-->
|
||||
<!-- ></el-autocomplete>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <!–name pattern–>-->
|
||||
<!-- <el-form-item :label='$t("project.endpoint.pattern")' prop="pattern" class="half-form-item">-->
|
||||
<!-- <!– <el-input placeholder="" v-model=""></el-input>–>-->
|
||||
<!-- <el-autocomplete-->
|
||||
<!-- class="inline-input"-->
|
||||
<!-- size="small"-->
|
||||
<!-- id="module-box-input-pattern"-->
|
||||
<!-- v-model="editEndpoint.endpointNameTmpl"-->
|
||||
<!-- :fetch-suggestions="querySearch"-->
|
||||
<!-- placeholder="请输入内容"-->
|
||||
<!-- ></el-autocomplete>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!--scrape_interval-->
|
||||
<el-form-item :label='$t("project.endpoint.scrape_interval")' prop="scrape_interval" class="half-form-item">
|
||||
<el-input :placeholder='$t("project.endpoint.scrape_interval_placeholder")' v-model.number="editEndpoint.configs.scrape_interval" size="small" id="module-box-input-scrape_interval">
|
||||
<el-form-item :label='$t("project.endpoint.scrape_interval")' class="half-form-item" prop="scrape_interval">
|
||||
<el-input id="module-box-input-scrape_interval" v-model.number="editEndpoint.configs.scrape_interval" :placeholder='$t("project.endpoint.scrape_interval_placeholder")' size="small">
|
||||
<template slot="append">s</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<!--scrape_timeout-->
|
||||
<el-form-item :label='$t("project.endpoint.scrape_timeout")' prop="scrape_timeout" class="half-form-item">
|
||||
<el-input :placeholder='$t("project.endpoint.scrape_timeout_placeholder")' v-model.number="editEndpoint.configs.scrape_timeout" size="small" id="module-box-input-scrape_timeout">
|
||||
<el-form-item :label='$t("project.endpoint.scrape_timeout")' class="half-form-item" prop="scrape_timeout">
|
||||
<el-input id="module-box-input-scrape_timeout" v-model.number="editEndpoint.configs.scrape_timeout" :placeholder='$t("project.endpoint.scrape_timeout_placeholder")' size="small">
|
||||
<template slot="append">s</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
@@ -156,35 +156,35 @@
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Parameter" name="Parameter">
|
||||
<div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;" id="module-box-params">
|
||||
<div id="module-box-params" ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
|
||||
<div v-for="(item, index) in editEndpoint.paramObj" :key="index" class="param-box-row">
|
||||
<el-form-item class="param-box-row-key" :prop="'paramObj.' + index + '.key'">
|
||||
<el-input placeholder="key" size="mini" v-model="item.key" ></el-input>
|
||||
<el-form-item :prop="'paramObj.' + index + '.key'" class="param-box-row-key">
|
||||
<el-input v-model="item.key" placeholder="key" size="mini" ></el-input>
|
||||
</el-form-item>
|
||||
<span class="param-box-row-eq">=</span>
|
||||
<el-form-item class="param-box-row-value" :prop="'paramObj.' + index + '.value'">
|
||||
<!-- <el-select-->
|
||||
<!-- v-model="item.value"-->
|
||||
<!-- multiple-->
|
||||
<!-- filterable-->
|
||||
<!-- allow-create-->
|
||||
<!-- :ref="'select'+ index"-->
|
||||
<!-- placeholder="value" size="mini"-->
|
||||
<!-- default-first-option-->
|
||||
<!-- popper-class="config-dropdown hide-element"-->
|
||||
<!-- @change="(val)=>{paramObjchange(val,index)}"-->
|
||||
<!-- >-->
|
||||
<!-- <span slot="empty" class=""></span>-->
|
||||
<!-- </el-select>-->
|
||||
<el-form-item :prop="'paramObj.' + index + '.value'" class="param-box-row-value">
|
||||
<!-- <el-select-->
|
||||
<!-- v-model="item.value"-->
|
||||
<!-- multiple-->
|
||||
<!-- filterable-->
|
||||
<!-- allow-create-->
|
||||
<!-- :ref="'select'+ index"-->
|
||||
<!-- placeholder="value" size="mini"-->
|
||||
<!-- default-first-option-->
|
||||
<!-- popper-class="config-dropdown hide-element"-->
|
||||
<!-- @change="(val)=>{paramObjchange(val,index)}"-->
|
||||
<!-- >-->
|
||||
<!-- <span slot="empty" class=""></span>-->
|
||||
<!-- </el-select>-->
|
||||
<vue-tags-input
|
||||
v-model="item.tags"
|
||||
:tags="item.value"
|
||||
:maxlength="32"
|
||||
@tags-changed="(newTags)=>{tagsChange(newTags, index)}"
|
||||
:placeholder="'add parameter'"
|
||||
:tags="item.value"
|
||||
@tags-changed="(newTags)=>{tagsChange(newTags, index)}"
|
||||
/>
|
||||
</el-form-item>
|
||||
<span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
|
||||
<span :id="'moduel-remove-param-'+index" class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center">
|
||||
@@ -194,16 +194,16 @@
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Labels" name="Labels">
|
||||
<div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;" id="module-box-labels">
|
||||
<div id="module-box-labels" ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
|
||||
<div v-for="(item, index) in editEndpoint.labelModule" :key="index" class="param-box-row">
|
||||
<el-form-item class="param-box-row-key" :rules="[{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" :prop="'labelModule.' + index + '.key'">
|
||||
<el-input placeholder="key" size="mini" v-model="item.key"></el-input>
|
||||
<el-form-item :prop="'labelModule.' + index + '.key'" :rules="[{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" class="param-box-row-key">
|
||||
<el-input v-model="item.key" placeholder="key" size="mini"></el-input>
|
||||
</el-form-item>
|
||||
<span class="param-box-row-eq">=</span>
|
||||
<el-form-item class="param-box-row-value" :prop="'labelModule.' + index + '.value'">
|
||||
<el-input placeholder="value" size="mini" v-model="item.value"></el-input>
|
||||
<el-form-item :prop="'labelModule.' + index + '.value'" class="param-box-row-value">
|
||||
<el-input v-model="item.value" placeholder="value" size="mini"></el-input>
|
||||
</el-form-item>
|
||||
<span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
|
||||
<span :id="'moduel-remove-label-'+index" class="param-box-row-symbol" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center">
|
||||
@@ -212,26 +212,26 @@
|
||||
</span>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Auth" name="Auth" v-if="editEndpoint.type !== 'snmp'">
|
||||
<el-tab-pane v-if="editEndpoint.type !== 'snmp'" label="Auth" name="Auth">
|
||||
<!--authtype-->
|
||||
<el-form-item :label='$t("project.endpoint.type")' prop="authtype">
|
||||
<el-select @change="changeAuthType" value-key="id" popper-class="config-dropdown" v-model="authType" placeholder="" size="small" id="module-box-input-auth-type">
|
||||
<el-option :id="'module-type-'+item.id" v-for="item in authTypeList" :key="item.value" :label="item.name" :value="item.value"></el-option>
|
||||
<el-select id="module-box-input-auth-type" v-model="authType" 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 authTypeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!--authtype 1-->
|
||||
<el-form-item :label='$t("project.endpoint.username")' prop="authtype" v-if="authType === 1" class="half-form-item">
|
||||
<el-input placeholder='' v-model.number="editEndpoint.configs.basic_auth.username" size="small" id="module-box-input-uername"></el-input>
|
||||
<el-form-item v-if="authType === 1" :label='$t("project.endpoint.username")' class="half-form-item" prop="authtype">
|
||||
<el-input id="module-box-input-uername" v-model.number="editEndpoint.configs.basic_auth.username" placeholder='' size="small"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label='$t("project.endpoint.pin")' prop="authtype" v-if="authType === 1" class="half-form-item">
|
||||
<el-input placeholder='' v-model.number="editEndpoint.configs.basic_auth.pin" size="small" id="module-box-input-password"></el-input>
|
||||
<el-form-item v-if="authType === 1" :label='$t("project.endpoint.pin")' class="half-form-item" prop="authtype">
|
||||
<el-input id="module-box-input-password" v-model.number="editEndpoint.configs.basic_auth.pin" placeholder='' size="small"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!--authtype 2-->
|
||||
<el-form-item :label='$t("project.endpoint.bearer_token")' prop="authtype" v-if="authType === 2">
|
||||
<el-input placeholder='' v-model.number="editEndpoint.configs.bearer_token" size="small" id="module-box-input-bearer_token"></el-input>
|
||||
<el-form-item v-if="authType === 2" :label='$t("project.endpoint.bearer_token")' prop="authtype">
|
||||
<el-input id="module-box-input-bearer_token" v-model.number="editEndpoint.configs.bearer_token" placeholder='' size="small"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
</el-tab-pane>
|
||||
@@ -242,6 +242,7 @@
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--底部按钮-->
|
||||
<div class="right-box__footer">
|
||||
|
||||
Reference in New Issue
Block a user