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

CN-1690 fix: detection问题和优化

Browse Source
This commit is contained in:
刘洪洪
2024-08-23 16:11:07 +08:00
parent 9d066abfa9
commit 1ac3965d78
9 changed files with 95 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -119,6 +119,26 @@ $color-regular: var(--el-text-color-regular);
font-size: 14px;
margin-right: 7px;
}
.row__mark__line {
display: flex;
flex-wrap: wrap;
margin-bottom: 12px;
.mark__line__text {
font-size: 12px;
color: var(--el-text-color-regular);
}
.mark__line__block {
width: 20px;
height: 12px;
border-radius: 4px;
margin-left: 6px;
margin-right: 12px;
cursor: pointer;
}
}
}
.row__content {
width: calc(100% - 176px);
@@ -129,12 +149,15 @@ $color-regular: var(--el-text-color-regular);
padding-right: 50px;
.charts__visual__map {
width: 490px;
width: 550px;
height: 32px;
margin: 12px 0 10px 60px;
background: linear-gradient(to right, #d7c668, #ffdd4a, #ffb65a, #ff9a79, #d84c4c);
margin: 12px 0 10px 30px;
}
}
.row__display {
display: flex;
}
}
.overview__row__display {

10
src/views/detections/DetectionFilter.vue
View File

@@ -9,13 +9,17 @@
<div class="filter__body" style="position: relative">
<div class="filter__body-item"
v-for="(data, i) in filter.data.slice(0, filter.showIndex)"
:key="i"
:key="data.value"
@click="clickFilterItem(data.label, filter.column, index)">
<div class="filter__body-item-left">
<div class="filter__body-item-left-index">{{ i+1 }}</div>
<div class="filter__body-item-left-label">
<el-tooltip :content="data.label" placement="top" effect="light" :disabled="disabledLabel && !data.unDisabled">
<span @mouseenter="handleMouse(`filter${index}${i}`)" :id="`filter${index}${i}`">
<el-tooltip placement="top" effect="light" :disabled="disabledLabel && !data.unDisabled">
<template #content>
<div v-if="data.tooltip" v-html="data.tooltip"></div>
<div v-else>{{ data.label }}</div>
</template>
<span @mouseenter="handleMouse(`filter${index}${i}`)" :id="`filter${index}${i}`">
<span v-if="data.values">{{ data.values }}</span>
<span v-else>{{ data.label }}</span>
</span>

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

@@ -16,7 +16,7 @@
:pageObj="pageObj"
:eventFlag="eventFlag"
:ref="`detectionRow${index}`"
:index="data.eventId"
:index="index"
@switchCollapse="switchCollapse"
:q="q"
></detection-row>

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

@@ -35,7 +35,7 @@
<div class="basic-info__item">
<i class="cn-icon cn-icon-time2"></i>
<span>{{$t('detection.lastTime')}}&nbsp;:&nbsp;&nbsp;</span>
<span>{{dateFormatByAppearance(detection.startTime) || '-'}}</span>
<span>{{dateFormatByAppearance(detection.endTime) || '-'}}</span>
</div>
</div>
</div>

14
src/views/detections/Index.vue
View File

@@ -431,8 +431,18 @@ export default {
count: r.count,
fields: r.keyFields,
values: r.keyValues,
unDisabled: true
unDisabled: true,
tooltip: ''
}))
this.filterData[2].data.forEach(item => {
const valueList = item.values.split(',')
const fieldList = item.fields.split(',')
let tooltip = ''
fieldList.forEach((ite, ind) => {
tooltip += `${ite}: ${valueList[ind]}<br>`
})
item.tooltip = tooltip
})
this.isCheckFilterByQ(params, 2)
const { showMore, showIndex, showDisabled } = this.computeFilterPage(this.filterData[2].data)
this.filterData[2].showMore = showMore
@@ -450,7 +460,7 @@ export default {
data.sort(reverseSortBy('count'))
data = data.slice(0, 5)
offenderIpOption.series[0].data = data.map(d => {
return [d.count, `${d.keyValues},${d.keyFields}`, d.keyValues, d.keyFields]
return [d.count, `${d.keyValues}`, d.keyValues, d.keyFields]
}).reverse()
detectionChart.setOption(offenderIpOption)

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

@@ -306,7 +306,13 @@ export const activeAttackBar = {
overflow: 'truncate'
},
formatter: function (param, index, callback) {
return `${param.value[3]},${param.value[2]}: ${unitConvert(param.value[0], 'number').join(' ')}`
const valueList = param.value[2].split(',')
const fieldList = param.value[3].split(',')
let tooltip = ''
fieldList.forEach((ite, ind) => {
tooltip += `${ite}: ${valueList[ind]}<br>`
})
return tooltip
},
show: true,
className: 'nz-chart-tooltip',
@@ -457,7 +463,7 @@ export const metricOption = {
width: 1,
type: 'dashed'
},
color: '#ec836c',
color: '#E48F3E',
data: [],
showSymbol: false
}

20
src/views/detections/overview/EventsTimeline.vue
View File

