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

fix：修改alert Message Tooltip 显示不正常的问题

Browse Source
This commit is contained in:
zhangyu
2021-05-14 17:50:06 +08:00
parent 2d3cbd63b3
commit b1b784b67a
6 changed files with 194 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
nezha-fronted/src/components/common/alert/alertLabel.vue
View File

@@ -3,125 +3,121 @@
<div class="alert-label-info" v-if="type==='asset'" v-loading="loading"> <div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">ID</div> <div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Name</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">SN</div> <div class="alert-label-title">SN</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.sn:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.sn ? alertLabelData.sn:'--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Host</div> <div class="alert-label-title">ManageIp</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.host:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">State</div> <div class="alert-label-title">State</div>
<div class="alert-label-value">{{alertLabelData?(alertStateStr(alertLabelData.state)):''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.state && alertLabelData.state.name ? alertLabelData.state.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Ping</div> <div class="alert-label-title">Ping</div>
<div class="alert-label-value"> <div class="alert-label-value">
<div v-if="alertLabelData" :class="{'active-icon green':alertLabelData.pingStatus == 1,'active-icon red':alertLabelData.pingStatus == 0}"></div> <div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.status === 1,'red-bg': alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.status === 0}" class="active-icon"></div>
<span v-if="alertLabelData">{{alertLabelData.pingRtt?alertLabelData.pingRtt+'ms':''}}</span> <span v-if="alertLabelData">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.rtt ? alertLabelData.pingInfo.rtt + 'ms':'--'}}</span>
</div> </div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Asset Type</div> <div class="alert-label-title">Asset Type</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.assetType:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Vendor</div> <div class="alert-label-title">Brand</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.vendor:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.brand && alertLabelData.brand.name ? alertLabelData.brand.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Model</div> <div class="alert-label-title">Model</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.model:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.model && alertLabelData.model.name ? alertLabelData.model.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">PingLastReply</div> <div class="alert-label-title">PingLastReply</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.pingLastReply:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.lastUpdate ? alertLabelData.pingInfo.lastUpdate : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Alert</div> <div class="alert-label-title">Alert</div>
<div class="alert-label-value"> <div class="alert-label-value">
<span v-if="alertLabelData" :class="{danger:alertLabelData.alert>0,success:alertLabelData.alert<=0}">{{alertLabelData.alert + alertActiveStr()}}</span> <span v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'danger' : 'success'">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
</div> </div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">DC</div> <div class="alert-label-title">DC</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.dataCenter:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Endpoint</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.endpoint:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Administrator</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.principal:''}}</div>
</div> </div>
</div> </div>
<div class="alert-label-info" v-if="type==='module'" v-loading="loading"> <div class="alert-label-info" v-if="type==='module'" v-loading="loading">
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">ID</div> <div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Name</div> <div class="alert-label-title">Name</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.name:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Project</div> <div class="alert-label-title">Project</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ?alertLabelData.project.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Description</div> <div class="alert-label-title">Description</div>
<div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '-'}}</div>
</div> </div>
</div> </div>
<div class="alert-label-info" v-if="type==='project'" v-loading="loading"> <div class="alert-label-info" v-if="type==='project'" v-loading="loading">
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">ID</div> <div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.id : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Name</div> <div class="alert-label-title">Name</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.name:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Description</div> <div class="alert-label-title">Description</div>
<div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div>
</div> </div>
</div> </div>
<div class="alert-label-info" v-if="type==='endpoint'" v-loading="loading"> <div class="alert-label-info" v-if="type==='endpoint'" v-loading="loading">
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">ID</div> <div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Project</div> <div class="alert-label-title">Project</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ? alertLabelData.project.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Module</div> <div class="alert-label-title">Module</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.module.name:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Labels</div> <div class="alert-label-title">Labels</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.labels:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.labels ? alertLabelData.labels : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Host</div> <div class="alert-label-title">Host</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.host:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.host ? alertLabelData.host : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Port</div> <div class="alert-label-title">Port</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.port:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.port ? alertLabelData.port : '--'}}</div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
<div class="alert-label-title">Path</div> <div class="alert-label-title">Path</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.path:''}}</div> <div class="alert-label-value">{{alertLabelData && alertLabelData.path ? alertLabelData.path : '--'}}</div>
</div> </div>
</div> </div>
</div> </div>
@@ -181,6 +177,28 @@ export default {
}, },
components: { components: {
},
watch: {
id: {
immediate: true,
deep: true,
handler (n) {
this.init()
}
},
that: {
immediate: true,
deep: true,
handler (n) {
}
},
LRTriangle: {
immediate: true,
deep: true,
handler (n) {
}
}
}, },
computed: { computed: {
calcPosition () { calcPosition () {
@@ -215,6 +233,49 @@ export default {
} }
}, },
methods: { methods: {
init () {
this.loading = true
if (this.type === 'asset') {
this.$get('asset/asset/' + this.id).then((res) => {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data
} else {
this.$message.error(res.msg)
}
})
}
if (this.type === 'project') {
this.$get('monitor/project/' + this.id).then((res) => {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data
} else {
this.$message.error(res.msg)
}
})
}
if (this.type === 'module') {
this.$get('monitor/module/' + this.id).then((res) => {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data
} else {
this.$message.error(res.msg)
}
})
}
if (this.type === 'endpoint') {
this.$get('monitor/endpoint/' + this.id).then((res) => {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data
} else {
this.$message.error(res.msg)
}
})
}
},
alertActiveStr () { alertActiveStr () {
return this.$t('overall.active') return this.$t('overall.active')
}, },
@@ -226,48 +287,7 @@ export default {
} }
} }
}, },
mounted () { mounted () {},
if (this.type === 'asset') {
this.$get('/asset/info?id=' + this.id).then((res) => {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data.Basic
} else {
this.$message.error(res.msg)
}
})
}
if (this.type === 'project') {
this.$get('/project?id=' + this.id).then((res) => {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data.list[0]
} else {
this.$message.error(res.msg)
}
})
}
if (this.type === 'module') {
this.$get('/module?id=' + this.id).then((res) => {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data.list[0]
} else {
this.$message.error(res.msg)
}
})
}
if (this.type === 'endpoint') {
this.$get('/endpoint?id=' + this.id).then((res) => {
if (res.msg === 'success') {
this.loading = false
this.alertLabelData = res.data.list[0]
} else {
this.$message.error(res.msg)
}
})
}
},
beforeDestroy () { beforeDestroy () {
} }

