CN-732 feat: dns下钻表格部分配置

src/App.vue

@@ -7,6 +7,31 @@
 import { storageKey } from '@/utils/constants'
 export default {
   name: 'App',
+  mounted () {
+    // 浏览器控制按钮前进后退触发函数
+    window.addEventListener('popstate', this.popstate, false)
+  },
+  unmounted () {
+    window.removeEventListener('popstate', this.popstate, false)
+  },
+  methods: {
+    popstate () {
+      const historyJSON = sessionStorage.getItem(storageKey.history)
+      if (history) {
+        const history = JSON.parse(historyJSON)
+        if (history.index > -1) {
+          history.index--
+        } else {
+          history.index = history.history.length - 3
+        }
+        sessionStorage.setItem(storageKey.history, JSON.stringify(history))
+        this.$router.push({
+          path: history.history[history.index].path,
+          query: history.history[history.index].query
+        })
+      }
+    }
+  },
   setup () {
     // 处理刷新后  $dayJs的时区变为默认的问题
     const timezone = localStorage.getItem(storageKey.sysTimezone) || ''

src/components/layout/Header.vue

@@ -73,10 +73,10 @@
             </div>
           </template>
           <template v-else-if="index===2">
-            <span class="route-menu" @click="jump(path,item,'',3)">{{$t(item)}}</span>
+            <span class="route-menu" @click="jump(route,item,'',3)">{{$t(item)}}</span>
           </template>
           <template v-else-if="index===1">
-            <span class="route-menu" @click="jump(path,'','',2)" v-if="route.indexOf('detection') === -1">{{item}}</span>
+            <span class="route-menu" @click="jump(route,'','',2)" v-if="route.indexOf('detection') === -1">{{item}}</span>
             <div class="header__left-breadcrumb-item-select" v-if="route.indexOf('detection') > -1">
               <el-popover placement="bottom-start"
                           v-if="route.indexOf('detection') > -1"
@@ -180,10 +180,18 @@
 <script>
 import {useRoute} from 'vue-router'
 import {get, put} from '@/utils/http'
-import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl, curTabState, dbDrilldownTableConfig } from '@/utils/constants'
+import {
+  curTabState,
+  dbDrilldownTableConfig,
+  entityType,
+  networkOverviewSearchUrl,
+  networkOverviewTabList,
+  operationType,
+  storageKey
+} from '@/utils/constants'
 import {api} from '@/utils/api'
 import {ref} from 'vue'
-import { urlParamsHandler, overwriteUrl, combineTabList, getTabList, getDefaultCurTab } from '@/utils/tools'
+import {combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler} from '@/utils/tools'
 import {getNowTime, getSecond} from '@/utils/date-util'
 import {db} from '@/indexedDB'
 
@@ -267,7 +275,7 @@ export default {
           })
         }
       })
-      const breadcrumb = breadcrumbMap.find(b => this.path === b.path)
+      const breadcrumb = breadcrumbMap.find(b => this.route === b.path)
       const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
       const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
       if (breadcrumb.columnValue) {
@@ -282,10 +290,6 @@ export default {
         return breadcrumb ? [breadcrumb.parentName, breadcrumb.name] : []
       }
     },
-    path () {
-      const { path } = useRoute()
-      return path
-    },
     showEntityTypeSelector () {
       return this.$store.getters.getShowEntityTypeSelector
     },
@@ -430,7 +434,7 @@ export default {
         }
       }
       this.changeUrlTabState()
-      this.jump(this.path, columnName, value, operationType.fourthMenu)
+      this.jump(this.route, columnName, value, operationType.fourthMenu)
     },
     shrink () {
       this.showMenu = !this.showMenu
@@ -465,16 +469,16 @@ export default {
       const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
 
       // 先从localStorage中获取用户定制的自定义配置，如果没有，则使用默认的自定义配置
-      const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: userId })
+      const userLocalConfig = await db[dbDrilldownTableConfig].get({ id: userId })
       let drillDownTableConfigs = []
