-
-
-
- {{ detection.eventName || '-' }}
- {{detection.offenderIp || '-'}}
-
- {{detection.domain}}
- -------
-
- {{detection.victimIp || '-'}}
-
-
-
{{detection.serverIp || detection.domain || detection.appName || 'Unknown'}}
+
+ {{ detection.eventName || '-' }}
+
+
+ {{item.key}}
+ ({{ item.type }})
+
+
-
-
- {{$t('detection.list.security')}} :
- {{changeI18nOfSeverity(detection.severity)}}
-
-
-
- {{$t('detections.severity')}} :
- {{detection.eventSeverity || '-'}}
-
-
+
-
{{$t('detections.eventType')}} :
{{detection.eventType || '-'}}
-
-
- {{$t('detection.list.malwareName')}} :
- {{ $_.get(detection, 'malware.malwareName', '-') || '-' }}
-
-
-
- {{$t('detection.nodeType')}} :
- {{ $_.get(detection, 'darkweb.nodeType', '-') || '-' }}
-
{{$t('detection.list.startTime')}} :
{{dateFormatByAppearance(detection.startTime) || '-'}}
+
+
+ {{$t('detection.list.endTime')}} :
+ {{dateFormatByAppearance(detection.endTime) || '-'}}
+
{{$t('overall.duration')}} :
- {{ detection.matchTimes || '-'}} {{ $t('detection.list.times') }} /
{{unitConvert(parseInt(detection.durationS), 'time', 's', null, 0).join(' ') || '-'}}
@@ -109,38 +80,41 @@
diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue
index 08ae9c31..8d6dcd4b 100644
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -4,10 +4,6 @@
{{$t('detections.active')}}
@@ -76,32 +52,27 @@
{{$t('overall.detections')}}
-
-
- {{$t('config.detections.configurePolicies')}}
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+ {{$t('detection.eventType')}}
+ {{ $t('npm.noData') }}
+
+
+
+
+
-
{{$t('detections.severity')}}
+ {{$t('detections.eventName')}}
{{ $t('npm.noData') }}
@@ -64,20 +81,9 @@
-
-
-
- {{$t('detections.eventType')}}
- {{ $t('npm.noData') }}
-
-
-
-
-
-
{{pageType === detectionPageType.securityEvent ? $t('detection.activeOffender') : $t('detections.activeEntity')}}
+ Key
{{ $t('npm.noData') }}
@@ -92,6 +98,8 @@
:pageObj="pageObj"
:time-filter="timeFilter"
:page-type="pageType"
+ :event-flag="eventFlag"
+ :q="q"
@pageSize="pageSize"
@pageNo="pageNo"
:loading="listLoading"
@@ -120,7 +128,7 @@ import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
import DetectionFilter from '@/views/detections/DetectionFilter'
import DetectionList from '@/views/detections/DetectionList'
import Pagination from '@/components/common/Pagination'
-import { defaultPageSize, detectionPageType } from '@/utils/constants'
+import { defaultPageSize, detectionPageType, detectionEventType } from '@/utils/constants'
import { getNowTime, getSecond, getMillisecond } from '@/utils/date-util'
import { ref, shallowRef } from 'vue'
import * as echarts from 'echarts'
@@ -136,7 +144,6 @@ import axios from 'axios'
import { urlParamsHandler, overwriteUrl, extensionEchartY, reverseSortBy, changeI18nOfSeverity } from '@/utils/tools'
import { useRoute } from 'vue-router'
import Loading from '@/components/common/Loading'
-import ChartTabs from '@/components/common/ChartTabs'
import { useStore } from 'vuex'
import { format } from 'echarts'
import Parser from '@/components/advancedSearch/meta/parser'
@@ -151,8 +158,7 @@ export default {
TimeRefresh,
DetectionFilter,
DetectionList,
- Pagination,
- ChartTabs
+ Pagination
},
data () {
return {
@@ -162,98 +168,57 @@ export default {
path: '/detection/securityEvent',
icon: 'cn-icon cn-icon-a-SecurityEvent'
}
- // {
- // i18n: 'entities.regulatoryRiskEvents',
- // path: '/detection/securityEvent',
- // icon: 'cn-icon cn-icon-a-RegulatoryRiskEvent',
- // disable: true
- // },
- // {
- // i18n: 'overall.performanceEvents',
- // path: '/detection/performanceEvent',
- // icon: 'cn-icon cn-icon-a-PerformanceEvent'
- // }
],
chartInit: [],
- // pageObj: {
- // pageNo: 1,
- // pageSize: defaultPageSize,
- // total: 0,
- // resetPageNo: true
- // },
q: '',
detectionPageType,
- filterData: {
- securityEvent: [
- {
- title: this.$t('overall.status'),
- column: 'status',
- topColumn: 'status',
- collapse: false,
- value: [], // value之间是or的关系
- showMore: false,
- data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
- },
- {
- title: this.$t('detections.severity'),
- column: 'severity',
- topColumn: 'severity',
- collapse: false,
- value: [], // value之间是or的关系
- showMore: false,
- data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
- },
- {
- title: this.$t('detections.eventType'),
- column: 'eventType',
- topColumn: 'event_type',
- collapse: false,
- value: [],
- showMore: true,
- showDisabled: true,
- showIndex: 5, // index作为showMore分割，从1开始而非0
- data: [] // 从接口动态获取
- },
- {
- title: this.$t('detections.victimIp'),
- column: 'victimIP',
- topColumn: 'victim_ip',
- collapse: false,
- value: [],
- showMore: true,
- showDisabled: true,
- showIndex: 5,
- data: [] // 从接口动态获取
- },
- {
- title: this.$t('detections.offenderIp'),
- column: 'offenderIP',
- topColumn: 'offender_ip',
- collapse: false,
- value: [],
- showMore: true,
- showDisabled: true,
- showIndex: 5,
- data: [] // 从接口动态获取
- }
- ],
- performanceEvent: [
- {
- title: this.$t('detections.eventSeverity'),
- column: 'eventSeverity',
- collapse: false,
- value: [], // value之间是or的关系
- data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
- },
- {
- title: this.$t('detections.eventType'),
- column: 'eventType',
- collapse: false,
- value: [],
- data: [] // 从接口动态获取
- }
- ]
- },
+ filterData: [
+ {
+ title: this.$t('detection.eventType'),
+ column: 'eventType',
+ topColumn: 'event_type',
+ collapse: false,
+ value: [],
+ showMore: true,
+ showDisabled: true,
+ show: true,
+ showIndex: 5, // index作为showMore分割，从1开始而非0
+ data: []
+ },
+ {
+ title: this.$t('detections.eventName'),
+ column: 'eventName',
+ topColumn: 'event_name',
+ collapse: false,
+ value: [],
+ showMore: false,
+ showDisabled: true,
+ show: true,
+ data: []
+ },
+ {
+ title: 'Key',
+ column: 'keyFields',
+ topColumn: 'key_fields,key_values',
+ collapse: false,
+ value: [],
+ showMore: true,
+ showDisabled: true,
+ showIndex: 5,
+ show: true,
+ data: [] // 从接口动态获取
+ },
+ {
+ title: this.$t('overall.status'),
+ column: 'status',
+ topColumn: 'status',
+ collapse: false,
+ value: [], // value之间是or的关系
+ showMore: false,
+ show: true,
+ data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
+ }
+ ],
listData: [],
listLoading: false,
severityPerOption: null,
@@ -273,12 +238,13 @@ export default {
loading: false,
oldActiveEntitySearchValue: '',
initFlag: true, // 初始化标识，初始化时保证mounted执行
- detectionChart: shallowRef(null)
+ detectionChart: shallowRef(null),
+ detectionEventType
}
},
methods: {
initStatusData (params) {
- axios.get(api.detection[this.pageType].statusStatistics, { params }).then(res => {
+ axios.get(api.detection.event.statusStatistics, { params }).then(res => {
if (res.status === 200) {
const data = res.data.data.result
if (data && data.length > 0) {
@@ -286,7 +252,7 @@ export default {
return Number(b.count) - Number(a.count)
})
}
- this.filterData[this.pageType][0].data = data.map(r => {
+ this.filterData[3].data = data.map(r => {
let label = ''
if (r.status === '0' || r.status === 0) {
label = this.$t('detections.active')
@@ -295,18 +261,18 @@ export default {
}
return { label, value: r.status, count: r.count }
})
- this.isCheckFilterByQ(params, 0)
+ this.isCheckFilterByQ(params, 3)
}
}).catch(e => {
console.error(e)
- this.filterData[this.pageType][0].data = []
+ this.filterData[3].data = []
this.$message.error(this.errorMsgHandler(e))
})
},
/** 初始化顶部大柱状图 */
- initEventSeverityTrendData (params) {
+ initTimeDistribution (params) {
this.loading = true
- axios.get(api.detection[this.pageType].timeDistribution, { params }).then(res => {
+ axios.get(api.detection.event.timeDistribution, { params }).then(res => {
const data = res.data.data.result
this.eventSeverityData = data
if (!this.$_.isEmpty(data)) {
@@ -394,8 +360,8 @@ export default {
})
},
/** 初始化左侧事件严重等级和第一个小饼图 */
- initEventSeverityData (params) {
- axios.get(api.detection[this.pageType].severityStatistics, { params }).then(res => {
+ initEventNameData (params) {
+ axios.get(api.detection.event.nameStatistics, { params }).then(res => {
const data = res.data.data.result
if (data && data.length > 0) {
data.sort((a, b) => {
@@ -404,11 +370,11 @@ export default {
}
this.statisticsSeverityData = data
if (!this.$_.isEmpty(data)) {
- this.filterData[this.pageType][1].data = data.map(r => ({ label: changeI18nOfSeverity(r.severity), value: r.severity, count: r.count }))
+ this.filterData[1].data = data.map(r => ({ label: changeI18nOfSeverity(r.eventName), value: r.eventName, count: r.count }))
this.isCheckFilterByQ(params, 1)
const eventSeverityOption = this.$_.cloneDeep(pieForSeverity)
eventSeverityOption.series[0].data = data.map(d => {
- return { value: d.count, name: changeI18nOfSeverity(d.severity), itemStyle: { color: getSeverityColor(d.severity) } }
+ return { value: d.count, name: changeI18nOfSeverity(d.eventName), itemStyle: { color: getSeverityColor(d.eventName) } }
})
const chartDom = document.getElementById(`eventSeverityPie${this.pageType}`)
let detectionChart = echarts.getInstanceByDom(chartDom)
@@ -421,88 +387,32 @@ export default {
const vm = this
detectionChart.off('click')
detectionChart.on('click', e => {
- if (this.pageType === 'performanceEvent') {
- vm.filterData.performanceEvent[0].value = vm.triggerFilterDataValue(vm.filterData.performanceEvent[0].value, e.data.name)
- } else if (this.pageType === 'securityEvent') {
- this.getFilter(e.data.name, vm.filterData.securityEvent[1].column)
- vm.filterData.securityEvent[1].value = vm.triggerFilterDataValue(vm.filterData.securityEvent[1].value, e.data.name)
- }
+ this.getFilter(e.data.name, vm.filterData[1].column)
+ vm.filterData[1].value = vm.triggerFilterDataValue(vm.filterData[1].value, e.data.name)
})
}
}).catch(e => {
console.error(e)
- this.filterData[this.pageType][1].data = []
- this.$message.error(this.errorMsgHandler(e))
- })
- },
- initEventTypeData (params) {
- axios.get(api.detection[this.pageType].eventType, { params }).then(res => {
- const data = res.data.data.result
- this.statisticsCategoryData = data
- if (!this.$_.isEmpty(data)) {
- this.filterData[this.pageType][2].data = data.map(r => ({
- label: r.eventType,
- value: r.eventType,
- count: r.count
- }))
- const { showMore, showIndex, showDisabled } = this.computeFilterPage(this.filterData[this.pageType][2].data)
- this.filterData[this.pageType][2].showMore = showMore
- this.filterData[this.pageType][2].showIndex = showIndex
- this.filterData[this.pageType][2].showDisabled = showDisabled
-
- const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
- let detectionChart = echarts.getInstanceByDom(chartDom)
- if (detectionChart) {
- echarts.dispose(detectionChart)
- }
- detectionChart = echarts.init(chartDom)
- this.chartInit.push(shallowRef(detectionChart))
- const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
- securityTypeOption.series[0].data = data.map(d => {
- return { value: d.count, name: d.eventType }
- })
- if (chartDom) {
- let oneColumnWidth = (chartDom.clientWidth * 0.56) - 30
- if (data.length > 6) {
- oneColumnWidth = (chartDom.clientWidth * 0.56) / 2 - 30
- }
- securityTypeOption.legend.formatter = function (name) {
- return format.truncateText(name, oneColumnWidth, '12px')
- }
- }
- detectionChart.setOption(securityTypeOption)
-
- const vm = this
- detectionChart.off('click')
- detectionChart.on('click', e => {
- vm.filterData.performanceEvent[1].value = vm.triggerFilterDataValue(vm.filterData.performanceEvent[1].value, e.data.name)
- })
- }
- }).catch(e => {
- console.error(e)
- this.filterData[this.pageType][2].data = []
- this.filterData[this.pageType][2].showMore = false
- this.filterData[this.pageType][2].showIndex = 5
- this.filterData[this.pageType][2].showDisabled = true
+ this.filterData[1].data = []
this.$message.error(this.errorMsgHandler(e))
})
},
/** 第二个饼图和左侧filter的eventType */
- initSecurityTypeData (params) {
- axios.get(api.detection[this.pageType].eventTypeStatistics, { params }).then(res => {
+ initEventTypeData (params) {
+ axios.get(api.detection.event.typeStatistics, { params }).then(res => {
const data = res.data.data.result
this.statisticsCategoryData = data
if (!this.$_.isEmpty(data)) {
- this.filterData[this.pageType][2].data = data.map(r => ({
+ this.filterData[0].data = data.map(r => ({
label: r.eventType,
value: r.eventType,
count: r.count
}))
- this.isCheckFilterByQ(params, 2)
- const { showMore, showIndex, showDisabled } = this.computeFilterPage(this.filterData[this.pageType][2].data)
- this.filterData[this.pageType][2].showMore = showMore
- this.filterData[this.pageType][2].showIndex = showIndex
- this.filterData[this.pageType][2].showDisabled = showDisabled
+ this.isCheckFilterByQ(params, 0)
+ const { showMore, showIndex, showDisabled } = this.computeFilterPage(this.filterData[0].data)
+ this.filterData[0].showMore = showMore
+ this.filterData[0].showIndex = showIndex
+ this.filterData[0].showDisabled = showDisabled
const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
this.detectionChart = echarts.getInstanceByDom(chartDom)
if (this.detectionChart) {
@@ -528,35 +438,35 @@ export default {
const vm = this
this.detectionChart.off('click')
this.detectionChart.on('click', e => {
- this.getFilter(e.data.name, vm.filterData.securityEvent[2].column)
- vm.filterData.securityEvent[2].value = vm.triggerFilterDataValue(vm.filterData.securityEvent[2].value, e.data.name)
+ this.getFilter(e.data.name, vm.filterData[0].column)
+ vm.filterData[0].value = vm.triggerFilterDataValue(vm.filterData[0].value, e.data.name)
})
}
}).catch(e => {
console.error(e)
- this.filterData[this.pageType][2].data = []
- this.filterData[this.pageType][2].showMore = false
- this.filterData[this.pageType][2].showIndex = 5
- this.filterData[this.pageType][2].showDisabled = true
+ this.filterData[0].data = []
+ this.filterData[0].showMore = false
+ this.filterData[0].showIndex = 5
+ this.filterData[0].showDisabled = true
this.$message.error(this.errorMsgHandler(e))
})
},
- /** 横向柱状图和左侧filter的offenderIp */
- initOffenderIpData (params) {
- axios.get(api.detection[this.pageType].offenderIpStatistics, { params }).then(res => {
+ /** 横向柱状图和左侧filter的key */
+ initKeyData (params) {
+ axios.get(api.detection.event.keyStatistics, { params }).then(res => {
let data = res.data.data.result
this.statisticsActiveAttackData = data
if (!this.$_.isEmpty(data)) {
- this.filterData[this.pageType][4].data = data.map(r => ({
- label: r.offenderIp,
- value: r.offenderIp,
+ this.filterData[2].data = data.map(r => ({
+ label: `${r.keyFields},${r.keyValues}`,
+ value: r.keyFields,
count: r.count
}))
- this.isCheckFilterByQ(params, 4)
- const { showMore, showIndex, showDisabled } = this.computeFilterPage(this.filterData[this.pageType][4].data)
- this.filterData[this.pageType][4].showMore = showMore
- this.filterData[this.pageType][4].showIndex = showIndex
- this.filterData[this.pageType][4].showDisabled = showDisabled
+ this.isCheckFilterByQ(params, 2)
+ const { showMore, showIndex, showDisabled } = this.computeFilterPage(this.filterData[2].data)
+ this.filterData[2].showMore = showMore
+ this.filterData[2].showIndex = showIndex
+ this.filterData[2].showDisabled = showDisabled
const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
let detectionChart = echarts.getInstanceByDom(chartDom)
@@ -569,7 +479,7 @@ export default {
data.sort(reverseSortBy('count'))
data = data.slice(0, 5)
offenderIpOption.series[0].data = data.map(d => {
- return [d.count, d.offenderIp]
+ return [d.count, d.keyFields]
}).reverse()
detectionChart.setOption(offenderIpOption)
@@ -577,104 +487,20 @@ export default {
detectionChart.off('click')
detectionChart.on('click', e => {
if (e.data) {
- vm.getFilter(e.data[1], vm.filterData.securityEvent[4].column)
- vm.filterData.securityEvent[4].value = vm.triggerFilterDataValue(vm.filterData.securityEvent[4].value, e.data[1])
+ vm.getFilter(e.data[1], vm.filterData[2].column)
+ vm.filterData[2].value = vm.triggerFilterDataValue(vm.filterData[2].value, e.data[1])
}
})
}
}).catch(e => {
console.error(e)
- this.filterData[this.pageType][4].data = []
- this.filterData[this.pageType][4].showMore = false
- this.filterData[this.pageType][4].showIndex = 5
- this.filterData[this.pageType][4].showDisabled = true
+ this.filterData[2].data = []
+ this.filterData[2].showMore = false
+ this.filterData[2].showIndex = 5
+ this.filterData[2].showDisabled = true
this.$message.error(this.errorMsgHandler(e))
})
},
-
- initVictimIpData (params) {
- axios.get(api.detection[this.pageType].victimIpStatistics, { params }).then(res => {
- const data = res.data.data.result
- this.filterData[this.pageType][3].data = data.map(r => ({ label: r.victimIp, value: r.victimIp, count: r.count }))
- this.isCheckFilterByQ(params, 3)
- const { showMore, showIndex, showDisabled } = this.computeFilterPage(this.filterData[this.pageType][3].data)
- this.filterData[this.pageType][3].showMore = showMore
- this.filterData[this.pageType][3].showIndex = showIndex
- this.filterData[this.pageType][3].showDisabled = showDisabled
- }).catch(e => {
- console.error(e)
- this.filterData[this.pageType][3].data = []
- this.filterData[this.pageType][3].showMore = false
- this.filterData[this.pageType][3].showIndex = 5
- this.filterData[this.pageType][3].showDisabled = true
- this.$message.error(this.errorMsgHandler(e))
- })
- },
- initActiveEntity (params) {
- axios.get(api.detection[this.pageType].activeEntity, { params }).then(res => {
- let data = res.data.data.result
- this.statisticsActiveAttackData = data
- if (!this.$_.isEmpty(data)) {
- const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
- let detectionChart = echarts.getInstanceByDom(chartDom)
- if (detectionChart) {
- echarts.dispose(detectionChart)
- }
- detectionChart = echarts.init(chartDom)
- this.chartInit.push(shallowRef(detectionChart))
- const option = this.$_.cloneDeep(activeAttackBar)
- data.sort(reverseSortBy('count'))
- data = data.slice(0, 5)
- option.series[0].data = data.map(d => {
- return [d.count, d.name, d.entityType]
- }).reverse()
- detectionChart.setOption(option)
- extensionEchartY(detectionChart)// y轴标签过长时，鼠标悬浮，显示所有内容
-
- const vm = this
- detectionChart.off('click')
- detectionChart.on('click', e => {
- const entityType = e.data[2]
- let column = ''
- if (entityType) {
- switch (entityType) {
- case 'app': {
- column = 'app_name'
- break
- }
- case 'domain': {
- column = 'domain'
- break
- }
- case 'ip': {
- column = 'server_ip'
- break
- }
- default: {
- break
- }
- }
- if (column) {
- // 点击的name和上次的name一致，则清空该项条件
- if (vm.oldActiveEntitySearchValue === e.data[1]) {
- vm.$refs.search.changeParams({ column: column, oldValue: [vm.oldActiveEntitySearchValue], newValue: [] })
- vm.$nextTick(() => {
- vm.oldActiveEntitySearchValue = ''
- })
- } else {
- vm.$refs.search.changeParams({ column: column, oldValue: vm.oldActiveEntitySearchValue ? [vm.oldActiveEntitySearchValue] : [], newValue: [e.data[1]] })
- vm.$nextTick(() => {
- vm.oldActiveEntitySearchValue = e.data[1]
- })
- }
- }
- }
- })
- }
- }).catch(error => {
- console.error(error)
- })
- },
triggerFilterDataValue (array, value) {
const r = [...array]
const index = array.indexOf(value)
@@ -698,16 +524,17 @@ export default {
endTime: getSecond(this.timeFilter.endTime),
resource: q,
pageSize: this.pageObj.pageSize,
- pageNo: this.pageObj.pageNo
+ pageNo: this.pageObj.pageNo,
+ isGroup: this.eventFlag === detectionEventType.single ? 0 : 1
}
- axios.get(api.detection[this.pageType].securityList, { params }).then(response => {
+ axios.get(api.detection.event.list, { params }).then(response => {
if (response.status === 200) {
const data = response.data.data.result
if (data.length > 0) {
- data.forEach(item => {
- item.eventInfoObj = JSON.parse(item.eventInfo)
- item.startTime = parseFloat(item.startTime)
- })
+ // data.forEach(item => {
+ // item.eventInfoObj = JSON.parse(item.eventInfo)
+ // item.startTime = parseFloat(item.startTime)
+ // })
this.listData = data
} else {
this.listData = []
@@ -718,7 +545,9 @@ export default {
this.$message.error(response.data.message)
}
})
- axios.get(api.detection[this.pageType].securityCount, { params }).then(res => {
+ delete params.pageSize
+ delete params.pageNo
+ axios.get(api.detection.event.count, { params }).then(res => {
this.pageObj.total = parseInt(this.$_.get(res, 'data.data.result', 0))
}).catch(error => {
console.error(error)
@@ -800,10 +629,7 @@ export default {
this.queryList(this.q)
},
resetFilterData () {
- this.filterData.securityEvent.forEach(d => {
- d.data = []
- })
- this.filterData.performanceEvent.forEach(d => {
+ this.filterData.forEach(d => {
d.data = []
})
},
@@ -814,16 +640,12 @@ export default {
endTime: getSecond(this.timeFilter.endTime),
resource: q
}
- this.initStatusData(params)
- this.initEventSeverityTrendData(params)
- this.initEventSeverityData(params)
- if (this.pageType === detectionPageType.securityEvent) {
- this.initOffenderIpData(params)
- this.initVictimIpData(params)
- this.initSecurityTypeData(params)
- } else if (this.pageType === detectionPageType.performanceEvent) {
- this.initActiveEntity(params)
- this.initEventTypeData(params)
+ this.initTimeDistribution(params) // 顶部柱状图
+ this.initEventTypeData(params) // 左侧filter的eventType，右侧的第一个饼图
+ this.initEventNameData(params) // 左侧filter的eventName，右侧的第二个饼图
+ this.initKeyData(params) // 左侧filter的key，右侧的横向柱状图
+ if (this.eventFlag === detectionEventType.single) {
+ this.initStatusData(params) // 左侧filter的status，在聚合事件下不显示
}
},
pageSize (val) {
@@ -891,20 +713,20 @@ export default {
if (params.resource) {
let obj
if (index === 0) {
- obj = this.filterData[this.pageType][index].data.find(d => params.resource.indexOf(d.value) > -1 && params.resource.indexOf('status') > -1)
+ obj = this.filterData[index].data.find(d => params.resource.indexOf(d.value) > -1 && params.resource.indexOf('status') > -1)
} else {
- obj = this.filterData[this.pageType][index].data.find(d => params.resource.indexOf(d.value) > -1)
+ obj = this.filterData[index].data.find(d => params.resource.indexOf(d.value) > -1)
}
if (obj) {
- this.filterData[this.pageType][index].value = [obj.value]
- this.filterData[this.pageType][index].flag = true
+ this.filterData[index].value = [obj.value]
+ this.filterData[index].flag = true
} else {
- this.filterData[this.pageType][index].value = []
- this.filterData[this.pageType][index].flag = true
+ this.filterData[index].value = []
+ this.filterData[index].flag = true
}
} else {
- this.filterData[this.pageType][index].value = []
- this.filterData[this.pageType][index].flag = true
+ this.filterData[index].value = []
+ this.filterData[index].flag = true
}
},
getFilter (name, topColumn) {
@@ -915,6 +737,17 @@ export default {
value: name
}
this.$refs.search.changeParams([params])
+ } else if (topColumn === 'keyFields') {
+ const nameList = name.split(',')
+ const columnList = this.filterData[2].topColumn.split(',')
+ nameList.forEach((item, index) => {
+ const params = {
+ column: columnList[index],
+ operator: '=',
+ value: item
+ }
+ this.$refs.search.changeParams([params])
+ })
} else {
const params = {
column: topColumn,
@@ -926,6 +759,17 @@ export default {
this.$nextTick(() => {
this.emitter.emit('advanced-search')
})
+ },
+ clickEventFlag (e) {
+ this.eventFlag = e
+ const { query } = this.$route
+ const newUrl = urlParamsHandler(window.location.href, query, {
+ eventFlag: e
+ })
+ overwriteUrl(newUrl)
+ this.filterData[3].show = e === detectionEventType.single
+ this.queryFilter(this.q)
+ this.queryList(this.q)
}
},
mounted () {
@@ -945,6 +789,7 @@ export default {
}
const parser = new Parser(schemaDetectionSecurity)
q = parser.conversionEnum(q)
+ this.q = q
this.queryFilter(q)
if (this.initFlag) {
this.timer = setTimeout(() => {
@@ -1039,6 +884,7 @@ export default {
overwriteUrl(newUrl)
}
const pageType = path.replace('/detection/', '')
+ const eventFlag = ref(query.eventFlag || detectionEventType.single)
// 获取url携带的range、startTime、endTime
const rangeParam = query.range
const startTimeParam = query.startTime
@@ -1049,12 +895,15 @@ export default {
if (!startTimeParam || !endTimeParam) {
const { startTime, endTime } = getNowTime(dateRangeValue)
timeFilter.value.startTime = getSecond(startTime)
+ // todo 目前有数据的时间，开发时切换过来
+ // timeFilter.value.startTime = 1722928331
timeFilter.value.endTime = getSecond(endTime)
// 如果没有时间参数，就将参数写入url
const newUrl = urlParamsHandler(window.location.href, useRoute().query, { startTime: timeFilter.value.startTime, endTime: timeFilter.value.endTime, range: dateRangeValue })
overwriteUrl(newUrl)
} else {
- timeFilter.value.startTime = parseInt(startTimeParam)
+ // timeFilter.value.startTime = parseInt(startTimeParam)
+ timeFilter.value.startTime = 1722928331
timeFilter.value.endTime = parseInt(endTimeParam)
}
const pageObj = ref({
@@ -1067,7 +916,8 @@ export default {
return {
timeFilter,
pageType,
- pageObj
+ pageObj,
+ eventFlag
}
}
}
diff --git a/src/views/detections/options/detectionOptions.js b/src/views/detections/options/detectionOptions.js
index ef4bcd72..84e6a8d9 100644
--- a/src/views/detections/options/detectionOptions.js
+++ b/src/views/detections/options/detectionOptions.js
@@ -383,3 +383,36 @@ export const metricOption = {
}
]
}
+export const lineOption = {
+ xAxis: {
+ type: 'time',
+ data: [],
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ axisLabel: {
+ formatter: xAxisTimeFormatter,
+ rich: xAxisTimeRich
+ }
+ },
+ yAxis: {
+ max: 100
+ },
+ grid: {
+ top: '12px',
+ left: '30px',
+ bottom: '30px',
+ right: '20px'
+ },
+ series: [
+ {
+ data: [],
+ type: 'line',
+ color: '#ff9a79',
+ symbol: 'none'
+ }
+ ]
+}
diff --git a/src/views/detections/overview/EventsTimeline.vue b/src/views/detections/overview/EventsTimeline.vue
new file mode 100644
index 00000000..e50ae955
--- /dev/null
+++ b/src/views/detections/overview/EventsTimeline.vue
@@ -0,0 +1,304 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/detections/overview/IndicatorMatchOverview.vue b/src/views/detections/overview/IndicatorMatchOverview.vue
new file mode 100644
index 00000000..c0be25db
--- /dev/null
+++ b/src/views/detections/overview/IndicatorMatchOverview.vue
@@ -0,0 +1,97 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.time }}
+
+
+
+
+
diff --git a/src/views/detections/overview/SequenceOverview.vue b/src/views/detections/overview/SequenceOverview.vue
new file mode 100644
index 00000000..d28ff78b
--- /dev/null
+++ b/src/views/detections/overview/SequenceOverview.vue
@@ -0,0 +1,79 @@
+
+
+
+
+ {{ $t('overall.remark') }}
+
+
+
+
+ ${key} experienced exceptions exceeding the threshold number of times.
+
+ {{ $t('overall.fields') }}
+
+
+ {{ $t('detection.list.startTime') }}
+
+
+ {{ detection.startTime ? dateFormatByAppearance(detection.startTime) : '-' }}
+
+
+
+ {{ $t('detection.detail.matchTime') }}
+
+
+ {{ detection.startTime ? dateFormatByAppearance(detection.startTime) : '-' }}
+
+
+
+ {{ $t('overall.clientIp') }}
+
+ 192.168.12.34
+
+
+ {{ $t('npm.clientLocation') }}
+
+
+
+
+
+
+ ![]()
+
+ China, beijing
+
+
+ {{ $t('overall.serverIp') }}
+
+ 192.168.12.34
+
+
+ {{ $t('detection.detail.serverLocation') }}
+
+
+
+
+
+
+ ![]()
+
+ China, beijing
+
+
+ {{ $t('detection.detail.indicatorValues') }}
+ Tor
+
+
+ {{ $t('overall.domain') }}
+ baidu.com
+
+
+ {{ $t('overall.app') }}
+ Wechat
+
+
+
+
+
diff --git a/src/views/detections/overview/ThresholdOverview.vue b/src/views/detections/overview/ThresholdOverview.vue
new file mode 100644
index 00000000..276d8c66
--- /dev/null
+++ b/src/views/detections/overview/ThresholdOverview.vue
@@ -0,0 +1,73 @@
+
+
+
+ {{ $t('overall.remark') }}
+
+
+
+
+ ${key} experienced exceptions exceeding the threshold number of times.
+
+ {{ $t('detection.detail.stage') }}1
+
+
+ Dns_query
+ {{ $_.get(myDetection, 'eventInfoList[0].domain', '-') || '-' }}
+
+
+ Time
+
+
+ {{ myDetection.startTime ? dateFormatByAppearance(myDetection.startTime) : '-' }}
+
+ {{ $t('detection.detail.stage') }}2
+
+
+
+ Decoded_as
+ {{ $_.get(myDetection, 'eventInfoList[1].client_ip', '-') || '-' }}
+
+
+
+ APP
+ {{ $_.get(myDetection, 'eventInfoList[1].app_transition', '-') || '-' }}
+
+
+
+ Time
+
+
+ {{ myDetection.startTime ? dateFormatByAppearance(myDetection.startTime) : '-' }}
+
+
+
+ {{ $t('detection.timeOfOccurrences') }}
+
+
+
+
+
+
+
+
+
diff --git a/src/views/detections/overview/detectionDetailMixin.js b/src/views/detections/overview/detectionDetailMixin.js
new file mode 100644
index 00000000..f9baf266
--- /dev/null
+++ b/src/views/detections/overview/detectionDetailMixin.js
@@ -0,0 +1,107 @@
+import { detectionEventType, detectionRuleType } from '@/utils/constants'
+import { getMillisecond, getSecond } from '@/utils/date-util'
+import axios from 'axios'
+import { api } from '@/utils/api'
+import { lineOption } from '@/views/detections/options/detectionOptions'
+import { markRaw } from 'vue'
+import * as echarts from 'echarts'
+
+export default {
+ props: {
+ detection: Object,
+ timeFilter: Object,
+ pageObj: Object,
+ eventFlag: String,
+ q: String
+ },
+ data () {
+ return {
+ detectionEventType,
+ myDetection: {},
+ timeData: [],
+ isGroup: 0,
+ myChart: null,
+ lineOption: lineOption
+ }
+ },
+ mounted () {
+ this.initData()
+ },
+ methods: {
+ initData () {
+ this.myDetection = this.detection
+ if (this.eventFlag === detectionEventType.aggregation) {
+ this.isGroup = 1
+ const timeParams = {
+ startTime: getSecond(this.timeFilter.startTime),
+ endTime: getSecond(this.timeFilter.endTime),
+ resource: this.q,
+ keyFields: `'${this.detection.keyFields}'`,
+ keyValues: `'${this.detection.keyValues}'`,
+ ruleId: this.detection.ruleId,
+ ruleVersion: `'${this.detection.ruleVersion}'`
+ }
+ axios.get(api.detection.event.detailTimeDistribution, { params: timeParams }).then(res => {
+ if (res.status === 200) {
+ this.timeData = res.data.data.result
+ }
+ }).catch(e => {
+ //
+ })
+ } else {
+ this.isGroup = 0
+ }
+
+ if (this.myChart) {
+ this.myChart.dispose()
+ }
+ const params = {
+ startTime: this.timeFilter.startTime,
+ endTime: this.timeFilter.endTime,
+ eventId: this.detection.eventId,
+ ruleType: this.detection.ruleType,
+ resource: this.q,
+ isGroup: this.isGroup
+ }
+ axios.get(api.detection.event.detail, { params }).then(res => {
+ if (res.status === 200) {
+ // 类型为Threshold时处理折线图
+ if (this.detection.ruleType === detectionRuleType.threshold.key) {
+ const seriesData = []
+ res.data.data.result.forEach(item => {
+ seriesData.push([getMillisecond(JSON.parse(item.statTime)), item.recordsNums])
+ })
+ this.lineOption.series[0].data = seriesData
+ this.myChart = markRaw(echarts.init(document.getElementById('myChart' + this.detection.eventId)))
+ this.myChart.setOption(this.lineOption)
+ } else {
+ const detailData = res.data.data.result.pop()
+ if (detailData.eventInfo) {
+ detailData.eventInfoList = JSON.parse(detailData.eventInfo)
+ }
+ this.myDetection = detailData
+ }
+ }
+ })
+ },
+ changeTimeline (e) {
+ const params = {
+ startTime: this.timeFilter.startTime,
+ endTime: this.timeFilter.endTime,
+ eventId: e,
+ ruleType: this.detection.ruleType,
+ resource: this.q,
+ isGroup: this.isGroup
+ }
+ axios.get(api.detection.event.detail, { params }).then(res => {
+ if (res.status === 200) {
+ const detailData = res.data.data.result[0]
+ if (detailData.eventInfo) {
+ detailData.eventInfoList = JSON.parse(detailData.eventInfo)
+ }
+ this.myDetection = detailData
+ }
+ })
+ }
+ }
+}
+
+ {{ $t('overall.remark') }}
+
+
+
+ ${key} experienced exceptions exceeding the threshold number of times.
+
+ {{ $t('overall.summary') }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('detection.timeOfOccurrences') }}
+
+
+
+
+