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

feat：联调endpoint的接口

Browse Source
This commit is contained in:
zhangyu
2021-08-05 14:50:29 +08:00
parent 8e97e90467
commit 9104317279
9 changed files with 429 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nezha-fronted/src/components/cli/webSSH.vue
View File

@@ -365,9 +365,9 @@ export default {
authProtocol: 1 authProtocol: 1
}, },
columns: [ columns: [
{ title: 'id', data: 'id' }, { title: 'ID', data: 'id' },
{ {
title: 'name', title: 'Name',
data: function (row) { data: function (row) {
if (row.name.length > 15) { if (row.name.length > 15) {
return row.name.substring(0, 12) + '...' return row.name.substring(0, 12) + '...'

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

@@ -77,6 +77,7 @@ const cn = {
createEndpoint: '新增 Endpoint', createEndpoint: '新增 Endpoint',
batchEndpoint: '批量修改Endpoint', batchEndpoint: '批量修改Endpoint',
batchAddEndpoint: '批量新增 Endpoint', batchAddEndpoint: '批量新增 Endpoint',
batchAdd: '批量新增',
createAsset: '新增资产', createAsset: '新增资产',
createAlertRule: '新增告警规则', createAlertRule: '新增告警规则',
createAlertSilence: '新增告警规则', createAlertSilence: '新增告警规则',
@@ -1301,6 +1302,7 @@ const cn = {
createEndpoint: '新增 Endpoint', createEndpoint: '新增 Endpoint',
batchEndpoint: '批量 Endpoint', batchEndpoint: '批量 Endpoint',
batchAddEndpoint: '批量新增 Endpoint', batchAddEndpoint: '批量新增 Endpoint',
batchAdd: '批量新增',
endpointName: 'Endpoint name', endpointName: 'Endpoint name',
name: '名称' name: '名称'
}, },

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

@@ -83,6 +83,7 @@ const en = {
createEndpoint: 'New endpoint', createEndpoint: 'New endpoint',
batchEndpoint: 'Batch modify endpoint', batchEndpoint: 'Batch modify endpoint',
batchAddEndpoint: 'Batch new endpoint', batchAddEndpoint: 'Batch new endpoint',
batchAdd: 'Batch add',
createAsset: 'New asset', createAsset: 'New asset',
createAlertRule: 'New alert rule', createAlertRule: 'New alert rule',
createAlertSilence: 'New alert silence', createAlertSilence: 'New alert silence',
@@ -1301,6 +1302,7 @@ const en = {
createEndpoint: 'New endpoint', createEndpoint: 'New endpoint',
batchEndpoint: 'Batch endpoint', batchEndpoint: 'Batch endpoint',
batchAddEndpoint: 'Batch new endpoint', batchAddEndpoint: 'Batch new endpoint',
batchAdd: 'Batch add',
endpointName: 'Endpoint', endpointName: 'Endpoint',
name: 'Name', name: 'Name',
tip: { tip: {

263
nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue
View File

@@ -34,7 +34,7 @@
<el-form-item :label="$t('asset.asset')" prop="ChartTemplate"> <el-form-item :label="$t('asset.asset')" prop="ChartTemplate">
<v-selectpage <v-selectpage
:data="assetDataList" :data="assetDataList"
:tb-columns="ChartSearchShowFields" :tb-columns="columns"
:params="{ :params="{
varType: 2, panelId: 0, varType: 2, panelId: 0,
returnChildren:0,groupId:0, returnChildren:0,groupId:0,
@@ -50,11 +50,15 @@
></v-selectpage> ></v-selectpage>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="right-box-sub-title">{{ $t("overall.configEndpoint") }}</div>
<div class="right-box-line"></div>
<el-table <el-table
:data="tableData" :data="tableData"
:height="400" :height="'calc(100% - 400px)'"
v-if="tableData.length" :class="showError?'error' : ''"
style="width:calc(100% - 55px)" style="width:calc(100% - 70px);margin-left: 15px;min-height:400px"
border> border>
<el-table-column <el-table-column
v-for="(item, index) in endpointTableTitle" v-for="(item, index) in endpointTableTitle"
@@ -88,9 +92,15 @@
</template> </template>
<template v-else-if="item.prop == 'configs'"> <template v-else-if="item.prop == 'configs'">
<el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'"> <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'">
<span class="configs-endpoint">{ ... }</span> <span class="configs-endpoint metrics">{ Metrics }</span>
<div class="endpointConfigsTips" slot="content"> <div class="endpointConfigsTips" slot="content">
<pre >{{JSON.stringify(scope.row[item.prop],null,2)}}</pre> <pre >{{JSON.stringify(scope.row.configs[0].config,null,2)}}</pre>
</div>
</el-tooltip>
<el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'">
<span class="configs-endpoint logs">{ Logs }</span>
<div class="endpointConfigsTips" slot="content">
<pre >{{JSON.stringify(scope.row.configs[1].config,null,2)}}</pre>
</div> </div>
</el-tooltip> </el-tooltip>
</template> </template>
@@ -99,15 +109,16 @@
</el-table-column> </el-table-column>
<el-table-column <el-table-column
:resizable="false" :resizable="false"
:width="80" :width="90"
fixed="right"> fixed="right">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div> <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items"> <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> <span class="table-operation-item" v-has="'model_edit'" @click="del(scope.$index)"><i class="nz-icon nz-icon-minus"></i></span>
<button class="table-operation-item" @click="edit(scope.row, scope.$index)"><i class="nz-icon nz-icon-edit"></i></button> <span class="table-operation-item" @click="edit(scope.row, scope.$index)"><i class="nz-icon nz-icon-edit"></i></span>
</div> </div>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div v-if="showError" class="el-form-item__error">{{this.$t('validate.required')}}</div>
</div> </div>
</div> </div>
@@ -116,10 +127,10 @@
<button v-cancel="{obj:endpoint,func:esc}" id="ep-esc" class="footer__btn footer__btn--light"> <button v-cancel="{obj:endpoint,func:esc}" id="ep-esc" class="footer__btn footer__btn--light">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button @click="generate" id="ep-generate" class="footer__btn footer__btn--light"> <button @click="generate" id="ep-generate" class="footer__btn">
<span>{{$t('overall.generate')}}</span> <span>{{$t('overall.generate')}}</span>
</button> </button>
<button @click="save" class="footer__btn" id="ep-add"> <button @click="save" class="footer__btn" id="ep-add" :class="!tableData.length?'nz-btn-disabled':''" :disabled="!tableData.length">
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>
@@ -144,6 +155,7 @@ export default {
}, },
data () { data () {
return { return {
showError: false,
rules: { rules: {
projectId: [ projectId: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' } { required: true, message: this.$t('validate.required'), trigger: 'change' }
@@ -159,8 +171,64 @@ export default {
language: localStorage.getItem('nz-language'), language: localStorage.getItem('nz-language'),
ChartSearchShowFields: [ // ChartSearch 下拉搜索表头 ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
{ title: 'ID', data: 'id' }, { title: 'ID', data: 'id' },
{ title: this.$t('config.model.titleName'), data: 'name' }, {
{ title: this.$t('overall.remark'), data: 'remark' } title: this.$t('config.model.titleName'),
data: function (row) {
if (row.name.length > 15) {
return row.name.substring(0, 12) + '...'
}
return row.name
}
},
{
title: this.$t('project.project.projectName'),
data: function (row) {
if (row.project && row.project.name.length > 15) {
return row.project.name.substring(0, 12) + '...'
}
return ''
}
},
{
title: this.$t('overall.remark'),
data: function (row) {
if (row.remark && row.remark.length > 15) {
return row.remark.substring(0, 12) + '...'
}
return row.remark
}
}
],
columns: [
{ title: 'id', data: 'id' },
{
title: 'name',
data: function (row) {
if (row.name.length > 15) {
return row.name.substring(0, 12) + '...'
}
return row.name
}
},
{ title: 'Manage Ip', data: 'manageIp' },
{
title: 'Type',
data: (row) => {
return row.type ? row.type.name : ''
}
},
{
title: 'Model',
data: (row) => {
return row.model ? row.model.name : ''
}
},
{
title: 'Datacenter',
data: (row) => {
return row.dc ? row.dc.name : ''
}
}
], ],
object: {}, object: {},
vendorAndModelOptionData: [], vendorAndModelOptionData: [],
@@ -176,7 +244,7 @@ export default {
tempEndpoint2: {}, tempEndpoint2: {},
assetLoading: true, assetLoading: true,
rightBox: { show: false, title: this.$t('project.endpoint.createEndpoint'), isEdit: false }, rightBox: { show: false, title: this.$t('project.endpoint.createEndpoint'), isEdit: false },
optionType: 'add', optionType: 'batchAdd',
tableData: [], tableData: [],
endpointTableTitle: [ // 原始table列 endpointTableTitle: [ // 原始table列
{ {
@@ -213,9 +281,9 @@ export default {
}, },
/* 关闭弹框 */ /* 关闭弹框 */
esc (refresh) { esc (refresh, importResult) {
this.prevent_opt.save = false this.prevent_opt.save = false
this.$emit('close', refresh) this.$emit('close', refresh, importResult)
}, },
// 获取endpoint弹框中module下拉框数据 // 获取endpoint弹框中module下拉框数据
getModuleList () { getModuleList () {
@@ -245,81 +313,41 @@ export default {
if (!this.assetIds || !this.moduleIds) { if (!this.assetIds || !this.moduleIds) {
this.$message.error('Please select module or asset') this.$message.error('Please select module or asset')
} }
const res = { this.$post('/monitor/endpoint/render', { moduleIds: this.moduleIds, assetIds: this.assetIds }).then(res => {
code: 200, console.log(res)
msg: 'success', res.data.list.forEach(item => {
data: { item.configs = JSON.parse(item.configs)
list: [{ item.moduleId = item.module.id
name: 'module+asset', item.assetId = item.asset.id
module: { })
id: 2, this.tableData = res.data.list
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 // 保存endpoint
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.showError = false
if (!this.tableData.length) {
this.prevent_opt.save = false
this.showError = true
return
}
// 对endpointList进行处理，避免携带过多无用数据 // 对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) => { this.$refs.addEndpoint.validate((valid) => {
if (valid) { if (valid) {
this.$put('monitor/endpoint', endpointList).then(response => { const paramsArr = this.tableData.map(item => {
const obj = JSON.parse(JSON.stringify(item))
obj.configs = JSON.stringify(obj.configs)
return {
...obj
}
})
this.$post('/monitor/endpoint/bulk', paramsArr).then(response => {
this.prevent_opt.save = false this.prevent_opt.save = false
if (response.code === 200) { if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') }) // this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true) this.esc(true, response.data)
} else { } else {
this.$message.error(response.msg) this.$message.error(response.msg)
} }
@@ -341,30 +369,25 @@ export default {
closeRightBox (isEdit, endpoint, isAll) { closeRightBox (isEdit, endpoint, isAll) {
this.rightBox.show = false this.rightBox.show = false
if (!isEdit) { return } if (!isEdit) { return }
if (isAll) { this.tableData.forEach((item, index) => {
Object.keys(this.blankEndpoint).forEach(key => { if (item.id === endpoint.id) {
this.blankEndpoint[key] = endpoint[key] this.tableData[index] = { ...endpoint }
}) }
} else { })
this.endpointTableData.forEach((item, index) => { this.tableData = [...this.tableData]
if (item.id === endpoint.id) {
this.endpointTableData[index] = { ...endpoint }
}
})
this.endpointTableData = [...this.endpointTableData]
}
}, },
del () { del (index) {
this.tableData.splice(index, 1)
}, },
edit (row) { edit (row) {
this.object = row this.object = row
console.log(this.object)
// this.object.configs = JSON.parse(this.object.configs) // this.object.configs = JSON.parse(this.object.configs)
this.object.projectId = this.object.project.id this.object.projectId = this.object.project.id
this.object.moduleId = this.object.module.id this.object.moduleId = this.object.module.id
this.object.assetName = this.object.asset.name 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.configs.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : []
this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : '' // this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : ''
this.object.paramObj = [] this.object.paramObj = []
this.object.labelModule = [] this.object.labelModule = []
this.object.configs[1].config.forEach(item => { this.object.configs[1].config.forEach(item => {
@@ -407,10 +430,10 @@ export default {
} else { } else {
this.object.paramObj.push({ key: '', value: [] }) this.object.paramObj.push({ key: '', value: [] })
} }
if (!this.object.chartIds) { if (!this.object.chartIds && this.object.module.chartIds) {
this.object.chartIds = '' this.object.chartIds = this.object.module.chartIds
} else { } else {
// this.object.chartIds = this.object.chartIds.split(',') this.object.chartIds = ''
} }
this.rightBox.show = true this.rightBox.show = true
this.rightBox.show = true this.rightBox.show = true
@@ -421,6 +444,46 @@ export default {
this.getAssetList() this.getAssetList()
}, },
watch: { watch: {
tableData: {
deep: true,
handler (n) {
this.showError = false
}
}
} }
} }
</script> </script>
<style scoped>
.error{
border: 1px solid #F56C6C !important;
}
.right-box-sub-title{
width: calc(100% - 70px);
margin-left: 15px;
}
/deep/ .el-table thead .cell{
font-size: 14px;
color: #333333;
letter-spacing: 0;
line-height: 14px;
font-weight: 400;
padding: 5px;
}
.table-operation-items{
display: flex;
justify-content: space-around;
}
/deep/ .el-table th{
padding: 7px 0;
}
.configs-endpoint{
border-radius: 4px;
padding: 2px 7px;
}
.configs-endpoint.metrics{
color: #3C92F1;
}
.configs-endpoint.logs{
color: #25BF9A;
}
</style>

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

@@ -12,6 +12,9 @@
<span v-if="optionType === 'add'"> <span v-if="optionType === 'add'">
{{ $t("project.module.createEndpoint")}} {{ $t("project.module.createEndpoint")}}
</span> </span>
<span v-if="optionType === 'batchAdd'">
{{ $t("project.module.createEndpoint")}}
</span>
</div> </div>
<!-- end--标题--> <!-- end--标题-->
<div class="header__operation"> <div class="header__operation">
@@ -87,7 +90,7 @@
<el-switch v-model="editEndpoint.configs[0].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch> <el-switch v-model="editEndpoint.configs[0].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
</div> </div>
<transition name="el-zoom-in-top"> <transition name="el-zoom-in-top">
<el-tabs v-model="activeName" v-show="metricsShow&&editEndpoint.configs[0].enable"> <el-tabs v-model="activeName" v-show="metricsShow" v-if="editEndpoint.configs[0].enable">
<el-tab-pane label="Basic" name="Basic"> <el-tab-pane label="Basic" name="Basic">
<!--path--> <!--path-->
<el-form-item :label='$t("project.endpoint.path")' class="half-form-item" prop="configs.metrics_path"> <el-form-item :label='$t("project.endpoint.path")' class="half-form-item" prop="configs.metrics_path">
@@ -248,7 +251,7 @@
<el-switch v-model="editEndpoint.configs[1].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch> <el-switch v-model="editEndpoint.configs[1].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
</div> </div>
<transition name="el-zoom-in-top"> <transition name="el-zoom-in-top">
<div v-show="logsShow&&editEndpoint.configs[1].enable"> <div v-show="logsShow" v-if="editEndpoint.configs[1].enable">
<div v-for="(item, index) in editEndpoint.configs[1].config" :key="index" style="position: relative"> <div v-for="(item, index) in editEndpoint.configs[1].config" :key="index" style="position: relative">
<el-tabs v-model="activeNameLogs[index]" class="special-tabs" @tab-click="()=>{tabClick(index)}"> <el-tabs v-model="activeNameLogs[index]" class="special-tabs" @tab-click="()=>{tabClick(index)}">
<el-tab-pane label="Basic" name="Basic"> <el-tab-pane label="Basic" name="Basic">
@@ -261,7 +264,7 @@
<el-form-item <el-form-item
v-if='item.type === "file"' 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" :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'" :prop="'configs.1.config.'+ index +'.fileName'"
:rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]" :rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
> >
<el-input v-if='item.type === "file"' v-model="item.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>
@@ -269,7 +272,7 @@
<el-form-item <el-form-item
v-if='item.type === "journal"' 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" :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'" :prop="'configs.1.config.'+ index +'.unit'"
:rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]" :rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
> >
<el-input v-if='item.type === "journal"' v-model="item.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>
@@ -277,7 +280,7 @@
<el-form-item <el-form-item
v-if='item.type === "syslog"' 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" :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'" :prop="'configs.1.config.'+ index +'.listenAddress'"
:rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]" :rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
> >
<el-input v-if='item.type === "syslog"' v-model="item.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>
@@ -286,7 +289,7 @@
v-if="item.type === 'syslog'" v-if="item.type === 'syslog'"
:label=' $t("project.endpoint.basicAppName")' :label=' $t("project.endpoint.basicAppName")'
class="half-form-item" class="half-form-item"
:prop="'configs.1.config.'+ index +'appName'" :prop="'configs.1.config.'+ index +'.appName'"
:rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]" :rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]"
> >
<el-input v-model="item.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>
@@ -477,7 +480,7 @@ import pipelineSelect from './pipelineSelect'
import selectWalk from '../popBox/selectWalk' import selectWalk from '../popBox/selectWalk'
import editRigthBox from '../mixin/editRigthBox' import editRigthBox from '../mixin/editRigthBox'
import VueTagsInput from '@johmun/vue-tags-input' import VueTagsInput from '@johmun/vue-tags-input'
import project from "@/components/page/monitor/project/project"; import project from '@/components/page/monitor/project/project'
export default { export default {
name: 'editEndpointBoxNew', name: 'editEndpointBoxNew',
@@ -520,9 +523,25 @@ export default {
], ],
ChartSearchShowFields: [ // ChartSearch 下拉搜索表头 ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
{ title: 'ID', data: 'id' }, { title: 'ID', data: 'id' },
{ title: this.$t('config.model.titleName'), data: 'name' }, {
title: this.$t('config.model.titleName'),
data: function (row) {
if (row.name.length > 15) {
return row.name.substring(0, 12) + '...'
}
return row.name
}
},
{ title: this.$t('config.model.titleType'), data: 'type' }, { title: this.$t('config.model.titleType'), data: 'type' },
{ title: this.$t('overall.remark'), data: 'remark' } {
title: this.$t('overall.remark'),
data: function (row) {
if (row.remark && row.remark.length > 15) {
return row.remark.substring(0, 12) + '...'
}
return row.remark
}
}
], ],
showAllBasicOption: false, showAllBasicOption: false,
rules: { rules: {
@@ -746,13 +765,23 @@ export default {
save () { save () {
this.prevent_opt.save = true this.prevent_opt.save = true
setTimeout(() => { setTimeout(() => {
this.editEndpoint.configs.params = this.paramToJson(this.editEndpoint.paramObj) this.editEndpoint.configs[0].config.params = this.paramToJson(this.editEndpoint.paramObj)
this.editEndpoint.configs.labels = this.labelsToJson(this.editEndpoint.labelModule) this.editEndpoint.configs[0].config.labels = this.labelsToJson(this.editEndpoint.labelModule)
this.editEndpoint.paramObj = this.editEndpoint.paramObj.filter(item => item.value && item.value.length) this.editEndpoint.configs[1].config.forEach(item => {
this.editEndpoint.labelModule = this.editEndpoint.labelModule.filter(item => item.value) if (item.labelModule) {
const params = { ...this.editEndpoint } item.labels = this.labelsToJson(item.labelModule)
params.configs.walk = params.walk } else {
params.configs.port = params.port item.labels = ''
}
})
const params = JSON.parse(JSON.stringify(this.editEndpoint))
params.configs[1].config.forEach(item => {
item.pipeline && item.pipeline.forEach((pipeline) => {
if (pipeline.type === 'labels') {
pipeline.labels = this.labelsToJson(pipeline.labels)
}
})
})
params.configs = JSON.stringify(params.configs) params.configs = JSON.stringify(params.configs)
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.moduleForm.validate((valid, errorKey) => { this.$refs.moduleForm.validate((valid, errorKey) => {
@@ -774,7 +803,22 @@ export default {
} }
} }
if (valid) { if (valid) {
if (this.optionType === 'add' || this.optionType === 'batch') { if (this.optionType === 'add') {
this.$post('monitor/endpoint', params).then(response => {
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.$store.commit('setReloadFacade')
this.esc(true)
} else {
this.$message.error(response.msg)
}
this.prevent_opt.save = false
})
} else if (this.optionType === 'batchAdd') {
this.prevent_opt.save = true
this.$emit('close', true, this.editEndpoint, false)
this.prevent_opt.save = false
} else if (this.optionType === 'batch') {
this.prevent_opt.save = true this.prevent_opt.save = true
if (this.editEndpoint.assetId) { if (this.editEndpoint.assetId) {
this.$emit('close', true, this.editEndpoint, false) this.$emit('close', true, this.editEndpoint, false)
@@ -785,7 +829,7 @@ export default {
} }
} else if (this.optionType === 'edit') { } else if (this.optionType === 'edit') {
if (this.editEndpoint.id) { if (this.editEndpoint.id) {
this.$put('monitor/endpoint', [params]).then(response => { this.$put('monitor/endpoint', params).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') }) this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.$store.commit('setReloadFacade') this.$store.commit('setReloadFacade')
@@ -827,10 +871,8 @@ export default {
this.activeNameLogs.push('Basic') this.activeNameLogs.push('Basic')
this.logsCopyValue.push('') this.logsCopyValue.push('')
this.editEndpoint.configs[1].config.push({ this.editEndpoint.configs[1].config.push({
basic: { type: 'file',
type: 'file', fileName: '',
fileName: ''
},
labels: '', labels: '',
labelModule: [{ key: '', value: '' }], labelModule: [{ key: '', value: '' }],
pipeline: [] pipeline: []
@@ -844,20 +886,20 @@ export default {
logsBasicTypeChange (i) { logsBasicTypeChange (i) {
const type = this.editEndpoint.configs[1].config[i].type const type = this.editEndpoint.configs[1].config[i].type
if (type === 'file') { if (type === 'file') {
this.editModule.configs[1].config[i].fileName = '' this.editEndpoint.configs[1].config[i].fileName = ''
delete this.editModule.configs[1].config[i].unit delete this.editEndpoint.configs[1].config[i].unit
delete this.editModule.configs[1].config[i].appName delete this.editEndpoint.configs[1].config[i].appName
delete this.editModule.configs[1].config[i].listenAddress delete this.editEndpoint.configs[1].config[i].listenAddress
} else if (type === 'journal') { } else if (type === 'journal') {
delete this.editModule.configs[1].config[i].fileName delete this.editEndpoint.configs[1].config[i].fileName
this.editModule.configs[1].config[i].unit = '' this.editEndpoint.configs[1].config[i].unit = ''
delete this.editModule.configs[1].config[i].appName delete this.editEndpoint.configs[1].config[i].appName
delete this.editModule.configs[1].config[i].listenAddress delete this.editEndpoint.configs[1].config[i].listenAddress
} else if (type === 'syslog') { } else if (type === 'syslog') {
delete this.editModule.configs[1].config[i].fileName delete this.editEndpoint.configs[1].config[i].fileName
delete this.editModule.configs[1].config[i].unit delete this.editEndpoint.configs[1].config[i].unit
this.editModule.configs[1].config[i].appName = '' this.editEndpoint.configs[1].config[i].appName = ''
this.editModule.configs[1].config[i].listenAddress = '' this.editEndpoint.configs[1].config[i].listenAddress = ''
} }
}, },
/* 获取project列表 */ /* 获取project列表 */
@@ -1105,13 +1147,13 @@ export default {
this.$post('/monitor/endpoint/render', { moduleIds: this.editEndpoint.moduleId, assetIds: this.editEndpoint.assetId }).then(res => { this.$post('/monitor/endpoint/render', { moduleIds: this.editEndpoint.moduleId, assetIds: this.editEndpoint.assetId }).then(res => {
console.log(res) console.log(res)
if (JSON.stringify(this.editEndpoint.configs) === JSON.stringify(this.blankObject.configs)) { if (JSON.stringify(this.editEndpoint.configs) === JSON.stringify(this.blankObject.configs)) {
this.editEndpoint.configs = res.data.list[0].configs this.editEndpoint.configs = JSON.parse(res.data.list[0].configs)
} }
if (!this.editEndpoint.name) { if (!this.editEndpoint.name) {
this.editEndpoint.name = res.data.list[0].name this.editEndpoint.name = res.data.list[0].name
} }
if (!this.editEndpoint.chartIds) { if (!this.editEndpoint.chartIds) {
this.editEndpoint.chartIds = res.data.list[0].chartIds this.editEndpoint.chartIds = res.data.list[0].module.chartIds
} }
}) })
} }

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

@@ -87,7 +87,7 @@
<el-switch v-model="editModule.configs[0].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch> <el-switch v-model="editModule.configs[0].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
</div> </div>
<transition name="el-zoom-in-top"> <transition name="el-zoom-in-top">
<el-tabs v-model="activeName" v-show="metricsShow&&editModule.configs[0].enable"> <el-tabs v-model="activeName" v-show="metricsShow" v-if="editModule.configs[0].enable">
<el-tab-pane label="Basic" name="Basic"> <el-tab-pane label="Basic" name="Basic">
<!--path--> <!--path-->
<el-form-item :label='$t("project.endpoint.path")' class="half-form-item" prop="configs.metrics_path"> <el-form-item :label='$t("project.endpoint.path")' class="half-form-item" prop="configs.metrics_path">
@@ -248,7 +248,7 @@
<el-switch v-model="editModule.configs[1].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch> <el-switch v-model="editModule.configs[1].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
</div> </div>
<transition name="el-zoom-in-top"> <transition name="el-zoom-in-top">
<div v-show="logsShow&&editModule.configs[1].enable"> <div v-show="logsShow" v-if="editModule.configs[1].enable">
<div v-for="(item, index) in editModule.configs[1].config" :key="index" style="position: relative"> <div v-for="(item, index) in editModule.configs[1].config" :key="index" style="position: relative">
<el-tabs v-model="activeNameLogs[index]" class="special-tabs" @tab-click="()=>{tabClick(index)}" :ref="'logsTabs' + index"> <el-tabs v-model="activeNameLogs[index]" class="special-tabs" @tab-click="()=>{tabClick(index)}" :ref="'logsTabs' + index">
<el-tab-pane label="Basic" name="Basic"> <el-tab-pane label="Basic" name="Basic">
@@ -506,9 +506,25 @@ export default {
], ],
ChartSearchShowFields: [ // ChartSearch 下拉搜索表头 ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
{ title: 'ID', data: 'id' }, { title: 'ID', data: 'id' },
{ title: this.$t('config.model.titleName'), data: 'name' }, {
title: this.$t('config.model.titleName'),
data: function (row) {
if (row.name.length > 15) {
return row.name.substring(0, 12) + '...'
}
return row.name
}
},
{ title: this.$t('config.model.titleType'), data: 'type' }, { title: this.$t('config.model.titleType'), data: 'type' },
{ title: this.$t('overall.remark'), data: 'remark' } {
title: this.$t('overall.remark'),
data: function (row) {
if (row.remark && row.remark.length > 15) {
return row.remark.substring(0, 12) + '...'
}
return row.remark
}
}
], ],
language: localStorage.getItem('nz-language'), language: localStorage.getItem('nz-language'),
showAllBasicOption: false, showAllBasicOption: false,

27
nezha-fronted/src/components/common/table/settings/endpointTable.vue
View File

@@ -60,11 +60,18 @@
</span> </span>
</template> </template>
<template v-else-if="item.prop === 'configs'"> <template v-else-if="item.prop === 'configs'">
<el-tooltip placement="right" effect="light" :popper-class="'endpointConfigsTips'"> <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'">
<span class="configs-endpoint">{ ... }</span> <span class="configs-endpoint metrics">{ Metrics }</span>
<div class="endpointConfigsTips" slot="content"> <div class="endpointConfigsTips" slot="content">
<span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row[item.prop])"></i></span> <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row.configs[0].config)"></i></span>
<pre >{{JSON.stringify(JSON.parse(scope.row[item.prop]),null,2)}}</pre> <pre >{{JSON.stringify(scope.row.configs[0].config,null,2)}}</pre>
</div>
</el-tooltip>
<el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'">
<span class="configs-endpoint logs">{ Logs }</span>
<div class="endpointConfigsTips" slot="content">
<span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row.configs[1].config)"></i></span>
<pre >{{JSON.stringify(scope.row.configs[1].config,null,2)}}</pre>
</div> </div>
</el-tooltip> </el-tooltip>
</template> </template>
@@ -145,10 +152,6 @@ export default {
show: true, show: true,
minWidth: 200, minWidth: 200,
sortable: 'custom' sortable: 'custom'
}, {
label: this.$t('project.module.type'),
prop: 'type',
show: true
}, { }, {
label: this.$t('project.project.projectName'), label: this.$t('project.project.projectName'),
prop: 'project', prop: 'project',
@@ -197,7 +200,7 @@ export default {
methods: { methods: {
copyValue (str) { copyValue (str) {
const domUrl = document.createElement('input') const domUrl = document.createElement('input')
domUrl.value = str domUrl.value = JSON.stringify(str)
domUrl.id = 'creatDom' domUrl.id = 'creatDom'
document.body.appendChild(domUrl) document.body.appendChild(domUrl)
domUrl.select() // 选择对象 domUrl.select() // 选择对象
@@ -253,6 +256,12 @@ export default {
padding: 2px 7px; padding: 2px 7px;
color: #3C92F1; color: #3C92F1;
} }
.configs-endpoint.metrics{
color: #3C92F1;
}
.configs-endpoint.logs{
color: #25BF9A;
}
.colorEF7458{ .colorEF7458{
color: #EF7458; color: #EF7458;
} }

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

@@ -87,6 +87,42 @@
</transition> </transition>
<transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box> <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
</transition> </transition>
<el-dialog :close-on-click-modal="false" :show-close="true" :title='$t("overall.batchAddEndpoint")' :visible.sync="importBoxShow" :width="'600px'" append-to-body class="nz-dialog" @close="closeDialog">
<div class="upload-body result-body">
<div>
<span class="result-title">{{$t('overall.result.total')}}:</span>
<span>{{importResult&&importResult.totalNum?importResult.totalNum:0}}</span>
</div>
<div>
<span class="result-title">{{$t('overall.result.failed')}}:</span>
<span>{{importResult&&importResult.failNum?importResult.failNum:0}}</span>
<span class="result-title">{{$t('overall.result.success')}}:</span>
<span>{{importResult&&importResult.successNum?importResult.successNum:0}}</span>
</div>
<div>
<div class="result-title">{{$t('overall.result.failedDetail')}}:</div>
<div v-if="importResult&&importResult.failDetail" class="result-detail">
<div style="height: 100%; overflow: auto;">
<template v-for="(item, index) in importResult.failDetail">
<div :key="index" class="import-result-block">
<div class="import-result-item">
<div class="line-num">{{$t('overall.result.line',[item.lineNo])}}</div>
<div>{{item.errorMsg}}</div>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns">
<button :id="'xlsx-import-rollback'" class="nz-btn nz-btn-size-normal-new nz-btn-style-error-new" @click="rollbackImport">
<span>{{$t('overall.rollbackImport')}}</span>
</button>
</div>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
@@ -120,6 +156,8 @@ export default {
data () { data () {
return { return {
url: 'monitor/endpoint', url: 'monitor/endpoint',
importBoxShow: false,
importResult: {},
blankObject: { blankObject: {
id: '', id: '',
projectId: '', projectId: '',
@@ -220,7 +258,7 @@ export default {
editShow: false, editShow: false,
show: false, show: false,
batchModify: false, batchModify: false,
batchAdd: false, batchAdd: false
}, },
titleSearch: {}, titleSearch: {},
titleSearchList: { titleSearchList: {
@@ -253,12 +291,23 @@ export default {
showMore: false, showMore: false,
width: 0, width: 0,
index: -1 index: -1
},
type: {
label: 'Type',
key: 'type',
type: 'checkBox',
children: [],
show: false,
showMore: false,
width: 0,
index: -1
} }
}, },
selectValue: { selectValue: {
projectIds: [], projectIds: [],
moduleIds: [], moduleIds: [],
states: [] states: [],
type: []
}, },
searchCheckBox: {} searchCheckBox: {}
} }
@@ -266,27 +315,69 @@ export default {
methods: { methods: {
edit (row) { edit (row) {
this.$get('monitor/endpoint/' + row.id).then(res => { this.$get('monitor/endpoint/' + row.id).then(res => {
const u = res.data this.object = JSON.parse(JSON.stringify(res.data))
this.object = JSON.parse(JSON.stringify(u)) // this.object.configs = JSON.parse(this.object.configs)
this.object.configs = JSON.parse(this.object.configs) // this.object.configs.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)) : ''
this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : 9100 const configs = []
// this.object.configs.forEach(item => {
// item.config = JSON.parse(item.config)
// if (item.type === 'logs') {
// configs.push(item.config)
// }
// })
// this.object.configs[0] = this.object.configs[0].config
// this.object.configs[1] = {
// type: 'logs',
// enable: this.object.configs[1].enable,
// config: configs
// }
console.log(this.object)
this.object.paramObj = [] this.object.paramObj = []
this.object.labelModule = [] this.object.labelModule = []
if (JSON.stringify(this.object.configs.labels) !== '{}' && this.object.configs.labels) { this.object.configs[1].config.forEach(item => {
Object.keys(this.object.configs.labels).forEach(key => { item.labelModule = []
this.object.labelModule.push({ key, value: this.object.configs.labels[key] }) 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
}
})
})
this.object.configs = [this.object.configs[0], this.object.configs[1]]
if (JSON.stringify(this.object.configs[0].config.labels) !== '{}' && this.object.configs[0].config.labels) {
Object.keys(this.object.configs[0].config.labels).forEach(key => {
this.object.labelModule.push({ key, value: this.object.configs[0].config.labels[key] })
}) })
} else { } else {
this.object.labelModule.push({ key: '', value: '' }) this.object.labelModule.push({ key: '', value: '' })
} }
if (JSON.stringify(this.object.configs.params) !== '{}' && this.object.configs.params) { if (JSON.stringify(this.object.configs[0].config.params) !== '{}' && this.object.configs[0].config.params) {
Object.keys(this.object.configs.params).forEach(key => { Object.keys(this.object.configs[0].config.params).forEach(key => {
this.object.paramObj.push({ key, value: this.object.configs.params[key] }) this.object.paramObj.push({ key, value: this.object.configs[0].config.params[key] })
}) })
} else { } else {
this.object.paramObj.push({ key: '', value: [] }) this.object.paramObj.push({ key: '', value: [] })
} }
if (!this.object.chartIds) {
this.object.chartIds = ''
} else {
// this.object.chartIds = this.object.chartIds.split(',')
}
this.object.assetName = this.object.asset ? this.object.asset.name : '' this.object.assetName = this.object.asset ? this.object.asset.name : ''
this.object.projectId = this.object.project.id this.object.projectId = this.object.project.id
this.object.moduleId = this.object.module.id this.object.moduleId = this.object.module.id
@@ -309,11 +400,14 @@ export default {
this.getTableData() this.getTableData()
} }
}, },
closeRightBatchAdd (refresh) { closeRightBatchAdd (refresh, importResult) {
console.log(refresh, importResult)
this.rightBox.batchAdd = false this.rightBox.batchAdd = false
if (refresh) { this.importResult = importResult
if (refresh && importResult) {
this.delFlag = true this.delFlag = true
this.getTableData() this.importBoxShow = true
// this.getTableData()
} }
}, },
getTableData () { getTableData () {
@@ -330,6 +424,19 @@ export default {
if (response.code === 200) { if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) { for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + '' response.data.list[i].status = response.data.list[i].status + ''
const configs = []
response.data.list[i].configs.forEach(item => {
item.config = JSON.parse(item.config)
if (item.type === 'logs') {
configs.push(item.config)
}
})
response.data.list[i].configs[0] = response.data.list[i].configs[0].config
response.data.list[i].configs[1] = {
type: 'logs',
enable: response.data.list[i].configs[1].enable,
config: configs
}
} }
this.tableData = response.data.list this.tableData = response.data.list
this.pageObj.total = response.data.total this.pageObj.total = response.data.total
@@ -373,6 +480,10 @@ export default {
{ key: 'Up', value: 1, name: 'Up' }, { key: 'Up', value: 1, name: 'Up' },
{ key: 'Suspended', value: 2, name: 'Suspended' } { key: 'Suspended', value: 2, name: 'Suspended' }
] ]
this.titleSearchList.type.children = [
{ key: 'Metrics', value: 'metrics', name: 'Metrics' },
{ key: 'Logs', value: 'logs', name: 'Logs' },
]
this.titleSearchList.state.show = true this.titleSearchList.state.show = true
}, },
batchModify () { batchModify () {
@@ -383,6 +494,21 @@ export default {
}, },
batchAdd () { batchAdd () {
this.rightBox.batchAdd = true this.rightBox.batchAdd = true
},
rollbackImport () {
this.$delete('monitor/endpoint/cancelImport' + '?seq=' + this.importResult.seq).then(response => {
if (response.code == 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
this.getTableData()
this.importBoxShow = false
} else {
this.$message.error(response.msg)
}
})
},
closeDialog () {
this.getTableData()
this.importBoxShow = false
} }
}, },
computed: { computed: {

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

@@ -192,8 +192,8 @@ export default {
if (res.code === 200) { if (res.code === 200) {
this.object = JSON.parse(JSON.stringify(res.data)) this.object = JSON.parse(JSON.stringify(res.data))
this.object.configs = JSON.parse(this.object.configs) this.object.configs = JSON.parse(this.object.configs)
this.object.configs.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : [] // this.object.configs.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : []
this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : '' // this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : ''
this.object.paramObj = [] this.object.paramObj = []
this.object.labelModule = [] this.object.labelModule = []
this.object.configs[1].config.forEach(item => { this.object.configs[1].config.forEach(item => {