fix: 修复detection问题
This commit is contained in:
chenjinsong
@@ -170,6 +170,15 @@ export const detectionPageType = {
|
||||
performanceEvent: 'performanceEvent'
|
||||
}
|
||||
|
||||
export const dnsServerRole = {
|
||||
RTDNS: 'RTDNS',
|
||||
TLDNS: 'TLDNS',
|
||||
OPRDNS: 'OPRDNS',
|
||||
ADNS: 'ADNS',
|
||||
SBDNS: 'SBDNS',
|
||||
RTDNSM: 'RTDNSM'
|
||||
}
|
||||
|
||||
export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
|
||||
'#73BFDE', '#3BA172', '#FC8452', '#9960B4',
|
||||
'#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC',
|
||||
|
||||
@@ -46,6 +46,7 @@
|
||||
import ChartHeader from './ChartHeader'
|
||||
import Chart from '@/views/charts/Chart'
|
||||
import testData from './charts/testData'
|
||||
import { dnsServerRole } from '@/utils/constants'
|
||||
import {
|
||||
isEcharts,
|
||||
isSingleValue,
|
||||
@@ -189,7 +190,11 @@ export default {
|
||||
...this.entity,
|
||||
...extraParams
|
||||
}
|
||||
// 默认参数特殊处理
|
||||
const requestUrl = url || (chartParams && chartParams.url)
|
||||
if (requestUrl && requestUrl.indexOf('dnsServerRole') > -1) {
|
||||
this.queryParams.dnsServerRole = dnsServerRole.RTDNS
|
||||
}
|
||||
if (requestUrl) {
|
||||
get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
|
||||
// if (this.chartInfo.type === 23 && testData) {
|
||||
@@ -197,6 +202,27 @@ export default {
|
||||
// } else if (this.chartInfo.type === 24 && testData) {
|
||||
// response = testData.data2
|
||||
// }
|
||||
if (this.chartInfo.type === 3) {
|
||||
response = {
|
||||
code: 200,
|
||||
data: {
|
||||
result: [
|
||||
{
|
||||
"dnsServerRole":"TLDNS",
|
||||
"ipLocationCountry":"China",
|
||||
"ipLocationId":"CN",
|
||||
"count":161
|
||||
},
|
||||
{
|
||||
"dnsServerRole":"RTDNS",
|
||||
"ipLocationCountry":"Japan",
|
||||
"ipLocationId":"JP",
|
||||
"count":222
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
if (response.code === 200) {
|
||||
if (Array.isArray(response.data.result)) {
|
||||
response.data.result.forEach(item => {
|
||||
|
||||
@@ -6,10 +6,9 @@
|
||||
<script>
|
||||
import * as am4Core from '@amcharts/amcharts4/core'
|
||||
import * as am4Maps from '@amcharts/amcharts4/maps'
|
||||
import { getGeoData, replaceUrlPlaceholder } from '@/utils/tools'
|
||||
import { storageKey } from '@/utils/constants'
|
||||
|
||||
import { isMapBlock } from './tools'
|
||||
import { getGeoData, replaceUrlPlaceholder, getCapitalGeo } from '@/utils/tools'
|
||||
import { storageKey, dnsServerRole } from '@/utils/constants'
|
||||
import { isMapBlock, isMapPoint } from './tools'
|
||||
import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
|
||||
import { HeatLegend } from '@/components/amcharts/heatLegend'
|
||||
import { getData } from '@/utils/api'
|
||||
@@ -72,6 +71,7 @@ export default {
|
||||
})
|
||||
},
|
||||
loadAm4ChartMap (polygonSeries, country, chartData) {
|
||||
// chartData不为空是下钻
|
||||
if (chartData) {
|
||||
this.$emit('showLoading', true)
|
||||
}
|
||||
@@ -111,8 +111,9 @@ export default {
|
||||
showValue: (r.value || r.value === 0) ? valueToRangeValue(r.value, chartParams.unitType).join(' ') : ''
|
||||
}))
|
||||
!this.$_.isEmpty(seriesData) && (polygonSeries.data = [...seriesData])
|
||||
// 数据全为0的情况，legend只显示1个颜色
|
||||
const sorted = seriesData.sort((a, b) => b.value - a.value)
|
||||
const allZero = this.$_.isEmpty(sorted) || Number(sorted[0].value) === 0 // 数据全为0的情况，legend只显示1个颜色
|
||||
const allZero = this.$_.isEmpty(sorted) || Number(sorted[0].value) === 0
|
||||
|
||||
polygonSeries.heatRules.push({
|
||||
property: 'fill',
|
||||
@@ -142,6 +143,56 @@ export default {
|
||||
heatLegend.valueAxis.renderer.labels.template.adapter.add('text', function (labelText) {
|
||||
return ''
|
||||
})
|
||||
} else if (data && this.isMapPoint) {
|
||||
const seriesData = []
|
||||
data.forEach(d => {
|
||||
seriesData.push({
|
||||
id: d.ipLocationId,
|
||||
count: d.count,
|
||||
dnsServerRole: d.dnsServerRole,
|
||||
location: d.ipLocationCity || d.ipLocationProvince || d.ipLocationCountry,
|
||||
desc: this.$t(this.dnsTypeI18n(d.dnsServerRole)),
|
||||
color: this.circleColor[d.dnsServerRole].background,
|
||||
border: this.circleColor[d.dnsServerRole].border
|
||||
})
|
||||
})
|
||||
console.info(seriesData)
|
||||
const imageSeries = this.myChart.series.push(new am4Maps.MapImageSeries())
|
||||
imageSeries.data = seriesData
|
||||
imageSeries.dataFields.value = 'count'
|
||||
|
||||
const imageTemplate = imageSeries.mapImages.template
|
||||
imageTemplate.nonScaling = true
|
||||
|
||||
imageTemplate.adapter.add('latitude', function (latitude, target) {
|
||||
const polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id)
|
||||
if (polygon) {
|
||||
return polygon.visualLatitude
|
||||
}
|
||||
return latitude
|
||||
})
|
||||
|
||||
imageTemplate.adapter.add('longitude', function (longitude, target) {
|
||||
const polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id)
|
||||
if (polygon) {
|
||||
return polygon.visualLongitude
|
||||
}
|
||||
return longitude
|
||||
})
|
||||
|
||||
const circle = imageTemplate.createChild(am4Core.Circle)
|
||||
circle.propertyFields.fill = 'color'
|
||||
circle.propertyFields.stroke = 'border'
|
||||
circle.strokeWidth = 1
|
||||
circle.tooltipText = '[bold]{location}[/]\n{desc}: {count}'
|
||||
|
||||
imageSeries.heatRules.push({
|
||||
target: circle,
|
||||
property: 'radius',
|
||||
min: 4,
|
||||
max: 30,
|
||||
dataField: 'value'
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
@@ -161,6 +212,37 @@ export default {
|
||||
this.myChart.goHome()
|
||||
})
|
||||
},
|
||||
dnsTypeI18n (role) {
|
||||
let i18n = ''
|
||||
switch (role) {
|
||||
case dnsServerRole.RTDNS: {
|
||||
i18n = 'dns.rootDomainServers'
|
||||
break
|
||||
}
|
||||
case dnsServerRole.TLDNS: {
|
||||
i18n = 'dns.topLevelDomainServers'
|
||||
break
|
||||
}
|
||||
case dnsServerRole.OPRDNS: {
|
||||
i18n = 'dns.publicRecursiveDomainServers'
|
||||
break
|
||||
}
|
||||
case dnsServerRole.ADNS: {
|
||||
i18n = 'dns.authoritativeDomainServers'
|
||||
break
|
||||
}
|
||||
case dnsServerRole.SBDNS: {
|
||||
i18n = 'dns.selfBuiltDomainServers'
|
||||
break
|
||||
}
|
||||
case dnsServerRole.RTDNSM: {
|
||||
i18n = 'RTDNSM'
|
||||
break
|
||||
}
|
||||
default: break
|
||||
}
|
||||
return i18n
|
||||
},
|
||||
generateTooltipHTML () {
|
||||
return `
|
||||
<div class="map-tooltip" style="padding-bottom: 10px;">
|
||||
@@ -206,8 +288,35 @@ export default {
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
const circleColor = {}
|
||||
circleColor[dnsServerRole.RTDNS] = {
|
||||
background: '#C0DEFE',
|
||||
border: '#478AD5'
|
||||
}
|
||||
circleColor[dnsServerRole.TLDNS] = {
|
||||
background: '#DBCFFA',
|
||||
border: '#AA8CF2'
|
||||
}
|
||||
circleColor[dnsServerRole.ADNS] = {
|
||||
background: '#A0E8E0',
|
||||
border: '#1CC9B5'
|
||||
}
|
||||
circleColor[dnsServerRole.OPRDNS] = {
|
||||
background: '#FFE1B5',
|
||||
border: '#FFB84E'
|
||||
}
|
||||
circleColor[dnsServerRole.SBDNS] = {
|
||||
background: '#FDC6C6',
|
||||
border: '#FA7777'
|
||||
}
|
||||
circleColor[dnsServerRole.RTDNSM] = {
|
||||
background: '#ECC6F7',
|
||||
border: '#BF49DF'
|
||||
}
|
||||
return {
|
||||
isMapBlock: isMapBlock(props.chartInfo.type)
|
||||
circleColor,
|
||||
isMapBlock: isMapBlock(props.chartInfo.type),
|
||||
isMapPoint: isMapPoint(props.chartInfo.type)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -63,6 +63,10 @@ export function isMapLine (type) {
|
||||
export function isMapBlock (type) {
|
||||
return type === 2
|
||||
}
|
||||
/* 散点地图 */
|
||||
export function isMapPoint (type) {
|
||||
return type === 3
|
||||
}
|
||||
/* 普通折线图 */
|
||||
export function isEchartsLine (type) {
|
||||
return type === 11
|
||||
|
||||
@@ -402,82 +402,6 @@ export default {
|
||||
]*/
|
||||
this.statisticsSeverityData = data
|
||||
//this.isStatisticsSeverityNoData = true
|
||||
this.filterData = {
|
||||
securityEvent: [
|
||||
{
|
||||
title: this.$t('detections.eventSeverity'),
|
||||
column: 'eventSeverity',
|
||||
collapse: false,
|
||||
value: [], // value之间是or的关系
|
||||
data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
|
||||
},
|
||||
{
|
||||
title: this.$t('detections.securityType'),
|
||||
column: 'securityType',
|
||||
collapse: false,
|
||||
value: [],
|
||||
data: [] // 从接口动态获取
|
||||
},
|
||||
{
|
||||
title: this.$t('detections.victimIp'),
|
||||
column: 'victimIp',
|
||||
collapse: false,
|
||||
value: [],
|
||||
showMore: true,
|
||||
showIndex: 9,
|
||||
data: [] // 从接口动态获取
|
||||
},
|
||||
{
|
||||
title: this.$t('detections.victimLocation'),
|
||||
column: 'victimLocationCountry',
|
||||
collapse: false,
|
||||
value: [],
|
||||
showMore: false,
|
||||
showIndex: 9,
|
||||
data: [
|
||||
{
|
||||
label: 'China',
|
||||
value: 'china',
|
||||
count: 50
|
||||
}
|
||||
] // 从接口动态获取
|
||||
},
|
||||
{
|
||||
title: this.$t('detections.offenderIp'),
|
||||
column: 'offenderIp',
|
||||
collapse: false,
|
||||
value: [],
|
||||
showMore: false,
|
||||
showIndex: 9,
|
||||
data: [] // 从接口动态获取
|
||||
},
|
||||
{
|
||||
title: this.$t('detections.offenderLocation'),
|
||||
column: 'offenderLocationCountry',
|
||||
collapse: false,
|
||||
value: [],
|
||||
showMore: false,
|
||||
showIndex: 9,
|
||||
data: [] // 从接口动态获取
|
||||
}
|
||||
],
|
||||
performanceEvent: [
|
||||
{
|
||||
title: this.$t('detections.eventSeverity'),
|
||||
column: 'eventSeverity',
|
||||
collapse: false,
|
||||
value: [], // value之间是or的关系
|
||||
data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
|
||||
},
|
||||
{
|
||||
title: this.$t('detections.securityType'),
|
||||
column: 'securityType',
|
||||
collapse: false,
|
||||
value: [],
|
||||
data: [] // 从接口动态获取
|
||||
}
|
||||
]
|
||||
}
|
||||
if (!this.$_.isEmpty(data)) {
|
||||
this.filterData[this.pageType][0].data = data.map(r => ({ label: r.eventSeverity, value: r.eventSeverity, count: r.count }))
|
||||
const eventSeverityOption = this.$_.cloneDeep(pieForSeverity)
|
||||
@@ -788,7 +712,9 @@ export default {
|
||||
const params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime),
|
||||
q: this.q
|
||||
q: this.q,
|
||||
pageSize: this.pageObj.pageSize,
|
||||
pageNo: this.pageObj.pageNo
|
||||
}
|
||||
getData(api.detection[this.pageType].listBasic, params).then(data => {
|
||||
if (this.pageType === detectionPageType.securityEvent) {
|
||||
@@ -1126,7 +1052,16 @@ export default {
|
||||
this.queryList()
|
||||
this.queryListTotal()
|
||||
},
|
||||
resetFilterData () {
|
||||
this.filterData.securityEvent.forEach(d => {
|
||||
d.data = []
|
||||
})
|
||||
this.filterData.performanceEvent.forEach(d => {
|
||||
d.data = []
|
||||
})
|
||||
},
|
||||
queryFilter () {
|
||||
this.resetFilterData()
|
||||
const params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime),
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<div class="overview__title">Fields</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('entities.category')}}</div>
|
||||
<div class="row__content">{{basicInfo.appCategory}}</div>
|
||||
<div class="row__content">{{basicInfo.appCategory || '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('entities.subcategory')}}</div>
|
||||
@@ -35,8 +35,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { get } from '@/utils/http'
|
||||
import { api } from '@/utils/api'
|
||||
import { api, getData } from '@/utils/api'
|
||||
import { eventSeverityColor } from '@/utils/constants'
|
||||
export default {
|
||||
name: 'DetectionPerformanceEventAppOverview',
|
||||
@@ -74,21 +73,17 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
query () {
|
||||
this.basicInfo = {
|
||||
}
|
||||
this.queryBasic().then(responses => {
|
||||
responses && (this.basicInfo = responses)
|
||||
})
|
||||
},
|
||||
queryBasic () {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
get(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.basicInfo = response.data.result[0]
|
||||
resolve(response.data.result)
|
||||
} else {
|
||||
reject(response)
|
||||
}
|
||||
getData(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(data => {
|
||||
resolve(data[0])
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
} catch (e) {
|
||||
reject(e)
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<div class="overview__title">Fields</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('entities.category')}}</div>
|
||||
<div class="row__content">{{basicInfo.domainCategoryName}}</div>
|
||||
<div class="row__content">{{basicInfo.domainCategoryName || '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('entities.group')}}</div>
|
||||
@@ -39,8 +39,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { get } from '@/utils/http'
|
||||
import { api } from '@/utils/api'
|
||||
import { api, getData } from '@/utils/api'
|
||||
import { eventSeverityColor } from '@/utils/constants'
|
||||
export default {
|
||||
name: 'DetectionPerformanceEventDomainOverview',
|
||||
@@ -78,21 +77,17 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
query () {
|
||||
this.basicInfo = {
|
||||
}
|
||||
this.queryBasic().then(responses => {
|
||||
responses && (this.basicInfo = responses)
|
||||
})
|
||||
},
|
||||
queryBasic () {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
get(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.basicInfo = response.data.result[0]
|
||||
resolve(response.data.result)
|
||||
} else {
|
||||
reject(response)
|
||||
}
|
||||
getData(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(data => {
|
||||
resolve(data[0])
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
} catch (e) {
|
||||
reject(e)
|
||||
|
||||
@@ -65,17 +65,15 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
query () {
|
||||
this.basicInfo = {
|
||||
}
|
||||
this.queryBasic().then(responses => {
|
||||
responses && (this.basicInfo = responses)
|
||||
})
|
||||
},
|
||||
queryBasic () {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
getData(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.serverIp }).then(data => {
|
||||
this.basicInfo = data[0]
|
||||
resolve(data)
|
||||
resolve(data[0])
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="overview__left">
|
||||
<div class="overview__title">{{$t('overall.remark')}}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__content">{{basicInfo.malwareDescription || '-'}}</div>
|
||||
<div class="row__content">Description</div>
|
||||
</div>
|
||||
<div class="overview__title">Fields</div>
|
||||
<div class="overview__row">
|
||||
@@ -178,11 +178,9 @@ export default {
|
||||
methods: {
|
||||
getMillisecond,
|
||||
query () {
|
||||
this.basicInfo = {
|
||||
}
|
||||
this.events = [
|
||||
]
|
||||
Promise.all([this.queryBasic(), this.queryEvent()]).then(responses => {
|
||||
responses[0] && (this.basicInfo = responses[0])
|
||||
responses[1] && (this.events = responses[1])
|
||||
})
|
||||
},
|
||||
queryBasic () {
|
||||
@@ -190,11 +188,7 @@ export default {
|
||||
try {
|
||||
get(api.detection.securityEvent.overviewBasic, { eventId: this.detection.eventId }).then(response => {
|
||||
if (response.code === 200) {
|
||||
let data = response.data.result[0]
|
||||
if (!this.$_.isEmpty(data)) {
|
||||
this.basicInfo = data
|
||||
}
|
||||
resolve(response.data.result)
|
||||
resolve(response.data.result[0])
|
||||
} else {
|
||||
reject(response)
|
||||
}
|
||||
@@ -207,12 +201,8 @@ export default {
|
||||
queryEvent () {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
get(api.detection.securityEvent.overviewEvent, { eventId: this.detection.eventId }).then(response => {
|
||||
get(api.detection.securityEvent.overviewEvent, { eventId: this.detection.eventId, offenderIp: this.detection.offenderIp, victimIp: this.detection.victimIp }).then(response => {
|
||||
if (response.code === 200) {
|
||||
let data = response.data.result
|
||||
if (!this.$_.isEmpty(data)) {
|
||||
this.events = response.data.result
|
||||
}
|
||||
resolve(response.data.result)
|
||||
} else {
|
||||
reject(response)
|
||||
|
||||
Reference in New Issue
Block a user