From c1c6a9760bdb25ba975ea8ab6aea8b0ca80a31a4 Mon Sep 17 00:00:00 2001 From: "@changcode" Date: Wed, 18 May 2022 14:21:39 +0800 Subject: [PATCH] =?UTF-8?q?CN-563=20feat:=20=E5=AE=9E=E4=BD=93=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E9=A1=B5loading=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/entityExplorer/entity-filter.scss | 2 +- .../entityList/detail-overview.scss | 41 ++++++- src/mixins/relatedServer.js | 4 + .../entityList/detailOverview/App.vue | 50 +++++--- .../entityList/detailOverview/Domain.vue | 52 ++++++--- .../entityList/detailOverview/Ip.vue | 59 ++++++---- .../detailOverview/entityDetailMixin.js | 109 +++++++++++++++--- 7 files changed, 241 insertions(+), 76 deletions(-) diff --git a/src/assets/css/components/views/entityExplorer/entity-filter.scss b/src/assets/css/components/views/entityExplorer/entity-filter.scss index f498ccde..1a2d38c6 100644 --- a/src/assets/css/components/views/entityExplorer/entity-filter.scss +++ b/src/assets/css/components/views/entityExplorer/entity-filter.scss @@ -40,7 +40,7 @@ transition: all linear .2s; .filter__row-popover { display: flex; - line-height: 24px; + line-height: 26px; } &:hover, &.filter__row--active { diff --git a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss index 9d7b0d52..884e4dfa 100644 --- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss +++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss @@ -35,6 +35,15 @@ color: #333; font-size: 14px; } + .overview__content-loading.overview__content { + position: relative; + .chart__loading i.el-icon-loading { + left: calc(50% - 428px); + } + } + .overview__content-loading-net.overview__content { + position: relative; + } .overview__content { display: flex; flex-direction: column; @@ -50,8 +59,11 @@ &.overview__row--small-font { font-size: 12px; } - .show-more { + .show-more.show-more-disabled { color: #8FA1BE; + } + .show-more { + color: #3976CB; cursor: pointer; } &.overview__row--single-value { @@ -86,8 +98,20 @@ border-radius: 2px; color: white; - &.alert-level-tag--high { - background-color: #ED907B; + &.alert-level-tag--high.critical { + background-color: #D84C4C; + } + &.alert-level-tag--high.high { + background-color: #FF9A79; + } + &.alert-level-tag--high.info { + background-color: #D1BD50; + } + &.alert-level-tag--high.medium { + background-color: #FFB65A; + } + &.alert-level-tag--high.low { + background-color: #FFD82D; } &.alert-level-tag--middle { background-color: #FFAB66; @@ -143,6 +167,9 @@ .overview__tags.domain__tags { flex-direction: column; width: 70%; + .overview__domain-tabs-loading.overview__domain-tabs { + position: relative; + } .overview__domain-tabs { display: flex; margin: 0 0 8px 0; @@ -226,7 +253,13 @@ .overview__tags { display: flex; - + .overview__tag-loading.overview__tag { + position: relative; + .chart__loading { + top: 0; + left: 0; + } + } .overview__tag { display: flex; padding: 6px 15px; diff --git a/src/mixins/relatedServer.js b/src/mixins/relatedServer.js index c9235627..52c618fd 100644 --- a/src/mixins/relatedServer.js +++ b/src/mixins/relatedServer.js @@ -16,21 +16,25 @@ export default { methods: { // 请求数据 relationshipUrlOne => 路由 refOne => ref getRelatedServerDataOne (relationshipUrlOne, refOne) { + this.loadingRelationshipOne = true get(relationshipUrlOne, this.getQueryParams()).then(response => { if (response.code === 200) { const relationshipDataOne = response.data.result // 将请求数据 传入方法中 this.relatedServerWidth(relationshipDataOne, refOne, 1) } + this.loadingRelationshipOne = false }) }, getRelatedServerDataTwo (relationshipUrlTow, refTow) { + this.loadingRelationshipTwo = true get(relationshipUrlTow, this.getQueryParams()).then(response => { if (response.code === 200) { const relationshipDataTwo = response.data.result // 将请求数据 传入方法中 this.relatedServerWidth(relationshipDataTwo, refTow, 2) } + this.loadingRelationshipTwo = false }) }, // data => 数据， value => ref diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue index 37eeba22..21b0c55b 100644 --- a/src/views/entityExplorer/entityList/detailOverview/App.vue +++ b/src/views/entityExplorer/entityList/detailOverview/App.vue @@ -26,7 +26,8 @@
{{$t('overall.traffic')}}
-
+
+
{{$t('overall.peak')}}
{{unitConvert(entityData.max, unitTypes.byte).join(' ')}}/s
@@ -42,7 +43,7 @@
{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps
- +
@@ -50,7 +51,7 @@
{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps
- +
@@ -62,7 +63,8 @@
{{$t('overall.relationship')}}
-
+
+
{{relationshipDataOne.length}} @@ -81,7 +83,8 @@
-
+
+
{{relationshipDataTwo.length}} @@ -105,7 +108,8 @@
{{$t('overall.networkQuality')}}
-
+
+
{{$t('entities.accessLink')}}
-
+
+ {{$t('entities.outLinkTrafficPercentage')}} {{entityData.linkOutId ? entityData.linkOutId : '-'}}, {{$t('entities.percentage')}} {{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') : '-'}}
-
+
+ {{$t('entities.inLinkTrafficPercentage')}} {{entityData.linkInId ? entityData.linkInId : '-'}}, {{$t('entities.percentage')}} @@ -138,7 +144,8 @@
{{$t('overall.alert')}}
-
+
+
{{$t('entities.recentAlert')}}
{{entityData.performanceNum}}
@@ -146,19 +153,20 @@
{{dateFormatByAppearance(performance.startTime) || '-'}}
-
{{performance.eventSeverity}}
+
{{performance.eventSeverity}}
{{performance.eventType}}
-
-
{{$t('overall.showMore')}}>>
+
+
{{$t('overall.showMore')}}>>
{{$t('entities.securityEvents')}}
-
+
+
{{$t('entities.recentSecurity')}}
{{entityData.securityNum}}
@@ -166,13 +174,13 @@
{{dateFormatByAppearance(security.startTime) || '-'}}
-
{{security.eventSeverity}}
+
{{security.eventSeverity}}
{{security.securityType}}
-
-
{{$t('overall.showMore')}}>>
+
+
{{$t('overall.showMore')}}>>
@@ -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 } } }, diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue index 248b431c..df0bd878 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue @@ -30,7 +30,8 @@
{{$t('overall.traffic')}}
-
+
+
{{$t('overall.peak')}}
{{unitConvert(entityData.max, unitTypes.byte).join(' ')}}/s
@@ -46,7 +47,7 @@
{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps
- +
@@ -54,7 +55,7 @@
{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps
- +
@@ -64,10 +65,11 @@
{{$t('overall.relationship')}}
-
+
-
+
+
{{relationshipDataOne.length}} {{$t('entities.relatedApp')}} @@ -86,7 +88,8 @@
-
+
+
{{relationshipDataTwo.length}} {{$t('entities.relatedServerIp')}} @@ -109,7 +112,8 @@
{{$t('overall.networkQuality')}}
-
+
+
{{$t('entities.accessLink')}}
-
+
+ {{$t('entities.outLinkTrafficPercentage')}} {{entityData.linkOutId ? entityData.linkOutId : '-'}}, {{$t('entities.percentage')}} {{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') : '-'}}
-
+
+ {{$t('entities.inLinkTrafficPercentage')}} {{entityData.linkInId ? entityData.linkInId : '-'}}, {{$t('entities.percentage')}} @@ -142,7 +148,8 @@
{{$t('overall.alert')}}
-
+
+
{{$t('entities.recentAlert')}}
{{entityData.performanceNum}}
@@ -150,19 +157,20 @@
{{dateFormatByAppearance(performance.startTime) || '-'}}
-
{{performance.eventSeverity}}
+
{{performance.eventSeverity}}
{{performance.eventType}}
-
-
{{$t('overall.showMore')}}>>
+
+
{{$t('overall.showMore')}}>>
{{$t('entities.securityEvents')}}
-
+
+
{{$t('entities.recentSecurity')}}
{{entityData.securityNum}}
@@ -170,13 +178,13 @@
{{dateFormatByAppearance(getMillisecond(security.startTime)) || '-'}}
-
{{security.eventSeverity}}
+
{{security.eventSeverity}}
{{security.securityType}}
-
-
{{$t('overall.showMore')}}>>
+
+
{{$t('overall.showMore')}}>>
@@ -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 } } }, diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue index 65f6306d..bc19eb98 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue @@ -14,7 +14,8 @@
{{$t('overall.dnsServerInfo')}}
-
+
+
{{$t('overall.dnsServerInfo.role')}}
{{$_.get(entityData, 'dnsServerRole') || '-'}}
@@ -52,7 +53,8 @@
{{$t('overall.traffic')}}
-
+
+
{{$t('overall.peak')}}
{{unitConvert(entityData.max, unitTypes.byte).join(' ')}}/s
@@ -68,7 +70,7 @@
{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps
- +
@@ -76,7 +78,7 @@
{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps
- +
@@ -88,7 +90,8 @@
{{$t('overall.relationship')}}
-
+
+
{{relationshipDataOne.length}} @@ -107,7 +110,8 @@
-
+
+
{{relationshipDataTwo.length}} @@ -131,7 +135,8 @@
{{$t('overall.networkQuality')}}
-
+
+
{{$t('entities.accessLink')}}
-
+
+ {{$t('entities.outLinkTrafficPercentage')}} {{entityData.linkOutId ? entityData.linkOutId : '-'}},  {{$t('entities.percentage')}} {{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') : '-'}}
-
+
+ {{$t('entities.inLinkTrafficPercentage')}} {{entityData.linkInId ? entityData.linkInId : '-'}},  {{$t('entities.percentage')}} @@ -164,7 +171,8 @@
{{$t('overall.alert')}}
-
+
+
{{$t('entities.recentAlert')}}
{{entityData.performanceNum}}
@@ -172,19 +180,20 @@
{{dateFormatByAppearance(performance.startTime) || '-'}}
-
{{performance.eventSeverity}}
+
{{performance.eventSeverity}}
{{performance.eventType}}
-
-
{{$t('overall.showMore')}}>>
+
+
{{$t('overall.showMore')}}>>
{{$t('entities.securityEvents')}}
-
+
+
{{$t('entities.recentSecurity')}}
{{entityData.securityNum}}
@@ -192,13 +201,13 @@
{{dateFormatByAppearance(security.startTime) || '-'}}
-
{{security.eventSeverity}}
+
{{security.eventSeverity}}
{{security.securityType}}
-
-
{{$t('overall.showMore')}}>>
+
+
{{$t('overall.showMore')}}>>
@@ -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) diff --git a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js index 4aa042dd..ed6a2de2 100644 --- a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js +++ b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js @@ -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(() => {