CN-762 DNS service insights 显示建议(dns qtype和rcode维度数据映射及自定义metric名称修改)

src/components/layout/Header.vue

@@ -194,7 +194,7 @@ import {
 } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
-import { combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler, combinDrilldownTableWithUserConfig } from '@/utils/tools'
+import { combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler, combinDrilldownTableWithUserConfig,mapDnsData } from '@/utils/tools'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import { db } from '@/indexedDB'
 
@@ -350,14 +350,14 @@ export default {
         window.location.reload()
       })
     },
-    initDropdownList () {
+    async initDropdownList () {
-      const currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : ''
+      let currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : ''
-      const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
+      let columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
       let type = 'ip'
-      const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
+      let tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
-      const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
+      let curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
       if (curTableInCode && curTableInCode.tabList) {
-        const curTab = curTableInCode.tabList.find(item => item.label == columnName)
+        let curTab = curTableInCode.tabList.find(item => item.label == columnName)
         if (curTab) {
           type = curTab.prop
         }
@@ -369,9 +369,15 @@ export default {
         type: type,
         name: this.dropDownValue ? this.dropDownValue : ''
       }
-      get(curTableInCode.url.drilldownList, params).then(response => {
+      get(curTableInCode.url.drilldownList, params).then(async response => {
         if (response.code === 200) {
-          this.breadcrumbColumnValueListShow = response.data.result
+          let dataList = response.data.result
+          if('qtype' === type){
+            dataList = await mapDnsData(dataList,'dnsQtype','qtype')
+          }else if('rcode' === type){
+            dataList = await mapDnsData(dataList,'dnsRcode','rcode')
+          }
+          this.breadcrumbColumnValueListShow = dataList
           this.$nextTick(() => {
             this.breadcrumbColumnValueListShow.forEach(item => {
               const selectedDom = document.getElementById(item)

src/utils/tools.js

@@ -2,7 +2,7 @@ import { ElMessageBox, ElMessage } from 'element-plus'
 import i18n from '@/i18n'
 import _ from 'lodash'
 import { storageKey, iso36112, topDomain, echartsFontSize, dbGeoDataTableName, networkTable, dbDrilldownTableConfig } from '@/utils/constants'
-import { getIso36112JsonData } from '@/utils/api'
+import { getIso36112JsonData,getDictList } from '@/utils/api'
 import { format } from 'echarts'
 import router from '@/router'
 import { db } from '@/indexedDB'
@@ -855,6 +855,47 @@ export function getTabList (curTable, curMetric) {
   }
   return tabs
 }
+export async function mapDnsData(list,type,prop){
+  let valueGroup = []
+  const dnsData = await getDictList({ type:type,pageSize: -1 })
+  if(list && list.length > 0){
+    list.forEach(data => {
+      if(typeof data === 'string'){
+        let code = Number(data)
+        let dictData = dnsData.find(mapData => {return Number(mapData.code) === code})
+        if(dictData){
+          data = dictData.value
+        }else {
+          dnsData.forEach(mapData => {
+            let range = mapData.code.split('-')
+            if(range && range.length >= 2){
+              let start = range[0].trim()
+              let eEnd = range[1].trim()
+              data = (start <= code && code <= eEnd) ? mapData.value : code
+            }
+          })
+        }
+      }else {
+        let code = Number(data[prop])
+        let dictData = dnsData.find(mapData => {return Number(mapData.code) === code})
+        if(dictData){
+          data[prop] = dictData.value
+        }else {
+          dnsData.forEach(mapData => {
+            let range = mapData.code.split('-')
+            if(range && range.length >= 2){
+              let start = range[0].trim()
+              let eEnd = range[1].trim()
+              data[prop] = (start <= code && code <= eEnd) ? mapData.value : code
+            }
+          })
+        }
+      }
+      valueGroup.push(data)
+    })
+  }
+  return valueGroup
+}
 export function combineTabList (tableType, list, commonTabList) {
   const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
   const listInCode = curTableInCode ? curTableInCode.tabList : []

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

@@ -155,7 +155,7 @@
               </li>
             </transition-group>
           </el-tab-pane>
-          <el-tab-pane :label="$t('network.metric')" name="metrics" width="50%" >
+          <el-tab-pane :label="$t('network.direction')" name="metrics" width="50%" >
             <transition-group name="dragMetric" class="list" tag="ul" ref="metric">
               <template v-for="(item, index) in customTableTitles"  :key="item.label">
                 <li v-if="index>0"
@@ -182,15 +182,15 @@
 </template>
 <script>
 import { ref } from 'vue'
-import { operationType, unitTypes, networkTable, tableColumnType, networkDefaultLimit, curTabState, storageKey, dbDrilldownTableConfig } from '@/utils/constants'
+import { operationType, unitTypes, networkTable, tableColumnType, networkDefaultLimit, curTabState, storageKey, dbDrilldownTableConfig,fromRoute } from '@/utils/constants'
 import { get } from '@/utils/http'
 import unitConvert from '@/utils/unit-convert'
-import { getChainRatio, computeScore, urlParamsHandler, overwriteUrl, getUserDrilldownTableGeo, readDrilldownTableConfigByUser, combinDrilldownTableWithUserConfig } from '@/utils/tools'
+import { getChainRatio, computeScore, urlParamsHandler, overwriteUrl, getUserDrilldownTableGeo, readDrilldownTableConfigByUser, combinDrilldownTableWithUserConfig,mapDnsData } from '@/utils/tools'
 import { getSecond } from '@/utils/date-util'
 import chartMixin from '@/views/charts2/chart-mixin'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import { db } from '@/indexedDB'
-import { api } from '@/utils/api'
+import { api,getDictList } from '@/utils/api'
 
 export default {
   name: 'NetworkOverviewTabs',
@@ -545,9 +545,17 @@ export default {
       this.changeUrlTabState()
       // console.log('InitState: 结束')
     },
-    initData () {
+    async initData () {
       const tabList = []
       const curTab = this.getCurTab()
+      if(this.tableType === fromRoute.dnsServiceInsights){
+        let curTabProp = this.$route.query.curTab ? this.$route.query.curTab : null
+        if('qtype' === curTabProp){
+          this.chartData = await mapDnsData( this.chartData,'dnsQtype','qtype')
+        }else if('rcode' === curTabProp){
+          this.chartData = await mapDnsData( this.chartData,'dnsRcode','rcode')
+        }
+      }
       const tableDataTmp = this.chartData.map(item => {
         tabList.push(item[curTab.prop])
         const otherData = { tab: item[curTab.prop] }