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

CN-1391 fix: 调整detection列表和下拉中的展示字段

Browse Source
This commit is contained in:
chenjinsong
2023-10-24 18:01:59 +08:00
parent 4d4d197a80
commit 327ae1956d
4 changed files with 216 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/utils/constants.js
View File

@@ -178,6 +178,13 @@ export const eventSeverityColor = {
low: '#FFD82D',
info: '#D1BD50'
}
export const riskLevelColor = {
5: '#D84C4C',
4: '#FE845D',
3: '#FFB65A',
2: '#FFD82D',
1: '#D1BD50'
}
export const eventSeverityColor1 = {
Critical: '#D84C4C',
High: '#FE845D',

20
src/views/detections/DetectionList.vue
View File

@@ -67,18 +67,17 @@ export default {
this.myListData = []
this.listData.forEach((item, i) => {
this.myListData.push(this.$_.cloneDeep(item))
if (item.eventInfoObj) {
axios.get(`${api.detection.securityEvent.detail}/${item.eventInfoObj.ioc_type}?resource=${item.eventInfoObj.ioc_value}`).then(res => {
if (res.status === 200 && this.myListData[i]) {
this.myListData[i].malwareName = (this.$_.get(res, 'data.data.malware.malwareName', '-')) || '-'
} else if (this.myListData[i]) {
this.myListData[i].malwareName = '-'
if (item.eventInfoObj && item.isBuiltin === 1) {
axios.get(`${api.detection.securityEvent.detail}/${item.eventInfoObj.ioc_type.toLowerCase()}?resource=${item.eventInfoObj.ioc_value}`).then(res => {
if (res.status === 200) {
if (item.eventType === 'Anonymity') {
item.darkweb = this.$_.get(res, 'data.data.darkweb', {}) || {}
} else if (item.eventType === 'Command and Control') {
item.malware = this.$_.get(res, 'data.data.malware', {}) || {}
}
}
}).catch(e => {
console.error(e)
if (this.myListData[i]) {
this.myListData[i].malwareName = '-'
}
})
}
})
@@ -118,10 +117,7 @@ export default {
} else {
clearTimeout(this.timeout)
this.noData = false
const timer = setTimeout(() => {
this.initData()
clearTimeout(timer)
}, 200)
}
}
}

19
src/views/detections/DetectionRow.vue
View File

@@ -41,21 +41,16 @@
<span>{{$t('detections.severity')}}&nbsp;:&nbsp;&nbsp;</span>
<span>{{detection.eventSeverity || '-'}}</span>
</div>
<!-- <div class="basic-info__item" v-if="detection.eventType">-->
<!-- <i class="cn-icon cn-icon-event-type"></i>-->
<!-- <span>{{$t('detections.eventType')}}&nbsp;:&nbsp;&nbsp;</span>-->
<!-- <span>{{detection.eventType || '-'}}</span>-->
<!-- </div>-->
<div class="basic-info__item" v-if="detection.eventName">
<div class="basic-info__item" v-if="detection.malware">
<i class="cn-icon cn-icon-trojan"></i>
<span>{{$t('detection.list.malwareName')}}&nbsp;:&nbsp;&nbsp;</span>
<span>{{ $_.get(detection, 'malwareName', '-') || '-' }}</span>
<span>{{ $_.get(detection, 'malware.malwareName', '-') || '-' }}</span>
</div>
<div class="basic-info__item" v-if="detection.darkweb">
<i class="cn-icon cn-icon-trojan"></i>
<span>{{$t('detection.nodeType')}}&nbsp;:&nbsp;&nbsp;</span>
<span>{{ $_.get(detection, 'darkweb.nodeType', '-') || '-' }}</span>
</div>
<!-- <div class="basic-info__item" v-if="detection.cryptominingPool">-->
<!-- <i class="cn-icon cn-icon-mining-pool"></i>-->
<!-- <span>{{$t('detection.list.cryptominingPool')}}&nbsp;:&nbsp;&nbsp;</span>-->
<!-- <span>{{detection.cryptominingPool || '-'}}</span>-->
<!-- </div>-->
<div class="basic-info__item">
<i class="cn-icon cn-icon-time2"></i>
<span>{{$t('detection.list.startTime')}}&nbsp;:&nbsp;&nbsp;</span>

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

@@ -3,32 +3,17 @@
<div class="overview__left">
<div class="overview__title">{{ $t('overall.remark') }}</div>
<div class="overview__row">
<div class="row__content1" v-if="basicInfo.malwareInfo">
<template v-if="basicInfo.malwareInfo.threatType === 'command and control'">
<span
class="row__content--link"
@click="goDetail('ip', detection.victimIp)">
{{ detection.victimIp }}
<div class="row__content1" v-if="detection.malware">
<span class="row__content--link">
{{ $_.get(detection, 'malware.mitreAttackDescription', '-') || '-' }}
</span>&nbsp;
<span>{{$t('detection.commandAndControl')}}</span>
<span class="row__content--link" @click="goDetail('ip', detection.eventInfoObj.ioc_value)">
{{ detection.eventInfoObj.ioc_value || '-' }}
</span>
</template>
<template v-else>
<span
class="row__content--link"
@click="goDetail('ip', detection.victimIp)">
{{ detection.victimIp }}
</span>&nbsp;
<span>{{$t('detection.payloadAndDelivery')}}</span>
<span
class="row__content--link"
@click="goDetail('ip', detection.eventInfoObj.ioc_value)">
{{ detection.eventInfoObj.ioc_value }}
</span>
</template>
</div>
<div class="row__content1" v-if="detection.darkweb">
<span class="row__content--link">
{{ $_.get(detection, 'malware.mitreAttackDescription', '-') || '-' }}
</span>&nbsp;
</div>
<span v-else>-</span>
</div>
<div class="overview__title">Fields</div>
<div class="overview__row">
@@ -66,6 +51,7 @@
<div class="row__label">{{ $t('overall.domain') }}</div>
<div class="row__content">{{ detection.domain || '-' }}</div>
</div>
<template v-if="detection.domain">
<div class="overview__row">
<div class="row__label">{{ $t('entities.domainCategory') }}</div>
<div class="row__content">{{ $_.get(basicInfo, 'domainInfo.category.categoryName', '-') || '-' }}</div>
@@ -85,6 +71,8 @@
</div>
<div class="row__content" v-else>-</div>
</div>
</template>
<template v-if="detection.app">
<div class="overview__row">
<div class="row__label">APP</div>
<div class="row__content">{{ $_.get(basicInfo, 'appInfo.category.appName', '-') || '-' }}</div>
@@ -102,12 +90,14 @@
<div class="row__content" v-if="$_.get(basicInfo, 'appInfo.category.appRisk')">
<div
class="row__tag row__tag__level"
:style="`background-color:${eventSeverityColor[basicInfo.appInfo.category.appRisk]}`">
{{ basicInfo.appInfo.category.appRisk }}
:style="`background-color:${riskLevelColor[basicInfo.appInfo.category.appRisk]}`">
{{ appRisk(basicInfo.appInfo.category.appRisk) || '-' }}
</div>
</div>
<div class="row__content" v-else>-</div>
</div>
</template>
<template v-if="detection.malware">
<div class="overview__row">
<div class="row__label">{{ $t('detections.malware') }}</div>
<div class="row__content">{{ $_.get(basicInfo, 'malwareInfo.malwareName', '-') || '-' }}</div>
@@ -145,6 +135,101 @@
</div>
<div class="row__content">-</div>
</div>
</template>
<template v-else-if="detection.darkweb">
<div class="overview__row">
<div class="row__label">{{ $t('detection.nodeTypeLower') }}</div>
<div class="row__content">{{ $_.get(basicInfo, 'darkweb.nodeType', '-') || '-' }}</div>
</div>
<template v-if="$_.get(detection.darkweb, 'nodeType', '') === 'tor'">
<div class="overview__row">
<div class="row__label">{{ $t('detection.tor.torFingerprint') }}</div>
<div class="row__content">{{ $_.get(basicInfo, 'darkweb.torFingerprint', '-') || '-' }}</div>
</div>
<div class="overview__row">
<div class="row__label">{{ $t('detection.tor.torFlags') }}</div>
<div class="row__content">{{ $_.get(basicInfo, 'darkweb.torFlags', '-') || '-' }}</div>
</div>
<div class="overview__row">
<div class="row__label">{{ $t('detection.tor.torVersion') }}</div>
<div class="row__content">{{ $_.get(basicInfo, 'darkweb.torVersion', '-') || '-' }}</div>
</div>
<div class="overview__row">
<div class="row__label">Tor ORPort</div>
<div class="row__content">{{ $_.get(basicInfo, 'darkweb.torOrPort', '-') || '-' }}</div>
</div>
<div class="overview__row">
<div class="row__label">Tor DirPort</div>
<div class="row__content">{{ $_.get(basicInfo, 'darkweb.torDirPort', '-') || '-' }}</div>
</div>
</template>
<template v-else-if="$_.get(detection.darkweb, 'nodeType', '') === 'i2p'">
<div class="overview__row">
<div class="row__label">I2P Hash</div>
<div class="row__content">{{ $_.get(basicInfo, 'darkweb.i2pHash', '-') || '-' }}</div>
</div>
<div class="overview__row">
<div class="row__label">{{ $t('detection.tor.i2pVersion') }}</div>
<div class="row__content">{{ $_.get(basicInfo, 'darkweb.i2pVersion', '-') || '-' }}</div>
</div>
<div class="overview__row">
<div class="row__label">{{ $t('detection.tor.i2pBandwidth') }}</div>
<div class="row__content">{{ $_.get(basicInfo, 'darkweb.i2pBandwidth', '-') || '-' }}</div>
</div>
</template>
<template v-else-if="$_.get(detection.darkweb, 'nodeType', '') === 'mtproxy'">
<div class="overview__row">
<div class="row__label">MTProxy Secret</div>
<div class="row__content">{{ $_.get(basicInfo, 'darkweb.mtproxySecret', '-') || '-' }}</div>
</div>
<div class="overview__row">
<div class="row__label">{{ $t('detection.tor.mtproxyPort') }}</div>
<div class="row__content">{{ $_.get(basicInfo, 'darkweb.mtproxyPort', '-') || '-' }}</div>
</div>
</template>
<template v-else-if="$_.get(detection.darkweb, 'nodeType', '') === 'obfs4'">
<div class="overview__row">
<div class="row__label">{{ $t('detection.tor.obfs4Fingerprint') }}</div>
<div class="row__content">{{ $_.get(basicInfo, 'darkweb.obfs4Fingerprint', '-') || '-' }}</div>
</div>
<div class="overview__row">
<div class="row__label">{{ $t('detection.tor.obfs4Cert') }}</div>
<div class="row__content">{{ $_.get(basicInfo, 'darkweb.obfs4Cert', '-') || '-' }}</div>
</div>
<div class="overview__row">
<div class="row__label">{{ $t('detection.tor.obfs4IatMode') }}</div>
<div class="row__content">{{ $_.get(basicInfo, 'darkweb.obfs4IatMode', '-') || '-' }}</div>
</div>
<div class="overview__row">
<div class="row__label">{{ $t('detection.tor.obfs4Port') }}</div>
<div class="row__content">{{ $_.get(basicInfo, 'darkweb.obfs4Port', '-') || '-' }}</div>
</div>
</template>
<template v-else-if="$_.get(detection.darkweb, 'nodeType', '') === 'snowflake'">
<div class="overview__row">
<div class="row__label">{{ $t('detection.tor.snowflakePort') }}</div>
<div class="row__content">{{ $_.get(basicInfo, 'darkweb.snowflakePort', '-') || '-' }}</div>
</div>
</template>
</template>
<template v-else>
<div class="overview__row">
<div class="row__label">{{ $t('detection.libraryId') }}</div>
<div class="row__content">{{ $_.get(detection, 'eventInfoObj.knowledge_id', '-') || '-' }}</div>
</div>
<div class="overview__row">
<div class="row__label">{{ $t('detection.libraryName') }}</div>
<div class="row__content">{{ $_.get(detection, 'eventInfoObj.name', '-') || '-' }}</div>
</div>
<div class="overview__row">
<div class="row__label">{{ $t('detection.iocType') }}</div>
<div class="row__content">{{ $_.get(detection, 'eventInfoObj.ioc_type', '-') || '-' }}</div>
</div>
<div class="overview__row">
<div class="row__label">{{ $t('detection.iocValue') }}</div>
<div class="row__content">{{ $_.get(detection, 'eventInfoObj.ioc_value', '-') || '-' }}</div>
</div>
</template>
</div>
<div class="overview__right">
<div class="overview__title">{{ $t('detections.goToVictim') }}</div>
@@ -251,7 +336,7 @@
import axios from 'axios'
import { api } from '@/utils/api'
import { getMillisecond, dateFormatByAppearance } from '@/utils/date-util'
import { eventSeverityColor, unitTypes } from '@/utils/constants'
import { eventSeverityColor, unitTypes, riskLevelMapping, riskLevelColor } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import _ from 'lodash'
export default {
@@ -262,6 +347,7 @@ export default {
data () {
return {
eventSeverityColor,
riskLevelColor,
basicInfo: {},
events: [],
reference: 'https://attack.mitre.org'
@@ -288,6 +374,14 @@ export default {
}
return ''
}
},
appRisk () {
return function (level) {
const m = riskLevelMapping.find(mapping => {
return mapping.value == level
})
return (m && m.name) || level
}
}
},
methods: {
@@ -303,9 +397,6 @@ export default {
axios.get(`${api.detection.securityEvent.ipDetail}?resource=${this.detection.offenderIp}`).then(res => {
if (res.status === 200) {
this.basicInfo.offenderInfo = res.data.data
if (this.$_.get(this.detection, 'eventInfoObj.ioc_type', '').toLowerCase() === 'ip') {
this.basicInfo.malwareInfo = res.data.data.malware
}
}
})
}
@@ -320,9 +411,6 @@ export default {
axios.get(`${api.detection.securityEvent.domainDetail}?resource=${this.detection.domain}`).then(res => {
if (res.status === 200) {
this.basicInfo.domainInfo = res.data.data
if (this.$_.get(this.detection, 'eventInfoObj.ioc_type', '').toLowerCase() === 'domain') {
this.basicInfo.malwareInfo = res.data.data.malware
}
}
})
}