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

CN-563 feat: 实体列表页loading优化

Browse Source
This commit is contained in:
@changcode
2022-05-18 14:21:39 +08:00
parent 1033eb9ddc
commit c1c6a9760b
7 changed files with 241 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,7 +26,8 @@
</div>
<div class="overview-item">
<div class="overview__title">{{$t('overall.traffic')}}</div>
<div class="overview__content">
<div class="overview__content overview__content-loading">
<loading :loading="loadingTraffic"></loading>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">{{unitConvert(entityData.max, unitTypes.byte).join(' ')}}/s</div>
@@ -42,7 +43,7 @@
<div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
<!-- 曲线-->
<div class="row__content-loading">
<loading :loading-app="loadingApp"></loading>
<loading :loading="loadingApp"></loading>
<div class="row__charts" :id="`entityDetailSend${entityData.appName}`" ></div>
</div>
</div>
@@ -50,7 +51,7 @@
<div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
<!-- 曲线-->
<div class="row__content-loading">
<loading :loading-app="loadingApp"></loading>
<loading :loading="loadingApp"></loading>
<div class="row__charts" :id="`entityDetailReceived${entityData.appName}`" ></div>
</div>
</div>
@@ -62,7 +63,8 @@
<div class="overview__title">{{$t('overall.relationship')}}</div>
<div class="overview__content domain__content">
<div class="overview__tags domain__tags" ref="relationship">
<div class="overview__domain-tabs">
<div class="overview__domain-tabs overview__domain-tabs-loading">
<loading :loading="loadingRelationshipOne"></loading>
<div class="overview__domain-tab">
<div class="overview__tag domain__tag">
<span class="tag__value">{{relationshipDataOne.length}}</span>
@@ -81,7 +83,8 @@
</div>
</div>
</div>
<div class="overview__domain-tabs">
<div class="overview__domain-tabs overview__domain-tabs-loading">
<loading :loading="loadingRelationshipTwo"></loading>
<div class="overview__domain-tab">
<div class="overview__tag domain__tag">
<span class="tag__value">{{relationshipDataTwo.length}}</span>
@@ -105,7 +108,8 @@
</div>
<div class="overview-item">
<div class="overview__title">{{$t('overall.networkQuality')}}</div>
<div class="overview__content">
<div class="overview__content overview__content-loading-net">
<loading :loading="loadingNetworkQuality"></loading>
<div class="overview__row overview__row--single-value">
<chart-single-value
v-for="(chartInfo, i) in singleValues.chartInfos"
@@ -121,13 +125,15 @@
<div class="overview__title">{{$t('entities.accessLink')}}</div>
<div class="overview__content">
<div class="overview__tags">
<div class="overview__tag">
<div class="overview__tag overview__tag-loading">
<loading :loading="loadingOut"></loading>
<span class="tag__desc">{{$t('entities.outLinkTrafficPercentage')}}</span>
<span class="tag__value">{{entityData.linkOutId ? entityData.linkOutId : '-'}},</span>
<span class="tag__desc">{{$t('entities.percentage')}}</span>
<span class="tag__value">{{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') : '-'}}</span>
</div>
<div class="overview__tag">
<div class="overview__tag overview__tag-loading">
<loading :loading="loadingIn"></loading>
<span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span>
<span class="tag__value">{{entityData.linkInId ? entityData.linkInId : '-'}},</span>
<span class="tag__desc">{{$t('entities.percentage')}}</span>
@@ -138,7 +144,8 @@
</div>
<div class="overview-item">
<div class="overview__title">{{$t('overall.alert')}}</div>
<div class="overview__content">
<div class="overview__content overview__content-loading">
<loading :loading="loadingAlert"></loading>
<div class="overview__row">
<div class="row__label">{{$t('entities.recentAlert')}}</div>
<div class="row__content">{{entityData.performanceNum}}</div>
@@ -146,19 +153,20 @@
<div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
<div class="row__label row__label--width160">{{dateFormatByAppearance(performance.startTime) || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{performance.eventSeverity}}</div>
<div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
<div>{{performance.eventType}}</div>
</div>
<div class="row__desc"></div>
</div>
<div class="overview__row overview__row--small-font" v-if="entityData.performanceList && entityData.performanceList.length > 3">
<div class="show-more">{{$t('overall.showMore')}}>></div>
<div class="overview__row overview__row--small-font" v-if="performanceData && performanceData.length > 5">
<div class="show-more" :class="{'show-more-disabled': performanceData.length === entityData.performanceList.length}" @click="performanceShowMore(10)">{{$t('overall.showMore')}}>></div>
</div>
</div>
</div>
<div class="overview-item">
<div class="overview__title">{{$t('entities.securityEvents')}}</div>
<div class="overview__content">
<div class="overview__content overview__content-loading">
<loading :loading="loadingSecurityEvents"></loading>
<div class="overview__row">
<div class="row__label">{{$t('entities.recentSecurity')}}</div>
<div class="row__content">{{entityData.securityNum}}</div>
@@ -166,13 +174,13 @@
<div class="overview__row overview__row--small-font" v-for="(security, index) in entityData.securityList" :key="index">
<div class="row__label row__label--width160">{{dateFormatByAppearance(security.startTime) || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{security.eventSeverity}}</div>
<div class="alert-level-tag alert-level-tag--high" :class="iconClass(security)">{{security.eventSeverity}}</div>
<div>{{security.securityType}}</div>
</div>
<div class="row__desc"></div>
</div>
<div class="overview__row overview__row--small-font" v-if="entityData.securityList && entityData.securityList.length > 3">
<div class="show-more">{{$t('overall.showMore')}}>></div>
<div class="overview__row overview__row--small-font" v-if="securityData && securityData.length > 5">
<div class="show-more" :class="{'show-more-disabled': securityData.length === entityData.securityList.length}" @click="securityShowMore(10)">{{$t('overall.showMore')}}>></div>
</div>
</div>
</div>
@@ -279,7 +287,15 @@ export default {
}
],
chartDatas: [null, null, null, null, null],
loadingApp: false
loadingApp: false,
loadingTraffic: false,
loadingRelationshipOne: false,
loadingRelationshipTwo: false,
loadingNetworkQuality: false,
loadingOut: false,
loadingIn: false,
loadingAlert: false,
loadingSecurityEvents: false
}
}
},

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

