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

NEZ-1191 fix: 修复Endpoint 详情页面显示状态不正确

Browse Source
This commit is contained in:
@changcode
2021-11-08 14:56:50 +08:00
parent 30ddb294f5
commit fa1b6e4530
3 changed files with 84 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
nezha-fronted/src/components/charts/chart-detail.vue
View File

@@ -41,12 +41,14 @@
<span class="content-text">{{assetKey[key]}}</span> <span class="content-text">{{assetKey[key]}}</span>
<div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{assetKey[key]}}</div> <div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{assetKey[key]}}</div>
</div> </div>
<div :id="`value-${index}-${i}`" class="content-item-value item-tip"> <div :id="`value-${index}-${i}`" class="content-item-value item-tip">
<span v-if="key === 'state'"> <span v-if="key === 'name'">{{value}}</span>
{{value}} <span v-else-if="key === 'type'">{{value}}</span>
</span> <span v-else-if="key === 'state'">{{value}}</span>
<span v-else-if="key === 'alert'" :class="{'success': value <= 0, 'danger': value > 0}" class="as-button">{{value + ' ' + $t('overall.active')}}</span> <span v-else-if="key === 'brand'">{{value}}</span>
<!-- <span v-else-if="key === 'model'">{{value}}</span>-->
<span v-else-if="key === 'alert'" class="as-button"><i :class=" value > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;{{value}}</span>
<span v-else-if="key === 'endpoint'" class="as-button"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;{{value}}</span>
<div v-else-if="key === 'tags'" class="no-overflow" style="padding-bottom: 5px;"> <div v-else-if="key === 'tags'" class="no-overflow" style="padding-bottom: 5px;">
<template v-if="value && value.length > 0"> <template v-if="value && value.length > 0">
<nz-alert-tag v-for="(tagItem, tagIndex) in value" :key="tagItem.id" :cursor-point="false" <nz-alert-tag v-for="(tagItem, tagIndex) in value" :key="tagItem.id" :cursor-point="false"
@@ -127,8 +129,39 @@
<div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{endpointKey[key]}}</div> <div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{endpointKey[key]}}</div>
</div> </div>
<div :id="`value-${index}-${i}`" class="content-item-value item-tip"> <div :id="`value-${index}-${i}`" class="content-item-value item-tip">
<span class="content-text">{{value || value === 0 ? value : "&nbsp;"}}</span> <template>
<div :class="itemTip(`value-${index}`, key, i, ready)" class="item-tip-hide item-tip-value el-popover">{{value}}</div> <span v-if="key === 'alerts'"><i :class=" value > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;{{value}}</span>
<span v-else-if="key === 'asset'"><i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;{{value}}</span>
<span v-else-if="key === 'module'"><i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;&nbsp;{{value}}</span>
<span v-else-if="key === 'state'">
<span style="width: auto">
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
<span v-if="value[0].state === 0">
<span class="active-icon red-bg inline-block"></span>
</span>
<span v-else-if="value[0].state === 1">
<span class="active-icon green-bg inline-block"></span>
</span>
<span v-else-if="value[0].state">
<span class="active-icon gray-bg inline-block"></span>
</span>
</span>
<span style="width: auto">
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
<span v-if="value[1].state === 0">
<span class="active-icon red-bg inline-block"></span>
</span>
<span v-else-if="value[1].state === 1">
<span class="active-icon green-bg inline-block"></span>
</span>
<span v-else-if="value[1].state">
<span class="active-icon gray-bg inline-block"></span>
</span>
</span>
</span>
<span v-else class="content-text">{{value || value === 0 ? value : "&nbsp;"}}</span>
<div :class="itemTip(`value-${index}`, key, i, ready)" class="item-tip-hide item-tip-value el-popover">{{value}}</div>
</template>
</div> </div>
</div> </div>
@@ -257,24 +290,29 @@ export default {
oldSearchTime: [], oldSearchTime: [],
assetKey: { assetKey: {
host: this.$t('asset.host'), // host: this.$t('asset.host'),
id: 'Id', id: 'Id',
assetType: this.$t('asset.assetType'), name: this.$t('overall.name'),
sn: this.$t('asset.device'), manageIp: this.$t('overall.manageIp'),
type: this.$t('overall.type'),
// assetType: this.$t('asset.assetType'),
// sn: this.$t('asset.device'),
state: this.$t('asset.assetState'), state: this.$t('asset.assetState'),
pingRtt: this.$t('asset.assetPing'), pingRtt: this.$t('asset.assetPing'),
dataCenter: this.$t('asset.dataCenter'), dataCenter: this.$t('asset.dataCenter'),
cabinet: this.$t('asset.cabinet'), cabinet: this.$t('asset.cabinet'),
brand: this.$t('asset.brand'),
model: this.$t('asset.model'), model: this.$t('asset.model'),
vendor: this.$t('asset.vendor'), tags: this.$t('overall.labels'),
purchaseDate: this.$t('asset.procurementDate'), alert: this.$t('asset.alerts'),
endpoint: this.$t('asset.modules')
// vendor: this.$t('asset.vendor'),
// purchaseDate: this.$t('asset.procurementDate'),
// principal: this.$t('asset.principal'), // principal: this.$t('asset.principal'),
// tel: this.$t('asset.principalTel'), // tel: this.$t('asset.principalTel'),
// pingStatus: this.$t('asset.assetPing'), // pingStatus: this.$t('asset.assetPing'),
pingLastReply: this.$t('asset.lastReply'), // pingLastReply: this.$t('asset.lastReply'),
endpoint: this.$t('asset.modules'),
alert: this.$t('asset.alerts'),
tags: this.$t('overall.tag')
}, },
projectKey: { projectKey: {
id: 'ID', id: 'ID',
@@ -293,9 +331,10 @@ export default {
endpointKey: { endpointKey: {
id: 'ID', id: 'ID',
name: this.$t('overall.name'), name: this.$t('overall.name'),
type: this.$t('overall.type'), // type: this.$t('overall.type'),
project: this.$t('overall.project'), project: this.$t('overall.project'),
module: this.$t('project.module.module'), module: this.$t('project.module.module'),
asset: this.$t('overall.asset'),
alerts: this.$t('project.endpoint.alerts'), alerts: this.$t('project.endpoint.alerts'),
state: this.$t('project.endpoint.state') state: this.$t('project.endpoint.state')
} }
@@ -420,6 +459,7 @@ export default {
this.panelIdInner = panelId this.panelIdInner = panelId
this.data = chartItem this.data = chartItem
this.detail = detail this.detail = detail
console.log(this.detail)
// console.info(this.data, this.detail) // console.info(this.data, this.detail)
/* if (this.detail[0] && this.detail[0].type && this.detail[0].type == 'endpointInfo') { // endpointInfo的小图表 /* if (this.detail[0] && this.detail[0].type && this.detail[0].type == 'endpointInfo') { // endpointInfo的小图表
this.$nextTick(() => { this.$nextTick(() => {
@@ -518,3 +558,8 @@ export default {
} }
} }
</script> </script>
<style>
.colorFA901C{
color: #fa901c;
}
</style>

32
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -1488,16 +1488,18 @@ export default {
chartInfo.name = this.$t('project.chart.endpointInfo') chartInfo.name = this.$t('project.chart.endpointInfo')
chartInfo.from = fromRoute.endpoint chartInfo.from = fromRoute.endpoint
const basicInfo = JSON.parse(JSON.stringify(this.obj)) const basicInfo = JSON.parse(JSON.stringify(this.obj))
console.log(basicInfo)
detail.push( detail.push(
{ {
data: { data: {
id: basicInfo.id, id: basicInfo.id,
name: basicInfo.name, name: basicInfo.name,
type: basicInfo.module.type, // type: basicInfo.module.type,
project: basicInfo.project.name, project: basicInfo.project.name,
module: basicInfo.module.name, module: basicInfo.module.name,
asset: basicInfo.asset.manageIp,
alerts: basicInfo.alertNum, alerts: basicInfo.alertNum,
state: basicInfo.state === 1 ? 'up' : 'down' state: basicInfo.configs
}, },
type: 'endpointInfo', type: 'endpointInfo',
title: this.$t('project.chart.basicTitle') title: this.$t('project.chart.basicTitle')
@@ -1538,23 +1540,27 @@ export default {
// basic.cabinet = basic.cabinet ? basic.cabinet.name : '-' // basic.cabinet = basic.cabinet ? basic.cabinet.name : '-'
const obj = { const obj = {
id: basic.id, id: basic.id,
host: basic.pingInfo ? basic.pingInfo.host : '-', // host: basic.pingInfo ? basic.pingInfo.host : '-',
assetType: basic.type ? basic.type.name : '-', // assetType: basic.type ? basic.type.name : '-',
name: basic.name ? basic.name : '-',
manageIp: basic.manageIp,
type: basic.type ? basic.type.name : '-',
state: basic.state ? basic.state.name : '-', state: basic.state ? basic.state.name : '-',
pingRtt: basic.pingInfo ? basic.pingInfo.rtt : '', pingRtt: basic.pingInfo ? basic.pingInfo.rtt : '',
dataCenter: basic.dc ? basic.dc.name : '-', dataCenter: basic.dc ? basic.dc.name : '-',
cabinet: basic.cabinet ? basic.cabinet.name : '-', cabinet: basic.cabinet ? basic.cabinet.name : '-',
alert: basic.alertNum, brand: basic.brand ? basic.brand.name : '-',
endpoint: basic.endpointNum,
purchaseDate: basic.purchaseDate,
vendor: basic.brand ? basic.brand.name : '-',
model: basic.model ? basic.model.name : '-', model: basic.model ? basic.model.name : '-',
sn: basic.sn,
tags: basic.fields, tags: basic.fields,
pingStatus: basic.pingInfo ? basic.pingInfo.status : '-', alert: basic.alertNum,
cabinetStart: basic.cabinetStart, endpoint: basic.endpointNum
cabinetEnd: basic.cabinetEnd, // purchaseDate: basic.purchaseDate,
pingLastReply: basic.pingInfo ? basic.pingInfo.lastUpdate : '' // vendor: basic.brand ? basic.brand.name : '-',
// sn: basic.sn,
// pingStatus: basic.pingInfo ? basic.pingInfo.status : '-',
// cabinetStart: basic.cabinetStart,
// cabinetEnd: basic.cabinetEnd,
// pingLastReply: basic.pingInfo ? basic.pingInfo.lastUpdate : ''
// principal: basic.dc ? basic.dc.principal : '-', // principal: basic.dc ? basic.dc.principal : '-',
// tel: basic.tel, // tel: basic.tel,
} }

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

@@ -89,7 +89,7 @@
<div class="alert-label-title">{{$t('overall.alert')}}</div> <div class="alert-label-title">{{$t('overall.alert')}}</div>
<div class="alert-label-value"> <div class="alert-label-value">
<i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp; <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span> <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
</div> </div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
@@ -130,7 +130,7 @@
<div class="alert-label-title">{{$t('overall.alert')}}</div> <div class="alert-label-title">{{$t('overall.alert')}}</div>
<div class="alert-label-value"> <div class="alert-label-value">
<i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp; <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span> <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
</div> </div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">
@@ -170,7 +170,7 @@
<div class="alert-label-title">{{$t('overall.alert')}}</div> <div class="alert-label-title">{{$t('overall.alert')}}</div>
<div class="alert-label-value"> <div class="alert-label-value">
<i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp; <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span> <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
</div> </div>
</div> </div>
<div class="alert-label-box"> <div class="alert-label-box">