8
nezha-fronted/src/components/common/bottomBox/bottomBox.vue
View File

@@ -159,24 +159,24 @@ export default {
moduleTabTitle: [ moduleTabTitle: [
// { prop: 'panel', name: 'Detail' }, // { prop: 'panel', name: 'Detail' },
{ prop: 'endpoint', name: this.$t('asset.endpoint') }, { prop: 'endpoint', name: this.$t('asset.endpoint') },
{ prop: 'moduleAlertMessage', name: 'Alert' } { prop: 'moduleAlertMessage', name: this.$t('overall.alert') }
] ]
}, },
endpoint: { endpoint: {
endpointTabTitle: [ endpointTabTitle: [
// { prop: 'panel', name: 'Detail' }, // { prop: 'panel', name: 'Detail' },
{ prop: 'endpointQuery', name: 'Query' }, { prop: 'endpointQuery', name: 'Query' },
{ prop: 'endpointAlertMessage', name: 'Alert' } { prop: 'endpointAlertMessage', name: this.$t('overall.alert') }
] ]
}, },
chartTemp: { chartTemp: {
chartTempTabTitle: [ chartTempTabTitle: [
{ prop: 'panel', name: 'Template preview' } { prop: 'panel', name: this.$t('overall.tempPrev') }
] ]
}, },
alertRule: { alertRule: {
alertRule: [ alertRule: [
{ prop: 'alertRuleAlertMessage', name: 'Alert' } { prop: 'alertRuleAlertMessage', name: this.$t('overall.alert') }
] ]
}, },
model: [ model: [

10
nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
View File

@@ -2,7 +2,7 @@
<div> <div>
<div class="top-tools top-tools--sub"> <div class="top-tools top-tools--sub">
<div class="top-tool-left"> <div class="top-tool-left">
<div class="sub-list-title">{{title}}：<slot name="title"></slot></div> <div class="sub-list-title">{{bottomHeaderTitle}}：<slot name="title"></slot></div>
<div class="sub-list-tabs"> <div class="sub-list-tabs">
<div v-for="tab in tabs" :key="tab.prop" :class="{'sub-list-tab--active': tab.active || tab.prop=== targetTab}" class="sub-list-tab" @click="changeTab(tab.prop)">{{tab.name}}</div> <div v-for="tab in tabs" :key="tab.prop" :class="{'sub-list-tab--active': tab.active || tab.prop=== targetTab}" class="sub-list-tab" @click="changeTab(tab.prop)">{{tab.name}}</div>
</div> </div>
@@ -82,8 +82,12 @@ export default {
default: true default: true
}, },
title: { title: {
type: String, type: String
default: 'Name' }
},
computed: {
bottomHeaderTitle () {
return this.title || this.$t('overall.name')
} }
}, },
data () { data () {

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

@@ -109,7 +109,8 @@ const cn = {
labels: '标签', labels: '标签',
editType: '类型', editType: '类型',
searchCondition: '搜索条件', searchCondition: '搜索条件',
batchDel: '批量删除' batchDel: '批量删除',
tempPrev: '模板预览'
}, },
setup: { setup: {
step0: '欢迎', step0: '欢迎',

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

@@ -114,7 +114,8 @@ const en = {
silence: 'Silence', silence: 'Silence',
editType: 'Type', editType: 'Type',
searchCondition: 'Search condition', searchCondition: 'Search condition',
batchDel: 'Batches delete' batchDel: 'Batches delete',
tempPrev: 'Template preview'
}, },
pageSize: '/page', pageSize: '/page',
setup: { setup: {

2
nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
View File

@@ -128,7 +128,7 @@ import table from '@/components/common/mixin/table'
import nzAlertTag from '../../../page/alert/nzAlertTag' import nzAlertTag from '../../../page/alert/nzAlertTag'
import chartDataFormat from '../../../charts/chartDataFormat' import chartDataFormat from '../../../charts/chartDataFormat'
import alertRuleInfo from '../../alert/alertRuleInfo' import alertRuleInfo from '../../alert/alertRuleInfo'
import alertLabel from '../../alert/alertLabel2' import alertLabel from '../../alert/alertLabel'
import { calcDurationByStringTimeB } from '../../js/tools' import { calcDurationByStringTimeB } from '../../js/tools'
export default { export default {
name: 'alertMessageTable', name: 'alertMessageTable',