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

2022-05-27 18:22:23 +08:00
parent ebd2717be5
commit cfb25a1ecb
9 changed files with 163 additions and 22 deletions
--- a/public/config.json
+++ b/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}
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/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;
        }
--- a/src/permission.js
+++ b/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
--- a/src/utils/api.js
+++ b/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',
-      httpErrorMetric: '/interface/detection/performance/detail/overview/metric',
-      highDnsResponseTimeMetric: '/interface/detection/performance/detail/overview/metric'
+      dnsErrorMetric: '/interface/detection/performance/detail/overview/metric/dnsError',
+      httpErrorMetric: '/interface/detection/performance/detail/overview/metric/httpError',
+      highDnsResponseTimeMetric: '/interface/detection/performance/detail/overview/metric/highDnsResponseTime'
    }
  },
  // Dashboard
--- a/src/utils/constants.js
+++ b/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'
 }

 // 统一定义跳转来源
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/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,
-        loadingMap: false
+        loadingSecurityEvents: 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)
    })
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/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
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/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
--- a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
+++ b/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
+      })
+    }
  }
 }