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

fix:CN-1518 Subscriber流量曲线图的交互逻辑优化(减少请求次数),及其他模块相关代码调整

Browse Source
This commit is contained in:
hanyuxia
2023-12-22 17:32:02 +08:00
parent 899b0e1e9d
commit 21eafd4087
7 changed files with 87 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -175,8 +175,8 @@ export default {
const url = this.lineQueryCondition ? api.dnsInsight.drilldownTrafficAnalysis : api.dnsInsight.totalTrafficAnalysis
axios.get(url, { params }).then(res => {
this.chartDateObject = res
if (res.status === 200) {
this.chartDateObject = res.data.data.result
this.showError = false
this.isNoData = res.data.data.result.length === 0
if (!active) {
@@ -208,28 +208,9 @@ export default {
}
this.toggleLoading(true)
try {
const res = this.chartDateObject.data
if (this.chartDateObject.status === 200) {
this.isNoData = res.data.result.length === 0
if (!active) {
this.tabs = _.cloneDeep(dataForDnsTrafficLine.tabs)
}
if (this.isNoData) {
this.lineTab = ''
this.tabs = _.cloneDeep(dataForDnsTrafficLine.tabs)
} else {
this.initData(res.data.result, val, active, show)
}
} else {
this.isNoData = false
this.showError = true
this.errorMsg = this.errorMsgHandler(res)
}
this.initData(this.chartDateObject, val, active, show)
} catch (e) {
console.error(e)
this.isNoData = false
this.showError = true
this.errorMsg = this.errorMsgHandler(e)
} finally {
this.toggleLoading(false)
}

20
src/views/charts2/charts/entityDetail/EntityDetailLine.vue
View File

@@ -228,8 +228,8 @@ export default {
this.toggleLoading(true)
axios.get(`${api.entity.throughput}/${this.entity.entityType}`, { params: params }).then(response => {
const res = response.data
this.chartDateObject = response
if (response.status === 200) {
this.chartDateObject = res.data.result
this.isNoData = res.data.result.length === 0
this.showError = false
if (!active) {
@@ -255,25 +255,9 @@ export default {
const newVal = val ? _.clone(val) : this.metric
this.toggleLoading(true)
try {
const res = this.chartDateObject.data
if (this.chartDateObject.status === 200) {
this.isNoData = res.data.result.length === 0
this.showError = false
if (!active) {
this.tabs = _.cloneDeep(this.tabsTemplate)
}
if (this.isNoData) {
this.lineTab = ''
this.tabs = _.cloneDeep(this.tabsTemplate)
} else {
this.initData(res.data.result, newVal, active, show, n)
}
} else {
this.httpError(res)
}
this.initData(this.chartDateObject, newVal, active, show, n)
} catch (e) {
console.error(e)
this.httpError(e)
} finally {
this.toggleLoading(false)
}

36
src/views/charts2/charts/entityDetail/lines/App.vue
View File

@@ -167,7 +167,18 @@ export default {
if (n === metricType.Sessions) {
this.lineTab = 'total'
}
this.init(n, 'active')
const { query } = this.$route
const rangeParam = query.range
const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.entity.trafficLine || 60)
if (dateRangeValue !== -1) {
const { startTime, endTime } = getNowTime(dateRangeValue)
const timeFilter = { startTime: getSecond(startTime), endTime: getSecond(endTime), range: dateRangeValue }
const newUrl = urlParamsHandler(window.location.href, query, timeFilter)
overwriteUrl(newUrl)
this.init(n, 'active', timeFilter)
} else {
this.initTabData(n, 'active')
}
}
},
methods: {
@@ -176,13 +187,13 @@ export default {
const newUrl = urlParamsHandler(window.location.href, query, newParam)
overwriteUrl(newUrl)
},
init (val, active) {
init (val, active, timeFilter) {
const newVal = val ? _.clone(val) : this.metric
const params = {
resource: this.entity.entityName,
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
startTime: timeFilter ? timeFilter.startTime : getSecond(this.timeFilter.startTime),
endTime: timeFilter ? timeFilter.endTime : getSecond(this.timeFilter.endTime),
metric: newVal
}
@@ -193,8 +204,8 @@ export default {
this.toggleLoading(true)
axios.get(`${api.entity.throughput}/${this.entity.entityType}/relate/app`, { params: params }).then(response => {
const res = response.data
if (response.status === 200) {
this.chartDateObject = res.data.result
this.isNoData = res.data.result.length === 0
this.showError = false
if (!active) {
@@ -216,6 +227,17 @@ export default {
this.toggleLoading(false)
})
},
initTabData (val, active) {
const newVal = val ? _.clone(val) : this.metric
this.toggleLoading(true)
try {
this.initData(this.chartDateObject, newVal, active)
} catch (e) {
console.error(e)
} finally {
this.toggleLoading(false)
}
},
echartsInit (echartsData) {
// echarts内容在单元测试时不执行
if (!this.isUnitTesting) {
@@ -302,7 +324,11 @@ export default {
if (this.lineTab === item.class) return
this.lineTab = item.class
this.legendSelectChange(item, index, 'active')
if (isClick) {
this.initTabData(this.metric, 'active')
} else {
this.init(this.metric, 'active')
}
},
mouseenter (item) {
if (this.isNoData) return

37
src/views/charts2/charts/entityDetail/lines/ServiceName.vue
View File

@@ -196,7 +196,19 @@ export default {
e.invertTab = true
}
})
this.init(n, this.showMarkLine, '', n)
const { query } = this.$route
const rangeParam = query.range
const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.entity.trafficLine || 60)
if (dateRangeValue !== -1) {
const { startTime, endTime } = getNowTime(dateRangeValue)
const timeFilter = { startTime: getSecond(startTime), endTime: getSecond(endTime), range: dateRangeValue }
const newUrl = urlParamsHandler(window.location.href, query, timeFilter)
overwriteUrl(newUrl)
this.init(n, this.showMarkLine, '', n, timeFilter)
} else {
this.initTabData(n, this.showMarkLine, '', n)
}
}
},
methods: {
@@ -205,13 +217,13 @@ export default {
const newUrl = urlParamsHandler(window.location.href, query, newParam)
overwriteUrl(newUrl)
},
init (val, show, active, n) {
init (val, show, active, n, timeFilter) {
const newVal = val ? _.clone(val) : this.metric
const params = {
resource: this.entity.entityName,
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
startTime: timeFilter ? timeFilter.startTime : getSecond(this.timeFilter.startTime),
endTime: timeFilter ? timeFilter.endTime : getSecond(this.timeFilter.endTime),
metric: newVal
}
@@ -222,8 +234,8 @@ export default {
this.toggleLoading(true)
axios.get(`${api.entity.throughput}/${this.entity.entityType}`, { params: params }).then(response => {
const res = response.data
if (response.status === 200) {
this.chartDateObject = res.data.result
this.isNoData = res.data.result.length === 0
this.showError = false
if (!active) {
@@ -245,6 +257,17 @@ export default {
this.toggleLoading(false)
})
},
initTabData (val, show, active, n) {
const newVal = val ? _.clone(val) : this.metric
this.toggleLoading(true)
try {
this.initData(this.chartDateObject, newVal, active, show, n)
} catch (e) {
console.error(e)
} finally {
this.toggleLoading(false)
}
},
echartsInit (echartsData, show) {
// echarts内容在单元测试时不执行
if (!this.isUnitTesting) {
@@ -389,7 +412,11 @@ export default {
this.legendSelectChange(item, index, 'active')
this.showMarkLine = !item.invertTab
}
if (isClick) {
this.initTabData(this.metric, this.showMarkLine, 'active')
} else {
this.init(this.metric, this.showMarkLine, 'active')
}
},
mouseenter (item) {
if (this.isNoData) return

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

@@ -152,15 +152,9 @@ export default {
if (!val) {
val = this.lineMetric
}
let params = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime)
}
if (timeFilter) {
params = {
startTime: timeFilter.startTime,
endTime: timeFilter.endTime
}
const params = {
startTime: timeFilter ? timeFilter.startTime : getSecond(this.timeFilter.startTime),
endTime: timeFilter ? timeFilter.endTime : getSecond(this.timeFilter.endTime)
}
if (this.queryCondition) {
const condition = this.queryCondition.split(' or ')
@@ -172,9 +166,9 @@ export default {
this.loading = true
axios.get(api.linkMonitor.totalTrafficAnalysis, { params: params }).then(response => {
const res = response.data
this.chartDateObject = response
if (response.status === 200) {
this.showError = false
this.chartDateObject = res.data.result
this.isNoData = res.data.result.length === 0
if (!active) {
this.tabs = dataForLinkTrafficLine.tabs
@@ -204,28 +198,9 @@ export default {
}
this.loading = true
try {
const res = this.chartDateObject.data
if (this.chartDateObject.status === 200) {
this.showError = false
this.isNoData = res.data.result.length === 0
if (!active) {
this.tabs = dataForLinkTrafficLine.tabs
}
if (this.isNoData) {
this.lineTab = ''
this.tabs = dataForLinkTrafficLine.tabs
} else {
this.initData(res.data.result, val, active, show)
}
} else {
this.showError = true
this.errorMsg = this.errorMsgHandler(res)
}
this.initData(this.chartDateObject, val, active, show)
} catch (e) {
console.error(e)
this.showError = true
this.errorMsg = this.errorMsgHandler(e)
this.isNoData = false
} finally {
this.loading = false
}

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

@@ -180,17 +180,10 @@ export default {
init (val, show, active, n, timeFilter) {
const newVal = val ? _.clone(val) : this.metric
let params = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime)
const params = {
startTime: timeFilter ? timeFilter.startTime : getSecond(this.timeFilter.startTime),
endTime: timeFilter ? timeFilter.endTime : getSecond(this.timeFilter.endTime)
}
if (timeFilter) {
params = {
startTime: timeFilter.startTime,
endTime: timeFilter.endTime
}
}
let url
if (this.lineQueryCondition && this.fourthMenu) {
params.q = this.lineQueryCondition
@@ -209,8 +202,8 @@ export default {
this.toggleLoading(true)
axios.get(url, { params: params }).then(response => {
const res = response.data
this.chartDateObject = response
if (response.status === 200) {
this.chartDateObject = res.data.result
this.isNoData = res.data.result.length === 0
this.showError = false
if (!active) {
@@ -236,25 +229,9 @@ export default {
const newVal = val ? _.clone(val) : this.metric
this.toggleLoading(true)
try {
const res = this.chartDateObject.data
if (this.chartDateObject.status === 200) {
this.isNoData = res.data.result.length === 0
this.showError = false
if (!active) {
this.tabs = _.cloneDeep(this.tabsTemplate)
}
if (this.isNoData) {
this.lineTab = ''
this.tabs = _.cloneDeep(this.tabsTemplate)
} else {
this.initData(res.data.result, newVal, active, show, n)
}
} else {
this.httpError(res)
}
this.initData(this.chartDateObject, newVal, active, show, n)
} catch (e) {
console.error(e)
this.httpError(e)
} finally {
this.toggleLoading(false)
}

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

@@ -143,10 +143,10 @@ export default {
this.toggleLoading(true)
if (params.type && params.q) {
axios.get(api.npm.overview.trafficGraph, { params: params }).then(response => {
this.chartDateObject = response
const res = response.data
if (response.status === 200) {
this.showError = false
this.chartDateObject = res.data.result
this.isNoData = res.data.result.length === 0
if (this.isNoData) {
this.tabs = dataForNpmTrafficLine.tabs
@@ -198,73 +198,14 @@ export default {
if (!val) {
val = this.metricFilter
}
let condition = ''
const type = this.dimensionType
if (this.lineQueryCondition.indexOf(' OR ') > -1) {
condition = this.lineQueryCondition.split(/["|'](.*?)["|']/)
} else if (this.lineQueryCondition.indexOf('+OR+') > -1) {
condition = this.lineQueryCondition.replace(/\+/g, ' ').split(/["|'](.*?)["|']/)
} else {
condition = this.lineQueryCondition
}
if (parseFloat(this.tabIndex) === 0) {
this.side = 'client'
} else if (parseFloat(this.tabIndex) === 1) {
this.side = 'server'
}
const params = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
type: type
}
if (type === 'ip' || type === 'clientIp' || type === 'serverIp') {
params.q = `${condition} and side='${this.side}'`
} else {
params.q = condition
}
this.toggleLoading(true)
if (params.type && params.q) {
try {
const res = this.chartDateObject.data
if (this.chartDateObject.status === 200) {
this.showError = false
this.isNoData = res.data.result.length === 0
if (this.isNoData) {
this.tabs = dataForNpmTrafficLine.tabs
this.npmQuantity = dataForNpmTrafficLine.npmQuantity
} else {
this.initLineData(res.data.result, val)
}
} else {
this.httpError(res)
}
this.initLineData(this.chartDateObject, val)
} catch (e) {
this.httpError(e)
console.error(e)
} finally {
this.toggleLoading(false)
}
} else {
this.toggleLoading(true)
try {
this.showError = false
this.isNoData = this.chartDateObject.length === 0
if (this.isNoData) {
this.tabs = dataForNpmTrafficLine.tabs
this.npmQuantity = dataForNpmTrafficLine.npmQuantity
} else {
this.initLineData(this.chartDateObject, val)
}
} catch (e) {
this.httpError(e)
} finally {
this.toggleLoading(false)
}
}
},
/**
* 初始化echarts折线图配置信息
@@ -417,6 +358,7 @@ export default {
})
},
metricChange (value) {
if (this.isNoData) return
this.initDataByCache(value)
},
resize () {