gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修改链路部分字段名

Browse Source
This commit is contained in:
chenjinsong
2023-08-29 16:24:02 +08:00
parent 96955d4e45
commit 80c44fa372
5 changed files with 125 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/views/charts2/charts/linkMonitor/LinkBlock.vue
View File

@@ -39,13 +39,13 @@
<svg class="icon item-popover-up" aria-hidden="true">
<use xlink:href="#cn-icon-egress"></use>
</svg>
{{ convertValue(item.egressUsage) }}
{{ convertValue(item.outUsage) }}
</div>
<div :test-id="`linkBlockIngressUsage${index}`">
<svg class="icon item-popover-down" aria-hidden="true">
<use xlink:href="#cn-icon-ingress"></use>
</svg>
{{ convertValue(item.ingressUsage) }}
{{ convertValue(item.inUsage) }}
</div>
</div>
</div>
@@ -92,13 +92,13 @@
<svg class="icon item-popover-up" aria-hidden="true">
<use xlink:href="#cn-icon-egress"></use>
</svg>
{{ convertValue(item.egressUsage) }}
{{ convertValue(item.outUsage) }}
</div>
<div :test-id="`nextHopIngressUsage${index}`">
<svg class="icon item-popover-down" aria-hidden="true">
<use xlink:href="#cn-icon-ingress"></use>
</svg>
{{ convertValue(item.ingressUsage) }}
{{ convertValue(item.inUsage) }}
</div>
</div>
</div>
@@ -207,11 +207,11 @@ export default {
if (hit) {
hit.outBitsRate += d.outBitsRate
hit.inBitsRate += d.inBitsRate
if (info.direction === 'egress') {
hit.egressBandwidth = info.bandwidth
if (info.direction === 'out') {
hit.outBandwidth = info.bandwidth
hit.outLinkId = d.linkId
} else if (info.direction === 'ingress') {
hit.ingressBandwidth = info.bandwidth
} else if (info.direction === 'in') {
hit.inBandwidth = info.bandwidth
hit.inLinkId = d.linkId
}
} else {
@@ -220,11 +220,11 @@ export default {
outBitsRate: d.outBitsRate,
inBitsRate: d.inBitsRate
}
if (info.direction === 'egress') {
hit.egressBandwidth = info.bandwidth
if (info.direction === 'out') {
hit.outBandwidth = info.bandwidth
hit.outLinkId = d.linkId
} else if (info.direction === 'ingress') {
hit.ingressBandwidth = info.bandwidth
} else if (info.direction === 'in') {
hit.inBandwidth = info.bandwidth
hit.inLinkId = d.linkId
}
data.push(hit)
@@ -240,9 +240,9 @@ export default {
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.outBitsRate, s.egressBandwidth)
s.ingressUsage = this.computeUsage(s.inBitsRate, s.ingressBandwidth)
s.popoverWidth = this.computePopoverWidth(s.egressUsage, s.ingressUsage)
s.outUsage = this.computeUsage(s.outBitsRate, s.outBandwidth)
s.inUsage = this.computeUsage(s.inBitsRate, s.inBandwidth)
s.popoverWidth = this.computePopoverWidth(s.outUsage, s.inUsage)
})
this.linkData = sorted
}
@@ -298,12 +298,12 @@ export default {
})
// 上行使用情况计算
const egressUsage = this.computeUsage(s.outBitsRate, sum)
const outUsage = this.computeUsage(s.outBitsRate, sum)
// 下行使用情况计算
const ingressUsage = this.computeUsage(s.inBitsRate, sum)
s.egressUsage = egressUsage
s.ingressUsage = ingressUsage
s.popoverWidth = this.computePopoverWidth(egressUsage, ingressUsage)
const inUsage = this.computeUsage(s.inBitsRate, sum)
s.outUsage = outUsage
s.inUsage = inUsage
s.popoverWidth = this.computePopoverWidth(outUsage, inUsage)
})
this.nextHopData = nextHopSorted
@@ -340,27 +340,27 @@ export default {
* 计算popover弹窗的宽度
* 最小宽度为252px，百分比每大一位，popover弹窗宽度增加7px
*/
computePopoverWidth (egress, ingress) {
computePopoverWidth (out, _in) {
let width = 252
let length = 0
// 将上下行乘100保留2位转换，即10.00为5位，100.00为6位，popover弹窗宽度就增加7px
// 最小宽度为252px，最少位数为上下行相加为8位
let egressUsage = ''
let ingressUsage = ''
let outUsage = ''
let inUsage = ''
if (egress < 0.0001 && egress !== 0) {
egressUsage = '< 0.01%'
if (out < 0.0001 && out !== 0) {
outUsage = '< 0.01%'
} else {
egressUsage = JSON.stringify(parseFloat((egress * 100).toFixed(2)))
outUsage = JSON.stringify(parseFloat((out * 100).toFixed(2)))
}
if (ingress < 0.0001 && ingress !== 0) {
ingressUsage = '< 0.01%'
if (_in < 0.0001 && _in !== 0) {
inUsage = '< 0.01%'
} else {
ingressUsage = JSON.stringify(parseFloat((ingress * 100).toFixed(2)))
inUsage = JSON.stringify(parseFloat((_in * 100).toFixed(2)))
}
length = egressUsage.length + ingressUsage.length
length = outUsage.length + inUsage.length
if (length > 8) {
width = 252 + (length - 8) * 7
@@ -381,7 +381,7 @@ export default {
})
},
drillNextHop (item) {
const queryCondition = `egress_link_direction = '${item.linkDirection}' or ingress_link_direction = '${item.linkDirection}'`
const queryCondition = `out_link_direction = '${item.linkDirection}' or in_link_direction = '${item.linkDirection}'`
this.$router.push({
query: {
...this.$route.query,

140
src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="link-direction-grid">
<!--左侧链路出入口-->
<popover-content :title="$t('linkMonitor.egressLink') + ' & ' + $t('linkMonitor.ingressLink')" :isNoData="isLinkNoData" :gridData="linkGridData" :showError="isLinkShowError" :content="linkErrorMsg" style="width: 900px;"/>
<popover-content :title="$t('linkMonitor.outLink') + ' & ' + $t('linkMonitor.inLink')" :isNoData="isLinkNoData" :gridData="linkGridData" :showError="isLinkShowError" :content="linkErrorMsg" style="width: 900px;"/>
<!--右侧链路下一跳-->
<popover-content :title="$t('linkMonitor.nextHopInternetOfGrid')" :isNoData="isNextNoData" :gridData="nextGridData" :showError="isNextShowError" :content="nextErrorMsg" />
@@ -77,13 +77,13 @@ export default {
this.isLinkShowError = false
// 链路流量数据
const linkData = res[0].data.result
// 接口数据乱序，根据入链路id（ingressLinkId）大小排序之后，
// 再根据同ingressLinkId下的egressLinkId进行排序
// 接口数据乱序，根据入链路id（inLinkId）大小排序之后，
// 再根据同inLinkId下的outLinkId进行排序
linkData.sort((a, b) => {
if (a.ingressLinkId !== b.ingressLinkId) {
return a.ingressLinkId - b.ingressLinkId
if (a.inLinkId !== b.inLinkId) {
return a.inLinkId - b.inLinkId
}
return a.egressLinkId - b.egressLinkId
return a.outLinkId - b.outLinkId
})
this.isLinkNoData = linkData.length === 0
@@ -91,18 +91,18 @@ export default {
// 链路流量数据
const linkGridData = []
linkData.forEach(d => {
const ingressLink = linkInfo.find(l => l.originalLinkId === d.ingressLinkId)
const egressLink = linkInfo.find(l => l.originalLinkId === d.egressLinkId)
if (ingressLink && egressLink) {
const data = linkGridData.find(g => g.linkId === ingressLink.linkId)
const inLink = linkInfo.find(l => l.originalLinkId === d.inLinkId)
const outLink = linkInfo.find(l => l.originalLinkId === d.outLinkId)
if (inLink && outLink) {
const data = linkGridData.find(g => g.linkId === inLink.linkId)
// 上行使用情况计算
const egressUsage = this.computeUsage(d.egressBitsRate, egressLink.bandwidth)
const outUsage = this.computeUsage(d.outBitsRate, outLink.bandwidth)
// 下行使用情况计算
const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressLink.bandwidth)
const inUsage = this.computeUsage(d.inBitsRate, inLink.bandwidth)
// 宽带使用超过90%，赋红点
d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
d.usageMore90 = outUsage >= 0.9 || inUsage >= 0.9
// 计算npm分数
// 分数低于3分，赋红点
d.score = this.localComputeScore(d)
@@ -110,27 +110,27 @@ export default {
d.scoreLow3 = d.score < 3 || d.score === '-'
if (data) {
const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
const existedEgressLink = data.out.find(e => e.linkId === outLink.linkId)
if (!existedEgressLink) {
data.egress.push({
linkId: egressLink.linkId,
egressUsage: egressUsage,
ingressUsage: ingressUsage,
popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
data.out.push({
linkId: outLink.linkId,
outUsage: outUsage,
inUsage: inUsage,
popoverWidth: this.computeWidth(outUsage, inUsage, 'popover'),
valueWidth: this.computeWidth(outUsage, inUsage, 'value'),
totalBitsRate: d.totalBitsRate,
...d
})
}
} else {
linkGridData.push({
linkId: ingressLink.linkId,
egress: [{
linkId: egressLink.linkId,
egressUsage: egressUsage,
ingressUsage: ingressUsage,
popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
linkId: inLink.linkId,
out: [{
linkId: outLink.linkId,
outUsage: outUsage,
inUsage: inUsage,
popoverWidth: this.computeWidth(outUsage, inUsage, 'popover'),
valueWidth: this.computeWidth(outUsage, inUsage, 'value'),
totalBitsRate: d.totalBitsRate,
...d
}]
@@ -154,10 +154,10 @@ export default {
const nextLinkData = res[1].data.result
// 接口数据乱序，根据入方向排序，再根据同个入方向下的出方向进行排序
nextLinkData.sort((a, b) => {
if (a.ingressLinkDirection !== b.ingressLinkDirection) {
return a.ingressLinkDirection.localeCompare(b.ingressLinkDirection, 'zh')
if (a.inLinkDirection !== b.inLinkDirection) {
return a.inLinkDirection.localeCompare(b.inLinkDirection, 'zh')
}
return a.egressLinkDirection.localeCompare(b.egressLinkDirection, 'zh')
return a.outLinkDirection.localeCompare(b.outLinkDirection, 'zh')
})
this.isNextNoData = nextLinkData.length === 0
@@ -166,30 +166,30 @@ export default {
const nextGridData = []
nextLinkData.forEach(d => {
const ingressLink = linkInfo.find(l => l.nextHop === d.ingressLinkDirection && l.direction === 'ingress')
const egressLink = linkInfo.find(l => l.nextHop === d.egressLinkDirection && l.direction === 'egress')
const inLink = linkInfo.find(l => l.nextHop === d.inLinkDirection && l.direction === 'in')
const outLink = linkInfo.find(l => l.nextHop === d.outLinkDirection && l.direction === 'out')
if (ingressLink && egressLink) {
const data = nextGridData.find(g => g.linkId === ingressLink.linkId)
if (inLink && outLink) {
const data = nextGridData.find(g => g.linkId === inLink.linkId)
let egressBanwidth = 0
let ingressBanwidth = 0
let outBandwidth = 0
let inBandwidth = 0
linkInfo.forEach((item) => {
if (item.nextHop === d.egressLinkDirection && item.direction === 'egress') {
egressBanwidth += item.bandwidth
if (item.nextHop === d.outLinkDirection && item.direction === 'out') {
outBandwidth += item.bandwidth
}
if (item.nextHop === d.ingressLinkDirection && item.direction === 'ingress') {
ingressBanwidth += item.bandwidth
if (item.nextHop === d.inLinkDirection && item.direction === 'in') {
inBandwidth += item.bandwidth
}
})
// 上行使用情况计算
const egressUsage = this.computeUsage(d.egressBitsRate, egressBanwidth)
const outUsage = this.computeUsage(d.outBitsRate, outBandwidth)
// 下行使用情况计算
const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressBanwidth)
const inUsage = this.computeUsage(d.inBitsRate, inBandwidth)
// 宽带使用超过90%，赋红点
d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
d.usageMore90 = outUsage >= 0.9 || inUsage >= 0.9
// 计算npm分数
// 分数低于3分，赋红点
d.score = this.localComputeScore(d)
@@ -197,30 +197,30 @@ export default {
d.scoreLow3 = d.score < 3 || d.score === '-'
if (data) {
const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
const existedEgressLink = data.out.find(e => e.linkId === outLink.linkId)
if (!existedEgressLink) {
data.egress.push({
linkId: egressLink.linkId,
nextHop: egressLink.nextHop,
egressUsage: egressUsage,
ingressUsage: ingressUsage,
popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
data.out.push({
linkId: outLink.linkId,
nextHop: outLink.nextHop,
outUsage: outUsage,
inUsage: inUsage,
popoverWidth: this.computeWidth(outUsage, inUsage, 'popover'),
valueWidth: this.computeWidth(outUsage, inUsage, 'value'),
totalBitsRate: d.totalBitsRate,
...d
})
}
} else {
nextGridData.push({
linkId: ingressLink.linkId,
nextHop: ingressLink.nextHop,
egress: [{
linkId: egressLink.linkId,
nextHop: ingressLink.nextHop,
egressUsage: egressUsage,
ingressUsage: ingressUsage,
popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
linkId: inLink.linkId,
nextHop: inLink.nextHop,
out: [{
linkId: outLink.linkId,
nextHop: inLink.nextHop,
outUsage: outUsage,
inUsage: inUsage,
popoverWidth: this.computeWidth(outUsage, inUsage, 'popover'),
valueWidth: this.computeWidth(outUsage, inUsage, 'value'),
totalBitsRate: d.totalBitsRate,
...d
}]
@@ -270,25 +270,25 @@ export default {
* 计算popover弹窗和右侧数据模块的宽度
* 弹窗最小宽度为360px，右侧数据最小宽度为75px，右侧数据每大一位，popover弹窗宽度增加7px
*/
computeWidth (egress, ingress, flag) {
computeWidth (out, _in, flag) {
let width = 0
let length = 0
let egressUsage = ''
let ingressUsage = ''
let outUsage = ''
let inUsage = ''
if (egress < 0.0001 && egress !== 0) {
egressUsage = '<0.01%'
if (out < 0.0001 && out !== 0) {
outUsage = '<0.01%'
} else {
egressUsage = JSON.stringify(parseFloat((egress * 100).toFixed(2)))
outUsage = JSON.stringify(parseFloat((out * 100).toFixed(2)))
}
if (ingress < 0.0001 && ingress !== 0) {
ingressUsage = '<0.01%'
if (_in < 0.0001 && _in !== 0) {
inUsage = '<0.01%'
} else {
ingressUsage = JSON.stringify(parseFloat((ingress * 100).toFixed(2)))
inUsage = JSON.stringify(parseFloat((_in * 100).toFixed(2)))
}
length = egressUsage.length + ingressUsage.length - 1
length = outUsage.length + inUsage.length - 1
if (flag === 'popover') {
width = 360 + length * 7

4
src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue
View File

@@ -158,8 +158,8 @@ export default {
if (this.queryCondition) {
const condition = this.queryCondition.toLowerCase().split(' or ')
if (condition.length > 1) {
params.egressParam = condition.find(c => c.indexOf('common_egress_link_id') > -1 || c.indexOf('egress_link_direction') > -1)
params.ingressParam = condition.find(c => c.indexOf('common_ingress_link_id') > -1 || c.indexOf('ingress_link_direction') > -1)
params.outParam = condition.find(c => c.indexOf('common_out_link_id') > -1 || c.indexOf('out_link_direction') > -1)
params.inParam = condition.find(c => c.indexOf('common_in_link_id') > -1 || c.indexOf('in_link_direction') > -1)
}
}
this.loading = true

12
src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue
View File

@@ -101,10 +101,10 @@ export default {
const condition = this.queryCondition.toLowerCase().split(' or ')
if (condition.length > 1) {
if (n === 0) {
params.q = condition.find(c => c.indexOf('common_ingress_link_id') > -1 || c.indexOf('ingress_link_direction') > -1)
params.q = condition.find(c => c.indexOf('common_in_link_id') > -1 || c.indexOf('in_link_direction') > -1)
url = api.linkMonitor.drilldownQuadrupleIngressAnalysis // 入口
} else {
params.q = condition.find(c => c.indexOf('common_egress_link_id') > -1 || c.indexOf('egress_link_direction') > -1)
params.q = condition.find(c => c.indexOf('common_out_link_id') > -1 || c.indexOf('out_link_direction') > -1)
url = api.linkMonitor.drilldownQquadrupleEgressAnalysis // 出口
}
}
@@ -140,11 +140,11 @@ export default {
if (tab === 0) {
result.forEach(t => {
this.cnLinkInfo.forEach(e => {
if (t.commonIngressLinkId === e.originalLinkId) {
if (t.commonInLinkId === e.originalLinkId) {
t.linkId = e.linkId
t.linkDirection = e.nextHop
t.bandwidth = e.bandwidth
t.value = parseInt(t.ingressBitsRate)
t.value = parseInt(t.inBitsRate)
t.external = `e_${t.externalLocation}`
t.internal = `i_${t.internalLocation}`
}
@@ -153,11 +153,11 @@ export default {
} else {
result.forEach(t => {
this.cnLinkInfo.forEach(e => {
if (t.commonEgressLinkId === e.originalLinkId) {
if (t.commonOutLinkId === e.originalLinkId) {
t.linkId = e.linkId
t.bandwidth = e.bandwidth
t.linkDirection = e.nextHop
t.value = parseInt(t.egressBitsRate)
t.value = parseInt(t.outBitsRate)
t.external = `e_${t.externalLocation}`
t.internal = `i_${t.internalLocation}`
}

32
src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue
View File

@@ -105,29 +105,29 @@ export default {
if (this.queryCondition) {
const condition = this.queryCondition.toLowerCase().split(' or ')
if (condition.length > 1) {
// params.egressParam = true
params.egressParam = condition.find(c => c.indexOf('common_egress_link_id') > -1 || c.indexOf('egress_link_direction') > -1)
params.ingressParam = condition.find(c => c.indexOf('common_ingress_link_id') > -1 || c.indexOf('ingress_link_direction') > -1)
// params.outParam = true
params.outParam = condition.find(c => c.indexOf('common_out_link_id') > -1 || c.indexOf('out_link_direction') > -1)
params.inParam = condition.find(c => c.indexOf('common_in_link_id') > -1 || c.indexOf('in_link_direction') > -1)
let bandwidthAll = 0
let ingressLinkId = null
let egressLinkId = null
let inLinkId = null
let outLinkId = null
let linkDirection = null
const egressParamSplit = params.egressParam.split('=')
const ingressParamSplit = params.ingressParam.split('=')
if (egressParamSplit[0] && (egressParamSplit[0].trim() === 'common_egress_link_id')) {
egressLinkId = egressParamSplit[1].trim()
} else if (egressParamSplit[0].trim() === 'egress_link_direction') {
linkDirection = egressParamSplit[1].trim()
const outParamSplit = params.outParam.split('=')
const inParamSplit = params.inParam.split('=')
if (outParamSplit[0] && (outParamSplit[0].trim() === 'common_out_link_id')) {
outLinkId = outParamSplit[1].trim()
} else if (outParamSplit[0].trim() === 'out_link_direction') {
linkDirection = outParamSplit[1].trim()
}
if (ingressParamSplit[0] && (ingressParamSplit[0].trim() === 'common_ingress_link_id')) {
ingressLinkId = ingressParamSplit[1].trim()
if (inParamSplit[0] && (inParamSplit[0].trim() === 'common_in_link_id')) {
inLinkId = inParamSplit[1].trim()
}
if (egressLinkId && ingressLinkId) {
if (outLinkId && inLinkId) {
this.cnLinkInfo.forEach(e => {
if (ingressLinkId === e.originalLinkId) {
if (inLinkId === e.originalLinkId) {
bandwidthAll += e.bandwidth
}
if (egressLinkId === e.originalLinkId) {
if (outLinkId === e.originalLinkId) {
bandwidthAll += e.bandwidth
}
})