CN-762 DNS service insights 显示建议:修改由dns的qtype及rcode维度转换对应名称的问题所影响的部分（panel名称，顶部四级菜单显示及下拉显示等）

2022-11-04 12:18:26 +08:00
parent c0487a708a
commit 34e16fc890
4 changed files with 159 additions and 88 deletions
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -53,7 +53,17 @@
                          trigger="click">
                <template #reference>
                  <div class="breadcrumb-button"  id="breadcrumbButton" :class="showBackground?'breadcrumb-button__active':''"  >
-                     <span  id="breadcrumbValue"> {{item}}</span><i class="cn-icon-xiala cn-icon"></i>
+                    <span  id="breadcrumbValue">
+                      <template v-if="curTabProp === 'qtype'">
+                        <span>{{dnsQtypeMapData.get(item) ? dnsQtypeMapData.get(item):item}}</span>
+                      </template>
+                      <template v-else-if="curTabProp === 'rcode'">
+                        <span>{{dnsRcodeMapData.get(item) ? dnsRcodeMapData.get(item):item}}</span>
+                      </template>
+                      <template v-else>
+                        <span>{{item}}</span>
+                      </template>
+                    </span><i class="cn-icon-xiala cn-icon"></i>
                  </div>
                </template>
                <el-row type="flex" justify="center" style="width: fit-content;flex-direction: column;">
@@ -65,7 +75,15 @@
                  </div>
                  <ul class="select-dropdown" id="breadcrumbSelectDropdown"  @scroll="scrollList()">
                    <li v-for="item in breadcrumbColumnValueListShow" title='' :key="item" :id="item" class="select-dropdown__item" @click="changeValue(item)" :class="selected?'':''">
-                      <span>{{item}}</span>
+                      <template v-if="curTabProp === 'qtype'">
+                        <span>{{dnsQtypeMapData.get(item) ? dnsQtypeMapData.get(item):item}}</span>
+                      </template>
+                      <template v-else-if="curTabProp === 'rcode'">
+                        <span>{{dnsRcodeMapData.get(item) ? dnsRcodeMapData.get(item):item}}</span>
+                      </template>
+                      <template v-else>
+                        <span>{{item}}</span>
+                      </template>
                    </li>
                  </ul>
                </el-row>
@@ -190,11 +208,12 @@ import {
  networkTable,
  operationType,
  storageKey,
-  wholeScreenRouterMapping
+  wholeScreenRouterMapping,
+  fromRoute
 } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
-import { combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler, combinDrilldownTableWithUserConfig,mapDnsData } from '@/utils/tools'
+import { combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler, combinDrilldownTableWithUserConfig,getDnsMapData } from '@/utils/tools'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import { db } from '@/indexedDB'

