CN-1676 fix: 1、修复detection的ruleType为threshold时，详情折线图单个点不显示的问题；2、ruleType为sequence时stage下拉详情的字段动态显示

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

@@ -57,6 +57,9 @@ $color-regular: var(--el-text-color-regular);
         line-height: 14px;
         word-break: normal;
       }
+      .row__label__capitalize {
+        text-transform: capitalize;
+      }
 
       .row__charts {
         height: 20px;

src/components/layout/Header.vue

@@ -500,12 +500,15 @@ export default {
     generateBreadcrumb (breadcrumb, menus, tab) {
       const menu = menus.find(m => m.route === this.route)
       if (menu) {
-        breadcrumb.unshift({
-          code: menu.code,
-          value: menu.i18n ? this.$t(menu.i18n) : menu.name,
-          route: menu.route,
-          type: menu.type
-        })
+        if (menu.code !== 'securityEvents') {
+          breadcrumb.unshift({
+            code: menu.code,
+            value: menu.i18n ? this.$t(menu.i18n) : menu.name,
+            route: menu.route,
+            type: menu.type
+          })
+        }
+
         return true
       } else {
         for (let i = 0; i < menus.length; i++) {

src/views/detections/options/detectionOptions.js

@@ -467,7 +467,7 @@ export const lineOption = {
     }
   },
   yAxis: {
-    max: 100
+    // max: 100
   },
   grid: {
     top: '12px',
@@ -482,5 +482,8 @@ export const lineOption = {
       color: '#ff9a79',
       symbol: 'none'
     }
-  ]
+  ],
+  tooltip: {
+    trigger: 'axis'
+  }
 }

src/views/detections/overview/SequenceOverview.vue

@@ -8,34 +8,20 @@
         </div>
       </div>
 
-      <div class="overview__title">{{ $t('detection.detail.stage') }}1</div>
-      <div class="overview__row">
-        <div class="row__label">Dns_query</div>
-        <div class="row__content">{{ $_.get(myDetection, 'eventInfoList[0].domain', '-') || '-' }}</div>
-      </div>
-      <div class="overview__row">
-        <div class="row__label">Time</div>
-        <div class="row__content">
-          <i class="cn-icon cn-icon-time2 row__content__icon"></i>
-          {{ myDetection.startTime ? dateFormatByAppearance(myDetection.startTime) : '-' }}
+      <div v-for="(obj, index) in myDetection.eventInfoList" :key="obj.stage_id">
+        <div class="overview__title margin-t-18">{{ $t('detection.detail.stage') }}{{ index + 1 }}</div>
+        <div v-for="(item, fields) in obj" :key="fields">
+          <div class="overview__row" v-if="fields !== 'stage_id'">
+            <div class="row__label row__label__capitalize">{{ fields }}</div>
+            <div class="row__content">{{ item || '-' }}</div>
+          </div>
         </div>
-      </div>
-      <div class="overview__title">{{ $t('detection.detail.stage') }}2</div>
-      <div class="overview__row">
-        <div class="row__label">Decoded_as</div>
-        <div class="row__content">{{ $_.get(myDetection, 'eventInfoList[1].client_ip', '-') || '-' }}</div>
-      </div>
-
-      <div class="overview__row">
-        <div class="row__label">APP</div>
-        <div class="row__content">{{ $_.get(myDetection, 'eventInfoList[1].app_transition', '-') || '-' }}</div>
-      </div>
-
-      <div class="overview__row">
-        <div class="row__label">Time</div>
-        <div class="row__content">
-          <i class="cn-icon cn-icon-time2 row__content__icon"></i>
-          {{ myDetection.startTime ? dateFormatByAppearance(myDetection.startTime) : '-' }}
+        <div class="overview__row">
+          <div class="row__label">Time</div>
+          <div class="row__content">
+            <i class="cn-icon cn-icon-time2 row__content__icon"></i>
+            {{ myDetection.startTime ? dateFormatByAppearance(myDetection.startTime) : '-' }}
+          </div>
         </div>
       </div>
 

src/views/detections/overview/ThresholdOverview.vue

@@ -12,7 +12,7 @@
         <div class="row__content1">
           <div class="row__content__charts" :id="`myChart${detection.eventId}`"></div>
         </div>
-        <div class="row__content1">
+        <div class="row__content1" v-if="seriesDataNum>1">
           <div class="charts__visual__map"></div>
         </div>
       </div>

src/views/detections/overview/detectionDetailMixin.js

@@ -2,7 +2,7 @@ import { detectionEventType, detectionRuleType } from '@/utils/constants'
 import { getMillisecond, getSecond } from '@/utils/date-util'
 import axios from 'axios'
 import { api } from '@/utils/api'
-import { lineOption } from '@/views/detections/options/detectionOptions'
+import { getSeverityColor, lineOption } from '@/views/detections/options/detectionOptions'
 import { markRaw } from 'vue'
 import * as echarts from 'echarts'
 
@@ -21,7 +21,8 @@ export default {
       timeData: [],
       isGroup: 0,
       myChart: null,
-      lineOption: lineOption
+      lineOption: lineOption,
+      seriesDataNum: 0
     }
   },
   mounted () {
@@ -72,6 +73,16 @@ export default {
               seriesData.push([getMillisecond(JSON.parse(item.statTime)), item.recordsNums])
             })
             this.lineOption.series[0].data = seriesData
+            this.lineOption.series[0].color = getSeverityColor(res.data.data.result[0].severity) || '#ff9a79'
+
+            this.seriesDataNum = seriesData.length
+            if (this.seriesDataNum <= 1) {
+              this.lineOption.series[0].symbol = 'circle'
+              this.lineOption.series[0].symbolSize = 9
+            } else {
+              this.lineOption.series[0].symbol = 'none'
+            }
+
             this.myChart = markRaw(echarts.init(document.getElementById('myChart' + this.detection.eventId)))
             this.myChart.setOption(this.lineOption)
           } else {