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

feat： 添加批量新增的页面

Browse Source
This commit is contained in:
zhangyu
2021-08-04 16:55:11 +08:00
parent b64d242458
commit 6dd7c9c279
12 changed files with 574 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/common/ChartDiagram/diagram.vue
View File

@@ -21,7 +21,7 @@
<el-collapse-item :title="item.group" :name="item.group">
<template slot="title">
<div style="display: flex;width: 100%;">
<i class="nz-icon nz-icon-caret-right"></i> <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click="tooltipDeleteTitle(item)"></i>
<i class="nz-icon nz-icon-arrow-right"></i> <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click="tooltipDeleteTitle(item)"></i>
</div>
</template>
<div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons" :title="btn.data.text">

5
nezha-fronted/src/components/common/language/cn.js
View File

@@ -76,6 +76,7 @@ const cn = {
createProject: '新增系统',
createEndpoint: '新增 Endpoint',
batchEndpoint: '批量修改Endpoint',
batchAddEndpoint: '批量新增 Endpoint',
createAsset: '新增资产',
createAlertRule: '新增告警规则',
createAlertSilence: '新增告警规则',
@@ -144,7 +145,8 @@ const cn = {
tempPrev: '模板预览',
silenceAlert: '告警静默',
quickSilent: '快速静默',
configEndpoint: '配置'
configEndpoint: '配置',
generate: '生产'
},
setup: {
step0: '欢迎',
@@ -1298,6 +1300,7 @@ const cn = {
editEndpoint: '修改 Endpoint',
createEndpoint: '新增 Endpoint',
batchEndpoint: '批量 Endpoint',
batchAddEndpoint: '批量新增 Endpoint',
endpointName: 'Endpoint name',
name: '名称'
},

7
nezha-fronted/src/components/common/language/en.js
View File

@@ -82,6 +82,7 @@ const en = {
createProject: 'New project',
createEndpoint: 'New endpoint',
batchEndpoint: 'Batch modify endpoint',
batchAddEndpoint: 'Batch new endpoint',
createAsset: 'New asset',
createAlertRule: 'New alert rule',
createAlertSilence: 'New alert silence',
@@ -149,7 +150,8 @@ const en = {
tempPrev: 'Template preview',
silenceAlert: 'silence alert',
quickSilent: 'Quick silent',
configEndpoint: 'Config'
configEndpoint: 'Config',
generate: 'Generate'
},
pageSize: '/page',
setup: {
@@ -1297,7 +1299,8 @@ const en = {
asset: 'Asset',
editEndpoint: 'Edit endpoint',
createEndpoint: 'New endpoint',
batchEndpoint: 'Batch Endpoint',
batchEndpoint: 'Batch endpoint',
batchAddEndpoint: 'Batch new endpoint',
endpointName: 'Endpoint',
name: 'Name',
tip: {

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

@@ -134,6 +134,7 @@ export default {
<style lang="scss">
.select-walk-tree {
height: 350px;
overflow-y: auto;
}
.select-walk-tree .el-tree-node__content {
height: 34px;
@@ -181,4 +182,5 @@ export default {
top: 50%;
transform: translate(10px, -50%);
}
</style>

3
nezha-fronted/src/components/common/project/L5/CanvasProps.vue
View File

@@ -2495,4 +2495,7 @@ export default {
/deep/ .metric-selector-title {
background: #fff !important;
}
/deep/ .el-collapse-item__arrow.el-icon-arrow-right{
display: inline-block !important;
}
</style>

9
nezha-fronted/src/components/common/project/topology.scss
View File

@@ -1,11 +1,14 @@
/deep/ .el-collapse-item .is-active .nz-icon-caret-right{
/deep/ .el-collapse-item__arrow.el-icon-arrow-right{
display: none !important;
}
/deep/ .el-collapse-item .is-active .nz-icon-arrow-right{
transform: rotate(90deg);
color: #FA901C;
}
/deep/ .el-collapse-item .title-delete{
display: none;
}
/deep/ .el-collapse-item .nz-icon-caret-right{
/deep/ .el-collapse-item .nz-icon-arrow-right{
transition: transform .3s;
color: #BEBEBE;
margin-right: 5px;
@@ -14,7 +17,7 @@
.el-collapse-item__header{
color: #FA901C;
}
.nz-icon-caret-right{
.nz-icon-arrow-right{
color: #FA901C;
}
.title-delete{

2
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -21,7 +21,7 @@
<el-collapse-item :title="item.group" :name="item.group">
<template slot="title">
<div style="display: flex;width: 100%;">
<i class="nz-icon nz-icon-caret-right"></i> <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click="tooltipDeleteTitle(item)"></i>
<i class="nz-icon nz-icon-arrow-right"></i> <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click="tooltipDeleteTitle(item)"></i>
</div>
</template>
<div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons">

426
nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue Normal file
View File

@@ -0,0 +1,426 @@
<template>
<div class="right-box right-box-modify-endpoint" v-clickoutside="{obj:endpoint,func:clickOutside}">
<div class="right-box__header">
<!-- begin--标题-->
<div class="header__title">{{$t("overall.batchAddEndpoint")}}</div>
<!-- end--标题-->
<div class="header__operation">
<span v-cancel="{obj: endpoint, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
</div>
</div>
<!-- begin--表单-->
<div class="right-box-form-box right-box__container" style="overflow: hidden;padding-left: 20px;margin-top: 0">
<div class="container__form">
<el-form class="right-box-form" label-position = "top" ref="addEndpoint" :model="endpoint" :rules="rules">
<el-form-item :label="$t('project.module.module')" prop="ChartTemplate">
<v-selectpage
:data="moduleList"
:tb-columns="ChartSearchShowFields"
:params="{
varType: 2, panelId: 0,
returnChildren:0,groupId:0,
}"
:multiple="true"
:language="language"
title="ChartSearch"
key-field="id"
show-field="name"
v-model="moduleIds"
class="form-control"
:result-format="resultFormat"
></v-selectpage>
</el-form-item>
<el-form-item :label="$t('asset.asset')" prop="ChartTemplate">
<v-selectpage
:data="assetDataList"
:tb-columns="ChartSearchShowFields"
:params="{
varType: 2, panelId: 0,
returnChildren:0,groupId:0,
}"
:multiple="true"
:language="language"
title="ChartSearch"
key-field="id"
show-field="name"
v-model="assetIds"
class="form-control"
:result-format="resultFormat"
></v-selectpage>
</el-form-item>
</el-form>
<el-table
:data="tableData"
:height="400"
v-if="tableData.length"
style="width:calc(100% - 55px)"
border>
<el-table-column
v-for="(item, index) in endpointTableTitle"
v-if="item.show"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:min-width="`${item.minWidth}`"
:prop="item.prop"
:resizable="true"
:sort-orders="['ascending', 'descending']"
:width="`${item.width}`"
class="data-column"
>
<template slot="header">
<span>{{item.label}}</span>
<div class="col-resize-area"></div>
</template>
<template slot-scope="scope" :column="item">
<template v-if="item.prop === 'name'">
{{scope.row[item.prop]}}
</template>
<template v-else-if="item.prop === 'asset'">
{{scope.row.asset?scope.row.asset.name : '' }}
</template>
<template v-else-if="item.prop === 'project'">
{{scope.row.project?scope.row.project.name : '' }}
</template>
<template v-else-if="item.prop === 'module'">
{{scope.row.module?scope.row.module.name : '' }}
</template>
<template v-else-if="item.prop == 'configs'">
<el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'">
<span class="configs-endpoint">{ ... }</span>
<div class="endpointConfigsTips" slot="content">
<pre >{{JSON.stringify(scope.row[item.prop],null,2)}}</pre>
</div>
</el-tooltip>
</template>
<template v-else>1</template>
</template>
</el-table-column>
<el-table-column
:resizable="false"
:width="80"
fixed="right">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<button class="table-operation-item" v-has="'model_edit'" @click="del(scope.row, scope.$index)"><i class="nz-icon nz-icon-minus"></i></button>
<button class="table-operation-item" @click="edit(scope.row, scope.$index)"><i class="nz-icon nz-icon-edit"></i></button>
</div>
</el-table-column>
</el-table>
</div>
</div>
<!--底部按钮-->
<div class="right-box__footer">
<button v-cancel="{obj:endpoint,func:esc}" id="ep-esc" class="footer__btn footer__btn--light">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click="generate" id="ep-generate" class="footer__btn footer__btn--light">
<span>{{$t('overall.generate')}}</span>
</button>
<button @click="save" class="footer__btn" id="ep-add">
<span>{{$t('overall.save')}}</span>
</button>
</div>
<!-- edit endpoint-->
<transition name="right-box">
<edit-endpoint-box-new v-if="rightBox.show" :module="object" @close="closeRightBox" :disabled="true" :type="'add'" :optionType="optionType"></edit-endpoint-box-new>
</transition>
</div>
</template>
<script>
import editEndpointBoxNew from './editEndpointBoxNew'
export default {
name: 'batchAddEndpointBox',
props: {
currentProject: Object,
currentModule: Object,
selectEndpointList: Array
},
components: {
'edit-endpoint-box-new': editEndpointBoxNew
},
data () {
return {
rules: {
projectId: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
],
moduleId: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
]
},
moduleIds: '',
assetIds: '',
assetDataList: [],
moduleList: [],
language: localStorage.getItem('nz-language'),
ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
{ title: 'ID', data: 'id' },
{ title: this.$t('config.model.titleName'), data: 'name' },
{ title: this.$t('overall.remark'), data: 'remark' }
],
object: {},
vendorAndModelOptionData: [],
paramBorderColor: '#dcdfe6',
endpointTouch: false,
endpoint: { projectId: '', moduleId: '', endpointList: [] },
currentModuleCopy: {},
currentProjectCopy: { id: '' },
tempParamObj: [],
tempLabelModule: [],
inputKeyErr: [],
tempEndpoint: {},
tempEndpoint2: {},
assetLoading: true,
rightBox: { show: false, title: this.$t('project.endpoint.createEndpoint'), isEdit: false },
optionType: 'add',
tableData: [],
endpointTableTitle: [ // 原始table列
{
label: this.$t('project.endpoint.name'),
prop: 'name',
show: true
},
{
label: this.$t('overall.project'),
prop: 'project',
show: true
},
{
label: this.$t('project.module.module'),
prop: 'module',
show: true
},
{
label: this.$t('project.endpoint.asset'),
prop: 'asset',
show: true
},
{
label: this.$t('project.endpoint.configs'),
prop: 'configs',
show: true
}
]
}
},
methods: {
clickOutside () {
this.esc(false)
},
/* 关闭弹框 */
esc (refresh) {
this.prevent_opt.save = false
this.$emit('close', refresh)
},
// 获取endpoint弹框中module下拉框数据
getModuleList () {
this.$get('monitor/module', { projectIds: '', pageSize: -1 }).then(response => {
if (response.code === 200) {
this.moduleList = response.data.list
}
})
},
// 获取endpoint弹框中的asset子弹框里asset列表数据
getAssetList () {
this.assetLoading = true
const params = {
pageSize: -1
}
this.$get('asset/asset', params).then(response => {
if (response.code === 200) {
this.assetDataList = response.data.list
}
}).finally(() => {
setTimeout(() => {
this.assetLoading = false
}, 200)
})
},
generate () {
if (!this.assetIds || !this.moduleIds) {
this.$message.error('Please select module or asset')
}
const res = {
code: 200,
msg: 'success',
data: {
list: [{
name: 'module+asset',
module: {
id: 2,
name: 'aaa'
},
project: {
id: 5,
name: 'aaa'
},
asset: {
id: 1,
name: 'aaa'
},
chartIds: '688355',
configs: [
{ type: 'metrics', config: { protocol: 'HTTP', scrape_interval: 30, scrape_timeout: 10, host: '192.168.40.1', port: 9090, metrics_path: '/metric', params: { module: ['cpu', 'memory'] }, basic_auth: { username: 'zhangsan', password: 'lisi' }, bearer_token: 'yiduanwenzi', labels: { datacenter: 'bj', module: 'mysql' } }, enable: 1 },
{
type: 'logs',
config: [
{
type: 'file',
fileName: '/var/logs/mysqld.log',
labels: { datacenter: 'bj', module: 'mysql' },
pipeline: [
{ type: 'regex', expression: 'ad?!*', source: '' },
{ type: 'json', expressions: [{ abc: 'abc', level: 'config' }], source: '' },
{ type: 'template', template: 'ad?!*', source: '' },
{ type: 'timestamp', format: 'RFC822Z', source: '' },
{ type: 'labels', labels: [{ abc: 'abc', level: 'config' }] },
{ type: 'output', source: 'content' }
]
},
{ type: 'syslog', listenAddress: '0.0.0.0:9100', appName: 'sapp' },
{ type: 'journal', unit: 'nzagent.service' }
],
enable: 1
}]
}
]
}
}
this.tableData = res.data.list
// this.$post('/monitor/endpoint/render', { moduleIds: this.moduleIds, assetIds: this.assetIds }).then(res => {
// console.log(res)
// this.tableData = res.data.list
// })
},
// 保存endpoint
save () {
if (this.prevent_opt.save) { return } ;
this.prevent_opt.save = true
// 对endpointList进行处理，避免携带过多无用数据
const endpointList = []
this.endpointTableData.forEach((item, index) => {
const endpoint = {
moduleId: item.moduleId,
assetId: item.assetId,
name: item.name,
configs: JSON.stringify(item.configs),
id: item.id
}
endpointList.push(endpoint)
})
this.$refs.addEndpoint.validate((valid) => {
if (valid) {
this.$put('monitor/endpoint', endpointList).then(response => {
this.prevent_opt.save = false
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
} else {
this.$message.error(response.msg)
}
})
} else {
this.prevent_opt.save = false
return false
}
})
},
resultFormat (resp) {
if (resp && resp.data) {
const assetData = {}
assetData.list = resp.data.list
assetData.totalRow = resp.data.total
return assetData
}
},
closeRightBox (isEdit, endpoint, isAll) {
this.rightBox.show = false
if (!isEdit) { return }
if (isAll) {
Object.keys(this.blankEndpoint).forEach(key => {
this.blankEndpoint[key] = endpoint[key]
})
} else {
this.endpointTableData.forEach((item, index) => {
if (item.id === endpoint.id) {
this.endpointTableData[index] = { ...endpoint }
}
})
this.endpointTableData = [...this.endpointTableData]
}
},
del () {
},
edit (row) {
this.object = row
// this.object.configs = JSON.parse(this.object.configs)
this.object.projectId = this.object.project.id
this.object.moduleId = this.object.module.id
this.object.assetName = this.object.asset.name
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.paramObj = []
this.object.labelModule = []
this.object.configs[1].config.forEach(item => {
item.labelModule = []
if (JSON.stringify(item.labels) !== '{}' && item.labels) {
Object.keys(item.labels).forEach(key => {
item.labelModule.push({ key, value: item.labels[key] })
})
} else {
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] })
})
} else {
labelsArr.push({ key: '', value: '' })
}
pipeline.labels = labelsArr
}
})
if (!item.pipeline) {
item.pipeline = []
}
})
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 {
this.object.labelModule.push({ key: '', value: '' })
}
if (JSON.stringify(this.object.configs[0].config.params) !== '{}' && this.object.configs[0].config.params) {
Object.keys(this.object.configs[0].config.params).forEach(key => {
this.object.paramObj.push({ key, value: this.object.configs[0].config.params[key] })
})
} else {
this.object.paramObj.push({ key: '', value: [] })
}
if (!this.object.chartIds) {
this.object.chartIds = ''
} else {
// this.object.chartIds = this.object.chartIds.split(',')
}
this.rightBox.show = true
this.rightBox.show = true
}
},
created () {
this.getModuleList()
this.getAssetList()
},
watch: {
}
}
</script>

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

