fix: Network & App Performance下钻参数调整

src/utils/api.js

@@ -189,6 +189,7 @@ export const api = {
     events: {
       list: '/interface/overview/event/list',
       recentEvents: '/interface/overview/event/recentEvents',
+      recentEventsD: '/interface/application/performance/overview/drilldown/dimension/recentEvents',
       dimensionEvents: '/interface/overview/event/dimensionEvents'
     }
   }

src/views/charts2/charts/npm/NpmNetworkQuantity.vue

@@ -37,7 +37,12 @@ export default {
   },
   methods: {
     npmNetworkCycleQuery () {
-      const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      let condition = ''
+      if (this.$store.getters.getQueryCondition.indexOf('OR') > -1) {
+        condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      } else {
+        condition = this.$store.getters.getQueryCondition
+      }
       const type = this.$store.getters.getDimensionType
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
@@ -46,12 +51,21 @@ export default {
       }
       if (this.chartData.id === 23) {
         this.side = 'client'
-      } else {
+      } else if (this.chartData.id === 24) {
         this.side = 'server'
       }
-      if (condition.length > 1 && type) {
+      if (condition && (typeof condition !== 'object') && type) {
+        params.q = condition
+      } else if (condition.length > 1 && type && type === 'ip') {
         params.q = `${type}='${condition[1]}' and side='${this.side}'`
-        params.type = type
+      } else if (condition.length > 1 && type && type !== 'ip') {
+        if (type === 'country' || type === 'asn') {
+          params.q = `${type}='${condition[1]}'`
+        } else if (type === 'idcRenter') {
+          params.q = `idc_renter='${condition[1]}'`
+        } else {
+          params.q = `${condition[0]}'${condition[1]}'`
+        }
       }
       const tcp = get(api.npm.overview.tcpSessionDelay, params)
       const http = get(api.npm.overview.httpResponseDelay, params)
@@ -70,7 +84,12 @@ export default {
       })
     },
     npmNetworkLastCycleQuery () {
-      const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      let condition = ''
+      if (this.$store.getters.getQueryCondition.indexOf('OR') > -1) {
+        condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      } else {
+        condition = this.$store.getters.getQueryCondition
+      }
       const type = this.$store.getters.getDimensionType
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
@@ -79,12 +98,21 @@ export default {
       }
       if (this.chartData.id === 23) {
         this.side = 'client'
-      } else {
+      } else if (this.chartData.id === 26) {
         this.side = 'server'
       }
-      if (condition.length > 1 && type) {
+      if (condition && (typeof condition !== 'object') && type) {
+        params.q = condition
+      } else if (condition.length > 1 && type && type === 'ip') {
         params.q = `${type}='${condition[1]}' and side='${this.side}'`
-        params.type = type
+      } else if (condition.length > 1 && type && type !== 'ip') {
+        if (type === 'country' || type === 'asn') {
+          params.q = `${type}='${condition[1]}'`
+        } else if (type === 'idcRenter') {
+          params.q = `idc_renter='${condition[1]}'`
+        } else {
+          params.q = `${condition[0]}'${condition[1]}'`
+        }
       }
       const tcp = get(api.npm.overview.tcpSessionDelay, params)
       const http = get(api.npm.overview.httpResponseDelay, params)

src/views/charts2/charts/npm/NpmRecentEvents.vue

@@ -47,6 +47,7 @@ import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
 import chartMixin from '@/views/charts2/chart-mixin'
+import _ from 'lodash'
 
 export default {
   name: 'NpmRecentEvents',
@@ -58,29 +59,31 @@ export default {
         { label: 'network.severity', prop: 'eventSeverity' },
         { label: 'network.entity', prop: 'eventKey' },
         { label: 'detections.eventType', prop: 'eventType' }
-      ],
+      ]
-      isNoData: false
-    }
-  },
-  watch: {
-    timeFilter: {
-      deep: true,
-      handler (n) {
-        this.recentEventsListData()
-      }
     }
   },
   methods: {
     recentEventsListData () {
+      const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      const type = this.$store.getters.getDimensionType
+      let url = ''
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
         limit: 8
       }
+      if (condition.length > 1 && type) {
+        params.param = condition[1]
+        params.type = type
+        params.limit = 10
+        url = api.npm.events.recentEventsD
+      } else {
+        url = api.npm.events.recentEvents
+      }
       this.toggleLoading(true)
-      get(api.npm.events.recentEvents, params).then(res => {
+      get(url, params).then(res => {
         if (res.code === 200) {
-          if (!res.data.result || res.data.result.length === 0) {
+          if (res.data.result.length === 0) {
             this.isNoData = true
           }
           this.tableData = res.data.result

src/views/charts2/charts/npm/NpmTrafficLine.vue

@@ -52,19 +52,36 @@ export default {
   },
   methods: {
     init () {
-      const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      let condition = ''
+      if (this.$store.getters.getQueryCondition.indexOf('OR') > -1) {
+        condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      } else {
+        condition = this.$store.getters.getQueryCondition
+      }
       const type = this.$store.getters.getDimensionType
       if (this.chartData.id === 24) {
         this.side = 'client'
-      } else {
+      } else if (this.chartData.id === 29) {
         this.side = 'server'
       }
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
-        q: `${type}='${condition[1]}' and side='${this.side}'`,
         type: type
       }
+      if (condition && (typeof condition !== 'object') && type) {
+        params.q = condition
+      } else if (condition.length > 1 && type && type === 'ip') {
+        params.q = `${type}='${condition[1]}' and side='${this.side}'`
+      } else if (condition.length > 1 && type && type !== 'ip') {
+        if (type === 'country' || type === 'asn') {
+          params.q = `${type}='${condition[1]}'`
+        } else if (type === 'idcRenter') {
+          params.q = `idc_renter='${condition[1]}'`
+        } else {
+          params.q = `${condition[0]}'${condition[1]}'`
+        }
+      }
       get(api.npm.overview.trafficGraph, params).then((res) => {
         if (res.code === 200) {
           if (res.data.result.length === 0) {

src/views/charts2/charts/npm/RelatedSessions.vue

@@ -17,7 +17,7 @@
        <div class="npm-sessions-as-clients">
          <div class="npm-sessions-as-client">
            <div class="npm-sessions-as-client-red"></div>&nbsp;
-           <div class="npm-sessions-as-client-i18n">{{$t('npm.asClient')}}</div>
+           <div class="npm-sessions-as-client-i18n">{{$t('npm.asServer')}}</div>
          </div>
          <div class="npm-sessions-as-client-percent">{{sessionData.serverSessions}}</div>
        </div>