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

CN-749 fix: 统一error交互

Browse Source
This commit is contained in:
chenjinsong
2023-03-16 19:07:37 +08:00
parent 831b00fc78
commit 3aa2c19dbd
22 changed files with 420 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/Login.vue
View File

@@ -40,6 +40,7 @@
<script>
import { mapActions } from 'vuex'
import { post, get } from '@/utils/http'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { storageKey } from '@/utils/constants'
import { api } from '@/utils/api'
@@ -69,21 +70,21 @@ export default {
return
}
this.loading = true
post(api.login, { username: this.username, pin: this.pin }).then(
axios.post(api.login, { username: this.username, pin: this.pin }).then(
res => {
if (res.code === 200) {
if (!_.isEmpty(res.data.lang)) {
localStorage.setItem(storageKey.language, res.data.lang)
if (res.data.code === 200) {
if (!_.isEmpty(res.data.data.lang)) {
localStorage.setItem(storageKey.language, res.data.data.lang)
}
if (!_.isEmpty(res.data.theme)) {
localStorage.setItem(storageKey.theme, res.data.theme)
if (!_.isEmpty(res.data.data.theme)) {
localStorage.setItem(storageKey.theme, res.data.data.theme)
}
res.loginSuccessPath = this.$route.query.redirect
this.loginSuccess(res)
localStorage.setItem(storageKey.username, this.username)
localStorage.setItem(storageKey.userId, res.data.userId)
localStorage.setItem(storageKey.token, res.data.token)
} else if (res.code === 518005) {
localStorage.setItem(storageKey.userId, res.data.data.userId)
localStorage.setItem(storageKey.token, res.data.data.token)
} else if (res.data.code === 518005) {
this.$message.error(this.$t('Incorrect username or password'))
this.loading = false
this.blockOperation.query = false
@@ -97,7 +98,7 @@ export default {
console.error(e)
this.loading = false
this.blockOperation.query = false
this.$message.error(this.$t('tip.unknownError'))
this.$message.error(this.errorMsgHandler(e))
})
},
queryAppearance () {

3
src/assets/css/components/views/charts2/linkDirectionGrid.scss
View File

@@ -17,8 +17,7 @@
position: absolute;
width: calc(100% - 20px);
height: calc(100% - 60px);
margin-left: -12px;
margin-top: 10px;
margin-top: 50px;
}
.data-grid {
height: 100px;

2
src/assets/css/components/views/charts2/npmAppEventTable.scss
View File

@@ -114,6 +114,6 @@
position: absolute;
width: 100%;
left: 0;
top: 68px;
top: 32px;
}
}

8
src/components/common/Error.vue
View File

@@ -1,5 +1,5 @@
<template>
<div v-if="showDefault" class="error-component">
<div v-if="showDefault" class="error-component" :style="style" :class="class">
<div class="error-block" :style="{'max-width': localMaxWidth, 'width': localWidth}">
<svg class="icon error-icon-default" aria-hidden="true">
<use xlink:href="#cn-icon-baocuo"></use>
@@ -101,6 +101,12 @@ export default {
// 自定义svg图标
svg: {
type: String
},
style: {
type: String
},
class: {
type: String
}
},
data () {

11
src/mixins/common.js
View File

@@ -1,5 +1,6 @@
import { hasButton } from '@/permission'
import { dateFormatByAppearance } from '@/utils/date-util'
import { commonErrorTip } from '@/utils/constants'
export default {
data () {
return {
@@ -29,6 +30,16 @@ export default {
hasButton (code) {
return hasButton(this.$store.getters.buttonList, code)
},
errorMsgHandler (axiosError) {
if (axiosError.response) {
if (axiosError.response.data) {
return axiosError.response.data.message || commonErrorTip
}
} else if (axiosError.message) {
return axiosError.message
}
return commonErrorTip
},
isBuiltIn (row) {
return (row.buildIn && row.buildIn === 1) || (row.builtIn && row.builtIn === 1)
},

1
src/utils/constants.js
View File

@@ -121,6 +121,7 @@ export const chartTableColumnMapping = {
responseFailRate: 'dns.responseFailureRate',
ip: 'IP'
}
export const commonErrorTip = 'Something went wrong...'
export const chartTableOrderOptionsMapping = {
lastTime: 'last_time',
tagName: 'tag_name'

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

@@ -1,15 +1,14 @@
<template>
<div class="link-blocks">
<div class="block-list" style="position: relative">
<div class="block-list__title" v-if="!showError1">{{ $t('linkMonitor.links') }}</div>
<div class="block-list__title">{{ $t('linkMonitor.links') }}</div>
<!--无数据noData-->
<chart-no-data v-if="linkNoData" test-id="linkBlockNoData"></chart-no-data>
<div class="block-list__list" v-show="!linkNoData">
<chart-error v-if="showError1" :content="errorMsg1" />
<chart-error style="top: 40px;" v-show="!linkNoData" v-if="showError1" :content="errorMsg1" />
<div class="block-list__list" v-show="!linkNoData" v-else>
<el-popover
v-else
placement="bottom"
trigger="hover"
popper-class="link-block__popper"
@@ -57,14 +56,12 @@
</div>
<div class="block-list" >
<div class="block-list__title" v-if="!showError2">{{ $t('linkMonitor.nextHopInternet') }}</div>
<div class="block-list__title">{{ $t('linkMonitor.nextHopInternet') }}</div>
<chart-no-data v-if="nextHopNoData" test-id="nextHpNoData"></chart-no-data>
<div class="block-list__list" v-show="!nextHopNoData">
<chart-error v-if="showError2" :content="errorMsg2" />
<chart-error style="top: 40px;" v-show="!nextHopNoData" class="link-block-error" v-if="showError2" :content="errorMsg2" />
<div class="block-list__list" v-show="!nextHopNoData" v-else>
<el-popover
v-else
placement="bottom"
trigger="hover"
popper-class="link-block__popper"
@@ -177,133 +174,145 @@ export default {
endTime: getSecond(this.timeFilter.endTime)
}
const dataRequest = axios.get(api.linkMonitor.analysis, { params: params })
const nextHopRequest = axios.get(api.linkMonitor.nextHopAnalysis, { params: params })
const dataRequest = axios.get(api.linkMonitor.analysis, { params: params }).catch(e => {
console.error(e)
this.linkNoData = false
this.showError1 = true
this.errorMsg1 = this.errorMsgHandler(e)
})
const nextHopRequest = axios.get(api.linkMonitor.nextHopAnalysis, { params: params }).catch(e => {
console.error(e)
this.nextHopNoData = false
this.showError2 = true
this.errorMsg2 = this.errorMsgHandler(e)
})
Promise.all([dataRequest, nextHopRequest]).then(response => {
const res = []
res[0] = response[0].data
res[1] = response[1].data
if (res[0].code === 200) {
this.showError1 = false
axios.all([dataRequest, nextHopRequest]).then(response => {
if (response[0] && response[1]) {
const res = []
res[0] = response[0].data
res[1] = response[1].data
if (res[0].code === 200) {
this.showError1 = false
const linkData = res[0].data.result
const linkData = res[0].data.result
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
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)
}
} 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
}
} else {
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
}
data.forEach((item) => {
item.totalBitsRate = item.egressBitsRate + item.ingressBitsRate
})
// 上行使用情况计算
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
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
}
} else {
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
}
} else {
this.showError2 = true
this.nextHopNoData = false
this.errorMsg2 = res[1].message
}
}).catch(e => {
console.error(e)

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

@@ -1,10 +1,10 @@
<template>
<div class="link-direction-grid">
<!--左侧链路出入口-->
<popover-content :isNoData="isLinkNoData" :gridData="linkGridData" :showError="isLinkShowError" :content="linkErrorMsg" style="width: 900px;"/>
<popover-content :title="$t('linkMonitor.egressLink') + ' & ' + $t('linkMonitor.ingressLink')" :isNoData="isLinkNoData" :gridData="linkGridData" :showError="isLinkShowError" :content="linkErrorMsg" style="width: 900px;"/>
<!--右侧链路下一跳-->
<popover-content :isNoData="isNextNoData" :gridData="nextGridData" :showError="isNextShowError" :content="nextErrorMsg" />
<popover-content :title="$t('linkMonitor.nextHopInternetOfGrid')" :isNoData="isNextNoData" :gridData="nextGridData" :showError="isNextShowError" :content="nextErrorMsg" />
</div>
</template>
@@ -56,183 +56,185 @@ export default {
endTime: getSecond(this.timeFilter.endTime)
}
const dataRequest = axios.get(api.linkMonitor.bigramAnalysis, { params: params })
const nextHopRequest = axios.get(api.linkMonitor.bigramNextHopAnalysis, { params: params })
const dataRequest = axios.get(api.linkMonitor.bigramAnalysis, { params: params }).catch(e => {
this.isLinkShowError = true
this.isLinkNoData = false
this.linkErrorMsg = this.errorMsgHandler(e)
})
const nextHopRequest = axios.get(api.linkMonitor.bigramNextHopAnalysis, { params: params }).catch(e => {
this.isNextShowError = true
this.isNextNoData = false
this.nextErrorMsg = this.errorMsgHandler(e)
})
this.toggleLoading(true)
Promise.all([dataRequest, nextHopRequest]).then(response => {
const res = []
res[0] = response[0].data
res[1] = response[1].data
if (res[0].code === 200) {
this.isLinkShowError = false
// 链路流量数据
const linkData = res[0].data.result
// 接口数据乱序，根据入链路id（ingressLinkId）大小排序之后，
// 再根据同ingressLinkId下的egressLinkId进行排序
linkData.sort((a, b) => {
if (a.ingressLinkId !== b.ingressLinkId) {
return a.ingressLinkId - b.ingressLinkId
}
return a.egressLinkId - b.egressLinkId
})
this.isLinkNoData = linkData.length === 0
if (!this.isLinkNoData) {
axios.all([dataRequest, nextHopRequest]).then(response => {
if (response[0] && response[1]) {
const res = []
res[0] = response[0].data
res[1] = response[1].data
if (res[0].code === 200) {
this.isLinkShowError = false
// 链路流量数据
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 egressUsage = this.computeUsage(d.egressBitsRate, egressLink.bandwidth)
// 下行使用情况计算
const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressLink.bandwidth)
// 宽带使用超过90%，赋红点
d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
// 计算npm分数
// 分数低于3分，赋红点
d.score = this.localComputeScore(d)
d.scoreLow3 = d.score < 3 || d.score === '-'
if (data) {
const existedEgressLink = data.egress.find(e => e.linkId === egressLink.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'),
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'),
totalBitsRate: d.totalBitsRate,
...d
}]
})
}
const linkData = res[0].data.result
// 接口数据乱序，根据入链路id（ingressLinkId）大小排序之后，
// 再根据同ingressLinkId下的egressLinkId进行排序
linkData.sort((a, b) => {
if (a.ingressLinkId !== b.ingressLinkId) {
return a.ingressLinkId - b.ingressLinkId
}
return a.egressLinkId - b.egressLinkId
})
this.linkGridData = linkGridData
}
} else {
this.isLinkNoData = false
this.isLinkShowError = true
this.linkErrorMsg = res[0].message
}
this.isLinkNoData = linkData.length === 0
if (!this.isLinkNoData) {
// 链路流量数据
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)
if (res[1].code === 200) {
this.isNextShowError = false
// 上行使用情况计算
const egressUsage = this.computeUsage(d.egressBitsRate, egressLink.bandwidth)
// 下行使用情况计算
const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressLink.bandwidth)
// 宽带使用超过90%，赋红点
// 链路下一跳信息
const nextLinkData = res[1].data.result
// 接口数据乱序，根据入方向排序，再根据同个入方向下的出方向进行排序
nextLinkData.sort((a, b) => {
if (a.ingressLinkDirection !== b.ingressLinkDirection) {
return a.ingressLinkDirection.localeCompare(b.ingressLinkDirection, 'zh')
d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
// 计算npm分数
// 分数低于3分，赋红点
d.score = this.localComputeScore(d)
d.scoreLow3 = d.score < 3 || d.score === '-'
if (data) {
const existedEgressLink = data.egress.find(e => e.linkId === egressLink.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'),
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'),
totalBitsRate: d.totalBitsRate,
...d
}]
})
}
}
})
this.linkGridData = linkGridData
}
return a.egressLinkDirection.localeCompare(b.egressLinkDirection, 'zh')
})
} else {
this.isLinkNoData = false
this.isLinkShowError = true
this.linkErrorMsg = res[0].message
}
this.isNextNoData = nextLinkData.length === 0
if (!this.isNextNoData) {
// 链路下一跳数据
const nextGridData = []
if (res[1].code === 200) {
this.isNextShowError = false
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 = nextGridData.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.egressBitsRate, egressBanwidth)
// 下行使用情况计算
const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressBanwidth)
// 宽带使用超过90%，赋红点
d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
// 计算npm分数
// 分数低于3分，赋红点
d.score = this.localComputeScore(d)
d.scoreLow3 = d.score < 3 || d.score === '-'
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,
popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
valueWidth: this.computeWidth(egressUsage, ingressUsage, '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'),
totalBitsRate: d.totalBitsRate,
...d
}]
})
}
// 链路下一跳信息
const nextLinkData = res[1].data.result
// 接口数据乱序，根据入方向排序，再根据同个入方向下的出方向进行排序
nextLinkData.sort((a, b) => {
if (a.ingressLinkDirection !== b.ingressLinkDirection) {
return a.ingressLinkDirection.localeCompare(b.ingressLinkDirection, 'zh')
}
return a.egressLinkDirection.localeCompare(b.egressLinkDirection, 'zh')
})
this.nextGridData = nextGridData
}
} else {
this.isNextNoData = false
this.isNextShowError = true
this.nextErrorMsg = res[1].message
}
}).catch(e => {
this.isLinkShowError = true
this.linkErrorMsg = e.message
this.isNextNoData = nextLinkData.length === 0
if (!this.isNextNoData) {
// 链路下一跳数据
const nextGridData = []
this.isNextShowError = true
this.nextErrorMsg = e.message
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 = nextGridData.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.egressBitsRate, egressBanwidth)
// 下行使用情况计算
const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressBanwidth)
// 宽带使用超过90%，赋红点
d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
// 计算npm分数
// 分数低于3分，赋红点
d.score = this.localComputeScore(d)
d.scoreLow3 = d.score < 3 || d.score === '-'
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,
popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
valueWidth: this.computeWidth(egressUsage, ingressUsage, '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'),
totalBitsRate: d.totalBitsRate,
...d
}]
})
}
}
})
this.nextGridData = nextGridData
}
} else {
this.isNextNoData = false
this.isNextShowError = true
this.nextErrorMsg = res[1].message
}
}
}).finally(() => {
this.toggleLoading(false)
})

