CN-593 实体下拉--服务质量事件增加折线图

public/config.json

@@ -1 +1 @@
-{"baseUrl": "http://192.168.44.53:8090/", "version": "2.0.2021.05.11.19.43"}
+{"baseUrl": "http://192.168.44.53:8090/", "version": "2.0.2021.05.11.19.43","performanceEndTimeInterval": 86400}

src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss

@@ -167,6 +167,11 @@
             padding-left: 5px;
           }
         }
+        .row__charts {
+          width:80px;
+          height:20px;
+          padding-bottom: 5px;
+        }
         .row__desc {
           color: #666666;
         }

src/permission.js

@@ -20,6 +20,7 @@ router.beforeEach(async (to, from, next) => {
   if (!axios.defaults.baseURL) {
     const config = await getConfigJson()
     axios.defaults.baseURL = config.baseUrl
+    axios.defaults.performanceEndTimeInterval = config.performanceEndTimeInterval
   }
   if (localStorage.getItem(storageKey.token)) {
     // 加载i18n

src/utils/api.js

@@ -121,9 +121,9 @@ export const api = {
       listBasic: '/interface/detection/performance/list/basic',
       listCount: '/interface/detection/performance/list/count',
       overviewBasic: '/interface/detection/performance/detail/overview/basic',
-      dnsErrorMetric: '/interface/detection/performance/detail/overview/metric',
+      dnsErrorMetric: '/interface/detection/performance/detail/overview/metric/dnsError',
-      httpErrorMetric: '/interface/detection/performance/detail/overview/metric',
+      httpErrorMetric: '/interface/detection/performance/detail/overview/metric/httpError',
-      highDnsResponseTimeMetric: '/interface/detection/performance/detail/overview/metric'
+      highDnsResponseTimeMetric: '/interface/detection/performance/detail/overview/metric/highDnsResponseTime'
     }
   },
   // Dashboard

src/utils/constants.js

@@ -25,7 +25,8 @@ export const storageKey = {
   entitySearchHistory: 'cn-entity-search-history',
   echartLegendFontSize: 'echartLegendFontSize',
   echartLabelFontSize: 'echartLabelFontSize',
-  tokenExpireCurrentPath: 'token-expire-current-path'
+  tokenExpireCurrentPath: 'token-expire-current-path',
+  performanceEndTimeInterval: 'performance-endTime-interval'
 }
 
 // 统一定义跳转来源

src/views/entityExplorer/entityList/detailOverview/App.vue

@@ -43,14 +43,14 @@
             <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
             <div class="row__content-loading">
-               <div class="row__charts" :id="`entityDetailSend${entityData.appName}`" ></div>
+               <div class="row__charts" :id="`entityDetailSend${entity.appName}`" ></div>
             </div>
           </div>
           <div class="row__content">
             <div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
             <div class="row__content-loading">
-               <div class="row__charts" :id="`entityDetailReceived${entityData.appName}`" ></div>
+               <div class="row__charts" :id="`entityDetailReceived${entity.appName}`" ></div>
             </div>
           </div>
         </div>
@@ -157,6 +157,11 @@
           <div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
           <div>{{performance.eventType}}</div>
         </div>
+        <div class="row__content-loading"  style="position: relative;" >
+          <loading :loading="!loadingAlert && loadingPerformance[index]?loadingPerformance[index]:false" :id="`loading${entity.ipAddr}_${index}`" size="small"></loading>
+          <div class="row__charts"  :id="`entityPerformanceChart${entity.appName}_${index}`"></div>
+        </div>
+
         <div class="row__desc"></div>
       </div>
       <div class="overview__row overview__row--small-font" v-if="performanceData && performanceData.length > 5">
@@ -195,7 +200,6 @@
         :entity="entityCopy"
         :query-params="queryParams"
         :hide-header="true"
-        :loading="loadingMap"
         @getCurrentTimeRange="getCurrentTimeRange"
     ></chart>
   </div>
@@ -299,8 +303,7 @@ export default {
         loadingOut: false,
         loadingIn: false,
         loadingAlert: false,
-        loadingSecurityEvents: false,
+        loadingSecurityEvents: false
-        loadingMap: false
       }
     }
   },
