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

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

@@ -119,3 +119,73 @@
   background: #EFF2F5;
   //background: #000;
 }
+
+.new-detection-filter-title {
+  height: 32px;
+  line-height: 32px;
+  background: #F7F7F7;
+  padding: 0 20px;
+  box-shadow: 0 1px 0 0 rgba(226, 229, 236, 1);
+  border-radius: 4px 4px 0 0;
+}
+.new-detection-filter-content {
+  padding: 20px;
+
+  .new-filter-content-title {
+    font-family: NotoSansHans-Medium;
+    font-size: 14px;
+    line-height: 14px;
+    margin-bottom: 10px;
+    color: #353636;
+    font-weight: 500;
+  }
+  .new-filter-content-content {
+    display: flex;
+    flex-direction: column;
+
+    .new-filter-content-checkbox {
+      line-height: 16px;
+      margin-bottom: 10px;
+      font-family: NotoSansSChineseRegular;
+      font-size: 14px;
+      color: #353636;
+      font-weight: 400;
+
+      .el-checkbox__inner {
+        width: 16px !important;
+        height: 16px !important;
+        text-align: center !important;
+        line-height: 16px !important;
+      }
+
+      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+        border-color: #38ACD2;
+        background: #38ACD2;
+        border-radius: 2px;
+      }
+      .el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
+        background: #FFFFFF;
+        border-radius: 1px;
+      }
+      .el-checkbox__input.is-checked {
+        .el-checkbox__inner {
+          border-color: #38ACD2;
+          background: #38ACD2;
+          border-radius: 2px;
+        }
+      }
+      .el-checkbox__input.is-focus {
+        .el-checkbox__inner {
+          border-color: #38ACD2;
+        }
+      }
+
+      .el-checkbox__label {
+        font-family: NotoSansSChineseRegular;
+        font-size: 14px;
+        color: #353636;
+        font-weight: 400;
+      }
+    }
+  }
+}

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

@@ -203,6 +203,7 @@
           color: #046ECA;
           margin-bottom: 10px;
           font-weight: 500;
+          height: 36px;
         }
         .timeline__start-time {
           font-size: 12px;

src/views/detections/detectionPolicies/PolicyTable.vue

@@ -5,6 +5,7 @@
       ref="dataTable"
       :data="tableData"
       height="100%"
+      tooltip-effect="light"
       border
       empty-text=" "
       @header-dragend="dragend"
@@ -31,6 +32,7 @@
         :sortable="item.sortable"
         :width="`${item.width}`"
         class="data-column"
+        :show-overflow-tooltip="['library'].indexOf(item.prop) > -1"
     >
       <template #header>
         <span class="data-column__span">{{ item.label }}</span>

src/views/detections/detectionPolicies/PolicyTools.vue

@@ -50,6 +50,9 @@
 </template>
 
 <script>
+import { useRoute } from 'vue-router'
+import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+
 export default {
   name: 'DetectionTools',
   props: {
@@ -67,9 +70,21 @@ export default {
       keyWord: ''
     }
   },
+  mounted () {
+    const { query } = useRoute()
+    if (query.name) {
+      this.keyWord = query.name
+      this.onSearch()
+    }
+  },
   methods: {
     onSearch () {
       this.$emit('search', this.keyWord)
+      if (!this.keyWord) {
+        const query = this.$route.query
+        delete query.name
+        this.reloadUrl(query, 'clear')
+      }
     },
     onCreate () {
       this.$emit('create')
@@ -79,6 +94,14 @@ export default {
     },
     onDelete (data) {
       this.$emit('delete', data)
+    },
+    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)
     }
   }
 }

src/views/detections/overview/DetectionSecurityEventOverview.vue

@@ -10,7 +10,7 @@
           <span class="row__content--link">{{detection.victimIp}}</span>&nbsp;&nbsp;communicated with&nbsp;<span class="row__content--link">{{detection.offenderIp}}</span>&nbsp;&nbsp;that was associated with the indicator of {{detection.eventName}}.
         </div>
         <div class="row__content1" v-else>
-          {{basicInfo.ruleDescription || '-'}}
+          {{ $_.get(basicInfo, 'ruleInfo.description', '-') || '-' }}
         </div>
       </div>
       <div class="overview__title">Fields</div>
@@ -240,6 +240,18 @@
           <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 class="overview__title">{{ $t('detections.goToVictim') }}</div>
@@ -463,7 +475,7 @@ export default {
       if (this.detection.ruleId) {
         axios.get(`${api.detection.detail}/${this.detection.ruleId}`).then(res => {
           if (res.status === 200) {
-            this.basicInfo.ruleDescription = res.data.data.description
+            this.basicInfo.ruleInfo = res.data.data
           }
         })
       }
@@ -496,6 +508,18 @@ export default {
         })
         window.open(href, '_blank')
       }
+    },
+    goPolicyPage () {
+      if (this.basicInfo.ruleInfo.name && Number(this.basicInfo.ruleInfo.ruleId) >= 10000) {
+        const { href } = this.$router.resolve({
+          path: '/detection/policy',
+          query: {
+            t: +new Date(),
+            name: this.basicInfo.ruleInfo.name
+          }
+        })
+        window.open(href, '_blank')
+      }
     }
   },
   mounted () {