@@ -30,7 +30,8 @@
</div>
<div class="overview-item">
<div class="overview__title">{{$t('overall.traffic')}}</div>
<div class="overview__content">
<div class="overview__content overview__content-loading">
<loading :loading="loadingTraffic"></loading>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">{{unitConvert(entityData.max, unitTypes.byte).join(' ')}}/s</div>
@@ -46,7 +47,7 @@
<div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
<!-- 曲线-->
<div class="row__content-loading">
<loading :loading-domian="loadingDomain"></loading>
<loading :loading="loadingDomain"></loading>
<div class="row__charts" :id="`entityDetailSend${entityData.domainName}`" ></div>
</div>
</div>
@@ -54,7 +55,7 @@
<div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
<!-- 曲线-->
<div class="row__content-loading">
<loading :loading-domain="loadingDomian"></loading>
<loading :loading="loadingDomain"></loading>
<div class="row__charts" :id="`entityDetailReceived${entityData.domainName}`" ></div>
</div>
</div>
@@ -64,10 +65,11 @@
</div>
<div class="overview-item">
<div class="overview__title">{{$t('overall.relationship')}}</div>
<div class="overview__content domain__content">
<div class="overview__content domain__content overview__content-loading">
<div class="overview__tags domain__tags" ref="relationship">
<div class="overview__domain-tabs">
<div class="overview__domain-tab">
<div class="overview__domain-tab overview__domain-tabs-loading">
<loading :loading="loadingRelationshipOne"></loading>
<div class="overview__tag domain__tag">
<span class="tag__value">{{relationshipDataOne.length}}</span>
<span class="tag__desc">{{$t('entities.relatedApp')}}</span>
@@ -86,7 +88,8 @@
</div>
</div>
<div class="overview__domain-tabs">
<div class="overview__domain-tab">
<div class="overview__domain-tab overview__domain-tabs-loading">
<loading :loading="loadingRelationshipTwo"></loading>
<div class="overview__tag domain__tag">
<span class="tag__value">{{relationshipDataTwo.length}}</span>
<span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
@@ -109,7 +112,8 @@
</div>
<div class="overview-item">
<div class="overview__title">{{$t('overall.networkQuality')}}</div>
<div class="overview__content">
<div class="overview__content overview__content-loading-net">
<loading :loading="loadingNetworkQuality"></loading>
<div class="overview__row overview__row--single-value">
<chart-single-value
v-for="(chartInfo, i) in singleValues.chartInfos"
@@ -125,13 +129,15 @@
<div class="overview__title">{{$t('entities.accessLink')}}</div>
<div class="overview__content">
<div class="overview__tags">
<div class="overview__tag">
<div class="overview__tag overview__tag-loading">
<loading :loading="loadingOut"></loading>
<span class="tag__desc">{{$t('entities.outLinkTrafficPercentage')}}</span>
<span class="tag__value">{{entityData.linkOutId ? entityData.linkOutId : '-'}},</span>
<span class="tag__desc">{{$t('entities.percentage')}}</span>
<span class="tag__value">{{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') : '-'}}</span>
</div>
<div class="overview__tag">
<div class="overview__tag overview__tag-loading">
<loading :loading="loadingIn"></loading>
<span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span>
<span class="tag__value">{{entityData.linkInId ? entityData.linkInId : '-'}},</span>
<span class="tag__desc">{{$t('entities.percentage')}}</span>
@@ -142,7 +148,8 @@
</div>
<div class="overview-item">
<div class="overview__title">{{$t('overall.alert')}}</div>
<div class="overview__content">
<div class="overview__content overview__content-loading">
<loading :loading="loadingAlert"></loading>
<div class="overview__row">
<div class="row__label">{{$t('entities.recentAlert')}}</div>
<div class="row__content">{{entityData.performanceNum}}</div>
@@ -150,19 +157,20 @@
<div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
<div class="row__label row__label--width160">{{dateFormatByAppearance(performance.startTime) || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{performance.eventSeverity}}</div>
<div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
<div>{{performance.eventType}}</div>
</div>
<div class="row__desc"></div>
</div>
<div class="overview__row overview__row--small-font" v-if="entityData.performanceList && entityData.performanceList.length > 3">
<div class="show-more">{{$t('overall.showMore')}}>></div>
<div class="overview__row overview__row--small-font" v-if="performanceData && performanceData.length > 5">
<div class="show-more" :class="{'show-more-disabled': performanceData.length === entityData.performanceList.length}" @click="performanceShowMore(10)">{{$t('overall.showMore')}}>></div>
</div>
</div>
</div>
<div class="overview-item">
<div class="overview__title">{{$t('entities.securityEvents')}}</div>
<div class="overview__content">
<div class="overview__content overview__content-loading">
<loading :loading="loadingSecurityEvents"></loading>
<div class="overview__row">
<div class="row__label">{{$t('entities.recentSecurity')}}</div>
<div class="row__content">{{entityData.securityNum}}</div>
@@ -170,13 +178,13 @@
<div class="overview__row overview__row--small-font" v-for="(security, i) in entityData.securityList" :key="i">
<div class="row__label row__label--width160">{{dateFormatByAppearance(getMillisecond(security.startTime)) || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{security.eventSeverity}}</div>
<div class="alert-level-tag alert-level-tag--high" :class="iconClass(security)">{{security.eventSeverity}}</div>
<div>{{security.securityType}}</div>
</div>
<div class="row__desc"></div>
</div>
<div class="overview__row overview__row--small-font" v-if="entityData.securityList && entityData.securityList.length > 3">
<div class="show-more">{{$t('overall.showMore')}}>></div>
<div class="overview__row overview__row--small-font" v-if="securityData && securityData.length > 5">
<div class="show-more" :class="{'show-more-disabled': securityData.length === entityData.securityList.length}" @click="securityShowMore(10)">{{$t('overall.showMore')}}>></div>
</div>
</div>
</div>
@@ -284,7 +292,15 @@ export default {
}
],
chartDatas: [null, null, null, null, null],
loadingDomain: false
loadingDomain: false,
loadingTraffic: false,
loadingRelationshipOne: false,
loadingRelationshipTwo: false,
loadingNetworkQuality: false,
loadingOut: false,
loadingIn: false,
loadingAlert: false,
loadingSecurityEvents: false
}
}
},

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

