CN-302 Detection-列表
This commit is contained in:
hanyuxia
@@ -21,6 +21,8 @@
|
||||
@import 'views/entityExplorer/entityList/detail-overview';
|
||||
@import './views/detections/detections';
|
||||
@import './views/detections/detection-filter';
|
||||
@import './views/detections/detection-list/detection-list';
|
||||
@import './views/detections/detection-list/row';
|
||||
@import './views/charts/panel';
|
||||
@import 'views/charts/chartIpOpenPortBar';
|
||||
@import './views/charts/chartTable';
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
.detection-list {
|
||||
width: 100%;
|
||||
height: calc(100% - 42px);
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.detection__loading {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
left: calc(50% - 15px);
|
||||
top: calc(50% - 15px);
|
||||
font-size: 30px;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.detection-list__content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: inherit;
|
||||
|
||||
.detection-list--block {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: -webkit-flex;
|
||||
justify-content: flex-start;
|
||||
border-radius: 2px;
|
||||
width: calc(100% - 10px);
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.detection-list--list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.cn-detection__shadow {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.detection__pagination{
|
||||
position: absolute;
|
||||
bottom: 9px;
|
||||
height: 40px;
|
||||
width: calc(100% - 538px);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
.cn-detection--list {
|
||||
display: flex;
|
||||
.cn-detection__collapse {
|
||||
margin-bottom: 1px;
|
||||
padding-top: 30px;
|
||||
width: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
background-color: #F3F7FA;
|
||||
|
||||
span {
|
||||
transform: rotate(0);
|
||||
transition: all linear .2s;
|
||||
padding-top: 0;
|
||||
|
||||
&.reg-down {
|
||||
padding-top: 2px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
span:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cn-icon-arrow-right {
|
||||
color: #ADBCCA;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.cn-detection__case {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 9px 0;
|
||||
margin-bottom: 1px;
|
||||
background-color: white;
|
||||
|
||||
.cn-detection__icon {
|
||||
margin-left: 13px;
|
||||
margin-right: 13px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
width: 5px;
|
||||
height: 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.cn-detection__row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.cn-detection__header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
font-size: 16px;
|
||||
padding-bottom: 3px;
|
||||
color: #333333;
|
||||
align-items: center;
|
||||
i {
|
||||
color:#7b8fa2;
|
||||
margin-right: 5px;
|
||||
font-size:18px;
|
||||
}
|
||||
.line {
|
||||
color:#da5656;
|
||||
margin-left:12px;
|
||||
font-size: xx-small;
|
||||
font-weight: bold;
|
||||
}
|
||||
.circle {
|
||||
width:10px;
|
||||
height:10px;
|
||||
border:2px solid #da5656;
|
||||
border-radius: 10px;
|
||||
margin-top: 4px;
|
||||
margin-right:12px;
|
||||
}
|
||||
}
|
||||
.cn-detection__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.body__basic-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.basic-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.basic-info__item {
|
||||
padding-right: 40px;
|
||||
i {
|
||||
padding-right: 6px;
|
||||
color: #8FA1BE;
|
||||
font-size: 14px;
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
span:first-of-type {
|
||||
color: #999;
|
||||
}
|
||||
span:last-of-type {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.show-detail {
|
||||
flex-shrink: 0;
|
||||
padding: 0 30px;
|
||||
font-size: 12px;
|
||||
color: #3976CB;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cn-detection__detail-overview {
|
||||
flex-basis: 100%;
|
||||
padding: 0 10px;
|
||||
|
||||
.el-divider {
|
||||
background-color: #EFF2F5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -78,6 +78,7 @@ export const api = {
|
||||
detectionAttackType:'/interface/detection/filter/attackType',
|
||||
detectionOffenderIp:'/interface/detection/filter/offenderIp',
|
||||
detectionSeverity:'/interface/detection/filter/severity',
|
||||
detectionListBasic:'/interface/detection/list/basic'
|
||||
}
|
||||
|
||||
/* panel */
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="entity-list" id="detectionList">
|
||||
<div class="entity__loading" style="background: #eff2f5;opacity: .6;" v-show="loading">
|
||||
<div class="detection-list" id="detectionList">
|
||||
<div class="detection__loading" style="background: #eff2f5;opacity: .6;" v-show="loading">
|
||||
<i class="el-icon-loading"></i>
|
||||
</div>
|
||||
<div class="entity-list__content">
|
||||
<div class="entity-list--list">
|
||||
<div class="detection-list__content">
|
||||
<div class="detection-list--list">
|
||||
<div class="no-data" v-if="noData">No data</div>
|
||||
<div v-if="!isCollapse" @click="collapse" class="cn-entity__shadow"></div>
|
||||
<div v-if="!isCollapse" @click="collapse" class="cn-detection__shadow"></div>
|
||||
<detection-row
|
||||
v-for="(data, index) in listData"
|
||||
:detection="data"
|
||||
|
||||
@@ -1,37 +1,54 @@
|
||||
<template>
|
||||
<div class="cn-entity--list" :style="{zIndex: !isCollapse ? 1 : 'unset'}">
|
||||
<div class="cn-detection--list" :style="{zIndex: !isCollapse ? 1 : 'unset'}">
|
||||
<!-- 左侧下拉按钮 -->
|
||||
<div class="cn-entity__collapse">
|
||||
<div class="cn-detection__collapse">
|
||||
<span @click="switchCollapse" :class="{'reg-down': !isCollapse}"><i class="cn-icon cn-icon-arrow-right"></i></span>
|
||||
</div>
|
||||
<div class="cn-entity__case">
|
||||
<div class="cn-entity__icon"><i class="el-icon-search"></i></div>
|
||||
<div class="cn-entity__row">
|
||||
<div class="cn-entity__header">3.4.5.6</div>
|
||||
<div class="cn-entity__body">
|
||||
<div class="cn-detection__case">
|
||||
<div class="cn-detection__icon" :style="`background-color: ${eventSeverityColor[detection.eventSecurity]}`">
|
||||
|
||||
</div>
|
||||
<div class="cn-detection__row">
|
||||
<div class="cn-detection__header">
|
||||
<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="body__basic-info">
|
||||
<div class="basic-info">
|
||||
<div class="basic-info__item">
|
||||
<i class="cn-icon cn-icon-country"></i>
|
||||
<span>{{$t('overall.country')}} : </span>
|
||||
<span>hehe</span>
|
||||
<i class="cn-icon cn-icon-severity-level"></i>
|
||||
<span>{{$t('detection.list.eventSecurity')}} : </span>
|
||||
<span>{{detection.eventSecurity}}</span>
|
||||
</div>
|
||||
<div class="basic-info__item">
|
||||
<i class="cn-icon cn-icon-position"></i>
|
||||
<span>{{$t('overall.region')}} : </span>
|
||||
<span>xixi</span>
|
||||
<i class="cn-icon cn-icon-event-type"></i>
|
||||
<span>{{$t('detection.list.securityType')}} : </span>
|
||||
<span>{{detection.securityType}}</span>
|
||||
</div>
|
||||
<div class="basic-info__item" v-if="detection.malwareName && detection.malwareName.length > 0 ">
|
||||
<i class="cn-icon cn-icon-trojan"></i>
|
||||
<span>{{$t('detection.list.malwareName')}} : </span>
|
||||
<span>{{detection.malwareName}}</span>
|
||||
</div>
|
||||
<div class="basic-info__item" v-if="detection.cryptominingPool && detection.cryptominingPool.length > 0 ">
|
||||
<i class="cn-icon cn-icon-mining-pool"></i>
|
||||
<span>{{$t('detection.list.cryptominingPool')}} : </span>
|
||||
<span>{{detection.cryptominingPool}}</span>
|
||||
</div>
|
||||
<div class="basic-info__item">
|
||||
<i class="cn-icon cn-icon-cloud"></i>
|
||||
<span>{{$t('entities.asn')}} : </span>
|
||||
<span>heihei</span>
|
||||
<i class="cn-icon cn-icon-time2"></i>
|
||||
<span>{{$t('detection.list.startTime')}} : </span>
|
||||
<span>{{ dayJs.tz(detection.startTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-collapse-transition>
|
||||
<div class="cn-entity__detail-overview" v-if="!isCollapse">
|
||||
<div class="cn-detection__detail-overview" v-if="!isCollapse">
|
||||
<el-divider></el-divider>
|
||||
<detection-overview
|
||||
:entity="entityData"
|
||||
@@ -52,12 +69,20 @@ export default {
|
||||
},
|
||||
props: {
|
||||
index: Number,
|
||||
timeFilter: Object
|
||||
timeFilter: Object,
|
||||
detection: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
entityData: [],
|
||||
isCollapse: true // 是否是折叠状态
|
||||
isCollapse: true, // 是否是折叠状态
|
||||
eventSeverityColor: {
|
||||
critical: '#D84C4C',
|
||||
high: '#FE845D',
|
||||
medium: '#FFB65A',
|
||||
low: '#FFD82D',
|
||||
info: '#D1BD50'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
<div class="chart-header" >
|
||||
<div class="chart-header__title">{{$t('detection.activeAttacker')}}</div>
|
||||
</div>
|
||||
<div class="chart-content" id="detectionActiveAttacker">
|
||||
<div class="chart-content" style="" id="detectionActiveAttacker">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -57,7 +57,7 @@
|
||||
></detection-list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity__pagination" style="position: absolute; bottom: 0; width: 100%;">
|
||||
<div class="entity__pagination" >
|
||||
<Pagination
|
||||
ref="pagination"
|
||||
:page-obj="pageObj"
|
||||
@@ -526,6 +526,76 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
initListData(){
|
||||
const queryParams = {
|
||||
...this.timeFilter,
|
||||
q:this.q,
|
||||
}
|
||||
get(api.detectionListBasic, queryParams).then(response => {
|
||||
response = {
|
||||
"code": 200,
|
||||
"success": true,
|
||||
"msg": "OK",
|
||||
"data": {
|
||||
"resultType": "table",
|
||||
"result": [
|
||||
{
|
||||
"eventId": 1212,
|
||||
"securityType": "ddos",
|
||||
"offenderIp": "1.1.1.1",
|
||||
"victimIp": "2.2.2.2",
|
||||
"eventSecurity": "critical",
|
||||
"malwareName": "the great wall",
|
||||
"cryptominingPool": "a",
|
||||
"startTime": 978456923589
|
||||
},
|
||||
{
|
||||
"eventId": 1212,
|
||||
"securityType": "ddos",
|
||||
"offenderIp": "1.1.1.1",
|
||||
"victimIp": "2.2.2.2",
|
||||
"eventSecurity": "high",
|
||||
"cryptominingPool": "a",
|
||||
"startTime": 1111111111
|
||||
},
|
||||
{
|
||||
"eventId": 1212,
|
||||
"securityType": "ddos",
|
||||
"offenderIp": "1.1.1.1",
|
||||
"victimIp": "2.2.2.2",
|
||||
"eventSecurity": "low",
|
||||
"malwareName": "the great wall",
|
||||
"startTime": 1111111111
|
||||
},
|
||||
{
|
||||
"eventId": 1212,
|
||||
"securityType": "ddos",
|
||||
"offenderIp": "1.1.1.1",
|
||||
"victimIp": "2.2.2.2",
|
||||
"eventSecurity": "medium",
|
||||
"malwareName": "the great wall",
|
||||
"cryptominingPool": "a",
|
||||
"startTime": 1111111111
|
||||
},
|
||||
{
|
||||
"eventId": 1212,
|
||||
"securityType": "ddos",
|
||||
"offenderIp": "1.1.1.1",
|
||||
"victimIp": "2.2.2.2",
|
||||
"eventSecurity": "info",
|
||||
"malwareName": "the great wall",
|
||||
"cryptominingPool": "a",
|
||||
"startTime": 1111111111
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
if (response.code === 200) {
|
||||
this.listData = response.data.result
|
||||
}
|
||||
})
|
||||
},
|
||||
timeRefreshChange () {
|
||||
if (!this.$refs.dateTimeRange.isCustom) {
|
||||
const value = this.timeFilter.dateRangeValue
|
||||
@@ -582,6 +652,7 @@ export default {
|
||||
this.initSeverityPerData()
|
||||
this.initCategoryPerData()
|
||||
this.initActiveAttackData()
|
||||
this.initListData()
|
||||
},
|
||||
watch: {
|
||||
timeFilter (n) {
|
||||
|
||||
@@ -209,9 +209,8 @@ export const activeAttackBar = {
|
||||
grid: {
|
||||
top: 20,
|
||||
left: 10,
|
||||
right: 25,
|
||||
bottom: 20,
|
||||
containLabel: true
|
||||
right: 70,
|
||||
bottom: 20
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
@@ -226,6 +225,7 @@ export const activeAttackBar = {
|
||||
},
|
||||
series: [{
|
||||
barWidth: 5,
|
||||
barMaxHeight:20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function(params) {
|
||||
|
||||
Reference in New Issue
Block a user