From 5221c21159c7a4a0284b31afa50b0a0a39ff47a0 Mon Sep 17 00:00:00 2001 From: "@changcode" Date: Mon, 22 Aug 2022 15:49:38 +0800 Subject: [PATCH] =?UTF-8?q?fix=20Network=20&=20APP=20Performance=20?= =?UTF-8?q?=E4=B8=8B=E9=92=BB=20=E8=AF=B7=E6=B1=82=E5=8F=82=E6=95=B0?= =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=8E=B7=E5=8F=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/charts2/charts/SingleValue.vue | 26 +++++++- .../networkOverview/NetworkOverviewApps.vue | 2 + .../NetworkOverviewPerformanceEvent.vue | 4 +- .../charts/npm/NpmAppCategoryScore.vue | 2 - src/views/charts2/charts/npm/NpmLine.vue | 64 ++++++++++++------- .../charts2/charts/npm/NpmNetworkQuantity.vue | 20 +++++- src/views/charts2/charts/npm/NpmTabs.vue | 3 - .../charts2/charts/npm/NpmTrafficLine.vue | 28 +++----- .../charts2/charts/npm/RelatedSessions.vue | 15 ++--- 9 files changed, 101 insertions(+), 63 deletions(-) diff --git a/src/views/charts2/charts/SingleValue.vue b/src/views/charts2/charts/SingleValue.vue index d89a3f65..c3df34eb 100644 --- a/src/views/charts2/charts/SingleValue.vue +++ b/src/views/charts2/charts/SingleValue.vue @@ -110,19 +110,23 @@ import { getChainRatio } from '@/utils/tools' import { getSecond } from '@/utils/date-util' import { get } from '@/utils/http' import { api } from '@/utils/api' +import _ from 'lodash' +import chartMixin from '@/views/charts2/chart-mixin' export default { name: 'SingleValue', props: { npmNetworkCycleData: Array, - npmNetworkName: Array, - timeFilter: Object + npmNetworkName: Array }, + mixins: [chartMixin], data () { return { unitTypes, unitConvert, npmNetworkData: [], - npmNetworkLastCycleData: [] + npmNetworkLastCycleData: [], + side: '', + chartData: {} } }, watch: { @@ -152,11 +156,22 @@ export default { this.npmNetworkData = cycle }, npmNetworkLastCycleQuery () { + const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/) + const type = this.$store.getters.getDimensionType const params = { startTime: getSecond(this.timeFilter.startTime), endTime: getSecond(this.timeFilter.endTime), cycle: 1 } + if (this.chartData.id === 23) { + this.side = 'client' + } else { + this.side = 'server' + } + if (condition && type) { + params.q = `${type}='${condition[1]}' and side='${this.side}'` + params.type = type + } const tcp = get(api.npm.overview.tcpSessionDelay, params) const http = get(api.npm.overview.httpResponseDelay, params) const ssl = get(api.npm.overview.sslConDelay, params) @@ -171,6 +186,11 @@ export default { }) }) } + }, + mounted () { + if (this.chart) { + this.chartData = _.cloneDeep(this.chart) + } } } diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue index aeb81077..72fd11c4 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue @@ -276,6 +276,8 @@ export default { } }) } + }).finally(() => { + this.toggleLoading(false) }) }, metricChange (value) { diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue index 905e08bf..86a60005 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue @@ -63,8 +63,6 @@ export default { if (res.data.result.length === 0) { this.isNoData = true return - } else { - this.isNoData = false } res.data.result = res.data.result.map(t => { if (t.eventSeverity === 'critical') { @@ -91,6 +89,8 @@ export default { } this.chartOption.series[0].data = res.data.result.sort((a, b) => { return a.index - b.index }) this.myChart.setOption(this.chartOption) + } else { + this.isNoData = true } }).finally(() => { this.loading1 = false diff --git a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue index bac1c86e..0dc8f93c 100644 --- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue +++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue @@ -102,7 +102,6 @@ import { getSecond } from '@/utils/date-util' import { get } from '@/utils/http' import { getChainRatio, computeScore } from '@/utils/tools' import chartMixin from '@/views/charts2/chart-mixin' -import Loading from '@/components/common/Loading' import ChartNoData from '@/views/charts/charts/ChartNoData' export default { name: 'NpmAppCategoryScore', @@ -130,7 +129,6 @@ export default { } }, components: { - Loading, ChartNoData }, mixins: [chartMixin], diff --git a/src/views/charts2/charts/npm/NpmLine.vue b/src/views/charts2/charts/npm/NpmLine.vue index 3396183b..0b690daa 100644 --- a/src/views/charts2/charts/npm/NpmLine.vue +++ b/src/views/charts2/charts/npm/NpmLine.vue @@ -80,9 +80,9 @@ export default { ], timer: null, myChartArray: [], - side: 'server', - country: '', - province: '', + side: this.$store.state.panel.npmLocationSide, + country: this.$store.state.panel.npmLocationCountry, + // province: '', throughputName: '', tcpName: '', httpName: '', @@ -91,30 +91,46 @@ export default { packetsRetrainsName: '' } }, + watch: { + '$store.state.panel.npmLocationSide': { + deep: true, + handler (n) { + this.side = n + this.init() + } + }, + '$store.state.panel.npmLocationCountry': { + deep: true, + handler (n) { + this.country = n + this.init() + } + } + }, methods: { init () { const params = { startTime: getSecond(this.timeFilter.startTime), endTime: getSecond(this.timeFilter.endTime), side: this.side, - country: this.country, - province: this.province + country: this.country + // province: this.province } this.toggleLoading(true) if (this.chartData.id === 11) { - throughputData.forEach((t, i) => { - if (t.type === 'totalBytesRate') { - this.chartOptionLineData[i].values = t.values - } else if (t.type === 'inboundBytesRate') { - this.chartOptionLineData[i].values = t.values - } else if (t.type === 'outboundBytesRate') { - this.chartOptionLineData[i].values = t.values - } - }) - const result = this.chartOptionLineData.filter(t => this.chartData.params.color.indexOf(t.color) > -1) get(api.npm.location.thoughput, params).then(res => { if (res.code === 200) { - this.echartsInit(result, this.chartData.name, this.chartData.params.unitType) + res.data.result.forEach((t, i) => { + if (t.type === 'totalBytesRate') { + this.chartOptionLineData[i].values = t.values + } else if (t.type === 'inboundBytesRate') { + this.chartOptionLineData[i].values = t.values + } else if (t.type === 'outboundBytesRate') { + this.chartOptionLineData[i].values = t.values + } + }) + const result = this.chartOptionLineData.filter(t => this.chartData.params.color.indexOf(t.color) > -1) + this.echartsInit(result, this.chartData, this.chartData.params.unitType) } else { this.throughputName = this.$_.get(this.chartData, 'i18n') || this.chartData.name } @@ -124,7 +140,7 @@ export default { } else if (this.chartData.id === 12) { get(api.npm.location.tcpConnectionEstablishLatency, params).then(res => { if (res.code === 200) { - this.echartsInit(tcpData, this.chartData.name, this.chartData.params.unitType) + this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType) } else { this.tcpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name } @@ -134,7 +150,7 @@ export default { } else if (this.chartData.id === 13) { get(api.npm.location.httpResponseLatency, params).then(res => { if (res.code === 200) { - this.echartsInit(httpData, this.chartData.name, this.chartData.params.unitType) + this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType) } else { this.httpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name } @@ -144,7 +160,7 @@ export default { } else if (this.chartData.id === 14) { get(api.npm.location.sslHandshakeLatency, params).then(res => { if (res.code === 200) { - this.echartsInit(sslData, this.chartData.name, this.chartData.params.unitType) + this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType) } else { this.sslName = this.$_.get(this.chartData, 'i18n') || this.chartData.name } @@ -154,7 +170,7 @@ export default { } else if (this.chartData.id === 15) { get(api.npm.location.packetsLoss, params).then(res => { if (res.code === 200) { - this.echartsInit(packetsLossData, this.chartData.name, this.chartData.params.unitType) + this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType) } else { this.packetsLossName = this.$_.get(this.chartData, 'i18n') || this.chartData.name } @@ -164,7 +180,7 @@ export default { } else if (this.chartData.id === 16) { get(api.npm.location.packetsRetrains, params).then(res => { if (res.code === 200) { - this.echartsInit(packetsRetrainsData, this.chartData.name, this.chartData.params.unitType) + this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType) } else { this.packetsRetrainsName = this.$_.get(this.chartData, 'i18n') || this.chartData.name } @@ -173,8 +189,8 @@ export default { }) } }, - echartsInit (data, name, type) { - const dom = document.getElementById(`chart${name}`) + echartsInit (data, chartData, type) { + const dom = document.getElementById(`chart${chartData.name}`) if (dom) { this.myChart = echarts.init(dom) this.chartOption = npmLineChartOption @@ -183,7 +199,7 @@ export default { this.chartOption.series = data.map((t, i) => { return { ...seriesTemplate, - name: t.legend ? t.legend : t.type, + name: t.legend ? t.legend : this.$_.get(chartData, 'i18n') || chartData.name, stack: this.chartData.params.isStack ? 'network.total' : '', lineStyle: { width: 1 diff --git a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue index 137416b7..9b7febac 100644 --- a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue +++ b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue @@ -4,6 +4,7 @@ :npm-network-cycle-data="npmNetworkCycleData" :npm-network-name="npmNetworkName" :time-filter="timeFilter" + :chartData="chartData" > @@ -14,6 +15,7 @@ import { get } from '@/utils/http' import { getSecond } from '@/utils/date-util' import { api } from '@/utils/api' import chartMixin from '@/views/charts2/chart-mixin' +import _ from 'lodash' export default { name: 'NpmNetworkQuantity', components: { SingleValue }, @@ -27,16 +29,29 @@ export default { { name: 'networkAppPerformance.packetLoss' }, { name: 'overall.packetRetrans' } ], - npmNetworkCycleData: [] + npmNetworkCycleData: [], + side: '', + chartData: {} } }, methods: { npmNetworkCycleQuery () { + const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/) + const type = this.$store.getters.getDimensionType const params = { startTime: getSecond(this.timeFilter.startTime), endTime: getSecond(this.timeFilter.endTime), cycle: 0 } + if (this.chartData.id === 23) { + this.side = 'client' + } else { + this.side = 'server' + } + if (condition && type) { + params.q = `${type}='${condition[1]}' and side='${this.side}'` + params.type = type + } const tcp = get(api.npm.overview.tcpSessionDelay, params) const http = get(api.npm.overview.httpResponseDelay, params) const ssl = get(api.npm.overview.sslConDelay, params) @@ -56,6 +71,9 @@ export default { }, mounted () { + if (this.chart) { + this.chartData = _.cloneDeep(this.chart) + } this.npmNetworkCycleQuery() } } diff --git a/src/views/charts2/charts/npm/NpmTabs.vue b/src/views/charts2/charts/npm/NpmTabs.vue index 394bce38..a45fb49a 100644 --- a/src/views/charts2/charts/npm/NpmTabs.vue +++ b/src/views/charts2/charts/npm/NpmTabs.vue @@ -26,9 +26,6 @@ export default { } }, mixins: [chartMixin], - props: { - chart: Object - }, watch: { currentTab (n) { this.$nextTick(() => { diff --git a/src/views/charts2/charts/npm/NpmTrafficLine.vue b/src/views/charts2/charts/npm/NpmTrafficLine.vue index b62a9b0c..c2048022 100644 --- a/src/views/charts2/charts/npm/NpmTrafficLine.vue +++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue @@ -22,15 +22,10 @@ import { api } from '@/utils/api' import { getSecond } from '@/utils/date-util' import ChartNoData from '@/views/charts/charts/ChartNoData' import _ from 'lodash' +import chartMixin from '@/views/charts2/chart-mixin' export default { name: 'NpmTrafficLine', - props: { - chart: Object, - timeFilter: Object, - // type: String, - // side: String, - // ip: String - }, + mixins: [chartMixin], components: { ChartNoData }, @@ -43,10 +38,7 @@ export default { return { unitConvert, unitTypes, - isNoData: false, - ip: '116.178.236.216', side: '', - type: 'ip', mpackets: [ { name: 'network.total', show: true, positioning: 0, data: [], unitType: '' }, { name: 'network.inbound', show: true, positioning: 1, data: [], unitType: '' }, @@ -60,8 +52,8 @@ export default { }, methods: { init () { - const condition = this.$store.getters.getQueryCondition - console.log(condition) + const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/) + const type = this.$store.getters.getDimensionType if (this.chartData.id === 24) { this.side = 'client' } else { @@ -70,16 +62,11 @@ export default { const params = { startTime: getSecond(this.timeFilter.startTime), endTime: getSecond(this.timeFilter.endTime), - q: `ip='${this.ip}' and side='${this.side}'`, - type: 'ip' + q: `${type}='${condition[1]}' and side='${this.side}'`, + type: type } - // if (condition) { - // params.q = condition - // params.type = this.type - // } get(api.npm.overview.trafficGraph, params).then((res) => { if (res.code === 200) { - // res.data.result.length = 0 if (res.data.result.length === 0) { this.isNoData = true return @@ -116,6 +103,8 @@ export default { } else { this.isNoData = true } + }).finally(() => { + this.toggleLoading(false) }) }, echartsInit (echartsData) { @@ -221,4 +210,3 @@ export default { } } - diff --git a/src/views/charts2/charts/npm/RelatedSessions.vue b/src/views/charts2/charts/npm/RelatedSessions.vue index fb655f85..ad1b6bde 100644 --- a/src/views/charts2/charts/npm/RelatedSessions.vue +++ b/src/views/charts2/charts/npm/RelatedSessions.vue @@ -35,30 +35,27 @@ import { api } from '@/utils/api' import { getSecond } from '@/utils/date-util' import unitConvert from '@/utils/unit-convert' import { unitTypes } from '@/utils/constants' +import chartMixin from '@/views/charts2/chart-mixin' export default { name: 'RelatedSessions', - props: { - chart: Object, - timeFilter: Object, - // ip: String - }, + mixins: [chartMixin], data () { return { sessionData: {}, unitConvert, unitTypes, clientSessions: 0, - serverSessions: 0, - ip: '116.178.236.216' + serverSessions: 0 } }, methods: { relatedSessionsData () { + const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/) const params = { startTime: getSecond(this.timeFilter.startTime), endTime: getSecond(this.timeFilter.endTime), - ip: this.ip + ip: condition[1] } const divGreen = document.getElementById('green') const divred = document.getElementById('red') @@ -77,6 +74,8 @@ export default { divGreen.style.width = this.sessionData.clientSessions divred.style.width = this.sessionData.serverSessions } + }).finally(() => { + this.toggleLoading(false) }) } },