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

fix: 修复link下钻带宽不显示问题

Browse Source
This commit is contained in:
chenjinsong
2022-10-13 19:53:52 +08:00
parent 19a3dcfdf8
commit c9ae7a4998
3 changed files with 59 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,7 +28,7 @@
<div class="popper-content__link-info"> <div class="popper-content__link-info">
<div class="info__label">{{ $t('linkMonitor.linkBlock.total') }}</div> <div class="info__label">{{ $t('linkMonitor.linkBlock.total') }}</div>
<div class="info__value" style="margin-left: 8px"> <div class="info__value" style="margin-left: 8px">
{{ unitConvert(item.totalBitsRate, unitTypes.bps).join(' ') }}bps {{ unitConvert(item.totalBitsRate, unitTypes.bps).join(' ') }}
</div> </div>
</div> </div>
<div class="popper-content__link-info"> <div class="popper-content__link-info">
@@ -81,7 +81,7 @@
<div class="popper-content__link-info"> <div class="popper-content__link-info">
<div class="info__label">{{ $t('linkMonitor.linkBlock.total') }}</div> <div class="info__label">{{ $t('linkMonitor.linkBlock.total') }}</div>
<div class="info__value" style="margin-left: 8px"> <div class="info__value" style="margin-left: 8px">
{{ unitConvert(item.totalBitsRate, unitTypes.bps).join(' ') }}bps {{ unitConvert(item.totalBitsRate, unitTypes.bps).join(' ') }}
</div> </div>
</div> </div>
<div class="popper-content__link-info"> <div class="popper-content__link-info">
@@ -291,7 +291,7 @@ export default {
return width return width
}, },
drillLinkId (item) { drillLinkId (item) {
const queryCondition = `common_egress_link_id = ${item.egressLinkId} AND common_ingress_link_id = ${item.ingressLinkId}` const queryCondition = `common_egress_link_id = ${item.egressLinkId} or common_ingress_link_id = ${item.ingressLinkId}`
this.$router.push({ this.$router.push({
query: { query: {
...this.$route.query, ...this.$route.query,
@@ -304,7 +304,7 @@ export default {
}) })
}, },
drillNextHop (item) { drillNextHop (item) {
const queryCondition = `egress_link_direction = '${item.linkDirection}' AND ingress_link_direction = '${item.linkDirection}'` const queryCondition = `egress_link_direction = '${item.linkDirection}' or ingress_link_direction = '${item.linkDirection}'`
this.$router.push({ this.$router.push({
query: { query: {
...this.$route.query, ...this.$route.query,

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

@@ -91,7 +91,7 @@ export default {
} }
let url = '' let url = ''
if (this.queryCondition) { if (this.queryCondition) {
const condition = this.queryCondition.toLowerCase().split(' and ') const condition = this.queryCondition.toLowerCase().split(' or ')
if (condition.length > 1) { if (condition.length > 1) {
if (n == 0) { if (n == 0) {
params.q = condition.find(c => c.indexOf('common_ingress_link_id') > -1) params.q = condition.find(c => c.indexOf('common_ingress_link_id') > -1)
@@ -135,7 +135,7 @@ export default {
if (t.commonIngressLinkId == e.originalLinkId) { if (t.commonIngressLinkId == e.originalLinkId) {
t.linkId = e.linkId t.linkId = e.linkId
t.linkDirection = e.nextHop t.linkDirection = e.nextHop
t.bandWidth = e.bandwidth t.bandwidth = e.bandwidth
t.value = parseInt(t.ingressBitsRate) t.value = parseInt(t.ingressBitsRate)
t.client = `c_${t.clientProvince}` t.client = `c_${t.clientProvince}`
t.server = `s_${t.serverProvince}` t.server = `s_${t.serverProvince}`
@@ -147,8 +147,8 @@ export default {
this.cnLinkInfo.forEach(e => { this.cnLinkInfo.forEach(e => {
if (t.commonEgressLinkId == e.originalLinkId) { if (t.commonEgressLinkId == e.originalLinkId) {
t.linkId = e.linkId t.linkId = e.linkId
t.bandwidth = e.bandwidth
t.linkDirection = e.nextHop t.linkDirection = e.nextHop
t.bandWidth = e.bandwidth
t.value = parseInt(t.egressBitsRate) t.value = parseInt(t.egressBitsRate)
t.client = `c_${t.clientProvince}` t.client = `c_${t.clientProvince}`
t.server = `s_${t.serverProvince}` t.server = `s_${t.serverProvince}`
@@ -179,7 +179,7 @@ export default {
if (existLink0) { if (existLink0) {
existLink0.value += r.value existLink0.value += r.value
} else { } else {
links0.push({ source: r.client, target: r.linkId, name0: r.clientProvince, name1: r.linkId, name2: r.linkDirection, name3: r.serverProvince, value: r.value, depth: 0 }) links0.push({ source: r.client, target: r.linkId, tooltip0: r.clientProvince, tooltip1: r.linkId, value: r.value, depth: 0, bandwidth: r.bandwidth })
} }
const existLinkAnalyze0 = linksAnalyze0.find(l => l.name === r.client) const existLinkAnalyze0 = linksAnalyze0.find(l => l.name === r.client)
if (existLinkAnalyze0) { if (existLinkAnalyze0) {
@@ -195,7 +195,7 @@ export default {
if (existLink1) { if (existLink1) {
existLink1.value += r.value existLink1.value += r.value
} else { } else {
links1.push({ source: r.linkId, target: r.linkDirection, name0: r.clientProvince, name1: r.linkId, name2: r.linkDirection, name3: r.serverProvince, value: r.value, depth: 1 }) links1.push({ source: r.linkId, target: r.linkDirection, tooltip0: r.linkId, tooltip1: r.linkDirection, value: r.value, depth: 1, bandwidth: r.bandwidth })
} }
// 第三列 // 第三列
if (!data2.some(d => d.name === r.linkDirection)) { if (!data2.some(d => d.name === r.linkDirection)) {
@@ -205,7 +205,7 @@ export default {
if (existLink2) { if (existLink2) {
existLink2.value += r.value existLink2.value += r.value
} else { } else {
links2.push({ source: r.linkDirection, target: r.server, name0: r.clientProvince, name1: r.linkId, name2: r.linkDirection, name3: r.serverProvince, value: r.value, depth: 2 }) links2.push({ source: r.linkDirection, target: r.server, tooltip0: r.linkDirection, tooltip1: r.serverProvince, value: r.value, depth: 2 })
} }
const existLinkAnalyze2 = linksAnalyze2.find(l => l.name === r.server) const existLinkAnalyze2 = linksAnalyze2.find(l => l.name === r.server)
if (existLinkAnalyze2) { if (existLinkAnalyze2) {
@@ -228,7 +228,7 @@ export default {
if (existLink0) { if (existLink0) {
existLink0.value += r.value existLink0.value += r.value
} else { } else {
links0.push({ source: r.client, target: r.linkDirection, name0: r.clientProvince, name1: r.linkDirection, name2: r.linkId, name3: r.serverProvince, value: r.value, depth: 0 }) links0.push({ source: r.client, target: r.linkDirection, tooltip0: r.clientProvince, tooltip1: r.linkDirection, value: r.value, depth: 0 })
} }
const existLinkAnalyze0 = linksAnalyze0.find(l => l.name === r.client) const existLinkAnalyze0 = linksAnalyze0.find(l => l.name === r.client)
if (existLinkAnalyze0) { if (existLinkAnalyze0) {
@@ -244,7 +244,7 @@ export default {
if (existLink1) { if (existLink1) {
existLink1.value += r.value existLink1.value += r.value
} else { } else {
links1.push({ source: r.linkDirection, target: r.linkId, name0: r.clientProvince, name1: r.linkDirection, name2: r.linkId, name3: r.serverProvince, value: r.value, depth: 1 }) links1.push({ source: r.linkDirection, target: r.linkId, tooltip0: r.linkDirection, tooltip1: r.linkId, value: r.value, depth: 1, bandwidth: r.bandwidth })
} }
// 第三列 // 第三列
if (!data2.some(d => d.name === r.linkId)) { if (!data2.some(d => d.name === r.linkId)) {
@@ -254,7 +254,7 @@ export default {
if (existLink2) { if (existLink2) {
existLink2.value += r.value existLink2.value += r.value
} else { } else {
links2.push({ source: r.linkId, target: r.server, name0: r.clientProvince, name1: r.linkDirection, name2: r.linkId, name3: r.serverProvince, value: r.value, depth: 2 }) links2.push({ source: r.linkId, target: r.server, tooltip0: r.linkId, tooltip1: r.serverProvince, value: r.value, depth: 2, bandwidth: r.bandwidth })
} }
const existLinkAnalyze2 = linksAnalyze2.find(l => l.name === r.server) const existLinkAnalyze2 = linksAnalyze2.find(l => l.name === r.server)
if (existLinkAnalyze2) { if (existLinkAnalyze2) {
@@ -294,7 +294,7 @@ export default {
if (existOtherSLink0) { if (existOtherSLink0) {
existOtherSLink0.value += l0.value existOtherSLink0.value += l0.value
} else { } else {
othersLinks0.push({ ...l0, source: 'c_others' }) othersLinks0.push({ ...l0, source: 'c_others', tooltip0: 'others' })
} }
} }
}) })
@@ -323,7 +323,7 @@ export default {
if (existOtherLinkAnalyze2) { if (existOtherLinkAnalyze2) {
existOtherLinkAnalyze2.value += sl.value existOtherLinkAnalyze2.value += sl.value
} else { } else {
otherLinksAnalyze2.push({ ...sl, name: 'c_others' }) otherLinksAnalyze2.push({ ...sl, name: 's_others' })
} }
} }
}) })
@@ -337,7 +337,7 @@ export default {
if (existOtherSLink2) { if (existOtherSLink2) {
existOtherSLink2.value += l2.value existOtherSLink2.value += l2.value
} else { } else {
othersLinks2.push({ ...l2, target: 's_others' }) othersLinks2.push({ ...l2, target: 's_others', tooltip1: 'others' })
} }
} }
}) })
@@ -372,25 +372,30 @@ export default {
this.chartOption = this.$_.cloneDeep(linksTrafficSankeyOption) this.chartOption = this.$_.cloneDeep(linksTrafficSankeyOption)
this.chartOption.tooltip.formatter = function (param) { this.chartOption.tooltip.formatter = function (param) {
if (param.data.name) return '' if (param.data.name) return ''
const data = `${param.data.name0} > ${param.data.name1} > ${param.data.name2} > ${param.data.name3}` const data = `${param.data.tooltip0} > ${param.data.tooltip1}`
const value = unitConvert((param.data.value / param.data.bandWidth), unitTypes.percent).join(' ') const value = param.data.bandwidth ? unitConvert((param.data.value / param.data.bandwidth), unitTypes.percent).join(' ') : 0
return ` let html = `
<div class="traffic-sankey"> <div class="traffic-sankey">
<div class="traffic-sankey-row-header"> <div class="traffic-sankey-row-header">
<div class="traffic-sankey__row-value">${data}</div> <div class="traffic-sankey__row-value">${data}</div>
</div> </div>
<div class="traffic-sankey-row-body"> <div class="traffic-sankey-row-body">
<div class="traffic-sankey__tooltip-left"> <div class="traffic-sankey__tooltip-left">
<div class="traffic-sankey__row-label">${_this.$t('overall.traffic')}</div> <div class="traffic-sankey__row-label">${_this.$t('overall.traffic')}</div>`
<div class="traffic-sankey__row-label">${_this.$t('linkMonitor.bandwidthUsage')}</div> if (value) {
</div> html += `<div class="traffic-sankey__row-label">${_this.$t('linkMonitor.bandwidthUsage')}</div>`
}
html += `</div>
<div class="traffic-sankey__tooltip-right"> <div class="traffic-sankey__tooltip-right">
<div class="traffic-sankey__row-value">${unitConvert(param.value, unitTypes.bps).join(' ')}</div> <div class="traffic-sankey__row-value">${unitConvert(param.value, unitTypes.bps).join(' ')}</div>`
<div class="traffic-sankey__row-value">${value}</div> if (value) {
</div> html += `<div class="traffic-sankey__row-value">${value}</div>`
}
html += `</div>
</div> </div>
</div> </div>
` `
return html
} }
this.chartOption.series[0].data = data this.chartOption.series[0].data = data
this.chartOption.series[0].links = links this.chartOption.series[0].links = links

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

@@ -96,21 +96,36 @@ export default {
if (this.linkTrafficListData.npmScore > 6) { if (this.linkTrafficListData.npmScore > 6) {
this.linkTrafficListData.npmScore = 6 this.linkTrafficListData.npmScore = 6
} }
let condition = '' const condition = this.queryCondition.toLowerCase().split(' or ')
if (this.queryCondition.indexOf(' AND ') > -1) { if (condition.length > 1) {
condition = this.queryCondition.split(/["'= ](.*?)["'= ]/) let bandwidthAll = 0
} else { const condition0 = condition[0].split('=')
condition = this.queryCondition const condition1 = condition[1].split('=')
} let ingressLinkId = null
let bandwidthAll = 0 let egressLinkId = null
this.cnLinkInfo.forEach(e => { if (condition0[0] && condition0[0].trim() === 'common_egress_link_id') {
if (condition.length > 1 && (condition[3] == e.originalLinkId || condition[8] == e.originalLinkId)) { egressLinkId = condition0[1].trim()
bandwidthAll += e.bandwidth
} else if (condition.length > 1 && condition[4] == e.nextHop) {
bandwidthAll += e.bandwidth
} }
}) if (condition0[0] && condition0[0].trim() === 'common_ingress_link_id') {
this.bandWidth = bandwidthAll ingressLinkId = condition0[1].trim()
}
if (condition1[0] && condition1[0].trim() === 'common_egress_link_id') {
egressLinkId = condition1[1].trim()
}
if (condition1[0] && condition1[0].trim() === 'common_ingress_link_id') {
ingressLinkId = condition1[1].trim()
}
console.info(condition0, condition1, ingressLinkId, egressLinkId)
this.cnLinkInfo.forEach(e => {
if (ingressLinkId === e.originalLinkId) {
bandwidthAll += e.bandwidth
}
if (egressLinkId === e.originalLinkId) {
bandwidthAll += e.bandwidth
}
})
this.bandWidth = bandwidthAll
}
} }
}).catch(e => { }).catch(e => {
console.error(e) console.error(e)