-      if (userLocalCongfig) {
+      if (userLocalConfig) {
-        drillDownTableConfigs = userLocalCongfig.config
+        drillDownTableConfigs = userLocalConfig.config
       }
       if (!drillDownTableConfigs || drillDownTableConfigs.length === 0) { // 未找到当前用户的配置，使用默认配置
         console.log('default..............')
-        const defaultCongfig = await db[dbDrilldownTableConfig].get({ id: 'default' })
+        const defaultConfig = await db[dbDrilldownTableConfig].get({ id: 'default' })
-        if (defaultCongfig) {
+        if (defaultConfig) {
-          drillDownTableConfigs = defaultCongfig.config
+          drillDownTableConfigs = defaultConfig.config
         }
       }
       console.log(drillDownTableConfigs)
@@ -482,8 +486,7 @@ export default {
       const tables = currentTableConfig ? currentTableConfig.tables : []
       const commonTabList = currentTableConfig ? currentTableConfig.tabs : []
       if (tables && tables.length > 0) {
-        const curTableOldConfig = tables.find(table => table.id === tableType)
+        const curTable = tables.find(table => table.id === tableType)
-        const curTable = curTableOldConfig
         if (curTable) {
           const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
           const tabList = getTabList(curTable, metric)// 未下钻的tab列表
@@ -558,32 +561,36 @@ 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.$router.push({
+        this.jumpAndCache(route, { ...this.$route.query, fourthPanel: '', thirdPanel: '' })
+        /*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, {})
       }
     },
     dropDownSearch () {

src/mixins/common.js

@@ -1,5 +1,6 @@
 import { hasButton } from '@/permission'
 import { dateFormatByAppearance } from '@/utils/date-util'
+import {storageKey} from '@/utils/constants'
 export default {
   data () {
     return {
@@ -41,6 +42,19 @@ export default {
     },
     dateFormatByAppearance (date) {
       return dateFormatByAppearance(date)
+    },
+    jumpAndCache (path, query) {
+      query.t = new Date().getTime()
+      const historyJSON = sessionStorage.getItem(storageKey.history)
+      if (history) {
+        const history = JSON.parse(historyJSON)
+        history.index = -1
+        sessionStorage.setItem(storageKey.history, JSON.stringify(history))
+        this.$router.push({
+          path: path,
+          query: query
+        })
+      }
     }
   }
 }

src/mock/linkMonitor.js

@@ -2,10 +2,13 @@ import Mock from 'mockjs'
 
 const openMock = true
 if (openMock) {
-  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/links.*'), 'get', function (requestObj) {
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/link/overview/analysis.*'), 'get', function (requestObj) {
     const linkData = []
+    const ingressLinkIds = ['256', '512', '768', '1024', '1280', '1536', '1792', '2048', '2304', '2816']
+    const egressLinkIds = ['257', '513', '769', '1025', '1281', '1537', '1793', '2049', '2305', '2817']
     for (let i = 0; i < 10; i++) {
-      linkData.push({ linkId: 20 * (i + 300), totalBitsRate: Math.floor(Math.pow(1.3, i) * 10000) })
+      linkData.push({ linkId: ingressLinkIds[i], egressBytes: Math.floor(Math.pow(1.11, i) * 10000000000), ingressBytes: Math.floor(Math.pow(1.1, i) * 10000000000) })
+      linkData.push({ linkId: egressLinkIds[i], egressBytes: Math.floor(Math.pow(1.2, i) * 10000000000), ingressBytes: Math.floor(Math.pow(1.15, i) * 10000000000) })
     }
     return {
       msg: 'success',

src/permission.js

@@ -2,7 +2,7 @@ import router from './router'
 import store from './store'
 import { ElMessage } from 'element-plus'
 import { getPermission } from '@/utils/api'
-import { loadGeoData } from '@/utils/tools'
+import { loadGeoData, setHistory } from '@/utils/tools'
 import axios from 'axios'
 import { storageKey } from '@/utils/constants'
 import { loadI18n } from '@/i18n'
@@ -27,6 +27,7 @@ router.beforeEach(async (to, from, next) => {
     }
     // 加载权限
     if (permissionWhiteList.indexOf(to.path) !== -1) {
+      setHistory(to)
       next()
     } else {
       if (store.getters.menuList.length === 0) {
@@ -37,6 +38,7 @@ router.beforeEach(async (to, from, next) => {
       }
       if (to.path) {
         if (hasMenu(store.getters.menuList, to.path)) {
+          setHistory(to)
           next()
         } else {
           ElMessage.error('No access') // TODO 国际化

src/utils/constants.js

@@ -33,7 +33,8 @@ export const storageKey = {
   tokenExpireCurrentPath: 'token-expire-current-path',
   drillDownTableConfig: 'cn-drill-down-table-config',
   userCustomizationConfig: 'userCustomizationConfig',
-  linkInfo: 'cn-link-info'
+  linkInfo: 'cn-link-info',
+  history: 'cn-history'
 }
 export const largeCountryList = ['CN', 'US', 'RU', 'AU', 'CA', 'KZ', 'IN', 'BR']
 
@@ -60,7 +61,7 @@ export const panelTypeAndRouteMapping = {
   cryptocurrency: 7,
   ipDrillDownTest: 8,
   linkMonitor: 14,
-  linkMonitorTest: 15
+  linkMonitorDrillDown: 15
 }
 
 /* operationLog state 执行状态属性 值与名称之间的映射 */
@@ -236,6 +237,14 @@ export const npmSearchUrl = {
   drilldownCycleUrl: '/interface/application/performance/overview/drilldown/dimensionCycleTrafficAnalysis',
   drilldownList: '/interface/overview/drilldown/list'
 }
+// dns:接口url（主URL）
+export const dnsSearchUrl = {
+  curUrl: '/interface/dns/overview/dimensionAnalysis',
+  cycleUrl: '/interface/dns/overview/dimensionCycleAnalysis',
+  drilldownCurUrl: '/interface/dns/overview/drilldown/dimensionAnalysis',
+  drilldownCycleUrl: '/interface/dns/overview/drilldown/dimensionCycleAnalysis',
+  drilldownList: '/interface/dns/overview/drilldown/list'
+}
 
 export const cycle = {
   current: 0,
@@ -356,7 +365,13 @@ export const customTableTitlesForAppPerformance = [
     isInMainUrl: false
   }
 ]
-
+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.dnsResponseTime', prop: 'dnsResponseLatencyAvg', checked: true, tabColumn: true, columnType: tableColumnType.normal },
+  { label: 'overall.throughput', prop: 'totalBytes', checked: true, tabColumn: true, columnType: tableColumnType.normal }
+]
 // NetworkOverview类型表格的列:prop 为接口响应数据中的属性名
 export const customTableTitlesForNetworkOverview = [
   { label: 'network.ips', prop: 'tab', checked: true, tabColumn: true, columnType: tableColumnType.dillDown },
@@ -382,7 +397,10 @@ export const drillDownPanelTypeMapping = {
   npmOverviewApp: 10,
   npmOverviewCommon: 11,
   npmThirdMenu: 12,
-  networkOverview: 13
+  networkOverview: 13,
+  linkMonitor: 15,
+  dnsFourthMenu: 16,
+  dnsThirdMenu: 17
 }
 
 export const networkOverviewTabList = [
@@ -648,6 +666,134 @@ export const networkAppPerformanceTabList = [
     panelId: drillDownPanelTypeMapping.npmOverviewCommon
   }
 ]
+export const dnsServiceInsightsTabList = [
+  {
+    label: 'dns.dnsServer', // tab名称对应的il8n
+    prop: 'dnsServer', // 接口返回数据中，tab第一列对应的属性名
+    queryCycleTotalProp: 'dnsServer', // SQL中查询不同纬度的列名称
+    dillDownProp: ['server_ip'], // 下钻时，传递的查询条件，即接口的q参数
+    checked: true, // 自定义设置中，是否默认选中
+    disabled: false, // 自定义设置中，是否可操作（选中或取消选中）
+    panelId: drillDownPanelTypeMapping.dnsFourthMenu// 下钻后展示的panelId
+  },
+  {
+    label: 'network.countries',
+    prop: 'country',
+    queryCycleTotalProp: 'countries',
+    dillDownProp: ['server_country'],
+    checked: true,
+    disabled: false,
+    panelId: drillDownPanelTypeMapping.dnsFourthMenu
+  },
+  {
+    label: 'network.cities',
+    prop: 'city',
+    queryCycleTotalProp: 'cities',
+    dillDownProp: ['server_city'],
+    checked: true,
+    disabled: false,
+    panelId: drillDownPanelTypeMapping.dnsFourthMenu
+  },
+  {
+    label: 'dns.dnsServerIsps',
+    prop: 'dnsServerIsp',
+    queryCycleTotalProp: 'isps',
+    dillDownProp: ['server_isp'],
+    checked: true,
+    disabled: false,
+    panelId: drillDownPanelTypeMapping.dnsFourthMenu
+  },
+  {
+    label: 'dns.dnsServerOrganizations',
+    prop: 'dnsServerOrganization',
+    queryCycleTotalProp: 'orgs',
+    dillDownProp: ['server_org'],
+    checked: true,
+    disabled: false,
+    panelId: drillDownPanelTypeMapping.dnsFourthMenu
+  },
+  {
+    label: 'dns.dnsServerRoles',
+    prop: 'dnsServerRole',
+    queryCycleTotalProp: 'roles',
+    dillDownProp: ['server_role'],
+    checked: true,
+    disabled: false,
+    panelId: drillDownPanelTypeMapping.dnsFourthMenu
+  },
+  {
+    label: 'QNames',
+    prop: 'dnsServerRole',
+    queryCycleTotalProp: 'qnames',
+    dillDownProp: ['qname'],
+    checked: true,
+    disabled: false,
+    panelId: drillDownPanelTypeMapping.dnsFourthMenu
+  },
+  {
+    label: 'SLDs',
+    prop: 'sld',
+    queryCycleTotalProp: 'slds',
+    dillDownProp: ['qname_sld'],
+    checked: true,
+    disabled: false,
+    panelId: drillDownPanelTypeMapping.dnsFourthMenu
+  },
+  {
+    label: 'TLDs',
+    prop: 'tld',
+    queryCycleTotalProp: 'tlds',
+    dillDownProp: ['qname_tld'],
+    checked: true,
+    disabled: false,
+    panelId: drillDownPanelTypeMapping.dnsFourthMenu
+  },
+  {
+    label: 'QTypes',
+    prop: 'qtype',
+    queryCycleTotalProp: 'qtypes',
+    dillDownProp: ['qtype'],
+    checked: true,
+    disabled: false,
+    panelId: drillDownPanelTypeMapping.dnsFourthMenu
+  },
+  {
+    label: 'RCodes',
+    prop: 'rcode',
+    queryCycleTotalProp: 'rcodes',
+    dillDownProp: ['rcode'],
+    checked: true,
+    disabled: false,
+    panelId: drillDownPanelTypeMapping.dnsFourthMenu
+  },
+  {
+    label: 'A',
+    prop: 'a',
+    queryCycleTotalProp: 'a',
+    dillDownProp: ['rr_a'],
+    checked: true,
+    disabled: false,
+    panelId: drillDownPanelTypeMapping.dnsFourthMenu
+  },
+  {
+    label: 'AAAA',
+    prop: 'aaaa',
+    queryCycleTotalProp: 'aaaa',
+    dillDownProp: ['rr_aaaa'],
+    checked: true,
+    disabled: false,
+    panelId: drillDownPanelTypeMapping.dnsFourthMenu
+  },
+  {
+    label: 'CNames',
+    prop: 'cname',
+    queryCycleTotalProp: 'cnames',
+    dillDownProp: ['rr_cname'],
+    checked: true,
+    disabled: false,
+    panelId: drillDownPanelTypeMapping.dnsFourthMenu
+  }
+]
 
 // 用于组织数据时的名称，对应的属性名称
 export const bytesColumnNameGroupForNpm = {
@@ -718,6 +864,15 @@ export const networkTable = {
     bytesCycleColumnNameGroup: bytesCycleColumnNameGroupForNmp,
     packetsCycleColumnNameGroup: {},
     sessionsCycleColumnNameGroup: {}
+  },
+  dnsServiceInsights: {
+    tabList: dnsServiceInsightsTabList,
+    column: customTableTitlesForDns,
+    url: dnsSearchUrl,
+    hasMetricSearch: false, // 是否有metric下拉列表
+    panelIdOfThirdMenu: drillDownPanelTypeMapping.npmThirdMenu,
+    bytesColumnNameGroup: bytesColumnNameGroupForNpm,
+    bytesCycleColumnNameGroup: bytesCycleColumnNameGroupForNmp
   }
 }
 

src/utils/tools.js

@@ -1005,3 +1005,15 @@ export function colorGradientCalculation (startColor, endColor, values) {
 export function colorHexToRgbArr (hex) {
   return [1, 3, 5].map((h) => parseInt(hex.substring(h, h + 2), 16))
 }
+
+export function setHistory (to) {
+  const historyJson = sessionStorage.getItem(storageKey.history)
+  const query = { ...to.query, t: new Date().getTime() }
+  if (historyJson) {
+    const history = JSON.parse(historyJson)
+    history.history.push({ path: to.path, query: query })
+    sessionStorage.setItem(storageKey.history, JSON.stringify(history))
+  } else {
+    sessionStorage.setItem(storageKey.history, JSON.stringify({ index: 0, history: [query] }))
+  }
+}

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

@@ -33,11 +33,12 @@
             <template v-for="(item, index) in customTableTitles">
               <el-table-column
                       v-if="item.checked"
-                      sortable="custom"
+                      :sortable="sortable(item)"
                       align="center"
                       :prop="item.prop"
                       class="data-column"
                       :ref="item.prop"
+                      :key="index"
               >
                 <template #header >
                   <span class="data-column__span" >{{$t(item.label)}}</span>
@@ -315,6 +316,10 @@ export default {
         this.changeUrlTabState()
       }
     },
+    sortable (title) {
+      const excludeName = ['queriesFromIE']
+      return excludeName.indexOf(title.name) > -1 ? false : 'custom'
+    },
     cancleSortArrow () {
       // 取消表格排序高亮的箭头
       if (this.column.prop) {
@@ -1144,13 +1149,10 @@ export default {
         }
       })
       this.changeUrlTabState()
-      this.$router.push({
+      this.jumpAndCache(this.$route.path, {
-        query: {
         ...this.$route.query,
         thirdPanel: this.curTable.panelIdOfThirdMenu,
-          fourthPanel: toPanel,
+        fourthPanel: toPanel
-          time: +new Date()
-        }
       })
     },
     handleSearchParams (columnValue) {