From 88027df120981482ab0032ef8a270fd28df2d6ae Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Fri, 7 Oct 2022 21:04:08 +0800
Subject: [PATCH] =?UTF-8?q?CN-732=20feat:=20dns=E4=B8=8B=E9=92=BB=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E9=83=A8=E5=88=86=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  25 +++
 src/components/layout/Header.vue              |  71 ++++----
 src/mixins/common.js                          |  14 ++
 src/mock/linkMonitor.js                       |   7 +-
 src/permission.js                             |   4 +-
 src/utils/constants.js                        | 163 +++++++++++++++++-
 src/utils/tools.js                            |  12 ++
 .../networkOverview/NetworkOverviewTabs.vue   |  20 ++-
 8 files changed, 268 insertions(+), 48 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 82eb1989..00be36f0 100644
--- 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) || ''
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index e7dd0b5b..69270238 100644
--- 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"
@@ -178,14 +178,22 @@
 </template>
 
 <script>
-import { useRoute } from 'vue-router'
-import { get, put } from '@/utils/http'
-import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl, curTabState, dbDrilldownTableConfig } from '@/utils/constants'
-import { api } from '@/utils/api'
-import { ref } from 'vue'
-import { urlParamsHandler, overwriteUrl, combineTabList, getTabList, getDefaultCurTab } from '@/utils/tools'
-import { getNowTime, getSecond } from '@/utils/date-util'
-import { db } from '@/indexedDB'
+import {useRoute} from 'vue-router'
+import {get, put} from '@/utils/http'
+import {
+  curTabState,
+  dbDrilldownTableConfig,
+  entityType,
+  networkOverviewSearchUrl,
+  networkOverviewTabList,
+  operationType,
+  storageKey
+} from '@/utils/constants'
+import {api} from '@/utils/api'
+import {ref} from 'vue'
+import {combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler} from '@/utils/tools'
+import {getNowTime, getSecond} from '@/utils/date-util'
+import {db} from '@/indexedDB'
 
 export default {
   name: 'Header',
@@ -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 () {
diff --git a/src/mixins/common.js b/src/mixins/common.js
index 9338a95d..89a575b0 100644
--- 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
+        })
+      }
     }
   }
 }
diff --git a/src/mock/linkMonitor.js b/src/mock/linkMonitor.js
index 02131d11..12c87b09 100644
--- 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',
diff --git a/src/permission.js b/src/permission.js
index 3bcb833b..73aab6a1 100644
--- 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 国际化
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 64a04ad8..d18e086c 100644
--- 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
   }
 }
 
diff --git a/src/utils/tools.js b/src/utils/tools.js
index 71386d15..68dae680 100644
--- 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] }))
+  }
+}
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
index 198b58bf..6dd2e1e2 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -30,14 +30,15 @@
                   @sort-change="((column) => {sortChange(column,tab.prop)})"
                   :key="index"
           >
-            <template v-for="(item,index) in customTableTitles">
+            <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.$route.query,
-          thirdPanel: this.curTable.panelIdOfThirdMenu,
-          fourthPanel: toPanel,
-          time: +new Date()
-        }
+      this.jumpAndCache(this.$route.path, {
+        ...this.$route.query,
+        thirdPanel: this.curTable.panelIdOfThirdMenu,
+        fourthPanel: toPanel
       })
     },
     handleSearchParams (columnValue) {