CN-383 feat : Detection界面补充事件描述信息 初步完成
This commit is contained in:
zhangxiaolong
@@ -1,132 +1,226 @@
|
||||
<template>
|
||||
<div class="detection-detail-overview">
|
||||
<div class="overview__left">
|
||||
<div class="overview__title">{{$t('overall.remark')}}</div>
|
||||
<div class="overview__title">{{ $t('overall.remark') }}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__content">Description</div>
|
||||
<div class="row__content">
|
||||
<template v-if="detection.securityType === 'command and control'">
|
||||
<span
|
||||
class="row__content--link"
|
||||
@click="goDetail('ip', detection.victimIp)"
|
||||
>{{ detection.victimIp }}</span
|
||||
>
|
||||
<span>
|
||||
attempted to access a command&control server (C&C) indicated by
|
||||
</span>
|
||||
<span class="row__content--link">{{
|
||||
detection.iocValue
|
||||
}}</span></template
|
||||
>
|
||||
<template v-else>
|
||||
<span
|
||||
class="row__content--link"
|
||||
@click="goDetail('ip', detection.victimIp)"
|
||||
>{{ detection.victimIp }}</span
|
||||
>
|
||||
<span>
|
||||
attempted to access a malware distribution server (payload
|
||||
delivery) indicated by
|
||||
</span>
|
||||
<span class="row__content--link">{{
|
||||
detection.iocValue
|
||||
}}</span></template
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__title">Fields</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('detection.list.startTime')}}</div>
|
||||
<div class="row__content">{{basicInfo.startTime ? dayJs.tz(getMillisecond(basicInfo.startTime)).format('YYYY-MM-DD HH:mm:ss') : '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('detections.victimIp')}}</div>
|
||||
<div class="row__content">{{basicInfo.victimIp || '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('detections.victimLocation')}}</div>
|
||||
<div class="row__content">{{basicInfo.victimLocationCountry || '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('detections.victimAsn')}}</div>
|
||||
<div class="row__content">{{basicInfo.victimAsn || '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('detections.offenderIp')}}</div>
|
||||
<div class="row__content">{{basicInfo.offenderIp || '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('detections.offenderLocation')}}</div>
|
||||
<div class="row__content">{{basicInfo.offenderLocationCountry || '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('detections.offenderAsn')}}</div>
|
||||
<div class="row__content">{{basicInfo.offenderAsn || '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('overall.domain')}}</div>
|
||||
<div class="row__content">{{basicInfo.domain || '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('entities.domainCategory')}}</div>
|
||||
<div class="row__content">{{basicInfo.domainCategoryName || '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('entities.domainDetail.categoryGroup')}}</div>
|
||||
<div class="row__content">{{basicInfo.domainCategoryGroup || '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('entities.reputationLevel')}}</div>
|
||||
<div class="row__label">{{ $t('detection.list.startTime') }}</div>
|
||||
<div class="row__content">
|
||||
<div class="row__tag" :style="`background-color:${eventSeverityColor[basicInfo.domainReputationLevel]}`">{{basicInfo.domainReputationLevel || '-'}}</div>
|
||||
{{
|
||||
basicInfo.startTime
|
||||
? dayJs
|
||||
.tz(getMillisecond(basicInfo.startTime))
|
||||
.format('YYYY-MM-DD HH:mm:ss')
|
||||
: '-'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detections.victimIp') }}</div>
|
||||
<div class="row__content">{{ basicInfo.victimIp || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detections.victimLocation') }}</div>
|
||||
<div class="row__content">
|
||||
{{ basicInfo.victimLocationCountry || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detections.victimAsn') }}</div>
|
||||
<div class="row__content">{{ basicInfo.victimAsn || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detections.offenderIp') }}</div>
|
||||
<div class="row__content">{{ basicInfo.offenderIp || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detections.offenderLocation') }}</div>
|
||||
<div class="row__content">
|
||||
{{ basicInfo.offenderLocationCountry || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detections.offenderAsn') }}</div>
|
||||
<div class="row__content">{{ basicInfo.offenderAsn || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('overall.domain') }}</div>
|
||||
<div class="row__content">{{ basicInfo.domain || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('entities.domainCategory') }}</div>
|
||||
<div class="row__content">
|
||||
{{ basicInfo.domainCategoryName || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">
|
||||
{{ $t('entities.domainDetail.categoryGroup') }}
|
||||
</div>
|
||||
<div class="row__content">
|
||||
{{ basicInfo.domainCategoryGroup || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('entities.reputationLevel') }}</div>
|
||||
<div class="row__content">
|
||||
<div
|
||||
class="row__tag"
|
||||
:style="`background-color:${
|
||||
eventSeverityColor[basicInfo.domainReputationLevel]
|
||||
}`"
|
||||
>
|
||||
{{ basicInfo.domainReputationLevel || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">APP</div>
|
||||
<div class="row__content">{{basicInfo.appName || '-'}}</div>
|
||||
<div class="row__content">{{ basicInfo.appName || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">APP {{$t('entities.category')}}</div>
|
||||
<div class="row__content">{{basicInfo.appCategory || '-'}}</div>
|
||||
<div class="row__label">APP {{ $t('entities.category') }}</div>
|
||||
<div class="row__content">{{ basicInfo.appCategory || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">APP {{$t('entities.subcategory')}}</div>
|
||||
<div class="row__content">{{basicInfo.appSubcategory || '-'}}</div>
|
||||
<div class="row__label">APP {{ $t('entities.subcategory') }}</div>
|
||||
<div class="row__content">{{ basicInfo.appSubcategory || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('overall.appRisk')}}</div>
|
||||
<div class="row__label">{{ $t('overall.appRisk') }}</div>
|
||||
<div class="row__content">
|
||||
<div class="row__tag" :style="`background-color:${eventSeverityColor[basicInfo.appRisk]}`">{{basicInfo.appRisk || '-'}}</div>
|
||||
<div
|
||||
class="row__tag"
|
||||
:style="`background-color:${eventSeverityColor[basicInfo.appRisk]}`"
|
||||
>
|
||||
{{ basicInfo.appRisk || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('detections.malware')}}</div>
|
||||
<div class="row__content">{{basicInfo.malwareName || '-'}}</div>
|
||||
<div class="row__label">{{ $t('detections.malware') }}</div>
|
||||
<div class="row__content">{{ basicInfo.malwareName || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('detections.malwareAlias')}}</div>
|
||||
<div class="row__content">{{basicInfo.malwareAlias || '-'}}</div>
|
||||
<div class="row__label">{{ $t('detections.malwareAlias') }}</div>
|
||||
<div class="row__content">{{ basicInfo.malwareAlias || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('detections.malwareDescription')}}</div>
|
||||
<div class="row__content">{{basicInfo.malwareDescription || '-'}}</div>
|
||||
<div class="row__label">{{ $t('detections.malwareDescription') }}</div>
|
||||
<div class="row__content">
|
||||
{{ basicInfo.malwareDescription || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('detections.malwarePlatforms')}}</div>
|
||||
<div class="row__content">{{basicInfo.malwarePlatforms || '-'}}</div>
|
||||
<div class="row__label">{{ $t('detections.malwarePlatforms') }}</div>
|
||||
<div class="row__content">{{ basicInfo.malwarePlatforms || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('detections.malwareTechniques')}}</div>
|
||||
<div class="row__content row__content--link">{{basicInfo.malwareTechniques || '-'}}</div>
|
||||
<div class="row__label">{{ $t('detections.malwareTechniques') }}</div>
|
||||
<div class="row__content row__content--link">
|
||||
{{ basicInfo.malwareTechniques || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('detections.malwareGroups')}}</div>
|
||||
<div class="row__content row__content--link">{{basicInfo.malwareGroups || '-'}}</div>
|
||||
<div class="row__label">{{ $t('detections.malwareGroups') }}</div>
|
||||
<div class="row__content row__content--link">
|
||||
{{ basicInfo.malwareGroups || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{$t('detections.reference')}}</div>
|
||||
<div class="row__content row__content--link">{{reference || '-'}}</div>
|
||||
<div class="row__label">{{ $t('detections.reference') }}</div>
|
||||
<div class="row__content row__content--link">
|
||||
{{ reference || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <template v-if="detection.securityType === 'command and control' || detection.securityType === 'payload_delivery'">
|
||||
<!-- <template v-if="detection.securityType === 'command and control' || detection.securityType === 'payload_delivery'">
|
||||
</template>-->
|
||||
</div>
|
||||
<div class="overview__right">
|
||||
<div class="overview__title">{{$t('detections.goToVictim')}}</div>
|
||||
<div class="overview__title">{{ $t('detections.goToVictim') }}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__content">
|
||||
<span >{{$t('detections.viewDetailOf')}}</span>
|
||||
<span class="row__content--link" @click="goDetail('ip',basicInfo.victimIp)">{{basicInfo.victimIp}}</span>
|
||||
</div>
|
||||
<span>{{ $t('detections.viewDetailOf') }}</span>
|
||||
<span
|
||||
class="row__content--link"
|
||||
@click="goDetail('ip', basicInfo.victimIp)"
|
||||
>{{ basicInfo.victimIp }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__title">{{$t('detections.goToOffender')}}</div>
|
||||
<div class="overview__title">{{ $t('detections.goToOffender') }}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__content ">
|
||||
<span>{{$t('detections.viewDetailOf')}}</span>
|
||||
<span class="row__content--link" @click="goDetail('ip',basicInfo.offenderIp)">{{basicInfo.offenderIp}}</span>
|
||||
<span class="row__content--link" @click="goDetail('domain',basicInfo.domain)">{{basicInfo.domain}}</span>
|
||||
</div>
|
||||
<div class="row__content">
|
||||
<span>{{ $t('detections.viewDetailOf') }}</span>
|
||||
<span
|
||||
class="row__content--link"
|
||||
@click="goDetail('ip', basicInfo.offenderIp)"
|
||||
>{{ basicInfo.offenderIp }}</span
|
||||
>
|
||||
<span
|
||||
class="row__content--link"
|
||||
@click="goDetail('domain', basicInfo.domain)"
|
||||
>{{ basicInfo.domain }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__title">{{$t('detections.goToHunt')}}</div>
|
||||
<div class="overview__title">{{ $t('detections.goToHunt') }}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__content row__content--link">{{$t('detections.viewAllRelated')}}</div>
|
||||
<div class="row__content row__content--link">
|
||||
{{ $t('detections.viewAllRelated') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__title">
|
||||
{{ $t('detections.relatedDetections') }}
|
||||
</div>
|
||||
<div class="overview__title">{{$t('detections.relatedDetections')}}</div>
|
||||
<div class="overview__row-timeline">
|
||||
<div class="row-timeline" v-for="event in events" :key="event">
|
||||
<div class="row-timeline__time-info" :style="event.startTime === basicInfo.startTime ? 'color: #333;font-weight: bold;' : ''">{{formatT0(event)}}</div>
|
||||
<div
|
||||
class="row-timeline__time-info"
|
||||
:style="
|
||||
event.startTime === basicInfo.startTime
|
||||
? 'color: #333;font-weight: bold;'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ formatT0(event) }}
|
||||
</div>
|
||||
<div class="row-timeline__line">
|
||||
<div class="line-point-larger" v-if="event.startTime === basicInfo.startTime">
|
||||
<div
|
||||
class="line-point-larger"
|
||||
v-if="event.startTime === basicInfo.startTime"
|
||||
>
|
||||
<div class="line-point"></div>
|
||||
</div>
|
||||
<div v-else class="line-point"></div>
|
||||
@@ -134,21 +228,48 @@
|
||||
<div class="row-timeline__card">
|
||||
<div>
|
||||
<div class="timeline__severity timeline__severity--high">
|
||||
<i class="cn-icon cn-icon-alert-level" :style="`color:${eventSeverityColor[event.eventSeverity]}`"></i>
|
||||
<span>{{event.eventSeverity}}</span>
|
||||
<i
|
||||
class="cn-icon cn-icon-alert-level"
|
||||
:style="`color:${eventSeverityColor[event.eventSeverity]}`"
|
||||
></i>
|
||||
<span>{{ event.eventSeverity }}</span>
|
||||
</div>
|
||||
<div class="timeline__security-type">
|
||||
{{ event.securityType }}
|
||||
</div>
|
||||
<div class="timeline__start-time">
|
||||
{{
|
||||
dayJs
|
||||
.tz(getMillisecond(event.startTime))
|
||||
.format('YYYY-MM-DD HH:mm:ss')
|
||||
}}
|
||||
</div>
|
||||
<div class="timeline__security-type">{{event.securityType}}</div>
|
||||
<div class="timeline__start-time">{{dayJs.tz(getMillisecond(event.startTime)).format('YYYY-MM-DD HH:mm:ss')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-timeline__foot">
|
||||
<div class="detection-ip" :class="{'detection-ip__current': [basicInfo.offenderIp, basicInfo.victimIp].indexOf(event.offenderIp) > -1}">
|
||||
<div
|
||||
class="detection-ip"
|
||||
:class="{
|
||||
'detection-ip__current':
|
||||
[basicInfo.offenderIp, basicInfo.victimIp].indexOf(
|
||||
event.offenderIp,
|
||||
) > -1,
|
||||
}"
|
||||
>
|
||||
<i class="cn-icon cn-icon-attacker"></i>
|
||||
<span>{{event.offenderIp}}</span>
|
||||
<span>{{ event.offenderIp }}</span>
|
||||
</div>
|
||||
<div class="detection-ip" :class="{'detection-ip__current': [basicInfo.offenderIp, basicInfo.victimIp].indexOf(event.victimIp) > -1}">
|
||||
<div
|
||||
class="detection-ip"
|
||||
:class="{
|
||||
'detection-ip__current':
|
||||
[basicInfo.offenderIp, basicInfo.victimIp].indexOf(
|
||||
event.victimIp,
|
||||
) > -1,
|
||||
}"
|
||||
>
|
||||
<i class="cn-icon cn-icon-attacked"></i>
|
||||
<span>{{event.victimIp}}</span>
|
||||
<span>{{ event.victimIp }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -167,18 +288,18 @@ import _ from 'lodash'
|
||||
export default {
|
||||
name: 'DetectionOverview',
|
||||
props: {
|
||||
detection: Object
|
||||
detection: Object,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
eventSeverityColor,
|
||||
basicInfo: {},
|
||||
events: [],
|
||||
reference: 'https://attack.mitre.org'
|
||||
reference: 'https://attack.mitre.org',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formatT0 () {
|
||||
formatT0() {
|
||||
const vm = this
|
||||
return function (event) {
|
||||
const diffSeconds = event.diffSeconds
|
||||
@@ -188,8 +309,18 @@ export default {
|
||||
const eventStartTime = event.startTime
|
||||
const entityStartTime = vm.detection.startTime
|
||||
|
||||
if (_.isNumber(diffSeconds) && _.isNumber(eventStartTime) && _.isNumber(entityStartTime)) {
|
||||
const suffix = unitConvert(diffSeconds, unitTypes.time, 's', null, 0).join('')
|
||||
if (
|
||||
_.isNumber(diffSeconds) &&
|
||||
_.isNumber(eventStartTime) &&
|
||||
_.isNumber(entityStartTime)
|
||||
) {
|
||||
const suffix = unitConvert(
|
||||
diffSeconds,
|
||||
unitTypes.time,
|
||||
's',
|
||||
null,
|
||||
0,
|
||||
).join('')
|
||||
if (eventStartTime > entityStartTime) {
|
||||
return `T0+${suffix}`
|
||||
} else if (eventStartTime < entityStartTime) {
|
||||
@@ -198,20 +329,27 @@ export default {
|
||||
}
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getMillisecond,
|
||||
query () {
|
||||
Promise.all([this.queryBasic(), this.queryEvent()]).then(responses => {
|
||||
query() {
|
||||
Promise.all([this.queryBasic(), this.queryEvent()]).then((responses) => {
|
||||
responses[0] && (this.basicInfo = responses[0])
|
||||
responses[1] && (this.events = responses[1].sort((e1, e2) => e1.startTime - e2.startTime))
|
||||
responses[1] &&
|
||||
(this.events = responses[1].sort(
|
||||
(e1, e2) => e1.startTime - e2.startTime,
|
||||
))
|
||||
})
|
||||
},
|
||||
queryBasic () {
|
||||
queryBasic() {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
get(api.detection.securityEvent.overviewBasic, { eventId: this.detection.eventId, startTime: this.detection.startTime, endTime: this.detection.endTime }).then(response => {
|
||||
get(api.detection.securityEvent.overviewBasic, {
|
||||
eventId: this.detection.eventId,
|
||||
startTime: this.detection.startTime,
|
||||
endTime: this.detection.endTime,
|
||||
}).then((response) => {
|
||||
if (response.code === 200) {
|
||||
resolve(response.data.result[0])
|
||||
} else {
|
||||
@@ -223,10 +361,14 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
queryEvent () {
|
||||
queryEvent() {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
get(api.detection.securityEvent.overviewEvent, { startTime: this.detection.startTime, offenderIp: this.detection.offenderIp, victimIp: this.detection.victimIp }).then(response => {
|
||||
get(api.detection.securityEvent.overviewEvent, {
|
||||
startTime: this.detection.startTime,
|
||||
offenderIp: this.detection.offenderIp,
|
||||
victimIp: this.detection.victimIp,
|
||||
}).then((response) => {
|
||||
if (response.code === 200) {
|
||||
resolve(response.data.result)
|
||||
} else {
|
||||
@@ -238,19 +380,19 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
goDetail(type,name){
|
||||
goDetail(type, name) {
|
||||
const { href } = this.$router.resolve({
|
||||
path: '/entityDetail',
|
||||
query: {
|
||||
entityType: type,
|
||||
name: name
|
||||
}
|
||||
name: name,
|
||||
},
|
||||
})
|
||||
window.open(href, '_blank')
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.query()
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user