CN-1248: 新增实体左侧Top过滤条件

2023-08-22 10:34:18 +08:00
parent 6267851a2d
commit 8d15c0ff62
5 changed files with 96 additions and 21 deletions
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -304,8 +304,13 @@ export const api = {
      appTrafficMap: apiVersion + '/entity/explorer/detail/traffic/map/app', // app流量地图
      summaryCount: apiVersion + '/entity/explorer/query/summaryCount', // 实体基数统计
      aggCountry: apiVersion + '/entity/explorer/top/aggCountry', // 国家实体基数统计
-      aggAsn: apiVersion + '/entity/explorer/top/aggAsn', // ASN实体基数统计
+      aggIPAsn: apiVersion + '/entity/explorer/top/agg-ip-asn', // ASN实体基数统计
      aggCity: apiVersion + '/entity/explorer/top/aggCity', // 城市实体基数统计
+      aggIPIsp: apiVersion + '/entity/explorer/top/agg-ip-isp', // ip-iap实体基数统计
+      aggPort: apiVersion + '/entity/explorer/top/aggPort', // 端口实体基数统计
+      aggDomain: apiVersion + '/entity/explorer/top/aggDomain', // 域名类别实体基数统计
+      aggAppCategory: apiVersion + '/entity/explorer/top/aggAppCategory', // app类别实体基数统计
+      aggTag: apiVersion + '/entity/explorer/top/aggTag', // 标签实体基数统计
      domainSecurity: apiVersion + '/entity/explorer/detail/event/security/domain', // domain安全事件详情
      ipSecurity: apiVersion + '/entity/explorer/detail/event/security/domain', // ip安全事件详情
      appSecurity: apiVersion + '/entity/explorer/detail/event/security/domain', // app安全事件详情
--- a/src/utils/static-data.js
+++ b/src/utils/static-data.js
@@ -336,8 +336,7 @@ export const columnList1 = [
 ]

 let schemaEntityExplore = localStorage.getItem(storageKey.schemaEntityExplore)
-// todo enityMetadata字段后续可能会改
-schemaEntityExplore = schemaEntityExplore ? JSON.parse(schemaEntityExplore).enityMetadata : columnList1
+schemaEntityExplore = schemaEntityExplore ? JSON.parse(schemaEntityExplore).entityMetadata.searchColumns : columnList1
 export const columnList = schemaEntityExplore

 export const operatorList = ['=', '!=', /* '>', '<', '>=', '<=', */'IN', 'NOT IN', 'LIKE', 'NOT LIKE']
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -73,9 +73,8 @@ const columnList1 = [
  }
 ]
 let schemaEntityExplore = localStorage.getItem(storageKey.schemaEntityExplore)
