From b9cdb81bc625789f54097549cff5022f7baf4267 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Sun, 27 Mar 2022 20:52:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=9E=E4=BD=93=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E6=95=B4=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/constants.js                        |  6 +++
 src/views/charts/PanelChart.vue               |  4 +-
 .../DetectionPerformanceEventAppOverview.vue  | 53 +++++++++----------
 3 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/utils/constants.js b/src/utils/constants.js
index 78bc150d..0f1a87a2 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -192,6 +192,12 @@ export const dnsServerRole = {
   RTDNSM: 'RTDNSM'
 }
 
+export const performanceMetricMapping = {
+  'dns error': 'DNS Error Rate',
+  'http error': 'HTTP Error Rate',
+  'high dns response time': 'DNS Response Latency'
+}
+
 export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
   '#73BFDE', '#3BA172', '#FC8452', '#9960B4',
   '#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC',
diff --git a/src/views/charts/PanelChart.vue b/src/views/charts/PanelChart.vue
index fb1fecdd..0231cb34 100644
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -251,9 +251,9 @@ export default {
             }
           }).finally(() => {
             setTimeout(() => {
-              if(!(isIpHostedDomain(this.chartInfo.type) || isAppRelatedDomain(this.chartInfo.type)) ){
+              if (!(isIpHostedDomain(this.chartInfo.type) || isAppRelatedDomain(this.chartInfo.type))) {
                 this.loading = false
-              }else if(!this.chartData || this.chartData.length === 0){
+              } else if (!this.chartData || this.chartData.length === 0) {
                 this.loading = false
               }
             }, 200)
diff --git a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
index 7f379a88..f9e9e11c 100644
--- a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
@@ -88,15 +88,14 @@
 </template>
 
 <script>
-import { eventSeverityColor } from '@/utils/constants'
+import { eventSeverityColor, unitTypes } from '@/utils/constants'
 import { api, getData } from '@/utils/api'
-import { 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 } from '@/utils/tools'
+import { sortBy, reverseSortBy } from '@/utils/tools'
 export default {
   name: 'DetectionPerformanceEventAppOverview',
   props: {
@@ -106,7 +105,7 @@ export default {
     return {
       eventSeverityColor,
       basicInfo: {},
-      metricList:[],
+      metricList: []
     }
   },
   computed: {
@@ -139,15 +138,15 @@ export default {
       })
       this.queryMetric().then(responses => {
         responses && (this.metricList = responses.values)
-        if(this.metricList.length>0){
+        if (this.metricList.length > 0) {
           this.initChart()
-        }else {
-          let chartDom = document.getElementById(`detectionMetricChartApp${this.detection.appName}`)
+        } else {
+          const chartDom = document.getElementById(`detectionMetricChartApp${this.detection.appName}`)
           chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
         }
       }).catch(error => {
         console.log(error)
-        let chartDom = document.getElementById(`detectionMetricChartApp${this.detection.appName}`)
+        const chartDom = document.getElementById(`detectionMetricChartApp${this.detection.appName}`)
         chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
       }).finally(() => {
         setTimeout(() => {
@@ -160,35 +159,35 @@ export default {
       })
     },
 
-    initChart(){
+    initChart () {
       this.metricChart = markRaw(echarts.init(document.getElementById(`detectionMetricChartApp${this.detection.appName}`)))
       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 );
-      endIndex = this.metricList.length-endIndex
+      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)
+      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 );
+      this.metricList.sort(sortBy(0))// 将返回的数据按时间升序排序，方便找到实线和虚线的交点
+      // let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  1435781432781 );
+      const startIndex = (this.metricList).findIndex((item) => item[0] >= this.detection.startTime)
 
-      if(startIndex >-1 && endIndex >-1){
-        this.chartOptionMetric.series[0].data = this.metricList.slice(0,startIndex).map(v => [Number(v[0])*1000, Number(v[1]), unitTypes.number])
-        this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex-1,endIndex).map(v => [Number(v[0])*1000, Number(v[1]), unitTypes.number])
-        this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex-1,this.metricList.length).map(v => [Number(v[0])*1000, Number(v[1]), unitTypes.number])
+      if (startIndex > -1 && endIndex > -1) {
+        this.chartOptionMetric.series[0].data = this.metricList.slice(0, startIndex).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
+        this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex - 1, endIndex).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
+        this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex - 1, this.metricList.length).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
       }
 
       this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
     },
 
-    queryMetric() {
+    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)])
+          const allTime = this.detection.endTime - this.detection.startTime
+          const 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,
@@ -237,8 +236,8 @@ export default {
   },
   setup () {
     return {
-      chartOption: metricOption,
+      chartOption: metricOption
     }
-  },
+  }
 }
 </script>