CN-894: 单测用例--用例更新
This commit is contained in:
刘洪洪
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="link-blocks">
|
||||
<div class="block-list" style="position: relative">
|
||||
<div class="block-list__title" v-if="!showError">{{ $t('linkMonitor.links') }}</div>
|
||||
<div class="block-list__title" v-if="!showError1">{{ $t('linkMonitor.links') }}</div>
|
||||
|
||||
<!--无数据noData-->
|
||||
<chart-no-data v-if="isNoData"></chart-no-data>
|
||||
<chart-no-data v-if="linkNoData" test-id="linkBlockNoData"></chart-no-data>
|
||||
|
||||
<div class="block-list__list" v-show="!isNoData">
|
||||
<chart-error v-if="showError" :content="errorMsg1" />
|
||||
<div class="block-list__list" v-show="!linkNoData">
|
||||
<chart-error v-if="showError1" :content="errorMsg1" />
|
||||
<el-popover
|
||||
v-else
|
||||
placement="bottom"
|
||||
@@ -57,12 +57,12 @@
|
||||
</div>
|
||||
|
||||
<div class="block-list" >
|
||||
<div class="block-list__title" v-if="!showError">{{ $t('linkMonitor.nextHopInternet') }}</div>
|
||||
<div class="block-list__title" v-if="!showError2">{{ $t('linkMonitor.nextHopInternet') }}</div>
|
||||
|
||||
<chart-no-data v-if="isNoData"></chart-no-data>
|
||||
<chart-no-data v-if="nextHopNoData" test-id="nextHpNoData"></chart-no-data>
|
||||
|
||||
<div class="block-list__list" v-show="!isNoData">
|
||||
<chart-error v-if="showError" :content="errorMsg2" />
|
||||
<div class="block-list__list" v-show="!nextHopNoData">
|
||||
<chart-error v-if="showError2" :content="errorMsg2" />
|
||||
<el-popover
|
||||
v-else
|
||||
placement="bottom"
|
||||
@@ -91,13 +91,13 @@
|
||||
<div class="popper-content__link-info">
|
||||
<div class="info__label">{{ $t('linkMonitor.linkBlock.bandwidthUsage') }}</div>
|
||||
<div class="info__value" style="display: flex">
|
||||
<div>
|
||||
<div :test-id="`nextHopEgressUsage${index}`">
|
||||
<svg class="icon item-popover-up" aria-hidden="true">
|
||||
<use xlink:href="#cn-icon-egress"></use>
|
||||
</svg>
|
||||
{{ convertValue(item.egressUsage) }}
|
||||
</div>
|
||||
<div>
|
||||
<div :test-id="`nextHopIngressUsage${index}`">
|
||||
<svg class="icon item-popover-down" aria-hidden="true">
|
||||
<use xlink:href="#cn-icon-ingress"></use>
|
||||
</svg>
|
||||
@@ -135,12 +135,14 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isNoData: false,
|
||||
linkNoData: false,
|
||||
nextHopNoData: false,
|
||||
unitTypes,
|
||||
linkData: [],
|
||||
nextHopData: [],
|
||||
gradientColor: ['#FF005C', '#40537E'], // [start, end]
|
||||
showError: false,
|
||||
showError1: false,
|
||||
showError2: false,
|
||||
errorMsg1: '',
|
||||
errorMsg2: ''
|
||||
}
|
||||
@@ -182,122 +184,133 @@ export default {
|
||||
const res = []
|
||||
res[0] = response[0].data
|
||||
res[1] = response[1].data
|
||||
if (res[0].code === 200 && res[1].code === 200) {
|
||||
this.showError = false
|
||||
if (res[0].code === 200) {
|
||||
this.showError1 = false
|
||||
|
||||
const linkData = res[0].data.result
|
||||
const nextHopData = res[1].data.result
|
||||
|
||||
this.isNoData = linkData.length === 0 && nextHopData.length === 0
|
||||
if (this.isNoData) {
|
||||
return
|
||||
this.linkNoData = linkData.length === 0
|
||||
if (!this.linkNoData) {
|
||||
const data = []
|
||||
linkData.forEach(d => {
|
||||
const info = linkInfo.find(i => i.originalLinkId === d.linkId)
|
||||
if (info) {
|
||||
const hit = data.find(d => d.linkId === info.linkId)
|
||||
if (hit) {
|
||||
hit.egressBitsRate += d.egressBitsRate
|
||||
hit.ingressBitsRate += d.ingressBitsRate
|
||||
if (info.direction === 'egress') {
|
||||
hit.egressBandwidth = info.bandwidth
|
||||
hit.egressLinkId = d.linkId
|
||||
} else if (info.direction === 'ingress') {
|
||||
hit.ingressBandwidth = info.bandwidth
|
||||
hit.ingressLinkId = d.linkId
|
||||
}
|
||||
} else {
|
||||
const hit = {
|
||||
linkId: info.linkId,
|
||||
egressBitsRate: d.egressBitsRate,
|
||||
ingressBitsRate: d.ingressBitsRate
|
||||
}
|
||||
if (info.direction === 'egress') {
|
||||
hit.egressBandwidth = info.bandwidth
|
||||
hit.egressLinkId = d.linkId
|
||||
} else if (info.direction === 'ingress') {
|
||||
hit.ingressBandwidth = info.bandwidth
|
||||
hit.ingressLinkId = d.linkId
|
||||
}
|
||||
data.push(hit)
|
||||
}
|
||||
}
|
||||
})
|
||||
data.forEach((item) => {
|
||||
item.totalBitsRate = item.egressBitsRate + item.ingressBitsRate
|
||||
})
|
||||
|
||||
const sorted = data.sort((a, b) => b.totalBitsRate - a.totalBitsRate)
|
||||
const linkColors = colorGradientCalculation(this.gradientColor[0], this.gradientColor[1], sorted.map(s => s.totalBitsRate))
|
||||
sorted.forEach((s, i) => {
|
||||
s.color = linkColors[i]
|
||||
s.egressUsage = this.computeUsage(s.egressBitsRate, s.egressBandwidth)
|
||||
s.ingressUsage = this.computeUsage(s.ingressBitsRate, s.ingressBandwidth)
|
||||
s.popoverWidth = this.computePopoverWidth(s.egressUsage, s.ingressUsage)
|
||||
})
|
||||
this.linkData = sorted
|
||||
}
|
||||
const data = []
|
||||
linkData.forEach(d => {
|
||||
const info = linkInfo.find(i => i.originalLinkId === d.linkId)
|
||||
if (info) {
|
||||
const hit = data.find(d => d.linkId === info.linkId)
|
||||
if (hit) {
|
||||
hit.egressBitsRate += d.egressBitsRate
|
||||
hit.ingressBitsRate += d.ingressBitsRate
|
||||
if (info.direction === 'egress') {
|
||||
hit.egressBandwidth = info.bandwidth
|
||||
hit.egressLinkId = d.linkId
|
||||
} else if (info.direction === 'ingress') {
|
||||
hit.ingressBandwidth = info.bandwidth
|
||||
hit.ingressLinkId = d.linkId
|
||||
}
|
||||
} else {
|
||||
const hit = {
|
||||
linkId: info.linkId,
|
||||
egressBitsRate: d.egressBitsRate,
|
||||
ingressBitsRate: d.ingressBitsRate
|
||||
}
|
||||
if (info.direction === 'egress') {
|
||||
hit.egressBandwidth = info.bandwidth
|
||||
hit.egressLinkId = d.linkId
|
||||
} else if (info.direction === 'ingress') {
|
||||
hit.ingressBandwidth = info.bandwidth
|
||||
hit.ingressLinkId = d.linkId
|
||||
}
|
||||
data.push(hit)
|
||||
}
|
||||
}
|
||||
})
|
||||
data.forEach((item) => {
|
||||
item.totalBitsRate = item.egressBitsRate + item.ingressBitsRate
|
||||
})
|
||||
|
||||
const sorted = data.sort((a, b) => b.totalBitsRate - a.totalBitsRate)
|
||||
const linkColors = colorGradientCalculation(this.gradientColor[0], this.gradientColor[1], sorted.map(s => s.totalBitsRate))
|
||||
sorted.forEach((s, i) => {
|
||||
s.color = linkColors[i]
|
||||
s.egressUsage = this.computeUsage(s.egressBitsRate, s.egressBandwidth)
|
||||
s.ingressUsage = this.computeUsage(s.ingressBitsRate, s.ingressBandwidth)
|
||||
s.popoverWidth = this.computePopoverWidth(s.egressUsage, s.ingressUsage)
|
||||
})
|
||||
this.linkData = sorted
|
||||
|
||||
let directionArr = []
|
||||
nextHopData.forEach((item) => {
|
||||
if (item.egressLinkDirection !== '' && item.ingressLinkDirection !== '') {
|
||||
directionArr.push(item.egressLinkDirection)
|
||||
directionArr.push(item.ingressLinkDirection)
|
||||
}
|
||||
})
|
||||
directionArr = Array.from(new Set(directionArr))
|
||||
|
||||
const newNextHopData = []
|
||||
|
||||
directionArr.forEach((item1) => {
|
||||
const newObj = { egressBitsRate: 0, ingressBitsRate: 0, totalBitsRate: 0, linkDirection: item1 }
|
||||
nextHopData.forEach((item2) => {
|
||||
if (item1 === item2.egressLinkDirection) {
|
||||
newObj.egressBitsRate += item2.egressBitsRate
|
||||
newObj.totalBitsRate += item2.egressBitsRate
|
||||
}
|
||||
if (item1 === item2.ingressLinkDirection) {
|
||||
newObj.ingressBitsRate += item2.ingressBitsRate
|
||||
newObj.totalBitsRate += item2.ingressBitsRate
|
||||
}
|
||||
})
|
||||
newNextHopData.push(newObj)
|
||||
})
|
||||
|
||||
// 下一跳数据处理
|
||||
const nextHopSorted = newNextHopData.sort((a, b) => b.totalBitsRate - a.totalBitsRate)
|
||||
const nextHopColors = colorGradientCalculation(this.gradientColor[0], this.gradientColor[1], nextHopSorted.map(s => s.totalBitsRate))
|
||||
nextHopSorted.forEach((s, i) => {
|
||||
s.color = nextHopColors[i]
|
||||
|
||||
let sum = 0
|
||||
linkInfo.forEach((item) => {
|
||||
// todo 此处需注意，不明确接口返回的方向字段名是拼音还是汉字，后期可能会变动缓存中的nextHop
|
||||
if (s.linkDirection === item.nextHop) {
|
||||
sum += item.bandwidth
|
||||
}
|
||||
})
|
||||
|
||||
// 上行使用情况计算
|
||||
const egressUsage = this.computeUsage(s.egressBitsRate, sum)
|
||||
// 下行使用情况计算
|
||||
const ingressUsage = this.computeUsage(s.ingressBitsRate, sum)
|
||||
s.egressUsage = egressUsage
|
||||
s.ingressUsage = ingressUsage
|
||||
s.popoverWidth = this.computePopoverWidth(egressUsage, ingressUsage)
|
||||
})
|
||||
|
||||
this.nextHopData = nextHopSorted
|
||||
} else {
|
||||
this.isNoData = false
|
||||
this.showError = true
|
||||
this.linkNoData = false
|
||||
this.showError1 = true
|
||||
this.errorMsg1 = res[0].message
|
||||
}
|
||||
|
||||
if (res[1].code === 200) {
|
||||
this.showError2 = false
|
||||
|
||||
const nextHopData = res[1].data.result
|
||||
this.nextHopNoData = nextHopData.length === 0
|
||||
if (!this.nextHopNoData) {
|
||||
let directionArr = []
|
||||
nextHopData.forEach((item) => {
|
||||
if (item.egressLinkDirection !== '' && item.ingressLinkDirection !== '') {
|
||||
directionArr.push(item.egressLinkDirection)
|
||||
directionArr.push(item.ingressLinkDirection)
|
||||
}
|
||||
})
|
||||
directionArr = Array.from(new Set(directionArr))
|
||||
|
||||
const newNextHopData = []
|
||||
|
||||
directionArr.forEach((item1) => {
|
||||
const newObj = { egressBitsRate: 0, ingressBitsRate: 0, totalBitsRate: 0, linkDirection: item1 }
|
||||
nextHopData.forEach((item2) => {
|
||||
if (item1 === item2.egressLinkDirection) {
|
||||
newObj.egressBitsRate += item2.egressBitsRate
|
||||
newObj.totalBitsRate += item2.egressBitsRate
|
||||
}
|
||||
if (item1 === item2.ingressLinkDirection) {
|
||||
newObj.ingressBitsRate += item2.ingressBitsRate
|
||||
newObj.totalBitsRate += item2.ingressBitsRate
|
||||
}
|
||||
})
|
||||
newNextHopData.push(newObj)
|
||||
})
|
||||
|
||||
// 下一跳数据处理
|
||||
const nextHopSorted = newNextHopData.sort((a, b) => b.totalBitsRate - a.totalBitsRate)
|
||||
const nextHopColors = colorGradientCalculation(this.gradientColor[0], this.gradientColor[1], nextHopSorted.map(s => s.totalBitsRate))
|
||||
nextHopSorted.forEach((s, i) => {
|
||||
s.color = nextHopColors[i]
|
||||
|
||||
let sum = 0
|
||||
linkInfo.forEach((item) => {
|
||||
// todo 此处需注意，不明确接口返回的方向字段名是拼音还是汉字，后期可能会变动缓存中的nextHop
|
||||
if (s.linkDirection === item.nextHop) {
|
||||
sum += item.bandwidth
|
||||
}
|
||||
})
|
||||
|
||||
// 上行使用情况计算
|
||||
const egressUsage = this.computeUsage(s.egressBitsRate, sum)
|
||||
// 下行使用情况计算
|
||||
const ingressUsage = this.computeUsage(s.ingressBitsRate, sum)
|
||||
s.egressUsage = egressUsage
|
||||
s.ingressUsage = ingressUsage
|
||||
s.popoverWidth = this.computePopoverWidth(egressUsage, ingressUsage)
|
||||
})
|
||||
|
||||
this.nextHopData = nextHopSorted
|
||||
}
|
||||
} else {
|
||||
this.showError2 = true
|
||||
this.nextHopNoData = false
|
||||
this.errorMsg2 = res[1].message
|
||||
}
|
||||
}).catch(e => {
|
||||
console.error(e)
|
||||
this.isNoData = false
|
||||
this.showError = true
|
||||
this.linkNoData = false
|
||||
this.nextHopNoData = false
|
||||
this.showError1 = true
|
||||
this.showError2 = true
|
||||
// todo 此处数据还待验证
|
||||
this.errorMsg1 = e.message
|
||||
this.errorMsg2 = e.message
|
||||
|
||||
Reference in New Issue
Block a user