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

CN-642 fix: overview-app逻辑调整

Browse Source
This commit is contained in:
chenjinsong
2022-08-08 22:31:08 +08:00
parent 6465bdd5b8
commit 4e510eb25d
5 changed files with 930 additions and 961 deletions
Download Patch File Download Diff File Expand all files Collapse all files

391
src/views/charts2/charts/NetworkOverviewApps.vue
View File

@@ -24,7 +24,7 @@
</div>
<div class="app-card-title-more" v-ele-click-outside="clickOutSide">
<span><i class="cn-icon cn-icon-more-dark" @click="moreChange(app)"></i></span>
<span class="app-card-title-more-delete" @click="del(app, index)" v-show="app.moreName"><i class="cn-icon cn-icon-delete"></i>{{$t('overall.delete')}}</span>
<span class="app-card-title-more-delete" @click="del(app, index)" v-show="app.moreOptions"><i class="cn-icon cn-icon-delete"></i>{{$t('overall.delete')}}</span>
</div>
</div>
<div class="app-card__bodys">
@@ -115,6 +115,7 @@ import { get, put } from '@/utils/http'
import { api } from '@/utils/api'
import _ from 'lodash'
import { getSecond } from '@/utils/date-util'
import { appTestData, appPrevTestData, providerTestData, providerPrevTestData } from './appsTestData'
export default {
name: 'NetworkOverviewApps',
props: {
@@ -168,339 +169,90 @@ export default {
unitConvert,
clickOutSide () {
this.appData.forEach(t => {
t.moreName = false
t.moreOptions = false
})
},
init () {
this.appDataQuery(this.appData)
},
appDataQuery (data) {
const appLabels = []
const providerLabels = []
let appData = []
let providerData = []
data.forEach(t => {
if (t.type === 'app') {
appLabels.push(t)
} else if (t.type === 'provider') {
providerLabels.push(t)
// this.appDataQuery(this.appData)
const appCards = []
const providerCards = []
this.appData.forEach(d => {
if (d.type === 'app') {
appCards.push(d)
} else if (d.type === 'provider') {
providerCards.push(d)
}
})
if (appLabels) {
const params = {
let prevRequest
let request
let params
if (appCards.length > 0) {
params = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
appLabels: appLabels.map(item => { return item.name }).join(',')
appLabels: appCards.map(item => {
return item.name
}).join(',')
}
const app1 = get(api.netWorkOverview.applicationCycleTrafficTotal, params)
const app2 = get(api.netWorkOverview.applicationTrafficAnalysis, params)
this.resultTotal = [
{
type: 'bytes',
analysis: {
rate: 2,
total: 3145435
prevRequest = get(api.netWorkOverview.applicationCycleTrafficTotal, params)
request = get(api.netWorkOverview.applicationTrafficAnalysis, params)
this.handleData(prevRequest, request, 'app')
}
},
{
type: 'packets',
analysis: {
rate: 2,
total: 3245435
}
},
{
type: 'sessions',
analysis: {
rate: 2,
total: 23345
}
}
]
this.resultAnalysis = [
{
type: 'bytes',
l11: {
analysis: {
rate: 2
},
values: [
[
1435781430781,
'12'
],
[
1435781431781,
'13'
]
]
},
a0: {
analysis: {
rate: 4
},
values: [
[
1435781430781,
'12'
],
[
1435781431781,
'31'
]
]
}
},
{
type: 'packets',
l11: {
analysis: {
rate: 3
},
values: [
[
1435781430781,
'13'
],
[
1435781431781,
'21'
]
]
},
a0: {
analysis: {
rate: 3
},
values: [
[
1435781430781,
'11'
],
[
1435781431781,
'21'
]
]
}
},
{
type: 'sessions',
l11: {
analysis: {
rate: 2
},
values: [
[
1435781430781,
'1'
],
[
1435781431781,
'1'
]
]
}
}
]
this.resultTotal.forEach(t => {
this.resultAnalysis.forEach((v, i) => {
if (t.type === v.type) {
this.resultAnalysis[i].total = t
}
})
})
appData = this.resultAnalysis
Promise.all([app1, app2]).then(res => {
if (res.code === 200) {
console.log(1)
}
})
this.appData.forEach((app, i) => {
if (app.type === 'app') {
appData.forEach(t => {
if (t.type === this.appShowType && this.appShowType === 'bytes') {
// app.value = t.total.analysis.rate === 0 ? 0 : (t[app.name].analysis.rate - t.total.analysis.rate) / t.total.analysis.rate
app.rate = t[app.name].analysis.rate
app.pRate = t.total.analysis.rate
app.total = t.total.analysis.total
app.lineData = t[app.name].values.map(v => [Number(v[0]), Number(v[1]), 'time'])
app.trend = this.periodicJudgmentCalculationChange(app.rate, app.pRate).value
}
})
this.initChart(app)
}
})
}
if (providerLabels) {
const params = {
if (providerCards.length > 0) {
params = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
appCompanies: providerLabels.map(item => { return item.name }).join(',')
appLabels: providerCards.map(item => {
return item.name
}).join(',')
}
const app1 = get(api.netWorkOverview.appCompanyCycleTrafficTotal, params)
const app2 = get(api.netWorkOverview.appCompanyTrafficAnalysis, params)
this.resultTotal = [
{
type: 'bytes',
analysis: {
rate: 20,
total: 3245435
prevRequest = get(api.netWorkOverview.appCompanyCycleTrafficTotal, params)
request = get(api.netWorkOverview.appCompanyTrafficAnalysis, params)
this.handleData(prevRequest, request, 'provider')
}
},
{
type: 'packets',
analysis: {
rate: 2,
total: 3245435
handleData (prevRequest, request, _t) {
Promise.all([prevRequest, request]).then(res => {
// if (res[0].code === 200 && res[1].code === 200) {
if (true) {
// const prevData = res[0].data.result
// const data = res[1].data.result
let prevData
let data
if (_t === 'app') {
prevData = appPrevTestData
data = appTestData
} else if (_t === 'provider') {
prevData = providerPrevTestData
data = providerTestData
}
},
{
type: 'sessions',
analysis: {
rate: 2,
total: 23345
let toCompareType = 'bytes'
if (this.metricFilter === 'Sessions/s') {
toCompareType = 'sessions'
} else if (this.metricFilter === 'Packets/s') {
toCompareType = 'packets'
}
}
]
this.resultAnalysis = [
{
type: 'bytes',
l11: {
analysis: {
rate: 2
},
values: [
[
1435781430781,
'12'
],
[
1435781431781,
'13'
]
]
},
a0: {
analysis: {
rate: 6
},
values: [
[
1435781430781,
'12'
],
[
1435781431781,
'31'
]
]
},
d3: {
analysis: {
rate: 8
},
values: [
[
1435781430781,
'121'
],
[
1435781431781,
'131'
],
[
1435781432781,
'321'
],
[
1435781433781,
'331'
]
]
}
},
{
type: 'packets',
l11: {
analysis: {
rate: 3
},
values: [
[
1435781430781,
'13'
],
[
1435781431781,
'21'
]
]
},
a0: {
analysis: {
rate: 3
},
values: [
[
1435781430781,
'11'
],
[
1435781431781,
'21'
]
]
}
},
{
type: 'sessions',
l11: {
analysis: {
rate: 2
},
values: [
[
1435781430781,
'1'
],
[
1435781431781,
'1'
]
]
}
}
]
this.resultTotal.forEach(t => {
this.resultAnalysis.forEach((v, i) => {
if (t.type === v.type) {
this.resultAnalysis[i].total = t
}
})
})
Promise.all([app1, app2]).then(res => {
if (res.code === 200) {
console.log(1)
}
})
providerData = this.resultAnalysis
this.appData.forEach((app, i) => {
if (app.type === 'provider') {
providerData.forEach(t => {
if (t.type === this.appShowType && this.appShowType === 'bytes') {
// app.value = t.total.analysis.rate === 0 ? 0 : (t[app.name].analysis.rate - t.total.analysis.rate) / t.total.analysis.rate
app.rate = t[app.name].analysis.rate
app.pRate = t.total.analysis.rate
app.total = t.total.analysis.total
app.lineData = t[app.name].values.map(v => [Number(v[0]), Number(v[1]), 'time'])
app.trend = this.periodicJudgmentCalculationChange(app.rate, app.pRate).value
}
})
this.initChart(app)
data.forEach(d => {
if (d.type === toCompareType) {
const prevTypeData = prevData.find(p => p.type === toCompareType)
Object.keys(d).forEach(app => {
if (app !== 'type') {
this.appData.forEach(d2 => {
if (d2.type === _t && d2.name === app) {
d2.rate = d[app].analysis.rate
d2.pRate = prevTypeData ? (prevTypeData[app] ? prevTypeData[app].rate : 0) : 0
d2.total = d[app].analysis.total
d2.lineData = d[app].values.map(v => [Number(v[0]), Number(v[1]), 'time'])
d2.trend = this.periodicJudgmentCalculationChange(d2.rate, d2.pRate).value
this.initChart(d2)
}
})
}
})
}
})
}
})
},
metricChange (value) {
if (value === 'Bits/s') {
@@ -705,7 +457,7 @@ export default {
moreChange (app) {
this.appData.forEach(t => {
if (t.name === app.name && t.type === app.type) {
t.moreName = !t.moreName
t.moreOptions = !t.moreOptions
}
})
},
@@ -713,12 +465,13 @@ export default {
const periodicData = {}
if (period > pperiod) {
periodicData.value = 'up'
periodicData.total = (period - pperiod) / pperiod
periodicData.total = pperiod === 0 ? 0 : (period - pperiod) / pperiod
} else if (period < pperiod) {
periodicData.value = 'down'
periodicData.total = (pperiod - period) / pperiod
} else {
periodicData.value = ''
periodicData.total = 0
}
return periodicData
},
@@ -737,11 +490,9 @@ export default {
app = apps.find(p => p.user === 'default')
}
this.appData = app.list
}
this.timer = setTimeout(() => {
this.init()
}, 100)
window.addEventListener('resize', this.resize)
}
}
}
</script>

148
src/views/charts2/charts/NpmMap.vue
View File

@@ -40,25 +40,83 @@
</template>
<script>
import mapTestData from '@/views/charts2/charts/mapTestData'
import { mapData, mapData2, drillDownData } from '@/views/charts2/charts/mapTestData'
import { shallowRef } from 'vue'
import * as am4Core from '@amcharts/amcharts4/core'
import * as am4Maps from '@amcharts/amcharts4/maps'
import { getGeoData } from '@/utils/tools'
import { storageKey } from '@/utils/constants'
import { storageKey, unitTypes } from '@/utils/constants'
import locationOptions from '@/views/charts2/charts/locationOptions'
import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
export default {
name: 'NpmMap',
data () {
return {
locationOptions,
mapTestData,
mapData,
mapData2,
drillDownData,
myChart: null,
polygonSeries: null,
countrySeries: null,
worldImageSeries: null,
countryImageSeries: null,
// Server | Client
trafficDirection: 'Server',
location: ''
location: '',
keyMapping: [
{
key: 'sessions',
label: this.$t('overall.sessions'),
unitType: unitTypes.number
},
{
key: 'establishLatency',
label: this.$t('networkAppPerformance.tripTime'),
unitType: unitTypes.time
},
{
key: 'httpResponseLatency',
label: this.$t('networkAppPerformance.httpResponse'),
unitType: unitTypes.time
},
{
key: 'sslConLatency',
label: this.$t('networkAppPerformance.sslResponse'),
unitType: unitTypes.time
},
{
key: 'sequenceGapLossPercent',
label: this.$t('networkAppPerformance.packetLossRate'),
unitType: unitTypes.percent
},
{
key: 'pktRetransPercent',
label: this.$t('networkAppPerformance.retransmissionRate'),
unitType: unitTypes.percent
},
{
key: 'packets',
label: this.$t('overall.packets'),
unitType: unitTypes.number
},
{
key: 'sentBytes',
label: this.$t('overall.sent'),
unitType: unitTypes.byte
},
{
key: 'receivedBytes',
label: this.$t('overall.received'),
unitType: unitTypes.byte
},
{
key: 'count',
label: this.$t('overall.count'),
unitType: unitTypes.number
}
]
}
},
methods: {
@@ -74,6 +132,82 @@ export default {
}
this.myChart = shallowRef(chart)
this.polygonSeries = shallowRef(this.polygonSeriesFactory())
this.worldImageSeries = shallowRef(this.imageSeriesFactory())
// 渲染
this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
const countryId = ev.target.dataItem.dataContext.id
ev.target.isHover = false
if (countryId) {
const targetMapObject = this.polygonSeries.getPolygonById(countryId)
targetMapObject.series.chart.zoomToMapObject(targetMapObject)
const geoData = getGeoData(countryId)
if (geoData) {
this.countrySeries = shallowRef(this.polygonSeriesFactory())
this.countrySeries.geodata = geoData
this.countryImageSeries = shallowRef(this.imageSeriesFactory())
this.polygonSeries.hide()
this.worldImageSeries.hide()
const country = ev.target.dataItem.dataContext.name
const queryParams = { ...this.queryParams, ipLocationCountry: country }
const chartData = this.drillDownData
this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
}
}
})
},
loadAm4ChartMap (polygonSeries, imageSeries, country, chartData) {
// chartData不为空是下钻
if (chartData) {
this.$emit('showLoading', true)
}
try {
// 清除数据
polygonSeries.data.splice(0)
// 清除legend
this.myChart.children.each((s, i) => {
if (s && s.className !== 'Container') {
this.myChart.children.removeIndex(i)
}
})
this.showMapBackButton = !!country
const data = chartData || this.mapData
imageSeries.data = data.map(r => ({
...this.convertMapData(r),
id: r.ipLocationId || r.Country,
dnsServerRole: r.dnsServerRole,
name: r.ipLocationCity || r.ipLocationProvince || r.ipLocationCountry || r.Country,
desc: 'hehe',
color: '#7E9F54',
border: '#7E9F54'
}))
} catch (e) {
console.error(e)
} finally {
if (chartData) {
setTimeout(() => {
this.$emit('showLoading', false)
}, 200)
}
}
},
convertMapData (data) {
const converted = {}
this.keyMapping.forEach(mapping => {
if (data[mapping.key] || data[mapping.key] === 0) {
converted[mapping.key] = Number(data[mapping.key])
converted[`${mapping.key}Label`] = mapping.label
converted[`${mapping.key}ShowValue`] = valueToRangeValue(data[mapping.key], mapping.unitType).join(' ')
converted[`${mapping.key}Display`] = 'block'
} else {
converted[mapping.key] = ''
converted[`${mapping.key}Label`] = ''
converted[`${mapping.key}Display`] = 'none'
}
})
return converted
},
polygonSeriesFactory () {
const polygonSeries = this.myChart.series.push(new am4Maps.MapPolygonSeries())
@@ -120,7 +254,7 @@ export default {
circle.propertyFields.fill = 'color'
circle.propertyFields.stroke = 'border'
circle.strokeWidth = 1
circle.tooltipHTML = this.generatePolygonTooltipHTML()
// circle.tooltipHTML = this.generatePolygonTooltipHTML()
imageSeries.tooltip.getFillFromObject = false
imageSeries.tooltip.background.fill = am4Core.color('#41495D')
imageSeries.tooltip.background.filters.clear()
@@ -129,8 +263,8 @@ export default {
imageSeries.heatRules.push({
target: circle,
property: 'radius',
min: 6,
max: 25,
min: 15,
max: 15,
dataField: 'value'
})

284
src/views/charts2/charts/appsTestData.js Normal file
View File

@@ -0,0 +1,284 @@
export const appTestData = [
{
"type": "bytes",
"l11": {
"analysis": {
"rate": 2,
"total":2245435
},
"values": [
[
1435781430781,
3
],
[
1435781431781,
2
]
]
},
"a0": {
"analysis": {
"rate": 2,
"total":3245435
},
"values": [
[
1435781430781,
1
],
[
1435781431781,
1
]
]
}
},
{
"type": "packets",
"l11": {
"analysis": {
"rate": 3,
"total":4245435
},
"values": [
[
1435781430781,
4
],
[
1435781431781,
5
]
]
},
"a0": {
"analysis": {
"rate": 3,
"total":2245435
},
"values": [
[
1435781430781,
2
],
[
1435781431781,
1
]
]
}
},
{
"type": "sessions",
"l11": {
"analysis": {
"rate": 2,
"total": 2245435
},
"values": [
[
1435781430781,
3
],
[
1435781431781,
8
]
]
},
"a0": {
"analysis": {
"rate": 3,
"total": 3245435
},
"values": [
[
1435781430781,
1
],
[
1435781431781,
1
]
]
}
}
]
export const appPrevTestData = [
{
"type": "bytes",
"l11": {
"rate": 2,
"total":3245435
},
"a0": {
"rate": 3,
"total":4245435
}
},
{
"type": "packets",
"l11": {
"rate": 2,
"total":3245435
},
"a0": {
"rate": 4,
"total":4245435
}
},
{
"type": "sessions",
"l11": {
"rate": 3,
"total":233451
},
"a0": {
"rate": 3,
"total":4245435
}
}
]
export const providerTestData = [
{
"type": "bytes",
"d3": {
"analysis": {
"rate": 4,
"total":4245435
},
"values": [
[
1435781430781,
"1"
],
[
1435781431781,
"1"
]
]
},
"a0": {
"analysis": {
"rate": 2,
"total":3245435
},
"values": [
[
1435781430781,
1
],
[
1435781431781,
2
]
]
}
},
{
"type": "packets",
"d3": {
"analysis": {
"rate": 3,
"total": 1245435
},
"values": [
[
1435781430781,
2
],
[
1435781431781,
1
]
]
},
"a0": {
"analysis": {
"rate": 3,
"total": 3245435
},
"values": [
[
1435781430781,
5
],
[
1435781431781,
3
]
]
}
},
{
"type": "sessions",
"d3": {
"analysis": {
"rate": 2,
"total":2245435
},
"values": [
[
1435781430781,
"1"
],
[
1435781431781,
"1"
]
]
},
"a0": {
"analysis": {
"rate": 3,
"total": 3245435
},
"values": [
[
1435781430781,
1
],
[
1435781431781,
3
]
]
}
}
]
export const providerPrevTestData = [
{
"type": "bytes",
"d3": {
"rate": 2,
"total":2245435
},
"a0": {
"rate": 3,
"total":4245435
}
},
{
"type": "packets",
"d3": {
"rate": 2,
"total":3245435
},
"a0": {
"rate": 4,
"total":4245435
}
},
{
"type": "sessions",
"d3": {
"rate": 3,
"total":233451
},
"a0": {
"rate": 3,
"total":4245435
}
}
]

1054
src/views/charts2/charts/mapTestData.js
View File

File diff suppressed because it is too large Load Diff

4
src/views/charts2/charts/options/echartOption.js
View File

@@ -236,7 +236,9 @@ export const appListChartOption = {
},
grid: {
left: 0,
right: 0
right: 1,
top: 2,
bottom: 0
},
animation: false,
color: chartColor,