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

CN-1676 fix: 1、添加详情描述；2、详情时间轴点击事件入参时间转为秒；

Browse Source
This commit is contained in:
刘洪洪
2024-08-13 14:49:05 +08:00
parent 6a1662b15e
commit 0477b78c9d
9 changed files with 62 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/css/components/views/detections/detection-list/row.scss
View File

@@ -249,6 +249,10 @@ $bg-color-page: var(--el-bg-color-page);
}
}
.new__basic-info {
padding: 0 16px;
}
.show-detail {
flex-shrink: 0;
padding: 0 30px;

3
src/assets/css/components/views/detections/detection-overview.scss
View File

@@ -142,6 +142,9 @@ $color-regular: var(--el-text-color-regular);
flex-direction: column;
}
}
.overview__left-new {
flex: 0 0 100%;
}
}
.overview__row-timeline {
display: flex;

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

@@ -22,7 +22,7 @@
<div class="cn-detection__body">
<div class="body__basic-info">
<div class="basic-info">
<div class="basic-info__item" style="margin-left: 16px;" v-if="detection.eventType">
<div class="basic-info__item margin-l" style="margin-left: 16px;" 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>

4
src/views/detections/DetectionRowEvents.vue
View File

@@ -13,8 +13,8 @@
<div class="cn-detection__body">
<div class="body__basic-info">
<div class="basic-info">
<div class="basic-info__item" style="margin-left: 16px;">
<div class="basic-info new__basic-info">
<div class="basic-info__item">
<span v-for="(item, index) in myDetection.keyList" :key="index">
<span class="item__key">{{item.key}}</span>
<span class="item__key__type">({{ item.type }})</span>

1
src/views/detections/options/detectionOptions.js
View File

@@ -489,6 +489,7 @@ export const lineOption = {
},
series: [
{
name: 'event',
data: [],
type: 'line',
color: '#ff9a79',

4
src/views/detections/overview/IndicatorMatchOverview.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="detection-detail-overview">
<div class="overview__left">
<div class="overview__left overview__left-new">
<div class="overview__title">{{ $t('overall.remark') }}</div>
<div class="overview__row">
<div class="row__content1">
${key} experienced exceptions exceeding the threshold number of times.
<div v-html="handleDescription"></div>
</div>
</div>
<div class="overview__title">{{ $t('overall.fields') }}</div>

4
src/views/detections/overview/SequenceOverview.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="detection-detail-overview">
<div class="overview__left">
<div class="overview__left overview__left-new">
<div class="overview__title">{{ $t('overall.remark') }}</div>
<div class="overview__row">
<div class="row__content1">
${key} experienced exceptions exceeding the threshold number of times.
<div v-html="handleDescription"></div>
</div>
</div>

4
src/views/detections/overview/ThresholdOverview.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="detection-detail-overview">
<div class="overview__left">
<div class="overview__left overview__left-new">
<div class="overview__title">{{ $t('overall.remark') }}</div>
<div class="overview__row">
<div class="row__content1">
${key} experienced exceptions exceeding the threshold number of times.
<div v-html="handleDescription"></div>
</div>
</div>
<div class="overview__title">{{ $t('overall.summary') }}</div>

48
src/views/detections/overview/detectionDetailMixin.js
View File

@@ -1,4 +1,4 @@
import { detectionEventType, detectionRuleType } from '@/utils/constants'
import { detectionEventType, detectionRuleType, EN, storageKey, ZH } from '@/utils/constants'
import { getMillisecond, getSecond } from '@/utils/date-util'
import axios from 'axios'
import { api } from '@/utils/api'
@@ -25,6 +25,48 @@ export default {
seriesDataNum: 0
}
},
computed: {
// 下拉详情的描述
handleDescription () {
const language = localStorage.getItem(storageKey.language) || EN
const valuesList = this.detection.keyValues.split(',')
// const fieldsList = this.detection.keyFields.split(',')
// const obj = {}
// valuesList.forEach((item, index) => {
// obj[fieldsList[index]] = item
// })
if (language === EN) {
switch (this.detection.ruleType) {
case detectionRuleType.indicator.key: {
// return `${obj.client_ip} communicated with ${obj.server_ip} that was associated with the indicator of ${obj.server_ip_tags}.`
return `<span>${valuesList[0]}</span> communicated with <span>${valuesList[1]}</span> that was associated with the indicator of <span>${valuesList[2]}</span>.`
}
case detectionRuleType.threshold.key: {
// return `${obj.http_host} experienced exceptions exceeding the threshold number of times.`
return `<span>${valuesList[0]}</span> experienced exceptions exceeding the threshold number of times.`
}
case detectionRuleType.sequence.key:
case detectionRuleType.unordered.key: {
// return `${obj.client_ip} experienced ${this.detection.eventName} exception event.`
return `<span>${valuesList[0]}</span> experienced <span>${this.detection.eventName}</span> exception event.`
}
}
} else if (language === ZH) {
switch (this.detection.ruleType) {
case detectionRuleType.indicator.key: {
return `<span>${valuesList[0]}</span>与<span>${valuesList[1]}</span>进行了通信，后者与<span>${valuesList[2]}</span>的指标相关联。`
}
case detectionRuleType.threshold.key: {
return `<span>${valuesList[0]}</sapn> 发生异常的次数超出阈值。`
}
case detectionRuleType.sequence.key:
case detectionRuleType.unordered.key: {
return `<span>${valuesList[0]}</span>发生了<span>${this.detection.eventName}</span>异常事件。`
}
}
}
}
},
mounted () {
this.initData()
},
@@ -99,8 +141,8 @@ export default {
},
changeTimeline (e) {
const params = {
startTime: this.timeFilter.startTime,
endTime: this.timeFilter.endTime,
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
eventId: e,
ruleType: this.detection.ruleType,
resource: this.q,