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
},
columns: [
{ title: 'id', data: 'id' },
{ title: 'ID', data: 'id' },
{
title: 'name',
title: 'Name',
data: function (row) {
if (row.name.length > 15) {
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',
batchEndpoint: '批量修改Endpoint',
batchAddEndpoint: '批量新增 Endpoint',
batchAdd: '批量新增',
createAsset: '新增资产',
createAlertRule: '新增告警规则',
createAlertSilence: '新增告警规则',
@@ -1301,6 +1302,7 @@ const cn = {
createEndpoint: '新增 Endpoint',
batchEndpoint: '批量 Endpoint',
batchAddEndpoint: '批量新增 Endpoint',
batchAdd: '批量新增',
endpointName: 'Endpoint name',
name: '名称'
},

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

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

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

@@ -34,7 +34,7 @@
<el-form-item :label="$t('asset.asset')" prop="ChartTemplate">
<v-selectpage
:data="assetDataList"
:tb-columns="ChartSearchShowFields"
:tb-columns="columns"
:params="{
varType: 2, panelId: 0,
returnChildren:0,groupId:0,
@@ -50,11 +50,15 @@
></v-selectpage>
</el-form-item>
</el-form>
<div class="right-box-sub-title">{{ $t("overall.configEndpoint") }}</div>
<div class="right-box-line"></div>
<el-table
:data="tableData"
:height="400"
v-if="tableData.length"
style="width:calc(100% - 55px)"
:height="'calc(100% - 400px)'"
:class="showError?'error' : ''"
style="width:calc(100% - 70px);margin-left: 15px;min-height:400px"
border>
<el-table-column
v-for="(item, index) in endpointTableTitle"
@@ -88,9 +92,15 @@
</template>
<template v-else-if="item.prop == 'configs'">
<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">
<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>
</el-tooltip>
</template>
@@ -99,15 +109,16 @@
</el-table-column>
<el-table-column
:resizable="false"
:width="80"
:width="90"
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>
<span class="table-operation-item" v-has="'model_edit'" @click="del(scope.$index)"><i class="nz-icon nz-icon-minus"></i></span>
<span class="table-operation-item" @click="edit(scope.row, scope.$index)"><i class="nz-icon nz-icon-edit"></i></span>
</div>
</el-table-column>
</el-table>
<div v-if="showError" class="el-form-item__error">{{this.$t('validate.required')}}</div>
</div>
</div>
@@ -116,10 +127,10 @@
<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">
<button @click="generate" id="ep-generate" class="footer__btn">
<span>{{$t('overall.generate')}}</span>
</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>
</button>
</div>
@@ -144,6 +155,7 @@ export default {
},
data () {
return {
showError: false,
rules: {
projectId: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
@@ -159,8 +171,64 @@ export default {
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' }
{
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: {},
vendorAndModelOptionData: [],
@@ -176,7 +244,7 @@ export default {
tempEndpoint2: {},
assetLoading: true,
rightBox: { show: false, title: this.$t('project.endpoint.createEndpoint'), isEdit: false },
optionType: 'add',
optionType: 'batchAdd',
tableData: [],
endpointTableTitle: [ // 原始table列
{
@@ -213,9 +281,9 @@ export default {
},
/* 关闭弹框 */
esc (refresh) {
esc (refresh, importResult) {
this.prevent_opt.save = false
this.$emit('close', refresh)
this.$emit('close', refresh, importResult)
},
// 获取endpoint弹框中module下拉框数据
getModuleList () {
@@ -245,81 +313,41 @@ export default {
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.$post('/monitor/endpoint/render', { moduleIds: this.moduleIds, assetIds: this.assetIds }).then(res => {
console.log(res)
res.data.list.forEach(item => {
item.configs = JSON.parse(item.configs)
item.moduleId = item.module.id
item.assetId = item.asset.id
})
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
this.showError = false
if (!this.tableData.length) {
this.prevent_opt.save = false
this.showError = true
return
}
endpointList.push(endpoint)
})
// 对endpointList进行处理，避免携带过多无用数据
this.$refs.addEndpoint.validate((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
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
// this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true, response.data)
} else {
this.$message.error(response.msg)
}
@@ -341,30 +369,25 @@ export default {
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) => {
this.tableData.forEach((item, index) => {
if (item.id === endpoint.id) {
this.endpointTableData[index] = { ...endpoint }
this.tableData[index] = { ...endpoint }
}
})
this.endpointTableData = [...this.endpointTableData]
}
this.tableData = [...this.tableData]
},
del () {
del (index) {
this.tableData.splice(index, 1)
},
edit (row) {
this.object = row
console.log(this.object)
// 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.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 => {
@@ -407,10 +430,10 @@ export default {
} else {
this.object.paramObj.push({ key: '', value: [] })
}
if (!this.object.chartIds) {
this.object.chartIds = ''
if (!this.object.chartIds && this.object.module.chartIds) {
this.object.chartIds = this.object.module.chartIds
} else {
// this.object.chartIds = this.object.chartIds.split(',')
this.object.chartIds = ''
}
this.rightBox.show = true
this.rightBox.show = true
@@ -421,6 +444,46 @@ export default {
this.getAssetList()
},
watch: {
tableData: {
deep: true,
handler (n) {
this.showError = false
}
}
}
}
</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>

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

@@ -12,6 +12,9 @@
<span v-if="optionType === 'add'">
{{ $t("project.module.createEndpoint")}}
</span>
<span v-if="optionType === 'batchAdd'">
{{ $t("project.module.createEndpoint")}}
</span>
</div>
<!-- end--标题-->
<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>
</div>
<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">
<!--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>
</div>
<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">
<el-tabs v-model="activeNameLogs[index]" class="special-tabs" @tab-click="()=>{tabClick(index)}">
<el-tab-pane label="Basic" name="Basic">
@@ -261,7 +264,7 @@
<el-form-item
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'"
:prop="'configs.1.config.'+ index +'.fileName'"
: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>
@@ -269,7 +272,7 @@
<el-form-item
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'"
:prop="'configs.1.config.'+ index +'.unit'"
: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>
@@ -277,7 +280,7 @@
<el-form-item
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'"
:prop="'configs.1.config.'+ index +'.listenAddress'"
: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>
@@ -286,7 +289,7 @@
v-if="item.type === 'syslog'"
:label=' $t("project.endpoint.basicAppName")'
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' }]"
>
<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 editRigthBox from '../mixin/editRigthBox'
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 {
name: 'editEndpointBoxNew',
@@ -520,9 +523,25 @@ export default {
],
ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
{ 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('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,
rules: {
@@ -746,13 +765,23 @@ export default {
save () {
this.prevent_opt.save = true
setTimeout(() => {
this.editEndpoint.configs.params = this.paramToJson(this.editEndpoint.paramObj)
this.editEndpoint.configs.labels = this.labelsToJson(this.editEndpoint.labelModule)
this.editEndpoint.paramObj = this.editEndpoint.paramObj.filter(item => item.value && item.value.length)
this.editEndpoint.labelModule = this.editEndpoint.labelModule.filter(item => item.value)
const params = { ...this.editEndpoint }
params.configs.walk = params.walk
params.configs.port = params.port
this.editEndpoint.configs[0].config.params = this.paramToJson(this.editEndpoint.paramObj)
this.editEndpoint.configs[0].config.labels = this.labelsToJson(this.editEndpoint.labelModule)
this.editEndpoint.configs[1].config.forEach(item => {
if (item.labelModule) {
item.labels = this.labelsToJson(item.labelModule)
} else {
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)
this.$nextTick(() => {
this.$refs.moduleForm.validate((valid, errorKey) => {
@@ -774,7 +803,22 @@ export default {
}
}
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
if (this.editEndpoint.assetId) {
this.$emit('close', true, this.editEndpoint, false)
@@ -785,7 +829,7 @@ export default {
}
} else if (this.optionType === 'edit') {
if (this.editEndpoint.id) {
this.$put('monitor/endpoint', [params]).then(response => {
this.$put('monitor/endpoint', params).then(response => {
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.$store.commit('setReloadFacade')
@@ -827,10 +871,8 @@ export default {
this.activeNameLogs.push('Basic')
this.logsCopyValue.push('')
this.editEndpoint.configs[1].config.push({
basic: {
type: 'file',
fileName: ''
},
fileName: '',
labels: '',
labelModule: [{ key: '', value: '' }],
pipeline: []
@@ -844,20 +886,20 @@ export default {
logsBasicTypeChange (i) {
const type = this.editEndpoint.configs[1].config[i].type
if (type === 'file') {
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
this.editEndpoint.configs[1].config[i].fileName = ''
delete this.editEndpoint.configs[1].config[i].unit
delete this.editEndpoint.configs[1].config[i].appName
delete this.editEndpoint.configs[1].config[i].listenAddress
} else if (type === 'journal') {
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
delete this.editEndpoint.configs[1].config[i].fileName
this.editEndpoint.configs[1].config[i].unit = ''
delete this.editEndpoint.configs[1].config[i].appName
delete this.editEndpoint.configs[1].config[i].listenAddress
} else if (type === 'syslog') {
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 = ''
delete this.editEndpoint.configs[1].config[i].fileName
delete this.editEndpoint.configs[1].config[i].unit
this.editEndpoint.configs[1].config[i].appName = ''
this.editEndpoint.configs[1].config[i].listenAddress = ''
}
},
/* 获取project列表 */
@@ -1105,13 +1147,13 @@ export default {
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
this.editEndpoint.configs = JSON.parse(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
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>
</div>
<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">
<!--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>
</div>
<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">
<el-tabs v-model="activeNameLogs[index]" class="special-tabs" @tab-click="()=>{tabClick(index)}" :ref="'logsTabs' + index">
<el-tab-pane label="Basic" name="Basic">
@@ -506,9 +506,25 @@ export default {
],
ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
{ 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('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'),
showAllBasicOption: false,

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

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

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

@@ -87,6 +87,42 @@
</transition>
<transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
</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>
</template>
<script>
@@ -120,6 +156,8 @@ export default {
data () {
return {
url: 'monitor/endpoint',
importBoxShow: false,
importResult: {},
blankObject: {
id: '',
projectId: '',
@@ -220,7 +258,7 @@ export default {
editShow: false,
show: false,
batchModify: false,
batchAdd: false,
batchAdd: false
},
titleSearch: {},
titleSearchList: {
@@ -253,12 +291,23 @@ export default {
showMore: false,
width: 0,
index: -1
},
type: {
label: 'Type',
key: 'type',
type: 'checkBox',
children: [],
show: false,
showMore: false,
width: 0,
index: -1
}
},
selectValue: {
projectIds: [],
moduleIds: [],
states: []
states: [],
type: []
},
searchCheckBox: {}
}
@@ -266,27 +315,69 @@ export default {
methods: {
edit (row) {
this.$get('monitor/endpoint/' + row.id).then(res => {
const u = res.data
this.object = JSON.parse(JSON.stringify(u))
this.object.configs = JSON.parse(this.object.configs)
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 = JSON.parse(JSON.stringify(res.data))
// 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.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : ''
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.labelModule = []
if (JSON.stringify(this.object.configs.labels) !== '{}' && this.object.configs.labels) {
Object.keys(this.object.configs.labels).forEach(key => {
this.object.labelModule.push({ key, value: this.object.configs.labels[key] })
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
}
})
})
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 {
this.object.labelModule.push({ key: '', value: '' })
}
if (JSON.stringify(this.object.configs.params) !== '{}' && this.object.configs.params) {
Object.keys(this.object.configs.params).forEach(key => {
this.object.paramObj.push({ key, value: this.object.configs.params[key] })
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.object.assetName = this.object.asset ? this.object.asset.name : ''
this.object.projectId = this.object.project.id
this.object.moduleId = this.object.module.id
@@ -309,11 +400,14 @@ export default {
this.getTableData()
}
},
closeRightBatchAdd (refresh) {
closeRightBatchAdd (refresh, importResult) {
console.log(refresh, importResult)
this.rightBox.batchAdd = false
if (refresh) {
this.importResult = importResult
if (refresh && importResult) {
this.delFlag = true
this.getTableData()
this.importBoxShow = true
// this.getTableData()
}
},
getTableData () {
@@ -330,6 +424,19 @@ export default {
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
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.pageObj.total = response.data.total
@@ -373,6 +480,10 @@ export default {
{ key: 'Up', value: 1, name: 'Up' },
{ 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
},
batchModify () {
@@ -383,6 +494,21 @@ export default {
},
batchAdd () {
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: {

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

@@ -192,8 +192,8 @@ export default {
if (res.code === 200) {
this.object = JSON.parse(JSON.stringify(res.data))
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.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : ''
// 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 => {