@@ -226,10 +245,15 @@ export default {
      showMenu: false,
      dropDownValue: '',
      breadcrumbColumnValueListShow: [],
+      curTabProp:'',
+      dnsRcodeMapData:[],
+      dnsQtypeMapData:[],
+      isDnsMapType:false,
      valueMeta: [],
      showBackground: false,
      selected: false,
      valueMenuId: '',
+      fromRoute: fromRoute,
      detectionMenuList: [
        {
          name: 'securityEvents',
@@ -270,6 +294,7 @@ export default {
    },
    breadcrumb () {
      const breadcrumbMap = []
+      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
      this.$store.getters.menuList.forEach(menu => {
        if (this.$_.isEmpty(menu.children) && menu.route) {
          breadcrumbMap.push({ name: this.$t(menu.i18n), path: menu.route, columnName: menu.columnName, columnValue: menu.columnValue })
@@ -312,8 +337,10 @@ export default {
      }
    }
  },
-  mounted () {
+  async mounted () {
    this.from = Object.keys(this.entityType)[0]
+    this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+    this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
    this.initDropdownList()
  },
  setup () {
@@ -350,7 +377,18 @@ export default {
        window.location.reload()
      })
    },
+    getCurTabByLabel(label){
+      let curTab = null
+      let tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
+      let curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
+      if (curTableInCode && curTableInCode.tabList) {
+        curTab = curTableInCode.tabList.find(item => item.label == label)
+      }
+      return curTab
+    },
    async initDropdownList () {
+      //是否需要dns的qtype和rcode的数据字典
+      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
      let currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : ''
      let columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
      let type = 'ip'
@@ -371,18 +409,20 @@ export default {
      }
      get(curTableInCode.url.drilldownList, params).then(async response => {
        if (response.code === 200) {
-          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.breadcrumbColumnValueListShow = response.data.result
+          this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+          this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
          this.$nextTick(() => {
            this.breadcrumbColumnValueListShow.forEach(item => {
              const selectedDom = document.getElementById(item)
              if (selectedDom) {
-                if (item === currentValue) {
+                let itemName = item
+                if(this.curTabProp === 'qtype'){
+                  itemName = this.dnsQtypeMapData.get(item)
+                }else if(this.curTabProp === 'rcode'){
+                  itemName = this.dnsRcodeMapData.get(item)
+                }
+                if (itemName === currentValue) {
                  selectedDom.style.cssText = 'color:#0091ff;font-weight: bold;'
                } else {
                  selectedDom.style.cssText = ''
@@ -413,32 +453,37 @@ export default {
    },
    changeValue (value) {
      // 设置面包屑显示的内容及hover时的title
+      let valName = value
+      if(this.tab === 'qtype'){
+        valName =this.dnsQtypeMapData.get(value)
+      }else if(this.tab === 'rcode'){
+        valName =this.dnsRcodeMapData.get(value)
+      }
+      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
      document.getElementById('breadcrumbValue').innerText = value
-      document.getElementById('breadcrumbButton').setAttribute('title', value)
-      document.getElementById(this.valueMenuId).setAttribute('title', value)
+      //document.getElementById('breadcrumbButton').setAttribute('title', valName)
+      document.getElementById(this.valueMenuId).setAttribute('title', valName)
      document.getElementById('breadcrumbButton').click()
      // const columnName = this.$store.getters.getBreadcrumbColumnName
      const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
-      const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
-      if (tabObjGroup && tabObjGroup.length > 0) {
-        const curTab = tabObjGroup[0]
-        if (curTab) {
-          const queryCondition = []
-          const searchProps = curTab.dillDownProp
-          if (curTab.prop === 'protocolPort') {
-            const valueGroup = value.split(':')
-            if (valueGroup) {
-              queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'")
-              queryCondition.push('common_server_port=' + valueGroup[1])
-            }
-            console.log(queryCondition.join(' AND '))
-            this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ')
-          } else {
-            searchProps.forEach(item => {
-              queryCondition.push(item + "='" + value.replaceAll("'", "\\\\'") + "'")
-            })
-            this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
+      //const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
+      let curTab = this.getCurTabByLabel()
+      if (curTab) {
+        const queryCondition = []
+        const searchProps = curTab.dillDownProp
+        if (curTab.prop === 'protocolPort') {
+          const valueGroup = value.split(':')
+          if (valueGroup) {
+            queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'")
+            queryCondition.push('common_server_port=' + valueGroup[1])
          }
+          console.log(queryCondition.join(' AND '))
+          this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ')
+        } else {
+          searchProps.forEach(item => {
+            queryCondition.push(item + "='" + value.replaceAll("'", "\\\\'") + "'")
+          })
+          this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
        }
      }
      this.changeUrlTabState()
@@ -509,7 +554,6 @@ export default {
      if (!columnName) { // 点击第二级菜单
        this.$store.commit('setNetworkOverviewTabList', [])
      }
-
      // 清空网络概况的特殊面包屑
      this.$store.getters.menuList.forEach(menu => {
        if (!this.$_.isEmpty(menu.children)) {
@@ -520,16 +564,18 @@ export default {
                child.columnName = columnName
                this.urlChangeParams[this.curTabState.thirdMenu] = columnName
                this.urlChangeParams[this.curTabState.fourthMenu] = columnValue
-                const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
-                const type = tabObjGroup && tabObjGroup[0] ? tabObjGroup[0].prop : ''
-                this.urlChangeParams[this.curTabState.dimensionType] = type
+                //const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
+                //let curTab = this.getCurTabByLabel()
+                //const type = curTab ? curTab.prop : ''
+                //this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
+                //this.urlChangeParams[this.curTabState.dimensionType] = type
                this.urlChangeParams[this.curTabState.panelName] = columnValue
              } else if (columnName) { // 点击的为列名
                child.columnValue = ''
                child.columnName = columnName
                this.urlChangeParams[this.curTabState.thirdMenu] = columnName
                this.urlChangeParams[this.curTabState.fourthMenu] = ''
-                this.urlChangeParams[this.curTabState.panelName] = columnName
+                this.urlChangeParams[this.curTabState.panelName] = columnValue
                const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
                const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
                const curTab = getDefaultCurTab(tableType, metric, columnName)
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -855,46 +855,28 @@ export function getTabList (curTable, curMetric) {
  }
  return tabs
 }
-export async function mapDnsData(list,type,prop){
-  let valueGroup = []
+export async function getDnsMapData(type){
+  let codeValueMap = new Map()
  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
-            }
-          })
+  if(dnsData && dnsData.length>0) {
+    dnsData.forEach(mapData => {
+      let code = mapData.code
+      if(code.indexOf('-')>-1){
+        let range = mapData.code.split('-')
+        if(range && range.length >= 2){
+          let start = range[0].trim()
+          let eEnd = range[1].trim()
+          mapData.value = (start <= code && code <= eEnd) ? mapData.value : code
+          for (let i = start; i <= eEnd; i++) {
+            codeValueMap.set(i,mapData.value)
+          }
        }
      }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
-            }
-          })
-        }
+        codeValueMap.set(code,mapData.value)
      }
-      valueGroup.push(data)
    })
  }
-  return valueGroup
+  return codeValueMap
 }
 export function combineTabList (tableType, list, commonTabList) {
  const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -66,7 +66,7 @@ import {
 import { getPanelList, getChartList } from '@/utils/api'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import { getTypeCategory } from '@/views/charts/charts/tools'
-import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
+import { urlParamsHandler, overwriteUrl,getDnsMapData } from '@/utils/tools'
 import ChartList from '@/views/charts2/ChartList'
 import { useStore } from 'vuex'

@@ -87,6 +87,8 @@ export default {
      panelLock: true,
      extraParams: {},
      panelName: '',
+      dnsRcodeMapData: [],
+      dnsQtypeMapData: [],
      score: null,
      curTabState: curTabState
    }
@@ -107,7 +109,18 @@ export default {
  },
  async mounted () {
    // this.panelName = this.$store.getters.getPanelName
-    this.panelName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : ''
+    let pName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : ''
+    let curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
+    this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+    this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+    if(curTabProp === 'qtype'){
+      this.panelName = this.dnsQtypeMapData.get(pName)
+    }else if(curTabProp === 'rcode'){
+      this.panelName = this.dnsRcodeMapData.get(pName)
+    }else {
+      this.panelName = pName
+    }
+
    // const curOperationType = this.$store.getters.getTabOperationType
    /* const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
    if (this.panelName && this.$route.path === '/panel/networkAppPerformance' && curOperationType !== operationType.thirdMenu) {
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -73,8 +73,22 @@
                    </div>
                  </template>
                  <template v-else-if="item.columnType === tableColumnType.dillDown" >
-                    <div v-if="isOnlyRead" >{{scope.row['tab']}}</div>
-                    <div v-else class="data-click" @click="handleTabValue(item.name,scope.row['tab'])">{{scope.row['tab']}}</div>
+                    <div v-if="isOnlyRead" >
+                      <template v-if="tableType === fromRoute.dnsServiceInsights && isDnsMapType">
+                        {{dnsMapData.get(scope.row['tab'])}}
+                      </template>
+                      <template v-else>
+                        {{scope.row['tab']}}
+                      </template>
+                    </div>
+                    <div v-else class="data-click" @click="handleTabValue(item.name,scope.row['tab'])">
+                      <template v-if="isDnsMapType">
+                        {{dnsMapData.get(scope.row['tab'])}}
+                      </template>
+                      <template v-else>
+                        {{scope.row['tab']}}
+                      </template>
+                    </div>
                  </template>
                  <template v-else-if="item.columnType === tableColumnType.percent" >
                    <div class="dns-in-ex">
@@ -185,7 +199,7 @@ import { ref } from 'vue'
 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,mapDnsData } from '@/utils/tools'
+import { getChainRatio, computeScore, urlParamsHandler, overwriteUrl, getUserDrilldownTableGeo, readDrilldownTableConfigByUser, combinDrilldownTableWithUserConfig,getDnsMapData } from '@/utils/tools'
 import { getSecond } from '@/utils/date-util'
 import chartMixin from '@/views/charts2/chart-mixin'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
@@ -236,11 +250,16 @@ export default {
      column: {},
      index: 0,
      chartData: [],
+      dnsMapData:[],
+      dnsQtypeMapData:[],
+      dnsRcodeMapData:[],
+      isDnsMapType:false,
      tableSortColumn: '',
      tableSortType: '',
      tableSortTab: '',
      urlChangeParams: {},
-      showUnit: false
+      showUnit: false,
+      fromRoute: fromRoute,
    }
  },
  props: {
@@ -548,14 +567,6 @@ export default {
    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] }
@@ -1146,6 +1157,14 @@ export default {

      this.saveUserLocalConfig()
      // console.log(this.drillDownTableConfigs)
+      let forthMenuName = ''
+      if(clickTab.prop === 'qtype'){
+        forthMenuName = this.dnsQtypeMapData.get(columnValue)
+      }else if(clickTab.prop === 'rcode'){
+        forthMenuName = this.dnsRcodeMapData.get(columnValue)
+      }else {
+        forthMenuName = columnValue
+      }
      this.$store.getters.menuList.forEach(menu => {
        if (this.$_.isEmpty(menu.children) && menu.route) {
          if (this.$route.path === menu.route) {
@@ -1284,6 +1303,14 @@ export default {
        this.combineColumnList(curTab.name)
        this.saveUserLocalConfig()
        this.tab = curTab.prop
+        this.isDnsMapType = false
+        if(this.tab === 'qtype'){
+          this.dnsMapData =this.dnsQtypeMapData
+          this.isDnsMapType = true
+        }else if(this.tab === 'rcode'){
+          this.dnsMapData =this.dnsRcodeMapData
+          this.isDnsMapType = true
+        }
        let queryParams = {
          orderBy: this.orderBy,
          limit: networkDefaultLimit,
@@ -1724,7 +1751,6 @@ export default {
    this.tableSortColumn = this.getUrlParam(this.curTabState.tableSortColumn, '')
    this.tableSortType = this.getUrlParam(this.curTabState.tableSortType, '')
    this.tableSortTab = this.getUrlParam(this.curTabState.tableSortTab, '')
-
    const currentTableConfig = this.drillDownTableConfigs.find(config => config.route === this.tableType)
    // 开始设置当前table，当前tab，当前tab对应的列等信息
    this.commonTabList = currentTableConfig ? currentTableConfig.tabs : []
@@ -1772,6 +1798,10 @@ export default {
        }
      }
    }
+    //是否需要dns的qtype和rcode的数据字典
+    this.isDnsMapType = false
+    this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+    this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
    this.saveUserLocalConfig()
    this.getChartData()
  },