CN-403 fix: performance详情域名截取二级域名

2022-03-17 17:56:38 +08:00
parent 2000d1645e
commit 4e737f5871
25 changed files with 317 additions and 269 deletions
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -112,7 +112,7 @@ import { ref } from 'vue'
 import * as echarts from 'echarts'
 import { multipleBarOption, pieForSeverity, activeAttackBar, getAttackColor, getSeverityColor, getSeriesIndex } from '@/views/detections/options/detectionOptions'
 import { api, getData } from '@/utils/api'
-import { reverseSortBy ,sortBy ,extensionEchartY} from '@/utils/tools'
+import { reverseSortBy, sortBy, extensionEchartY } from '@/utils/tools'
 import { useRoute } from 'vue-router'
 import DetectionNoData from '@/views/detections/DetectionNoData'

@@ -237,7 +237,7 @@ export default {
    initEventSeverityTrendData (params) {
      this.loading = true
      getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => {
-        /*data = [
+        /* data = [
          {
            "statTime": "2022-01-01T10:07:03.008Z",
            "eventSeverity": "critical",
@@ -329,7 +329,7 @@ export default {
            "eventSeverity": "info",
            "count": 27
          },
-        ]*/
+        ] */
        this.eventSeverityData = data
        if (!this.$_.isEmpty(data)) {
          const dataMap = new Map()
@@ -347,36 +347,36 @@ export default {
          const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`)
          const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption)

-          let xData = []
+          const xData = []
          dataMap.forEach(function (value, key) {
-            //eventSeverityTrendOption.series[Number(getSeriesIndex(key))].data = value.map(v => Number(v[1]))
+            // eventSeverityTrendOption.series[Number(getSeriesIndex(key))].data = value.map(v => Number(v[1]))
            value.forEach(item => {
-              if(xData.indexOf(item[0]) < 0){
+              if (xData.indexOf(item[0]) < 0) {
                xData.push(item[0])
              }
            })
          })
          eventSeverityTrendOption.series.forEach(serie => {
-            let seriesData = []
+            const seriesData = []
            xData.forEach(item => {
-              if(dataMap.has(serie.name)){
-                let hasX = dataMap.get(serie.name).some(function(v) {
+              if (dataMap.has(serie.name)) {
+                const hasX = dataMap.get(serie.name).some(function (v) {
                  if (item == v[0]) {
                    seriesData.push(Number(v[1]))
-                    return true;
+                    return true
                  }
                })
-                if(!hasX){
+                if (!hasX) {
                  seriesData.push(0)
                }
-              }else {
+              } else {
                seriesData.push(0)
              }
            })
            serie.data = seriesData
          })

-          //eventSeverityTrendOption.xAxis.data = dataMap.get('info').map(v => rTime(v[0]))
+          // eventSeverityTrendOption.xAxis.data = dataMap.get('info').map(v => rTime(v[0]))
          eventSeverityTrendOption.xAxis.data = xData
          const detectionChart = echarts.init(chartDom)
          detectionChart.setOption(eventSeverityTrendOption)
@@ -709,7 +709,7 @@ export default {
            return [d.count, d.name]
          }).reverse()
          detectionChart.setOption(option)
-          extensionEchartY(detectionChart)//y轴标签过长时，鼠标悬浮，显示所有内容
+          extensionEchartY(detectionChart)// y轴标签过长时，鼠标悬浮，显示所有内容
        }
      }).catch(error => {
      })
--- a/src/views/detections/options/detectionOptions.js
+++ b/src/views/detections/options/detectionOptions.js
@@ -104,7 +104,7 @@ export const multipleBarOption = {
    {
      name: 'critical',
      type: 'bar',
-      stack:'eventSeverityTrend',
+      stack: 'eventSeverityTrend',
      emphasis: {
        focus: 'series'
      },
@@ -117,7 +117,7 @@ export const multipleBarOption = {
    {
      name: 'high',
      type: 'bar',
-      stack:'eventSeverityTrend',
+      stack: 'eventSeverityTrend',
      emphasis: {
        focus: 'series'
      },
@@ -130,7 +130,7 @@ export const multipleBarOption = {
    {
      name: 'medium',
      type: 'bar',
-      stack:'eventSeverityTrend',
+      stack: 'eventSeverityTrend',
      emphasis: {
        focus: 'series'
      },
@@ -143,7 +143,7 @@ export const multipleBarOption = {
    {
      name: 'low',
      type: 'bar',
-      stack:'eventSeverityTrend',
+      stack: 'eventSeverityTrend',
      emphasis: {
        focus: 'series'
      },
@@ -156,7 +156,7 @@ export const multipleBarOption = {
    {
      name: 'info',
      type: 'bar',
-      stack:'eventSeverityTrend',
+      stack: 'eventSeverityTrend',
      emphasis: {
        focus: 'series'
      },
@@ -253,14 +253,14 @@ export const activeAttackBar = {
    axisLine: { show: false },
    axisLabel: {
      show: true,
-      width:95,
-      overflow:'truncate',
+      width: 95,
+      overflow: 'truncate'

    },
    splitLine: {
      show: false
    },
-    triggerEvent: true,
+    triggerEvent: true
  },
  series: [{
    barWidth: 5,
--- a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
@@ -45,7 +45,12 @@
    <div class="overview__right">
      <div class="overview__title">{{$t('detections.goToEntity')}}</div>
      <div class="overview__row">
-        <div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: detection.appName})}}</div>
+        <div class="row__content">
+          <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
+          <span
+              class="row__content--link"
+              @click="goDetail('app', detection.appName)">{{detection.appName}}</span>
+        </div>
      </div>
      <div class="overview__title">{{$t('detections.goToHunt')}}</div>
      <div class="overview__row">
@@ -111,16 +116,16 @@ export default {
        }
      })
    },
-    goDetail(type, name) {
+    goDetail (type, name) {
      const { href } = this.$router.resolve({
        path: '/entityDetail',
        query: {
          entityType: type,
-          name: name,
-        },
+          name: name
+        }
      })
      window.open(href, '_blank')
-    },
+    }
  },
  mounted () {
    this.query()
--- a/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
@@ -49,7 +49,12 @@
    <div class="overview__right">
      <div class="overview__title">{{$t('detections.goToEntity')}}</div>
      <div class="overview__row">
-        <div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: detection.domain})}}</div>
+        <div class="row__content">
+          <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
+          <span
+              class="row__content--link"
+              @click="goDetail('domain', computeSecondaryDomain(detection.domain))">{{computeSecondaryDomain(detection.domain)}}</span>
+        </div>
      </div>
      <div class="overview__title">{{$t('detections.goToHunt')}}</div>
      <div class="overview__row">
@@ -61,7 +66,7 @@

 <script>
 import { api, getData } from '@/utils/api'
-import { eventSeverityColor } from '@/utils/constants'
+import { eventSeverityColor, topDomain } from '@/utils/constants'
 export default {
  name: 'DetectionPerformanceEventDomainOverview',
  props: {
@@ -94,12 +99,38 @@ export default {
        }
        return result || '-'
      }
+    },
+    computeSecondaryDomain () {
+      return function (name) {
+        // 命中的顶级域名
+        let hitTopDomain = ''
+        // 同顶级域名比对
+        const hits = []
+        topDomain.forEach(td => {
+          const hitIndex = name.lastIndexOf(td)
+          if (hitIndex > -1 && hitIndex + td.length === name.length) {
+            hits.push(td)
+          }
+        })
+        if (hits.length > 0) {
+          hits.sort((a, b) => {
+            return b.split('.').length - a.split('.').length
+          })
+          hitTopDomain = hits[0]
+        } else {
+          const arr = name.split('.')
+          hitTopDomain = arr[arr.length - 1]
+        }
+        const index = name.lastIndexOf(hitTopDomain)
+        const preArr = name.substring(0, index).split('.')
+        return [preArr[preArr.length - 2], hitTopDomain].join('.')
+      }
    }
  },
  methods: {
    query () {
      this.queryBasic().then(responses => {
-        responses && (this.basicInfo = responses) 
+        responses && (this.basicInfo = responses)
      })
    },
    queryBasic () {
@@ -115,16 +146,16 @@ export default {
        }
      })
    },
-    goDetail(type, name) {
+    goDetail (type, name) {
      const { href } = this.$router.resolve({
        path: '/entityDetail',
        query: {
          entityType: type,
-          name: name,
-        },
+          name: name
+        }
      })
      window.open(href, '_blank')
-    },
+    }
  },
  mounted () {
    this.query()
--- a/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
@@ -39,7 +39,12 @@
    <div class="overview__right">
      <div class="overview__title">{{$t('detections.goToEntity')}}</div>
      <div class="overview__row">
-        <div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: detection.serverIp})}}</div>
+        <div class="row__content">
+          <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
+          <span
+              class="row__content--link"
+              @click="goDetail('ip', detection.serverIp)">{{detection.serverIp}}</span>
+        </div>
      </div>
      <div class="overview__title">{{$t('detections.goToHunt')}}</div>
      <div class="overview__row">
@@ -103,16 +108,16 @@ export default {
        }
      })
    },
-    goDetail(type, name) {
+    goDetail (type, name) {
      const { href } = this.$router.resolve({
        path: '/entityDetail',
        query: {
          entityType: type,
-          name: name,
-        },
+          name: name
+        }
      })
      window.open(href, '_blank')
-    },
+    }
  },
  mounted () {
    this.query()
--- a/src/views/detections/overview/DetectionSecurityEventOverview.vue
+++ b/src/views/detections/overview/DetectionSecurityEventOverview.vue
@@ -173,9 +173,7 @@
          <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
          <span
            class="row__content--link"
-            @click="goDetail('ip', basicInfo.victimIp)"
-            >{{ basicInfo.victimIp }}</span
-          >
+            @click="goDetail('ip', basicInfo.victimIp)"></span>
        </div>
      </div>
      <div class="overview__title">{{ $t('detections.goToOffender') }}</div>
@@ -287,18 +285,18 @@ import _ from 'lodash'
 export default {
  name: 'DetectionOverview',
  props: {
-    detection: Object,
+    detection: Object
  },
-  data() {
+  data () {
    return {
      eventSeverityColor,
      basicInfo: {},
      events: [],
-      reference: 'https://attack.mitre.org',
+      reference: 'https://attack.mitre.org'
    }
  },
  computed: {
-    formatT0() {
+    formatT0 () {
      const vm = this
      return function (event) {
        const diffSeconds = event.diffSeconds
@@ -318,7 +316,7 @@ export default {
            unitTypes.time,
            's',
            null,
-            0,
+            0
          ).join('')
          if (eventStartTime > entityStartTime) {
            return `T0+${suffix}`
@@ -328,26 +326,26 @@ export default {
        }
        return ''
      }
-    },
+    }
  },
  methods: {
    getMillisecond,
-    query() {
+    query () {
      Promise.all([this.queryBasic(), this.queryEvent()]).then((responses) => {
        responses[0] && (this.basicInfo = responses[0])
        responses[1] &&
          (this.events = responses[1].sort(
-            (e1, e2) => e1.startTime - e2.startTime,
+            (e1, e2) => e1.startTime - e2.startTime
          ))
      })
    },
-    queryBasic() {
+    queryBasic () {
      return new Promise((resolve, reject) => {
        try {
          get(api.detection.securityEvent.overviewBasic, {
            eventId: this.detection.eventId,
            startTime: this.detection.startTime,
-            endTime: this.detection.endTime,
+            endTime: this.detection.endTime
          }).then((response) => {
            if (response.code === 200) {
              resolve(response.data.result[0])
@@ -360,13 +358,13 @@ export default {
        }
      })
    },
-    queryEvent() {
+    queryEvent () {
      return new Promise((resolve, reject) => {
        try {
          get(api.detection.securityEvent.overviewEvent, {
            startTime: this.detection.startTime,
            offenderIp: this.detection.offenderIp,
-            victimIp: this.detection.victimIp,
+            victimIp: this.detection.victimIp
          }).then((response) => {
            if (response.code === 200) {
              resolve(response.data.result)
@@ -379,19 +377,19 @@ export default {
        }
      })
    },
-    goDetail(type, name) {
+    goDetail (type, name) {
      const { href } = this.$router.resolve({
        path: '/entityDetail',
        query: {
          entityType: type,
-          name: name,
-        },
+          name: name
+        }
      })
      window.open(href, '_blank')
-    },
+    }
  },
-  mounted() {
+  mounted () {
    this.query()
-  },
+  }
 }
 </script>