From e009142e7dc33c22161c5546528e29fc532449a6 Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Fri, 17 Feb 2023 20:50:29 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=8C=E5=96=84NetworkOverviewLine?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B=EF=BC=9B?= =?UTF-8?q?=E6=9B=B4=E6=94=B9=E5=8F=98=E9=87=8F=E5=90=8D=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/charts2/networkOverviewLine.scss | 8 +- src/views/administration/Index.vue | 10 -- .../charts/dnsInsight/DnsTrafficLine.vue | 54 ++++----- .../charts/linkMonitor/LinkTrafficLine.vue | 42 +++---- .../networkOverview/NetworkOverviewLine.vue | 106 +++++++++--------- .../charts2/charts/npm/NpmTrafficLine.vue | 26 ++--- .../NetworkOverviewLine.test.js | 98 ++++++++++++---- .../NetworkOverviewLineMockData.js | 73 ++++++++++++ 8 files changed, 268 insertions(+), 149 deletions(-) create mode 100644 test/views/charts2/charts/networkOverview/NetworkOverviewLineMockData.js diff --git a/src/assets/css/components/views/charts2/networkOverviewLine.scss b/src/assets/css/components/views/charts2/networkOverviewLine.scss index 88e36698..6f0eb450 100644 --- a/src/assets/css/components/views/charts2/networkOverviewLine.scss +++ b/src/assets/css/components/views/charts2/networkOverviewLine.scss @@ -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; } diff --git a/src/views/administration/Index.vue b/src/views/administration/Index.vue index 6c7b5e93..58e00fc9 100644 --- a/src/views/administration/Index.vue +++ b/src/views/administration/Index.vue @@ -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' } ] } diff --git a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue index 7ff9d86f..757e3d17 100644 --- a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue +++ b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue @@ -5,17 +5,17 @@
-
-
+
-
{{$t(item.name)}}
+
{{$t(item.name)}}
{{unitConvert(item.analysis.avg, unitTypes.number)[0]}} @@ -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() diff --git a/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue b/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue index 60a7181a..14d25fb5 100644 --- a/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue +++ b/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue @@ -2,7 +2,7 @@
@@ -12,18 +12,18 @@
-
-
+
-
{{$t(item.name)}}
+
{{$t(item.name)}}
{{unitConvert(item.analysis.avg, unitTypes.number)[0]}} @@ -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() diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue index 988ab3ab..06a693e9 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue @@ -5,28 +5,29 @@
-
-
-
-
{{$t(item.name)}}
-
-
- {{unitConvert(item.analysis.avg, unitTypes.number)[0]}} - +
@@ -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() diff --git a/src/views/charts2/charts/npm/NpmTrafficLine.vue b/src/views/charts2/charts/npm/NpmTrafficLine.vue index 53e5ef92..a88c306e 100644 --- a/src/views/charts2/charts/npm/NpmTrafficLine.vue +++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue @@ -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) } } }, diff --git a/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js b/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js index aa5db73c..4d8090e4 100644 --- a/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js +++ b/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js @@ -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)) diff --git a/test/views/charts2/charts/networkOverview/NetworkOverviewLineMockData.js b/test/views/charts2/charts/networkOverview/NetworkOverviewLineMockData.js new file mode 100644 index 00000000..a631dcf0 --- /dev/null +++ b/test/views/charts2/charts/networkOverview/NetworkOverviewLineMockData.js @@ -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