fix: 修复detection问题

2022-03-03 23:21:33 +08:00
parent ed373c1c85
commit c2c4cfc482
9 changed files with 187 additions and 126 deletions
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -170,6 +170,15 @@ export const detectionPageType = {
  performanceEvent: 'performanceEvent'
 }

+export const dnsServerRole = {
+  RTDNS: 'RTDNS',
+  TLDNS: 'TLDNS',
+  OPRDNS: 'OPRDNS',
+  ADNS: 'ADNS',
+  SBDNS: 'SBDNS',
+  RTDNSM: 'RTDNSM'
+}
+
 export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
  '#73BFDE', '#3BA172', '#FC8452', '#9960B4',
  '#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC',
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -46,6 +46,7 @@
 import ChartHeader from './ChartHeader'
 import Chart from '@/views/charts/Chart'
 import testData from './charts/testData'
+import { dnsServerRole } from '@/utils/constants'
 import {
  isEcharts,
  isSingleValue,
@@ -189,7 +190,11 @@ export default {
          ...this.entity,
          ...extraParams
        }
+        // 默认参数特殊处理
        const requestUrl = url || (chartParams && chartParams.url)
+        if (requestUrl && requestUrl.indexOf('dnsServerRole') > -1) {
+          this.queryParams.dnsServerRole = dnsServerRole.RTDNS
+        }
        if (requestUrl) {
          get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
            // if (this.chartInfo.type === 23 && testData) {
@@ -197,6 +202,27 @@ export default {
            // } else if (this.chartInfo.type === 24 && testData) {
            //   response = testData.data2
            // }
+            if (this.chartInfo.type === 3) {
+              response = {
+                code: 200,
+                data: {
+                  result: [
+                    {
+                      "dnsServerRole":"TLDNS",
+                      "ipLocationCountry":"China",
+                      "ipLocationId":"CN",
+                      "count":161
+                    },
+                    {
+                      "dnsServerRole":"RTDNS",
+                      "ipLocationCountry":"Japan",
+                      "ipLocationId":"JP",
+                      "count":222
+                    }
+                  ]
+                }
+              }
+            }
            if (response.code === 200) {
              if (Array.isArray(response.data.result)) {
                response.data.result.forEach(item => {
--- a/src/views/charts/charts/ChartMap.vue
+++ b/src/views/charts/charts/ChartMap.vue
@@ -6,10 +6,9 @@
 <script>
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
-import { getGeoData, replaceUrlPlaceholder } from '@/utils/tools'
-import { storageKey } from '@/utils/constants'
-
-import { isMapBlock } from './tools'
+import { getGeoData, replaceUrlPlaceholder, getCapitalGeo } from '@/utils/tools'
+import { storageKey, dnsServerRole } from '@/utils/constants'
+import { isMapBlock, isMapPoint } from './tools'
 import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
 import { HeatLegend } from '@/components/amcharts/heatLegend'
 import { getData } from '@/utils/api'
@@ -72,6 +71,7 @@ export default {
      })
    },
    loadAm4ChartMap (polygonSeries, country, chartData) {
+      // chartData不为空是下钻
      if (chartData) {
        this.$emit('showLoading', true)
      }
@@ -111,8 +111,9 @@ export default {
            showValue: (r.value || r.value === 0) ? valueToRangeValue(r.value, chartParams.unitType).join(' ') : ''
          }))
          !this.$_.isEmpty(seriesData) && (polygonSeries.data = [...seriesData])
+          // 数据全为0的情况，legend只显示1个颜色
          const sorted = seriesData.sort((a, b) => b.value - a.value)
-          const allZero = this.$_.isEmpty(sorted) || Number(sorted[0].value) === 0 // 数据全为0的情况，legend只显示1个颜色
+          const allZero = this.$_.isEmpty(sorted) || Number(sorted[0].value) === 0

          polygonSeries.heatRules.push({
            property: 'fill',
@@ -142,6 +143,56 @@ export default {
          heatLegend.valueAxis.renderer.labels.template.adapter.add('text', function (labelText) {
            return ''
          })
+        } else if (data && this.isMapPoint) {
+          const seriesData = []
+          data.forEach(d => {
+            seriesData.push({
+              id: d.ipLocationId,
+              count: d.count,
+              dnsServerRole: d.dnsServerRole,
+              location: d.ipLocationCity || d.ipLocationProvince || d.ipLocationCountry,
+              desc: this.$t(this.dnsTypeI18n(d.dnsServerRole)),
+              color: this.circleColor[d.dnsServerRole].background,
+              border: this.circleColor[d.dnsServerRole].border
+            })
+          })
+          console.info(seriesData)
+          const imageSeries = this.myChart.series.push(new am4Maps.MapImageSeries())
+          imageSeries.data = seriesData
+          imageSeries.dataFields.value = 'count'
+
+          const imageTemplate = imageSeries.mapImages.template
+          imageTemplate.nonScaling = true
+
+          imageTemplate.adapter.add('latitude', function (latitude, target) {
+            const polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id)
+            if (polygon) {
+              return polygon.visualLatitude
+            }
+            return latitude
+          })
+
+          imageTemplate.adapter.add('longitude', function (longitude, target) {
+            const polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id)
+            if (polygon) {
+              return polygon.visualLongitude
+            }
+            return longitude
+          })
+
+          const circle = imageTemplate.createChild(am4Core.Circle)
+          circle.propertyFields.fill = 'color'
+          circle.propertyFields.stroke = 'border'
+          circle.strokeWidth = 1
+          circle.tooltipText = '[bold]{location}[/]\n{desc}: {count}'
+
+          imageSeries.heatRules.push({
+            target: circle,
+            property: 'radius',
+            min: 4,
+            max: 30,
+            dataField: 'value'
+          })
        }
      } catch (e) {
        console.error(e)
@@ -161,6 +212,37 @@ export default {
        this.myChart.goHome()
      })
    },
+    dnsTypeI18n (role) {
+      let i18n = ''
+      switch (role) {
+        case dnsServerRole.RTDNS: {
+          i18n = 'dns.rootDomainServers'
+          break
+        }
+        case dnsServerRole.TLDNS: {
+          i18n = 'dns.topLevelDomainServers'
+          break
+        }
+        case dnsServerRole.OPRDNS: {
+          i18n = 'dns.publicRecursiveDomainServers'
+          break
+        }
+        case dnsServerRole.ADNS: {
+          i18n = 'dns.authoritativeDomainServers'
+          break
+        }
+        case dnsServerRole.SBDNS: {
+          i18n = 'dns.selfBuiltDomainServers'
+          break
+        }
+        case dnsServerRole.RTDNSM: {
+          i18n = 'RTDNSM'
+          break
+        }
+        default: break
+      }
+      return i18n
+    },
    generateTooltipHTML () {
      return `
        <div class="map-tooltip" style="padding-bottom: 10px;">
@@ -206,8 +288,35 @@ export default {
    }
  },
  setup (props) {
+    const circleColor = {}
+    circleColor[dnsServerRole.RTDNS] = {
+      background: '#C0DEFE',
+      border: '#478AD5'
+    }
+    circleColor[dnsServerRole.TLDNS] = {
+      background: '#DBCFFA',
+      border: '#AA8CF2'
+    }
+    circleColor[dnsServerRole.ADNS] = {
+      background: '#A0E8E0',
+      border: '#1CC9B5'
+    }
+    circleColor[dnsServerRole.OPRDNS] = {
+      background: '#FFE1B5',
+      border: '#FFB84E'
+    }
+    circleColor[dnsServerRole.SBDNS] = {
+      background: '#FDC6C6',
+      border: '#FA7777'
+    }
+    circleColor[dnsServerRole.RTDNSM] = {
+      background: '#ECC6F7',
+      border: '#BF49DF'
+    }
    return {
-      isMapBlock: isMapBlock(props.chartInfo.type)
+      circleColor,
+      isMapBlock: isMapBlock(props.chartInfo.type),
+      isMapPoint: isMapPoint(props.chartInfo.type)
    }
  }
 }
--- a/src/views/charts/charts/tools.js
+++ b/src/views/charts/charts/tools.js
@@ -63,6 +63,10 @@ export function isMapLine (type) {
 export function isMapBlock (type) {
  return type === 2
 }
+/* 散点地图 */
+export function isMapPoint (type) {
+  return type === 3
+}
 /* 普通折线图 */
 export function isEchartsLine (type) {
  return type === 11
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -402,82 +402,6 @@ export default {
        ]*/
        this.statisticsSeverityData = data
        //this.isStatisticsSeverityNoData = true
-        this.filterData = {
-          securityEvent: [
-            {
-              title: this.$t('detections.eventSeverity'),
-              column: 'eventSeverity',
-              collapse: false,
-              value: [], // value之间是or的关系
-              data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
-            },
-            {
-              title: this.$t('detections.securityType'),
-              column: 'securityType',
-              collapse: false,
-              value: [],
-              data: [] // 从接口动态获取
-            },
-            {
-              title: this.$t('detections.victimIp'),
-              column: 'victimIp',
-              collapse: false,
-              value: [],
-              showMore: true,
-              showIndex: 9,
-              data: [] // 从接口动态获取
-            },
-            {
-              title: this.$t('detections.victimLocation'),
-              column: 'victimLocationCountry',
-              collapse: false,
-              value: [],
-              showMore: false,
-              showIndex: 9,
-              data: [
-                {
-                  label: 'China',
-                  value: 'china',
-                  count: 50
-                }
-              ] // 从接口动态获取
-            },
-            {
-              title: this.$t('detections.offenderIp'),
-              column: 'offenderIp',
-              collapse: false,
-              value: [],
-              showMore: false,
-              showIndex: 9,
-              data: [] // 从接口动态获取
-            },
-            {
-              title: this.$t('detections.offenderLocation'),
-              column: 'offenderLocationCountry',
-              collapse: false,
-              value: [],
-              showMore: false,
-              showIndex: 9,
-              data: [] // 从接口动态获取
-            }
-          ],
-          performanceEvent: [
-            {
-              title: this.$t('detections.eventSeverity'),
-              column: 'eventSeverity',
-              collapse: false,
-              value: [], // value之间是or的关系
-              data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
-            },
-            {
-              title: this.$t('detections.securityType'),
-              column: 'securityType',
-              collapse: false,
-              value: [],
-              data: [] // 从接口动态获取
-            }
-          ]
-        }
        if (!this.$_.isEmpty(data)) {
          this.filterData[this.pageType][0].data = data.map(r => ({ label: r.eventSeverity, value: r.eventSeverity, count: r.count }))
          const eventSeverityOption = this.$_.cloneDeep(pieForSeverity)
@@ -788,7 +712,9 @@ export default {
      const params = {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime),
-        q: this.q
+        q: this.q,
+        pageSize: this.pageObj.pageSize,
+        pageNo: this.pageObj.pageNo
      }
      getData(api.detection[this.pageType].listBasic, params).then(data => {
        if (this.pageType === detectionPageType.securityEvent) {
@@ -1126,7 +1052,16 @@ export default {
      this.queryList()
      this.queryListTotal()
    },
+    resetFilterData () {
+      this.filterData.securityEvent.forEach(d => {
+        d.data = []
+      })
+      this.filterData.performanceEvent.forEach(d => {
+        d.data = []
+      })
+    },
    queryFilter () {
+      this.resetFilterData()
      const params = {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime),
--- a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
@@ -8,7 +8,7 @@
      <div class="overview__title">Fields</div>
      <div class="overview__row">
        <div class="row__label">{{$t('entities.category')}}</div>
-        <div class="row__content">{{basicInfo.appCategory}}</div>
+        <div class="row__content">{{basicInfo.appCategory || '-'}}</div>
      </div>
      <div class="overview__row">
        <div class="row__label">{{$t('entities.subcategory')}}</div>
@@ -35,8 +35,7 @@
 </template>

 <script>
-import { get } from '@/utils/http'
-import { api } from '@/utils/api'
+import { api, getData } from '@/utils/api'
 import { eventSeverityColor } from '@/utils/constants'
 export default {
  name: 'DetectionPerformanceEventAppOverview',
@@ -74,21 +73,17 @@ export default {
  },
  methods: {
    query () {
-      this.basicInfo = {
-      }
      this.queryBasic().then(responses => {
+        responses && (this.basicInfo = responses)
      })
    },
    queryBasic () {
      return new Promise((resolve, reject) => {
        try {
-          get(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(response => {
-            if (response.code === 200) {
-              this.basicInfo = response.data.result[0]
-              resolve(response.data.result)
-            } else {
-              reject(response)
-            }
+          getData(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(data => {
+            resolve(data[0])
+          }).catch(error => {
+            reject(error)
          })
        } catch (e) {
          reject(e)
--- a/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
@@ -8,7 +8,7 @@
      <div class="overview__title">Fields</div>
      <div class="overview__row">
        <div class="row__label">{{$t('entities.category')}}</div>
-        <div class="row__content">{{basicInfo.domainCategoryName}}</div>
+        <div class="row__content">{{basicInfo.domainCategoryName || '-'}}</div>
      </div>
      <div class="overview__row">
        <div class="row__label">{{$t('entities.group')}}</div>
@@ -39,8 +39,7 @@
 </template>

 <script>
-import { get } from '@/utils/http'
-import { api } from '@/utils/api'
+import { api, getData } from '@/utils/api'
 import { eventSeverityColor } from '@/utils/constants'
 export default {
  name: 'DetectionPerformanceEventDomainOverview',
@@ -78,21 +77,17 @@ export default {
  },
  methods: {
    query () {
-      this.basicInfo = {
-      }
      this.queryBasic().then(responses => {
+        responses && (this.basicInfo = responses)
      })
    },
    queryBasic () {
      return new Promise((resolve, reject) => {
        try {
-          get(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(response => {
-            if (response.code === 200) {
-              this.basicInfo = response.data.result[0]
-              resolve(response.data.result)
-            } else {
-              reject(response)
-            }
+          getData(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(data => {
+            resolve(data[0])
+          }).catch(error => {
+            reject(error)
          })
        } catch (e) {
          reject(e)
--- a/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
@@ -65,17 +65,15 @@ export default {
  },
  methods: {
    query () {
-      this.basicInfo = {
-      }
      this.queryBasic().then(responses => {
+        responses && (this.basicInfo = responses)
      })
    },
    queryBasic () {
      return new Promise((resolve, reject) => {
        try {
          getData(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.serverIp }).then(data => {
-            this.basicInfo = data[0]
-            resolve(data)
+            resolve(data[0])
          }).catch(error => {
            reject(error)
          })
--- a/src/views/detections/overview/DetectionSecurityEventOverview.vue
+++ b/src/views/detections/overview/DetectionSecurityEventOverview.vue
@@ -3,7 +3,7 @@
    <div class="overview__left">
      <div class="overview__title">{{$t('overall.remark')}}</div>
      <div class="overview__row">
-        <div class="row__content">{{basicInfo.malwareDescription || '-'}}</div>
+        <div class="row__content">Description</div>
      </div>
      <div class="overview__title">Fields</div>
      <div class="overview__row">
@@ -178,11 +178,9 @@ export default {
  methods: {
    getMillisecond,
    query () {
-      this.basicInfo = {
-      }
-      this.events = [
-      ]
      Promise.all([this.queryBasic(), this.queryEvent()]).then(responses => {
+        responses[0] && (this.basicInfo = responses[0])
+        responses[1] && (this.events = responses[1])
      })
    },
    queryBasic () {
@@ -190,11 +188,7 @@ export default {
        try {
          get(api.detection.securityEvent.overviewBasic, { eventId: this.detection.eventId }).then(response => {
            if (response.code === 200) {
-              let data = response.data.result[0]
-                    if (!this.$_.isEmpty(data)) {
-                this.basicInfo = data
-              }
-              resolve(response.data.result)
+              resolve(response.data.result[0])
            } else {
              reject(response)
            }
@@ -207,12 +201,8 @@ export default {
    queryEvent () {
      return new Promise((resolve, reject) => {
        try {
-          get(api.detection.securityEvent.overviewEvent, { eventId: this.detection.eventId }).then(response => {
+          get(api.detection.securityEvent.overviewEvent, { eventId: this.detection.eventId, offenderIp: this.detection.offenderIp, victimIp: this.detection.victimIp }).then(response => {
            if (response.code === 200) {
-              let data = response.data.result
-              if (!this.$_.isEmpty(data)) {
-                this.events = response.data.result
-              }
              resolve(response.data.result)
            } else {
              reject(response)