CN-647 fix: 图表接口对接

src/utils/api.js

@@ -151,7 +151,14 @@ export const api = {
       httpResponseDelay: '/interface/application/performance/overview/httpResponseDelay',
       sslConDelay: '/interface/application/performance/overview/sslConDelay',
       tcpLostlenPercent: '/interface/application/performance/overview/tcpLostlenPercent',
-      packetRetransPercent: '/interface/application/performance/overview/packetRetransPercent'
+      packetRetransPercent: '/interface/application/performance/overview/packetRetransPercent',
+      // app类别评分
+      appTrafficAnalysis: '/interface/application/performance/overview/appTrafficAnalysis',
+      appTcpSessionDelay: '/interface/application/performance/overview/appTcpSessionDelay',
+      appHttpResponseDelay: '/interface/application/performance/overview/appHttpResponseDelay',
+      appSslConDelay: '/interface/application/performance/overview/appSslConDelay',
+      appTcpLostlenPercent: '/interface/application/performance/overview/appTcpLostlenPercent',
+      appPacketRetransPercent: '/interface/application/performance/overview/appPacketRetransPercent'
     },
     location: {
 

src/utils/constants.js

@@ -370,6 +370,40 @@ export const dnsServerRole = {
   FWDNS: 'FWDNS'
 }
 
+// npm页-应用评分-类别名称、icon、i18n映射
+export const npmCategoryInfoMapping = [
+  {
+    appSubcategory: 'multimedia-streaming',
+    icon: 'cn-icon cn-icon-video',
+    i18n: 'network.video'
+  },
+  {
+    appSubcategory: 'social-networking',
+    icon: 'cn-icon cn-icon-social-network',
+    i18n: 'network.socialNetwork'
+  },
+  {
+    appSubcategory: 'file-sharing',
+    icon: 'cn-icon cn-icon-file-sharing',
+    i18n: 'network.fileSharing'
+  },
+  {
+    appSubcategory: 'voip-video',
+    icon: 'cn-icon cn-icon-voip',
+    i18n: 'network.voip'
+  },
+  {
+    appSubcategory: 'gaming',
+    icon: 'cn-icon cn-icon-gaming',
+    i18n: 'network.gaming'
+  },
+  {
+    appSubcategory: 'email',
+    icon: 'cn-icon cn-icon-email',
+    i18n: 'network.email'
+  }
+]
+
 // 整屏滚动的路径映射
 export const wholeScreenRouterMapping = {
   dns: '/panel/dnsServiceInsights'

src/utils/tools.js

@@ -754,3 +754,11 @@ export function scrollToTop (dom, toTop, duration, direction) {
   }
   window.requestAnimationFrame(step)
 }
+
+export function getChainRatio (current, prev) {
+  if (prev === 0) {
+    return '-'
+  } else {
+    return (current - prev) / prev
+  }
+}

src/views/charts2/charts/NetworkOverviewApps.vue

@@ -202,7 +202,7 @@ export default {
         params = {
           startTime: getSecond(this.timeFilter.startTime),
           endTime: getSecond(this.timeFilter.endTime),
-          appLabels: providerCards.map(item => {
+          appCompanies: providerCards.map(item => {
             return item.name
           }).join(',')
         }
@@ -213,11 +213,11 @@ export default {
     },
     handleData (prevRequest, request, _t) {
       Promise.all([prevRequest, request]).then(res => {
-        // if (res[0].code === 200 && res[1].code === 200) {
+        if (res[0].code === 200 && res[1].code === 200) {
-        if (true) {
+        // if (true) {
-          // const prevData = res[0].data.result
+          const prevData = res[0].data.result
-          // const data = res[1].data.result
+          const data = res[1].data.result
-          let prevData
+          /*let prevData
           let data
           if (_t === 'app') {
             prevData = appPrevTestData
@@ -225,7 +225,7 @@ export default {
           } else if (_t === 'provider') {
             prevData = providerPrevTestData
             data = providerTestData
-          }
+          }*/
           let toCompareType = 'bytes'
           if (this.metricFilter === 'Sessions/s') {
             toCompareType = 'sessions'

src/views/charts2/charts/NpmAppCategoryScore.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="npm-app">
-    <div class="npm-app-left">
+<!--    <div class="npm-app-left">
       <div class="npm-app-letter">
         <div v-for="(letter, index) in colorPatchData" :key="index">
           {{letter.letter}}
@@ -106,13 +106,18 @@
           </el-table-column>
         </template>
       </el-table>
-    </div>
+    </div>-->
   </div>
 </template>
 
 <script>
-import { unitTypes } from '@/utils/constants'
+import { unitTypes, npmCategoryInfoMapping } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
+import { api } from '@/utils/api'
+import { getSecond } from '@/utils/date-util'
+import { get } from '@/utils/http'
+import { getChainRatio } from '@/utils/tools'
+
 export default {
   name: 'NpmAppCategoryScore',
   data () {
@@ -128,92 +133,7 @@ export default {
         { letter: 'E' },
         { letter: 'F' }
       ],
-      tableData: [
+      tableData: [],
-        {
-          category: 'network.video',
-          score: 3,
-          icon: 'cn-icon cn-icon-video',
-          total: 10,
-          totalTrendValue: 5,
-          inboundTrendValue: 10,
-          outboundTrendValue: 8,
-          pTotalTrendValue: 5,
-          pInboundTrendValue: 7,
-          pOutboundTrendValue: 4,
-          inbound: 0.1,
-          outbound: 0.89
-        },
-        {
-          category: 'network.socialNetwork',
-          score: 2,
-          icon: 'cn-icon cn-icon-social-network',
-          total: 10,
-          totalTrendValue: 5,
-          inboundTrendValue: 6,
-          outboundTrendValue: 8,
-          pTotalTrendValue: 10,
-          pInboundTrendValue: 5,
-          pOutboundTrendValue: 4,
-          inbound: 0.1,
-          outbound: 0.89
-        },
-        {
-          category: 'network.fileSharing',
-          score: 1,
-          icon: 'cn-icon cn-icon-file-sharing',
-          total: 10,
-          totalTrendValue: 2,
-          inboundTrendValue: 6,
-          outboundTrendValue: 7,
-          pTotalTrendValue: 5,
-          pInboundTrendValue: 7,
-          pOutboundTrendValue: 8,
-          inbound: 0.1,
-          outbound: 0.89
-        },
-        {
-          category: 'network.gaming',
-          score: 4,
-          icon: 'cn-icon cn-icon-gaming',
-          total: 10,
-          totalTrendValue: 5,
-          inboundTrendValue: 5,
-          outboundTrendValue: 5,
-          pTotalTrendValue: 5,
-          pInboundTrendValue: 5,
-          pOutboundTrendValue: 5,
-          inbound: 0.1,
-          outbound: 0.89
-        },
-        {
-          category: 'network.email',
-          score: 6,
-          icon: 'cn-icon cn-icon-email',
-          total: 10,
-          totalTrendValue: 2,
-          inboundTrendValue: 5,
-          outboundTrendValue: 6,
-          pTotalTrendValue: 4,
-          pInboundTrendValue: 10,
-          pOutboundTrendValue: 5,
-          inbound: 0.1,
-          outbound: 0.89
-        },
-        {
-          category: 'network.voip',
-          score: 5,
-          icon: 'cn-icon cn-icon-voip',
-          total: 10,
-          totalTrendValue: 5,
-          inboundTrendValue: 7,
-          outboundTrendValue: 9,
-          pTotalTrendValue: 10,
-          pInboundTrendValue: 2,
-          pOutboundTrendValue: 5,
-          inbound: 0.1,
-          outbound: 0.89
-        }
-      ],
       customTableTitles: [
         { label: 'network.category', prop: 'category' },
         { label: 'network.score', prop: 'score' },
@@ -223,6 +143,9 @@ export default {
       ]
     }
   },
+  props: {
+    timeFilter: Object
+  },
   methods: {
     tableCellStyle ({ row, column, rowIndex, columnIndex }) {
       let style = 'border-right:0px;font-size:12px;padding:7px 0 !important;border-bottom: 1px solid #ECECEC;'
@@ -250,7 +173,87 @@ export default {
         periodicData.total = 0
       }
       return periodicData
+    },
+    init (params) {
+      if (!params) {
+        params = {
+          startTime: getSecond(this.timeFilter.startTime),
+          endTime: getSecond(this.timeFilter.endTime)
+        }
+      }
+      // 获取table后三列内容
+      const currentTrafficRequest = get(api.npm.overview.appTrafficAnalysis, { ...params, cycle: 0 })
+      const lastCycleTrafficRequest = get(api.npm.overview.appTrafficAnalysis, { ...params, cycle: 1 })
+      Promise.all([currentTrafficRequest, lastCycleTrafficRequest]).then(res => {
+        const prevData = res[1].data.result
+        const data = res[0].data.result
+        if (data && data.length > 0) {
+          const tableData = data.map(d => {
+            const mapping = npmCategoryInfoMapping.find(mapping => mapping.appSubcategory === d.appSubcategory)
+            const result = {
+              ...mapping,
+              ...d,
+              bytesRateChainRatio: '-',
+              inboundBytesRateChainRatio: '-',
+              outboundBytesRateChainRatio: '-'
+            }
+
+            const prev = prevData.find(p => p.appSubcategory === d.appSubcategory)
+            if (prev) {
+              result.bytesRateChainRatio = prev.totalBitsRate === 0 ? '-' : getChainRatio(d.totalBitsRate, prev.totalBitsRate)
+              result.inboundBytesRateChainRatio = prev.inboundBitsRate === 0 ? '-' : getChainRatio(d.inboundBitsRate, prev.inboundBitsRate)
+              result.outboundBytesRateChainRatio = prev.outboundBitsRate === 0 ? '-' : getChainRatio(d.outboundBitsRate, prev.outboundBitsRate)
+            }
+            return result
+          })
+          // 计算分数
+          const tcpRequest = get(api.npm.overview.appTcpSessionDelay, params)
+          const httpRequest = get(api.npm.overview.appHttpResponseDelay, params)
+          const sslRequest = get(api.npm.overview.appSslConDelay, params)
+          const tcpLostRequest = get(api.npm.overview.appTcpLostlenPercent, params)
+          const packetRetransRequest = get(api.npm.overview.appPacketRetransPercent, params)
+          Promise.all([tcpRequest, httpRequest, sslRequest, tcpLostRequest, packetRetransRequest]).then(res => {
+            const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
+            res.forEach((r, i) => {
+              if (r.code === 200) {
+                tableData.forEach(t => {
+                  let score = 0
+                  const find = r.data.result.find(d => d.appSubcategory === t.appSubcategory)
+                  if (find) {
+                    score = this.computeScore(find, i)
+                  }
+                  t[keyPre[i] + 'Score'] = score
+                })
+              } else {
+                tableData.forEach(t => {
+                  t[keyPre[i] + 'Score'] = 0
+                })
+              }
+            })
+            tableData.forEach(t => {
+              t.score = (t.tcpScore + t.httpScore + t.sslScore + t.tcpLostScore + t.packetRetransScore) * 6
+            })
+            console.info(tableData)
+          })
+        }
+      })
+    },
+    computeScore (data, index) {
+      if (index === 0) {
+        return 0.3 * (data.establishLatencyMs - 500) / (50 - 500)
+      } else if (index === 1) {
+        return 0.05 * (data.httpResponseLatency - 500) / (50 - 500)
+      } else if (index === 2) {
+        return 0.05 * (data.sslConLatency - 500) / (50 - 500)
+      } else if (index === 3) {
+        return 0.3 * (data.tcpLostlenPercent - 0.5) / (0.01 - 0.5)
+      } else if (index === 4) {
+        return 0.3 * (data.pktRetransPercent - 0.5) / (0.01 - 0.5)
+      }
     }
+  },
+  mounted () {
+    this.init()
   }
 }
 </script>

src/views/charts2/charts/NpmMap.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import { mapData, mapData2, drillDownData } from '@/views/charts2/charts/mapTestData'
+import { mapData, drillDownData } from '@/views/charts2/charts/mapTestData'
 import { shallowRef } from 'vue'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
@@ -55,7 +55,6 @@ export default {
     return {
       locationOptions,
       mapData,
-      mapData2,
       drillDownData,
       myChart: null,
       polygonSeries: null,
@@ -64,59 +63,7 @@ export default {
       countryImageSeries: null,
       // Server | Client
       trafficDirection: 'Server',
-      location: '',
+      location: ''
-      keyMapping: [
-        {
-          key: 'sessions',
-          label: this.$t('overall.sessions'),
-          unitType: unitTypes.number
-        },
-        {
-          key: 'establishLatency',
-          label: this.$t('networkAppPerformance.tripTime'),
-          unitType: unitTypes.time
-        },
-        {
-          key: 'httpResponseLatency',
-          label: this.$t('networkAppPerformance.httpResponse'),
-          unitType: unitTypes.time
-        },
-        {
-          key: 'sslConLatency',
-          label: this.$t('networkAppPerformance.sslResponse'),
-          unitType: unitTypes.time
-        },
-        {
-          key: 'sequenceGapLossPercent',
-          label: this.$t('networkAppPerformance.packetLossRate'),
-          unitType: unitTypes.percent
-        },
-        {
-          key: 'pktRetransPercent',
-          label: this.$t('networkAppPerformance.retransmissionRate'),
-          unitType: unitTypes.percent
-        },
-        {
-          key: 'packets',
-          label: this.$t('overall.packets'),
-          unitType: unitTypes.number
-        },
-        {
-          key: 'sentBytes',
-          label: this.$t('overall.sent'),
-          unitType: unitTypes.byte
-        },
-        {
-          key: 'receivedBytes',
-          label: this.$t('overall.received'),
-          unitType: unitTypes.byte
-        },
-        {
-          key: 'count',
-          label: this.$t('overall.count'),
-          unitType: unitTypes.number
-        }
-      ]
     }
   },
   methods: {
@@ -132,7 +79,7 @@ export default {
       }
       this.myChart = shallowRef(chart)
       this.polygonSeries = shallowRef(this.polygonSeriesFactory())
-      this.worldImageSeries = shallowRef(this.imageSeriesFactory())
+      this.worldImageSeries = shallowRef(this.imageSeriesFactory('score'))
       // 渲染
       this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
       this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
@@ -145,7 +92,7 @@ export default {
           if (geoData) {
             this.countrySeries = shallowRef(this.polygonSeriesFactory())
             this.countrySeries.geodata = geoData
-            this.countryImageSeries = shallowRef(this.imageSeriesFactory())
+            this.countryImageSeries = shallowRef(this.imageSeriesFactory('score'))
             this.polygonSeries.hide()
             this.worldImageSeries.hide()
             const country = ev.target.dataItem.dataContext.name
@@ -175,13 +122,10 @@ export default {
         this.showMapBackButton = !!country
         const data = chartData || this.mapData
         imageSeries.data = data.map(r => ({
-          ...this.convertMapData(r),
+          score: r.score,
-          id: r.ipLocationId || r.Country,
+          id: r.locationId,
-          dnsServerRole: r.dnsServerRole,
+          color: this.scoreColor(r.score),
-          name: r.ipLocationCity || r.ipLocationProvince || r.ipLocationCountry || r.Country,
+          border: this.scoreColor(r.score)
-          desc: 'hehe',
-          color: '#7E9F54',
-          border: '#7E9F54'
         }))
       } catch (e) {
         console.error(e)
@@ -194,20 +138,15 @@ export default {
       }
     },
     convertMapData (data) {
-      const converted = {}
+    },
-      this.keyMapping.forEach(mapping => {
+    scoreColor (score) {
-        if (data[mapping.key] || data[mapping.key] === 0) {
+      if (score >= 0 && score <= 2) {
-          converted[mapping.key] = Number(data[mapping.key])
+        return '#E26154'
-          converted[`${mapping.key}Label`] = mapping.label
+      } else if (score > 2 && score <= 4) {
-          converted[`${mapping.key}ShowValue`] = valueToRangeValue(data[mapping.key], mapping.unitType).join(' ')
+        return '#E5A219'
-          converted[`${mapping.key}Display`] = 'block'
+      } else if (score > 4 && score <= 6) {
-        } else {
+        return '#7E9F54'
-          converted[mapping.key] = ''
+      }
-          converted[`${mapping.key}Label`] = ''
-          converted[`${mapping.key}Display`] = 'none'
-        }
-      })
-      return converted
     },
     polygonSeriesFactory () {
       const polygonSeries = this.myChart.series.push(new am4Maps.MapPolygonSeries())

src/views/charts2/charts/mapTestData.js

@@ -1,210 +1,4 @@
 export const mapData = [
-  {
-    "count": 9,
-    "ipLocationId": "AU",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "australia"
-  },
-  {
-    "count": 3,
-    "ipLocationId": "AT",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "austria"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "bolivia"
-  },
-  {
-    "count": 2,
-    "ipLocationId": "BR",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "brazil"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "CM",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "cameroon"
-  },
-  {
-    "count": 2,
-    "ipLocationId": "CL",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "chile"
-  },
-  {
-    "count": 11,
-    "ipLocationId": "CN",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "china"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "CY",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "cyprus"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "CZ",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "czech republic"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "FR",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "france"
-  },
-  {
-    "count": 2,
-    "ipLocationId": "ID",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "indonesia"
-  },
-  {
-    "count": 2,
-    "ipLocationId": "IE",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "ireland"
-  },
-  {
-    "count": 5,
-    "ipLocationId": "JP",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "japan"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "KW",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "kuwait"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "KG",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "kyrgyzstan"
-  },
-  {
-    "count": 2,
-    "ipLocationId": "MX",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "mexico"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "moldova"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "MN",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "mongolia"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "MZ",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "mozambique"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "NZ",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "new zealand"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "NE",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "niger"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "PT",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "portugal"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "RO",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "romania"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "SR",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "suriname"
-  },
-  {
-    "count": 4,
-    "ipLocationId": "SE",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "sweden"
-  },
-  {
-    "count": 2,
-    "ipLocationId": "CH",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "switzerland"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "TH",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "thailand"
-  },
-  {
-    "count": 5,
-    "ipLocationId": "",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "the netherlands"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "TK",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "tokelau"
-  },
-  {
-    "count": 2,
-    "ipLocationId": "AE",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "united arab emirates"
-  },
-  {
-    "count": 20,
-    "ipLocationId": "",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "united kingdom"
-  },
-  {
-    "count": 81,
-    "ipLocationId": "US",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "united states"
-  },
-  {
-    "count": 3,
-    "ipLocationId": "UZ",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "uzbekistan"
-  },
-  {
-    "count": 1,
-    "ipLocationId": "",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "venezuela"
-  }
-]
-export const mapData2 = [
   {
     "score": 5,
     "locationId": "AU",
@@ -224,7 +18,7 @@ export const mapData2 = [
     "locationCountry": "bolivia"
   },
   {
-    "score": 2,
+    "score": 5,
     "locationId": "BR",
     "direction": "server",
     "locationCountry": "brazil"
@@ -236,7 +30,7 @@ export const mapData2 = [
     "locationCountry": "cameroon"
   },
   {
-    "score": 2,
+    "score": 5,
     "locationId": "CL",
     "direction": "server",
     "locationCountry": "chile"
@@ -260,7 +54,7 @@ export const mapData2 = [
     "locationCountry": "czech republic"
   },
   {
-    "score": 1,
+    "score": 5,
     "locationId": "FR",
     "direction": "server",
     "locationCountry": "france"
@@ -308,7 +102,7 @@ export const mapData2 = [
     "locationCountry": "moldova"
   },
   {
-    "score": 1,
+    "score": 4,
     "locationId": "MN",
     "direction": "server",
     "locationCountry": "mongolia"
@@ -326,7 +120,7 @@ export const mapData2 = [
     "locationCountry": "new zealand"
   },
   {
-    "score": 1,
+    "score": 4,
     "locationId": "NE",
     "direction": "server",
     "locationCountry": "niger"
@@ -411,18 +205,4 @@ export const mapData2 = [
   }
 ]
 export const drillDownData = [
-  {
-    "ipLocationProvince": "beijing",
-    "count": 1,
-    "ipLocationId": "CN-BJ",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "china"
-  },
-  {
-    "ipLocationProvince": "taiwan",
-    "count": 3,
-    "ipLocationId": "CN",
-    "dnsServerRole": "tldns",
-    "ipLocationCountry": "china"
-  }
 ]