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 2d918e63..252b67dc 100644 --- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss +++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss @@ -122,6 +122,95 @@ } } + .overview__content.domain__content { + .overview__tags.domain__tags { + flex-direction: column; + align-items: baseline; + max-width: 1500px; + .overview__domain-tabs { + display: flex; + margin: 0 0 8px 0; + .overview__domain-tab { + display: flex; + } + .overview__tag.domain__tag { + display: unset; + min-width: 154px; + padding: 6px 15px; + margin: 0 12px 0 0; + text-align: center; + height: 32px; + line-height: 1.5; + background-color: #EFF6FE; + font-size: 14px; + border-radius: 4px; + } + .overview__tag.domain__tag-list { + display: unset; + padding: 6px 15px; + margin: 4px 12px 0 0; + text-align: center; + height: 24px; + min-width: 125px; + line-height: 0.9; + background-color: #EFF6FE; + font-family: Roboto-Regular; + color: #3976CB; + font-size: 14px; + font-weight: 400; + border-radius: 15px; + position: relative; + } + .overview__domain-btn { + background-color: #EFF6FE; + width: 44px; + height: 24px; + border-radius: 15px; + color: #3976CB; + text-align: center; + margin: 4px 12px 0 0; + padding: 6px 15px; + line-height: .3; + cursor: pointer; + } + .overview__domain-more-tabs.show-more-app { + position: absolute; + top: 176px; + z-index: 1; + } + .overview__domain-more-tabs.show-more-ip { + position: absolute; + top: 215px; + z-index: 1; + } + .overview__domain-more-tabs { + min-width: 110px; + max-height: 180px; + overflow: auto; + background: #FFFFFF; + box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05); + border-radius: 2px; + padding: 5px; + .domain-more-tab { + height: 24px; + padding: 6px 12px; + text-align: center; + font-family: Roboto-Regular; + font-size: 12px; + color: #666666; + letter-spacing: 0; + line-height: 12px; + font-weight: 400; + width: 84px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } + } + } + } + .overview__tags { display: flex; diff --git a/src/mixins/relatedServer.js b/src/mixins/relatedServer.js new file mode 100644 index 00000000..fb07d95c --- /dev/null +++ b/src/mixins/relatedServer.js @@ -0,0 +1,63 @@ +import { get } from '@/utils/http' +export default { + data () { + return { + relationDomainData: [], + relationAppData: [], + showMoreApp: false, + showMoreDomain: false, + moreDataDomain: [], + moreDataApp: [], + showDomainMore: false, + showAppMore: false + } + }, + methods: { + getRelatedServerData () { + get(this.relatedServerDomainUrl, this.getQueryParams()).then(response => { + if (response.code === 200) { + this.relationDomainData = response.data.result + this.relatedServerWidth(this.relationDomainData, 'relatedDomain') + } + }) + get(this.relatedServerAppUrl, this.getQueryParams()).then(response => { + if (response.code === 200) { + this.relationAppData = response.data.result + this.relatedServerWidth(this.relationAppData, 'relatedServerApp') + } + }) + }, + relatedServerWidth (data, value) { + const relatedServerWidth = this.$refs.relationship.offsetWidth + let sum = 0 + let flag = true + data.map((item, index) => { + if (this.$refs[value + index]) { + const width = this.$refs[value + index].offsetWidth + 22 + if (width) { + sum += width + if (flag && relatedServerWidth < sum) { + flag = false + this.showDomainMore = true + } + } + item.show = flag + } + return item + }) + console.log(data) + }, + more (data, showMore, index) { + if (index === 1) { + this.moreDataDomain = data + this.showMoreDomain = !showMore + this.showMoreApp = false + } + if (index === 2) { + this.moreDataApp = data + this.showMoreApp = !showMore + this.showMoreDomain = false + } + } + } +} diff --git a/src/utils/api.js b/src/utils/api.js index 1650dc65..75160ba7 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -47,6 +47,8 @@ export const api = { entityAppDetailLinkOut: '/interface/entity/detail/overview/app/linkOut', entityAppDetailAlert: '/interface/entity/detail/overview/app/alert', entityAppDetailSecurity: '/interface/entity/detail/overview/app/security', + entityAppRelatedServerDomain: '/interface/entity/detail/overview/app/relatedDomain', + entityAppRelatedServerIp: '/interface/entity/detail/overview/app/relatedServerIp', // domain detail entityDomainDetailBasic: '/interface/entity/detail/overview/domain/basic', entityDomainDetailTraffic: '/interface/entity/detail/overview/domain/traffic', @@ -56,6 +58,8 @@ export const api = { entityDomainDetailLinkOut: '/interface/entity/detail/overview/domain/linkOut', entityDomainDetailAlert: '/interface/entity/detail/overview/domain/alert', entityDomainDetailSecurity: '/interface/entity/detail/overview/domain/security', + entityDomainRelatedServerIp: '/interface/entity/detail/overview/domain/relatedServerIp', + entityDomainRelatedServerApp: '/interface/entity/detail/overview/domain/relatedApp', // ip detail entityIpDetailTraffic: '/interface/entity/detail/overview/ip/traffic', entityIpDetailTrafficMap: '/interface/entity/detail/ip/trafficMap', @@ -66,7 +70,9 @@ export const api = { entityIpDetailLinkIn: '/interface/entity/detail/overview/ip/linkIn', entityIpDetailLinkOut: '/interface/entity/detail/overview/ip/linkOut', entityIpDetailAlert: '/interface/entity/detail/overview/ip/alert', - entityIpDetailSecurity: '/interface/entity/detail/overview/ip/security' + entityIpDetailSecurity: '/interface/entity/detail/overview/ip/security', + entityIpRelatedServerDomain: '/interface/entity/detail/overview/ip/relatedDomain', + entityIpRelatedServerApp: '/interface/entity/detail/overview/ip/relatedApp' } /* panel */ diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue index bd743668..d1c7435e 100644 --- a/src/views/entityExplorer/entityList/detailOverview/App.vue +++ b/src/views/entityExplorer/entityList/detailOverview/App.vue @@ -50,18 +50,60 @@
{{$t('overall.relationship')}}
-
-
-
- {{entityData.domainCount}} - {{$t('entities.relatedDomains')}} +
+
+
+
+
+ {{entityData.domainCount}} + {{$t('entities.relatedDomains')}} +
+
+ {{item.domain}} +
+
+
+
...
+
+
+ {{item.domain}} +
+
+
-
- {{entityData.ipCount}} - {{$t('entities.relatedServerIp')}} +
+
+
+ {{entityData.ipCount}} + {{$t('entities.relatedServerIp')}} +
+
+ {{item.ip}} +
+
+
+
...
+
+
+ {{item.ip}} +
+
+
+ + + + + + + + + + + +
{{$t('overall.networkQuality')}}
@@ -173,6 +215,8 @@ export default { alertUrl: api.entityAppDetailAlert, securityUrl: api.entityAppDetailSecurity, trafficUrlMap: api.entityAppDetailTrafficMap, + relatedServerDomainUrl: api.entityAppRelatedServerDomain, + relatedServerIpUrl: api.entityAppRelatedServerIp, chartData: null, listMode: 'list', singleValues: { @@ -219,7 +263,15 @@ export default { } ], chartDatas: [null, null, null, null, null] - } + }, + relationDomainData: [], + relationIpData: [], + showMoreIp: false, + showMoreDomain: false, + moreDataDomain: [], + moreDataIp: [], + showDomainMore: false, + showIpMore: false } }, methods: { @@ -241,6 +293,48 @@ export default { this.chartData = response.data.result } }) + }, + getRelatedServerData () { + get(this.relatedServerDomainUrl, this.getQueryParams()).then(response => { + console.log(response) + this.relationDomainData = response.data.result + this.relatedServerWidth(this.relationDomainData, 'relatedDomain') + }) + get(this.relatedServerIpUrl, this.getQueryParams()).then(response => { + this.relationIpData = response.data.result + this.relatedServerWidth(this.relationIpData, 'relatedServerIp') + }) + }, + relatedServerWidth (data, value) { + const relatedServerWidth = this.$refs.relationship.offsetWidth + let sum = 0 + let flag = true + data.map((item, index) => { + if (this.$refs[value + index]) { + const width = this.$refs[value + index].offsetWidth + 22 + if (width) { + sum += width + if (flag && relatedServerWidth < sum) { + flag = false + this.showDomainMore = true + } + } + item.show = flag + } + return item + }) + }, + more (data, showMore, index) { + if (index === 1) { + this.moreDataDomain = data + this.showMoreDomain = !showMore + this.showMoreIp = false + } + if (index === 2) { + this.moreDataIp = data + this.showMoreIp = !showMore + this.showMoreDomain = false + } } }, watch: { @@ -257,7 +351,12 @@ export default { } }, mounted () { - this.$nextTick(() => { setTimeout(() => { this.chartGetMap() }, 250) }) + this.$nextTick(() => { + setTimeout(() => { + this.chartGetMap() + this.getRelatedServerData() + }, 250) + }) }, setup (props) { return { diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue index ca055306..264544bb 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue @@ -58,15 +58,45 @@
{{$t('overall.relationship')}}
-
-
-
- {{entityData.appCount}} - {{$t('entities.relatedApp')}} +
+
+
+
+
+ {{entityData.appCount}} + {{$t('entities.relatedApp')}} +
+
+ {{item.appName}} +
+
+
+
...
+
+
+ {{item.appName}} +
+
+
-
- {{entityData.ipCount}} - {{$t('entities.relatedServerIp')}} +
+
+
+ {{entityData.ipCount}} + {{$t('entities.relatedServerIp')}} +
+
+ {{item.ip}} +
+
+
+
...
+
+
+ {{item.ip}} +
+
+
@@ -159,7 +189,7 @@ import entityDetailMixin from './entityDetailMixin' import { unitTypes } from '@/utils/constants' import unitConvert from '@/utils/unit-convert' import Chart from '@/views/charts/Chart' -import _ from 'lodash' +import _, { lowerFirst } from 'lodash' import { get } from '@/utils/http' export default { name: 'Domain', @@ -180,6 +210,8 @@ export default { alertUrl: api.entityDomainDetailAlert, securityUrl: api.entityDomainDetailSecurity, trafficUrlMap: api.entityDomainDetailTrafficMap, + relatedServerIpUrl: api.entityDomainRelatedServerIp, + relatedServerAppUrl: api.entityDomainRelatedServerApp, chartData: null, listMode: 'list', singleValues: { @@ -226,7 +258,15 @@ export default { } ], chartDatas: [null, null, null, null, null] - } + }, + relationAppData: [], + relationIpData: [], + showMoreIp: false, + showMoreApp: false, + moreDataApp: [], + moreDataIp: [], + showAppMore: false, + showIpMore: false } }, methods: { @@ -243,11 +283,54 @@ export default { this.entityData.ipCount = result.ipCount }, chartGetMap () { - get((this.trafficUrlMap), this.getQueryParams()).then(response => { + get(this.trafficUrlMap, this.getQueryParams()).then(response => { if (response.code === 200) { this.chartData = response.data.result } }) + }, + getRelatedServerData () { + get(this.relatedServerAppUrl, this.getQueryParams()).then(response => { + console.log(response) + this.relationAppData = response.data.result + this.relatedServerWidth(this.relationAppData, 'relatedApp') + }) + get(this.relatedServerIpUrl, this.getQueryParams()).then(response => { + this.relationIpData = response.data.result + this.relatedServerWidth(this.relationIpData, 'relatedServerIp') + }) + }, + relatedServerWidth (data, value) { + const relatedServerWidth = this.$refs.relationship.offsetWidth + let sum = 0 + let flag = true + data.map((item, index) => { + if (this.$refs[value + index]) { + const width = this.$refs[value + index].offsetWidth + 22 + if (width) { + sum += width + if (flag && relatedServerWidth < sum) { + flag = false + this.showAppMore = true + } + } + item.show = flag + } + return item + }) + console.log(data) + }, + more (data, showMore, index) { + if (index === 1) { + this.moreDataApp = data + this.showMoreApp = !showMore + this.showMoreIp = false + } + if (index === 2) { + this.moreDataIp = data + this.showMoreIp = !showMore + this.showMoreApp = false + } } }, watch: { @@ -264,7 +347,12 @@ export default { } }, mounted () { - this.$nextTick(() => { setTimeout(() => { this.chartGetMap()}, 250)}) + this.$nextTick(() => { + setTimeout(() => { + this.chartGetMap() + this.getRelatedServerData() + }, 250) + }) }, setup (props) { const entityCopy = { diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue index 425c3b54..5907e60a 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue @@ -42,18 +42,60 @@
{{$t('overall.relationship')}}
-
-
-
- {{entityData.domainCount}} - {{$t('entities.relatedDomains')}} +
+
+
+
+
+ {{entityData.domainCount}} + {{$t('entities.relatedDomains')}} +
+
+ {{item.domain}} +
+
+
+
...
+
+
+ {{item.domain}} +
+
+
-
- {{entityData.appCount}} - {{$t('entities.relatedServerIp')}} +
+
+
+ {{entityData.appCount}} + {{$t('entities.relatedServerIp')}} +
+
+ {{item.appName}} +
+
+
+
...
+
+
+ {{item.appName}} +
+
+
+ + + + + + + + + + + +
{{$t('overall.networkQuality')}}
@@ -165,6 +207,8 @@ export default { linkOutUrl: api.entityIpDetailLinkOut, alertUrl: api.entityIpDetailAlert, securityUrl: api.entityIpDetailSecurity, + relatedServerDomainUrl: api.entityIpRelatedServerDomain, + relatedServerAppUrl: api.entityIpRelatedServerApp, listMode: 'list', chartData: null, singleValues: { @@ -211,7 +255,15 @@ export default { } ], chartDatas: [null, null, null, null, null] - } + }, + relationDomainData: [], + relationAppData: [], + showMoreApp: false, + showMoreDomain: false, + moreDataDomain: [], + moreDataApp: [], + showDomainMore: false, + showAppMore: false } }, methods: { @@ -234,6 +286,51 @@ export default { this.chartData = response.data.result } }) + }, + getRelatedServerData () { + get(this.relatedServerDomainUrl, this.getQueryParams()).then(response => { + if (response.code === 200) { + this.relationDomainData = response.data.result + this.relatedServerWidth(this.relationDomainData, 'relatedDomain') + } + }) + get(this.relatedServerAppUrl, this.getQueryParams()).then(response => { + if (response.code === 200) { + this.relationAppData = response.data.result + this.relatedServerWidth(this.relationAppData, 'relatedServerApp') + } + }) + }, + relatedServerWidth (data, value) { + const relatedServerWidth = this.$refs.relationship.offsetWidth + let sum = 0 + let flag = true + data.map((item, index) => { + if (this.$refs[value + index]) { + const width = this.$refs[value + index].offsetWidth + 22 + if (width) { + sum += width + if (flag && relatedServerWidth < sum) { + flag = false + this.showDomainMore = true + } + } + item.show = flag + } + return item + }) + }, + more (data, showMore, index) { + if (index === 1) { + this.moreDataDomain = data + this.showMoreDomain = !showMore + this.showMoreApp = false + } + if (index === 2) { + this.moreDataApp = data + this.showMoreApp = !showMore + this.showMoreDomain = false + } } }, watch: { @@ -250,7 +347,12 @@ export default { } }, mounted () { - this.$nextTick(() => { setTimeout(() => { this.chartGetMap() }, 250) }) + this.$nextTick(() => { + setTimeout(() => { + this.chartGetMap() + this.getRelatedServerData() + }, 250) + }) }, setup (props) { const entityCopy = {