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

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安全事件详情

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).entityMetadata.searchColumns : columnList1
-schemaEntityExplore = schemaEntityExplore ? JSON.parse(schemaEntityExplore).enityMetadata : columnList1
 export const columnList = schemaEntityExplore
 
 export const operatorList = ['=', '!=', /* '>', '<', '>=', '<=', */'IN', 'NOT IN', 'LIKE', 'NOT LIKE']

src/utils/tools.js

@@ -73,9 +73,8 @@ const columnList1 = [
   }
 ]
 let schemaEntityExplore = localStorage.getItem(storageKey.schemaEntityExplore)
-// todo enityMetadata字段后续可能会改
+schemaEntityExplore = schemaEntityExplore ? JSON.parse(schemaEntityExplore).entityMetadata.searchColumns : columnList1
-schemaEntityExplore = schemaEntityExplore ? JSON.parse(schemaEntityExplore).enityMetadata : columnList1
+const columnList = schemaEntityExplore
-export 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}%'`
     }
   }
 }

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) {
-      const params = {
+      if (topData.topColumn === 'DR.Port') {
-        column: topData.topColumn,
+        const params = [
-        operator: '=',
+          {
-        value: name
+            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.$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) {
+              if (index === 4) {
-                obj.topColumn = 'City'
+                obj = {
-              }
+                  topColumn: this.newFilterData[index].topColumn,
-              if (index === 2) {
+                  topColumn1: this.newFilterData[index].topColumn1,
-                obj.topColumn = 'ASN'
+                  port: item.port,
+                  l7Protocol: item.l7Protocol,
+                  value: item.uniqueEntities
+                }
               }
               this.newFilterData[index].data.push(obj)
             })

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>