CN-1439 fix: Detections-Security events模块中，事件日志详情中添加与Policy的交互

src/assets/css/components/views/detections/detection-drawer.scss

@@ -34,6 +34,15 @@
 
       .drawer-basic-id {
         margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        i {
+          font-size: 14px;
+          font-weight: 400;
+          cursor: pointer;
+        }
       }
     }
   }

src/views/detections/detectionPolicies/Index.vue

@@ -30,6 +30,7 @@
               :isNoData="isNoData"
               :custom-table-title="tools.customTableTitle"
               :table-data="tableData"
+              :policy-detail="policyDetail"
               :is-selected-status="isSelectedStatus"
               :all-count="18"
               @selectionChange="selectionChange"
@@ -75,7 +76,7 @@
 
   <div class="detection-drawer">
     <el-drawer v-model="showDrawer" :with-header="false">
-      <detection-drawer :drawer-info="drawerInfo"></detection-drawer>
+      <detection-drawer :drawer-info="drawerInfo" @edit="onEdit" />
     </el-drawer>
   </div>
 
@@ -89,6 +90,7 @@ import { api } from '@/utils/api'
 import dataListMixin from '@/mixins/data-list'
 import DetectionDrawer from '@/views/detections/detectionPolicies/PolicyDrawer'
 import axios from 'axios'
+import { useRoute } from 'vue-router'
 
 export default {
   name: 'Index',
@@ -118,10 +120,36 @@ export default {
       drawerInfo: {},
       filterParams: {},
       policyTotal: 0,
-      policyEnabledNum: 0
+      policyEnabledNum: 0,
+      policyDetail: {}
+    }
+  },
+  mounted () {
+    const { query } = useRoute()
+    if (query.name && query.ruleId) {
+      this.getPolicyDetail(query.ruleId)
     }
   },
   methods: {
+    getPolicyDetail (id) {
+      if (id) {
+        axios.get(`${api.detection.detail}/${id}`).then(res => {
+          if (res.status === 200) {
+            if (!res.data.data) {
+              throw new Error('No data found, id: ' + this.ruleId)
+            }
+            this.policyDetail = res.data.data
+            this.selectionChange([res.data.data])
+            this.onRowDoubleClick(res.data.data)
+          } else {
+            console.error(res.data)
+          }
+        }).catch(e => {
+          console.error(e)
+          this.$message.error(this.errorMsgHandler(e))
+        })
+      }
+    },
     onSearch (keyWord) {
       this.filterParams = {
         ...this.filterParams,
@@ -153,7 +181,8 @@ export default {
         query: {
           t: +new Date(),
           pageNoForTable: pageNo || 1,
-          id: this.batchDeleteObjs[0].ruleId
+          id: this.batchDeleteObjs[0].ruleId,
+          name: this.$route.query.name || ''
         }
       })
     },

src/views/detections/detectionPolicies/PolicyDrawer.vue

@@ -2,7 +2,10 @@
   <div class="detection-drawer" style="height: 100vh;overflow: scroll;padding-bottom: 90px">
     <div class="drawer-basic">
       <div class="drawer-basic-header">
-        <div class="drawer-basic-id">ID: {{ drawerInfo.ruleId }}</div>
+        <div class="drawer-basic-id">
+          <div>ID: {{ drawerInfo.ruleId }}</div>
+          <i @click="onEdit" class="cn-icon cn-icon-bianji1"></i>
+        </div>
         <div :class="`detection-tag-status${drawerInfo.status}`">
           {{ $t(switchStatus(drawerInfo.status)) }}
         </div>
@@ -245,6 +248,9 @@ export default {
       } else {
         return '-'
       }
+    },
+    onEdit () {
+      this.$emit('edit')
     }
   }
 }

src/views/detections/detectionPolicies/PolicyTable.vue

@@ -84,6 +84,7 @@ import { dateFormatByAppearance } from '@/utils/date-util'
 import { switchStatus } from '@/utils/tools'
 import _ from 'lodash'
 import { detectionUnitList } from '@/utils/constants'
+import { useRoute } from 'vue-router'
 
 export default {
   name: 'DetectionTable',
@@ -91,6 +92,9 @@ export default {
     isNoData: {
       type: Boolean,
       default: false
+    },
+    policyDetail: {
+      type: Object
     }
   },
   mixins: [table],
@@ -148,6 +152,17 @@ export default {
       ]
     }
   },
+  mounted () {
+    const { query } = useRoute()
+    // 初始化勾选状态
+    if (query.name && query.ruleId && this.policyDetail) {
+      this.selectionChange([this.policyDetail])
+      const timer = setTimeout(() => {
+        this.$refs.dataTable.toggleAllSelection([this.policyDetail])
+        clearTimeout(timer)
+      }, 400)
+    }
+  },
   watch: {
     tableData: {
       immediate: true,

src/views/detections/overview/DetectionSecurityEventOverview.vue

@@ -240,20 +240,19 @@
           <div class="row__content">{{ $_.get(detection, 'eventInfoObj.ioc_value', '-') || '-' }}</div>
         </div>
       </template>
-      <template v-if="basicInfo.ruleInfo">
-        <div class="overview__row">
-          <div class="row__label">{{ $t('detection.policyId') }}</div>
-          <div class="row__content">{{ $_.get(basicInfo, 'ruleInfo.ruleId', '-') || '-' }}</div>
-        </div>
-        <div class="overview__row">
-          <div class="row__label">{{ $t('detection.policyName') }}</div>
-          <div class="row__content" :class="$_.get(basicInfo, 'ruleInfo.ruleId') >=10000 ? 'row__content--link' : ''" @click="goPolicyPage">
-            {{ $_.get(basicInfo, 'ruleInfo.name', '-') || '-' }}
-          </div>
-        </div>
-      </template>
     </div>
     <div class="overview__right">
+      <div v-if="$_.get(basicInfo, 'ruleInfo.ruleId') >= 10000">
+        <div class="overview__title">{{ $t('detections.goToPolicy') }}</div>
+        <div class="overview__row">
+          <div class="row__content">
+            <span class="row__content--span">{{ $t('detections.viewDetailOf') }}</span> &nbsp;
+            <span class="row__content--link" @click="goPolicyPage">
+              {{ $_.get(basicInfo, 'ruleInfo.name', '-') || '-' }} (ID: {{ $_.get(basicInfo, 'ruleInfo.ruleId', '-') || '-' }})
+            </span>
+          </div>
+        </div>
+      </div>
       <div class="overview__title">{{ $t('detections.goToVictim') }}</div>
       <div class="overview__row">
         <div class="row__content">
@@ -515,7 +514,8 @@ export default {
           path: '/detection/policy',
           query: {
             t: +new Date(),
-            name: this.basicInfo.ruleInfo.name
+            name: this.basicInfo.ruleInfo.name,
+            ruleId: this.basicInfo.ruleInfo.ruleId
           }
         })
         window.open(href, '_blank')