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

fix: 完善NetworkOverviewLine组件测试用例；更改变量名；

Browse Source
This commit is contained in:
chenjinsong
2023-02-17 20:50:29 +08:00
parent 14a24b268a
commit e009142e7d
8 changed files with 268 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/css/components/views/charts2/networkOverviewLine.scss
View File

@@ -98,11 +98,11 @@
//top: 0;
//left: 0;
display: flex;
.line-value-mpackets.mousemove-cursor {
.line-value-tabs.mousemove-cursor {
border-top: 4px solid #D3D0D8;
z-index: 0;
}
.line-value-mpackets {
.line-value-tabs {
cursor: pointer;
padding: 16px 0 0 20px;
border-top: 4px solid transparent;
@@ -122,10 +122,10 @@
}
}
}
.line-value-mpackets-name {
.line-value-tabs-name {
position: relative;
display: flex;
.mpackets-name {
.tabs-name {
flex: 1;
padding-left: 19px;
}

10
src/views/administration/Index.vue
View File

@@ -43,16 +43,6 @@ export default {
i18n: 'I18n',
path: '/administration/i18n',
icon: 'cn-icon cn-icon-i18n'
},
{
i18n: 'galaxyProxy.galaxyProxy',
path: '/administration/galaxyProxy',
icon: 'cn-icon cn-icon-proxy'
},
{
i18n: 'overall.chart',
path: '/administration/chart',
icon: 'cn-icon cn-icon-chart'
}
]
}

54
src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
View File

@@ -5,17 +5,17 @@
<div class="line-header-left">
<div class="line-value-active" v-if="lineTab"></div>
<div class="line-value">
<div class="line-value-mpackets"
<div class="line-value-tabs"
v-show="item.show"
:class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
v-for="(item, index) in mpackets"
v-for="(item, index) in tabs"
:key="index"
@mouseenter="mouseenter(item)"
@mouseleave="mouseleave(item)"
@click="activeChange(item, index)">
<div class="line-value-mpackets-name">
<div class="line-value-tabs-name">
<div :class="item.class"></div>
<div class="mpackets-name">{{$t(item.name)}}</div>
<div class="tabs-name">{{$t(item.name)}}</div>
</div>
<div class="line-value-unit">
<span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
@@ -126,7 +126,7 @@ export default {
label: 'Maximum'
}
],
mpackets: [
tabs: [
{ analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
{ analysis: {}, name: 'network.inbound', class: 'inbound', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
{ analysis: {}, name: 'network.outbound', class: 'outbound', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
@@ -202,7 +202,7 @@ export default {
this.isNoData = res.data.result.length === 0
if (this.isNoData) {
this.lineTab = ''
this.mpackets = [
this.tabs = [
{ analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
{ analysis: {}, name: 'network.inbound', class: 'inbound', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
{ analysis: {}, name: 'network.outbound', class: 'outbound', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
@@ -323,7 +323,7 @@ export default {
this.chartOption.tooltip.formatter = (params) => {
params.forEach(t => {
t.seriesName = this.$t(t.seriesName)
this.mpackets.forEach(e => {
this.tabs.forEach(e => {
if (this.$t(e.name) === t.seriesName) {
t.borderColor = chartColor3[e.positioning]
}
@@ -366,16 +366,16 @@ export default {
legendSelectChange (item, index, val) {
if (index === 'index') {
this.dispatchLegendSelectAction(item.name)
} else if (this.mpackets[index] && this.mpackets[index].name === item.name) {
} else if (this.tabs[index] && this.tabs[index].name === item.name) {
this.dispatchLegendSelectAction(item.name)
this.mpackets.forEach((t) => {
this.tabs.forEach((t) => {
if (t.name !== item.name) {
this.dispatchLegendUnSelectAction(t.name)
}
})
}
if (val === 'active') {
this.mpackets.forEach(t => {
this.tabs.forEach(t => {
if (item.name === t.name) {
t.invertTab = !t.invertTab
} else {
@@ -387,7 +387,7 @@ export default {
} else {
this.lineTab = t.class
}
this.mpackets.forEach((e) => {
this.tabs.forEach((e) => {
this.dispatchLegendSelectAction(e.name)
})
}
@@ -395,8 +395,8 @@ export default {
}
},
handleActiveBar () {
if (document.querySelector('.network .line-value-mpackets.is-active')) {
const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-mpackets.is-active')
if (document.querySelector('.network .line-value-tabs.is-active')) {
const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-tabs.is-active')
const activeBar = document.querySelector('.network .line-value-active')
activeBar.style.cssText += `width: ${clientWidth}px; left: ${offsetLeft + this.leftOffset + clientLeft}px;`
}
@@ -409,7 +409,7 @@ export default {
this.lineTab = ''
this.handleActiveBar()
this.showMarkLine = !this.showMarkLine
this.mpackets.forEach((e) => {
this.tabs.forEach((e) => {
if (!e.invertTab) {
e.invertTab = true
}
@@ -421,9 +421,9 @@ export default {
let echartsData
const chartOption = this.myChart.getOption()
if (this.lineTab) {
echartsData = this.mpackets.filter(t => t.show === true && t.invertTab === false)
echartsData = this.tabs.filter(t => t.show === true && t.invertTab === false)
} else {
echartsData = this.mpackets.filter(t => t.show === true)
echartsData = this.tabs.filter(t => t.show === true)
}
if (this.lineRefer === 'Average' && this.showMarkLine) {
chartOption.series.forEach((t, i) => {
@@ -488,13 +488,13 @@ export default {
})
}
lineData.splice(0, 1)
const mpackets = _.cloneDeep(this.mpackets)
const tabs = _.cloneDeep(this.tabs)
if (val === 'Queries/s') {
lineData.forEach((d, i) => {
mpackets[i].data = d.values
mpackets[i].analysis = d.analysis
tabs[i].data = d.values
tabs[i].analysis = d.analysis
})
mpackets.forEach((e, i) => {
tabs.forEach((e, i) => {
if (i !== 0) {
e.show = false
}
@@ -503,11 +503,11 @@ export default {
this.lineTab = 'total'
this.legendSelectChange(e, 0)
})
this.mpackets = mpackets
this.echartsInit(this.mpackets, true)
this.tabs = tabs
this.echartsInit(this.tabs, true)
} else {
const unit = 'bps'
this.legendInit(lineData, active, show, unit, mpackets)
this.legendInit(lineData, active, show, unit, tabs)
}
},
legendInit (data, active, show, type, dnsData) {
@@ -535,14 +535,14 @@ export default {
}
}
})
this.mpackets = dnsData
this.tabs = dnsData
if (num === 3) {
dnsData[0].invertTab = false
this.lineTab = 'total'
this.legendSelectChange(dnsData[0], 0)
this.echartsInit(this.mpackets)
this.echartsInit(this.tabs)
} else {
this.echartsInit(this.mpackets, show)
this.echartsInit(this.tabs, show)
if (!this.lineRefer) this.lineRefer = 'Average'
}
}
@@ -550,7 +550,7 @@ export default {
mounted () {
this.timer = setTimeout(() => {
if (this.lineTab) {
const data = this.mpackets.find(t => t.class === this.lineTab)
const data = this.tabs.find(t => t.class === this.lineTab)
this.activeChange(data, data.positioning)
} else {
this.init()

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

@@ -2,7 +2,7 @@
<div class="link-traffic-line">
<link-traffic-drill-down-list
:chart="chart"
:line-data="mpackets[0]"
:line-data="tabs[0]"
:time-filter="timeFilter">
</link-traffic-drill-down-list>
<div class="line network link-traffic">
@@ -12,18 +12,18 @@
<div class="line-header-left">
<div class="line-value-active" v-if="lineTab"></div>
<div class="line-value">
<div class="line-value-mpackets"
<div class="line-value-tabs"
v-show="item.show"
:class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
v-for="(item, index) in mpackets"
v-for="(item, index) in tabs"
:key="index"
@mouseenter="mouseenter(item)"
@mouseleave="mouseleave(item)"
@click="activeChange(item, index)"
:test-id="`tab-${index}`">
<div class="line-value-mpackets-name">
<div class="line-value-tabs-name">
<div :class="item.class"></div>
<div class="mpackets-name">{{$t(item.name)}}</div>
<div class="tabs-name">{{$t(item.name)}}</div>
</div>
<div class="line-value-unit" :test-id="`tabContent${index}`">
<span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
@@ -114,7 +114,7 @@ export default {
label: 'Packets/s'
}
],
mpackets: [
tabs: [
{ analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
{ analysis: {}, name: 'linkMonitor.ingress', class: 'ingress', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
{ analysis: {}, name: 'linkMonitor.egress', class: 'egress', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
@@ -185,7 +185,7 @@ export default {
this.isNoData = res.data.result.length === 0
if (this.isNoData) {
this.lineTab = ''
this.mpackets = [
this.tabs = [
{ analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
{ analysis: {}, name: 'linkMonitor.ingress', class: 'ingress', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
{ analysis: {}, name: 'linkMonitor.egress', class: 'egress', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
@@ -258,7 +258,7 @@ export default {
this.chartOption.tooltip.formatter = (params) => {
params.forEach(t => {
t.seriesName = this.$t(t.seriesName)
this.mpackets.forEach(e => {
this.tabs.forEach(e => {
if (this.$t(e.name) === t.seriesName) {
t.borderColor = chartColor3[e.positioning]
}
@@ -301,16 +301,16 @@ export default {
legendSelectChange (item, index, val) {
if (index === 'index') {
this.dispatchLegendSelectAction(item.name)
} else if (this.mpackets[index] && this.mpackets[index].name === item.name) {
} else if (this.tabs[index] && this.tabs[index].name === item.name) {
this.dispatchLegendSelectAction(item.name)
this.mpackets.forEach((t) => {
this.tabs.forEach((t) => {
if (t.name !== item.name) {
this.dispatchLegendUnSelectAction(t.name)
}
})
}
if (val === 'active') {
this.mpackets.forEach(t => {
this.tabs.forEach(t => {
if (item.name === t.name) {
t.invertTab = !t.invertTab
} else {
@@ -322,7 +322,7 @@ export default {
} else {
this.lineTab = t.class
}
this.mpackets.forEach((e) => {
this.tabs.forEach((e) => {
this.dispatchLegendSelectAction(e.name)
})
}
@@ -330,8 +330,8 @@ export default {
}
},
handleActiveBar () {
if (document.querySelector('.network .line-value-mpackets.is-active')) {
const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-mpackets.is-active')
if (document.querySelector('.network .line-value-tabs.is-active')) {
const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-tabs.is-active')
const activeBar = document.querySelector('.network .line-value-active')
activeBar.style.cssText += `width: ${clientWidth}px; left: ${offsetLeft + this.leftOffset + clientLeft}px;`
}
@@ -344,7 +344,7 @@ export default {
this.lineTab = ''
this.handleActiveBar()
this.showMarkLine = !this.showMarkLine
this.mpackets.forEach((e) => {
this.tabs.forEach((e) => {
if (!e.invertTab) {
e.invertTab = true
}
@@ -393,9 +393,9 @@ export default {
})
}
lineData.splice(0, 1)
const mpackets = _.cloneDeep(this.mpackets)
const tabs = _.cloneDeep(this.tabs)
const unit = val === 'Bits/s' ? 'bps' : 'packets/s'
this.legendInit(lineData, active, show, unit, mpackets)
this.legendInit(lineData, active, show, unit, tabs)
},
legendInit (data, active, show, type, linkData) {
data.forEach((d, i) => {
@@ -422,17 +422,17 @@ export default {
}
}
})
this.mpackets = linkData
this.tabs = linkData
if (num === 3) {
linkData[0].invertTab = false
this.lineTab = 'total'
this.legendSelectChange(linkData[0], 0)
this.$nextTick(() => {
this.echartsInit(this.mpackets)
this.echartsInit(this.tabs)
})
} else {
this.$nextTick(() => {
this.echartsInit(this.mpackets)
this.echartsInit(this.tabs)
if (!this.lineRefer) this.lineRefer = 'Average'
})
}
@@ -441,7 +441,7 @@ export default {
mounted () {
this.timer = setTimeout(() => {
if (this.lineTab) {
const data = this.mpackets.find(t => t.class === this.lineTab)
const data = this.tabs.find(t => t.class === this.lineTab)
this.activeChange(data, data.positioning)
} else {
this.init()

106
src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
View File

@@ -5,28 +5,29 @@
<div class="line-header-left">
<div class="line-value-active" v-if="lineTab"></div>
<div class="line-value">
<div class="line-value-mpackets"
v-show="item.show"
:class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
v-for="(item, index) in mpackets"
:key="index"
@mouseenter="mouseenter(item)"
@mouseleave="mouseleave(item)"
@click="activeChange(item, index)"
:test-id="`tab${index}`"
>
<div class="line-value-mpackets-name">
<div :class="item.class"></div>
<div class="mpackets-name">{{$t(item.name)}}</div>
</div>
<div class="line-value-unit" :test-id="`tabContent${index}`">
<span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
<span class="line-value-unit-number2">
<template v-for="(item, index) in tabs">
<div class="line-value-tabs"
:class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
v-if="item.show"
:key="index"
@mouseenter="mouseenter(item)"
@mouseleave="mouseleave(item)"
@click="activeChange(item, index)"
:test-id="`tab${index}`"
>
<div class="line-value-tabs-name">
<div :class="item.class"></div>
<div class="tabs-name" :test-id="`tabTitle${index}`">{{$t(item.name)}}</div>
</div>
<div class="line-value-unit" :test-id="`tabContent${index}`">
<span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
<span class="line-value-unit-number2">
<span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span>
<span v-if="item.unitType">{{item.unitType}}</span>
</span>
</div>
</div>
</div>
</template>
</div>
</div>
<div class="line-select line-header-right">
@@ -74,6 +75,8 @@ import chartMixin from '@/views/charts2/chart-mixin'
import { useRoute } from 'vue-router'
import { getLineType, overwriteUrl, urlParamsHandler } from '@/utils/tools'
import ChartError from '@/components/common/Error'
import mockData from '../../../../../test/views/charts2/charts/networkOverview/NetworkOverviewLineMockData'
export default {
name: 'NetworkOverviewLine',
components: {
@@ -119,7 +122,7 @@ export default {
label: 'Maximum'
}
],
mpackets: [
tabsTemplate: [
{ analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
{ analysis: {}, name: 'network.inbound', class: 'inbound', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
{ analysis: {}, name: 'network.outbound', class: 'outbound', show: true, invertTab: true, positioning: 2, data: [], unitType: '' },
@@ -127,6 +130,7 @@ export default {
{ analysis: {}, name: 'network.through', class: 'through', show: true, invertTab: true, positioning: 4, data: [], unitType: '' },
{ analysis: {}, name: 'network.other', class: 'other', show: true, invertTab: true, positioning: 5, data: [], unitType: '' }
],
tabs: [],
unitConvert,
unitTypes,
chartDateObject: [],
@@ -172,7 +176,7 @@ export default {
metric (n) {
this.handleActiveBar()
this.showMarkLine = !this.showMarkLine
this.mpackets.forEach((e) => {
this.tabs.forEach((e) => {
if (!e.invertTab) {
e.invertTab = true
}
@@ -195,20 +199,14 @@ export default {
this.toggleLoading(true)
axios.get(api.netWorkOverview.totalTrafficAnalysis, { params: params }).then(response => {
const res = response.data
// const res = mockData.bytes.boundary.data
this.errorMsg = res.message
if (res.code === 200) {
this.isNoData = res.data.result.length === 0
this.showError = false
if (this.isNoData) {
this.lineTab = ''
this.mpackets = [
{ analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
{ analysis: {}, name: 'network.inbound', class: 'inbound', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
{ analysis: {}, name: 'network.outbound', class: 'outbound', show: true, invertTab: true, positioning: 2, data: [], unitType: '' },
{ analysis: {}, name: 'network.internal', class: 'internal', show: true, invertTab: true, positioning: 3, data: [], unitType: '' },
{ analysis: {}, name: 'network.through', class: 'through', show: true, invertTab: true, positioning: 4, data: [], unitType: '' },
{ analysis: {}, name: 'network.other', class: 'other', show: true, invertTab: true, positioning: 5, data: [], unitType: '' }
]
this.tabs = _.cloneDeep(this.tabsTemplate)
} else {
this.initData(res.data.result, val, active, show, n)
}
@@ -346,7 +344,7 @@ export default {
this.chartOption.tooltip.formatter = (params) => {
params.forEach(t => {
t.seriesName = this.$t(t.seriesName)
this.mpackets.forEach(e => {
this.tabs.forEach(e => {
if (this.$t(e.name) === t.seriesName) {
t.borderColor = chartColor3[e.positioning]
}
@@ -436,16 +434,16 @@ export default {
legendSelectChange (item, index, val) {
if (index === 'index') {
this.dispatchLegendSelectAction(item.name)
} else if (this.mpackets[index] && this.mpackets[index].name === item.name) {
} else if (this.tabs[index] && this.tabs[index].name === item.name) {
this.dispatchLegendSelectAction(item.name)
this.mpackets.forEach((t) => {
this.tabs.forEach((t) => {
if (t.name !== item.name) {
this.dispatchLegendUnSelectAction(t.name)
}
})
}
if (val === 'active') {
this.mpackets.forEach(t => {
this.tabs.forEach(t => {
if (item.name === t.name) {
t.invertTab = !t.invertTab
} else {
@@ -457,7 +455,7 @@ export default {
} else {
this.lineTab = t.class
}
this.mpackets.forEach((e) => {
this.tabs.forEach((e) => {
this.dispatchLegendSelectAction(e.name)
})
}
@@ -465,8 +463,8 @@ export default {
}
},
handleActiveBar () {
if (document.querySelector('.network .line-value-mpackets.is-active')) {
const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-mpackets.is-active')
if (document.querySelector('.network .line-value-tabs.is-active')) {
const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-tabs.is-active')
const activeBar = document.querySelector('.network .line-value-active')
activeBar.style.cssText += `width: ${clientWidth}px; left: ${offsetLeft + this.leftOffset + clientLeft}px;`
}
@@ -478,9 +476,9 @@ export default {
this.lineRefer = val
let echartsData
if (this.lineTab) {
echartsData = this.mpackets.filter(t => t.show === true && t.invertTab === false)
echartsData = this.tabs.filter(t => t.show === true && t.invertTab === false)
} else {
echartsData = this.mpackets.filter(t => t.show === true)
echartsData = this.tabs.filter(t => t.show === true)
}
if (!this.isUnitTesting) {
const chartOption = this.myChart.getOption()
@@ -570,12 +568,12 @@ export default {
}
lineData.splice(0, 1)
if (val === 'Sessions/s') {
const mpackets = _.cloneDeep(this.mpackets)
const tabs = _.cloneDeep(this.tabsTemplate)
lineData.forEach((d, i) => {
mpackets[i].data = d.values
mpackets[i].analysis = d.analysis
tabs[i].data = d.values
tabs[i].analysis = d.analysis
})
mpackets.forEach((e, i) => {
tabs.forEach((e, i) => {
if (i !== 0) {
e.show = false
}
@@ -584,9 +582,9 @@ export default {
this.lineTab = 'total'
this.legendSelectChange(e, 0)
})
this.mpackets = mpackets
this.tabs = tabs
this.$nextTick(() => {
this.echartsInit(this.mpackets, true)
this.echartsInit(this.tabs, true)
})
} else {
const unit = val === 'Bits/s' ? 'bps' : 'packets/s'
@@ -594,15 +592,15 @@ export default {
}
},
legendInit (data, active, show, type, n) {
const mpackets = _.cloneDeep(this.mpackets)
const tabs = _.cloneDeep(this.tabsTemplate)
data.forEach((d, i) => {
mpackets[i].data = d.values
mpackets[i].analysis = d.analysis
tabs[i].data = d.values
tabs[i].analysis = d.analysis
})
let num = 0
mpackets.forEach(e => {
tabs.forEach(e => {
e.unitType = type
if (e.name !== 'network.total' && parseFloat(e.analysis.avg) === 0) {
if (e.name !== 'network.total' && parseFloat(e.analysis.avg) == 0) {
e.show = false
num += 1
} else {
@@ -619,18 +617,18 @@ export default {
}
}
})
this.mpackets = mpackets
this.tabs = tabs
if (num === 5) {
mpackets[0].invertTab = false
tabs[0].invertTab = false
this.lineTab = 'total'
this.legendSelectChange(mpackets[0], 0)
this.legendSelectChange(tabs[0], 0)
this.$nextTick(() => {
this.echartsInit(this.mpackets, true)
this.echartsInit(this.tabs, true)
})
} else {
if (n) this.lineTab = ''
this.$nextTick(() => {
this.echartsInit(this.mpackets, show)
this.echartsInit(this.tabs, show)
if (!this.lineRefer) this.lineRefer = 'Average'
})
}
@@ -657,7 +655,7 @@ export default {
this.chartOption = null
this.timer = setTimeout(() => {
if (this.lineTab && this.metric !== 'Sessions/s') {
const data = this.mpackets.find(t => t.class === this.lineTab)
const data = this.tabsTemplate.find(t => t.class === this.lineTab)
this.activeChange(data, data.positioning)
} else {
this.init()

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

@@ -71,7 +71,7 @@ export default {
unitConvert,
unitTypes,
side: '',
mpackets: [
tabs: [
{ name: this.$t('network.total'), show: true, positioning: 0, data: [], unitType: 'number' },
{ name: this.$t('network.inbound'), show: true, positioning: 1, data: [], unitType: 'number' },
{ name: this.$t('network.outbound'), show: true, positioning: 2, data: [], unitType: 'number' },
@@ -199,7 +199,7 @@ export default {
this.showError = false
this.isNoData = res.data.result.length === 0
if (this.isNoData) {
this.mpackets = [
this.tabs = [
{ name: this.$t('network.total'), show: true, positioning: 0, data: [], unitType: 'number' },
{ name: this.$t('network.inbound'), show: true, positioning: 1, data: [], unitType: 'number' },
{ name: this.$t('network.outbound'), show: true, positioning: 2, data: [], unitType: 'number' },
@@ -249,7 +249,7 @@ export default {
this.showError = false
this.isNoData = npmLineData.length === 0
if (this.isNoData) {
this.mpackets = [
this.tabs = [
{ name: this.$t('network.total'), show: true, positioning: 0, data: [], unitType: 'number' },
{ name: this.$t('network.inbound'), show: true, positioning: 1, data: [], unitType: 'number' },
{ name: this.$t('network.outbound'), show: true, positioning: 2, data: [], unitType: 'number' },
@@ -320,7 +320,7 @@ export default {
})
this.chartOption.tooltip.formatter = (params) => {
params.forEach(t => {
this.mpackets.forEach(e => {
this.tabs.forEach(e => {
if (e.name === t.seriesName) {
t.borderColor = chartColor3[e.positioning]
}
@@ -405,24 +405,24 @@ export default {
})
}
lineData.splice(0, 1)
const mpackets = _.cloneDeep(this.mpackets)
const tabs = _.cloneDeep(this.tabs)
const npmQuantity = _.cloneDeep(this.npmQuantity)
if (val === 'Sessions/s') {
lineData.forEach((d, i) => {
mpackets[i].data = d.values
mpackets[i].analysis = d.analysis
tabs[i].data = d.values
tabs[i].analysis = d.analysis
})
mpackets.forEach((e, i) => {
tabs.forEach((e, i) => {
if (i !== 0) {
e.show = false
}
})
this.mpackets = mpackets
this.echartsInit(this.mpackets)
this.tabs = tabs
this.echartsInit(this.tabs)
} else if (val !== 'Bits/s' && val !== 'Packets/s' && val !== 'Sessions/s') {
this.legendInit(lineData, npmQuantity, true)
} else {
this.legendInit(lineData, mpackets, false)
this.legendInit(lineData, tabs, false)
}
},
legendInit (data, npmData, show) {
@@ -445,8 +445,8 @@ export default {
npmData.forEach((e) => {
e.show = true
})
this.mpackets = npmData
this.echartsInit(this.mpackets)
this.tabs = npmData
this.echartsInit(this.tabs)
}
}
},

98
test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js
View File

@@ -1,22 +1,77 @@
import NetworkOverviewLine from '@/views/charts2/charts/networkOverview/NetworkOverviewLine'
import { mount } from '@vue/test-utils'
import axios from 'axios'
import mockData from './NetworkOverviewLineMockData'
const mockGet = {
data: { status: 200, code: 200, success: true, message: null, formatType: 'json', data: { resultType: 'object', result: [{ type: 'bytes', totalBitsRate: { values: [[1673247564, '96801019.52']], analysis: { avg: '112042808.24', max: '301842105.76', min: '52096324', p95: '168089003.35199997' } }, inboundBitsRate: { values: [[1673247564, '11814508.48']], analysis: { avg: '18587597.36', max: '137528138.88', min: '3181142.88', p95: '49561521.447999954' } }, outboundBitsRate: { values: [[1673247564, '84282965.52']], analysis: { avg: '87557861.44', max: '290402258', min: '45337684.48', p95: '121041718.81199999' } }, internalBitsRate: { values: [[1673247564, '9125.12']], analysis: { avg: '278114.32', max: '2215460.48', min: '0', p95: '923494.5719999998' } }, throughBitsRate: { values: [[1673247564, '694420.48']], analysis: { avg: '5619235.12', max: '42455480.24', min: '262607.76', p95: '13559588.195999999' } }, other: { values: [[1673247564, '0.00']], analysis: { avg: '0.01', max: '0.08', min: '0.00', p95: '0.08' } } }, { type: 'packets', totalPacketsRate: { values: [[1673247564, '12077.53']], analysis: { avg: '14062.37', max: '32840.42', min: '6564.17', p95: '20923.167999999987' } }, inboundPacketsRate: { values: [[1673247564, '3865.58']], analysis: { avg: '4241.61', max: '15460.03', min: '1918.22', p95: '8549.799999999997' } }, outboundPacketsRate: { values: [[1673247564, '8118.89']], analysis: { avg: '9170.98', max: '27134.58', min: '4510.25', p95: '13690.540999999996' } }, internalPacketsRate: { values: [[1673247564, '15.89']], analysis: { avg: '35.95', max: '276.47', min: '0.00', p95: '122.49749999999999' } }, throughPacketsRate: { values: [[1673247564, '77.17']], analysis: { avg: '613.82', max: '3768.56', min: '42.92', p95: '1279.757499999999' } }, other: { values: [[1673247564, '0.00']], analysis: { avg: '0', max: '0.01', min: '0.00', p95: '0.01' } } }, { type: 'sessions', totalSessionsRate: { values: [[1673247564, '29.92']], analysis: { avg: '29.89', max: '29.92', min: '29.67', p95: '29.92' } } }] }, msg: 'OK' }
}
const timeFilter = {
dateRangeValue: -1,
startTime: 1673244000000,
endTime: 1673247600000
}
const chart = { id: 1, name: 'network overview line', i18n: '', panelId: 1, pid: 0, type: 102, x: 0, y: 0, w: 19, h: 6, params: {}, cby: 1, ctime: '2022-07-06 16', uby: 1, utime: '2022-07-06 16', remark: '', state: 1, system: 0, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null }, cuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null }, children: [], parent: null, panel: { id: 1, name: 'Network Overview', i18n: null, type: null, params: null, cby: null, ctime: null, uby: null, utime: null, remark: null, state: null, buildIn: null, uuser: null, cuser: null }, i: 1, category: 'echarts', firstShow: false, moved: false }
const chart = {"id":1,"name":"network overview line","i18n":"","panelId":1,"pid":0,"type":102,"x":0,"y":0,"w":19,"h":6,"children":[],"panel":{"id":1,"name":"Network Overview"},"i":1,"category":"echarts","firstShow":false,"moved":false}
function init () {
require('vue-router').useRoute.mockReturnValue({ query: {} })
}
describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', () => {
test('Metric=Bits/s，无数据（空数组）', async () => {
init()
axios.get.mockResolvedValue(mockData.empty)
const wrapper = mount(NetworkOverviewLine, {
propsData: {
timeFilter,
chart
}
})
// 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
await new Promise(resolve => setTimeout(async () => {
const textNode0 = await wrapper.get('[test-id="tabContent0"]')
const textNode1 = await wrapper.get('[test-id="tabContent1"]')
const textNode2 = await wrapper.get('[test-id="tabContent2"]')
const textNode3 = await wrapper.get('[test-id="tabContent3"]')
const textNode4 = await wrapper.get('[test-id="tabContent4"]')
const textNode5 = await wrapper.get('[test-id="tabContent5"]')
expect(textNode0.text()).toEqual('-')
expect(textNode1.text()).toEqual('-')
expect(textNode2.text()).toEqual('-')
expect(textNode3.text()).toEqual('-')
expect(textNode4.text()).toEqual('-')
expect(textNode5.text()).toEqual('-')
resolve()
}, 200))
})
test('Metric=Bits/s，0和大数值', async () => {
init()
axios.get.mockResolvedValue(mockData.bytes.boundary)
const wrapper = mount(NetworkOverviewLine, {
propsData: {
timeFilter,
chart
}
})
// 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
await new Promise(resolve => setTimeout(async () => {
// total页签固定显示，数据是0也一样
const titleNode0 = await wrapper.get('[test-id="tabTitle0"]')
const titleNode1 = await wrapper.get('[test-id="tabTitle2"]')
const titleNode2 = await wrapper.get('[test-id="tabTitle5"]')
const textNode0 = await wrapper.get('[test-id="tabContent0"]')
const textNode1 = await wrapper.get('[test-id="tabContent2"]')
const textNode2 = await wrapper.get('[test-id="tabContent5"]')
expect(titleNode0.text()).toEqual('network.total')
expect(titleNode1.text()).toEqual('network.outbound')
expect(titleNode2.text()).toEqual('network.other')
expect(textNode0.text()).toEqual('0bps')
expect(textNode1.text()).toEqual('95.23Ebps')
expect(textNode2.text()).toEqual('0.01bps')
resolve()
}, 200))
})
test('Metric=Bits/s，点击第三个tab', async () => {
require('vue-router').useRoute.mockReturnValue({ query: {} })
init()
// 模拟axios返回数据
axios.get.mockResolvedValue(mockGet)
axios.get.mockResolvedValue(mockData.common)
// 加载vue组件，获得实例
const wrapper = mount(NetworkOverviewLine, {
propsData: {
@@ -24,11 +79,12 @@ describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', (
chart
}
})
const textNode0 = await wrapper.get('[test-id="tabContent0"]')
const textNode1 = await wrapper.get('[test-id="tabContent1"]')
const textNode2 = await wrapper.get('[test-id="tabContent2"]')
// 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
await new Promise(resolve => setTimeout(() => {
await new Promise(resolve => setTimeout(async () => {
const textNode0 = await wrapper.get('[test-id="tabContent0"]')
const textNode1 = await wrapper.get('[test-id="tabContent1"]')
const textNode2 = await wrapper.get('[test-id="tabContent2"]')
expect(textNode0.text()).toEqual('112.04Mbps')
expect(textNode1.text()).toEqual('18.59Mbps')
expect(textNode2.text()).toEqual('87.56Mbps')
@@ -41,9 +97,9 @@ describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', (
expect(textNode3.classes()).toContain('is-active')
})
test('Metric=Packets/s', async () => {
require('vue-router').useRoute.mockReturnValue({ query: {} })
init()
// 模拟axios返回数据
axios.get.mockResolvedValue(mockGet)
axios.get.mockResolvedValue(mockData.common)
// 加载vue组件，获得实例
const wrapper = mount(NetworkOverviewLine, {
propsData: {
@@ -52,10 +108,11 @@ describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', (
metric: 'Packets/s'
}
})
const textNode0 = await wrapper.get('[test-id="tabContent0"]')
const textNode1 = await wrapper.get('[test-id="tabContent1"]')
const textNode2 = await wrapper.get('[test-id="tabContent2"]')
await new Promise(resolve => setTimeout(() => {
await new Promise(resolve => setTimeout(async () => {
const textNode0 = await wrapper.get('[test-id="tabContent0"]')
const textNode1 = await wrapper.get('[test-id="tabContent1"]')
const textNode2 = await wrapper.get('[test-id="tabContent2"]')
expect(textNode0.text()).toEqual('14.06Kpackets/s')
expect(textNode1.text()).toEqual('4.24Kpackets/s')
expect(textNode2.text()).toEqual('9.17Kpackets/s')
@@ -63,9 +120,9 @@ describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', (
}, 200))
})
test('Metric=Sessions/s', async () => {
require('vue-router').useRoute.mockReturnValue({ query: {} })
init()
// 模拟axios返回数据
axios.get.mockResolvedValue(mockGet)
axios.get.mockResolvedValue(mockData.common)
// 加载vue组件，获得实例
const wrapper = mount(NetworkOverviewLine, {
propsData: {
@@ -74,8 +131,9 @@ describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', (
metric: 'Sessions/s'
}
})
const textNode0 = await wrapper.get('[test-id="tabContent0"]')
await new Promise(resolve => setTimeout(() => {
await new Promise(resolve => setTimeout(async () => {
const textNode0 = await wrapper.get('[test-id="tabContent0"]')
expect(textNode0.text()).toEqual('29.89sessions/s')
resolve()
}, 200))

73
test/views/charts2/charts/networkOverview/NetworkOverviewLineMockData.js Normal file
View File

@@ -0,0 +1,73 @@
const mockData = {
// 空
empty: {
data: {
"status": 200,
"code": 200,
"data": {
"resultType": "object",
"result" : []
}
}
},
bytes: {
// 边界
boundary: {
data: {
"status": 200,
"code": 200,
"data": {
"resultType": "object",
"result": [
{
"type": "bytes",
"totalBitsRate": {
"analysis": {
"avg": "0"
}
},
"inboundBitsRate": {
"analysis": {
"avg": "0"
}
},
"outboundBitsRate": {
"analysis": {
"avg": "95229000000000000000"
}
},
"internalBitsRate": {
"analysis": {
"avg": "0"
}
},
"throughBitsRate": {
"analysis": {
"avg": "0"
}
},
"other": {
"analysis": {
"avg": "0.01"
}
}
},
{
"type": "packets"
},
{
"type": "sessions"
}
]
},
"msg": "OK"
}
}
},
// 正常数据
common: {
data: {"status":200,"code":200,"data":{"resultType":"object","result":[{"type":"bytes","totalBitsRate":{"values":[[1673247564,"96801019.52"]],"analysis":{"avg":"112042808.24","max":"301842105.76","min":"52096324","p95":"168089003.35199997"}},"inboundBitsRate":{"values":[[1673247564,"11814508.48"]],"analysis":{"avg":"18587597.36","max":"137528138.88","min":"3181142.88","p95":"49561521.447999954"}},"outboundBitsRate":{"values":[[1673247564,"84282965.52"]],"analysis":{"avg":"87557861.44","max":"290402258","min":"45337684.48","p95":"121041718.81199999"}},"internalBitsRate":{"values":[[1673247564,"9125.12"]],"analysis":{"avg":"278114.32","max":"2215460.48","min":"0","p95":"923494.5719999998"}},"throughBitsRate":{"values":[[1673247564,"694420.48"]],"analysis":{"avg":"5619235.12","max":"42455480.24","min":"262607.76","p95":"13559588.195999999"}},"other":{"values":[[1673247564,"0.00"]],"analysis":{"avg":"0.01","max":"0.08","min":"0.00","p95":"0.08"}}},{"type":"packets","totalPacketsRate":{"values":[[1673247564,"12077.53"]],"analysis":{"avg":"14062.37","max":"32840.42","min":"6564.17","p95":"20923.167999999987"}},"inboundPacketsRate":{"values":[[1673247564,"3865.58"]],"analysis":{"avg":"4241.61","max":"15460.03","min":"1918.22","p95":"8549.799999999997"}},"outboundPacketsRate":{"values":[[1673247564,"8118.89"]],"analysis":{"avg":"9170.98","max":"27134.58","min":"4510.25","p95":"13690.540999999996"}},"internalPacketsRate":{"values":[[1673247564,"15.89"]],"analysis":{"avg":"35.95","max":"276.47","min":"0.00","p95":"122.49749999999999"}},"throughPacketsRate":{"values":[[1673247564,"77.17"]],"analysis":{"avg":"613.82","max":"3768.56","min":"42.92","p95":"1279.757499999999"}},"other":{"values":[[1673247564,"0.00"]],"analysis":{"avg":"0","max":"0.01","min":"0.00","p95":"0.01"}}},{"type":"sessions","totalSessionsRate":{"values":[[1673247564,"29.92"]],"analysis":{"avg":"29.89","max":"29.92","min":"29.67","p95":"29.92"}}}]},"msg":"OK"}
}
}
export default mockData