@@ -314,17 +317,21 @@ export default {
       }
       return queryParams
     },
+    getPerformanceQueryParams () {
+      const queryParams = {
+        appName: this.entity.appName
+      }
+      return queryParams
+    },
     handleRelationData (result) {
       this.entityData.domainCount = result.domainCount
       this.entityData.ipCount = result.ipCount
     },
     chartGetMap () {
-      this.loadingMap = true
       get((this.trafficUrlMap), this.getQueryParams()).then(response => {
         if (response.code === 200) {
           this.chartData = response.data.result
         }
-        this.loadingMap = false
       })
     },
     queryRelated () {
@@ -334,9 +341,9 @@ export default {
   },
   mounted () {
     this.queryParams = this.getQueryParams()
-    this.chartGetMap()
     this.$nextTick(() => {
       setTimeout(() => {
+        this.chartGetMap()
         this.queryRelated()
       }, 250)
     })

src/views/entityExplorer/entityList/detailOverview/Domain.vue

@@ -47,14 +47,14 @@
             <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
             <div class="row__content-loading">
-              <div class="row__charts" :id="`entityDetailSend${entityData.domainName}`" ></div>
+              <div class="row__charts" :id="`entityDetailSend${entity.domainName}`" >{</div>
             </div>
           </div>
           <div class="row__content">
             <div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
             <div class="row__content-loading">
-              <div class="row__charts" :id="`entityDetailReceived${entityData.domainName}`" ></div>
+              <div class="row__charts" :id="`entityDetailReceived${entity.domainName}`" ></div>
             </div>
           </div>
         </div>
@@ -161,6 +161,10 @@
           <div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
           <div>{{performance.eventType}}</div>
         </div>
+        <div class="row__content-loading"  style="position: relative;" >
+          <loading :loading="!loadingAlert && loadingPerformance[index]?loadingPerformance[index]:false" :id="`loading${entity.ipAddr}_${index}`" size="small"></loading>
+          <div class="row__charts"  :id="`entityPerformanceChart${entity.domainName}_${index}`"></div>
+        </div>
         <div class="row__desc"></div>
       </div>
       <div class="overview__row overview__row--small-font" v-if="performanceData && performanceData.length > 5">
@@ -319,6 +323,12 @@ export default {
       }
       return queryParams
     },
+    getPerformanceQueryParams () {
+      const queryParams = {
+        domain: this.entity.domainName
+      }
+      return queryParams
+    },
     handleRelationData (result) {
       this.entityData.appCount = result.appCount
       this.entityData.ipCount = result.ipCount

src/views/entityExplorer/entityList/detailOverview/Ip.vue

@@ -44,7 +44,7 @@
             <!-- 曲线-->
             <div class="row__content-loading">
               <loading :loading="!loadingDns && loading" size="small"></loading>
-              <div class="row__charts" :id="`entityDnsServerInfo${entityData.ipAddr}`"></div>
+              <div class="row__charts" :id="`entityDnsServerInfo${entity.ipAddr}`"></div>
             </div>
           </div>
         </div>
@@ -70,14 +70,14 @@
             <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
             <div class="row__content-loading">
-              <div class="row__charts" :id="`entityDetailSend${entityData.ipAddr}`"></div>
+              <div class="row__charts" :id="`entityDetailSend${entity.ipAddr}`"></div>
             </div>
           </div>
           <div class="row__content">
             <div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
             <div class="row__content-loading">
-              <div class="row__charts" :id="`entityDetailReceived${entityData.ipAddr}`"></div>
+              <div class="row__charts" :id="`entityDetailReceived${entity.ipAddr}`"></div>
             </div>
           </div>
         </div>
@@ -184,6 +184,10 @@
           <div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
           <div>{{performance.eventType}}</div>
         </div>
+        <div class="row__content-loading"  style="position: relative;" >
+          <loading :loading="!loadingAlert && loadingPerformance[index]?loadingPerformance[index]:false" :id="`loading${entity.ipAddr}_${index}`" size="small"></loading>
+          <div class="row__charts"  :id="`entityPerformanceChart${entity.ipAddr}_${index}`"></div>
+        </div>
         <div class="row__desc"></div>
       </div>
       <div class="overview__row overview__row--small-font" v-if="performanceData && performanceData.length > 5">
@@ -385,6 +389,12 @@ export default {
       }
       return queryParams
     },
+    getPerformanceQueryParams () {
+      const queryParams = {
+        serverIp: this.entity.ipAddr
+      }
+      return queryParams
+    },
     handleRelationData (result) {
       this.entityData.appCount = result.appCount
       this.entityData.domainCount = result.domainCount

src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js

@@ -2,9 +2,14 @@ import _ from 'lodash'
 import { get } from '@/utils/http'
 import * as echarts from 'echarts'
 import { entityListLineOption } from '@/views/charts/charts/chart-options'
-import { riskLevelMapping, unitTypes } from '@/utils/constants'
+import { riskLevelMapping, unitTypes, storageKey } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
-import { shallowRef } from 'vue'
+import { shallowRef, markRaw } from 'vue'
+import { metricOption } from '@/views/detections/options/detectionOptions'
+import { sortBy, reverseSortBy } from '@/utils/tools'
+import { getSecond } from '@/utils/date-util'
+import { api } from '@/utils/api'
+import axios from 'axios'
 
 export default {
   props: {
@@ -27,6 +32,8 @@ export default {
         receivedChart: null
       },
       chartOption: null,
+      performanceChartBasicOption: null,
+      performanceChartOption: null,
       queryParams: {},
       echartsArray: [],
       performanceData: [],
@@ -35,13 +42,16 @@ export default {
         securityPageSize: 5,
         performancePageSize: 5,
         pageNo: 1
-      }
+      },
+      metricChart: null,
+      performanceChartList: [],
+      loadingPerformance: []
     }
   },
   computed: {
     entityName () {
       let name
-      switch (this.entityData.entityType) {
+      switch (this.entity.entityType) {
         case ('ip'): {
           name = this.entity.ipAddr
           break
@@ -179,7 +189,85 @@ export default {
         }, 250)
       })
     },
+    queryEntityDetailPerformanceChart (performanceList, startIndex) {
+      if (performanceList && performanceList.length > 0) {
+        const self = this
+        const performanceEndTimeInterval = axios.defaults.performanceEndTimeInterval
+        const allTime = Number(performanceEndTimeInterval || 86401)
 
+        performanceList.forEach((item, i) => {
+          const index = startIndex + i
+          this.loadingPerformance[index] = true
+          const startTime = getSecond(item.startTime)
+          const endTime = getSecond(item.startTime) + allTime
+          const nowTime = getSecond(new Date())
+          this.searchStartTime = startTime - allTime / 2
+          this.searchEndTime = _.min([nowTime, endTime + allTime / 2])
+          let url
+          if (item.eventType === 'dns error') {
+            url = api.detection.performanceEvent.dnsErrorMetric
+          } else if (item.eventType === 'http error') {
+            url = api.detection.performanceEvent.httpErrorMetric
+          } else if (item.eventType === 'high dns response time') {
+            url = api.detection.performanceEvent.highDnsResponseTimeMetric
+          }
+
+          if (url) {
+            get(url, {
+              ...self.getPerformanceQueryParams(),
+              startTime: self.searchStartTime,
+              endTime: self.searchEndTime,
+              eventType: item.eventType
+            }).then((response) => {
+              if (response.code === 200) {
+                const metricDataList = response.data.result[0] && response.data.result[0].values
+                this.$nextTick(() => {
+                  if (metricDataList && metricDataList.length > 0) {
+                    metricDataList.sort(reverseSortBy(0))// 将返回的数据按时间降序排序，方便找到实线和虚线的交点
+                    // let endIndex = (self.metricList). findIndex ((item) => item[0]  <=  1435781434781 );
+                    let endIndex = (metricDataList).findIndex((item) => item[0] <= endTime)
+                    endIndex = metricDataList.length - endIndex
+
+                    metricDataList.sort(sortBy(0))// 将返回的数据按时间升序排序，方便找到实线和虚线的交点
+                    // let startIndex = (self.metricList). findIndex ((item) => item[0]  >=  1435781432781 );
+                    const startIndex = metricDataList.findIndex((item) => item[0] >= startTime)
+
+                    const performanceChartOption = _.cloneDeep(metricOption)
+                    if (startIndex > -1 && endIndex > -1) {
+                      performanceChartOption.series[0].data = metricDataList.slice(0, startIndex).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
+                      performanceChartOption.series[1].data = metricDataList.slice(startIndex - 1, endIndex).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
+                      performanceChartOption.series[2].data = metricDataList.slice(endIndex - 1, metricDataList.length).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
+                    }
+                    const metricChart = markRaw(echarts.init(document.getElementById(`entityPerformanceChart${self.entityName}_${index}`)))
+                    performanceChartOption && metricChart.setOption(performanceChartOption)
+                    self.performanceChartList.push(metricChart)
+                    this.echartsArray.push(shallowRef(metricChart))
+                  } else {
+                    const chartDom = document.getElementById(`entityPerformanceChart${self.entityName}${index}`)
+                    chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
+                  }
+                })
+              }
+            }).catch(error => {
+              console.log(error)
+              const chartDom = document.getElementById(`entityPerformanceChart${self.entityName}${index}`)
+              chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
+            }).finally(() => {
+              setTimeout(() => {
+                try {
+                  this.$nextTick(() => {
+                    self.performanceChartList.forEach(item => {
+                      item && item.resize()
+                    })
+                    this.loadingPerformance[index] = false
+                  })
+                } catch (e) {}
+              }, 250)
+            })
+          }
+        })
+      }
+    },
     queryEntityDetailRelation () {
       get(this.relationUrl, this.getQueryParams()).then(response => {
         if (response.code === 200) {
@@ -310,6 +398,11 @@ export default {
           this.entityData.performanceNum = response.data.result.length
           this.performanceData = response.data.result
           this.entityData.performanceList = this.getTargetPageData(1, this.showMore.performancePageSize, this.performanceData)
+          this.$nextTick(() => {
+            setTimeout(() => {
+              this.queryEntityDetailPerformanceChart(this.entityData.performanceList, 0)
+            }, 200)
+          })
         }
         this.loadingAlert = false
       })
@@ -328,8 +421,16 @@ export default {
     },
 
     performanceShowMore (num) {
+      const startIndex = this.showMore.performancePageSize
       this.showMore.performancePageSize += num
       this.entityData.performanceList = this.getTargetPageData(this.showMore.pageNo, this.showMore.performancePageSize, this.performanceData)
+      this.$nextTick(() => {
+        setTimeout(() => {
+          if (this.entityData.performanceList && this.entityData.performanceList.length > 0) {
+            this.queryEntityDetailPerformanceChart(this.entityData.performanceList.slice(startIndex, this.entityData.performanceList.length), startIndex)
+          }
+        }, 200)
+      })
     },
 
     securityShowMore (num) {
@@ -436,5 +537,11 @@ export default {
   },
   beforeUnmount () {
     window.removeEventListener('resize', this.debounceFunc)
+    if (this.performanceChartList) {
+      this.performanceChartList.forEach(item => {
+        item.dispose()
+        item = null
+      })
+    }
   }
 }