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-box">
<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 class="alert-label-box">
<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 class="alert-label-box">
<div class="alert-label-title">Host</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.host:''}}</div>
<div class="alert-label-title">ManageIp</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
</div>
<div class="alert-label-box">
<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 class="alert-label-box">
<div class="alert-label-title">Ping</div>
<div class="alert-label-value">
<div v-if="alertLabelData" :class="{'active-icon green':alertLabelData.pingStatus == 1,'active-icon red':alertLabelData.pingStatus == 0}"></div>
<span v-if="alertLabelData">{{alertLabelData.pingRtt?alertLabelData.pingRtt+'ms':''}}</span>
<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 && alertLabelData.pingInfo && alertLabelData.pingInfo.rtt ? alertLabelData.pingInfo.rtt + 'ms':'--'}}</span>
</div>
</div>
<div class="alert-label-box">
<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 class="alert-label-box">
<div class="alert-label-title">Vendor</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.vendor:''}}</div>
<div class="alert-label-title">Brand</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.brand && alertLabelData.brand.name ? alertLabelData.brand.name : '--'}}</div>
</div>
<div class="alert-label-box">
<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 class="alert-label-box">
<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 class="alert-label-box">
<div class="alert-label-title">Alert</div>
<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 class="alert-label-box">
<div class="alert-label-title">DC</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.dataCenter:''}}</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 class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name : '--'}}</div>
</div>
</div>
<div class="alert-label-info" v-if="type==='module'" v-loading="loading">
<div class="alert-label-box">
<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:''}}</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
</div>
<div class="alert-label-box">
<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 class="alert-label-box">
<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 class="alert-label-info" v-if="type==='project'" v-loading="loading">
<div class="alert-label-box">
<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 class="alert-label-box">
<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 class="alert-label-box">
<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 class="alert-label-info" v-if="type==='endpoint'" v-loading="loading">
<div class="alert-label-box">
<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">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 class="alert-label-box">
<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 class="alert-label-box">
<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 class="alert-label-box">
<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 class="alert-label-box">
<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 class="alert-label-box">
<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>
@@ -181,6 +177,28 @@ export default {
},
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: {
calcPosition () {
@@ -215,6 +233,49 @@ export default {
}
},
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 () {
return this.$t('overall.active')
},
@@ -226,48 +287,7 @@ export default {
}
}
},
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)
}
})
}
},
mounted () {},
beforeDestroy () {
}

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

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

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

@@ -2,7 +2,7 @@
<div>
<div class="top-tools top-tools--sub">
<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 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>
@@ -82,8 +82,12 @@ export default {
default: true
},
title: {
type: String,
default: 'Name'
type: String
}
},
computed: {
bottomHeaderTitle () {
return this.title || this.$t('overall.name')
}
},
data () {

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

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

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

@@ -114,7 +114,8 @@ const en = {
silence: 'Silence',
editType: 'Type',
searchCondition: 'Search condition',
batchDel: 'Batches delete'
batchDel: 'Batches delete',
tempPrev: 'Template preview'
},
pageSize: '/page',
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 chartDataFormat from '../../../charts/chartDataFormat'
import alertRuleInfo from '../../alert/alertRuleInfo'
import alertLabel from '../../alert/alertLabel2'
import alertLabel from '../../alert/alertLabel'
import { calcDurationByStringTimeB } from '../../js/tools'
export default {
name: 'alertMessageTable',