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

fix: 修复add-endpoint时会自动补全port问题

Browse Source
This commit is contained in:
chenjinsong
2021-05-21 18:29:40 +08:00
parent 94c35fd985
commit a202a88785
4 changed files with 351 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
View File

@@ -1,8 +1,8 @@
<template> <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"> <div class="right-box__header">
<!-- begin--标题--> <!-- begin--标题-->
<div class="right-box-title">{{$t("overall.createEndpoint")}}</div> <div class="header__title">{{$t("overall.createEndpoint")}}</div>
<!-- end--标题--> <!-- end--标题-->
<div class="header__operation"> <div class="header__operation">
<span v-cancel="{obj: object, func: esc}"><i class="nz-icon nz-icon-close"></i></span> <span v-cancel="{obj: object, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
@@ -10,91 +10,92 @@
</div> </div>
<!-- begin--表单--> <!-- begin--表单-->
<div class="right-box-form-box right-box__container" style="overflow: hidden"> <div class="right-box__container">
<el-form class="right-box-form right-box-form-left" label-position = "top" ref="addEndpoint" :model="endpoint" :rules="rules"> <div class="container__form">
<!--project--> <el-form ref="addEndpoint" :model="endpoint" :rules="rules" label-position = "top">
<el-form-item :label='$t("project.project.projectName")' prop="projectId" class="select-warp"> <!--project-->
<el-select @change="((val) => {changeProject(val)})" value-key="id" popper-class="config-dropdown" v-model="currentProjectCopy" placeholder="" size="small" id="add-endpoint-project"> <el-form-item :label='$t("project.project.projectName")' class="select-warp" prop="projectId">
<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item" :id="'project-'+item.id"></el-option> <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-select> <el-option v-for="item in projectList" :id="'project-'+item.id" :key="item.id" :label="item.name" :value="item"></el-option>
</el-form-item> </el-select>
<!--module--> </el-form-item>
<el-form-item :label='$t("project.module.module")' prop="moduleId" class="select-warp"> <!--module-->
<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-form-item :label='$t("project.module.module")' class="select-warp" prop="moduleId">
<el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item" :id="'module-'+item.id"></el-option> <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-select> <el-option v-for="item in moduleList" :id="'module-'+item.id" :key="item.id" :label="item.name" :value="item"></el-option>
</el-form-item> </el-select>
<!--asset和endpoint--> </el-form-item>
<div class="asset-and-endpoint"> <!--asset和endpoint-->
<!--asset--> <div class="asset-and-endpoint">
<div class="right-box-asset-table"> <!--asset-->
<div v-show="!currentModuleCopy.id" class="disabled-asset-table"> <div class="right-box-asset-table">
</div> <div v-show="!currentModule.id" class="disabled-asset-table">
<div class="search-box"> </div>
<search-input <div class="search-box">
ref="searchInput" <search-input
:searchMsg="searchMsg" ref="searchInput"
@search="search" :placeholder="$t('overall.placeHolder')"
style="width:100%" :searchMsg="searchMsg"
:show-history="false" :show-history="false"
:show-search="false" :show-search="false"
:placeholder="$t('overall.placeHolder')" style="width:100%"
></search-input> @search="search"
</div> ></search-input>
<el-table </div>
ref="multipleTable" <el-table
:data="assetTableData" ref="multipleTable"
tooltip-effect="dark" :data="assetTableData"
class="asset-table" :row-class-name="setRowShow"
:row-class-name="setRowShow" class="asset-table"
style="width: 100%" height="calc(100% - 97px)"
height="calc(100% - 97px)" style="width: 100%"
@selection-change="handleSelectionChangeAsset"> tooltip-effect="dark"
<el-table-column @selection-change="handleSelectionChangeAsset">
type="selection" <el-table-column
width="55"> type="selection"
</el-table-column> width="55">
<el-table-column </el-table-column>
v-for="(item, index) in assetTableTitle" <el-table-column
:key="`col-${index}`" v-for="(item, index) in assetTableTitle"
:fixed="item.fixed" :key="`col-${index}`"
:label="item.label" :fixed="item.fixed"
:min-width="`${item.minWidth}`" :label="item.label"
:prop="item.prop" :min-width="`${item.minWidth}`"
:resizable="true" :prop="item.prop"
:sort-orders="['ascending', 'descending']" :resizable="true"
:width="`${item.width}`" :sort-orders="['ascending', 'descending']"
class="data-column" :width="`${item.width}`"
class="data-column"
> >
<template slot="header"> <template slot="header">
<span>{{item.label}}</span> <span>{{item.label}}</span>
<div class="col-resize-area"></div> <div class="col-resize-area"></div>
</template>
<template slot-scope="scope" :column="item">
<template v-if="item.prop == 'brand'">
<span>{{scope.row[item.prop].name}}</span>
</template> </template>
<template v-else-if="item.prop == 'model'"> <template slot-scope="scope" :column="item">
<span>{{scope.row[item.prop]?scope.row[item.prop].name : ''}}</span> <template v-if="item.prop == 'brand'">
<span>{{scope.row[item.prop].name}}</span>
</template>
<template v-else-if="item.prop == 'model'">
<span>{{scope.row[item.prop]?scope.row[item.prop].name : ''}}</span>
</template>
<template v-else-if="item.prop == 'dc'">
<span>{{scope.row[item.prop]?scope.row[item.prop].name : ''}}</span>
</template>
<template v-else-if="item.prop == 'cabinet'">
<span>{{scope.row[item.prop]?scope.row[item.prop].name : ''}}</span>
</template>
<template v-else-if="item.prop == 'type'">
<span>{{scope.row[item.prop]?scope.row[item.prop].name : ''}}</span>
</template>
<template v-else-if="item.prop == 'state'">
<span>{{scope.row[item.prop]?scope.row[item.prop].name : ''}}</span>
</template>
<span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
</template> </template>
<template v-else-if="item.prop == 'dc'"> </el-table-column>
<span>{{scope.row[item.prop]?scope.row[item.prop].name : ''}}</span> </el-table>
</template> <div class="table-bottom">
<template v-else-if="item.prop == 'cabinet'">
<span>{{scope.row[item.prop]?scope.row[item.prop].name : ''}}</span>
</template>
<template v-else-if="item.prop == 'type'">
<span>{{scope.row[item.prop]?scope.row[item.prop].name : ''}}</span>
</template>
<template v-else-if="item.prop == 'state'">
<span>{{scope.row[item.prop]?scope.row[item.prop].name : ''}}</span>
</template>
<span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
</template>
</el-table-column>
</el-table>
<div class="table-bottom">
<el-pagination <el-pagination
style="padding-top:10px" style="padding-top:10px"
small small
@@ -109,79 +110,80 @@
<span class="jump-pages">/&nbsp{{pages.pages}}</span> <span class="jump-pages">/&nbsp{{pages.pages}}</span>
</template> </template>
</el-pagination> </el-pagination>
<span class="add-endpoint" @click="addEndpoint"> <span class="add-endpoint" @click="addEndpoint">
<i class="nz-icon nz-icon-arrow-right"></i> <i class="nz-icon nz-icon-arrow-right"></i>
</span> </span>
</div>
<div v-if="selectAssetAll" class="asset-allselect">
{{$t('project.endpoint.allselect')}}
</div>
</div> </div>
<div v-if="selectAssetAll" class="asset-allselect"> <!--endpoint-->
{{$t('project.endpoint.allselect')}} <div class="right-box-endpoint-table">
</div> <div class="search-box" style="display: flex;justify-content: flex-end">
</div> <el-button class="top-tool-btn" type="button" @click="showRightBox">
<!--endpoint--> <i class="nz-icon-gear nz-icon"></i>
<div class="right-box-endpoint-table"> </el-button>
<div class="search-box" style="display: flex;justify-content: flex-end"> <el-button class="top-tool-btn" type="button" @click="editAllEndpoint">
<el-button @click="showRightBox" class="top-tool-btn" type="button"> <i class="nz-icon-batch-edit nz-icon"></i>
<i class="nz-icon-gear nz-icon"></i> </el-button>
</el-button> </div>
<el-button @click="editAllEndpoint" class="top-tool-btn" type="button"> <el-table
<i class="nz-icon-batch-edit nz-icon"></i> id="add-endpoint-asset-table"
</el-button> ref="endpointTable"
</div> :data="endpointTableData"
<el-table empty-text=" "
:data="endpointTableData" height="calc(100% - 95px)"
ref="endpointTable" style="width:100%;border-radius: 4px;"
style="width:100%;border-radius: 4px;" @selection-change="handleSelectionChangeEndpoint">
height="calc(100% - 95px)" <el-table-column
id="add-endpoint-asset-table" style="padding: 0 1px;"
@selection-change="handleSelectionChangeEndpoint" type="selection"
empty-text=" "> width="25">
<el-table-column </el-table-column>
type="selection" <el-table-column
width="25" v-for="(title, index) in endpointTableTitle"
style="padding: 0 1px;"> v-if="title.show"
</el-table-column> :key="index"
<el-table-column :label="title.label"
label-class-name="endpoints-box-endpoints-title" :min-width="title.width"
v-for="(title, index) in endpointTableTitle" :resizable="true"
v-if="title.show" label-class-name="endpoints-box-endpoints-title"
:min-width="title.width" >
:key="index" <template slot-scope="scope" :column="title">
:label="title.label" <span v-if="title.prop == 'asset'">{{scope.row.assetName}}</span>
:resizable="true" <span v-else-if="title.prop == 'name'">
>
<template slot-scope="scope" :column="title">
<span v-if="title.prop == 'asset'">{{scope.row.assetName}}</span>
<span v-else-if="title.prop == 'name'">
{{scope.row.name}} {{scope.row.name}}
</span> </span>
<template v-else-if="title.prop === 'configs'"> <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> <span class="configs-endpoint">{ ... }</span>
<div class="endpointConfigsTips" slot="content"> <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>--> <!-- <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 >{{JSON.stringify(scope.row[title.prop],null,2)}}</pre>
<!-- <pre>{{}}</pre>--> <!-- <pre>{{}}</pre>-->
</div> </div>
</el-tooltip> </el-tooltip>
</template>
</template> </template>
</template> </el-table-column>
</el-table-column> <el-table-column fixed="right" label="" width="56">
<el-table-column label="" width="56" fixed="right"> <template slot-scope="scope" style="text-align: center">
<template slot-scope="scope" style="text-align: center">
<span @click="editEndpointRow(scope.row, scope.$index)"> <span @click="editEndpointRow(scope.row, scope.$index)">
<i class="nz-icon-gear nz-icon"></i> <i class="nz-icon-gear nz-icon"></i>
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="table-bottom"> <div class="table-bottom">
<span class="add-endpoint" @click="removeEndpoint" style="margin-left: 10px"> <span class="add-endpoint" @click="removeEndpoint" style="margin-left: 10px">
<i class="nz-icon nz-icon-arrow-left"></i> <i class="nz-icon nz-icon-arrow-left"></i>
</span> </span>
</div>
</div> </div>
</div> </div>
</div> </el-form>
</el-form> </div>
</div> </div>
<!--底部按钮--> <!--底部按钮-->
@@ -204,10 +206,6 @@
import editEndpointBoxNew from './editEndpointBoxNew' import editEndpointBoxNew from './editEndpointBoxNew'
export default { export default {
name: 'endpointBox', name: 'endpointBox',
props: {
currentProject: Object,
currentModule: Object
},
components: { components: {
'edit-endpoint-box-new': editEndpointBoxNew 'edit-endpoint-box-new': editEndpointBoxNew
}, },
@@ -235,8 +233,8 @@ export default {
paramBorderColor: '#dcdfe6', paramBorderColor: '#dcdfe6',
endpointTouch: false, endpointTouch: false,
endpoint: { projectId: '', moduleId: '', endpointList: [] }, endpoint: { projectId: '', moduleId: '', endpointList: [] },
currentModuleCopy: {}, currentModule: {},
currentProjectCopy: { id: '' }, currentProject: { id: '' },
tempParamObj: [], tempParamObj: [],
tempLabelModule: [], tempLabelModule: [],
inputKeyErr: [], inputKeyErr: [],
@@ -250,12 +248,12 @@ export default {
projectId: '', projectId: '',
endpointNameTmpl: '{{module.name}}-{{asset.name}}', endpointNameTmpl: '{{module.name}}-{{asset.name}}',
type: 'http', type: 'http',
port: 9100, port: '',
configs: { configs: {
walk: [], walk: [],
snmpCredentialsId: '', snmpCredentialsId: '',
metrics_path: '', metrics_path: '',
port: 9100, port: '',
host: '{{asset.manageIp}}', host: '{{asset.manageIp}}',
scrape_interval: '', scrape_interval: '',
scrape_timeout: '', scrape_timeout: '',
@@ -452,7 +450,7 @@ export default {
this.$get('monitor/project', { pageSize: -1, pageNo: 1 }).then(response => { this.$get('monitor/project', { pageSize: -1, pageNo: 1 }).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.projectList = response.data.list this.projectList = response.data.list
this.getModuleList(this.currentProjectCopy.id) this.getModuleList(this.currentProject.id)
} }
}) })
}, },
@@ -484,7 +482,7 @@ export default {
}, },
changeProject (project) { changeProject (project) {
this.currentModuleCopy = {} this.currentModule = {}
this.endpoint.moduleId = '' this.endpoint.moduleId = ''
this.endpoint.projectId = project.id this.endpoint.projectId = project.id
this.editParamBox.show = false this.editParamBox.show = false
@@ -548,9 +546,9 @@ export default {
save () { save () {
if (this.prevent_opt.save) { return } ; if (this.prevent_opt.save) { return } ;
this.prevent_opt.save = true this.prevent_opt.save = true
this.endpoint.projectId = this.currentProjectCopy.id this.endpoint.projectId = this.currentProject.id
this.endpoint.moduleId = this.currentModuleCopy.id this.endpoint.moduleId = this.currentModule.id
if (this.endpointTableData.length == 0) { if (this.endpointTableData.length === 0) {
this.endpointTouch = true this.endpointTouch = true
this.$refs.addEndpoint.validate() this.$refs.addEndpoint.validate()
return false return false
@@ -616,12 +614,12 @@ export default {
assetId: item.id, assetId: item.id,
assetName: item.name, assetName: item.name,
// asset: item, // asset: item,
type: this.currentModuleCopy.type, type: this.currentModule.type,
projectId: this.currentModuleCopy.projectId, projectId: this.currentModule.projectId,
configs: { ...JSON.parse(this.currentModuleCopy.configs), host: item.manageIp }, configs: { ...JSON.parse(this.currentModule.configs), host: item.manageIp },
moduleId: this.currentModuleCopy.id moduleId: this.currentModule.id
} }
obj.name = this.currentModuleCopy.endpointNameTmpl obj.name = this.currentModule.endpointNameTmpl
obj.configs = JSON.stringify(obj.configs) obj.configs = JSON.stringify(obj.configs)
arr.push(obj) arr.push(obj)
}) })
@@ -673,14 +671,14 @@ export default {
this.optionType = 'add' this.optionType = 'add'
this.object = JSON.parse(JSON.stringify(u)) this.object = JSON.parse(JSON.stringify(u))
this.object.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : [] 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 this.rightBox.show = true
}, },
showRightBox () { showRightBox () {
this.optionType = 'batch' 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.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 this.rightBox.show = true
}, },
editAllEndpoint () { editAllEndpoint () {
@@ -734,32 +732,11 @@ export default {
currentProject: { currentProject: {
immediate: true, immediate: true,
handler (n, o) { handler (n, o) {
if (n) {
this.currentProjectCopy = Object.assign({}, n)
this.endpoint.projectId = n.id
this.getModuleList(n.id)
}
} }
}, },
currentModule: { currentModule: {
immediate: true, immediate: true,
handler (n, o) { 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
// }
} }
} }
} }

13
nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
View File

@@ -318,7 +318,7 @@ export default {
show: true show: true
}, },
{ {
label: this.$t('asset.host'), label: this.$t('asset.manageIp'),
prop: 'manageIp', prop: 'manageIp',
show: true show: true
} }
@@ -430,6 +430,17 @@ export default {
handler (n) { handler (n) {
this.getTableData() this.getTableData()
} }
},
'editData.editType': {
immediate: true,
deep: true,
handler (n) {
if (n !== assetConstants.editTypeData.account) {
this.editData.authProtocol = 0
} else {
this.getTableData()
}
}
} }
} }
} }

