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

fix Network & APP Performance 下钻 请求参数动态获取

Browse Source
This commit is contained in:
@changcode
2022-08-22 15:49:38 +08:00
parent e75635741c
commit 5221c21159
9 changed files with 101 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/charts2/charts/SingleValue.vue
View File

@@ -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)
}
}
}
</script>

2
src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
View File

@@ -276,6 +276,8 @@ export default {
}
})
}
}).finally(() => {
this.toggleLoading(false)
})
},
metricChange (value) {

4
src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
View File

@@ -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

2
src/views/charts2/charts/npm/NpmAppCategoryScore.vue
View File

@@ -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],

50
src/views/charts2/charts/npm/NpmLine.vue
View File

@@ -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,18 +91,36 @@ 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) => {
get(api.npm.location.thoughput, params).then(res => {
if (res.code === 200) {
res.data.result.forEach((t, i) => {
if (t.type === 'totalBytesRate') {
this.chartOptionLineData[i].values = t.values
} else if (t.type === 'inboundBytesRate') {
@@ -112,9 +130,7 @@ export default {
}
})
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)
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

20
src/views/charts2/charts/npm/NpmNetworkQuantity.vue
View File

@@ -4,6 +4,7 @@
:npm-network-cycle-data="npmNetworkCycleData"
:npm-network-name="npmNetworkName"
:time-filter="timeFilter"
:chartData="chartData"
></single-value>
</div>
</template>
@@ -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()
}
}

3
src/views/charts2/charts/npm/NpmTabs.vue
View File

@@ -26,9 +26,6 @@ export default {
}
},
mixins: [chartMixin],
props: {
chart: Object
},
watch: {
currentTab (n) {
this.$nextTick(() => {

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

@@ -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 {
}
}
</script>

15
src/views/charts2/charts/npm/RelatedSessions.vue
View File

@@ -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)
})
}
},