CN-730 feat:出入链路统计及下一跳开发
This commit is contained in:
刘洪洪
@@ -1,41 +1,10 @@
|
||||
<template>
|
||||
<div class="link-direction-grid">
|
||||
<div class="link-statistical-dimension" style="width: 900px;">
|
||||
<div class="dimension-title">{{$t('linkMonitor.egressLink')}} & {{$t('linkMonitor.ingressLink')}}</div>
|
||||
<div class="data-grid">
|
||||
<div class="egress-row">
|
||||
<div class="egress-id" v-for="(item, index) in gridData" :key="index">{{item.linkId}}</div>
|
||||
</div>
|
||||
<div class="data-row" v-for="(row, index) in gridData" :key="index">
|
||||
<div class="ingress-id">{{row.linkId}}</div>
|
||||
<div class="data-item" v-for="(item, index2) in row.egress" :key="index2">
|
||||
<div class="data-item__point"></div>
|
||||
<div class="data-item__point"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="link-statistical-dimension">
|
||||
<div class="dimension-title">{{$t('linkMonitor.egressLink')}} & {{$t('linkMonitor.ingressLink')}}</div>
|
||||
<div class="data-grid">
|
||||
<div class="egress-row">
|
||||
<template v-for="(item, index) in gridData">
|
||||
<div class="egress-id" v-if="index <= 2" :key="index">{{item.linkId}}</div>
|
||||
</template>
|
||||
</div>
|
||||
<template v-for="(row, index) in gridData">
|
||||
<div class="data-row" v-if="index <= 2" :key="index">
|
||||
<div class="ingress-id">{{row.linkId}}</div>
|
||||
<template v-for="(row, index2) in row.egress">
|
||||
<div class="data-item" v-if="index2 <= 2" :key="index2">
|
||||
<div class="data-item__point"></div>
|
||||
<div class="data-item__point"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!--左侧链路出入口-->
|
||||
<popover-content :gridData="gridData" style="width: 900px"/>
|
||||
|
||||
<!--右侧链路下一跳-->
|
||||
<popover-content :gridData="gridData2"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -44,6 +13,9 @@ import chartMixin from '@/views/charts2/chart-mixin'
|
||||
import { getSecond } from '@/utils/date-util'
|
||||
import { api } from '@/utils/api'
|
||||
import { get } from '@/utils/http'
|
||||
import { storageKey } from '@/utils/constants'
|
||||
import PopoverContent from './LinkDirectionGrid/PopoverContent'
|
||||
import { computeScore } from '@/utils/tools'
|
||||
|
||||
export default {
|
||||
name: 'LinkDirectionGrid',
|
||||
@@ -54,46 +26,168 @@ export default {
|
||||
gridData2: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime)
|
||||
components: {
|
||||
PopoverContent
|
||||
},
|
||||
watch: {
|
||||
timeFilter: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.init()
|
||||
}
|
||||
const configRequest = get(api.config, { ckey: 'link_info' })
|
||||
const dataRequest = get(api.linkMonitor.linkTrafficDirection, params)
|
||||
Promise.all([configRequest, dataRequest]).then(res => {
|
||||
if (res[0].code === 200 && res[1].code === 200) {
|
||||
if (res[0].page.list && res[0].page.list.length > 0) {
|
||||
// 链路基本信息
|
||||
const linkInfo = JSON.parse(res[0].page.list[0].cvalue)
|
||||
// 链路流量数据
|
||||
const linkData = res[1].data.result
|
||||
const gridData = []
|
||||
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 = gridData.find(g => g.linkId === ingressLink.linkId)
|
||||
if (data) {
|
||||
const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
|
||||
if (!existedEgressLink) {
|
||||
data.egress.push({ linkId: egressLink.linkId, totalBytes: d.totalBytes })
|
||||
}
|
||||
} else {
|
||||
gridData.push({ linkId: ingressLink.linkId, egress: [{ linkId: egressLink.linkId, totalBytes: d.totalBytes }] })
|
||||
}
|
||||
}
|
||||
})
|
||||
this.gridData = gridData
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.toggleLoading(false)
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
// 链路基本信息
|
||||
let linkInfo = localStorage.getItem(storageKey.linkInfo)
|
||||
linkInfo = JSON.parse(linkInfo)
|
||||
console.log('LinkDirectionGrid.vue---init--获取链路基本信息缓存', linkInfo)
|
||||
|
||||
const params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime)
|
||||
}
|
||||
|
||||
const dataRequest = get(api.linkMonitor.bigramAnalysis1, params)
|
||||
const nextHopRequest = get(api.linkMonitor.bigramNextHopAnalysis1, params)
|
||||
|
||||
Promise.all([dataRequest, nextHopRequest]).then(res => {
|
||||
if (res[0].code === 200 && res[1].code === 200) {
|
||||
// 链路流量数据
|
||||
const linkData = res[0].data.result
|
||||
// 链路下一跳信息
|
||||
const nextLinkData = res[1].data.result
|
||||
|
||||
// 链路流量数据
|
||||
const gridData = []
|
||||
// 链路下一跳数据
|
||||
const gridData2 = []
|
||||
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 = gridData.find(g => g.linkId === ingressLink.linkId)
|
||||
|
||||
// 上行使用情况计算
|
||||
const egressUsage = this.computeUsage(d.egressBytes, egressLink.bandwidth)
|
||||
// 下行使用情况计算
|
||||
const ingressUsage = this.computeUsage(d.ingressBytes, egressLink.bandwidth)
|
||||
// 计算npm分数
|
||||
d.score = this.localComputeScore(d)
|
||||
|
||||
if (data) {
|
||||
const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
|
||||
if (!existedEgressLink) {
|
||||
data.egress.push({
|
||||
linkId: egressLink.linkId,
|
||||
egressUsage: egressUsage,
|
||||
ingressUsage: ingressUsage,
|
||||
totalBytes: d.totalBytes,
|
||||
...d
|
||||
})
|
||||
}
|
||||
} else {
|
||||
gridData.push({
|
||||
linkId: ingressLink.linkId,
|
||||
egress: [{
|
||||
linkId: egressLink.linkId,
|
||||
egressUsage: egressUsage,
|
||||
ingressUsage: ingressUsage,
|
||||
totalBytes: d.totalBytes,
|
||||
...d
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
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')
|
||||
|
||||
if (ingressLink && egressLink) {
|
||||
const data = gridData2.find(g => g.linkId === ingressLink.linkId)
|
||||
|
||||
let egressBanwidth = 0
|
||||
let ingressBanwidth = 0
|
||||
linkInfo.forEach((item) => {
|
||||
if (item.nextHop === d.egressLinkDirection && item.direction === 'egress') {
|
||||
egressBanwidth += item.bandwidth
|
||||
}
|
||||
if (item.nextHop === d.ingressLinkDirection && item.direction === 'ingress') {
|
||||
ingressBanwidth += item.bandwidth
|
||||
}
|
||||
})
|
||||
|
||||
// 上行使用情况计算
|
||||
const egressUsage = this.computeUsage(d.egressBytes, egressBanwidth)
|
||||
// 下行使用情况计算
|
||||
const ingressUsage = this.computeUsage(d.ingressBytes, ingressBanwidth)
|
||||
// 计算npm分数
|
||||
d.score = this.localComputeScore(d)
|
||||
|
||||
if (data) {
|
||||
const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
|
||||
if (!existedEgressLink) {
|
||||
data.egress.push({
|
||||
linkId: egressLink.linkId,
|
||||
nextHop: egressLink.nextHop,
|
||||
egressUsage: egressUsage,
|
||||
ingressUsage: ingressUsage,
|
||||
totalBytes: d.totalBytes,
|
||||
...d
|
||||
})
|
||||
}
|
||||
} else {
|
||||
gridData2.push({
|
||||
linkId: ingressLink.linkId,
|
||||
nextHop: ingressLink.nextHop,
|
||||
egress: [{
|
||||
linkId: egressLink.linkId,
|
||||
nextHop: ingressLink.nextHop,
|
||||
egressUsage: egressUsage,
|
||||
ingressUsage: ingressUsage,
|
||||
totalBytes: d.totalBytes,
|
||||
...d
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log('左侧出入链路数据', gridData)
|
||||
console.log('右侧下一跳数据', gridData2)
|
||||
this.gridData = gridData
|
||||
this.gridData2 = gridData2
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 计算上下行使用占比
|
||||
*/
|
||||
computeUsage (e, bandwidth) {
|
||||
return Math.ceil((e / bandwidth) * 100) + '%'
|
||||
},
|
||||
/**
|
||||
* 本地计算npm分数
|
||||
*/
|
||||
localComputeScore (data, bandwidth) {
|
||||
const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
|
||||
let score = 0
|
||||
keyPre.forEach((item, index) => {
|
||||
score = computeScore(data, index)
|
||||
data[keyPre[index] + 'Score'] = score
|
||||
})
|
||||
let npmScore = Math.ceil((data.tcpScore + data.httpScore + data.sslScore + data.tcpLostScore + data.packetRetransScore) * 6)
|
||||
if (npmScore > 6) {
|
||||
npmScore = 6
|
||||
}
|
||||
return npmScore
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user