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

2022-10-07 21:04:08 +08:00
parent 9e52841c55
commit 88027df120
8 changed files with 268 additions and 48 deletions
--- a/src/App.vue
+++ b/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) || ''
--- a/src/components/layout/Header.vue
+++ b/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) {
-        drillDownTableConfigs = userLocalCongfig.config
+      if (userLocalConfig) {
+        drillDownTableConfigs = userLocalConfig.config
      }
      if (!drillDownTableConfigs || drillDownTableConfigs.length === 0) { // 未找到当前用户的配置，使用默认配置
        console.log('default..............')
-        const defaultCongfig = await db[dbDrilldownTableConfig].get({ id: 'default' })
-        if (defaultCongfig) {
-          drillDownTableConfigs = defaultCongfig.config
+        const defaultConfig = await db[dbDrilldownTableConfig].get({ id: 'default' })
+        if (defaultConfig) {
+          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 = curTableOldConfig
+        const curTable = tables.find(table => table.id === tableType)
        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 () {
--- a/src/mixins/common.js
+++ b/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
+        })
+      }
    }
  }
 }
--- a/src/mock/linkMonitor.js
+++ b/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',
--- a/src/permission.js
+++ b/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 国际化
--- a/src/utils/constants.js
+++ b/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
  }
 }

--- a/src/utils/tools.js
+++ b/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] }))
+  }
+}
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/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({
-        query: {
+      this.jumpAndCache(this.$route.path, {
        ...this.$route.query,
        thirdPanel: this.curTable.panelIdOfThirdMenu,
-          fourthPanel: toPanel,
-          time: +new Date()
-        }
+        fourthPanel: toPanel
      })
    },
    handleSearchParams (columnValue) {