Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev
This commit is contained in:
hyx
@@ -20,6 +20,7 @@
|
||||
@import './views/entityExplorer/entityList/row';
|
||||
@import 'views/entityExplorer/entityList/detail-overview';
|
||||
@import './views/detections/detections';
|
||||
@import './views/detections/detection-filter';
|
||||
@import './views/charts/panel';
|
||||
@import 'views/charts/chartIpOpenPortBar';
|
||||
@import './views/charts/chartTable';
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
.detection-filter-case {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 280px;
|
||||
padding: 10px;
|
||||
margin-right: 10px;
|
||||
background-color: white;
|
||||
|
||||
.detection-filter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.filter__header {
|
||||
display: flex;
|
||||
flex: 0 0 32px;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
color: #666;
|
||||
background-color: #F3F7FA;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
i {
|
||||
font-size: 12px;
|
||||
transition: all linear .1s;
|
||||
transform: rotate(0) translate(0, 2px);
|
||||
}
|
||||
i.arrow-rotate {
|
||||
transform: rotate(90deg) translate(2px, 3px);
|
||||
}
|
||||
}
|
||||
.filter__body {
|
||||
padding: 5px 0 0 15px;
|
||||
|
||||
.el-checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.el-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
|
||||
.filter__checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.severity-color-block {
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -114,6 +114,7 @@ export default {
|
||||
},
|
||||
recursionParamsConvert (chart) {
|
||||
chart.params = chart.params ? JSON.parse(chart.params) : {}
|
||||
chart.firstShow = false
|
||||
if (chart.type === 94) {
|
||||
chart.oldH = chart.h
|
||||
/* chart.params = {
|
||||
|
||||
@@ -134,7 +134,6 @@ export default {
|
||||
this.emitter.emit('groupParentCalcHeight', { chart, childrenList: this.copyDataList })
|
||||
},
|
||||
groupParentCalcHeight (chart, childrenList) {
|
||||
// console.log(chart, childrenList)
|
||||
setTimeout(() => {
|
||||
const parent = this.copyDataList.find(chartitem => chartitem.id === chart.parent.id)
|
||||
const children = parent.children.find(item => item.id === chart.id)
|
||||
@@ -192,6 +191,26 @@ export default {
|
||||
setTimeout(() => {
|
||||
this.gridLayoutShow = true
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.copyDataList.forEach(item => {
|
||||
// if (item.type === 95) {
|
||||
// console.log(item.h, item.name)
|
||||
// item.children.forEach(children => {
|
||||
// console.log(children.name, children.h, children.y)
|
||||
// })
|
||||
// let parentH = 1.5
|
||||
// parentH += getGroupHeight(item.children)
|
||||
// if (parentH !== item.h) {
|
||||
// item.h = parentH
|
||||
// }
|
||||
// }
|
||||
if (item.type === 94 && !item.firstShow) {
|
||||
item.firstShow = true
|
||||
this.copyDataList = [...this.copyDataList]
|
||||
this.emitter.emit('groupParentCalcHeight', { chart: item, childrenList: this.copyDataList })
|
||||
}
|
||||
})
|
||||
}, 200)
|
||||
this.gridLayoutLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,11 +1,49 @@
|
||||
<template>
|
||||
<div class="entity-filter-case" style="background-color: white; height: 1000px;">
|
||||
<div class="detection-filter-case">
|
||||
<template v-for="(filter, index) in filterData" :key="index">
|
||||
<div class="detection-filter">
|
||||
<div class="filter__header" @click="filter.collapse = !filter.collapse">
|
||||
<i class="el-icon-arrow-right" :class="{ 'arrow-rotate': !filter.collapse }"></i>
|
||||
<span>{{filter.title}}</span>
|
||||
</div>
|
||||
<el-collapse-transition>
|
||||
<div class="filter__body" v-show="!filter.collapse">
|
||||
<el-checkbox-group v-model="filter.value">
|
||||
<template v-for="d in filter.data" :key="d.value">
|
||||
<el-checkbox :label="d.value">
|
||||
<div class="filter__checkbox-label">
|
||||
<span class="severity-color-block" v-if="filter.column === 'eventSeverity'" :style="`background-color: ${eventSeverityColor[d.value]}`"></span>
|
||||
<span :style="filter.column === 'eventSeverity' ? 'padding-left: 10px' : ''">{{d.label}}</span>
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</template>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DetectionFilter'
|
||||
name: 'DetectionFilter',
|
||||
props: {
|
||||
filterData: Array,
|
||||
q: String,
|
||||
timeFilter: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
eventSeverityColor: {
|
||||
critical: '#D84C4C',
|
||||
high: '#FE845D',
|
||||
medium: '#FFB65A',
|
||||
low: '#FFD82D',
|
||||
info: '#D1BD50'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="explorer-search">
|
||||
<div class="explorer-search explorer-search--show-list">
|
||||
<div class="explorer-search__input-case explorer-search__input-case--question-mark-in-line">
|
||||
<div class="explorer-search__input">
|
||||
<advanced-search
|
||||
@@ -28,9 +28,29 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
columnList: [],
|
||||
operatorList: [],
|
||||
connectionList: []
|
||||
columnList: [
|
||||
{
|
||||
name: 'event_severity',
|
||||
type: 'string',
|
||||
label: 'Event severity'
|
||||
},
|
||||
{
|
||||
name: 'security_type',
|
||||
type: 'string',
|
||||
label: 'Security type'
|
||||
}
|
||||
],
|
||||
operatorList: ['=', '!=', '>', '<', '>=', '<='/*, 'IN', 'NOT IN', 'LIKE', 'NOT LIKE'*/],
|
||||
connectionList: [
|
||||
{
|
||||
value: 'AND',
|
||||
label: 'AND'
|
||||
},
|
||||
{
|
||||
value: 'OR',
|
||||
label: 'OR'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
:time-filter="timeFilter"
|
||||
@filter="filter"
|
||||
></detection-filter>
|
||||
|
||||
<div class="detection__list">
|
||||
<div class="detection__list-statistics"></div>
|
||||
<detection-list
|
||||
@@ -78,7 +79,101 @@ export default {
|
||||
total: 0
|
||||
},
|
||||
q: '',
|
||||
filterData: [],
|
||||
filterData: [
|
||||
{
|
||||
title: this.$t('detections.eventSeverity'),
|
||||
column: 'eventSeverity',
|
||||
collapse: false,
|
||||
value: [], // value之间是or的关系
|
||||
data: [
|
||||
{
|
||||
label: 'Critical',
|
||||
value: 'critical',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: 'High',
|
||||
value: 'high',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: 'Medium',
|
||||
value: 'medium',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: 'Low',
|
||||
value: 'low',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: 'Info',
|
||||
value: 'info',
|
||||
count: 50
|
||||
}
|
||||
] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
|
||||
},
|
||||
{
|
||||
title: this.$t('detections.securityType'),
|
||||
collapse: false,
|
||||
value: [],
|
||||
data: [
|
||||
{
|
||||
label: 'Command and control',
|
||||
value: 'command and control',
|
||||
count: 50
|
||||
}
|
||||
] // 从接口动态获取
|
||||
},
|
||||
{
|
||||
title: this.$t('detections.victimIp'),
|
||||
collapse: false,
|
||||
value: [],
|
||||
data: [
|
||||
{
|
||||
label: '1.2.6.8',
|
||||
value: '1.2.6.8',
|
||||
count: 50
|
||||
}
|
||||
] // 从接口动态获取
|
||||
},
|
||||
{
|
||||
title: this.$t('detections.victimLocation'),
|
||||
collapse: false,
|
||||
value: [],
|
||||
data: [
|
||||
{
|
||||
label: 'China',
|
||||
value: 'china',
|
||||
count: 50
|
||||
}
|
||||
] // 从接口动态获取
|
||||
},
|
||||
{
|
||||
title: this.$t('detections.offenderIp'),
|
||||
collapse: false,
|
||||
value: [],
|
||||
data: [
|
||||
{
|
||||
label: '1.2.6.8',
|
||||
value: '1.2.6.8',
|
||||
count: 50
|
||||
}
|
||||
] // 从接口动态获取
|
||||
},
|
||||
{
|
||||
title: this.$t('detections.offenderLocation'),
|
||||
collapse: false,
|
||||
value: [],
|
||||
data: [
|
||||
{
|
||||
label: 'China',
|
||||
value: 'china',
|
||||
count: 50
|
||||
}
|
||||
] // 从接口动态获取
|
||||
}
|
||||
],
|
||||
listData: [],
|
||||
listLoading: false
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user