CN-668 Dashboard - npm - 下钻功能交互开发:protocol和port的tab参数传递有问题;监视timeFilter;npm事件表格对接接口

src/components/layout/Header.vue

@@ -352,10 +352,20 @@ export default {
         if (curTab) {
           const queryCondition = []
           const searchProps = curTab.dillDownProp
-          searchProps.forEach(item => {
+          if (curTab.prop === 'protocolPort') {
-            queryCondition.push(item + "='" + value + "'")
+            const valueGroup = value.split(':')
-          })
+            if (valueGroup) {
-          this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+              queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'")
+              queryCondition.push('common_server_port=' + valueGroup[1])
+            }
+            console.log(queryCondition.join(' AND '))
+            this.$store.commit('setQueryCondition', queryCondition.join(' AND '))
+          } else {
+            searchProps.forEach(item => {
+              queryCondition.push(item + "='" + value + "'")
+            })
+            this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+          }
         }
       }
 

src/views/charts2/Chart.vue

@@ -217,7 +217,7 @@ export default {
           ...this.queryTimeRange,
           ...extraParams
         }
-        let requestUrl = url
+        let requestUrl = url || chartParams.url
 
         if (this.chart.type === typeMapping.networkOverview.table) {
           const chartObj = this.$refs['tab' + this.chart.id]

src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue

@@ -216,6 +216,28 @@ export default {
           this.initData()
         }
       }
+    },
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        const curTab = this.getCurTab()
+        let queryParams = {
+          orderBy: this.orderBy,
+          limit: 10,
+          type: curTab.prop
+        }
+        const condition = this.$store.getters.getQueryCondition
+        if (condition) {
+          queryParams = {
+            orderBy: this.orderBy,
+            limit: 10,
+            type: curTab.prop,
+            q: condition
+          }
+        }
+        this.toggleLoading(true)
+        this.$emit('getChartData', this.getCurUrl(), queryParams)
+      }
     }
   },
   mixins: [chartMixin],
@@ -484,8 +506,10 @@ export default {
                       } else if (totalDiff < 0) {
                         trend = 'down'
                         trendPercent = trendPercent + '%'
-                      } else {
+                      } else if (totalDiff === 0) {
                         trend = 'noChange'// 横向图标
+                      } else {
+                        trend = ''
                       }
                       if (trendPercent === '0%') {
                         trend = 'noChange'
@@ -494,7 +518,7 @@ export default {
                     }
                   }
                 }
