CN-854: 支持从npm-events点击跳转至detections-performance events

src/views/charts2/charts/npm/NpmRecentEvents.vue

@@ -24,7 +24,7 @@
                 <span class="data-recent-table-severity" :class="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
               </template>
               <template v-else-if="item.prop === 'eventKey'">
-                <span class="data-recent-table-entity">{{scope.row[item.prop]}}</span>
+                <span class="data-recent-table-entity" @click="jumpPage(scope.row)">{{splitEventKey(scope.row[item.prop])}}</span>
               </template>
               <template v-else-if="item.prop === 'eventType'">
                 <span class="data-recent-table-eventType">{{scope.row[item.prop]}}</span>
@@ -84,9 +84,11 @@ export default {
   watch: {
     timeFilter: {
       handler (n) {
+        if (n) {
           this.recentEventsListData()
         }
       }
+    }
   },
   methods: {
     recentEventsListData () {
@@ -133,6 +135,29 @@ export default {
       }).finally(() => {
         this.toggleLoading(false)
       })
+    },
+    /**
+     * 只要实体名称
+     * @param key
+     * @returns {*}
+     */
+    splitEventKey (key) {
+      let name = ''
+      if (key) {
+        name = key.split(' ')[0]
+      } else {
+        name = '-'
+      }
+      return name
+    },
+    jumpPage (item) {
+      this.$router.push({
+        path: '/detection/performanceEvent',
+        query: {
+          t: +new Date(),
+          eventId: item.eventId
+        }
+      })
     }
   },
   mounted () {

src/views/detections/DetectionRow.vue

@@ -110,6 +110,7 @@ import DetectionSecurityEventOverview from '@/views/detections/overview/Detectio
 import DetectionPerformanceEventIpOverview from '@/views/detections/overview/DetectionPerformanceEventIpOverview'
 import DetectionPerformanceEventAppOverview from '@/views/detections/overview/DetectionPerformanceEventAppOverview'
 import DetectionPerformanceEventDomainOverview from '@/views/detections/overview/DetectionPerformanceEventDomainOverview'
+import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
 export default {
   name: 'DetectionRow',
   components: {
@@ -128,10 +129,21 @@ export default {
     return {
       entityType,
       detectionPageType,
-      isCollapse: true, // 是否是折叠状态
+      isCollapse: true, // 是否是折叠状态, true为折叠，false为展开
       eventSeverityColor
     }
   },
+  mounted () {
+    if (this.$route.query.eventId) {
+      if (parseFloat(this.$route.query.eventId) === this.detection.eventId) {
+        const container = document.getElementById('cnContainer')
+        container.scrollTop = 555 + this.index * 97
+
+        this.isCollapse = false
+        this.$emit('switchCollapse', this.isCollapse, this.index)
+      }
+    }
+  },
   computed: {
     iconClass () {
       let className
@@ -172,10 +184,29 @@ export default {
     switchCollapse () {
       this.isCollapse = !this.isCollapse
       this.$emit('switchCollapse', this.isCollapse, this.index)
+
+      if (this.isCollapse) {
+        const newQuery = this.$route.query // 深拷贝路由数据
+        delete newQuery.eventId
+        this.reloadUrl(newQuery, 'cleanOldParams')
+      } else {
+        this.reloadUrl({ eventId: this.detection.eventId })
+      }
     },
     /* 设为折叠状态 */
     collapse () {
       this.isCollapse = true
+    },
+    /**
+     * 向地址栏添加/删除参数
+     */
+    reloadUrl (newParam, clean) {
+      const { query } = this.$route
+      let newUrl = urlParamsHandler(window.location.href, query, newParam)
+      if (clean) {
+        newUrl = urlParamsHandler(window.location.href, query, newParam, clean)
+      }
+      overwriteUrl(newUrl)
     }
   }
 }