CN-732 完成dns页面的下钻表格

src/assets/css/components/views/charts2/networkOverviewTabs.scss

@@ -18,6 +18,38 @@
           cursor: pointer;
         }
       }
+      .dns-in-ex {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        .dns-percent-pic {
+          display: flex !important;
+          width: 100px;
+          height: 26px;
+          justify-content: center;
+          align-items: center;
+          .div-yellow {
+            height: 12px;
+            background: #e5a219;
+            border: 1px solid #e5a219;
+            border-left: none;
+          }
+          .div-green {
+            height: 12px;
+            background: #749f4d;
+            border: 1px solid #749f4d;
+            border-right: none;
+          }
+        }
+        .dns-percent{
+          display:flex;
+          align-items:center;
+          height:100%;
+          min-width:90px;
+          padding-left:10px;
+          justify-content: left;
+        }
+      }
       .tab-table__average {
         border: 1px solid #E2E5EC;
         border-radius: 4px 4px 0 0;

src/components/layout/Header.vue

@@ -178,22 +178,23 @@
 </template>
 
 <script>
-import {useRoute} from 'vue-router'
+import { useRoute } from 'vue-router'
-import {get, put} from '@/utils/http'
+import { get, put } from '@/utils/http'
 import {
   curTabState,
   dbDrilldownTableConfig,
   entityType,
   networkOverviewSearchUrl,
   networkOverviewTabList,
+  networkTable,
   operationType,
   storageKey
 } from '@/utils/constants'
-import {api} from '@/utils/api'
+import { api } from '@/utils/api'
-import {ref} from 'vue'
+import { ref } from 'vue'
-import {combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler} from '@/utils/tools'
+import { combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler } from '@/utils/tools'
-import {getNowTime, getSecond} from '@/utils/date-util'
+import { getNowTime, getSecond } from '@/utils/date-util'
-import {db} from '@/indexedDB'
+import { db } from '@/indexedDB'
 
 export default {
   name: 'Header',
@@ -350,12 +351,12 @@ export default {
     },
     initDropdownList () {
       const currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : ''
-      // const columnName = this.$store.getters.getBreadcrumbColumnName
       const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
       let type = 'ip'
-      const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
+      const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
-      if (tabObjGroup && tabObjGroup.length > 0) {
+      const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
-        const curTab = tabObjGroup[0]
+      if (curTableInCode && curTableInCode.tabList) {
+        const curTab = curTableInCode.tabList.find(item => item.label == columnName)
         if (curTab) {
           type = curTab.prop
         }
@@ -367,7 +368,7 @@ export default {
         type: type,
         name: this.dropDownValue ? this.dropDownValue : ''
       }
-      get(networkOverviewSearchUrl.drilldownList, params).then(response => {
+      get(curTableInCode.url.drilldownList, params).then(response => {
         if (response.code === 200) {
           this.breadcrumbColumnValueListShow = response.data.result
           this.$nextTick(() => {
@@ -464,7 +465,6 @@ export default {
       this.urlChangeParams = {}
     },
     async handleCurDrilldownTableConfig (thirdMenu, fourthMenu) {
-      console.log('handleCurDrilldownTableConfig--------------')
       const userId = localStorage.getItem(storageKey.userId)
       const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
 
@@ -475,13 +475,11 @@ export default {
         drillDownTableConfigs = userLocalConfig.config
       }
       if (!drillDownTableConfigs || drillDownTableConfigs.length === 0) { // 未找到当前用户的配置，使用默认配置
-        console.log('default..............')
         const defaultConfig = await db[dbDrilldownTableConfig].get({ id: 'default' })
         if (defaultConfig) {
           drillDownTableConfigs = defaultConfig.config
         }
       }
-      console.log(drillDownTableConfigs)
       const currentTableConfig = drillDownTableConfigs.find(config => config.route === tableType)
       const tables = currentTableConfig ? currentTableConfig.tables : []
       const commonTabList = currentTableConfig ? currentTableConfig.tabs : []
@@ -504,8 +502,6 @@ export default {
         id: userId,
         config: this.$_.cloneDeep(drillDownTableConfigs)
       })
-      console.log('当前测试。。。。。。。。。。。')
-      console.log(this.$_.cloneDeep(drillDownTableConfigs))
     },
     jump (route, columnName, columnValue, opeType) {
       this.showMenu = false
@@ -561,35 +557,35 @@ export default {
         if (menus[3]) {
           this.handleCurDrilldownTableConfig(this.breadcrumb[2], this.breadcrumb[3])
         }
-        /*this.$router.push({
+        /* this.$router.push({
           path: route,
           query: {
             t: +new Date()
           }
-        })*/
+        }) */
         this.jumpAndCache(route, {})
       } else if (opeType === 3) {
-        /*this.$router.push({
+        /* this.$router.push({
           query: { ...this.$route.query, fourthPanel: '' }
-        })*/
+        }) */
         this.jumpAndCache(route, { ...this.$route.query, fourthPanel: '' })
       } else if (opeType != 4) {
         this.jumpAndCache(route, { ...this.$route.query, fourthPanel: '', thirdPanel: '' })
-        /*this.$router.push({
+        /* this.$router.push({
           query: { ...this.$route.query, fourthPanel: '', thirdPanel: '' }
-        })*/
+        }) */
       }
       if (route === this.route) {
         this.refresh()
         return
       }
       if (route) {
-        /*this.$router.push({
+        /* this.$router.push({
           path: route,
           query: {
             t: +new Date()
           }
-        })*/
+        }) */
         this.jumpAndCache(route, {})
       }
     },

src/utils/constants.js

@@ -218,6 +218,7 @@ export const networkOverviewTableUrlName = {
 export const tableColumnType = {
   dillDown: 'dillDown',
   chainRatio: 'chainRatio',
+  percent: 'percent', // percent类型的列需要2个属性，计算百分比
   normal: 'normal'
 }
 
@@ -367,8 +368,16 @@ export const customTableTitlesForAppPerformance = [
 ]
 export const customTableTitlesForDns = [
   { label: 'dns.dnsServer', prop: 'tab', checked: true, tabColumn: true, columnType: tableColumnType.dillDown },
-  { label: 'dns.queries', prop: 'queryRate', checked: true, tabColumn: true, columnType: tableColumnType.chainRatio },
+  {
-  { label: 'dns.queriesFromIE', prop: 'totalInternalQueryNum,totalExternalQueryNum', checked: true, tabColumn: true, columnType: tableColumnType.normal },
+    label: 'dns.queries',
+    prop: 'queryRate',
+    checked: true,
+    tabColumn: true,
+    columnType: tableColumnType.chainRatio,
+    isInMainUrl: true,
+    cycleDataUrl: dnsSearchUrl.cycleUrl
+  },
+  { label: 'dns.queriesFromIE', prop: 'totalInExNum', checked: true, tabColumn: true, columnType: tableColumnType.percent },
   { label: 'dns.dnsResponseTime', prop: 'dnsResponseLatencyAvg', checked: true, tabColumn: true, columnType: tableColumnType.normal },
   { label: 'overall.throughput', prop: 'totalBytes', checked: true, tabColumn: true, columnType: tableColumnType.normal }
 ]
@@ -671,7 +680,7 @@ export const dnsServiceInsightsTabList = [
     label: 'dns.dnsServer', // tab名称对应的il8n
     prop: 'dnsServer', // 接口返回数据中，tab第一列对应的属性名
     queryCycleTotalProp: 'dnsServer', // SQL中查询不同纬度的列名称
-    dillDownProp: ['server_ip'], // 下钻时，传递的查询条件，即接口的q参数
+    dillDownProp: ['common_server_ip'], // 下钻时，传递的查询条件，即接口的q参数
     checked: true, // 自定义设置中，是否默认选中
     disabled: false, // 自定义设置中，是否可操作（选中或取消选中）
     panelId: drillDownPanelTypeMapping.dnsFourthMenu// 下钻后展示的panelId
@@ -689,7 +698,7 @@ export const dnsServiceInsightsTabList = [
     label: 'network.cities',
     prop: 'city',
     queryCycleTotalProp: 'cities',
-    dillDownProp: ['server_city'],
+    dillDownProp: ['server_region'],
     checked: true,
     disabled: false,
     panelId: drillDownPanelTypeMapping.dnsFourthMenu
@@ -707,7 +716,7 @@ export const dnsServiceInsightsTabList = [
     label: 'dns.dnsServerOrganizations',
     prop: 'dnsServerOrganization',
     queryCycleTotalProp: 'orgs',
-    dillDownProp: ['server_org'],
+    dillDownProp: ['dns_server_org'],
     checked: true,
     disabled: false,
     panelId: drillDownPanelTypeMapping.dnsFourthMenu
@@ -716,7 +725,7 @@ export const dnsServiceInsightsTabList = [
     label: 'dns.dnsServerRoles',
     prop: 'dnsServerRole',
     queryCycleTotalProp: 'roles',
-    dillDownProp: ['server_role'],
+    dillDownProp: ['dns_server_role'],
     checked: true,
     disabled: false,
     panelId: drillDownPanelTypeMapping.dnsFourthMenu
@@ -725,7 +734,7 @@ export const dnsServiceInsightsTabList = [
     label: 'QNames',
     prop: 'dnsServerRole',
     queryCycleTotalProp: 'qnames',
-    dillDownProp: ['qname'],
+    dillDownProp: ['dns_qname'],
     checked: true,
     disabled: false,
     panelId: drillDownPanelTypeMapping.dnsFourthMenu
@@ -734,7 +743,7 @@ export const dnsServiceInsightsTabList = [
     label: 'SLDs',
     prop: 'sld',
     queryCycleTotalProp: 'slds',
-    dillDownProp: ['qname_sld'],
+    dillDownProp: ['dns_qname'],
     checked: true,
     disabled: false,
     panelId: drillDownPanelTypeMapping.dnsFourthMenu
@@ -743,7 +752,7 @@ export const dnsServiceInsightsTabList = [
     label: 'TLDs',
     prop: 'tld',
     queryCycleTotalProp: 'tlds',
-    dillDownProp: ['qname_tld'],
+    dillDownProp: ['dns_qname'],
     checked: true,
     disabled: false,
     panelId: drillDownPanelTypeMapping.dnsFourthMenu
@@ -752,7 +761,7 @@ export const dnsServiceInsightsTabList = [
     label: 'QTypes',
     prop: 'qtype',
     queryCycleTotalProp: 'qtypes',
-    dillDownProp: ['qtype'],
+    dillDownProp: ['dns_qtype'],
     checked: true,
     disabled: false,
     panelId: drillDownPanelTypeMapping.dnsFourthMenu
@@ -761,7 +770,7 @@ export const dnsServiceInsightsTabList = [
     label: 'RCodes',
     prop: 'rcode',
     queryCycleTotalProp: 'rcodes',
-    dillDownProp: ['rcode'],
+    dillDownProp: ['dns_rcode'],
     checked: true,
     disabled: false,
     panelId: drillDownPanelTypeMapping.dnsFourthMenu
@@ -804,6 +813,23 @@ export const bytesColumnNameGroupForNpm = {
   sslResponseLatency: 'sslConLatency',
   httpResponseLatency: 'httpResponseLatency'
 }
+
+export const bytesCycleColumnNameGroupForNmp = {
+  through: 'throughBitsRate'
+}
+
+// 用于组织数据时的名称，对应的属性名称
+export const bytesColumnNameGroupForDns = {
+  queryRate: 'queryRate',
+  totalInExNum: 'totalInternalQueryNum,totalExternalQueryNum',
+  dnsResponseLatencyAvg: 'dnsResponseLatencyAvg',
+  totalBytes: 'totalBytes'
+}
+
+export const bytesCycleColumnNameGroupForDns = {
+  queryRate: 'queryRate'
+}
+
 // networkOverview 当前周期返回数据对应的属性名称（与上一周期中的属性名称不一致,total）,之所以写在这里是因为有byte，packets，sessions3种，如果只有一种，可以直接写在customTableTitlesForAppPerformance
 export const bytesColumnNameGroup = {
   total: 'bytesTotalRate',
@@ -833,10 +859,6 @@ export const sessionsCycleColumnNameGroup = {
   total: 'sessionsRate'
 }
 
-export const bytesCycleColumnNameGroupForNmp = {
-  through: 'throughBitsRate'
-}
-
 // 不同表格类型对应的相关数据
 export const networkTable = {
   networkOverview: {
@@ -870,9 +892,10 @@ export const networkTable = {
     column: customTableTitlesForDns,
     url: dnsSearchUrl,
     hasMetricSearch: false, // 是否有metric下拉列表
-    panelIdOfThirdMenu: drillDownPanelTypeMapping.npmThirdMenu,
+    panelIdOfThirdMenu: drillDownPanelTypeMapping.dnsThirdMenu,
-    bytesColumnNameGroup: bytesColumnNameGroupForNpm,
+    bytesColumnNameGroup: bytesColumnNameGroupForDns,
-    bytesCycleColumnNameGroup: bytesCycleColumnNameGroupForNmp
+    bytesCycleColumnNameGroup: bytesCycleColumnNameGroupForDns,
+    defaultOrderBy: 'totalBytes'
   }
 }
 

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

@@ -354,7 +354,6 @@ export default {
         })
         this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
 
-
         this.$store.getters.menuList.forEach(menu => {
           if (this.$_.isEmpty(menu.children) && menu.route) {
             if (this.$route.path === menu.route) {
@@ -364,7 +363,6 @@ export default {
               this.urlChangeParams[this.curTabState.thirdMenu] = tabType
               this.urlChangeParams[this.curTabState.dimensionType] = tabGroup[0] ? tabGroup[0].prop : ''
               this.urlChangeParams[this.curTabState.fourthMenu] = value
-
             }
           } else if (!this.$_.isEmpty(menu.children)) {
             menu.children.forEach(child => {
@@ -375,7 +373,6 @@ export default {
                 this.urlChangeParams[this.curTabState.thirdMenu] = tabType
                 this.urlChangeParams[this.curTabState.dimensionType] = tabGroup[0] ? tabGroup[0].prop : ''
                 this.urlChangeParams[this.curTabState.fourthMenu] = value
-
               }
             })
           }

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

@@ -70,6 +70,15 @@
                   <template v-else-if="item.columnType === tableColumnType.dillDown" >
                     <div class="data-click" @click="handleTabValue(item.label,scope.row['tab'])">{{scope.row['tab']}}</div>
                   </template>
+                  <template v-else-if="item.columnType === tableColumnType.percent" >
+                    <div class="dns-in-ex">
+                      <div class="dns-percent-pic" >
+                        <div v-if="scope.row[item.prop][0] !== false && scope.row[item.prop][0]>0" class="div-green" id="green" :style="`width:${scope.row[item.prop][0]}`"></div>
+                        <div v-if="scope.row[item.prop][0] !== false && scope.row[item.prop][1]>0" class="div-yellow" id="div-yellow" :style="`width:${scope.row[item.prop][1]}`"></div>
+                      </div>
+                      <div class="dns-percent" >{{scope.row[item.prop][2]}}</div>
+                    </div>
+                  </template>
                   <template v-else-if="item.prop === 'score'" >
                     {{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '0'}}
                   </template>
@@ -314,6 +323,7 @@ export default {
         console.error(e)
       } finally {
         this.changeUrlTabState()
+        this.toggleLoading(false)
       }
     },
     sortable (title) {
@@ -516,7 +526,31 @@ export default {
         tabList.push(item[curTab.prop])
         const otherData = { tab: item[curTab.prop] }
         Object.keys(this.columnNameGroup).forEach(i => {
-          otherData[i] = item[this.columnNameGroup[i]]
+          const propName = this.columnNameGroup[i]
+          const column = this.customTableTitles.find(tableColumn => { return tableColumn.prop === i })
+          if (column && column.columnType === tableColumnType.percent) {
+            let sum = 0
+            const propGroup = propName.split(',')
+            propGroup.forEach(prop => {
+              sum = sum + Number(item[prop])
+            })
+            const resultGroup = []
+            propGroup.forEach(prop => {
+              resultGroup.push(unitConvert(Number(item[prop]) / sum, unitTypes.percent, null, null, 0).join(''))
+            })
+            otherData[i] = []
+            if (resultGroup[0] === '-') {
+              otherData[i][0] = false
+              otherData[i][1] = resultGroup[1]
+              otherData[i][2] = resultGroup.join(' / ')
+            } else {
+              otherData[i][0] = resultGroup[0]
+              otherData[i][1] = resultGroup[1]
+              otherData[i][2] = resultGroup.join(' / ')
+            }
+          } else {
+            otherData[i] = item[propName]
+          }
         })
         return otherData
       })
@@ -1669,6 +1703,9 @@ export default {
         this.curTable.sessionsCycleColumnNameGroup = this.curTableInCode ? this.curTableInCode.sessionsCycleColumnNameGroup : []
         this.columnNameGroup = this.curTable.bytesColumnNameGroup
         this.cycleColumnNameGroup = this.curTable.bytesCycleColumnNameGroup
+        if (this.curTableInCode.defaultOrderBy) {
+          this.orderBy = this.curTableInCode.defaultOrderBy
+        }
       }
     }
     this.saveUserLocalConfig()