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

CN-318 feat: detection服务质量界面

Browse Source
This commit is contained in:
chenjinsong
2022-02-25 13:33:54 +08:00
parent 2889c3cb19
commit 6158a6a4f4
19 changed files with 1197 additions and 683 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,17 +5,19 @@
<span @click="switchCollapse" :class="{'reg-down': !isCollapse}"><i class="cn-icon cn-icon-arrow-right"></i></span>
</div>
<div class="cn-detection__case">
<div class="cn-detection__icon" :style="`background-color: ${eventSeverityColor[detection.eventSecurity]}`">
</div>
<div class="cn-detection__icon" :style="`background-color: ${eventSeverityColor[detection.eventSecurity]}`"></div>
<div class="cn-detection__row">
<div class="cn-detection__header">
<div class="cn-detection__header" v-if="pageType === detectionPageType.securityEvent">
<i class="cn-icon cn-icon-attacker" ></i>{{detection.offenderIp}}
<span class="line">-------</span>
<span class="circle"></span>
<i class="cn-icon cn-icon-attacked" ></i>{{detection.victimIp}}
</div>
<div class="cn-detection__body">
<div class="cn-detection__header" v-else-if="pageType === detectionPageType.performanceEvent">
<div class="cn-entity__icon"><i :class="iconClass"></i></div>
<div style="padding-left: 3px;">{{detection.serverIp || detection.domain || detection.appName || 'Unknown'}}</div>
</div>
<div class="cn-detection__body">
<div class="body__basic-info">
<div class="basic-info">
<div class="basic-info__item">
@@ -28,12 +30,12 @@
<span>{{$t('detection.list.securityType')}}&nbsp;:&nbsp;&nbsp;</span>
<span>{{detection.securityType}}</span>
</div>
<div class="basic-info__item" v-if="detection.malwareName && detection.malwareName.length > 0 ">
<div class="basic-info__item" v-if="detection.malwareName">
<i class="cn-icon cn-icon-trojan"></i>
<span>{{$t('detection.list.malwareName')}}&nbsp;:&nbsp;&nbsp;</span>
<span>{{detection.malwareName}}</span>
</div>
<div class="basic-info__item" v-if="detection.cryptominingPool && detection.cryptominingPool.length > 0 ">
<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>
@@ -43,6 +45,13 @@
<span>{{$t('detection.list.startTime')}}&nbsp;:&nbsp;&nbsp;</span>
<span>{{dayJs.tz(getMillisecond(detection.startTime)).format('YYYY-MM-DD HH:mm:ss')}}</span>
</div>
<div class="basic-info__item">
<i class="cn-icon cn-icon-time2"></i>
<span>{{$t('overall.duration')}}&nbsp;:&nbsp;&nbsp;</span>
<span style="display: inline-block;height: 6px;width: 6px;border-radius: 50%;margin-right: 8px;"
:style="pointColor(detection)"></span>
<span>{{unitConvert(detection.durationMs, 'time', null, null, 0).join(' ')}}</span>
</div>
</div>
</div>
</div>
@@ -50,10 +59,28 @@
<el-collapse-transition>
<div class="cn-detection__detail-overview" v-if="!isCollapse">
<el-divider></el-divider>
<detection-overview
<detection-security-event-overview
v-if="pageType === detectionPageType.securityEvent"
:detection="detection"
:time-filter="timeFilter"
></detection-overview>
></detection-security-event-overview>
<template v-else>
<detection-performance-event-ip-overview
v-if="detection.entityType === entityType.ip.toLowerCase()"
:detection="detection"
:time-filter="timeFilter"
></detection-performance-event-ip-overview>
<detection-performance-event-domain-overview
v-else-if="detection.entityType === entityType.domain.toLowerCase()"
:detection="detection"
:time-filter="timeFilter"
></detection-performance-event-domain-overview>
<detection-performance-event-app-overview
v-else-if="detection.entityType === entityType.app.toLowerCase()"
:detection="detection"
:time-filter="timeFilter"
></detection-performance-event-app-overview>
</template>
</div>
</el-collapse-transition>
</div>
@@ -61,26 +88,70 @@
</template>
<script>
import { eventSeverityColor } from '@/utils/constants'
import { eventSeverityColor, detectionPageType, entityType } from '@/utils/constants'
import { getMillisecond } from '@/utils/date-util'
import DetectionOverview from '@/views/detections/DetectionOverview'
import unitConvert from '@/utils/unit-convert'
import DetectionSecurityEventOverview from '@/views/detections/overview/DetectionSecurityEventOverview'
import DetectionPerformanceEventIpOverview from '@/views/detections/overview/DetectionPerformanceEventIpOverview'
import DetectionPerformanceEventAppOverview from '@/views/detections/overview/DetectionPerformanceEventAppOverview'
import DetectionPerformanceEventDomainOverview from '@/views/detections/overview/DetectionPerformanceEventDomainOverview'
export default {
name: 'DetectionRow',
components: {
DetectionOverview
DetectionSecurityEventOverview,
DetectionPerformanceEventIpOverview,
DetectionPerformanceEventAppOverview,
DetectionPerformanceEventDomainOverview
},
props: {
index: Number,
timeFilter: Object,
detection: Object
detection: Object,
pageType: String // 安全事件、服务质量
},
data () {
return {
entityType,
detectionPageType,
isCollapse: true, // 是否是折叠状态
eventSeverityColor
}
},
computed: {
iconClass () {
let className
switch (this.detection.entityType) {
case ('ip'): {
className = 'cn-icon cn-icon-ip'
break
}
case ('domain'): {
className = 'cn-icon cn-icon-domain'
break
}
case ('app'): {
className = 'cn-icon cn-icon-app'
break
}
default:
break
}
return className
},
pointColor () {
return function (detection) {
let color = '#8FA1BE'
if (detection.startTime && detection.endTime) {
if (getMillisecond(detection.endTime) - getMillisecond(detection.startTime) < 5 * 60 * 1000) {
color = '#D84C4C'
}
}
return { backgroundColor: color }
}
}
},
methods: {
unitConvert,
getMillisecond,
/* 切换折叠状态 */
switchCollapse () {