@@ -30,7 +30,7 @@
</el-select>
</el-form-item>
<!--module-->
<el-form-item :label='$t("project.module.module")' prop="remark">
<el-form-item :label='$t("project.module.module")' prop="moduleId">
<el-select @change="renderEndpoint" 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>
@@ -48,52 +48,6 @@
<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表单 -->
<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>
<el-col :span="6">
<div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
</el-col>
<el-col :span="24">
<el-form-item prop="walk">
<select-walk ref="selectWalk" :walkData="walkData" :expandedWalk="expandedWalkData" :placement="'bottom-start'" @selectWalk="selectWalk" :currentWalk="editEndpoint.walk">
<template v-slot:trigger>
<div class="el-cascader">
<div class="el-input">
<input type="text" readonly="readonly" autocomplete="off" class="el-input__inner" aria-expanded="false">
</div>
<div class="el-cascader__tags">
<div ref="walkScrollbar" style="height: 100%; overflow: auto;">
<span v-for="(item, index) in editEndpoint.walk" :key="index" class="el-tag el-tag--info el-tag--small el-tag--light">
<span v-html="mibName(item)"></span>
<div class="walk-close-box" @click.stop="removeWalk(item)">
<i class="el-tag__close nz-icon nz-icon-close walk-close"></i>
</div>
</span>
</div>
</div>
</div>
</template>
</select-walk>
</el-form-item>
</el-col>
</el-row>
<!--credentials-->
<el-form-item :label='$t("project.endpoint.credentials")' prop="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>
</span>
<!--module-->
<el-form-item :label='$t("project.endpoint.state")' prop="remark">
<el-select id="module-box-input-state" v-model="editEndpoint.enabled" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small">
<el-option v-for="item in endpointStateList" :id="'module-'+item.value" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select>
</el-form-item>
<!--Enpoint template-->
<div class="right-box-sub-title">{{ $t("overall.configEndpoint") }}
<!-- <el-tooltip effect="light" placement="top">-->
@@ -123,7 +77,6 @@
key-field="id"
show-field="name"
title="ChartSearch"
@values="(data) => {editEndpoint.chartIds = data.map(d => d.id).join(',')}"
></v-selectpage>
</el-form-item>
<div class="endpoint-title">
@@ -158,10 +111,10 @@
<el-input id="module-box-input-host" v-model="editEndpoint.configs[0].config.host" placeholder="" size="small"></el-input>
</el-form-item>
<!-- snmp表单 -->
<span v-if="editEndpoint.configs[0].config.protocol && editEndpoint.configs[0].config.protocol == 'snmp'" class="snmp-form">
<div v-if="editEndpoint.configs[0].config.protocol && editEndpoint.configs[0].config.protocol == 'snmp'">
<el-row>
<el-col :span="6">
<div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
<div class="sub-label sub-label-required" style="padding-left: 0">{{$t('project.module.walk')}}</div>
</el-col>
<el-col :span="24">
<el-form-item prop="configs.0.config.walk" :rules="[{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]">
@@ -193,7 +146,7 @@
<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-form-item>
</span>
</div>
<transition name="el-zoom-in-top">
<div v-show="showAllBasicOption" >
<!--scrape_interval-->
@@ -301,42 +254,42 @@
<el-tab-pane label="Basic" name="Basic">
<!--type-->
<el-form-item :label='$t("project.endpoint.type")' class="half-form-item">
<el-select id="module-box-input-type" v-model="item.basic.type" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
<el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
<el-option v-for="item in logsBasicList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item
v-if='item.basic.type === "file"'
:label='item.basic.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.basic.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
:prop="'configs.1.config.'+ index +'.basic.fileName'"
v-if='item.type === "file"'
:label='item.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
:prop="'configs.1.config.'+ index +'fileName'"
:rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
>
<el-input v-if='item.basic.type === "file"' v-model="item.basic.fileName" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
<el-input v-if='item.type === "file"' v-model="item.fileName" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
</el-form-item>
<el-form-item
v-if='item.basic.type === "journal"'
:label='item.basic.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.basic.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
:prop="'configs.1.config.'+ index +'.basic.unit'"
v-if='item.type === "journal"'
:label='item.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
:prop="'configs.1.config.'+ index +'unit'"
:rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
>
<el-input v-if='item.basic.type === "journal"' v-model="item.basic.unit" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
<el-input v-if='item.type === "journal"' v-model="item.unit" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
</el-form-item>
<el-form-item
v-if='item.basic.type === "syslog"'
:label='item.basic.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.basic.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
:prop="'configs.1.config.'+ index +'.basic.listenAddress'"
v-if='item.type === "syslog"'
:label='item.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
:prop="'configs.1.config.'+ index +'listenAddress'"
:rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
>
<el-input v-if='item.basic.type === "syslog"' v-model="item.basic.listenAddress" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
<el-input v-if='item.type === "syslog"' v-model="item.listenAddress" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
</el-form-item>
<el-form-item
v-if="item.basic.type === 'syslog'"
v-if="item.type === 'syslog'"
:label=' $t("project.endpoint.basicAppName")'
class="half-form-item"
:prop="'configs.1.config.'+ index +'.basic.appName'"
:prop="'configs.1.config.'+ index +'appName'"
:rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
>
<el-input v-model="item.basic.appName" :id="'module-box-basic-appName' +index" placeholder='' size="small"></el-input>
<el-input v-model="item.appName" :id="'module-box-basic-appName' +index" placeholder='' size="small"></el-input>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="Labels" name="Labels">
@@ -524,6 +477,7 @@ import pipelineSelect from './pipelineSelect'
import selectWalk from '../popBox/selectWalk'
import editRigthBox from '../mixin/editRigthBox'
import VueTagsInput from '@johmun/vue-tags-input'
import project from "@/components/page/monitor/project/project";
export default {
name: 'editEndpointBoxNew',
@@ -555,6 +509,7 @@ export default {
walkData: [],
chartTempList: [],
activeName: 'Basic',
activeNameLogs: ['Basic'],
expandedWalkData: [],
language: localStorage.getItem('nz-language'),
radio: 'password',
@@ -572,7 +527,8 @@ export default {
showAllBasicOption: false,
rules: {
name: [
{ validator: this.optionType === 'batch' ? '' : noSpecialChar, trigger: 'change' }
{ validator: this.optionType === 'batch' ? '' : noSpecialChar, trigger: 'change' },
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
],
assetId: [
{ required: !(this.optionType === 'batch'), message: this.$t('validate.required'), trigger: 'change' }
@@ -675,10 +631,10 @@ export default {
methods: {
port: port,
selectWalk (walk) {
if (this.editEndpoint.walk.indexOf(walk) != -1) {
this.editEndpoint.walk.splice(this.editEndpoint.walk.indexOf(walk), 1)
if (this.editEndpoint.configs[0].config.walk.indexOf(walk) != -1) {
this.editEndpoint.configs[0].config.walk.splice(this.editEndpoint.configs[0].config.walk.indexOf(walk), 1)
} else {
this.editEndpoint.walk.push(walk)
this.editEndpoint.configs[0].config.walk.push(walk)
}
},
// 从mibData里取得oid对应的mib名称
@@ -725,7 +681,7 @@ export default {
},
removeWalk (walk) {
this.editEndpoint.walk.splice(this.editEndpoint.walk.indexOf(walk), 1)
this.editEndpoint.configs[0].config.walk.splice(this.editEndpoint.configs[0].config.walk.indexOf(walk), 1)
this.$refs.selectWalk.$refs.walkTree.setChecked(walk, false)
},
@@ -886,23 +842,22 @@ export default {
}
},
logsBasicTypeChange (i) {
const type = this.editEndpoint.configs[1].config[i].basic.type
const type = this.editEndpoint.configs[1].config[i].type
if (type === 'file') {
this.editEndpoint.configs[1].config[i].basic = {
type,
fileName: ''
}
this.editModule.configs[1].config[i].fileName = ''
delete this.editModule.configs[1].config[i].unit
delete this.editModule.configs[1].config[i].appName
delete this.editModule.configs[1].config[i].listenAddress
} else if (type === 'journal') {
this.editEndpoint.configs[1].config[i].basic = {
type,
unit: ''
}
delete this.editModule.configs[1].config[i].fileName
this.editModule.configs[1].config[i].unit = ''
delete this.editModule.configs[1].config[i].appName
delete this.editModule.configs[1].config[i].listenAddress
} else if (type === 'syslog') {
this.editEndpoint.configs[1].config[i].basic = {
type,
appName: '',
listenAddress: ''
}
delete this.editModule.configs[1].config[i].fileName
delete this.editModule.configs[1].config[i].unit
this.editModule.configs[1].config[i].appName = ''
this.editModule.configs[1].config[i].listenAddress = ''
}
},
/* 获取project列表 */
@@ -915,6 +870,10 @@ export default {
},
changeProject () {
this.getModuleList()
if (this.editEndpoint.moduleId) {
this.editEndpoint.moduleId = ''
this.$refs.moduleForm.clearValidate('moduleId')
}
},
/* 获取module列表 */
getModuleList () {
@@ -1142,10 +1101,18 @@ export default {
if (this.disabled) {
return
}
if (this.editEndpoint.moduleId && this.editEndpoint.assetId && (JSON.stringify(this.editEndpoint.configs) === JSON.stringify(this.blankObject.configs))) {
if (this.editEndpoint.moduleId && this.editEndpoint.assetId) {
this.$post('/monitor/endpoint/render', { moduleIds: this.editEndpoint.moduleId, assetIds: this.editEndpoint.assetId }).then(res => {
console.log(res)
if (JSON.stringify(this.editEndpoint.configs) === JSON.stringify(this.blankObject.configs)) {
this.editEndpoint.configs = res.data.list[0].configs
}
if (!this.editEndpoint.name) {
this.editEndpoint.name = res.data.list[0].name
}
if (!this.editEndpoint.chartIds) {
this.editEndpoint.chartIds = res.data.list[0].chartIds
}
})
}
}
@@ -1174,6 +1141,7 @@ export default {
handler (n, o) {
this.isEdit = true
this.editEndpoint = JSON.parse(JSON.stringify(n))
this.getModuleList()
this.activeName = 'Basic'
this.activeNameLogs = this.editEndpoint.configs[1].config.map(() => 'Basic')
this.logsCopyValue = this.editEndpoint.configs[1].config.map(() => '')
@@ -1186,7 +1154,7 @@ export default {
}
if (n.type && n.type.toLowerCase() == 'snmp') {
this.$refs.selectWalk.show()
for (let i = 0; i < this.editEndpoint.walk.length; i++) {
for (let i = 0; i < this.editEndpoint.configs[0].config.walk.length; i++) {
this.expandedWalkData.push(this.editEndpoint.configs[0].config.walk[i].substring(0, this.editEndpoint.configs[0].config.walk[i].lastIndexOf('.')))
}
}
@@ -1398,6 +1366,8 @@ export default {
.nz-icon-arrow-down{
display: inline-block;
transition: transform .3s;
color: #BDBDBD;
font-size: 12px;
}
.nz-icon-arrow-down.is-active{
transform: rotate(

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

@@ -111,10 +111,10 @@
<el-input id="module-box-input-host" v-model="editModule.configs[0].config.host" placeholder="" size="small"></el-input>
</el-form-item>
<!-- snmp表单 -->
<span v-if="editModule.configs[0].config.protocol && editModule.configs[0].config.protocol == 'snmp'" class="snmp-form">
<div v-if="editModule.configs[0].config.protocol && editModule.configs[0].config.protocol == 'snmp'" class="">
<el-row>
<el-col :span="6">
<div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
<div class="sub-label sub-label-required" style="padding-left: 0">{{$t('project.module.walk')}}</div>
</el-col>
<el-col :span="24">
<el-form-item prop="configs.0.config.walk" :rules="[{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]">
@@ -146,7 +146,7 @@
<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-form-item>
</span>
</div>
<transition name="el-zoom-in-top">
<div v-show="showAllBasicOption" >
<!--scrape_interval-->
@@ -254,42 +254,42 @@
<el-tab-pane label="Basic" name="Basic">
<!--type-->
<el-form-item :label='$t("project.endpoint.type")' class="half-form-item">
<el-select id="module-box-input-type" v-model="item.basic.type" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
<el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
<el-option v-for="item in logsBasicList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item
v-if='item.basic.type === "file"'
:label='item.basic.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.basic.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
:prop="'configs.1.config.'+ index +'.basic.fileName'"
v-if='item.type === "file"'
:label='item.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
:prop="'configs.1.config.'+ index +'.fileName'"
:rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
>
<el-input v-if='item.basic.type === "file"' v-model="item.basic.fileName" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
<el-input v-if='item.type === "file"' v-model="item.fileName" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
</el-form-item>
<el-form-item
v-if='item.basic.type === "journal"'
:label='item.basic.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.basic.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
:prop="'configs.1.config.'+ index +'.basic.unit'"
v-if='item.type === "journal"'
:label='item.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
:prop="'configs.1.config.'+ index +'.unit'"
:rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
>
<el-input v-if='item.basic.type === "journal"' v-model="item.basic.unit" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
<el-input v-if='item.type === "journal"' v-model="item.unit" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
</el-form-item>
<el-form-item
v-if='item.basic.type === "syslog"'
:label='item.basic.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.basic.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
:prop="'configs.1.config.'+ index +'.basic.listenAddress'"
v-if='item.type === "syslog"'
:label='item.type === "file" ? $t("project.endpoint.basicTypeFile"):( item.type === "journal" ? $t("project.endpoint.basicTypeJournal") : $t("project.endpoint.basicTypeSyslog"))' class="half-form-item"
:prop="'configs.1.config.'+ index +'.listenAddress'"
:rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
>
<el-input v-if='item.basic.type === "syslog"' v-model="item.basic.listenAddress" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
<el-input v-if='item.type === "syslog"' v-model="item.listenAddress" :id="'module-box-basic-value' +index" placeholder='' size="small"></el-input>
</el-form-item>
<el-form-item
v-if="item.basic.type === 'syslog'"
v-if="item.type === 'syslog'"
:label=' $t("project.endpoint.basicAppName")'
class="half-form-item"
:prop="'configs.1.config.'+ index +'.basic.appName'"
:prop="'configs.1.config.'+ index +'.appName'"
:rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
>
<el-input v-model="item.basic.appName" :id="'module-box-basic-appName' +index" placeholder='' size="small"></el-input>
<el-input v-model="item.appName" :id="'module-box-basic-appName' +index" placeholder='' size="small"></el-input>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="Labels" name="Labels">
@@ -622,10 +622,10 @@ export default {
methods: {
port: port,
selectWalk (walk) {
if (this.editModule.walk.indexOf(walk) != -1) {
this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1)
if (this.editModule.configs[0].config.walk.indexOf(walk) != -1) {
this.editModule.configs[0].config.walk.splice(this.editModule.configs[0].config.walk.indexOf(walk), 1)
} else {
this.editModule.walk.push(walk)
this.editModule.configs[0].config.walk.push(walk)
}
},
// 从mibData里取得oid对应的mib名称
@@ -672,7 +672,7 @@ export default {
},
removeWalk (walk) {
this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1)
this.editModule.configs[0].config.walk.splice(this.editModule.configs[0].config.walk.indexOf(walk), 1)
this.$refs.selectWalk.$refs.walkTree.setChecked(walk, false)
},
@@ -915,10 +915,8 @@ export default {
this.activeNameLogs.push('Basic')
this.logsCopyValue.push('')
this.editModule.configs[1].config.push({
basic: {
type: 'file',
fileName: ''
},
fileName: '',
labels: '',
labelModule: [{ key: '', value: '' }],
pipeline: []
@@ -930,23 +928,22 @@ export default {
}
},
logsBasicTypeChange (i) {
const type = this.editModule.configs[1].config[i].basic.type
const type = this.editModule.configs[1].config[i].type
if (type === 'file') {
this.editModule.configs[1].config[i].basic = {
type,
fileName: ''
}
this.editModule.configs[1].config[i].fileName = ''
delete this.editModule.configs[1].config[i].unit
delete this.editModule.configs[1].config[i].appName
delete this.editModule.configs[1].config[i].listenAddress
} else if (type === 'journal') {
this.editModule.configs[1].config[i].basic = {
type,
unit: ''
}
delete this.editModule.configs[1].config[i].fileName
this.editModule.configs[1].config[i].unit = ''
delete this.editModule.configs[1].config[i].appName
delete this.editModule.configs[1].config[i].listenAddress
} else if (type === 'syslog') {
this.editModule.configs[1].config[i].basic = {
type,
appName: '',
listenAddress: ''
}
delete this.editModule.configs[1].config[i].fileName
delete this.editModule.configs[1].config[i].unit
this.editModule.configs[1].config[i].appName = ''
this.editModule.configs[1].config[i].listenAddress = ''
}
},
copyValue () {
@@ -1117,7 +1114,7 @@ export default {
}
if (n.type && n.type.toLowerCase() == 'snmp') {
this.$refs.selectWalk.show()
for (let i = 0; i < this.editModule.walk.length; i++) {
for (let i = 0; i < this.editModule.configs[0].config.walk.length; i++) {
this.expandedWalkData.push(this.editModule.configs[0].config.walk[i].substring(0, this.editModule.configs[0].config.walk[i].lastIndexOf('.')))
}
}
@@ -1329,6 +1326,8 @@ export default {
.nz-icon-arrow-down{
display: inline-block;
transition: transform .3s;
color: #BDBDBD;
font-size: 12px;
}
.nz-icon-arrow-down.is-active{
transform: rotate(

27
nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
View File

@@ -35,6 +35,9 @@
<el-dropdown-item>
<delete-button :type="'link'" :title="$t('overall.batchDel')" id="account-list-batch-delete" v-has="'monitor_endpoint_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
</el-dropdown-item>
<el-dropdown-item>
<div id="batch-add" @click="batchAdd"><i class="nz-icon nz-icon-table-edit"></i>{{$t('overall.batchAdd')}}</div>
</el-dropdown-item>
</div>
</template>
</top-tool-more-options>
@@ -79,6 +82,9 @@
<transition name="right-box">
<batchModifyEndpoint v-if="rightBox.batchModify" :module="object" @close="closeRightBatchModify" :selectEndpointList="batchDeleteObjs" :disabled="true" :type="'edit'"></batchModifyEndpoint>
</transition>
<transition name="right-box">
<batchAddEndpoint v-if="rightBox.batchAdd" @close="closeRightBatchAdd"></batchAddEndpoint>
</transition>
<transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
</transition>
</div>
@@ -91,6 +97,7 @@ import dataListMixin from '@/components/common/mixin/dataList'
import endpointTable from '@/components/common/table/settings/endpointTable'
import EditEndpointBoxNew from '@/components/common/rightBox/editEndpointBoxNew'
import batchModifyEndpoint from '@/components/common/rightBox/batchModifyEndpoint'
import batchAddEndpoint from '@/components/common/rightBox/batchAddEndpoint'
import clickSearch from '@/components/common/labelFilter/clickSearch'
import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
@@ -106,7 +113,8 @@ export default {
clickSearch,
batchModifyEndpoint,
topToolMoreOptions,
alertSilenceBox
alertSilenceBox,
batchAddEndpoint
},
mixins: [dataListMixin],
data () {
@@ -145,10 +153,8 @@ export default {
{
type: 'logs',
config: [{
basic: {
type: 'file',
fileName: ''
},
fileName: '',
labels: '',
labelModule: [{ key: '', value: '' }],
pipeline: []
@@ -213,7 +219,8 @@ export default {
rightBox: {
editShow: false,
show: false,
batchModify: false
batchModify: false,
batchAdd: false,
},
titleSearch: {},
titleSearchList: {
@@ -302,6 +309,13 @@ export default {
this.getTableData()
}
},
closeRightBatchAdd (refresh) {
this.rightBox.batchAdd = false
if (refresh) {
this.delFlag = true
this.getTableData()
}
},
getTableData () {
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
@@ -366,6 +380,9 @@ export default {
return
}
this.rightBox.batchModify = true
},
batchAdd () {
this.rightBox.batchAdd = true
}
},
computed: {

6
nezha-fronted/src/components/page/monitor/module/moduleList.vue
View File

@@ -125,10 +125,8 @@ export default {
{
type: 'logs',
config: [{
basic: {
type: 'file',
fileName: ''
},
fileName: '',
labels: '',
labelModule: [{ key: '', value: '' }],
pipeline: []
@@ -230,7 +228,7 @@ export default {
}
if (JSON.stringify(this.object.configs[0].config.params) !== '{}' && this.object.configs[0].config.params) {
Object.keys(this.object.configs[0].config.params).forEach(key => {
this.object.paramObj.push({ key, value: this.object.configs[0].params[key] })
this.object.paramObj.push({ key, value: this.object.configs[0].config.params[key] })
})
} else {
this.object.paramObj.push({ key: '', value: [] })