From 0477b78c9d1bdc18e284ffe00a75df104a6cacc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Tue, 13 Aug 2024 14:49:05 +0800
Subject: [PATCH] =?UTF-8?q?CN-1676=20fix:=201=E3=80=81=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=8F=8F=E8=BF=B0=EF=BC=9B2=E3=80=81?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=97=B6=E9=97=B4=E8=BD=B4=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=85=A5=E5=8F=82=E6=97=B6=E9=97=B4=E8=BD=AC?=
 =?UTF-8?q?=E4=B8=BA=E7=A7=92=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/detections/detection-list/row.scss  |  4 ++
 .../views/detections/detection-overview.scss  |  3 ++
 src/views/detections/DetectionRow.vue         |  2 +-
 src/views/detections/DetectionRowEvents.vue   |  4 +-
 .../detections/options/detectionOptions.js    |  1 +
 .../overview/IndicatorMatchOverview.vue       |  4 +-
 .../detections/overview/SequenceOverview.vue  |  4 +-
 .../detections/overview/ThresholdOverview.vue |  4 +-
 .../overview/detectionDetailMixin.js          | 48 +++++++++++++++++--
 9 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/src/assets/css/components/views/detections/detection-list/row.scss b/src/assets/css/components/views/detections/detection-list/row.scss
index 4c430962..9faccd6c 100644
--- a/src/assets/css/components/views/detections/detection-list/row.scss
+++ b/src/assets/css/components/views/detections/detection-list/row.scss
@@ -249,6 +249,10 @@ $bg-color-page: var(--el-bg-color-page);
             }
           }
 
+          .new__basic-info {
+            padding: 0 16px;
+          }
+
           .show-detail {
             flex-shrink: 0;
             padding: 0 30px;
diff --git a/src/assets/css/components/views/detections/detection-overview.scss b/src/assets/css/components/views/detections/detection-overview.scss
index a485ec24..c4a565a2 100644
--- a/src/assets/css/components/views/detections/detection-overview.scss
+++ b/src/assets/css/components/views/detections/detection-overview.scss
@@ -142,6 +142,9 @@ $color-regular: var(--el-text-color-regular);
       flex-direction: column;
     }
   }
