From 212c4b3eca1dbe154be762a6f3a0c2b2c26b7ae3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Fri, 6 Jan 2023 18:03:45 +0800
Subject: [PATCH] =?UTF-8?q?CN-854:=20=E6=94=AF=E6=8C=81=E4=BB=8Enpm-events?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E8=B7=B3=E8=BD=AC=E8=87=B3detections-perform?=
 =?UTF-8?q?ance=20events?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../charts2/charts/npm/NpmRecentEvents.vue    | 29 ++++++++++++++--
 src/views/detections/DetectionRow.vue         | 33 ++++++++++++++++++-
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/src/views/charts2/charts/npm/NpmRecentEvents.vue b/src/views/charts2/charts/npm/NpmRecentEvents.vue
index e70861a0..e86e5eec 100644
--- a/src/views/charts2/charts/npm/NpmRecentEvents.vue
+++ b/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,7 +84,9 @@ export default {
   watch: {
     timeFilter: {
       handler (n) {
-        this.recentEventsListData()
+        if (n) {
+          this.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 () {
diff --git a/src/views/detections/DetectionRow.vue b/src/views/detections/DetectionRow.vue
index ef3af0eb..f4e1c587 100644
--- a/src/views/detections/DetectionRow.vue
+++ b/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)
     }
   }
 }