2
nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
View File

@@ -2,7 +2,7 @@
<div class="right-box right-box-add-endpoint" v-clickoutside="{obj:endpoint,func:clickOutside}"> <div class="right-box right-box-add-endpoint" v-clickoutside="{obj:endpoint,func:clickOutside}">
<div class="right-box__header"> <div class="right-box__header">
<!-- begin--标题--> <!-- begin--标题-->
<div class="right-box-title">{{$t("overall.batchEndpoint")}}</div> <div class="header__title">{{$t("overall.batchEndpoint")}}</div>
<!-- end--标题--> <!-- end--标题-->
<div class="header__operation"> <div class="header__operation">
<span v-cancel="{obj: endpoint, func: esc}"><i class="nz-icon nz-icon-close"></i></span> <span v-cancel="{obj: endpoint, func: esc}"><i class="nz-icon nz-icon-close"></i></span>

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

@@ -2,16 +2,16 @@
<div class="right-box right-box-module" v-clickoutside="{obj:editEndpoint,func:clickOutside}"> <div class="right-box right-box-module" v-clickoutside="{obj:editEndpoint,func:clickOutside}">
<div class="right-box__header"> <div class="right-box__header">
<!-- begin--标题--> <!-- begin--标题-->
<div class="right-box-title"> <div class="header__title">
<span v-if="optionType === 'edit'"> <span v-if="optionType === 'edit'">
{{ $t("project.module.editEndpoint")}} {{ $t("project.module.editEndpoint")}}
</span> </span>
<span v-if="optionType === 'batch'"> <span v-if="optionType === 'batch'">
{{ $t("project.module.batchEndpoint")}} {{ $t("project.module.batchEndpoint")}}
</span> </span>
<span v-if="optionType === 'add'"> <span v-if="optionType === 'add'">
{{ $t("project.module.createEndpoint")}} {{ $t("project.module.createEndpoint")}}
</span> </span>
</div> </div>
<!-- end--标题--> <!-- end--标题-->
<div class="header__operation"> <div class="header__operation">
@@ -20,40 +20,40 @@
</div> </div>
<!-- begin--表单--> <!-- begin--表单-->
<div class="right-box-form-box right-box__container" ref="scrollbar"> <div ref="scrollbar" class="right-box__container">
<el-form class="right-box-form right-box-form-left" :model="editEndpoint" label-position = "top" label-width="120px" :rules="rules" ref="moduleForm"> <div class="container__form">
<!--name--> <el-form ref="moduleForm" :model="editEndpoint" :rules="rules" label-position = "top" label-width="120px">
<el-form-item :label='$t("project.module.name")' prop="name" label-width="125px" v-if="optionType!=='batch'"> <!--name-->
<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-form-item> <el-input id="module-box-input-name" v-model="editEndpoint.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
<!--project--> </el-form-item>
<el-form-item :label='$t("project.project.projectName")' prop="projectId"> <!--project-->
<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-form-item :label='$t("project.project.projectName")' prop="projectId">
<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-select> <el-option v-for="item in projectList" :id="'module-project-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-form-item> </el-select>
<!--asset--> </el-form-item>
<el-form-item :label='$t("project.module.asset")' prop="asset" label-width="125px"> <!--asset-->
<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-form-item> <el-input id="module-box-input-assetName" v-model="editEndpoint.assetName" :disabled="disabled" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
<!--module--> </el-form-item>
<el-form-item :label='$t("project.module.module")' prop="remark"> <!--module-->
<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-form-item :label='$t("project.module.module")' prop="remark">
<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-select> <el-option v-for="item in moduleList" :id="'module-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-form-item> </el-select>
</el-form-item>
<!--type--> <!--type-->
<el-form-item :label='$t("project.endpoint.type")' prop="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-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 :id="'module-type-'+item.id" v-for="item in typetList" :key="item.value" :label="item.name" :value="item.value"></el-option> <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-select>
</el-form-item> </el-form-item>
<!-- snmp表单 --> <!-- snmp表单 -->
<span class="snmp-form" v-if="editEndpoint.type && editEndpoint.type == 'snmp'"> <span v-if="editEndpoint.type && editEndpoint.type == 'snmp'" class="snmp-form">
<div class="right-box-sub-title">SNMP settings <div class="right-box-sub-title">SNMP settings</div>
</div>
<div class="right-box-line"></div> <div class="right-box-line"></div>
<el-row> <el-row>
@@ -84,163 +84,164 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</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 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-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-select>
</el-form-item> </el-form-item>
</span> </span>
<!--Enpoint template--> <!--Enpoint template-->
<div class="right-box-sub-title">{{ $t("overall.endpointTemplate") }} <div class="right-box-sub-title">{{ $t("overall.endpointTemplate") }}
<el-tooltip placement="top" effect="light"> <el-tooltip effect="light" placement="top">
<div slot="content"> <div slot="content">
{{$t('project.module.tip.defaultEndpointSet')}} {{$t('project.module.tip.defaultEndpointSet')}}
<div></div> <div></div>
{{$t('project.module.tip.relation')}} {{$t('project.module.tip.relation')}}
</div>
<i class="nz-icon nz-icon-info-normal"></i>
</el-tooltip>
</div>
<div class="right-box-line"></div>
<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>
<!--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>
<!--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-form-item>
<transition name="el-zoom-in-top">
<div v-show="showAllBasicOption" >
<!-- &lt;!&ndash;name pattern&ndash;&gt;-->
<!-- <el-form-item :label='$t("project.endpoint.pattern")' prop="pattern" class="half-form-item">-->
<!-- &lt;!&ndash; <el-input placeholder="" v-model=""></el-input>&ndash;&gt;-->
<!-- <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">
<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">
<template slot="append">s</template>
</el-input>
</el-form-item>
</div> </div>
</transition> <i class="nz-icon nz-icon-info-normal"></i>
</el-tooltip>
</div>
<div class="right-box-line"></div>
<div style="text-align: center"> <el-tabs v-model="activeName">
<el-tab-pane label="Basic" name="Basic">
<!--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.metrics_path" placeholder="" size="small"></el-input>
</el-form-item>
<!--port-->
<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 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" >
<!-- &lt;!&ndash;name pattern&ndash;&gt;-->
<!-- <el-form-item :label='$t("project.endpoint.pattern")' prop="pattern" class="half-form-item">-->
<!-- &lt;!&ndash; <el-input placeholder="" v-model=""></el-input>&ndash;&gt;-->
<!-- <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")' 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")' 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>
</div>
</transition>
<div style="text-align: center">
<span @click="showAllBasicOption=!showAllBasicOption" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" style="border: none"> <span @click="showAllBasicOption=!showAllBasicOption" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" style="border: none">
{{$t('overall.moreOption')}} {{$t('overall.moreOption')}}
<i class="nz-icon nz-icon-arrow-down need-rotate" :class="showAllBasicOption?'is-active':''" ></i> <i class="nz-icon nz-icon-arrow-down need-rotate" :class="showAllBasicOption?'is-active':''" ></i>
</span> </span>
</div>
</el-tab-pane>
<el-tab-pane label="Parameter" name="Parameter">
<div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;" id="module-box-params">
<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>
<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>-->
<vue-tags-input
v-model="item.tags"
:tags="item.value"
:maxlength="32"
@tags-changed="(newTags)=>{tagsChange(newTags, index)}"
:placeholder="'add parameter'"
/>
</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>
</div> </div>
</div> </el-tab-pane>
<div style="text-align: center"> <el-tab-pane label="Parameter" name="Parameter">
<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 :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 :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"
:maxlength="32"
:placeholder="'add parameter'"
:tags="item.value"
@tags-changed="(newTags)=>{tagsChange(newTags, index)}"
/>
</el-form-item>
<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">
<span id="module-add-param" type="button" @click="addParam" class="right-box-form-add module-add-label"> <span id="module-add-param" type="button" @click="addParam" class="right-box-form-add module-add-label">
<span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span> <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
</span> </span>
</div>
</el-tab-pane>
<el-tab-pane label="Labels" name="Labels">
<div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;" id="module-box-labels">
<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>
<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>
<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>
</div> </div>
</div> </el-tab-pane>
<div style="text-align: center"> <el-tab-pane label="Labels" name="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 :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 :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 :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">
<span id="module-add-label" type="button" @click="addLabel" class="right-box-form-add module-add-label"> <span id="module-add-label" type="button" @click="addLabel" class="right-box-form-add module-add-label">
<span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span> <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
</span> </span>
</div> </div>
</el-tab-pane> </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--> <!--authtype-->
<el-form-item :label='$t("project.endpoint.type")' prop="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-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 :id="'module-type-'+item.id" v-for="item in authTypeList" :key="item.value" :label="item.name" :value="item.value"></el-option> <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-select>
</el-form-item> </el-form-item>
<!--authtype 1--> <!--authtype 1-->
<el-form-item :label='$t("project.endpoint.username")' prop="authtype" v-if="authType === 1" class="half-form-item"> <el-form-item v-if="authType === 1" :label='$t("project.endpoint.username")' class="half-form-item" prop="authtype">
<el-input placeholder='' v-model.number="editEndpoint.configs.basic_auth.username" size="small" id="module-box-input-uername"></el-input> <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>
<el-form-item :label='$t("project.endpoint.pin")' prop="authtype" v-if="authType === 1" class="half-form-item"> <el-form-item v-if="authType === 1" :label='$t("project.endpoint.pin")' class="half-form-item" prop="authtype">
<el-input placeholder='' v-model.number="editEndpoint.configs.basic_auth.pin" size="small" id="module-box-input-password"></el-input> <el-input id="module-box-input-password" v-model.number="editEndpoint.configs.basic_auth.pin" placeholder='' size="small"></el-input>
</el-form-item> </el-form-item>
<!--authtype 2--> <!--authtype 2-->
<el-form-item :label='$t("project.endpoint.bearer_token")' prop="authtype" v-if="authType === 2"> <el-form-item v-if="authType === 2" :label='$t("project.endpoint.bearer_token")' prop="authtype">
<el-input placeholder='' v-model.number="editEndpoint.configs.bearer_token" size="small" id="module-box-input-bearer_token"></el-input> <el-input id="module-box-input-bearer_token" v-model.number="editEndpoint.configs.bearer_token" placeholder='' size="small"></el-input>
</el-form-item> </el-form-item>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<div class="configs-copy-value"> <div class="configs-copy-value">
<span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span> <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span>
<pre style="overflow-y: auto;height:100%">{{configsCopyValue}}</pre> <pre style="overflow-y: auto;height:100%">{{configsCopyValue}}</pre>
</div> </div>
</el-form> </el-form>
</div>
</div> </div>
<!--底部按钮--> <!--底部按钮-->