fix: 修复detection一些问题

2022-03-04 15:46:30 +08:00
parent b640da089a
commit 5bbda24a17
3 changed files with 117 additions and 82 deletions
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -89,7 +89,7 @@ export const api = {
    },
    performanceEvent: {
      eventSeverityTrend: '/interface/detection/performance/filter/severityTrend',
-      securityType: '/interface/detection/performance/filter/eventType',
+      eventType: '/interface/detection/performance/filter/eventType',
      eventSeverity: '/interface/detection/performance/filter/severity',
      activeEntity: '/interface/detection/performance/filter/activeEntity',
      listBasic: '/interface/detection/performance/list/basic',
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -203,8 +203,8 @@ export default {
            data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
          },
          {
-            title: this.$t('detections.securityType'),
-            column: 'securityType',
+            title: this.$t('detections.eventType'),
+            column: 'eventType',
            collapse: false,
            value: [],
            data: [] // 从接口动态获取
@@ -227,7 +227,7 @@ export default {
      isStatisticsSeverityNoData: false,
      isStatisticsCategoryNoData: false,
      isStatisticsActiveAttackNoData: false,
-      loading: false,
+      loading: false
    }
  },
  methods: {
@@ -349,11 +349,11 @@ export default {
        ] */
        this.eventSeverityData = data
        if (!this.$_.isEmpty(data)) {
-          let dataMap = new Map()
+          const dataMap = new Map()
          data.forEach(item => {
            if (item.eventSeverity) {
              if (!dataMap.has(item.eventSeverity)) {
-                let count = [[item.statTime,item.count]]
+                const count = [[item.statTime, item.count]]
                dataMap.set(item.eventSeverity, count)
              } else {
                dataMap.get(item.eventSeverity).push([item.statTime, item.count])
@@ -364,13 +364,11 @@ export default {
          const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption)
          dataMap.forEach(function (value, key) {
            eventSeverityTrendOption.series[Number(getSeriesIndex(key))].data = value.map(v => Number(v[1]))
-          });
+          })
          eventSeverityTrendOption.xAxis.data = dataMap.get('critical').map(v => rTime(v[0]))
          const detectionChart = echarts.init(chartDom)
          detectionChart.setOption(eventSeverityTrendOption)
          // this.isEventSeverityNoData = false
-
-
        } else {
          // this.isEventSeverityNoData = true
        }
@@ -421,8 +419,8 @@ export default {

      })
    },
-    initSecurityTypeData (params) {
-      getData(api.detection[this.pageType].securityType, params).then(data => {
+    initEventTypeData (params) {
+      getData(api.detection[this.pageType].eventType, params).then(data => {
        /* data = [
          {
            attackType: 'command and control',
@@ -445,21 +443,40 @@ export default {
          }
        ] */
        this.statisticsCategoryData = data
-        //this.isStatisticsCategoryNoData = true
        if (!this.$_.isEmpty(data)) {
          this.filterData[this.pageType][1].data = data.map(r => ({
-            label: r.attackType,
-            value: r.attackType,
+            label: r.eventType,
+            value: r.eventType,
            count: r.count
          }))
          const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
          const detectionChart = echarts.init(chartDom)
          const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
          securityTypeOption.series[0].data = data.map(d => {
-            return {value: d.count, name: d.attackType, itemStyle: {color: getAttackColor(d.attackType)}}
+            return { value: d.count, name: d.eventType, itemStyle: { color: getAttackColor(d.eventType) } }
+          })
+          detectionChart.setOption(securityTypeOption)
+        }
+      }).catch(error => {
+
+      })
+    },
+    initSecurityTypeData (params) {
+      getData(api.detection[this.pageType].securityType, params).then(data => {
+        this.statisticsCategoryData = data
+        if (!this.$_.isEmpty(data)) {
+          this.filterData[this.pageType][1].data = data.map(r => ({
+            label: r.securityType,
+            value: r.securityType,
+            count: r.count
+          }))
+          const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
+          const detectionChart = echarts.init(chartDom)
+          const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
+          securityTypeOption.series[0].data = data.map(d => {
+            return { value: d.count, name: d.securityType, itemStyle: { color: getAttackColor(d.securityType) } }
          })
          detectionChart.setOption(securityTypeOption)
-          //this.isStatisticsCategoryNoData = false
        }
      }).catch(error => {

@@ -532,7 +549,7 @@ export default {
          const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
          const detectionChart = echarts.init(chartDom)
          const offenderIpOption = this.$_.cloneDeep(activeAttackBar)
-          data.sort(this.sortBy('count'));
+          data.sort(this.sortBy('count'))
          data = data.slice(0, 5)
          offenderIpOption.series[0].data = data.map(d => {
            return [d.count, d.offenderIp]
@@ -1073,14 +1090,15 @@ export default {
      }
      this.initEventSeverityTrendData(params)
      this.initEventSeverityData(params)
-      this.initSecurityTypeData(params)
      if (this.pageType === detectionPageType.securityEvent) {
        this.initOffenderIpData(params)
        this.initOffenderLocationData(params)
        this.initVictimIpData(params)
        this.initVictimLocationData(params)
+        this.initSecurityTypeData(params)
      } else if (this.pageType === detectionPageType.performanceEvent) {
        this.initActiveEntity(params)
+        this.initEventTypeData(params)
      }
    },
    queryListTotal () {
--- a/src/views/detections/overview/DetectionSecurityEventOverview.vue
+++ b/src/views/detections/overview/DetectionSecurityEventOverview.vue
@@ -117,7 +117,7 @@
      <div class="overview__title">{{$t('detections.relatedDetections')}}</div>
      <div class="overview__row-timeline">
        <div class="row-timeline" v-for="event in events" :key="event">
-          <div class="row-timeline__time-info" :style="event.startTime === basicInfo.startTime ? 'color: #333;font-weight: bold;' : ''">{{formatT0(event.startTime)}}</div>
+          <div class="row-timeline__time-info" :style="event.startTime === basicInfo.startTime ? 'color: #333;font-weight: bold;' : ''">{{formatT0(event)}}</div>
          <div class="row-timeline__line">
            <div class="line-point-larger" v-if="event.startTime === basicInfo.startTime">
              <div class="line-point"></div>
@@ -154,7 +154,8 @@
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getMillisecond } from '@/utils/date-util'
-import { eventSeverityColor } from '@/utils/constants'
+import { eventSeverityColor, unitTypes } from '@/utils/constants'
+import unitConvert from '@/utils/unit-convert'
 export default {
  name: 'DetectionOverview',
  props: {
@@ -170,8 +171,23 @@ export default {
  },
  computed: {
    formatT0 () {
-      return function (startTime) {
-        return startTime === this.basicInfo.startTime ? 'T0' : 'T0-10m'
+      return function (event) {
+        const diffSeconds = event.diffSeconds
+        if (diffSeconds === 0) {
+          return 'T0'
+        }
+        const eventStartTime = event.startTime
+        const entityStartTime = this.basicInfo ? this.basicInfo.startTime : ''
+
+        if (!this.$_.isEmpty(diffSeconds) && !this.$_.isEmpty(eventStartTime) && !this.$_.isEmpty(entityStartTime)) {
+          const suffix = unitConvert(diffSeconds, unitTypes.time, 's', null, 0).join('')
+          if (eventStartTime > entityStartTime) {
+            return `T0+${suffix}`
+          } else if (eventStartTime < entityStartTime) {
+            return `T0-${suffix}`
+          }
+        }
+        return ''
      }
    }
  },
@@ -179,6 +195,7 @@ export default {
    getMillisecond,
    query () {
      Promise.all([this.queryBasic(), this.queryEvent()]).then(responses => {
+        console.info(responses)
        responses[0] && (this.basicInfo = responses[0])
        responses[1] && (this.events = responses[1])
      })
@@ -201,7 +218,7 @@ export default {
    queryEvent () {
      return new Promise((resolve, reject) => {
        try {
-          get(api.detection.securityEvent.overviewEvent, { eventId: this.detection.eventId, offenderIp: this.detection.offenderIp, victimIp: this.detection.victimIp }).then(response => {
+          get(api.detection.securityEvent.overviewEvent, { startTime: this.detection.startTime, offenderIp: this.detection.offenderIp, victimIp: this.detection.victimIp }).then(response => {
            if (response.code === 200) {
              resolve(response.data.result)
            } else {