-                item[tableColumn.prop] = [item[tableColumn.prop], trend, trendPercent]
+                item[tableColumn.prop] = [item[tableColumn.prop] ? item[tableColumn.prop] : '', trend, trendPercent]
               })
             }
           }).catch(e => {
@@ -566,8 +590,10 @@ export default {
                                 } else if (totalDiff < 0) {
                                   trend = 'down'
                                   trendPercent = trendPercent + '%'
-                                } else {
+                                } else if (totalDiff === 0) {
                                   trend = 'noChange'// 横向图标
+                                } else {
+                                  trend = ''
                                 }
                                 if (trendPercent === '0%') {
                                   trend = 'noChange'
@@ -576,7 +602,9 @@ export default {
                               }
                             }
                           }
-                          item[tableColumn.prop] = [item[tableColumn.prop] ? item[tableColumn.prop] : '', trend, trendPercent]
+                          if (!(item[tableColumn.prop] && item[tableColumn.prop].length >= 3)) {
+                            item[tableColumn.prop] = [item[tableColumn.prop] ? item[tableColumn.prop] : '', trend, trendPercent]
+                          }
                         })
                       }
                     }).catch(e => {
@@ -649,10 +677,19 @@ export default {
 
       const queryCondition = []
       const searchProps = tabGroup[0].dillDownProp
-      searchProps.forEach(item => {
+      if (tabGroup[0].prop === 'protocolPort') {
-        queryCondition.push(item + "='" + columnValue + "'")
+        const valueGroup = columnValue.split(':')
-      })
+        if (valueGroup) {
-      this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+          queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'")
+          queryCondition.push('common_server_port=' + valueGroup[1])
+        }
+        this.$store.commit('setQueryCondition', queryCondition.join(' AND '))
+      } else {
+        searchProps.forEach(item => {
+          queryCondition.push(item + "='" + columnValue + "'")
+        })
+        this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+      }
       /*
         * 点击表格第一列后
             1.顶部面包屑增加两级，分别是列名和值；
@@ -726,10 +763,19 @@ export default {
       const queryCondition = []
       const curTab = this.getCurTab()
       const searchProps = curTab.dillDownProp
-      searchProps.forEach(item => {
+      if (curTab.prop === 'protocolPort') {
-        queryCondition.push(item + "='" + columnValue + "'")
+        const valueGroup = columnValue.split(':')
-      })
+        if (valueGroup) {
-      this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+          queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'")
+          queryCondition.push('common_server_port=' + valueGroup[1])
+        }
+        this.$store.commit('setQueryCondition', queryCondition.join(' AND '))
+      } else {
+        searchProps.forEach(item => {
+          queryCondition.push(item + "='" + columnValue + "'")
+        })
+        this.$store.commit('setQueryCondition', queryCondition.join(' OR '))
+      }
     },
     metricChange () {
     },
@@ -790,7 +836,7 @@ export default {
           }
         }
         this.toggleLoading(true)
-        this.$emit('getChartData', this.getCurUrl(), queryParams, queryParams.q)
+        this.$emit('getChartData', this.getCurUrl(), queryParams)
       }
     },
     getCurUrl () {

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

@@ -33,35 +33,36 @@
           </template>
           <template  #default="scope" :column="item">
             <div class="data-app-event-table">
-              <template v-if="item.prop === 'applications'">
+              <template v-if="item.prop === 'domain' ||item.prop === 'appName' ||item.prop === 'serverIp' ">
                 <span class="data-applications">{{$t(scope.row[item.prop])}}</span>
               </template>
-              <template v-else-if="item.prop === 'severity'">
+              <template v-else-if="item.prop === 'eventSeverity'">
-                <template v-if="scope.row[item.prop]==='Critical'">
+                <template v-if="scope.row[item.prop]==='critical'">
                   <div v-for="item in 5" class="red-dot"></div>
                 </template>
-                <template v-else-if="scope.row[item.prop]==='High'">
+                <template v-else-if="scope.row[item.prop]==='high'">
                   <div v-for="item in 4" class="red-dot"></div>
                   <div class="grey-dot"></div>
                 </template>
-                <template v-else-if="scope.row[item.prop]==='Medium'">
+                <template v-else-if="scope.row[item.prop]==='medium'">
                   <div v-for="item in 3" class="red-dot"></div>
                   <div v-for="item in 2" class="grey-dot"></div>
                 </template>
-                <template v-else-if="scope.row[item.prop]==='Low'">
+                <template v-else-if="scope.row[item.prop]==='low'">
                   <div v-for="item in 2" class="red-dot"></div>
                   <div v-for="item in 3" class="grey-dot"></div>
                 </template>
-                <template v-else-if="scope.row[item.prop]==='Info'">
+                <template v-else-if="scope.row[item.prop]==='info'">
                   <div v-for="item in 1" class="red-dot"></div>
                   <div v-for="item in 4" class="grey-dot"></div>
                 </template>
                 <span class="data-severity" >{{$t(scope.row[item.prop])}}</span>
               </template>
               <template v-else-if="item.prop === 'eventType'">
-                <span class="data-eventType" v-for="type in scope.row[item.prop]">{{type}}</span>
+               <!-- <span class="data-eventType" v-for="type in scope.row[item.prop]">{{type}}</span>-->
+                <span class="data-eventType" >{{$t(scope.row[item.prop])}}</span>
               </template>
-              <template v-else-if="item.prop === 'eventCount'">
+              <template v-else-if="item.prop === 'count'">
                 <span class="data-eventCount">{{scope.row[item.prop]}}</span>
               </template>
               <span v-else>-</span>
@@ -74,77 +75,84 @@
 </template>
 
 <script>
+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, computeScore } from '@/utils/tools'
 import chartMixin from '@/views/charts2/chart-mixin'
 
 export default {
   name: 'NpmAppEventTable',
-  mixins: [chartMixin],
   data () {
     return {
-      metric: 'Application',
+      metric: 'appLabel',
+      dataProp: 'appLabel',
       options: [
         {
-          value: 'Application',
+          value: 'appLabel',
           label: 'Application'
         },
         {
-          value: 'Provider',
+          value: 'idcRenter',
           label: 'Provider'
         }
       ],
+      typePropMap: {
+        appLabel: 'appName',
+        idcRenter: 'domain'
+      },
+      typeLabelMap: {
+        appLabel: 'network.applications',
+        idcRenter: 'network.idcRenter'
+      },
       dotList: ['grey-dot', 'grey-dot', 'grey-dot', 'grey-dot', 'grey-dot'],
-      tableData: [
+      tableData: [],
-        {
-          applications: 'Critical',
-          severity: 'Critical',
-          eventCount: 8,
-          eventType: ['dns error', 'http error', 'high dns response time']
-        }, {
-          applications: 'High',
-          severity: 'High',
-          eventCount: 8,
-          eventType: ['dns error']
-        }, {
-          applications: 'Critical',
-          severity: 'Critical',
-          eventCount: 8,
-          eventType: ['dns error', 'high dns response time']
-        }, {
-          applications: 'Medium',
-          severity: 'Medium',
-          eventCount: 8,
-          eventType: ['dns error', 'http error', 'high dns response time']
-        }, {
-          applications: 'Low',
-          severity: 'Low',
-          eventCount: 8,
-          eventType: ['http error', 'high dns response time']
-        }, {
-          applications: 'Info',
-          severity: 'Info',
-          eventCount: 8,
-          eventType: ['dns error', 'high dns response time']
-        }, {
-          applications: 'Critical',
-          severity: 'Critical',
-          eventCount: 8,
-          eventType: ['dns error', 'http error']
-        }, {
-          applications: 'Critical',
-          severity: 'Critical',
-          eventCount: 8,
-          eventType: ['dns error', 'http error', 'high dns response time']
-        }
-      ],
       customTableTitles: [
-        { label: 'network.applications', prop: 'applications' },
+        { label: 'network.applications', prop: 'serverIp' },
-        { label: 'network.severity', prop: 'severity' },
+        { label: 'network.severity', prop: 'eventSeverity' },
         { label: 'network.eventType', prop: 'eventType' },
-        { label: 'network.eventCount', prop: 'eventCount' }
+        { label: 'network.eventCount', prop: 'count' }
       ]
     }
   },
+  mixins: [chartMixin],
+  watch: {
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.init()
+      }
+    }
+  },
+  mounted () {
+    this.init()
+  },
   methods: {
+    init () {
+      this.toggleLoading(true)
+      this.customTableTitles[0].prop = this.typePropMap[this.metric]
+      this.customTableTitles[0].label = this.typeLabelMap[this.metric]
+      this.tableData = []
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        limit: 10,
+        type: this.metric
+      }
+      get(api.npm.events.dimensionEvents, params).then(res => {
+        if (res.code === 200) {
+          this.tableData = res.data.result
+          console.log(res.data.result)
+        }
+      }).finally(() => {
+        this.toggleLoading(false)
+      })
+    },
+    changeMetric () {
+      this.init()
+    },
     columnWidth (index) {
       if (index === 0 || index === 1) {
         return '20%'
@@ -154,11 +162,9 @@ export default {
         return '15%'
       }
     }
+
   },
   computed: {
-  },
-  mounted () {
-    this.$emit('toggleLoading', false)
   }
 }
 </script>