From d25912b2cea64916526c43f9bafcba428241548c Mon Sep 17 00:00:00 2001 From: changcode Date: Fri, 25 Nov 2022 16:08:32 +0800 Subject: [PATCH] =?UTF-8?q?CN-812=20feat:=20npm=E4=B8=8B=E9=92=BB=E4=B8=89?= =?UTF-8?q?=E7=BA=A7=E8=8F=9C=E5=8D=95=E7=BD=91=E7=BB=9C=E6=80=A7=E8=83=BD?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3,=E5=89=8D=E7=AB=AF=E5=AF=B9=E5=BA=94?= =?UTF-8?q?=E9=80=BB=E8=BE=91=E4=BC=98=E5=8C=96=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/api.js | 2 + src/views/charts2/Panel.vue | 13 ++- .../charts2/charts/npm/NpmNetworkQuantity.vue | 110 +++--------------- 3 files changed, 30 insertions(+), 95 deletions(-) diff --git a/src/utils/api.js b/src/utils/api.js index fe4e7d41..75fed64d 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -172,6 +172,8 @@ export const api = { trafficGraph: '/interface/application/performance/overview/drilldown/drilldown/dimension/trafficGraph', // 各维度下钻网络性能 networkAnalysis: '/interface/application/performance/overview/drilldown/dimension/networkAnalysis', + // 各维度下钻网络性能 三级菜单 + allNetworkAnalysis: '/interface/application/performance/overview/drilldown/dimension/allNetworkAnalysis', // 下钻地图 map: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/trafficAnalysis', mapTcp: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/tcpSessionDelay', diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue index ce2b9481..e10a87c6 100644 --- a/src/views/charts2/Panel.vue +++ b/src/views/charts2/Panel.vue @@ -260,6 +260,8 @@ export default { const queryCondition = ref(query.queryCondition || '') const dimensionType = ref(query.dimensionType || '') + // 三级菜单判断 + const tabOperationType = ref(query.tabOperationType) const networkOverviewBeforeTab = ref(query.networkOverviewBeforeTab || '') return { panelType, @@ -270,6 +272,7 @@ export default { path, queryCondition, dimensionType, + tabOperationType, networkOverviewBeforeTab } }, @@ -343,12 +346,13 @@ export default { }, scoreCalculation () { let condition = '' + let url = '' if (this.queryCondition.indexOf(' OR ') > -1) { condition = this.queryCondition.split(/["|'](.*?)["|']/) } else { condition = this.queryCondition } - const type = this.dimensionType || this.networkOverviewBeforeTab + let type = this.dimensionType || this.networkOverviewBeforeTab const params = { startTime: getSecond(this.timeFilter.startTime), endTime: getSecond(this.timeFilter.endTime), @@ -382,9 +386,14 @@ export default { params.type = type } } + if (parseFloat(this.tabOperationType) === 3) { + url = api.npm.overview.allNetworkAnalysis + } else { + url = api.npm.overview.networkAnalysis + } if ((type && condition) || type) { params.type = params.type || type - get(api.npm.overview.networkAnalysis, params).then(res => { + get(url, params).then(res => { if (res.code === 200) { const data = { establishLatencyMs: res.data.result.establishLatencyMsAvg || null, diff --git a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue index 1fb696cb..11ee0aa3 100644 --- a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue +++ b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue @@ -27,11 +27,13 @@ export default { const queryCondition = ref(query.queryCondition || '') const dimensionType = ref(query.dimensionType || '') const tabIndex = ref(query.tabIndex) + const tabOperationType = ref(query.tabOperationType) const networkOverviewBeforeTab = ref(query.networkOverviewBeforeTab || '') return { queryCondition, dimensionType, tabIndex, + tabOperationType, networkOverviewBeforeTab } }, @@ -63,6 +65,7 @@ export default { methods: { npmNetworkCycleQuery () { let condition = '' + let url = '' if (this.queryCondition.indexOf(' OR ') > -1) { condition = this.queryCondition.split(/["|'](.*?)["|']/) } else { @@ -107,14 +110,19 @@ export default { params.type = type } } + if (parseFloat(this.tabOperationType) === 3) { + url = api.npm.overview.allNetworkAnalysis + } else { + url = api.npm.overview.networkAnalysis + } if ((type && condition) || type) { params.type = params.type || type this.toggleLoading(true) - get(api.npm.overview.networkAnalysis, params).then(res => { + get(url, params).then(res => { if (res.code === 200) { this.npmNetworkCycleData = res.data.result } - this.npmNetworkLastCycleQuery() + this.npmNetworkLastCycleQuery(url, params) }).catch(e => { this.toggleLoading(false) }) @@ -148,104 +156,20 @@ export default { }) } }, - npmNetworkLastCycleQuery () { - let condition = '' - if (this.queryCondition.indexOf(' OR ') > -1) { - condition = this.queryCondition.split(/["|'](.*?)["|']/) - } else { - condition = this.queryCondition - } - const type = this.dimensionType || this.networkOverviewBeforeTab + npmNetworkLastCycleQuery (url, param) { const params = { startTime: getSecond(this.timeFilter.startTime), endTime: getSecond(this.timeFilter.endTime), cycle: 1 } - if (this.tabIndex == 0) { - this.side = 'client' - } else if (this.tabIndex == 1) { - this.side = 'server' + if (param && param.type && param.q) { + params.type = param.type + params.q = param.q } - if (condition && (typeof condition !== 'object') && type) { - if (type === 'clientIp') { - params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='client'` - } else if (type === 'serverIp') { - params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='server'` - } else if (type === 'clientCity') { - params.q = `client_city='${condition.split(/'(.*?)'/)[1]}'` - } else if (type === 'serverCity') { - params.q = `server_city='${condition.split(/'(.*?)'/)[1]}'` - } else { - params.q = condition - } - params.type = type - } else if (condition.length > 1 && type && type === 'ip') { - params.q = `${type}='${condition[1]}' and side='${this.side}'` - params.type = type - } else if (condition.length > 1 && type && type !== 'ip') { - if (type === 'country' || type === 'asn' || type === 'province' || type === 'city' || type === 'isp') { - params.q = `${type}='${condition[1]}'` - params.type = type - } else if (type === 'idcRenter') { - params.q = `idc_renter='${condition[1]}'` - params.type = type - } else { - params.q = `${condition[0]}'${condition[1]}'` - params.type = type - } - } - if ((type && condition) || type) { - params.type = params.type || type + if ((params.type && params.q) || (param && param.type)) { + params.type = params.type || param.type this.toggleLoading(true) - get(api.npm.overview.networkAnalysis, params).then(res => { - // if (res.code === 200) { - // this.npmNetworkLastCycleData = res.data.result - // let timer = null - // if (timer) { - // clearTimeout(timer) - // } - // timer = setTimeout(() => { - // this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0) - // }, 300) - // } - if (res.code === 200) { - this.npmNetworkLastCycleData = res.data.result - } else { - this.npmNetworkLastCycleData = [res] - } - let timer = null - if (timer) { - clearTimeout(timer) - } - timer = setTimeout(() => { - this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0) - }, 300) - }).catch((e) => { - let timer = null - if (timer) { - clearTimeout(timer) - } - this.npmNetworkLastCycleData = [e] - timer = setTimeout(() => { - this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0) - }, 300) - }).finally(() => { - this.toggleLoading(false) - }) - } else if (!type && !condition && this.networkOverviewBeforeTab) { - this.toggleLoading(true) - params.type = this.networkOverviewBeforeTab - get(api.npm.overview.networkAnalysis, params).then(res => { - // if (res.code === 200) { - // this.npmNetworkLastCycleData = res.data.result - // let timer = null - // if (timer) { - // clearTimeout(timer) - // } - // timer = setTimeout(() => { - // this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0) - // }, 300) - // } + get(url, params).then(res => { if (res.code === 200) { this.npmNetworkLastCycleData = res.data.result } else {