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

CN-1221: 实体列表增加score展示、优化事件展示

Browse Source
This commit is contained in:
刘洪洪
2023-08-10 11:08:21 +08:00
parent b6525a6182
commit 0e565ddfe2
10 changed files with 113 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/views/entityExplorer/entityList/Row.vue
View File

@@ -132,6 +132,32 @@
</div>
</div>
</div>
<!--score分数-->
<div class="basic-info__item" style="display: flex;align-items: center;">
<i class="cn-icon cn-icon-Score"></i>
<div style="position: relative;">
<div class="row-item-label" v-if="!loadingNetworkQuality">
<span class="row-item-label">{{ $t('network.score') }}&nbsp;:&nbsp;&nbsp;</span>
<span class="row-item-value">{{ score }}</span>
</div>
<loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
</div>
</div>
<!--事件数量，即Performance和security事件总和-->
<div class="basic-info__item" style="position: relative">
<div v-if="eventNum>0 && !loadingEvent" style="display: flex;align-items: center;">
<i class="cn-icon cn-icon-Event1"></i>
<div class="row-item-label">
<span class="row-item-label">{{ $t('dnsInsight.event') }}&nbsp;:&nbsp;&nbsp;</span>
<span class="row-item-value">{{ eventNum }}</span>
</div>
</div>
<loading :loading="loadingEvent" size="small" style="width: 90px"></loading>
</div>
</div>
</div>
</div>
@@ -176,7 +202,8 @@ export default {
return {
loading: false,
isCollapse: true, // 是否是折叠状态
levelTwoTags: []
levelTwoTags: [],
loadingNetworkQuality: false // 分数的loading
}
},
computed: {

2
src/views/entityExplorer/entityList/detailOverview/App.vue
View File

@@ -135,7 +135,7 @@
</div>
<div class="overview-item">
<div class="overview__title">{{$t('overall.alert')}}</div>
<div class="overview__title">{{$t('overall.performanceEvents')}}</div>
<div class="overview__content overview__content-loading">
<loading :loading="loadingAlert" size="small" inner-style="left: 10rem"></loading>
<div class="overview__row" v-if="performanceData.length === 0">

2
src/views/entityExplorer/entityList/detailOverview/Domain.vue
View File

@@ -140,7 +140,7 @@
</div>
<div class="overview-item">
<div class="overview__title">{{$t('overall.alert')}}</div>
<div class="overview__title">{{$t('overall.performanceEvents')}}</div>
<div class="overview__content overview__content-loading">
<loading :loading="loadingAlert" size="small" inner-style="left: 10rem"></loading>
<div class="overview__row" v-if="performanceData.length === 0">

2
src/views/entityExplorer/entityList/detailOverview/Ip.vue
View File

@@ -172,7 +172,7 @@
</div>
<div class="overview-item">
<div class="overview__title">{{$t('overall.alert')}}</div>
<div class="overview__title">{{$t('overall.performanceEvents')}}</div>
<div class="overview__content overview__content-loading">
<loading :loading="loadingAlert" size="small" inner-style="left: 10rem"></loading>
<div class="overview__row" v-if="performanceData.length === 0">

58
src/views/entityExplorer/entityList/entityListMixin.js
View File

@@ -7,6 +7,7 @@ import { riskLevelMapping, unitTypes } from '@/utils/constants'
import { getSecond } from '@/utils/date-util'
import { valueToRangeValue } from '@/utils/unit-convert'
import { shallowRef } from 'vue'
import { computeScore } from '@/utils/tools'
export default {
props: {
@@ -21,7 +22,14 @@ export default {
chartOption: null,
unitTypes,
valueToRangeValue,
echartsArray: []
echartsArray: [],
loadingNetworkQuality: false,
score: '-', // 网络质量评分
scoreUrl: '', // 网络质量评分url
eventNum: 0, // 性能事件和安全事件数量之和
loadingEvent: false, // event的loading
performanceEventUrl: '', // 性能事件接口url
securityEventUrl: '' // 安全事件接口url
}
},
computed: {
@@ -244,24 +252,64 @@ export default {
if (this.entity.entityType) {
switch (this.entity.entityType) {
case 'ip': {
// this.trafficUrl = api.entityIpDetailTraffic
this.scoreUrl = api.entity.entityList.ipPerformance
this.trafficUrl = api.entity.entityList.ipThroughput
this.securityEventUrl = api.entity.entityList.ipSecurity
this.performanceEventUrl = api.entity.entityList.ipEventPerformance
break
}
case 'domain': {
// this.trafficUrl = api.entityDomainDetailTraffic
this.scoreUrl = api.entity.entityList.domainPerformance
this.trafficUrl = api.entity.entityList.domainThroughput
this.securityEventUrl = api.entity.entityList.domainSecurity
this.performanceEventUrl = api.entity.entityList.domainEventPerformance
break
}
case 'app': {
// this.trafficUrl = api.entityAppDetailTraffic
this.scoreUrl = api.entity.entityList.appPerformance
this.trafficUrl = api.entity.entityList.appThroughput
this.securityEventUrl = api.entity.entityList.appSecurity
this.performanceEventUrl = api.entity.entityList.appEventPerformance
break
}
default:
break
}
}
},
/** 获取网络评分 */
queryNetworkQuantity () {
this.loadingNetworkQuality = true
get(this.scoreUrl, this.getQueryParams()).then(response => {
if (response.code === 200) {
const data = {
establishLatencyMs: response.data.result.establishLatencyValue || null,
httpResponseLatency: response.data.result.httpResponseLatencyValue || null,
sslConLatency: response.data.result.sslConLatencyValue || null,
tcpLostlenPercent: response.data.result.sequenceGapLossPercentValue || null,
pktRetransPercent: response.data.result.pktRetransPercentValue || null
}
this.score = computeScore(data)
}
}).finally(() => {
this.loadingNetworkQuality = false
})
},
/** 获取事件数量 */
queryEventNum () {
this.loadingEvent = true
const performance = get(this.performanceEventUrl, this.getQueryParams())
const security = get(this.securityEventUrl, this.getQueryParams())
this.eventNum = 0
Promise.all([performance, security]).then(response => {
this.eventNum = response[0].data.result.length + response[1].data.result.length
}).catch(e => {
this.eventNum = 0
}).finally(() => {
this.loadingEvent = false
})
}
},
watch: {
@@ -283,6 +331,8 @@ export default {
this.querySecurity()
this.queryEntityDetailTraffic()
this.queryPerformance()
this.queryNetworkQuantity()
this.queryEventNum()
})
},
beforeUnmount () {