CN-304 feat: Entity Explorer--下拉详情-关系调整

2022-02-16 18:19:58 +08:00
parent 9689390af1
commit 5c3655f69d
6 changed files with 480 additions and 33 deletions
--- 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;

--- a/src/mixins/relatedServer.js
+++ 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
+      }
+    }
+  }
+}
--- 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 */
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -50,18 +50,60 @@
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.relationship')}}</div>
-    <div class="overview__content">
-      <div class="overview__tags">
-        <div class="overview__tag">
+    <div class="overview__content domain__content">
+      <div class="overview__tags domain__tags" ref="relationship">
+        <div class="overview__domain-tabs">
+          <div class="overview__domain-tab">
+            <div class="overview__tag domain__tag">
              <span class="tag__value">{{entityData.domainCount}}</span>
              <span class="tag__desc">{{$t('entities.relatedDomains')}}</span>
            </div>
-        <div class="overview__tag">
+            <div class="overview__tag domain__tag-list" :ref="'relatedDomain' + index" v-show="item.show" v-for="(item, index) in relationDomainData" :key="index">
+              <span class="tag__desc">{{item.domain}}</span>
+            </div>
+          </div>
+          <div class="overview__domain-btn" @click="more(relationDomainData, showMoreDomain, 1)" v-if="showDomainMore">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-app" v-if="showMoreDomain">
+              <div class="domain-more-tab" v-for="item in moreDataDomain" :key="item">
+                <span v-if="item.domain" :title="item.domain">{{item.domain}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="overview__domain-tabs">
+          <div class="overview__domain-tab">
+            <div class="overview__tag domain__tag">
              <span class="tag__value">{{entityData.ipCount}}</span>
              <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
            </div>
+            <div class="overview__tag domain__tag-list" :ref="'relatedServerIp' + index" v-show="item.show" v-for="(item, index) in relationIpData" :key="index">
+              <span class="tag__desc">{{item.ip}}</span>
            </div>
          </div>
+          <div class="overview__domain-btn" @click="more(relationIpData, showMoreIp, 2)" v-if="showIpMore">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-ip" v-if="showMoreIp">
+              <div class="domain-more-tab" v-for="item in moreDataIp" :key="item">
+                <span v-if="item.ip" :title="item.ip">{{item.ip}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+<!--    <div class="overview__content">-->
+<!--      <div class="overview__tags">-->
+<!--        <div class="overview__tag">-->
+<!--          <span class="tag__value">{{entityData.domainCount}}</span>-->
+<!--          <span class="tag__desc">{{$t('entities.relatedDomains')}}</span>-->
+<!--        </div>-->
+<!--        <div class="overview__tag">-->
+<!--          <span class="tag__value">{{entityData.ipCount}}</span>-->
+<!--          <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.networkQuality')}}</div>
@@ -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 {
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -58,16 +58,46 @@
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.relationship')}}</div>
-    <div class="overview__content">
-      <div class="overview__tags">
-        <div class="overview__tag">
+    <div class="overview__content domain__content">
+      <div class="overview__tags domain__tags" ref="relationship">
+        <div class="overview__domain-tabs">
+          <div class="overview__domain-tab">
+            <div class="overview__tag domain__tag">
              <span class="tag__value">{{entityData.appCount}}</span>
              <span class="tag__desc">{{$t('entities.relatedApp')}}</span>
            </div>
-        <div class="overview__tag">
+            <div class="overview__tag domain__tag-list" :ref="'relatedApp' + index" v-show="item.show" v-for="(item, index) in relationAppData" :key="index">
+              <span class="tag__desc">{{item.appName}}</span>
+            </div>
+          </div>
+          <div class="overview__domain-btn" @click="more(relationAppData, showMoreApp, 1)" v-if="showAppMore">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-app" v-if="showMoreApp">
+              <div class="domain-more-tab" v-for="item in moreDataApp" :key="item">
+                <span v-if="item.appName" :title="item.appName">{{item.appName}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="overview__domain-tabs">
+          <div class="overview__domain-tab">
+            <div class="overview__tag domain__tag">
              <span class="tag__value">{{entityData.ipCount}}</span>
              <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
            </div>
+            <div class="overview__tag domain__tag-list" :ref="'relatedServerIp' + index" v-show="item.show" v-for="(item, index) in relationIpData" :key="index">
+              <span class="tag__desc">{{item.ip}}</span>
+            </div>
+          </div>
+          <div class="overview__domain-btn" @click="more(relationIpData, showMoreIp, 2)" v-if="showIpMore">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-ip" v-if="showMoreIp">
+              <div class="domain-more-tab" v-for="item in moreDataIp" :key="item">
+                <span v-if="item.ip" :title="item.ip">{{item.ip}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
      </div>
    </div>
  </div>
@@ -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 = {
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -42,18 +42,60 @@
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.relationship')}}</div>
-    <div class="overview__content">
-      <div class="overview__tags">
-        <div class="overview__tag">
+    <div class="overview__content domain__content">
+      <div class="overview__tags domain__tags" ref="relationship">
+        <div class="overview__domain-tabs">
+          <div class="overview__domain-tab">
+            <div class="overview__tag domain__tag">
              <span class="tag__value">{{entityData.domainCount}}</span>
              <span class="tag__desc">{{$t('entities.relatedDomains')}}</span>
            </div>
-        <div class="overview__tag">
+            <div class="overview__tag domain__tag-list" :ref="'relatedDomain' + index" v-show="item.show" v-for="(item, index) in relationDomainData" :key="index">
+              <span class="tag__desc">{{item.domain}}</span>
+            </div>
+          </div>
+          <div class="overview__domain-btn" @click="more(relationDomainData, showMoreDomain, 1)" v-if="showDomainMore">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-app" v-if="showMoreDomain">
+              <div class="domain-more-tab" v-for="item in moreDataDomain" :key="item">
+                <span v-if="item.domain" :title="item.domain">{{item.domain}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="overview__domain-tabs">
+          <div class="overview__domain-tab">
+            <div class="overview__tag domain__tag">
              <span class="tag__value">{{entityData.appCount}}</span>
              <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
            </div>
+            <div class="overview__tag domain__tag-list" :ref="'relatedServerApp' + index" v-show="item.show" v-for="(item, index) in relationAppData" :key="index">
+              <span class="tag__desc">{{item.appName}}</span>
            </div>
          </div>
+          <div class="overview__domain-btn" @click="more(relationAppData, showMoreApp, 2)" v-if="showAppMore">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-ip" v-if="showMoreApp">
+              <div class="domain-more-tab" v-for="item in moreDataApp" :key="item">
+                <span v-if="item.appName" :title="item.appName">{{item.appName}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+<!--    <div class="overview__content">-->
+<!--      <div class="overview__tags">-->
+<!--        <div class="overview__tag">-->
+<!--          <span class="tag__value">{{entityData.domainCount}}</span>-->
+<!--          <span class="tag__desc">{{$t('entities.relatedDomains')}}</span>-->
+<!--        </div>-->
+<!--        <div class="overview__tag">-->
+<!--          <span class="tag__value">{{entityData.appCount}}</span>-->
+<!--          <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.networkQuality')}}</div>
@@ -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 = {