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

CN-265 Traffic Summary APP分析统计图表、domain图表问题修复

Browse Source
This commit is contained in:
hanyuxia
2022-01-07 16:26:49 +08:00
parent 7562d1a234
commit 4c0b018c34
6 changed files with 20 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/charts/PieTable.vue
View File

@@ -37,7 +37,7 @@
:prop="item.prop"
#default="{row}">
<span v-if="item.prop === 'nameColumn'">
{{ nameColumn === 'fqdnCategoryName' ? row['fqdnCategoryName'] :(nameColumn === 'fqdnReputationLevel'? row['fqdnReputationLevel']:(nameColumn==='appCategory'?row['appCategory']:row['appRisk']))}}
{{ nameColumn === 'domainCategoryName' ? row['categoryName'] :(nameColumn === 'domainReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategoryName']:row['appRiskLevel']))}}
</span>
<span v-else-if="item.prop === 'tableNameColumn'">
{{ tableNameColumn === 'appName' ? row['appName'] : row['domain']}}
@@ -65,7 +65,7 @@
:prop="item.prop"
#default="{row}">
<span v-if="item.prop === 'nameColumn'">
{{ nameColumn === 'fqdnCategoryName' ? row['categoryName'] :(nameColumn === 'fqdnReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategory']:row['appRisk']))}}
{{ nameColumn === 'domainCategoryName' ? row['categoryName'] :(nameColumn === 'domainReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategoryName']:row['appRiskLevel']))}}
</span>
<span v-else-if="item.prop === 'tableNameColumn'">
{{ tableNameColumn === 'appName' ? row['appName'] : row['domain']}}
@@ -221,9 +221,6 @@ export default {
}
setTimeout(() => {
get(replaceUrlPlaceholder(url, queryParams)).then(response2 => {
// app：测试数据生成，如接口可正常返回数据后，删除即可
response2 = this.initTestDataForAppSecondTable(url, row)
if (response2.code === 200) {
this.childrenTableData = response2.data.result
}
@@ -232,37 +229,7 @@ export default {
})
}, 500)
},
initTestDataForAppSecondTable (url, row) {
let rlt = ''
if (url.indexOf('app') > -1) {
rlt = {
code: 200,
msg: '',
data: {
resultType: 'table',
result: [{
sessions: '0',
packets: '134',
bytes: '33202',
appCategory: row.appCategory,
serverIp: '51.104.167.186',
appRisk: row.appRisk
}, {
sessions: '0',
packets: '134',
bytes: '33202',
appCategory: row.appCategory,
serverIp: '23.164.67.16',
appRisk: row.appRisk
}
]
},
success: true
}
}
return rlt
},
getRowKey (row) {
if (this.tableNameColumn === 'appName') {
return row.appName

234
src/views/charts/Chart.vue
View File

@@ -962,9 +962,6 @@ export default {
this.isError = true
this.noData = true
this.errorInfo = response.msg || response.message || 'Unknown'
// 测试数据
this.initTestEventListData()
}
}).catch(e => {
this.isError = true
@@ -992,34 +989,6 @@ export default {
}
},
initTestEventListData () {
this.noData = false
for (let i = 0; i < this.croptyEventList.length; i++) {
this.croptyEventList.splice(i, 1)
}
this.croptyEventList = [{
time: '2021-11-23 12:00:00',
serverIP: '192.168.1.1',
clientIP: '101.1.1.1',
message: '检测到连接挖矿木马远控地址',
level: 1
}, {
time: '2021-11-23 12:10:00',
serverIP: '192.168.1.1',
clientIP: '101.1.1.1',
message: '检测到连接挖矿木马远控地址',
level: 1
}, {
time: '2021-11-23 12:10:00',
serverIP: '192.168.1.1',
clientIP: '101.1.1.1',
message: '检测到连接挖矿木马远控地址',
level: 1
}
]
},
reloadChart () {
this.initChart()
this.$nextTick(() => {
@@ -1951,9 +1920,6 @@ export default {
this.isError = true
this.noData = true
this.errorInfo = response.msg || response.message || 'Unknown'
// 产生测试数据
this.initTestTimeBarData(chartParams)
}
this.myChart.setOption(this.chartOption)
}).finally(() => {
@@ -1966,23 +1932,6 @@ export default {
})
},
initTestTimeBarData (chartParams) {
this.noData = false
const data = [[1612113120000, '9'], [1612113220000, '2'], [1612113320000, '3'], [1612113420000, '4'], [1612113520000, '1'], [1612113620000, '5'], [1612113720000, '7'], [1612113820000, '9']]
let dataArray = []
if (chartParams.direction == 'vertical') { // 柱状图竖直方向
dataArray = data.map((r, i) => {
return [r[0], Number(r[1]), chartParams.unitType]
})
} else if (chartParams.direction == 'horizontal') { // 柱状图水平方向
dataArray = data.map((r, i) => {
return [Number(r[1]), r[0], chartParams.unitType]
})
}
this.handleTimeChartOption(chartParams, dataArray)
},
initEchartsCategoryBar (chartParams) {
const queryParams = { ...this.queryTimeRange, ...this.entity }
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
@@ -2005,9 +1954,6 @@ export default {
this.isError = true
this.noData = true
this.errorInfo = response.msg || response.message || 'Unknown'
// 产生测试数据
this.initTestCategoryBarData(chartParams)
}
this.myChart.setOption(this.chartOption)
}).finally(() => {
@@ -2067,97 +2013,6 @@ export default {
}
},
initTestCategoryBarData (chartParams) {
this.noData = false
let xType = 'category'
let yType = 'value'
let direction = 'vertical'
if (chartParams.direction) {
direction = chartParams.direction
if (direction == 'horizontal') { // 柱状图水平方向
xType = 'value'
yType = 'category'
} else if (direction == 'vertical') { // 柱状图竖直方向
xType = 'category'
yType = 'value'
}
}
let itemColorAlternately = false// true|false 柱体色是否轮替
if (chartParams.itemColorAlternately) {
itemColorAlternately = chartParams.itemColorAlternately
}
let dataArray = []
if (direction == 'horizontal') { // 柱状图水平方向
dataArray = [
[240, '中国出版集团公司'],
[200, '中国铁路总公司'],
[175, '中国烟草总公司'],
[140, '中国邮政集团公司'],
[99, '中国石油天然气集团公司']
]
} else if (direction == 'vertical') { // 柱状图竖直方向
dataArray = [
['中国出版集团公司', 240],
['中国铁路总公司', 200],
['中国烟草总公司', 175],
['中国邮政集团公司', 140],
['中国石油天然气集团公司', 99]
]
}
this.chartOption = {
tooltip: {
appendToBody: true,
trigger: 'axis',
textStyle: {
width: '20px',
overflow: 'truncate'
},
formatter: (direction == 'horizontal') ? categoryHorizontalFormatter : categoryVerticalFormatter,
show: true,
className: 'nz-chart-tooltip',
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
},
xAxis: {
type: xType,
axisTick: { show: false },
axisLine: { show: false }
},
yAxis: {
type: yType,
axisTick: { show: false },
axisLine: { show: false }
},
grid: {
top: 20,
left: 10,
right: 25,
bottom: 20,
containLabel: true
},
color: chartBarColor,
series: [{
barWidth: 15,
data: dataArray,
type: 'bar',
label: { show: false },
barCategoryGap: '10%',
itemStyle: {
color: function (params) {
if (itemColorAlternately) {
return getCharBartColor([params.dataIndex])
} else {
return getCharBartColor(0)
}
}
}
}]
}
},
initEchartsWithStatistics (chartParams) {
const queryParams = { ...this.queryTimeRange, ...this.entity }
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
@@ -2210,82 +2065,6 @@ export default {
})
},
initTestDataForApp (chartParams) {
let rlt = ''
if (chartParams.url.indexOf('App') > -1) {
rlt = {
code: 200,
msg: '',
data: {
resultType: 'table',
result: [{
appCategory: 'aaa',
uniqApps: 'bbb',
bytes: '1337678073',
packets: '1687757',
sessions: '28307',
appRisk: 'low'
}, {
appCategory: 'www',
uniqApps: 'uuu',
bytes: '1337678073',
packets: '1687757',
sessions: '28307',
appRisk: 'middle'
}, {
appCategory: 'xxx',
uniqApps: 'zzz',
bytes: '1337678073',
packets: '1687757',
sessions: '28307',
appRisk: 'high'
}
]
},
success: true
}
}
return rlt
},
initTestDataForAppTable (chartParams) {
let rlt = ''
if (chartParams.urlTable.indexOf('app') > -1) {
rlt = {
code: 200,
msg: '',
data: {
resultType: 'table',
result: [{
sessions: '0',
packets: '134',
bytes: '33202',
appName: 'aacccc',
appCategory: 'aaa',
appRisk: 'low'
}, {
sessions: '0',
packets: '134',
bytes: '33202',
appName: 'wwcccc',
appCategory: 'www',
appRisk: 'middle'
}, {
sessions: '0',
packets: '134',
bytes: '33202',
appName: 'xxcccc',
appCategory: 'xxx',
appRisk: 'high'
}
]
},
success: true
}
}
return rlt
},
initEchartsWithPieTable (chartParams) {
const self = this
chartParams.valueColumn = this.orderPieTable
@@ -2294,9 +2073,6 @@ export default {
const tableQueryParams = { ...this.queryTimeRange, limit: 10, order: this.orderPieTable, ...this.entity } // 统计数据的查询参数
tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方)
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
// app：测试数据生成，如接口可正常返回数据后，删除即可
response = this.initTestDataForApp(chartParams)
if (response.code === 200) {
if (this.$_.isEmpty(response.data.result)) {
this.noData = true
@@ -2313,8 +2089,11 @@ export default {
interval: 1
}
}
const data = response.data.result.map(d => {
tableQueryParams[chartParams.nameColumn].push(d[chartParams.nameColumn])
if (d[chartParams.nameColumn]) {
this.allSelectPieChartName.push(d[chartParams.nameColumn])
}
return {
data: d,
name: d[chartParams.nameColumn],
@@ -2322,17 +2101,16 @@ export default {
unitType: unitType
}
})
this.allSelectPieChartName = tableQueryParams[chartParams.nameColumn]
this.chartOption.series[0].data = data
if (this.chartOption.series[0].data && this.chartOption.series[0].data.length > 10) { // pieWithTable 图例超过10个改为滚动显示
this.chartOption.legend.type = 'scroll'
}
this.myChart.setOption(this.chartOption)
if (!this.$_.isEmpty(data)) {
get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response2 => {
// app：测试数据生成，如接口可正常返回数据后，删除即可
response2 = this.initTestDataForAppTable(chartParams)
if (response2.code === 200) {
this.pieTableData = response2.data.result
} else {

2
src/views/entityExplorer/entityList/detailOverview/App.vue
View File

@@ -119,7 +119,7 @@ import entityDetailMixin from './entityDetailMixin'
import { unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import Chart from '@/views/charts/Chart'
import _ from "lodash";
import _ from 'lodash'
export default {
name: 'App',

2
src/views/entityExplorer/entityList/detailOverview/Domain.vue
View File

@@ -220,7 +220,7 @@ import entityDetailMixin from './entityDetailMixin'
import { unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import Chart from '@/views/charts/Chart'
import _ from "lodash";
import _ from 'lodash'
export default {
name: 'Domain',
components: {

2
src/views/entityExplorer/entityList/detailOverview/Ip.vue
View File

@@ -111,7 +111,7 @@ import { api } from '@/utils/api'
import { unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import Chart from '@/views/charts/Chart'
import _ from "lodash";
import _ from 'lodash'
export default {
name: 'Ip',

18
src/views/entityExplorer/entityList/entityListMixin.js
View File

@@ -81,24 +81,24 @@ export default {
switch (this.entityData.entityType) {
case ('ip'): {
params = {
startTime: this.timeFilter.startTime?parseInt(this.timeFilter.startTime / 1000): Math.floor(now / 1000 - 3600),
endTime: this.timeFilter.endTime?parseInt(this.timeFilter.endTime / 1000):Math.floor(now / 1000),
startTime: this.timeFilter.startTime ? parseInt(this.timeFilter.startTime / 1000) : Math.floor(now / 1000 - 3600),
endTime: this.timeFilter.endTime ? parseInt(this.timeFilter.endTime / 1000) : Math.floor(now / 1000),
ip: this.entityData.ipAddr
}
break
}
case ('domain'): {
params = {
startTime: this.timeFilter.startTime?parseInt(this.timeFilter.startTime / 1000): Math.floor(now / 1000 - 3600),
endTime: this.timeFilter.endTime?parseInt(this.timeFilter.endTime / 1000):Math.floor(now / 1000),
startTime: this.timeFilter.startTime ? parseInt(this.timeFilter.startTime / 1000) : Math.floor(now / 1000 - 3600),
endTime: this.timeFilter.endTime ? parseInt(this.timeFilter.endTime / 1000) : Math.floor(now / 1000),
domain: this.entityData.domainName
}
break
}
case ('app'): {
params = {
startTime: this.timeFilter.startTime?parseInt(this.timeFilter.startTime / 1000): Math.floor(now / 1000 - 3600),
endTime: this.timeFilter.endTime?parseInt(this.timeFilter.endTime / 1000):Math.floor(now / 1000),
startTime: this.timeFilter.startTime ? parseInt(this.timeFilter.startTime / 1000) : Math.floor(now / 1000 - 3600),
endTime: this.timeFilter.endTime ? parseInt(this.timeFilter.endTime / 1000) : Math.floor(now / 1000),
appName: this.entityData.appName
}
break
@@ -177,7 +177,7 @@ export default {
return {
...seriesTemplate,
name: this.$t('entities.sentThroughput'), // 'bytes_sent_rate',//legendMapping[`ip_${r.legend}`],
data: r.values.map(v => [Number(v[0])* 1000, Number(v[1]), unitTypes.byte]),
data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
itemStyle: {
normal: {
color: '#69b072',
@@ -205,7 +205,7 @@ export default {
return {
...seriesTemplate,
name: this.$t('entities.receivedThroughput'), // legendMapping[`ip_${r.legend}`],
data: r.values.map(v => [Number(v[0])* 1000, Number(v[1]), unitTypes.byte]),
data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
itemStyle: {
normal: {
color: '#7899c6',
@@ -239,7 +239,7 @@ export default {
}
}).finally(() => {
this.$nextTick(() => {
if(chartOption){
if (chartOption) {
const myChart = echarts.init(document.getElementById(`entityListChart${this.entityName}`))
myChart.setOption(chartOption)
}