diff --git a/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue b/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue index 70b602b1..60a7181a 100644 --- a/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue +++ b/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue @@ -2,7 +2,7 @@
@@ -19,16 +19,18 @@ :key="index" @mouseenter="mouseenter(item)" @mouseleave="mouseleave(item)" - @click="activeChange(item, index)"> + @click="activeChange(item, index)" + :test-id="`tab-${index}`">
{{$t(item.name)}}
-
+
{{unitConvert(item.analysis.avg, unitTypes.number)[0]}} - {{unitConvert(item.analysis.avg, unitTypes.number)[1]}}{{item.unitType}} - + {{unitConvert(item.analysis.avg, unitTypes.number)[1]}} + {{item.unitType}} +
@@ -69,12 +71,12 @@ import unitConvert from '@/utils/unit-convert' import { chartColor3, chartColor4, unitTypes } from '@/utils/constants' import { getLineType, overwriteUrl, urlParamsHandler } from '@/utils/tools' import { getSecond } from '@/utils/date-util' -import { get } from '@/utils/http' import { api } from '@/utils/api' import _ from 'lodash' import * as echarts from 'echarts' import { linkTrafficLineChartOption } from '@/views/charts2/charts/options/echartOption' import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools' +import axios from 'axios' export default { name: 'LinkTrafficLine', @@ -176,7 +178,8 @@ export default { } } this.loading = true - get(api.linkMonitor.totalTrafficAnalysis, params).then((res) => { + axios.get(api.linkMonitor.totalTrafficAnalysis, { params: params }).then((res) => { + res = res.data if (res.code === 200) { this.showError = false this.isNoData = res.data.result.length === 0 @@ -204,67 +207,69 @@ export default { }) }, echartsInit (echartsData) { - if (this.lineTab) { - this.handleActiveBar() - echartsData = echartsData.filter(t => t.show === true && t.invertTab === false) - } else { - echartsData = echartsData.filter(t => t.show === true) - } - const _this = this - const dom = document.getElementById('linkTrafficLineChart') - !this.myChart && (this.myChart = echarts.init(dom)) - this.chartOption = linkTrafficLineChartOption - const chartOption = this.chartOption.series[0] - this.chartOption.series = echartsData.map((t, i) => { - return { - ...chartOption, - name: t.name, - lineStyle: { - color: chartColor3[t.positioning], - width: 1 - }, - stack: t.name !== 'network.total' ? 'network.total' : '', - symbolSize: function (value) { - return _this.symbolSizeSortChange(i, value[0]) - }, - emphasis: { - itemStyle: { - borderColor: chartColor4[t.positioning], - borderWidth: 2, - shadowColor: chartColor4[t.positioning], - shadowBlur: this.sizes[t.positioning] + 2 - } - }, - areaStyle: { - opacity: 0.1, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: chartColor3[t.positioning] - }, - { - offset: 1, - color: chartColor3[t.positioning] - } - ]) - }, - data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number']) + if (!this.isUnitTesting) { + if (this.lineTab) { + this.handleActiveBar() + echartsData = echartsData.filter(t => t.show === true && t.invertTab === false) + } else { + echartsData = echartsData.filter(t => t.show === true) } - }) - this.chartOption.tooltip.formatter = (params) => { - params.forEach(t => { - t.seriesName = this.$t(t.seriesName) - this.mpackets.forEach(e => { - if (this.$t(e.name) === t.seriesName) { - t.borderColor = chartColor3[e.positioning] - } - }) + const _this = this + const dom = document.getElementById('linkTrafficLineChart') + !this.myChart && (this.myChart = echarts.init(dom)) + this.chartOption = linkTrafficLineChartOption + const chartOption = this.chartOption.series[0] + this.chartOption.series = echartsData.map((t, i) => { + return { + ...chartOption, + name: t.name, + lineStyle: { + color: chartColor3[t.positioning], + width: 1 + }, + stack: t.name !== 'network.total' ? 'network.total' : '', + symbolSize: function (value) { + return _this.symbolSizeSortChange(i, value[0]) + }, + emphasis: { + itemStyle: { + borderColor: chartColor4[t.positioning], + borderWidth: 2, + shadowColor: chartColor4[t.positioning], + shadowBlur: this.sizes[t.positioning] + 2 + } + }, + areaStyle: { + opacity: 0.1, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: chartColor3[t.positioning] + }, + { + offset: 1, + color: chartColor3[t.positioning] + } + ]) + }, + data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number']) + } }) - // const str = stackedLineTooltipFormatter(params) - return stackedLineTooltipFormatter(params) + this.chartOption.tooltip.formatter = (params) => { + params.forEach(t => { + t.seriesName = this.$t(t.seriesName) + this.mpackets.forEach(e => { + if (this.$t(e.name) === t.seriesName) { + t.borderColor = chartColor3[e.positioning] + } + }) + }) + // const str = stackedLineTooltipFormatter(params) + return stackedLineTooltipFormatter(params) + } + this.showMarkLine = true + this.myChart.setOption(this.chartOption) } - this.showMarkLine = true - this.myChart.setOption(this.chartOption) }, activeChange (item, index) { if (this.isNoData) return diff --git a/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue b/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue index a36bf802..61d83044 100644 --- a/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue +++ b/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue @@ -6,36 +6,42 @@
{{$t('network.total')}}
-
{{unitConvert(lineData[0].analysis.avg, unitTypes.bps).join('')}}
+
+ {{unitConvert(lineData.analysis.avg, unitTypes.number)[0]}} + + {{unitConvert(lineData.analysis.avg, unitTypes.number)[1]}} + {{lineData.unitType}} + +
{{$t('linkMonitor.bandwidthUsage')}}
-
{{unitConvert(lineData[0].analysis.avg / bandWidth, unitTypes.percent).join('')}}
+
{{unitConvert(lineData.analysis.avg / bandWidth, unitTypes.percent).join('')}}
-
{{$t('linkMonitor.npmScore')}}
-
{{linkTrafficListData.npmScore || '-'}}
+
{{linkTrafficListData.npmScore || '-'}}
{{$t('networkAppPerformance.tcpConnectionEstablishLatency')}}
-
{{unitConvert(Math.floor(linkTrafficListData.establishLatencyMs), unitTypes.time).join('')}}
+
{{unitConvert(Math.floor(linkTrafficListData.establishLatencyMs), unitTypes.time).join('')}}
{{$t('networkAppPerformance.httpResponse')}}
-
{{unitConvert(Math.floor(linkTrafficListData.httpResponseLatency), unitTypes.time).join('')}}
+
{{unitConvert(Math.floor(linkTrafficListData.httpResponseLatency), unitTypes.time).join('')}}
{{$t('networkAppPerformance.sslResponseLatency')}}
-
{{unitConvert(Math.floor(linkTrafficListData.sslConLatency), unitTypes.time).join('')}}
+
{{unitConvert(Math.floor(linkTrafficListData.sslConLatency), unitTypes.time).join('')}}
{{$t('networkAppPerformance.packetLoss')}}
-
{{unitConvert(linkTrafficListData.tcpLostlenPercent, unitTypes.percent).join('')}}
+
{{unitConvert(linkTrafficListData.tcpLostlenPercent, unitTypes.percent).join('')}}
{{$t('overall.packetRetrans')}}
-
{{unitConvert(linkTrafficListData.pktRetransPercent, unitTypes.percent).join('')}}
+
{{unitConvert(linkTrafficListData.pktRetransPercent, unitTypes.percent).join('')}}
@@ -45,7 +51,6 @@ import chartMixin from '@/views/charts2/chart-mixin' import { storageKey, unitTypes } from '@/utils/constants' import unitConvert from '@/utils/unit-convert' -import { get } from '@/utils/http' import { api } from '@/utils/api' import { ref } from 'vue' import { useRoute } from 'vue-router' @@ -53,6 +58,7 @@ import { getSecond } from '@/utils/date-util' import { computeScore } from '@/utils/tools' import Loading from '@/components/common/Loading' import ChartError from '@/components/common/Error' +import axios from 'axios' export default { name: 'linkTrafficList', mixins: [chartMixin], @@ -136,7 +142,8 @@ export default { } } this.loading = true - get(api.linkMonitor.networkAnalysis, params).then(res => { + axios.get(api.linkMonitor.networkAnalysis, { params: params }).then(res => { + res = res.data if (res.code === 200) { this.showError = false this.isNoData = res.data.result.length === 0 @@ -165,6 +172,9 @@ export default { }, mounted () { this.linkTrafficData() + }, + beforeUnmount () { + this.unitConvert = null } } diff --git a/test/views/charts2/charts/linkMonitor/LinkTrafficLine.test.js b/test/views/charts2/charts/linkMonitor/LinkTrafficLine.test.js new file mode 100644 index 00000000..9253b4ae --- /dev/null +++ b/test/views/charts2/charts/linkMonitor/LinkTrafficLine.test.js @@ -0,0 +1,108 @@ +import LinkTrafficLine from '@/views/charts2/charts/linkMonitor/LinkTrafficLine' +import { mount } from '@vue/test-utils' +import axios from 'axios' + +const timeFilter = { + dateRangeValue: -1, + startTime: 1673244000, + endTime: 1673247600 +} + +const mockGet = { + data: {"status":200,"code":200,"queryKey":"87649896d5b7547a0128eb47c2d40853","success":true,"message":null,"statistics":{"elapsed":4,"rows_read":1033063,"bytes_read":8618120,"result_size":13807,"result_rows":101},"job":null,"formatType":"json","meta":[{"name":"stat_time","type":"long","category":"Dimension"},{"name":"egress_bytes","type":"long","category":"Metric"},{"name":"ingress_bytes","type":"long","category":"Metric"},{"name":"egress_pkt","type":"long","category":"Metric"},{"name":"ingress_pkt","type":"long","category":"Metric"},{"name":"bytes_total","type":"long","category":"Metric"},{"name":"packets_total","type":"long","category":"Metric"}],"data":{"resultType":"object","result":[{"type":"bytes","ingressBitsRate":{"values":[["1675388124","0"],["1675388160","4253144"],["1675388196","470709.36"],["1675388232","0"],["1675388268","148192.24"],["1675388304","0"],["1675388340","577072.48"],["1675388376","160431.12"],["1675388412","0"],["1675388448","1639602.64"],["1675388484","0"],["1675388520","2074017.36"],["1675388556","798924.64"],["1675388592","0"],["1675388628","884606"],["1675388664","0"],["1675388700","1373220.48"],["1675388736","21305.36"],["1675388772","0"],["1675388808","1398940.24"],["1675388844","0"],["1675388880","4474519.52"],["1675388916","383473.12"],["1675388952","0"],["1675388988","582813.36"],["1675389024","0"],["1675389060","3545078.24"],["1675389096","766672"],["1675389132","0"],["1675389168","2877694"],["1675389204","0"],["1675389240","2195562.48"],["1675389276","2268681.12"],["1675389312","0"],["1675389348","1438248.88"],["1675389384","0"],["1675389420","88914.24"],["1675389456","363776.24"],["1675389492","0"],["1675389528","103931.36"],["1675389564","0"],["1675389600","930861.12"],["1675389636","473982.48"],["1675389672","0"],["1675389708","210004.88"],["1675389744","0"],["1675389780","764367.52"],["1675389816","236745.52"],["1675389852","0"],["1675389888","199598"],["1675389924","0"],["1675389960","385563.36"],["1675389996","353556.64"],["1675390032","0"],["1675390068","380246.48"],["1675390104","0"],["1675390140","456284"],["1675390176","2560143.76"],["1675390212","0"],["1675390248","3806779.36"],["1675390284","0"],["1675390320","382829.52"],["1675390356","225432.48"],["1675390392","0"],["1675390428","1024283.52"],["1675390464","0"],["1675390500","494194.88"],["1675390536","718094.88"],["1675390572","0"],["1675390608","373146.64"],["1675390644","0"],["1675390680","101628.64"],["1675390716","977218"],["1675390752","0"],["1675390788","7263452.48"],["1675390824","0"],["1675390860","2613115.76"],["1675390896","2987862"],["1675390932","0"],["1675390968","1376989.36"],["1675391004","0"],["1675391040","2245663.12"],["1675391076","602240.64"],["1675391112","0"],["1675391148","437569.12"],["1675391184","0"],["1675391220","115680.88"],["1675391256","42582.24"],["1675391292","0"],["1675391328","42002"],["1675391364","0"],["1675391400","720716"],["1675391436","5382.88"],["1675391472","0"],["1675391508","169074.64"],["1675391544","0"],["1675391580","1214277.76"],["1675391616","1523679.76"],["1675391652","0"],["1675391688","6382256"],["1675391724","0"]],"analysis":{"avg":"756870.4","max":"7263452.48","min":"0","p95":"3545078.24"}},"totalBitsRate":{"values":[["1675388124","0"],["1675388160","17581092.48"],["1675388196","9918148.64"],["1675388232","0"],["1675388268","13213336.64"],["1675388304","0"],["1675388340","41123655.76"],["1675388376","14569548.64"],["1675388412","0"],["1675388448","39157977.52"],["1675388484","0"],["1675388520","15875735.76"],["1675388556","10885102.24"],["1675388592","0"],["1675388628","8943487.12"],["1675388664","0"],["1675388700","18985121.76"],["1675388736","7659627.36"],["1675388772","0"],["1675388808","9288266.88"],["1675388844","0"],["1675388880","15999674.24"],["1675388916","16802700.48"],["1675388952","0"],["1675388988","17836499.52"],["1675389024","0"],["1675389060","22368492"],["1675389096","12570182.88"],["1675389132","0"],["1675389168","19977345.36"],["1675389204","0"],["1675389240","7747381.76"],["1675389276","29050230.64"],["1675389312","0"],["1675389348","5834855.36"],["1675389384","0"],["1675389420","22798420.24"],["1675389456","9061622.64"],["1675389492","0"],["1675389528","2391149.76"],["1675389564","0"],["1675389600","10752915.76"],["1675389636","72671214"],["1675389672","0"],["1675389708","23536865.76"],["1675389744","0"],["1675389780","6080925.76"],["1675389816","27096624.64"],["1675389852","0"],["1675389888","47355125.36"],["1675389924","0"],["1675389960","7525635.52"],["1675389996","12312211.76"],["1675390032","0"],["1675390068","9587065.36"],["1675390104","0"],["1675390140","7763073.36"],["1675390176","12692375.36"],["1675390212","0"],["1675390248","13007133.76"],["1675390284","0"],["1675390320","3241344.88"],["1675390356","13811041.12"],["1675390392","0"],["1675390428","38206391.36"],["1675390464","0"],["1675390500","5489114"],["1675390536","17855136.88"],["1675390572","0"],["1675390608","18409624.48"],["1675390644","0"],["1675390680","15132633.12"],["1675390716","19189583.52"],["1675390752","0"],["1675390788","16803327.36"],["1675390824","0"],["1675390860","19972804.88"],["1675390896","22541580.48"],["1675390932","0"],["1675390968","21671364.88"],["1675391004","0"],["1675391040","25293518.24"],["1675391076","34056467.52"],["1675391112","0"],["1675391148","13181229.76"],["1675391184","0"],["1675391220","12337126.88"],["1675391256","5989032.64"],["1675391292","0"],["1675391328","7393281.36"],["1675391364","0"],["1675391400","29175007.36"],["1675391436","17228925.76"],["1675391472","0"],["1675391508","7375468"],["1675391544","0"],["1675391580","16675685.76"],["1675391616","22908316"],["1675391652","0"],["1675391688","13867890.88"],["1675391724","0"]],"analysis":{"avg":"10578267.2","max":"72671214","min":"0","p95":"34056467.52"}},"egressBitsRate":{"values":[["1675388124","0"],["1675388160","13327948.48"],["1675388196","9447439.36"],["1675388232","0"],["1675388268","13065144.48"],["1675388304","0"],["1675388340","40546583.36"],["1675388376","14409117.52"],["1675388412","0"],["1675388448","37518374.88"],["1675388484","0"],["1675388520","13801718.48"],["1675388556","10086177.52"],["1675388592","0"],["1675388628","8058881.12"],["1675388664","0"],["1675388700","17611901.36"],["1675388736","7638322"],["1675388772","0"],["1675388808","7889326.64"],["1675388844","0"],["1675388880","11525154.64"],["1675388916","16419227.36"],["1675388952","0"],["1675388988","17253686.24"],["1675389024","0"],["1675389060","18823413.76"],["1675389096","11803510.88"],["1675389132","0"],["1675389168","17099651.36"],["1675389204","0"],["1675389240","5551819.36"],["1675389276","26781549.52"],["1675389312","0"],["1675389348","4396606.48"],["1675389384","0"],["1675389420","22709506"],["1675389456","8697846.48"],["1675389492","0"],["1675389528","2287218.48"],["1675389564","0"],["1675389600","9822054.64"],["1675389636","72197231.52"],["1675389672","0"],["1675389708","23326860.88"],["1675389744","0"],["1675389780","5316558.24"],["1675389816","26859879.12"],["1675389852","0"],["1675389888","47155527.36"],["1675389924","0"],["1675389960","7140072.24"],["1675389996","11958655.12"],["1675390032","0"],["1675390068","9206818.88"],["1675390104","0"],["1675390140","7306789.36"],["1675390176","10132231.52"],["1675390212","0"],["1675390248","9200354.48"],["1675390284","0"],["1675390320","2858515.36"],["1675390356","13585608.64"],["1675390392","0"],["1675390428","37182107.76"],["1675390464","0"],["1675390500","4994919.12"],["1675390536","17137042"],["1675390572","0"],["1675390608","18036477.76"],["1675390644","0"],["1675390680","15031004.48"],["1675390716","18212365.52"],["1675390752","0"],["1675390788","9539874.88"],["1675390824","0"],["1675390860","17359689.12"],["1675390896","19553718.48"],["1675390932","0"],["1675390968","20294375.52"],["1675391004","0"],["1675391040","23047855.12"],["1675391076","33454226.88"],["1675391112","0"],["1675391148","12743660.64"],["1675391184","0"],["1675391220","12221446"],["1675391256","5946450.48"],["1675391292","0"],["1675391328","7351279.36"],["1675391364","0"],["1675391400","28454291.36"],["1675391436","17223542.88"],["1675391472","0"],["1675391508","7206393.36"],["1675391544","0"],["1675391580","15461408"],["1675391616","21384636.24"],["1675391652","0"],["1675391688","7485634.88"],["1675391724","0"]],"analysis":{"avg":"9821396.8","max":"72197231.52","min":"0","p95":"33454226.88"}}},{"type":"packets","ingressPacketsRate":{"values":[["1675388124","0.00"],["1675388160","382.61"],["1675388196","44.67"],["1675388232","0.00"],["1675388268","23.64"],["1675388304","0.00"],["1675388340","53.75"],["1675388376","34.89"],["1675388412","0.00"],["1675388448","155.25"],["1675388484","0.00"],["1675388520","186.17"],["1675388556","77.81"],["1675388592","0.00"],["1675388628","84.75"],["1675388664","0.00"],["1675388700","140.39"],["1675388736","9.69"],["1675388772","0.00"],["1675388808","126.83"],["1675388844","0.00"],["1675388880","398.50"],["1675388916","94.92"],["1675388952","0.00"],["1675388988","57.33"],["1675389024","0.00"],["1675389060","326.89"],["1675389096","69.06"],["1675389132","0.00"],["1675389168","253.61"],["1675389204","0.00"],["1675389240","201.11"],["1675389276","203.14"],["1675389312","0.00"],["1675389348","126.33"],["1675389384","0.00"],["1675389420","13.86"],["1675389456","34.81"],["1675389492","0.00"],["1675389528","12.47"],["1675389564","0.00"],["1675389600","107.08"],["1675389636","54.39"],["1675389672","0.00"],["1675389708","24.42"],["1675389744","0.00"],["1675389780","67.47"],["1675389816","35.94"],["1675389852","0.00"],["1675389888","22.44"],["1675389924","0.00"],["1675389960","45.64"],["1675389996","32.81"],["1675390032","0.00"],["1675390068","37.72"],["1675390104","0.00"],["1675390140","43.69"],["1675390176","228.97"],["1675390212","0.00"],["1675390248","392.69"],["1675390284","0.00"],["1675390320","55.33"],["1675390356","47.44"],["1675390392","0.00"],["1675390428","106.06"],["1675390464","0.00"],["1675390500","47.58"],["1675390536","64.56"],["1675390572","0.00"],["1675390608","35.94"],["1675390644","0.00"],["1675390680","17.31"],["1675390716","95.47"],["1675390752","0.00"],["1675390788","638.00"],["1675390824","0.00"],["1675390860","239.11"],["1675390896","290.89"],["1675390932","0.00"],["1675390968","129.31"],["1675391004","0.00"],["1675391040","208.83"],["1675391076","65.31"],["1675391112","0.00"],["1675391148","42.17"],["1675391184","0.00"],["1675391220","17.94"],["1675391256","14.33"],["1675391292","0.00"],["1675391328","6.31"],["1675391364","0.00"],["1675391400","62.83"],["1675391436","2.53"],["1675391472","0.00"],["1675391508","37.06"],["1675391544","0.00"],["1675391580","110.00"],["1675391616","148.53"],["1675391652","0.00"],["1675391688","583.64"],["1675391724","0.00"]],"analysis":{"avg":"72.72","max":"638.00","min":"0.00","p95":"326.89"}},"egressPacketsRate":{"values":[["1675388124","0.00"],["1675388160","1835.75"],["1675388196","865.61"],["1675388232","0.00"],["1675388268","1202.69"],["1675388304","0.00"],["1675388340","3864.69"],["1675388376","1428.56"],["1675388412","0.00"],["1675388448","3433.61"],["1675388484","0.00"],["1675388520","1228.06"],["1675388556","896.42"],["1675388592","0.00"],["1675388628","740.83"],["1675388664","0.00"],["1675388700","1576.75"],["1675388736","721.92"],["1675388772","0.00"],["1675388808","700.17"],["1675388844","0.00"],["1675388880","1058.28"],["1675388916","1487.19"],["1675388952","0.00"],["1675388988","1536.19"],["1675389024","0.00"],["1675389060","1671.50"],["1675389096","1083.58"],["1675389132","0.00"],["1675389168","1561.64"],["1675389204","0.00"],["1675389240","549.50"],["1675389276","2454.47"],["1675389312","0.00"],["1675389348","404.53"],["1675389384","0.00"],["1675389420","2011.22"],["1675389456","810.75"],["1675389492","0.00"],["1675389528","228.50"],["1675389564","0.00"],["1675389600","910.58"],["1675389636","6422.11"],["1675389672","0.00"],["1675389708","2123.44"],["1675389744","0.00"],["1675389780","481.97"],["1675389816","2462.33"],["1675389852","0.00"],["1675389888","4183.94"],["1675389924","0.00"],["1675389960","677.81"],["1675389996","1103.31"],["1675390032","0.00"],["1675390068","851.08"],["1675390104","0.00"],["1675390140","659.33"],["1675390176","936.56"],["1675390212","0.00"],["1675390248","835.78"],["1675390284","0.00"],["1675390320","296.28"],["1675390356","1205.39"],["1675390392","0.00"],["1675390428","3288.14"],["1675390464","0.00"],["1675390500","471.14"],["1675390536","1577.00"],["1675390572","0.00"],["1675390608","1645.36"],["1675390644","0.00"],["1675390680","1390.75"],["1675390716","1612.75"],["1675390752","0.00"],["1675390788","880.92"],["1675390824","0.00"],["1675390860","1573.47"],["1675390896","1809.56"],["1675390932","0.00"],["1675390968","1847.53"],["1675391004","0.00"],["1675391040","2160.33"],["1675391076","3126.36"],["1675391112","0.00"],["1675391148","1166.14"],["1675391184","0.00"],["1675391220","1166.81"],["1675391256","538.75"],["1675391292","0.00"],["1675391328","681.00"],["1675391364","0.00"],["1675391400","2580.83"],["1675391436","1693.17"],["1675391472","0.00"],["1675391508","695.89"],["1675391544","0.00"],["1675391580","1395.19"],["1675391616","1920.39"],["1675391652","0.00"],["1675391688","679.08"],["1675391724","0.00"]],"analysis":{"avg":"904.03","max":"6422.11","min":"0.00","p95":"3126.36"}},"totalPacketsRate":{"values":[["1675388124","0.00"],["1675388160","2218.36"],["1675388196","910.28"],["1675388232","0.00"],["1675388268","1226.33"],["1675388304","0.00"],["1675388340","3918.44"],["1675388376","1463.44"],["1675388412","0.00"],["1675388448","3588.86"],["1675388484","0.00"],["1675388520","1414.22"],["1675388556","974.22"],["1675388592","0.00"],["1675388628","825.58"],["1675388664","0.00"],["1675388700","1717.14"],["1675388736","731.61"],["1675388772","0.00"],["1675388808","827.00"],["1675388844","0.00"],["1675388880","1456.78"],["1675388916","1582.11"],["1675388952","0.00"],["1675388988","1593.53"],["1675389024","0.00"],["1675389060","1998.39"],["1675389096","1152.64"],["1675389132","0.00"],["1675389168","1815.25"],["1675389204","0.00"],["1675389240","750.61"],["1675389276","2657.61"],["1675389312","0.00"],["1675389348","530.86"],["1675389384","0.00"],["1675389420","2025.08"],["1675389456","845.56"],["1675389492","0.00"],["1675389528","240.97"],["1675389564","0.00"],["1675389600","1017.67"],["1675389636","6476.50"],["1675389672","0.00"],["1675389708","2147.86"],["1675389744","0.00"],["1675389780","549.44"],["1675389816","2498.28"],["1675389852","0.00"],["1675389888","4206.39"],["1675389924","0.00"],["1675389960","723.44"],["1675389996","1136.11"],["1675390032","0.00"],["1675390068","888.81"],["1675390104","0.00"],["1675390140","703.03"],["1675390176","1165.53"],["1675390212","0.00"],["1675390248","1228.47"],["1675390284","0.00"],["1675390320","351.61"],["1675390356","1252.83"],["1675390392","0.00"],["1675390428","3394.19"],["1675390464","0.00"],["1675390500","518.72"],["1675390536","1641.56"],["1675390572","0.00"],["1675390608","1681.31"],["1675390644","0.00"],["1675390680","1408.06"],["1675390716","1708.22"],["1675390752","0.00"],["1675390788","1518.92"],["1675390824","0.00"],["1675390860","1812.58"],["1675390896","2100.44"],["1675390932","0.00"],["1675390968","1976.83"],["1675391004","0.00"],["1675391040","2369.17"],["1675391076","3191.67"],["1675391112","0.00"],["1675391148","1208.31"],["1675391184","0.00"],["1675391220","1184.75"],["1675391256","553.08"],["1675391292","0.00"],["1675391328","687.31"],["1675391364","0.00"],["1675391400","2643.67"],["1675391436","1695.69"],["1675391472","0.00"],["1675391508","732.94"],["1675391544","0.00"],["1675391580","1505.19"],["1675391616","2068.92"],["1675391652","0.00"],["1675391688","1262.72"],["1675391724","0.00"]],"analysis":{"avg":"976.75","max":"6476.50","min":"0.00","p95":"3191.67"}}}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20TIME_FLOOR_WITH_FILL%28stat_time%2C%27PT36S%27%2C%27zero%27%29%20AS%20stat_time%2CSUM%28IF%28%20common_egress_link_id%20%3D%202048%2C%20traffic_outbound_byte%2C%200%29%29%20AS%20egress_bytes%2CSUM%28IF%28%20common_ingress_link_id%20%3D%202049%2C%20traffic_inbound_byte%2C%200%29%29%20AS%20ingress_bytes%2CSUM%28IF%28%20common_egress_link_id%20%3D%202048%2C%20traffic_outbound_pkt%2C%200%29%29%20AS%20egress_pkt%2CSUM%28IF%28%20common_ingress_link_id%20%3D%202049%2C%20traffic_inbound_pkt%2C%200%29%29%20AS%20ingress_pkt%2C%28egress_bytes%20%2B%20ingress_bytes%29%20AS%20bytes_total%2C%28egress_pkt%20%2B%20ingress_pkt%29%20AS%20packets_total%20FROM%20metric_link%20WHERE%20stat_time%20%3E%3D%201675388125%20AND%20stat_time%20%3C%201675391725%20%20GROUP%20BY%20stat_time%20ORDER%20BY%20bytes_total%20DESC%20&format=json&option=real-time","msg":"OK"} +} + +const mockGet1 = { + data: {"status":200,"code":200,"queryKey":"a54916e7f363fd065dfaa44ad23d31b5","success":true,"message":null,"statistics":{"elapsed":4,"rows_read":10518,"bytes_read":1062318,"result_size":186,"result_rows":1},"job":null,"formatType":"json","meta":[{"name":"total_bytes","type":"long","category":"Metric"},{"name":"total_packets","type":"long","category":"Metric"},{"name":"establish_latency_ms","type":"double","category":"Metric"},{"name":"http_response_latency","type":"double","category":"Metric"},{"name":"ssl_con_latency","type":"double","category":"Metric"},{"name":"tcp_lostlen_percent","type":"double","category":"Metric"},{"name":"pkt_retrans_percent","type":"double","category":"Metric"}],"data":{"resultType":"table","result":[{"totalBytes":"4426409159","totalBitsRate":9836464.8,"totalPackets":"3324302","establishLatencyMs":92.9489,"httpResponseLatency":154.2884,"sslConLatency":0,"tcpLostlenPercent":0.0069,"pktRetransPercent":0.0165}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20SUM%28IF%28%20common_egress_link_id%20%3D%201792%2C%20traffic_outbound_byte%2C%200%29%20%2B%20IF%28%20common_ingress_link_id%20%3D%201793%2C%20traffic_inbound_byte%2C%200%29%29%20as%20total_bytes%2CSUM%28IF%28%20common_egress_link_id%20%3D%201792%2C%20traffic_outbound_pkt%2C%200%29%20%2B%20IF%28%20common_ingress_link_id%20%3D%201793%2C%20traffic_inbound_pkt%2C%200%29%29%20AS%20total_packets%2CROUND%28AVG%28avg_establish_latency_ms%29%2C%204%29%20AS%20establish_latency_ms%2CROUND%28AVG%28avg_http_response_latency_ms%29%2C%204%29%20AS%20http_response_latency%2CROUND%28AVG%28avg_ssl_con_latency_ms%29%2C%204%29%20AS%20ssl_con_latency%2CROUND%28AVG%28tcp_lostlen_ratio%29%2C%204%29%20AS%20tcp_lostlen_percent%2CROUND%28AVG%28pkt_retrans_ratio%29%2C%204%29%20AS%20pkt_retrans_percent%20FROM%20metric_link%20WHERE%20stat_time%20%3E%3D%201675403646%20AND%20stat_time%20%3C%201675407246%20&format=json&option=real-time","msg":"OK"} +} + +const cnLinkInfo = [{"originalLinkId":"256","linkId":"Hundredgige1","direction":"egress","nextHop":"西安","bandwidth":100000000000},{"originalLinkId":"257","linkId":"Hundredgige1","direction":"ingress","nextHop":"西安","bandwidth":100000000000},{"originalLinkId":"512","linkId":"Hundredgige2","direction":"egress","nextHop":"太原","bandwidth":100000000000},{"originalLinkId":"513","linkId":"Hundredgige2","direction":"ingress","nextHop":"太原","bandwidth":100000000000},{"originalLinkId":"768","linkId":"Hundredgige3","direction":"egress","nextHop":"太原","bandwidth":100000000000},{"originalLinkId":"769","linkId":"Hundredgige3","direction":"ingress","nextHop":"太原","bandwidth":100000000000},{"originalLinkId":"1024","linkId":"Hundredgige4","direction":"egress","nextHop":"西宁","bandwidth":100000000000},{"originalLinkId":"1025","linkId":"Hundredgige4","direction":"ingress","nextHop":"西宁","bandwidth":100000000000},{"originalLinkId":"1280","linkId":"Hundredgige5","direction":"egress","nextHop":"西安","bandwidth":100000000000},{"originalLinkId":"1281","linkId":"Hundredgige5","direction":"ingress","nextHop":"西安","bandwidth":100000000000},{"originalLinkId":"1536","linkId":"Hundredgige6","direction":"egress","nextHop":"太原","bandwidth":100000000000},{"originalLinkId":"1537","linkId":"Hundredgige6","direction":"ingress","nextHop":"太原","bandwidth":100000000000},{"originalLinkId":"1792","linkId":"Hundredgige7","direction":"egress","nextHop":"太原","bandwidth":100000000000},{"originalLinkId":"1793","linkId":"Hundredgige7","direction":"ingress","nextHop":"太原","bandwidth":100000000000},{"originalLinkId":"2048","linkId":"Hundredgige8","direction":"egress","nextHop":"太原","bandwidth":100000000000},{"originalLinkId":"2049","linkId":"Hundredgige8","direction":"ingress","nextHop":"太原","bandwidth":100000000000},{"originalLinkId":"2304","linkId":"Hundredgige9","direction":"egress","nextHop":"太原","bandwidth":100000000000},{"originalLinkId":"2305","linkId":"Hundredgige9","direction":"ingress","nextHop":"太原","bandwidth":100000000000},{"originalLinkId":"2816","linkId":"Hundredgige10","direction":"egress","nextHop":"西安","bandwidth":100000000000},{"originalLinkId":"2817","linkId":"Hundredgige10","direction":"ingress","nextHop":"西安","bandwidth":100000000000}] +const linkInfo = JSON.stringify(cnLinkInfo) + +const query1 = {"t":"1675395023486","thirdPanel":"15","thirdMenu":"Link ID: Hundredgige7","panelName":"Link ID: Hundredgige7","queryCondition":"common_egress_link_id = 1792 or common_ingress_link_id = 1793","curTab":"ip","startTime":1675391498,"endTime":1675395098,"range":60} +const query2 = {"t":"1675409029937","thirdPanel":"15","thirdMenu":"Link ID: Hundredgige10","panelName":"Link ID: Hundredgige10","queryCondition":"common_egress_link_id = 2816 or common_ingress_link_id = 2817","curTab":"ip","startTime":1675388605,"endTime":1675410205,"range":360,"lineMetric":"Bits/s"} +const query3 = {"t":"1675409029937","thirdPanel":"15","thirdMenu":"Link ID: Hundredgige10","panelName":"Link ID: Hundredgige10","queryCondition":"common_egress_link_id = 2816 or common_ingress_link_id = 2817","curTab":"ip","startTime":1675388605,"endTime":1675410205,"range":360,"lineMetric":"Packets/s"} + +let wrapper = null +/** + * 进行axios请求，并挂载vue实例 + * 模拟localStorage获取数据 + * @param query + */ +function axiosPostAndMounted (query) { + require('vue-router').useRoute.mockReturnValue({ query: query }) + // 模拟 axios 数据 + axios.get.mockImplementation(url => { + switch (url) { + case '/interface/link/overview/drilldown/totalTrafficAnalysis': + return Promise.resolve(mockGet) + case '/interface/link/overview/drilldown/networkAnalysis': + return Promise.resolve(mockGet1) + } + }) + // 模拟localStorage获取数据 + jest.spyOn(localStorage.__proto__, 'getItem').mockImplementation(key => linkInfo) + // 加载vue组件，获得实例 + wrapper = mount(LinkTrafficLine, { + propsData: { + timeFilter + } + }) +} + +describe('views/charts2/charts/linkMonitor/LinkTrafficLine.vue测试', () => { + test('左侧列表信息：link下钻折线图 ', async () => { + axiosPostAndMounted(query1) + await new Promise(resolve => setTimeout(() => { + const textNode0 = wrapper.get('[test-id="line-tabContent"]') + const textNode1 = wrapper.get('[test-id="line-percent"]') + const textNode2 = wrapper.get('[test-id="line-score"]') + const textNode3 = wrapper.get('[test-id="line-tcp"]') + const textNode4 = wrapper.get('[test-id="line-http"]') + const textNode5 = wrapper.get('[test-id="line-ssl"]') + const textNode6 = wrapper.get('[test-id="line-packetLoss"]') + const textNode7 = wrapper.get('[test-id="line-packetRetrans"]') + + expect(textNode0.text()).toEqual('756.87Kbps') + expect(textNode1.text()).toEqual('0%') + expect(textNode2.text()).toEqual('5') + expect(textNode3.text()).toEqual('92ms') + expect(textNode4.text()).toEqual('154ms') + expect(textNode5.text()).toEqual('0ms') + expect(textNode6.text()).toEqual('0.69%') + expect(textNode7.text()).toEqual('1.65%') + resolve() + }, 200)) + }) + test('Metric=Bits/s, tab点击第二个高亮：link下钻折线图 ', async () => { + axiosPostAndMounted(query2) + + const textNode3 = await wrapper.get('[test-id="tab-1"]') + await textNode3.trigger('click') + expect(textNode3.classes()).toContain('is-active') + + 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(() => { + expect(textNode0.text()).toEqual('756.87Kbps') + expect(textNode1.text()).toEqual('10.58Mbps') + expect(textNode2.text()).toEqual('9.82Mbps') + resolve() + }, 200)) + }) + test('Metric=Packets/s：link下钻折线图 ', async () => { + axiosPostAndMounted(query3) + 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(() => { + expect(textNode0.text()).toEqual('72.72packets/s') + expect(textNode1.text()).toEqual('904.03packets/s') + expect(textNode2.text()).toEqual('976.75packets/s') + resolve() + }, 200)) + }) +})