Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev

2022-02-17 18:46:49 +08:00
parent 3a0a343de5 8c0f467ed2
commit 273e16547c
7 changed files with 350 additions and 40 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,114 @@
      }
    }

+    .overview__content.domain__content {
+      .overview__tags.domain__tags.overview__ip-tags,.overview__tags.domain__tags.overview__app-tags {
+        max-width: 1200px;
+        .overview__domain-more-tabs.show-more-app {
+          z-index: 1;
+          position: absolute;
+          right: -92px;
+          top: -180px;
+        }
+        .overview__domain-more-tabs.show-more-ip {
+          z-index: 1;
+          position: absolute;
+          top: -180px;
+          right: -92px;
+        }
+      }
+      .overview__tags.domain__tags.overview__domain-tags {
+        max-width: 1500px;
+        .overview__domain-more-tabs.show-more-app {
+          z-index: 1;
+          position: absolute;
+          top: -180px;
+          right: -92px;
+        }
+        .overview__domain-more-tabs.show-more-ip {
+          z-index: 1;
+          position: absolute;
+          top: -180px;
+          right: -92px;
+        }
+      }
+      .overview__tags.domain__tags {
+        flex-direction: column;
+        align-items: baseline;
+        .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;
+            max-width: 300px;
+            line-height: 0.9;
+            background-color: #EFF6FE;
+            font-family: Roboto-Regular;
+            color: #3976CB;
+            font-size: 14px;
+            font-weight: 400;
+            border-radius: 15px;
+          }
+          .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;
+            position: relative;
+          }
+          .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,80 @@
+import { get } from '@/utils/http'
+export default {
+  data () {
+    return {
+      relationshipDataOne: [], // 数据
+      relationshipDataTow: [], // 数据
+      relationshipShowOne: false, // 控制 ... 的展示隐藏
+      relationshipShowTow: false, // 控制 ... 的展示隐藏
+      relationshipShowMoreOne: false, // 控制弹框的展示隐藏
+      relationshipShowMoreTow: false, // 控制弹框的展示隐藏
+      relationshipMoreDataOne: [], // 展示所有
+      relationshipMoreDataTow: [] // 展示所有
+    }
+  },
+  methods: {
+    // 请求数据 relationshipUrlOne => 路由 refOne => ref
+    getRelatedServerDataOne (relationshipUrlOne, refOne) {
+      get(relationshipUrlOne, this.getQueryParams()).then(response => {
+        if (response.code === 200) {
+          this.relationshipDataOne = response.data.result
+          // 将请求数据 传入方法中
+          this.relatedServerWidth(this.relationshipDataOne, refOne, 1)
+        }
+      })
+    },
+    getRelatedServerDataTow (relationshipUrlTow, refTow) {
+      get(relationshipUrlTow, this.getQueryParams()).then(response => {
+        if (response.code === 200) {
+          this.relationshipDataTow = response.data.result
+          // 将请求数据 传入方法中
+          this.relatedServerWidth(this.relationshipDataTow, refTow, 2)
+        }
+      })
+    },
+    // data => 数据， value => ref
+    relatedServerWidth (data, value, num) {
+      // 最大宽度
+      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 + 35
+          if (width) {
+            sum += width
+            if (flag && sum >= relatedServerWidth && num === 1) {
+              flag = false
+              this.relationshipShowOne = true
+            } else if (flag && sum >= relatedServerWidth && num === 2) {
+              flag = false
+              this.relationshipShowTow = true
+            }
+          }
+          item.show = flag
+        }
+        return item
+      })
+    },
+    // 点击事件 控制弹框的展示隐藏，展示全部的数据
+    more (data, showMore, index) {
+      if (index === 1) {
+        // 展示数据
+        this.relationshipMoreDataOne = data
+        // 弹框的显示隐藏
+        this.relationshipShowMoreOne = !showMore
+        // 展示当前弹框是，隐藏其他弹框
+        this.relationshipShowMoreTow = false
+      }
+      if (index === 2) {
+        // 展示数据
+        this.relationshipMoreDataTow = data
+        // 弹框的显示隐藏
+        this.relationshipShowMoreTow = !showMore
+        // 展示当前弹框是，隐藏其他弹框
+        this.relationshipShowMoreOne = 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/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -190,12 +190,12 @@ export default {
        }
        const requestUrl = url || (chartParams && chartParams.url)
        if (requestUrl) {
-          get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
-            if (this.chartInfo.type === 23 && testData) {
-              response = testData.data
-            } else if (this.chartInfo.type === 24 && testData) {
-              response = testData.data2
-            }
+          get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {1
+            // if (this.chartInfo.type === 23 && testData) {
+            //   response = testData.data
+            // } else if (this.chartInfo.type === 24 && testData) {
+            //   response = testData.data2
+            // }
            if (response.code === 200) {
              if (Array.isArray(response.data.result)) {
                response.data.result.forEach(item => {
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -50,15 +50,45 @@
  </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">
-          <span class="tag__value">{{entityData.domainCount}}</span>
-          <span class="tag__desc">{{$t('entities.relatedDomains')}}</span>
+    <div class="overview__content domain__content">
+      <div class="overview__tags domain__tags overview__app-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 domain__tag-list" :ref="'relatedApp' + index" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
+              <span class="tag__desc">{{item.domain}}</span>
+            </div>
+          </div>
+          <div class="overview__domain-btn" @click="more(relationshipDataOne, relationshipShowMoreOne, 1)" v-if="relationshipShowOne">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-app" v-if="relationshipShowMoreOne">
+              <div class="domain-more-tab" v-for="item in relationshipMoreDataOne" :key="item">
+                <span v-if="item.domain" :title="item.domain">{{item.domain}}</span>
+              </div>
+            </div>
+          </div>
        </div>
-        <div class="overview__tag">
-          <span class="tag__value">{{entityData.ipCount}}</span>
-          <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
+        <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="'relatedServerApp' + index" v-show="item.show" v-for="(item, index) in relationshipDataTow" :key="index">
+              <span class="tag__desc">{{item.ip}}</span>
+            </div>
+          </div>
+          <div class="overview__domain-btn" @click="more(relationshipDataTow, relationshipShowMoreTow, 2)" v-if="relationshipShowTow">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-ip" v-if="relationshipShowMoreTow">
+              <div class="domain-more-tab" v-for="item in relationshipMoreDataTow" :key="item">
+                <span v-if="item.ip" :title="item.ip">{{item.ip}}</span>
+              </div>
+            </div>
+          </div>
        </div>
      </div>
    </div>
@@ -153,10 +183,11 @@ import Chart from '@/views/charts/Chart'
 import _ from 'lodash'
 import ChartSingleValue from '@/views/charts/charts/ChartSingleValue'
 import { get } from '@/utils/http'
+import relatedServer from '@/mixins/relatedServer'

 export default {
  name: 'App',
-  mixins: [entityDetailMixin],
+  mixins: [entityDetailMixin, relatedServer],
  components: {
    Chart,
    ChartSingleValue
@@ -173,6 +204,8 @@ export default {
      alertUrl: api.entityAppDetailAlert,
      securityUrl: api.entityAppDetailSecurity,
      trafficUrlMap: api.entityAppDetailTrafficMap,
+      relatedServerDomainUrl: api.entityAppRelatedServerDomain,
+      relatedServerIpUrl: api.entityAppRelatedServerIp,
      chartData: null,
      listMode: 'list',
      singleValues: {
@@ -252,12 +285,17 @@ export default {
        this.singleValues.chartDatas.splice(1, 1, this.$_.get(n, 'httpResponseLatency'))
        this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency'))
        this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent'))
-        this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent'))
+        this.getRelatedServerDataOne(this.relatedServerDomainUrl, 'relatedApp')
+        this.getRelatedServerDataTow(this.relatedServerIpUrl, 'relatedServerApp')
      }
    }
  },
  mounted () {
-    this.$nextTick(() => { setTimeout(() => { this.chartGetMap() }, 250) })
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.chartGetMap()
+      }, 250)
+    })
  },
  setup (props) {
    return {
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -58,15 +58,45 @@
  </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">
-          <span class="tag__value">{{entityData.appCount}}</span>
-          <span class="tag__desc">{{$t('entities.relatedApp')}}</span>
+    <div class="overview__content domain__content">
+      <div class="overview__tags domain__tags overview__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 domain__tag-list" :ref="'relatedDomain' + index" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
+              <span class="tag__desc">{{item.appName}}</span>
+            </div>
+          </div>
+          <div class="overview__domain-btn" @click="more(relationshipDataOne, relationshipShowMoreOne, 1)" v-if="relationshipShowOne">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-app" v-if="relationshipShowMoreOne">
+              <div class="domain-more-tab" v-for="item in relationshipMoreDataOne" :key="item">
+                <span v-if="item.appName" :title="item.appName">{{item.appName}}</span>
+              </div>
+            </div>
+          </div>
        </div>
-        <div class="overview__tag">
-          <span class="tag__value">{{entityData.ipCount}}</span>
-          <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
+        <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="'relatedServerDomain' + index" v-show="item.show" v-for="(item, index) in relationshipDataTow" :key="index">
+              <span class="tag__desc">{{item.ip}}</span>
+            </div>
+          </div>
+          <div class="overview__domain-btn" @click="more(relationshipDataTow, relationshipShowMoreTow, 2)" v-if="relationshipShowTow">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-ip" v-if="relationshipShowMoreTow">
+              <div class="domain-more-tab" v-for="item in relationshipMoreDataTow" :key="item">
+                <span v-if="item.ip" :title="item.ip">{{item.ip}}</span>
+              </div>
+            </div>
+          </div>
        </div>
      </div>
    </div>
@@ -159,15 +189,16 @@ 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'
+import relatedServer from '@/mixins/relatedServer'
 export default {
  name: 'Domain',
  components: {
    ChartSingleValue,
    Chart
  },
-  mixins: [entityDetailMixin],
+  mixins: [entityDetailMixin, relatedServer],
  data () {
    return {
      // entityData: {},
@@ -180,6 +211,8 @@ export default {
      alertUrl: api.entityDomainDetailAlert,
      securityUrl: api.entityDomainDetailSecurity,
      trafficUrlMap: api.entityDomainDetailTrafficMap,
+      relatedServerIpUrl: api.entityDomainRelatedServerIp,
+      relatedServerAppUrl: api.entityDomainRelatedServerApp,
      chartData: null,
      listMode: 'list',
      singleValues: {
@@ -243,7 +276,7 @@ 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
        }
@@ -260,11 +293,17 @@ export default {
        this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency'))
        this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent'))
        this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent'))
+        this.getRelatedServerDataOne(this.relatedServerAppUrl, 'relatedDomain')
+        this.getRelatedServerDataTow(this.relatedServerIpUrl, 'relatedServerDomain')
      }
    }
  },
  mounted () {
-    this.$nextTick(() => { setTimeout(() => { this.chartGetMap()}, 250)})
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.chartGetMap()
+      }, 250)
+    })
  },
  setup (props) {
    const entityCopy = {
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -42,15 +42,45 @@
  </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">
-          <span class="tag__value">{{entityData.domainCount}}</span>
-          <span class="tag__desc">{{$t('entities.relatedDomains')}}</span>
+    <div class="overview__content domain__content">
+      <div class="overview__tags domain__tags overview__ip-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 domain__tag-list" :ref="'relatedIp' + index" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
+              <span class="tag__desc">{{item.domain}}</span>
+            </div>
+          </div>
+          <div class="overview__domain-btn" @click="more(relationshipDataOne, relationshipShowMoreOne, 1)" v-if="relationshipShowOne">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-app" v-if="relationshipShowMoreOne">
+              <div class="domain-more-tab" v-for="item in relationshipMoreDataOne" :key="item">
+                <span v-if="item.domain" :title="item.domain">{{item.domain}}</span>
+              </div>
+            </div>
+          </div>
        </div>
-        <div class="overview__tag">
-          <span class="tag__value">{{entityData.appCount}}</span>
-          <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
+        <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 domain__tag-list" :ref="'relatedServerIp' + index" v-show="item.show" v-for="(item, index) in relationshipDataTow" :key="index">
+              <span class="tag__desc">{{item.appName}}</span>
+            </div>
+          </div>
+          <div class="overview__domain-btn" @click="more(relationshipDataTow, relationshipShowMoreTow, 2)" v-if="relationshipShowTow">
+            <div class="overview__domain-more">...</div>
+            <div class="overview__domain-more-tabs show-more-ip" v-if="relationshipShowMoreTow">
+              <div class="domain-more-tab" v-for="item in relationshipMoreDataTow" :key="item">
+                <span v-if="item.appName" :title="item.appName">{{item.appName}}</span>
+              </div>
+            </div>
+          </div>
        </div>
      </div>
    </div>
@@ -145,10 +175,11 @@ import unitConvert from '@/utils/unit-convert'
 import Chart from '@/views/charts/Chart'
 import _ from 'lodash'
 import { get } from '@/utils/http'
+import relatedServer from '@/mixins/relatedServer'

 export default {
  name: 'Ip',
-  mixins: [entityDetailMixin],
+  mixins: [entityDetailMixin, relatedServer],
  components: {
    Chart,
    ChartSingleValue
@@ -165,6 +196,8 @@ export default {
      linkOutUrl: api.entityIpDetailLinkOut,
      alertUrl: api.entityIpDetailAlert,
      securityUrl: api.entityIpDetailSecurity,
+      relatedServerDomainUrl: api.entityIpRelatedServerDomain,
+      relatedServerAppUrl: api.entityIpRelatedServerApp,
      listMode: 'list',
      chartData: null,
      singleValues: {
@@ -246,11 +279,17 @@ export default {
        this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency'))
        this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent'))
        this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent'))
+        this.getRelatedServerDataOne(this.relatedServerDomainUrl, 'relatedIp')
+        this.getRelatedServerDataTow(this.relatedServerAppUrl, 'relatedServerIp')
      }
    }
  },
  mounted () {
-    this.$nextTick(() => { setTimeout(() => { this.chartGetMap() }, 250) })
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.chartGetMap()
+      }, 250)
+    })
  },
  setup (props) {
    const entityCopy = {