CN-869 feat: 单测用例--npm events 近期事件表格

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

@@ -48,7 +48,7 @@
                   <div v-else-if="scope.row.bytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
                     <i class="cn-icon-decline cn-icon"></i>&nbsp;
                     <span v-if="scope.row.bytesRateChainRatio >= -5">
-                        {{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
+                        {{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('').replace(/-/g, '')}}
                       </span>
                     <span v-else>>500.00%</span>
                   </div>
@@ -71,7 +71,7 @@
                   <div v-else-if="scope.row.outboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
                     <i class="cn-icon-decline cn-icon"></i>&nbsp;
                     <span v-if="scope.row.outboundBytesRateChainRatio >= -5">
-                        {{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
+                        {{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('').replace(/-/g, '')}}
                       </span>
                     <span v-else>>500.00%</span>
                   </div>
@@ -94,7 +94,7 @@
                   <div v-else-if="scope.row.inboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
                     <i class="cn-icon-decline cn-icon"></i>&nbsp;
                     <span v-if="scope.row.inboundBytesRateChainRatio >= -5" :test-id="`inbound-${scope.row.appSubcategory}`">
-                        {{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
+                        {{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('').replace(/-/g, '')}}
                       </span>
                     <span v-else :test-id="`inbound-${scope.row.appSubcategory}`">>500.00%</span>
                   </div>
@@ -378,6 +378,9 @@ export default {
   },
   mounted () {
     this.init()
+  },
+  beforeUnmount () {
+    this.unitConvert = null
   }
 }
 </script>

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

@@ -21,15 +21,15 @@
           <template  #default="scope" :column="item">
             <div class="data-recent-table">
               <template v-if="item.prop === 'eventSeverity'">
-                <span class="data-recent-table-severity" :class="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+                <span class="data-recent-table-severity" :class="scope.row[item.prop]" :test-id="`eventSeverity-${scope.row.eventSeverity}-${scope.$index}`">{{scope.row[item.prop]}}</span>
               </template>
               <template v-else-if="item.prop === 'eventKey'">
-                <span class="data-recent-table-entity click-active" @click="jumpPage(scope.row)">{{splitEventKey(scope.row[item.prop])}}</span>
+                <span class="data-recent-table-entity click-active" @click="jumpPage(scope.row)" :test-id="`eventKey-${splitEventKey(scope.row.eventKey)}-${scope.$index}`">{{splitEventKey(scope.row[item.prop])}}</span>
               </template>
               <template v-else-if="item.prop === 'eventType'">
-                <span class="data-recent-table-eventType">{{scope.row[item.prop]}}</span>
+                <span class="data-recent-table-eventType" :test-id="`eventType-${scope.row.eventType}-${scope.$index}`">{{scope.row[item.prop]}}</span>
               </template>
-              <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+              <span v-else-if="scope.row[item.prop]" :test-id="`startTime-${scope.row.startTime}-${scope.$index}`">{{scope.row[item.prop]}}</span>
               <span v-else>-</span>
             </div>
           </template>
@@ -48,13 +48,13 @@
 </template>
 
 <script>
-import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getSecond, dateFormatByAppearance } from '@/utils/date-util'
 import chartMixin from '@/views/charts2/chart-mixin'
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
 import ChartError from '@/components/common/Error'
+import axios from 'axios'
 
 export default {
   name: 'NpmRecentEvents',
@@ -99,7 +99,7 @@ export default {
         endTime: getSecond(this.timeFilter.endTime),
         limit: 8
       }
-      if (condition.length > 1 && this.dimensionType) {
+      if (condition && condition.length > 1 && this.dimensionType) {
         params.param = condition[1]
         params.type = this.dimensionType
         if (params.type === 'serverIp' || params.type === 'clientIp') params.type = 'ip'
@@ -114,7 +114,8 @@ export default {
         url = api.npm.events.recentEvents
       }
       this.toggleLoading(true)
-      get(url, params).then(res => {
+      axios.get(url, { params: params }).then(res => {
+        res = res.data
         if (res.code === 200) {
           this.showError = false
           this.isNoData = res.data.result.length === 0

src/views/charts2/charts/npm/localComponents/SingleValue.vue

@@ -1,125 +0,0 @@
-<template>
-  <div class="single-value" v-for="(npm, index) in newNpmNetworkData" :key="index">
-    <div class="single-value__title" style="display: flex">
-      {{ $t(npmNetworkName[index].name) }}
-      <chart-error v-if="npm.message" tooltip :content="npm.message"></chart-error>
-    </div>
-
-    <div class="single-value__content" >
-      <div class="single-value__content-number" v-if="index ===0 || index ===1 || index ===2" :test-id="`singleValueContent${index}`">
-        {{ unitConvert(npm.Avg, unitTypes.time).join(' ') }}
-      </div>
-      <div class="single-value__content-number" v-else :test-id="`singleValueContent${index}`">
-        {{unitConvert(npm.Avg, unitTypes.percent).join(' ')}}
-      </div>
-      <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red" >
-        <i class="cn-icon-rise1 cn-icon" :test-id="`singleValueTrendIcon${index}`"></i>&nbsp;
-        <span v-if="npm.value <= 5" :test-id="`singleValueTrendValue${index}`">
-            {{ unitConvert(npm.value, unitTypes.percent).join('') }}
-        </span>
-        <span v-else :test-id="`singleValueTrendValue${index}`">>500.00%</span>
-      </div>
-      <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green" >
-        <i class="cn-icon-decline cn-icon" :test-id="`singleValueTrendIcon${index}`"></i>&nbsp;
-        <span v-if="npm.value >= -5" :test-id="`singleValueTrendValue${index}`">
-            {{ unitConvert(npm.value, unitTypes.percent).join('') }}
-        </span>
-        <span v-else :test-id="`singleValueTrendValue${index}`">>500.00%</span>
-      </div>
-      <div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black" >
-        <i class="cn-icon-constant cn-icon" :test-id="`singleValueTrendIcon${index}`"></i>
-      </div>
-      <div v-else></div>
-    </div>
-
-    <div class="single-value__circle">
-      <div class="single-value__circle-p95" :test-id="`singleValueP95${index}`">
-        <span v-if="index ===0 || index ===1 || index ===2">
-          P95:{{ unitConvert(npm.P95, unitTypes.time).join(' ') }}</span>
-        <span v-else>
-          P95:{{ unitConvert(npm.P95, unitTypes.percent).join(' ') }}
-        </span>
-      </div>
-      <div class="single-value__circle-p99" :test-id="`singleValueP99${index}`">
-        <span v-if="index ===0 || index ===1 || index ===2">
-          P99:{{ unitConvert(npm.P99, unitTypes.time).join(' ') }}
-        </span>
-        <span v-else>
-          P99:{{ unitConvert(npm.P99, unitTypes.percent).join(' ') }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { unitTypes } from '@/utils/constants'
-import unitConvert from '@/utils/unit-convert'
-import ChartError from '@/components/common/Error'
-
-export default {
-  name: 'SingleValue',
-  components: { ChartError },
-  props: {
-    npmNetworkName: Array,
-    npmNetworkData: Array
-  },
-  data () {
-    return {
-      unitTypes,
-      unitConvert,
-      newNpmNetworkData: [] // 整合处理传过来的数据列表
-    }
-  },
-  watch: {
-    npmNetworkData: {
-      deep: true,
-      handler () {
-        this.initData()
-      }
-    }
-  },
-  mounted () {
-    this.initData()
-  },
-  methods: {
-    /**
-    * 初始化数据
-    */
-    initData () {
-      // 传过来的数据
-      const npmNetworkData = this.npmNetworkData
-      // 处理数据后的数组
-      const dealList = []
-
-      if (npmNetworkData !== undefined && npmNetworkData.length > 0) {
-        npmNetworkData.forEach((item) => {
-          const tempObj = {}
-          for (const i in item) {
-            if (item.msg || item.message) {
-              // 为了兼容字段为msg的情况
-              tempObj.message = item.msg ? item.msg : item.message
-            } else {
-              // 将含有avg、p90等关键字使用avg、p90来代替，形成统一属性
-              if (i.indexOf('Avg') > -1) {
-                tempObj.Avg = item[i]
-              } else if (i.indexOf('P50') > -1) {
-                tempObj.P50 = item[i]
-              } else if (i.indexOf('P90') > -1) {
-                tempObj.P90 = item[i]
-              } else if (i.indexOf('P95') > -1) {
-                tempObj.P95 = item[i]
-              } else if (i.indexOf('P99') > -1) {
-                tempObj.P99 = item[i]
-              }
-              tempObj.value = item.value
-            }
-          }
-          dealList.push(tempObj)
-        })
-        this.newNpmNetworkData = dealList
-      }
-    }
-  }
-}
-</script>