+  .overview__left-new {
+    flex: 0 0 100%;
+  }
 }
 .overview__row-timeline {
   display: flex;
diff --git a/src/views/detections/DetectionRow.vue b/src/views/detections/DetectionRow.vue
index ba70b0ef..449ceea7 100644
--- a/src/views/detections/DetectionRow.vue
+++ b/src/views/detections/DetectionRow.vue
@@ -22,7 +22,7 @@
         <div class="cn-detection__body">
           <div class="body__basic-info">
             <div class="basic-info">
-              <div class="basic-info__item" style="margin-left: 16px;" v-if="detection.eventType">
+              <div class="basic-info__item margin-l" style="margin-left: 16px;" v-if="detection.eventType">
                 <i class="cn-icon cn-icon-event-type"></i>
                 <span>{{$t('detections.eventType')}}&nbsp;:&nbsp;&nbsp;</span>
                 <span>{{detection.eventType || '-'}}</span>
diff --git a/src/views/detections/DetectionRowEvents.vue b/src/views/detections/DetectionRowEvents.vue
index cc4e89ee..37edb258 100644
--- a/src/views/detections/DetectionRowEvents.vue
+++ b/src/views/detections/DetectionRowEvents.vue
@@ -13,8 +13,8 @@
 
         <div class="cn-detection__body">
           <div class="body__basic-info">
-            <div class="basic-info">
-              <div class="basic-info__item" style="margin-left: 16px;">
+            <div class="basic-info new__basic-info">
+              <div class="basic-info__item">
                 <span v-for="(item, index) in myDetection.keyList" :key="index">
                   <span class="item__key">{{item.key}}</span>
                   <span class="item__key__type">({{ item.type }})</span>
diff --git a/src/views/detections/options/detectionOptions.js b/src/views/detections/options/detectionOptions.js
index ea7be2e5..e2354d1c 100644
--- a/src/views/detections/options/detectionOptions.js
+++ b/src/views/detections/options/detectionOptions.js
@@ -489,6 +489,7 @@ export const lineOption = {
   },
   series: [
     {
+      name: 'event',
       data: [],
       type: 'line',
       color: '#ff9a79',
diff --git a/src/views/detections/overview/IndicatorMatchOverview.vue b/src/views/detections/overview/IndicatorMatchOverview.vue
index e9e41638..865c223c 100644
--- a/src/views/detections/overview/IndicatorMatchOverview.vue
+++ b/src/views/detections/overview/IndicatorMatchOverview.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="detection-detail-overview">
-    <div class="overview__left">
+    <div class="overview__left overview__left-new">
       <div class="overview__title">{{ $t('overall.remark') }}</div>
       <div class="overview__row">
         <div class="row__content1">
-          ${key} experienced exceptions exceeding the threshold number of times.
+          <div v-html="handleDescription"></div>
         </div>
       </div>
       <div class="overview__title">{{ $t('overall.fields') }}</div>
diff --git a/src/views/detections/overview/SequenceOverview.vue b/src/views/detections/overview/SequenceOverview.vue
index ae54f04a..5ab0d975 100644
--- a/src/views/detections/overview/SequenceOverview.vue
+++ b/src/views/detections/overview/SequenceOverview.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="detection-detail-overview">
-    <div class="overview__left">
+    <div class="overview__left overview__left-new">
       <div class="overview__title">{{ $t('overall.remark') }}</div>
       <div class="overview__row">
         <div class="row__content1">
-          ${key} experienced exceptions exceeding the threshold number of times.
+          <div v-html="handleDescription"></div>
         </div>
       </div>
 
diff --git a/src/views/detections/overview/ThresholdOverview.vue b/src/views/detections/overview/ThresholdOverview.vue
index 87806635..bfcbf9f7 100644
--- a/src/views/detections/overview/ThresholdOverview.vue
+++ b/src/views/detections/overview/ThresholdOverview.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="detection-detail-overview">
-    <div class="overview__left">
+    <div class="overview__left overview__left-new">
       <div class="overview__title">{{ $t('overall.remark') }}</div>
       <div class="overview__row">
         <div class="row__content1">
-          ${key} experienced exceptions exceeding the threshold number of times.
+          <div v-html="handleDescription"></div>
         </div>
       </div>
       <div class="overview__title">{{ $t('overall.summary') }}</div>
diff --git a/src/views/detections/overview/detectionDetailMixin.js b/src/views/detections/overview/detectionDetailMixin.js
index aa928e4b..d3f95d31 100644
--- a/src/views/detections/overview/detectionDetailMixin.js
+++ b/src/views/detections/overview/detectionDetailMixin.js
@@ -1,4 +1,4 @@
-import { detectionEventType, detectionRuleType } from '@/utils/constants'
+import { detectionEventType, detectionRuleType, EN, storageKey, ZH } from '@/utils/constants'
 import { getMillisecond, getSecond } from '@/utils/date-util'
 import axios from 'axios'
 import { api } from '@/utils/api'
@@ -25,6 +25,48 @@ export default {
       seriesDataNum: 0
     }
   },
+  computed: {
+    // 下拉详情的描述
+    handleDescription () {
+      const language = localStorage.getItem(storageKey.language) || EN
+      const valuesList = this.detection.keyValues.split(',')
+      // const fieldsList = this.detection.keyFields.split(',')
+      // const obj = {}
+      // valuesList.forEach((item, index) => {
+      //   obj[fieldsList[index]] = item
+      // })
+      if (language === EN) {
+        switch (this.detection.ruleType) {
+          case detectionRuleType.indicator.key: {
+            // return `${obj.client_ip} communicated with ${obj.server_ip} that was associated with the indicator of ${obj.server_ip_tags}.`
+            return `<span>${valuesList[0]}</span>  communicated with <span>${valuesList[1]}</span> that was associated with the indicator of <span>${valuesList[2]}</span>.`
+          }
+          case detectionRuleType.threshold.key: {
+            // return `${obj.http_host} experienced exceptions exceeding the threshold number of times.`
+            return `<span>${valuesList[0]}</span> experienced exceptions exceeding the threshold number of times.`
+          }
+          case detectionRuleType.sequence.key:
+          case detectionRuleType.unordered.key: {
+            // return `${obj.client_ip} experienced ${this.detection.eventName} exception event.`
+            return `<span>${valuesList[0]}</span> experienced <span>${this.detection.eventName}</span> exception event.`
+          }
+        }
+      } else if (language === ZH) {
+        switch (this.detection.ruleType) {
+          case detectionRuleType.indicator.key: {
+            return `<span>${valuesList[0]}</span>与<span>${valuesList[1]}</span>进行了通信，后者与<span>${valuesList[2]}</span>的指标相关联。`
+          }
+          case detectionRuleType.threshold.key: {
+            return `<span>${valuesList[0]}</sapn> 发生异常的次数超出阈值。`
+          }
+          case detectionRuleType.sequence.key:
+          case detectionRuleType.unordered.key: {
+            return `<span>${valuesList[0]}</span>发生了<span>${this.detection.eventName}</span>异常事件。`
+          }
+        }
+      }
+    }
+  },
   mounted () {
     this.initData()
   },
@@ -99,8 +141,8 @@ export default {
     },
     changeTimeline (e) {
       const params = {
-        startTime: this.timeFilter.startTime,
-        endTime: this.timeFilter.endTime,
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
         eventId: e,
         ruleType: this.detection.ruleType,
         resource: this.q,