-// todo enityMetadata字段后续可能会改
-schemaEntityExplore = schemaEntityExplore ? JSON.parse(schemaEntityExplore).enityMetadata : columnList1
-export const columnList = schemaEntityExplore
+schemaEntityExplore = schemaEntityExplore ? JSON.parse(schemaEntityExplore).entityMetadata.searchColumns : columnList1
+const columnList = schemaEntityExplore

 export const tableSort = {
  // 是否需要排序
@@ -1489,7 +1488,7 @@ export const handleEntityTypeByStr = (str) => {
    } else if (reg.test(str)) {
      return `Domain LIKE '%${str}'`
    } else {
-      return `App LIKE '%${str}'%`
+      return `App LIKE '%${str}%'`
    }
  }
 }
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -353,18 +353,57 @@ export default {
        {
          icon: 'cn-icon cn-icon-registration-country',
          title: 'Top Countries',
+          topColumn: 'Country',
          totalCount: 0,
          data: []
        },
        {
          icon: 'cn-icon cn-icon-city',
          title: 'Top Cities',
+          topColumn: 'City',
          totalCount: 0,
          data: []
        },
        {
          icon: 'cn-icon cn-icon-as',
          title: 'Top ASNs',
+          topColumn: 'ASN',
+          totalCount: 0,
+          data: []
+        },
+        {
+          icon: 'cn-icon cn-icon-operator',
+          title: 'Top ISPs',
+          topColumn: 'ISP',
+          totalCount: 0,
+          data: []
+        },
+        {
+          icon: 'cn-icon cn-icon-open-port',
+          title: 'Top Ports',
+          topColumn: 'DR.Port',
+          topColumn1: 'DR.L7Protocol',
+          totalCount: 0,
+          data: []
+        },
+        {
+          icon: 'cn-icon cn-icon-FQDN',
+          title: 'Top FQDN Categories',
+          topColumn: 'DomainCategoryName',
+          totalCount: 0,
+          data: []
+        },
+        {
+          icon: 'cn-icon cn-icon-category2',
+          title: 'Top App Categories',
+          topColumn: 'AppCategory',
+          totalCount: 0,
+          data: []
+        },
+        {
+          icon: 'cn-icon cn-icon-tag1',
+          title: 'Top Tags',
+          topColumn: 'Tags',
          totalCount: 0,
          data: []
        }
@@ -605,12 +644,28 @@ export default {
    },
    /* filter组件内点击后查询 */
    filter (name, topData) {
+      if (topData.topColumn === 'DR.Port') {
+        const params = [
+          {
+            column: topData.topColumn,
+            operator: '=',
+            value: topData.port
+          },
+          {
+            column: topData.topColumn1,
+            operator: '=',
+            value: topData.l7Protocol
+          }
+        ]
+        this.$refs.search.addParams(params)
+      } else {
        const params = {
          column: topData.topColumn,
          operator: '=',
          value: name
        }
        this.$refs.search.addParams([params])
+      }
      this.$nextTick(() => {
        this.emitter.emit('advanced-search')
      })
@@ -688,22 +743,34 @@ export default {
      this.loadingLeft = true
      const aggCountry = get(api.entity.entityList.aggCountry, queryParams)
      const aggCity = get(api.entity.entityList.aggCity, queryParams)
-      const aggAsn = get(api.entity.entityList.aggAsn, queryParams)
+      const aggIPAsn = get(api.entity.entityList.aggIPAsn, queryParams)
+      const aggIPIsp = get(api.entity.entityList.aggIPIsp, queryParams)
+      const aggPort = get(api.entity.entityList.aggPort, queryParams)
+      const aggDomain = get(api.entity.entityList.aggDomain, queryParams)
+      const aggAppCategory = get(api.entity.entityList.aggAppCategory, queryParams)
+      const aggTag = get(api.entity.entityList.aggTag, queryParams)

-      Promise.all([aggCountry, aggCity, aggAsn]).then(response => {
+      Promise.all([aggCountry, aggCity, aggIPAsn, aggIPIsp, aggPort, aggDomain, aggAppCategory, aggTag]).then(response => {
        response.forEach((item, index) => {
          if (item.code === 200 && item.data.list) {
            this.newFilterData[index].data = []
            item.data.list.forEach(item => {
-              const obj = { label: item.value, topColumn: 'Country', value: item.uniqueEntities }
+              let obj = {
+                label: item.value,
+                topColumn: this.newFilterData[index].topColumn,
+                value: item.uniqueEntities
+              }
              if (index === 0) {
                obj.flag = item.value // 接口字段名称为'China'，svg名称为'CN'，通过countryNameIdMapping进行转换
              }
-              if (index === 1) {
-                obj.topColumn = 'City'
+              if (index === 4) {
+                obj = {
+                  topColumn: this.newFilterData[index].topColumn,
+                  topColumn1: this.newFilterData[index].topColumn1,
+                  port: item.port,
+                  l7Protocol: item.l7Protocol,
+                  value: item.uniqueEntities
                }
-              if (index === 2) {
-                obj.topColumn = 'ASN'
              }
              this.newFilterData[index].data.push(obj)
            })
--- a/src/views/entityExplorer/EntityFilter.vue
+++ b/src/views/entityExplorer/EntityFilter.vue
@@ -22,7 +22,12 @@
                <div v-else class="filter__body-item-left-index">{{ i+1 }}</div>
                <div class="filter__body-item-left-label">
                  <el-tooltip :content="data.label" placement="top" effect="light" :disabled="disabledLabel">
-                    <span @mouseenter="handleMouse(`filter${index}${i}`)" :id="`filter${index}${i}`">{{ data.label }}</span>
+                    <span @mouseenter="handleMouse(`filter${index}${i}`)" :id="`filter${index}${i}`">
+                      <span v-if="item.title==='Top Ports'">
+                        {{ data.port }}/{{ data.l7Protocol }}
+                      </span>
+                      <span v-else>{{ data.label }}</span>
+                    </span>
                  </el-tooltip>
                </div>
              </div>