@@ -14,7 +14,8 @@
</div>
<div class="overview-item" v-if="entityData.dnsServerRole">
<div class="overview__title">{{$t('overall.dnsServerInfo')}}</div>
<div class="overview__content">
<div class="overview__content overview__content-loading">
<loading :loading="loadingDns"></loading>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.role')}}</div>
<div class="row__content">{{$_.get(entityData, 'dnsServerRole') || '-'}}</div>
@@ -52,7 +53,8 @@
</div>
<div class="overview-item">
<div class="overview__title">{{$t('overall.traffic')}}</div>
<div class="overview__content">
<div class="overview__content overview__content-loading">
<loading :loading="loadingTraffic"></loading>
<div class="overview__row">
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
<div class="row__content">{{unitConvert(entityData.max, unitTypes.byte).join(' ')}}/s</div>
@@ -68,7 +70,7 @@
<div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
<!-- 曲线-->
<div class="row__content-loading">
<loading :loading-ip="loadingIp"></loading>
<loading :loading="loadingIp"></loading>
<div class="row__charts" :id="`entityDetailSend${entityData.ipAddr}`"></div>
</div>
</div>
@@ -76,7 +78,7 @@
<div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
<!-- 曲线-->
<div class="row__content-loading">
<loading :loading-ip="loadingIp"></loading>
<loading :loading="loadingIp"></loading>
<div class="row__charts" :id="`entityDetailReceived${entityData.ipAddr}`"></div>
</div>
</div>
@@ -88,7 +90,8 @@
<div class="overview__title">{{$t('overall.relationship')}}</div>
<div class="overview__content domain__content">
<div class="overview__tags domain__tags" ref="relationship">
<div class="overview__domain-tabs">
<div class="overview__domain-tabs overview__domain-tabs-loading">
<loading :loading="loadingRelationshipOne"></loading>
<div class="overview__domain-tab">
<div class="overview__tag domain__tag">
<span class="tag__value">{{relationshipDataOne.length}}</span>
@@ -107,7 +110,8 @@
</div>
</div>
</div>
<div class="overview__domain-tabs">
<div class="overview__domain-tabs overview__domain-tabs-loading">
<loading :loading="loadingRelationshipTwo"></loading>
<div class="overview__domain-tab">
<div class="overview__tag domain__tag">
<span class="tag__value">{{relationshipDataTwo.length}}</span>
@@ -131,7 +135,8 @@
</div>
<div class="overview-item">
<div class="overview__title">{{$t('overall.networkQuality')}}</div>
<div class="overview__content">
<div class="overview__content overview__content-loading-net">
<loading :loading="loadingNetworkQuality"></loading>
<div class="overview__row overview__row--single-value">
<chart-single-value
v-for="(chartInfo, i) in singleValues.chartInfos"
@@ -147,13 +152,15 @@
<div class="overview__title">{{$t('entities.accessLink')}}</div>
<div class="overview__content">
<div class="overview__tags">
<div class="overview__tag">
<div class="overview__tag overview__tag-loading">
<loading :loading="loadingOut"></loading>
<span class="tag__desc">{{$t('entities.outLinkTrafficPercentage')}}</span>
<span class="tag__value">{{entityData.linkOutId ? entityData.linkOutId : '-'}},&nbsp;</span>
<span class="tag__desc">{{$t('entities.percentage')}}</span>
<span class="tag__value">{{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') : '-'}}</span>
</div>
<div class="overview__tag">
<div class="overview__tag overview__tag-loading">
<loading :loading="loadingIn"></loading>
<span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span>
<span class="tag__value">{{entityData.linkInId ? entityData.linkInId : '-'}},&nbsp;</span>
<span class="tag__desc">{{$t('entities.percentage')}}</span>
@@ -164,7 +171,8 @@
</div>
<div class="overview-item">
<div class="overview__title">{{$t('overall.alert')}}</div>
<div class="overview__content">
<div class="overview__content overview__content-loading">
<loading :loading="loadingAlert"></loading>
<div class="overview__row">
<div class="row__label">{{$t('entities.recentAlert')}}</div>
<div class="row__content">{{entityData.performanceNum}}</div>
@@ -172,19 +180,20 @@
<div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
<div class="row__label row__label--width160">{{dateFormatByAppearance(performance.startTime) || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{performance.eventSeverity}}</div>
<div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
<div>{{performance.eventType}}</div>
</div>
<div class="row__desc"></div>
</div>
<div class="overview__row overview__row--small-font" v-if="entityData.performanceList && entityData.performanceList.length > 3">
<div class="show-more">{{$t('overall.showMore')}}>></div>
<div class="overview__row overview__row--small-font" v-if="performanceData && performanceData.length > 5">
<div class="show-more" :class="{'show-more-disabled': performanceData.length === entityData.performanceList.length}" @click="performanceShowMore(10)">{{$t('overall.showMore')}}>></div>
</div>
</div>
</div>
<div class="overview-item">
<div class="overview__title">{{$t('entities.securityEvents')}}</div>
<div class="overview__content">
<div class="overview__content overview__content-loading">
<loading :loading="loadingSecurityEvents"></loading>
<div class="overview__row">
<div class="row__label">{{$t('entities.recentSecurity')}}</div>
<div class="row__content">{{entityData.securityNum}}</div>
@@ -192,13 +201,13 @@
<div class="overview__row overview__row--small-font" v-for="(security, index) in entityData.securityList" :key="index">
<div class="row__label row__label--width160">{{dateFormatByAppearance(security.startTime) || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{security.eventSeverity}}</div>
<div class="alert-level-tag alert-level-tag--high" :class="iconClass(security)">{{security.eventSeverity}}</div>
<div>{{security.securityType}}</div>
</div>
<div class="row__desc"></div>
</div>
<div class="overview__row overview__row--small-font" v-if="entityData.securityList && entityData.securityList.length > 3">
<div class="show-more">{{$t('overall.showMore')}}>></div>
<div class="overview__row overview__row--small-font" v-if="securityData && securityData.length > 5">
<div class="show-more" :class="{'show-more-disabled': securityData.length === entityData.securityList.length}" @click="securityShowMore(10)">{{$t('overall.showMore')}}>></div>
</div>
</div>
</div>
@@ -308,7 +317,17 @@ export default {
chartDatas: [null, null, null, null, null]
},
timer: null,
loadingIp: false
loadingIp: false,
loadingDns: false,
loading: false,
loadingTraffic: false,
loadingRelationshipOne: false,
loadingRelationshipTwo: false,
loadingNetworkQuality: false,
loadingOut: false,
loadingIn: false,
loadingAlert: false,
loadingSecurityEvents: false
}
},
computed: {
@@ -318,10 +337,10 @@ export default {
if (entityData.ipLocationCountry) {
result += `${entityData.ipLocationCountry},`
}
if (entityData.ipLocationCountry) {
if (entityData.ipLocationProvince) {
result += `${entityData.ipLocationProvince},`
}
if (entityData.ipLocationCountry) {
if (entityData.ipLocationCity) {
result += `${entityData.ipLocationCity},`
}
result = result.substr(0, result.length - 1)

109
src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
View File

@@ -9,10 +9,7 @@ import { shallowRef } from 'vue'
export default {
props: {
entity: Object,
timeFilter: Object,
loadingIp: Boolean,
loadingApp: Boolean,
loadingDomain: Boolean
timeFilter: Object
},
data () {
return {
@@ -31,7 +28,14 @@ export default {
},
chartOption: null,
queryParams: {},
echartsArray: []
echartsArray: [],
performanceData: [],
securityData: [],
showMore: {
securityPageSize: 5,
performancePageSize: 5,
pageNo: 1
}
}
},
computed: {
@@ -61,6 +65,36 @@ export default {
})
return (m && m.name) || level
}
},
iconClass () {
return function (entityData) {
let className
switch (entityData.eventSeverity) {
case ('critical'): {
className = 'critical'
break
}
case ('high'): {
className = 'high'
break
}
case ('info'): {
className = 'info'
break
}
case ('medium'): {
className = 'medium'
break
}
case ('low'): {
className = 'low'
break
}
default:
break
}
return className
}
}
},
methods: {
@@ -72,12 +106,15 @@ export default {
queryEntityDetailTraffic () {
this.sentChart = echarts.init(document.getElementById(`entityDetailSend${this.entityName}`))
this.receivedChart = echarts.init(document.getElementById(`entityDetailReceived${this.entityName}`))
if (this.entityName === 'app') {
if (this.entity.entityType === 'app') {
this.loadingApp = true
} else if (this.entityName === 'ip') {
this.loadingTraffic = true
} else if (this.entity.entityType === 'ip') {
this.loadingIp = true
} else if (this.entityName === 'domain') {
this.loadingTraffic = true
} else if (this.entity.entityType === 'domain') {
this.loadingDomain = true
this.loadingTraffic = true
}
get(this.trafficUrl, this.getQueryParams()).then(response => {
if (response.code === 200 && response.data.result && response.data.result.length > 0) {
@@ -136,20 +173,26 @@ export default {
this.echartsArray.push(shallowRef(this.sentChart), shallowRef(this.receivedChart))
this.sentChart.setOption(this.chartOptionSent)
this.receivedChart.setOption(this.chartOptionReceived)
if (this.entityName === 'app') {
if (this.entity.entityType === 'app') {
this.loadingApp = false
} else if (this.entityName === 'ip') {
this.loadingTraffic = false
} else if (this.entity.entityType === 'ip') {
this.loadingIp = false
} else if (this.entityName === 'domain') {
this.loadingTraffic = false
} else if (this.entity.entityType === 'domain') {
this.loadingDomain = false
this.loadingTraffic = false
}
} else {
if (this.entityName === 'app') {
if (this.entity.entityType === 'app') {
this.loadingApp = false
} else if (this.entityName === 'ip') {
this.loadingTraffic = false
} else if (this.entity.entityType === 'ip') {
this.loadingIp = false
} else if (this.entityName === 'domain') {
this.loadingTraffic = false
} else if (this.entity.entityType === 'domain') {
this.loadingDomain = false
this.loadingTraffic = false
}
}
}).finally(() => {
@@ -173,6 +216,7 @@ export default {
},
queryEntityDetailNetworkQuantity () {
this.loadingNetworkQuality = true
if (this.networkQuantityUrl) {
get(this.networkQuantityUrl, this.getQueryParams()).then(response => {
if (response.code === 200) {
@@ -227,11 +271,13 @@ export default {
}
this.singleValues.chartDatas.splice(4, 1, pktRetransPercent)
}
this.loadingNetworkQuality = false
})
}
},
queryEntityDetailLinkInUrl () {
this.loadingIn = true
if (this.linkInUrl) {
get(this.linkInUrl, this.getQueryParams()).then(response => {
if (response.code === 200) {
@@ -252,11 +298,13 @@ export default {
this.entityData.linkInId = maxId
}
}
this.loadingIn = false
})
}
},
queryEntityDetailLinkOutUrl () {
this.loadingOut = true
if (this.linkOutUrl) {
get(this.linkOutUrl, this.getQueryParams()).then(response => {
if (response.code === 200) {
@@ -277,28 +325,49 @@ export default {
this.entityData.linkOutId = maxId
}
}
this.loadingOut = false
})
}
},
queryEntityDetailPerformance () {
this.loadingAlert = true
get(this.performanceUrl, this.getQueryParams()).then(response => {
if (response.code === 200) {
this.entityData.performanceNum = response.data.result.length
this.entityData.performanceList = response.data.result
this.performanceData = response.data.result
this.entityData.performanceList = this.getTargetPageData(1, this.showMore.performancePageSize, this.performanceData)
}
this.loadingAlert = false
})
},
queryEntityDetailSecurity () {
this.loadingSecurityEvents = true
get(this.securityUrl, this.getQueryParams()).then(response => {
if (response.code === 200) {
this.entityData.securityNum = response.data.result.length
this.entityData.securityList = response.data.result
this.securityData = response.data.result
this.entityData.securityList = this.getTargetPageData(1, this.showMore.securityPageSize, this.securityData)
}
this.loadingSecurityEvents = false
})
},
performanceShowMore (num) {
this.showMore.performancePageSize += num
this.entityData.performanceList = this.getTargetPageData(this.showMore.pageNo, this.showMore.performancePageSize, this.performanceData)
},
securityShowMore (num) {
this.showMore.securityPageSize += num
this.entityData.securityList = this.getTargetPageData(this.showMore.pageNo, this.showMore.securityPageSize, this.securityData)
},
getTargetPageData (pageNum, pageSize, data) {
return this.$_.slice(data, (pageNum - 1) * pageSize, pageNum * pageSize)
},
queryDnsServerInfo () {
get(this.entityDetectionsIpUrl, this.getQueryParams()).then(response => {
if (response.code === 200) {
@@ -310,10 +379,14 @@ export default {
this.entityData.dotSupport = response.data.result.dotSupport
this.entityData.dnssecSupport = response.data.result.dnssecSupport
}
if (this.entityData.dnsServerRole) {
this.loadingDns = false
}
})
},
queryDnsServerInfoRate () {
this.loading = true
this.detectionChart = echarts.init(document.getElementById(`entityDnsServerInfo${this.entityName}`))
get(this.entityDetectionsIpQueryRateUrl, this.getQueryParams()).then(response => {
if (response.code === 200 && response.data.result && response.data.result.length > 0) {
@@ -343,6 +416,7 @@ export default {
this.echartsArray.push(shallowRef(this.detectionChart))
this.detectionChart.setOption(this.chartDetectionQueryRate)
}
this.loading = false
})
},
@@ -354,6 +428,9 @@ export default {
this.queryEntityDetailLinkOutUrl()
this.queryEntityDetailLinkInUrl()
if (this.entity.entityType === 'ip') {
if (!this.entityData.dnsServerRole) {
this.loadingDns = true
}
this.queryDnsServerInfo()
this.$nextTick(() => {
setTimeout(() => {