CN-297 feat: detections下拉静态样式
This commit is contained in:
chenjinsong
@@ -47,3 +47,125 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.overview__row-timeline {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 17px;
|
||||
background-color: #F9F9F9;
|
||||
|
||||
.row-timeline {
|
||||
flex: 0 0 110px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.row-timeline__time-info {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
.row-timeline__line {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 1px;
|
||||
margin: 5px 0;
|
||||
background-color: #CBD0D5;
|
||||
overflow: visible;
|
||||
|
||||
.line-point-larger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: #F9F9F9;
|
||||
border: 1px solid #666;
|
||||
|
||||
.line-point {
|
||||
background-color: #666;
|
||||
}
|
||||
}
|
||||
.line-point {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #A0B5CA;
|
||||
}
|
||||
}
|
||||
.row-timeline__card {
|
||||
padding: 8px 4px 0;
|
||||
|
||||
&>div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 122px;
|
||||
width: 102px;
|
||||
padding: 10px;
|
||||
background-color: #EFF2F5;
|
||||
border-radius: 2px;
|
||||
|
||||
.timeline__severity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.timeline__severity--critical i {
|
||||
color: #D84C4C;
|
||||
}
|
||||
&.timeline__severity--high i {
|
||||
color: #FE845D;
|
||||
}
|
||||
&.timeline__severity--medium i {
|
||||
color: #FEB65A;
|
||||
}
|
||||
&.timeline__severity--low i {
|
||||
color: #F6C738;
|
||||
}
|
||||
&.timeline__severity--info i {
|
||||
color: #D1BD50;
|
||||
}
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
span {
|
||||
padding-left: 5px;
|
||||
font-size: 14px;
|
||||
color: #3976CB;
|
||||
}
|
||||
}
|
||||
.timeline__security-type {
|
||||
font-size: 12px;
|
||||
color: #3976CB;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.timeline__start-time {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.row-timeline__foot {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2px 0 10px;
|
||||
|
||||
.detection-ip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 5px;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
|
||||
&.detection-ip__current {
|
||||
color: #D84C4C;
|
||||
}
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -107,6 +107,37 @@
|
||||
<div class="row__content row__content--link">{{$t('detections.viewAllRelated')}}</div>
|
||||
</div>
|
||||
<div class="overview__title">{{$t('detections.relatedDetections')}}</div>
|
||||
<div class="overview__row-timeline">
|
||||
<div class="row-timeline" v-for="event in events" :key="event">
|
||||
<div class="row-timeline__time-info" :style="event.startTime === basicInfo.startTime ? 'color: #333;font-weight: bold;' : ''">{{formatT0(event.startTime)}}</div>
|
||||
<div class="row-timeline__line">
|
||||
<div class="line-point-larger" v-if="event.startTime === basicInfo.startTime">
|
||||
<div class="line-point"></div>
|
||||
</div>
|
||||
<div v-else class="line-point"></div>
|
||||
</div>
|
||||
<div class="row-timeline__card">
|
||||
<div>
|
||||
<div class="timeline__severity timeline__severity--high">
|
||||
<i class="cn-icon cn-icon-alert-level"></i>
|
||||
<span>{{event.eventSeverity}}</span>
|
||||
</div>
|
||||
<div class="timeline__security-type">{{event.securityType}}</div>
|
||||
<div class="timeline__start-time">{{dayJs.tz(getMillisecond(event.startTime)).format('YYYY-MM-DD HH:mm:ss')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-timeline__foot">
|
||||
<div class="detection-ip" :class="{'detection-ip__current': [basicInfo.offenderIp, basicInfo.victimIp].indexOf(event.offenderIp) > -1}">
|
||||
<i class="cn-icon cn-icon-attacker"></i>
|
||||
<span>{{event.offenderIp}}</span>
|
||||
</div>
|
||||
<div class="detection-ip" :class="{'detection-ip__current': [basicInfo.offenderIp, basicInfo.victimIp].indexOf(event.victimIp) > -1}">
|
||||
<i class="cn-icon cn-icon-attacked"></i>
|
||||
<span>{{event.victimIp}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -127,12 +158,19 @@ export default {
|
||||
reference: 'https://attack.mitre.org'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formatT0 () {
|
||||
return function (startTime) {
|
||||
return startTime === this.basicInfo.startTime ? 'T0' : 'T0-10m'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMillisecond,
|
||||
query () {
|
||||
this.basicInfo = {
|
||||
"eventId": 1212,
|
||||
"offenderIp": "2.2.2.2",
|
||||
"offenderIp": "112.2.2.3",
|
||||
"offenderLocationCountry": "China",
|
||||
"offenderLocationProvince": "Hebei",
|
||||
"offenderLocationRegion": "Xingtai",
|
||||
@@ -170,10 +208,10 @@ export default {
|
||||
"startTime": 1645307930
|
||||
},
|
||||
{
|
||||
"eventSeverity": "high",
|
||||
"eventSeverity": "critical",
|
||||
"securityType": "command and control",
|
||||
"offenderIp": "2.2.2.2",
|
||||
"victimIp": "2.2.2.3",
|
||||
"victimIp": "112.2.2.3",
|
||||
"startTime": 1645317930
|
||||
},
|
||||
{
|
||||
@@ -211,20 +249,6 @@ export default {
|
||||
"victimIp": "2.2.2.3",
|
||||
"startTime": 1645367930
|
||||
},
|
||||
{
|
||||
"eventSeverity": "high",
|
||||
"securityType": "command and control",
|
||||
"offenderIp": "2.2.2.2",
|
||||
"victimIp": "2.2.2.3",
|
||||
"startTime": 1645377930
|
||||
},
|
||||
{
|
||||
"eventSeverity": "high",
|
||||
"securityType": "command and control",
|
||||
"offenderIp": "2.2.2.2",
|
||||
"victimIp": "2.2.2.3",
|
||||
"startTime": 1645387930
|
||||
},
|
||||
{
|
||||
"eventSeverity": "high",
|
||||
"securityType": "command and control",
|
||||
|
||||
Reference in New Issue
Block a user