6
src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
View File

@@ -1,7 +1,6 @@
<template>
<div class="link-statistical-dimension" style="position: relative">
<div class="dimension-title" v-if="gridData.length>3">{{ $t('linkMonitor.egressLink') }}&nbsp;&&nbsp;{{ $t('linkMonitor.ingressLink') }}</div>
<div class="dimension-title" v-else>{{ $t('linkMonitor.nextHopInternetOfGrid') }}</div>
<div class="dimension-title">{{title}}</div>
<chart-no-data v-if="isNoData" :test-id="`noData${gridData.length}`"></chart-no-data>
@@ -156,7 +155,8 @@ export default {
gridData: Array,
isNoData: Boolean,
showError: Boolean,
content: String
content: String,
title: String
},
components: {
ChartError,

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

@@ -33,7 +33,7 @@ import ChartNoData from '@/views/charts/charts/ChartNoData'
import chartMixin from '@/views/charts2/chart-mixin'
import { linksTrafficSankeyOption } from '@/views/charts2/charts/options/echartOption'
import { ref, shallowRef } from 'vue'
import { get } from '@/utils/http'
import axios from 'axios'
import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util'
import { useRoute } from 'vue-router'
@@ -116,7 +116,8 @@ export default {
}
}
this.toggleLoading(true)
get(url, params).then(res => {
axios.get(url, { params: params }).then(res => {
res = res.data
if (res.code === 200) {
this.showError = false
if (n === 0) {
@@ -131,10 +132,10 @@ export default {
}
}).catch(e => {
console.error(e)
this.egress = true
this.ingress = true
this.egress = false
this.ingress = false
this.showError = true
this.errorMsg = e.message
this.errorMsg = this.errorMsgHandler(e)
}).finally(() => {
this.toggleLoading(false)
})

3
src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
View File

@@ -291,8 +291,9 @@ export default {
this.errorMsg = res[0].message
}
}).catch(e => {
console.error(e)
this.showError = true
this.errorMsg = e.message
this.errorMsg = this.errorMsgHandler(e)
this.isNoData = true
}).finally(() => {
this.toggleLoading(false)

5
src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
View File

@@ -78,10 +78,11 @@ export default {
this.showError = true
this.errorMsg = res.message
}
}).catch((e) => {
}).catch(e => {
console.error(e)
this.isNoData = false
this.showError = true
this.errorMsg = e.message
this.errorMsg = this.errorMsgHandler(e)
}).finally(() => {
this.toggleLoading(false)
})

35
src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
View File

@@ -26,7 +26,7 @@
import { pieChartOption1, pieChartOption2 } from '@/views/charts2/charts/options/echartOption.js'
import * as echarts from 'echarts'
import { shallowRef } from 'vue'
import { get } from '@/utils/http'
import axios from 'axios'
import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util'
import ChartNoData from '@/views/charts/charts/ChartNoData'
@@ -70,16 +70,16 @@ export default {
this.myChart = echarts.init(dom)
this.chartOption = pieChartOption1
this.loading1 = true
get(api.netWorkOverview.eventSeverity, params).then(res => {
if (res.code === 200) {
axios.get(api.netWorkOverview.eventSeverity, { params: params }).then(res => {
if (res.data.code === 200) {
this.showError1 = false
if (res.data.result.length === 0) {
if (res.data.data.result.length === 0) {
this.isNoData = true
return
} else {
this.isNoData = false
}
res.data.result = res.data.result.map(t => {
res.data.data.result = res.data.data.result.map(t => {
if (t.eventSeverity === 'critical') {
t.index = 0
} else if (t.eventSeverity === 'high') {
@@ -97,18 +97,19 @@ export default {
index: t.index
}
})
this.chartOption.legend.show = res.data.result.length > 0
this.chartOption.series[0].data = res.data.result.sort((a, b) => { return a.index - b.index })
this.chartOption.legend.show = res.data.data.result.length > 0
this.chartOption.series[0].data = res.data.data.result.sort((a, b) => { return a.index - b.index })
this.myChart.setOption(this.chartOption)
} else {
this.isNoData = false
this.showError1 = true
this.errorMsg1 = res.message
this.errorMsg1 = res.data.message
}
}).catch((e) => {
}).catch(e => {
console.error(e)
this.isNoData = false
this.showError1 = true
this.errorMsg1 = e.message
this.errorMsg1 = this.errorMsgHandler(e)
}).finally(() => {
this.loading1 = false
})
@@ -117,23 +118,23 @@ export default {
this.myChart2 = echarts.init(dom2)
this.chartOption2 = pieChartOption2
this.loading2 = true
get(api.netWorkOverview.eventType, params).then(res => {
if (res.code === 200) {
axios.get(api.netWorkOverview.eventType, { params: params }).then(res => {
if (res.data.code === 200) {
this.showError2 = false
if (res.data.result.length === 0) {
if (res.data.data.result.length === 0) {
this.isNoData2 = true
return
} else {
this.isNoData2 = false
}
res.data.result = res.data.result.map(t => {
res.data.data.result = res.data.data.result.map(t => {
return {
name: t.eventType,
value: t.count
}
})
if (res.data.result.length <= 0) {
if (res.data.data.result.length <= 0) {
this.chartOption2.legend.show = false
} else {
this.chartOption2.legend.show = true
@@ -145,10 +146,10 @@ export default {
this.showError2 = true
this.errorMsg2 = res.message
}
}).catch((e) => {
}).catch(e => {
this.isNoData2 = false
this.showError2 = true
this.errorMsg2 = e.message
this.errorMsg2 = this.errorMsgHandler(e)
}).finally(() => {
this.loading2 = false
})

50
src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
View File

@@ -209,7 +209,8 @@ import {
storageKey,
dbDrilldownTableConfig,
fromRoute,
drillDownPanelTypeMapping
drillDownPanelTypeMapping,
commonErrorTip
} from '@/utils/constants'
import { get } from '@/utils/http'
import unitConvert from '@/utils/unit-convert'
@@ -217,6 +218,7 @@ import { getChainRatio, computeScore, urlParamsHandler, overwriteUrl, readDrilld
import { getSecond } from '@/utils/date-util'
import chartMixin from '@/views/charts2/chart-mixin'
import _ from 'lodash'
import axios from 'axios'
import indexedDBUtils from '@/indexedDB'
export default {
@@ -340,22 +342,22 @@ export default {
endTime: getSecond(this.timeFilter.endTime)
}
const requestUrl = this.getCurUrl()
get(requestUrl, queryParams).then(response => {
if (response.code === 200) {
axios.get(requestUrl, { params: queryParams }).then(response => {
if (response.data.code === 200) {
this.showError = false
this.errorMsg = ''
this.chartData = response.data.result
this.chartData = response.data.data.result
this.initData()
} else {
this.showError = true
this.errorMsg = response.message || 'Unknown'
this.errorMsg = response.data.message || commonErrorTip
this.isNoData = true
this.toggleLoading(false)
}
}).catch(e => {
console.error(e)
this.showError = true
this.errorMsg = e.message || 'Unknown'
this.errorMsg = this.errorMsgHandler(e)
}).finally(() => {
this.changeUrlTabState()
this.toggleLoading(false)
@@ -653,11 +655,11 @@ export default {
if (this.customTableTitles && this.customTableTitles.length > 0) {
this.customTableTitles.forEach(tableColumn => {
if (tableColumn.columnType === tableColumnType.chainRatio && tableColumn.isInMainUrl && tableDataTmp && tableDataTmp.length > 0) {
get(self.gerCycleUrl(), queryParams).then(response => {
if (response.code === 200) {
axios.get(self.gerCycleUrl(), { params: queryParams }).then(response => {
if (response.data.code === 200) {
tableColumn.showError = false
tableColumn.errorMsg = ''
cycleTotalList = response.data.result
cycleTotalList = response.data.data.result
tableDataTmp.forEach(item => {
const cycle = cycleTotalList.find(i => i[curTab.prop] === item.tab)
let trend = ''// 空：无图标；up：向上的图标；down：向下的图标；noChange：横向箭头图标
@@ -703,12 +705,12 @@ export default {
})
} else {
tableColumn.showError = true
tableColumn.errorMsg = response.message || 'Unknown'
tableColumn.errorMsg = response.data.message || commonErrorTip
}
}).catch(e => {
console.log(e)
console.error(e)
tableColumn.showError = true
tableColumn.errorMsg = e.message || 'Unknown'
tableColumn.errorMsg = this.errorMsgHandler(e)
}).finally(e => {
this.tableData = tableDataTmp
this.tableDataBackup = tableDataTmp
@@ -719,13 +721,13 @@ export default {
// 查询需要单独查询的，且需要展示环比图标，列的当前周期的数据
this.customTableTitles.forEach(tableColumn => {
if (tableColumn.columnType === tableColumnType.chainRatio && !tableColumn.isInMainUrl) {
get(self.gerColumnUrl(tableColumn), queryParams).then(response => {
if (response.code === 200) {
axios.get(self.gerColumnUrl(tableColumn), { params: queryParams }).then(response => {
if (response.data.code === 200) {
if (!tableColumn.showError) {
tableColumn.showError = false
tableColumn.errorMsg = ''
}
const columnList = response.data.result
const columnList = response.data.data.result
self.tableData.forEach((item, i) => {
const data = columnList.find(i => i[curTab.prop] === item.tab)
if (!item.scoreGroup) {
@@ -746,12 +748,12 @@ export default {
})
} else {
tableColumn.showError = true
tableColumn.errorMsg = response.message || 'Unknown'
tableColumn.errorMsg = response.data.message || commonErrorTip
}
}).catch(e => {
console.log(e)
console.error(e)
tableColumn.showError = true
tableColumn.errorMsg = e.message || 'Unknown'
tableColumn.errorMsg = this.errorMsgHandler(e)
}).finally(e => {
// 查询需要单独查询的，且需要展示环比图标，列的前一周期的数据
if (tableColumn.cycle && self.tableData && self.tableData.length > 0) {
@@ -759,13 +761,13 @@ export default {
...queryParams,
cycle: tableColumn.cycle
}
get(self.gerColumnUrl(tableColumn), queryCycleParams).then(response => {
if (response.code === 200) {
axios.get(self.gerColumnUrl(tableColumn), { params: queryCycleParams }).then(response => {
if (response.data.code === 200) {
if (!tableColumn.showError) {
tableColumn.showError = false
tableColumn.errorMsg = ''
}
cycleTotalList = response.data.result
cycleTotalList = response.data.data.result
self.tableData.forEach(item => {
const cycle = cycleTotalList.find(i => i[curTab.prop] === item.tab)
let trend = ''// 空：无图标；up：向上的图标；down：向下的图标；noChange：横向箭头图标
@@ -814,12 +816,12 @@ export default {
})
} else {
tableColumn.showError = true
tableColumn.errorMsg = response.message || 'Unknown'
tableColumn.errorMsg = response.data.message || commonErrorTip
}
}).catch(e => {
console.log(e)
console.error(e)
tableColumn.showError = true
tableColumn.errorMsg = e.message || 'Unknown'
tableColumn.errorMsg = this.errorMsgHandler(e)
})
}
})

3
src/views/charts2/charts/npm/NpmAppCategoryScore.vue
View File

@@ -285,8 +285,7 @@ export default {
console.error(e)
this.toggleLoading(false)
this.showError = true
this.errorMsg = ''
this.errorMsg = e.message
this.errorMsg = this.errorMsgHandler(e)
})
},
getUrlParam (param, defaultValue, isNumber) {

2
src/views/charts2/charts/npm/NpmAppEventTable.vue
View File

@@ -165,7 +165,7 @@ export default {
}).catch((e) => {
this.isNoData = false
this.showError = true
this.errorMsg = e.message
this.errorMsg = this.errorMsgHandler(e)
}).finally(() => {
this.toggleLoading(false)
})

4
src/views/charts2/charts/npm/NpmEventsByType.vue
View File

@@ -139,10 +139,10 @@ export default {
this.showError = true
this.errorMsg = res.message
}
}).catch((e) => {
}).catch(e => {
this.isNoData = false
this.showError = true
this.errorMsg = e.message
this.errorMsg = this.errorMsgHandler(e)
}).finally(() => {
this.toggleLoading(false)
})

4
src/views/charts2/charts/npm/NpmEventsHeader.vue
View File

@@ -89,9 +89,9 @@ export default {
this.showError = true
this.errorMsg = res.message
}
}).catch(error => {
}).catch(e => {
this.showError = true
this.errorMsg = error.message
this.errorMsg = this.errorMsgHandler(e)
}).finally(() => {
this.toggleLoading(false)
})

10
src/views/charts2/charts/npm/NpmLine.vue
View File

@@ -61,8 +61,8 @@ import { shallowRef } from 'vue'
import _ from 'lodash'
import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
import { getSecond } from '@/utils/date-util'
import { get } from '@/utils/http'
import { api } from '@/utils/api'
import axios from 'axios'
import ChartNoData from '@/views/charts/charts/ChartNoData'
import chartMixin from '@/views/charts2/chart-mixin'
import unitConvert from '@/utils/unit-convert'
@@ -154,7 +154,8 @@ export default {
url = api.npm.location.packetsRetrains
}
if (url) {
get(url, params).then(res => {
axios.get(url, { params: params }).then(res => {
res = res.data
if (res.code === 200) {
this.showError = false
this.isNoData = res.data.result.length === 0
@@ -180,10 +181,11 @@ export default {
this.showError = true
this.errorMsg = res.message
}
}).catch((e) => {
}).catch(e => {
console.error(e)
this.isNoData = false
this.showError = true
this.errorMsg = e.message
this.errorMsg = this.errorMsgHandler(e)
}).finally(() => {
this.toggleLoading(false)
})

8
src/views/charts2/charts/npm/NpmMap.vue
View File

@@ -54,7 +54,8 @@ import { storageKey, unitTypes, countryNameIdMapping } from '@/utils/constants'
import locationOptions from '@/views/charts2/charts/locationOptions'
import { valueToRangeValue } from '@/utils/unit-convert'
import { getSecond } from '@/utils/date-util'
import { api, getData } from '@/utils/api'
import { api } from '@/utils/api'
import axios from 'axios'
import { get } from '@/utils/http'
import chartMixin from '@/views/charts2/chart-mixin'
// import { Rectangle3D } from '@amcharts/amcharts4/.internal/core/elements/3d/Rectangle3D'
@@ -121,7 +122,8 @@ export default {
side: this.trafficDirection.toLowerCase(),
country: this.location
}
getData(api.npm.location.map, params).then(res => {
axios.get(api.npm.location.map, { params: params }).then(res => {
res = res.data
if (res.length > 0) {
// 计算分数
this.showError = false
@@ -176,7 +178,7 @@ export default {
}
}).catch((e) => {
this.showError = true
this.errorMsg = e.message
this.errorMsg = this.errorMsgHandler(e)
}).finally(() => {
this.toggleLoading(false)
})

4
src/views/charts2/charts/npm/NpmRecentEvents.vue
View File

@@ -130,10 +130,10 @@ export default {
this.showError = true
this.errorMsg = res.message
}
}).catch(error => {
}).catch(e => {
this.isNoData = false
this.showError = true
this.errorMsg = error.message
this.errorMsg = this.errorMsgHandler(e)
}).finally(() => {
this.toggleLoading(false)
})

18
src/views/charts2/charts/npm/NpmTrafficLine.vue
View File

@@ -36,6 +36,7 @@ import { chartColor3, unitTypes } from '@/utils/constants.js'
import { ref, shallowRef } from 'vue'
import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
import { get } from '@/utils/http'
import axios from 'axios'
import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util'
import ChartNoData from '@/views/charts/charts/ChartNoData'
@@ -194,7 +195,8 @@ export default {
}
this.toggleLoading(true)
if (params.type && params.q) {
get(api.npm.overview.trafficGraph, params).then((res) => {
axios.get(api.npm.overview.trafficGraph, { params: params }).then(res => {
res = res.data
if (res.code === 200) {
this.showError = false
this.isNoData = res.data.result.length === 0
@@ -215,7 +217,6 @@ export default {
{ name: this.$t('overall.packetRetrans'), show: true, positioning: 0, data: [], unitType: unitTypes.percent, index: 4 }
]
} else {
console.info(res.data.result)
this.initData(res.data.result, val)
}
} else {
@@ -226,17 +227,17 @@ export default {
}).catch(e => {
this.isNoData = false
this.showError = true
this.errorMsg = e.message
this.errorMsg = this.errorMsgHandler(e)
console.error(e)
}).finally(() => {
this.toggleLoading(false)
})
} else {
this.toggleLoading(true)
const totalTrafficAnalysis = get(api.npm.overview.totalTrafficAnalysis, params)
const totalNetworkAnalysis = get(api.npm.overview.totalNetworkAnalysis, params)
const totalHttpResponseDelay = get(api.npm.overview.totalHttpResponseDelay, params)
const totalSslConDelay = get(api.npm.overview.totalSslConDelay, params)
const totalTrafficAnalysis = axios.get(api.npm.overview.totalTrafficAnalysis, { params: params })
const totalNetworkAnalysis = get(api.npm.overview.totalNetworkAnalysis, { params: params })
const totalHttpResponseDelay = get(api.npm.overview.totalHttpResponseDelay, { params: params })
const totalSslConDelay = get(api.npm.overview.totalSslConDelay, { params: params })
const npmLineData = []
Promise.all([totalNetworkAnalysis, totalTrafficAnalysis, totalHttpResponseDelay, totalSslConDelay]).then(res => {
res.forEach(item => {
@@ -267,13 +268,12 @@ export default {
{ name: this.$t('overall.packetRetrans'), show: true, positioning: 0, data: [], unitType: unitTypes.percent, index: 4 }
]
} else {
console.info(npmLineData)
this.initData(npmLineData, val)
}
}).catch(e => {
this.isNoData = false
this.showError = true
this.errorMsg = e.message
this.errorMsg = this.errorMsgHandler(e)
}).finally(() => {
this.toggleLoading(false)
})