@@ -40,14 +40,7 @@ export default {
data () {
return {
timeLine: [],
myTimeData: [
{ eventId: '1111111', lastTime: 1722391500, startTime: 1722391500 },
{ eventId: '2222222', lastTime: 1722391920, startTime: 1722391920 },
{ eventId: '3333333', lastTime: 1722391920, startTime: 1722391920 },
{ eventId: '444', lastTime: 1722392340, startTime: 1722392340 },
{ eventId: '555', lastTime: 1722392580, startTime: 1722392580 },
{ eventId: '666', lastTime: 1722392880, startTime: 1722392880 }
],
myTimeData: [],
activeCircle: 0,
lineWidth: 520, // 时间轴宽度
isTransform: false // 时间轴label是否旋转标识，文字高度超出16即为换行，将文字旋转角度
@@ -109,11 +102,7 @@ export default {
myTimeRange.push({ time: obj.time, time1: obj.time1, stamp: new Date(obj.time1).getTime(), lastStamp: new Date(obj.time1).getTime() - showTimeInterval * 60 * 1000, showFlag: obj.showFlag, isYear: obj.isYear })
}
}
this.timeLine = myTimeRange
// if (e === 'init') {
// this.$emit('change', timeObj)
// }
},
// 按时间间隔格式化时间
formatTime (timestamp, showTimeInterval, timeInterval) {
@@ -121,7 +110,6 @@ export default {
const minute = date.getMinutes()
// const remainder = minute % showTimeInterval
const remainder1 = minute % timeInterval
// if (remainder === 0) {
// 零点，显示年月日
if (date.getHours() === 0 && minute === 0) {
const month = date.getMonth() + 1
@@ -148,7 +136,6 @@ export default {
}
return obj
}
// }
},
// 获取间隔时间，如一小时最小间隔时间1分钟，3小时间隔2分钟
getTimeInterval (timeFilter) {
@@ -261,11 +248,12 @@ export default {
if (index === 0) {
let marginLeft = this.lineWidth - ((item.itemDiffTime / item.diffTime) * this.lineWidth)
marginLeft = Math.round(marginLeft) + 38 + 'px' // 30px的左边距+小球半径8px
marginLeft = Math.round(marginLeft) + 27 + 'px' // 20px的左边距+小球半径7px
item.marginLeft = marginLeft
} else {
// 从第二个开始计算距离上一个球的距离，并减去上一个球的直径
let marginLeft = ((this.myTimeData[index - 1].itemDiffTime - item.itemDiffTime) / item.diffTime) * this.lineWidth
marginLeft = (Math.round(marginLeft) - 43) + 'px'
marginLeft = (Math.round(marginLeft) - 14) + 'px'
item.marginLeft = marginLeft
}
})

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

@@ -9,11 +9,17 @@
</div>
<div class="overview__title">{{ $t('overall.summary') }}</div>
<div class="overview__row overview__row__display">
<div class="row__content1 row__display">
<div v-for="(item, index) in markLineData" :key="item.label" class="row__mark__line" @click="highLightMarkLine(index)">
<div class="mark__line__text">{{ item.label }}: {{ item.yAxis }}</div>
<div class="mark__line__block" :style="{background: item.itemStyle.color}"></div>
</div>
</div>
<div class="row__content1">
<div class="row__content__charts" :id="`myChart${detection.eventId}`"></div>
</div>
<div class="row__content1" v-if="seriesDataNum>1">
<div class="charts__visual__map"></div>
<div class="charts__visual__map" :style="`background: linear-gradient(to right, ${mapColor});`"></div>
</div>
</div>

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

@@ -1,4 +1,4 @@
import { detectionEventType, detectionRuleType, EN, storageKey, unitTypes, ZH } 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'
@@ -23,7 +23,9 @@ export default {
isGroup: 0,
myChart: null,
lineOption: lineOption,
seriesDataNum: 0
seriesDataNum: 0,
mapColor: '',
markLineData: []
}
},
computed: {
@@ -79,7 +81,9 @@ export default {
}
axios.get(api.detection.event.detailTimeDistribution, { params: timeParams }).then(res => {
if (res.status === 200) {
this.timeData = res.data.data.result
const timeData = res.data.data.result
timeData.sort((a, b) => a.statTime - b.statTime)
this.timeData = timeData
}
}).catch(e => {
this.$message.error(this.errorMsgHandler(e))
@@ -102,6 +106,11 @@ export default {
if (this.detection.ruleType === detectionRuleType.threshold.key) {
const data = res.data.data.result
if (data && data.length > 0) {
this.mapColor = ''
data.forEach(item => {
this.mapColor += getSeverityNumberColor(item.severity) + ','
})
this.mapColor = this.mapColor.slice(0, -1)
this.handleLineChart(data)
}
} else {
@@ -164,11 +173,13 @@ export default {
itemStyle: { color: getSeverityNumberColor(item.severity) },
label: getSeverityByCode(item.severity)
})
this.markLineData = markLineData
this.lineOption.series[0].markLine = {
silent: true,
symbol: 'none',
data: markLineData,
label: {
show: false,
position: 'insideStartTop',
color: '#999',
formatter (params) {
@@ -179,7 +190,6 @@ export default {
}
})
this.lineOption.series[0].data = seriesData
this.lineOption.series[0].color = getSeverityNumberColor(data[0].severity) || '#ff9a79'
this.seriesDataNum = seriesData.length
if (this.seriesDataNum <= 1) {
@@ -190,6 +200,21 @@ export default {
}
this.myChart = markRaw(echarts.init(document.getElementById('myChart' + this.detection.eventId)))
this.myChart.setOption(this.lineOption)
},
/** 高亮markLine */
highLightMarkLine (index) {
// this.myChart.dispatchAction({
// type: 'highlight',
// seriesName: 'markLine', // 系列索引，根据实际情况修改
// dataIndex: index // 数据索引，表示哪一条markLine会被高亮
// })
// // 如果之后需要取消高亮，可以使用下面的代码
// myChart.dispatchAction({
// type: 'downplay',
// seriesIndex: 0, // 系列索引，根据实际情况修改
// dataIndex: dataIndex // 数据索引，表示哪一条markLine的高亮状态将被取消
// });
}
}
}