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

CN-383 feat : Detection界面补充事件描述信息 初步完成

Browse Source
This commit is contained in:
zhangxiaolong
2022-03-14 14:53:02 +08:00
parent 921bdb5111
commit 0d6a14963b
4 changed files with 351 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
View File

@@ -3,7 +3,28 @@
<div class="overview__left"> <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="overview__row">
<div class="row__content">{{basicInfo.malwareDescription || '-'}}</div> <div class="row__content">
<span
class="row__content--link"
@click="goDetail('app', detection.app_name)"
>{{ detection.app_name }}</span
>
<template v-if="detection.eventType === 'dns error'">
<span>
’s rate of DNS query errors is abnormally high.
</span>
</template>
<template v-if="detection.eventType === 'http error'">
<span>
’s rate of HTTP query errors is abnormally high.
</span>
</template>
<template v-if="detection.eventType === 'high dns response time'">
<span>
’s average of DNS response time is abnormally high.
</span>
</template>
</div>
</div> </div>
<div class="overview__title">Fields</div> <div class="overview__title">Fields</div>
<div class="overview__row"> <div class="overview__row">
@@ -89,7 +110,17 @@ export default {
reject(e) reject(e)
} }
}) })
} },
goDetail(type, name) {
const { href } = this.$router.resolve({
path: '/entityDetail',
query: {
entityType: type,
name: name,
},
})
window.open(href, '_blank')
},
}, },
mounted () { mounted () {
this.query() this.query()

37
src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
View File

@@ -3,7 +3,28 @@
<div class="overview__left"> <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="overview__row">
<div class="row__content">{{basicInfo.malwareDescription || '-'}}</div> <div class="row__content">
<span
class="row__content--link"
@click="goDetail('domain', detection.domain)"
>{{ detection.domain }}</span
>
<template v-if="detection.eventType === 'dns error'">
<span>
’s rate of DNS query errors is abnormally high.
</span>
</template>
<template v-if="detection.eventType === 'http error'">
<span>
’s rate of HTTP query errors is abnormally high.
</span>
</template>
<template v-if="detection.eventType === 'high dns response time'">
<span>
’s average of DNS response time is abnormally high.
</span>
</template>
</div>
</div> </div>
<div class="overview__title">Fields</div> <div class="overview__title">Fields</div>
<div class="overview__row"> <div class="overview__row">
@@ -78,7 +99,7 @@ export default {
methods: { methods: {
query () { query () {
this.queryBasic().then(responses => { this.queryBasic().then(responses => {
responses && (this.basicInfo = responses) responses && (this.basicInfo = responses)
}) })
}, },
queryBasic () { queryBasic () {
@@ -93,7 +114,17 @@ export default {
reject(e) reject(e)
} }
}) })
} },
goDetail(type, name) {
const { href } = this.$router.resolve({
path: '/entityDetail',
query: {
entityType: type,
name: name,
},
})
window.open(href, '_blank')
},
}, },
mounted () { mounted () {
this.query() this.query()

35
src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
View File

@@ -3,7 +3,28 @@
<div class="overview__left"> <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="overview__row">
<div class="row__content">{{basicInfo.malwareDescription || '-'}}</div> <div class="row__content">
<span
class="row__content--link"
@click="goDetail('ip', detection.server_ip)"
>{{ detection.server_ip }}</span
>
<template v-if="detection.eventType === 'dns error'">
<span>
’s rate of DNS query errors is abnormally high.
</span>
</template>
<template v-if="detection.eventType === 'http error'">
<span>
’s rate of HTTP query errors is abnormally high.
</span>
</template>
<template v-if="detection.eventType === 'high dns response time'">
<span>
’s average of DNS response time is abnormally high.
</span>
</template>
</div>
</div> </div>
<div class="overview__title">Fields</div> <div class="overview__title">Fields</div>
<div class="overview__row"> <div class="overview__row">
@@ -81,7 +102,17 @@ export default {
reject(e) reject(e)
} }
}) })
} },
goDetail(type, name) {
const { href } = this.$router.resolve({
path: '/entityDetail',
query: {
entityType: type,
name: name,
},
})
window.open(href, '_blank')
},
}, },
mounted () { mounted () {
this.query() this.query()

360
src/views/detections/overview/DetectionSecurityEventOverview.vue
View File

@@ -1,132 +1,226 @@
<template> <template>
<div class="detection-detail-overview"> <div class="detection-detail-overview">
<div class="overview__left"> <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="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
>&nbsp;
<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
>&nbsp;
<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>
<div class="overview__title">Fields</div> <div class="overview__title">Fields</div>
<div class="overview__row"> <div class="overview__row">
<div class="row__label">{{$t('detection.list.startTime')}}</div> <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__content"> <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> </div>
<div class="overview__row"> <div class="overview__row">
<div class="row__label">APP</div> <div class="row__label">APP</div>
<div class="row__content">{{basicInfo.appName || '-'}}</div> <div class="row__content">{{ basicInfo.appName || '-' }}</div>
</div> </div>
<div class="overview__row"> <div class="overview__row">
<div class="row__label">APP {{$t('entities.category')}}</div> <div class="row__label">APP {{ $t('entities.category') }}</div>
<div class="row__content">{{basicInfo.appCategory || '-'}}</div> <div class="row__content">{{ basicInfo.appCategory || '-' }}</div>
</div> </div>
<div class="overview__row"> <div class="overview__row">
<div class="row__label">APP {{$t('entities.subcategory')}}</div> <div class="row__label">APP {{ $t('entities.subcategory') }}</div>
<div class="row__content">{{basicInfo.appSubcategory || '-'}}</div> <div class="row__content">{{ basicInfo.appSubcategory || '-' }}</div>
</div> </div>
<div class="overview__row"> <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__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> </div>
<div class="overview__row"> <div class="overview__row">
<div class="row__label">{{$t('detections.malware')}}</div> <div class="row__label">{{ $t('detections.malware') }}</div>
<div class="row__content">{{basicInfo.malwareName || '-'}}</div> <div class="row__content">{{ basicInfo.malwareName || '-' }}</div>
</div> </div>
<div class="overview__row"> <div class="overview__row">
<div class="row__label">{{$t('detections.malwareAlias')}}</div> <div class="row__label">{{ $t('detections.malwareAlias') }}</div>
<div class="row__content">{{basicInfo.malwareAlias || '-'}}</div> <div class="row__content">{{ basicInfo.malwareAlias || '-' }}</div>
</div> </div>
<div class="overview__row"> <div class="overview__row">
<div class="row__label">{{$t('detections.malwareDescription')}}</div> <div class="row__label">{{ $t('detections.malwareDescription') }}</div>
<div class="row__content">{{basicInfo.malwareDescription || '-'}}</div> <div class="row__content">
{{ basicInfo.malwareDescription || '-' }}
</div>
</div> </div>
<div class="overview__row"> <div class="overview__row">
<div class="row__label">{{$t('detections.malwarePlatforms')}}</div> <div class="row__label">{{ $t('detections.malwarePlatforms') }}</div>
<div class="row__content">{{basicInfo.malwarePlatforms || '-'}}</div> <div class="row__content">{{ basicInfo.malwarePlatforms || '-' }}</div>
</div> </div>
<div class="overview__row"> <div class="overview__row">
<div class="row__label">{{$t('detections.malwareTechniques')}}</div> <div class="row__label">{{ $t('detections.malwareTechniques') }}</div>
<div class="row__content row__content--link">{{basicInfo.malwareTechniques || '-'}}</div> <div class="row__content row__content--link">
{{ basicInfo.malwareTechniques || '-' }}
</div>
</div> </div>
<div class="overview__row"> <div class="overview__row">
<div class="row__label">{{$t('detections.malwareGroups')}}</div> <div class="row__label">{{ $t('detections.malwareGroups') }}</div>
<div class="row__content row__content--link">{{basicInfo.malwareGroups || '-'}}</div> <div class="row__content row__content--link">
{{ basicInfo.malwareGroups || '-' }}
</div>
</div> </div>
<div class="overview__row"> <div class="overview__row">
<div class="row__label">{{$t('detections.reference')}}</div> <div class="row__label">{{ $t('detections.reference') }}</div>
<div class="row__content row__content--link">{{reference || '-'}}</div> <div class="row__content row__content--link">
{{ reference || '-' }}
</div>
</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>--> </template>-->
</div> </div>
<div class="overview__right"> <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="overview__row">
<div class="row__content"> <div class="row__content">
<span >{{$t('detections.viewDetailOf')}}</span> &nbsp; <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
<span class="row__content--link" @click="goDetail('ip',basicInfo.victimIp)">{{basicInfo.victimIp}}</span> <span
</div> class="row__content--link"
@click="goDetail('ip', basicInfo.victimIp)"
>{{ basicInfo.victimIp }}</span
>
</div>
</div> </div>
<div class="overview__title">{{$t('detections.goToOffender')}}</div> <div class="overview__title">{{ $t('detections.goToOffender') }}</div>
<div class="overview__row"> <div class="overview__row">
<div class="row__content "> <div class="row__content">
<span>{{$t('detections.viewDetailOf')}}</span> &nbsp; <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
<span class="row__content--link" @click="goDetail('ip',basicInfo.offenderIp)">{{basicInfo.offenderIp}}</span> <span
<span class="row__content--link" @click="goDetail('domain',basicInfo.domain)">{{basicInfo.domain}}</span> class="row__content--link"
</div> @click="goDetail('ip', basicInfo.offenderIp)"
>{{ basicInfo.offenderIp }}</span
>
<span
class="row__content--link"
@click="goDetail('domain', basicInfo.domain)"
>{{ basicInfo.domain }}</span
>
</div>
</div> </div>
<div class="overview__title">{{$t('detections.goToHunt')}}</div> <div class="overview__title">{{ $t('detections.goToHunt') }}</div>
<div class="overview__row"> <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>
<div class="overview__title">{{$t('detections.relatedDetections')}}</div>
<div class="overview__row-timeline"> <div class="overview__row-timeline">
<div class="row-timeline" v-for="event in events" :key="event"> <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="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 class="line-point"></div>
</div> </div>
<div v-else class="line-point"></div> <div v-else class="line-point"></div>
@@ -134,21 +228,48 @@
<div class="row-timeline__card"> <div class="row-timeline__card">
<div> <div>
<div class="timeline__severity timeline__severity--high"> <div class="timeline__severity timeline__severity--high">
<i class="cn-icon cn-icon-alert-level" :style="`color:${eventSeverityColor[event.eventSeverity]}`"></i> <i
<span>{{event.eventSeverity}}</span> 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>
<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> </div>
<div class="row-timeline__foot"> <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> <i class="cn-icon cn-icon-attacker"></i>
<span>{{event.offenderIp}}</span> <span>{{ event.offenderIp }}</span>
</div> </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> <i class="cn-icon cn-icon-attacked"></i>
<span>{{event.victimIp}}</span> <span>{{ event.victimIp }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -167,18 +288,18 @@ import _ from 'lodash'
export default { export default {
name: 'DetectionOverview', name: 'DetectionOverview',
props: { props: {
detection: Object detection: Object,
}, },
data () { data() {
return { return {
eventSeverityColor, eventSeverityColor,
basicInfo: {}, basicInfo: {},
events: [], events: [],
reference: 'https://attack.mitre.org' reference: 'https://attack.mitre.org',
} }
}, },
computed: { computed: {
formatT0 () { formatT0() {
const vm = this const vm = this
return function (event) { return function (event) {
const diffSeconds = event.diffSeconds const diffSeconds = event.diffSeconds
@@ -188,8 +309,18 @@ export default {
const eventStartTime = event.startTime const eventStartTime = event.startTime
const entityStartTime = vm.detection.startTime const entityStartTime = vm.detection.startTime
if (_.isNumber(diffSeconds) && _.isNumber(eventStartTime) && _.isNumber(entityStartTime)) { if (
const suffix = unitConvert(diffSeconds, unitTypes.time, 's', null, 0).join('') _.isNumber(diffSeconds) &&
_.isNumber(eventStartTime) &&
_.isNumber(entityStartTime)
) {
const suffix = unitConvert(
diffSeconds,
unitTypes.time,
's',
null,
0,
).join('')
if (eventStartTime > entityStartTime) { if (eventStartTime > entityStartTime) {
return `T0+${suffix}` return `T0+${suffix}`
} else if (eventStartTime < entityStartTime) { } else if (eventStartTime < entityStartTime) {
@@ -198,20 +329,27 @@ export default {
} }
return '' return ''
} }
} },
}, },
methods: { methods: {
getMillisecond, getMillisecond,
query () { query() {
Promise.all([this.queryBasic(), this.queryEvent()]).then(responses => { Promise.all([this.queryBasic(), this.queryEvent()]).then((responses) => {
responses[0] && (this.basicInfo = responses[0]) 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) => { return new Promise((resolve, reject) => {
try { 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) { if (response.code === 200) {
resolve(response.data.result[0]) resolve(response.data.result[0])
} else { } else {
@@ -223,10 +361,14 @@ export default {
} }
}) })
}, },
queryEvent () { queryEvent() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { 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) { if (response.code === 200) {
resolve(response.data.result) resolve(response.data.result)
} else { } else {
@@ -238,19 +380,19 @@ export default {
} }
}) })
}, },
goDetail(type,name){ goDetail(type, name) {
const { href } = this.$router.resolve({ const { href } = this.$router.resolve({
path: '/entityDetail', path: '/entityDetail',
query: { query: {
entityType: type, entityType: type,
name: name name: name,
} },
}) })
window.open(href, '_blank') window.open(href, '_blank')
} },
}, },
mounted () { mounted() {
this.query() this.query()
} },
} }
</script> </script>