CN-1676 fix: 添加下拉详情ruleType为indicator时的数据填充

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

@@ -35,6 +35,11 @@ $color-regular: var(--el-text-color-regular);
       }
     }
 
+    .overview__title__margin {
+      margin: 10px 0;
+    }
+
+
     .overview__row {
       display: flex;
       flex-direction: row;

src/views/detections/overview/IndicatorMatchOverview.vue

@@ -7,67 +7,69 @@
           ${key} experienced exceptions exceeding the threshold number of times.
         </div>
       </div>
-<!--      <div class="overview__title">{{ $t('overall.summary') }}</div>-->
       <div class="overview__title">{{ $t('overall.fields') }}</div>
       <div class="overview__row">
         <div class="row__label">{{ $t('detection.list.startTime') }}</div>
         <div class="row__content">
           <i class="cn-icon cn-icon-time2 row__content__icon"></i>
-          {{ detection.startTime ? dateFormatByAppearance(detection.startTime) : '-' }}
+          {{ myDetection.startTime ? dateFormatByAppearance(myDetection.startTime) : '-' }}
         </div>
       </div>
       <div class="overview__row">
         <div class="row__label">{{ $t('detection.detail.matchTime') }}</div>
         <div class="row__content">
           <i class="cn-icon cn-icon-time2 row__content__icon"></i>
-          {{ detection.startTime ? dateFormatByAppearance(detection.startTime) : '-' }}
+          {{ myDetection.matchTime ? dateFormatByAppearance(myDetection.matchTime) : '-' }}
         </div>
       </div>
       <div class="overview__row">
         <div class="row__label">{{ $t('overall.clientIp') }}</div>
-<!--        <div class="row__content">{{ detection.victimIp || '-' }}</div>-->
+        <div class="row__content">{{ myDetection.clientIp || '-' }}</div>
-        <div class="row__content">192.168.12.34</div>
       </div>
       <div class="overview__row">
         <div class="row__label">{{ $t('npm.clientLocation') }}</div>
         <div class="row__content">
           <div>
-<!--          <div v-if="$_.get(basicInfo, 'victimInfo.location.country')">-->
+            <img v-if="myDetection.client_country_region===countryNameIdMapping.Unknown || !countryNameIdMapping[myDetection.client_country_region]" src="../../../../public/images/flag/Unknown.svg" class="filter-country-flag">
-<!--            <img v-if="basicInfo.victimInfo.location.country===countryNameIdMapping.Unknown || !countryNameIdMapping[basicInfo.victimInfo.location.country]" src="../../../../public/images/flag/Unknown.svg" class="filter-country-flag">-->
+            <img v-else :src="require(`../../../../public/images/flag/${countryNameIdMapping[myDetection.client_country_region]}.png`)" class="filter-country-flag" >
-<!--            <img v-else :src="require(`../../../../public/images/flag/${countryNameIdMapping[basicInfo.victimInfo.location.country]}.png`)" class="filter-country-flag" >-->
-            <img :src="require(`../../../../public/images/flag/CN.png`)" class="filter-country-flag" >
           </div>
-          China, beijing
+          {{ myDetection.client_country_region || '-' }}, {{ myDetection.client_super_admin_area || '-' }}
         </div>
       </div>
       <div class="overview__row">
         <div class="row__label">{{ $t('overall.serverIp') }}</div>
-        <!--<div class="row__content">{{ detection.victimIp || '-' }}</div>-->
+        <div class="row__content">{{ myDetection.serverIp || '-' }}</div>
-        <div class="row__content">192.168.12.34</div>
       </div>
       <div class="overview__row">
         <div class="row__label">{{ $t('detection.detail.serverLocation') }}</div>
         <div class="row__content">
           <div>
-            <!--          <div v-if="$_.get(basicInfo, 'victimInfo.location.country')">-->
+            <img v-if="myDetection.server_country_region===countryNameIdMapping.Unknown || !countryNameIdMapping[myDetection.server_country_region]" src="../../../../public/images/flag/Unknown.svg" class="filter-country-flag">
-            <!--            <img v-if="basicInfo.victimInfo.location.country===countryNameIdMapping.Unknown || !countryNameIdMapping[basicInfo.victimInfo.location.country]" src="../../../../public/images/flag/Unknown.svg" class="filter-country-flag">-->
+            <img v-else :src="require(`../../../../public/images/flag/${countryNameIdMapping[myDetection.server_country_region]}.png`)" class="filter-country-flag" >
-            <!--            <img v-else :src="require(`../../../../public/images/flag/${countryNameIdMapping[basicInfo.victimInfo.location.country]}.png`)" class="filter-country-flag" >-->
-            <img :src="require(`../../../../public/images/flag/CN.png`)" class="filter-country-flag" >
           </div>
-          China, beijing
+          {{ myDetection.server_country_region || '-' }}, {{ myDetection.server_super_admin_area || '-' }}
         </div>
       </div>
       <div class="overview__row">
         <div class="row__label">{{ $t('detection.detail.indicatorValues') }}</div>
-        <div class="row__content">Tor</div>
+        <div class="row__content">{{ myDetection.indicatorValues || '-' }}</div>
       </div>
       <div class="overview__row">
         <div class="row__label">{{ $t('overall.domain') }}</div>
-        <div class="row__content">baidu.com</div>
+        <div class="row__content">{{ myDetection.domain || '-' }}</div>
       </div>
       <div class="overview__row">
         <div class="row__label">{{ $t('overall.app') }}</div>
-        <div class="row__content">Wechat</div>
+        <div class="row__content">{{ myDetection.app || '-' }}</div>
+      </div>
+
+      <div v-if="eventFlag===detectionEventType.aggregation">
+        <div class="overview__title overview__title__margin">{{ $t('detection.timeOfOccurrences') }}</div>
+        <div class="overview__row">
+          <div class="row__content1">
+            <events-timeline :timeFilter="timeFilter" :timeData="timeData" @change="changeTimeline"></events-timeline>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -77,6 +79,8 @@
 <script>
 import { dateFormatByAppearance } from '@/utils/date-util'
 import detectionDetailMixin from '@/views/detections/overview/detectionDetailMixin'
+import { countryNameIdMapping } from '@/utils/constants'
+import EventsTimeline from '@/views/detections/overview/EventsTimeline'
 export default {
   name: 'IndicatorMatchOverview',
   mixins: [detectionDetailMixin],
@@ -85,9 +89,12 @@ export default {
     timeFilter: Object,
     q: String
   },
+  components: {
+    EventsTimeline
+  },
   data () {
     return {
-      basicInfo: {}
+      countryNameIdMapping
     }
   },
   methods: {

src/views/detections/overview/SequenceOverview.vue

@@ -40,7 +40,7 @@
       </div>
 
       <div v-if="eventFlag===detectionEventType.aggregation">
-        <div class="overview__title" style="margin: 10px 0;">{{ $t('detection.timeOfOccurrences') }}</div>
+        <div class="overview__title overview__title__margin">{{ $t('detection.timeOfOccurrences') }}</div>
         <div class="overview__row">
           <div class="row__content1">
             <events-timeline :timeFilter="timeFilter" :timeData="timeData" @change="changeTimeline"></events-timeline>

src/views/detections/overview/ThresholdOverview.vue

@@ -18,7 +18,7 @@
       </div>
 
       <div v-if="eventFlag===detectionEventType.aggregation">
-        <div class="overview__title" style="margin: 10px 0;">{{ $t('detection.timeOfOccurrences') }}</div>
+        <div class="overview__title overview__title__margin">{{ $t('detection.timeOfOccurrences') }}</div>
         <div class="overview__row">
           <div class="row__content1">
             <events-timeline :timeFilter="timeFilter" :timeData="timeData" @change="changeTimeline"></events-timeline>

src/views/detections/overview/detectionDetailMixin.js

@@ -46,7 +46,7 @@ export default {
             this.timeData = res.data.data.result
           }
         }).catch(e => {
-          //
+          this.$message.error(this.errorMsgHandler(e))
         })
       } else {
         this.isGroup = 0
@@ -56,8 +56,8 @@ export default {
         this.myChart.dispose()
       }
       const params = {
-        startTime: this.timeFilter.startTime,
+        startTime: getSecond(this.timeFilter.startTime),
-        endTime: this.timeFilter.endTime,
+        endTime: getSecond(this.timeFilter.endTime),
         eventId: this.detection.eventId,
         ruleType: this.detection.ruleType,
         resource: this.q,
@@ -76,12 +76,14 @@ export default {
             this.myChart.setOption(this.lineOption)
           } else {
             const detailData = res.data.data.result.pop()
-            if (detailData.eventInfo) {
+            if (detailData?.eventInfo) {
               detailData.eventInfoList = JSON.parse(detailData.eventInfo)
             }
-            this.myDetection = detailData
+            this.myDetection = { ...detailData, ...this.detection }
           }
         }
+      }).catch(e => {
+        this.$message.error(this.errorMsgHandler(e))
       })
     },
     changeTimeline (e) {
@@ -99,8 +101,10 @@ export default {
           if (detailData.eventInfo) {
             detailData.eventInfoList = JSON.parse(detailData.eventInfo)
           }
-          this.myDetection = detailData
+          this.myDetection = { ...this.myDetection, ...detailData }
         }
+      }).catch(e => {
+        this.$message.error(this.errorMsgHandler(e))
       })
     }
   }