CN-399 Detection--服务质量事件指标变化曲线开发:时间查询参数应为秒级时间戳

2022-03-21 15:11:14 +08:00
parent df4c410ce9
commit 7ae2c30eb4
3 changed files with 176 additions and 151 deletions
--- a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
@@ -160,8 +160,8 @@ export default {

          get(api.detection.performanceEvent.metric, {
            domain: this.detection.domain,
-            startTime: this.searchStartTime*1000,
-            endTime: this.searchEndTime*1000,
+            startTime: this.searchStartTime,
+            endTime: this.searchEndTime,
          }).then((response) => {
            if (response.code === 200) {
              resolve(response.data.result[0])
--- a/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
@@ -5,9 +5,9 @@
      <div class="overview__row">
        <div class="row__content">
            <span
-              class="row__content--link"
-              @click="goDetail('domain', computeSecondaryDomain(detection.domain))"
-              >{{ computeSecondaryDomain(detection.domain) }}</span>
+                    class="row__content--link"
+                    @click="goDetail('domain', computeSecondaryDomain(detection.domain))"
+            >{{ computeSecondaryDomain(detection.domain) }}</span>
          <template v-if="detection.eventType === 'dns error'">
            <span>
              {{$t('detections.dnsQueryError')}}
@@ -51,8 +51,8 @@
        <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>
+                  class="row__content--link"
+                  @click="goDetail('domain', computeSecondaryDomain(detection.domain))">{{computeSecondaryDomain(detection.domain)}}</span>
        </div>
      </div>
      <div class="overview__title">{{$t('detections.goToHunt')}}</div>
@@ -91,154 +91,179 @@
 </template>

 <script>
-import { api, getData } from '@/utils/api'
-import { eventSeverityColor, unitTypes } from '@/utils/constants'
-import { getSecond } from '@/utils/date-util'
-import { get } from '@/utils/http'
-import * as echarts from 'echarts'
-import { markRaw } from 'vue'
-import { metricOption } from '@/views/detections/options/detectionOptions'
-import { sortBy, reverseSortBy, computeSecondaryDomain } from '@/utils/tools'
-export default {
-  name: 'DetectionPerformanceEventDomainOverview',
-  props: {
-    detection: Object
-  },
-  data () {
-    return {
-      eventSeverityColor,
-      basicInfo: {},
-      metricList:[[1435781430781, "1"], [1435781431781, "5"],[1435781432781, "5"], [1435781433781, "3"],[1435781434781, "4"], [1435781435781, "5"]],
-      metricChart: null,
-      searchStartTime:null,
-      searchEndTime:null
-    }
-  },
-  computed: {
-    computeLocation () {
-      return function (basicInfo) {
-        let result = ''
-        if (basicInfo.serverLocationCountry) {
-          result += basicInfo.serverLocationCountry
-        }
-        if (basicInfo.serverLocationProvince) {
-          if (result) {
-            result += ', '
-          }
-          result += basicInfo.serverLocationProvince
-        }
-        if (basicInfo.serverLocationRegion) {
-          if (result) {
-            result += ', '
-          }
-          result += basicInfo.serverLocationRegion
-        }
-        return result || '-'
-      }
-    }
-  },
-  methods: {
-    computeSecondaryDomain,
-    query () {
-      this.queryBasic().then(responses => {
-        responses && (this.basicInfo = responses)
-      })
-
-      this.queryMetric().then(responses => {
-        responses && (this.metricList = responses.values)
-        this.initChart()
-      }).catch(error => {
-        console.log(error)
-      }).finally(() => {
-        setTimeout(() => {
-          try {
-            this.$nextTick(() => {
-              console.log(this.metricChart)
-              this.metricChart && this.metricChart.resize()
-            })
-          } catch (e) {}
-        }, 250)
-      })
+  import { api, getData } from '@/utils/api'
+  import { eventSeverityColor,unitTypes ,topDomain} from '@/utils/constants'
+  import { getSecond } from '@/utils/date-util'
+  import { get } from '@/utils/http'
+  import * as echarts from 'echarts'
+  import { markRaw } from 'vue'
+  import { metricOption } from '@/views/detections/options/detectionOptions'
+  import { sortBy,reverseSortBy } from '@/utils/tools'
+  export default {
+    name: 'DetectionPerformanceEventDomainOverview',
+    props: {
+      detection: Object
    },
-
-    initChart(){
-      this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartDomain')))//使用markRaw的原因：vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')
-      this.chartOptionMetric = _.cloneDeep(this.chartOption)
-
-      this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点
-      //let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  1435781434781 );
-      let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  this.detection.endTime*1000 );
-      endIndex = this.metricList.length-endIndex
-
-      this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点
-      //let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  1435781432781 );
-      let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  this.detection.startTime*1000 );
-
-      if(startIndex >-1 && endIndex >-1){
-        this.chartOptionMetric.series[0].data = this.metricList.slice(0,startIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
-        this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex-1,endIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
-        this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex-1,this.metricList.length).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
+    data () {
+      return {
+        eventSeverityColor,
+        basicInfo: {},
+        metricList:[[1435781430781, "1"], [1435781431781, "5"],[1435781432781, "5"], [1435781433781, "3"],[1435781434781, "4"], [1435781435781, "5"]],
+        metricChart: null,
+        searchStartTime:null,
+        searchEndTime:null
      }
-
-      this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
-      console.log(this.chartOptionMetric)
    },
-
-    queryMetric() {
-      return new Promise((resolve, reject) => {
-        try {
-          let allTime = this.detection.endTime-this.detection.startTime
-          let nowTime = getSecond(new Date())
-          this.searchStartTime = this.detection.startTime-allTime/2
-          this.searchEndTime = _.min([nowTime,(this.detection.endTime+allTime/2)])
-
-          get(api.detection.performanceEvent.metric, {
-            domain: this.detection.domain,
-            startTime: this.searchStartTime*1000,
-            endTime: this.searchEndTime*1000,
-          }).then((response) => {
-            if (response.code === 200) {
-              resolve(response.data.result[0])
-            } else {
-              reject(response)
+    computed: {
+      computeLocation () {
+        return function (basicInfo) {
+          let result = ''
+          if (basicInfo.serverLocationCountry) {
+            result += basicInfo.serverLocationCountry
+          }
+          if (basicInfo.serverLocationProvince) {
+            if (result) {
+              result += ', '
+            }
+            result += basicInfo.serverLocationProvince
+          }
+          if (basicInfo.serverLocationRegion) {
+            if (result) {
+              result += ', '
+            }
+            result += basicInfo.serverLocationRegion
+          }
+          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)
            }
          })
-        } catch (e) {
-          reject(e)
+          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('.')
        }
-      })
+      }
    },
-    queryBasic () {
-      return new Promise((resolve, reject) => {
-        try {
-          getData(api.detection.performanceEvent.overviewBasic, { domain: this.detection.domain, startTime: this.detection.startTime }).then(data => {
-            resolve(data[0])
-          }).catch(error => {
-            reject(error)
-          })
-        } catch (e) {
-          reject(e)
+    methods: {
+      query () {
+        this.queryBasic().then(responses => {
+          responses && (this.basicInfo = responses)
+        })
+
+        this.queryMetric().then(responses => {
+          responses && (this.metricList = responses.values)
+          this.initChart()
+        }).catch(error => {
+          console.log(error)
+        }).finally(() => {
+          setTimeout(() => {
+            try {
+              this.$nextTick(() => {
+                console.log(this.metricChart)
+                this.metricChart && this.metricChart.resize()
+              })
+            } catch (e) {}
+          }, 250)
+        })
+      },
+
+      initChart(){
+        this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartDomain')))//使用markRaw的原因：vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')
+        this.chartOptionMetric = _.cloneDeep(this.chartOption)
+
+        this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点
+        //let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  1435781434781 );
+        let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  this.detection.endTime*1000 );
+        endIndex = this.metricList.length-endIndex
+
+        this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点
+        //let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  1435781432781 );
+        let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  this.detection.startTime*1000 );
+
+        if(startIndex >-1 && endIndex >-1){
+          this.chartOptionMetric.series[0].data = this.metricList.slice(0,startIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
+          this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex-1,endIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
+          this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex-1,this.metricList.length).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
        }
-      })
+
+        this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
+        console.log(this.chartOptionMetric)
+      },
+
+      queryMetric() {
+        return new Promise((resolve, reject) => {
+          try {
+            let allTime = this.detection.endTime-this.detection.startTime
+            let nowTime = getSecond(new Date())
+            this.searchStartTime = this.detection.startTime-allTime/2
+            this.searchEndTime = _.min([nowTime,(this.detection.endTime+allTime/2)])
+
+            get(api.detection.performanceEvent.metric, {
+              domain: this.detection.domain,
+              startTime: this.searchStartTime,
+              endTime: this.searchEndTime,
+            }).then((response) => {
+              if (response.code === 200) {
+                resolve(response.data.result[0])
+              } else {
+                reject(response)
+              }
+            })
+          } catch (e) {
+            reject(e)
+          }
+        })
+      },
+      queryBasic () {
+        return new Promise((resolve, reject) => {
+          try {
+            getData(api.detection.performanceEvent.overviewBasic, { domain: this.detection.domain, startTime: this.detection.startTime }).then(data => {
+              resolve(data[0])
+            }).catch(error => {
+              reject(error)
+            })
+          } catch (e) {
+            reject(e)
+          }
+        })
+      },
+      goDetail (type, name) {
+        const { href } = this.$router.resolve({
+          path: '/entityDetail',
+          query: {
+            entityType: type,
+            name: name
+          }
+        })
+        window.open(href, '_blank')
+      }
    },
-    goDetail (type, name) {
-      const { href } = this.$router.resolve({
-        path: '/entityDetail',
-        query: {
-          entityType: type,
-          name: name
-        }
-      })
-      window.open(href, '_blank')
-    }
-  },
-  mounted () {
-    this.query()
-  },
-  setup () {
-    return {
-      chartOption: metricOption,
-    }
-  },
-}
+    mounted () {
+      this.query()
+    },
+    setup () {
+      return {
+        chartOption: metricOption,
+      }
+    },
+  }
 </script>
--- a/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
@@ -183,8 +183,8 @@ export default {

          get(api.detection.performanceEvent.metric, {
            domain: this.detection.domain,
-            startTime: this.searchStartTime*1000,
-            endTime: this.searchEndTime*1000,
+            startTime: this.searchStartTime,
+            endTime: this.searchEndTime,
          }).then((response) => {
            if (response.code === 200) {
              resolve(response.data.result[0])