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

2022-10-09 08:24:07 +08:00
parent 6bfe9f50ff
commit 4252735c92
5 changed files with 132 additions and 47 deletions
--- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss
+++ b/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;
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -186,6 +186,7 @@ import {
  entityType,
  networkOverviewSearchUrl,
  networkOverviewTabList,
+  networkTable,
  operationType,
  storageKey
 } from '@/utils/constants'
@@ -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)
-      if (tabObjGroup && tabObjGroup.length > 0) {
-        const curTab = tabObjGroup[0]
+      const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
+      const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
+      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
--- a/src/utils/constants.js
+++ b/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,
-    bytesColumnNameGroup: bytesColumnNameGroupForNpm,
-    bytesCycleColumnNameGroup: bytesCycleColumnNameGroupForNmp
+    panelIdOfThirdMenu: drillDownPanelTypeMapping.dnsThirdMenu,
+    bytesColumnNameGroup: bytesColumnNameGroupForDns,
+    bytesCycleColumnNameGroup: bytesCycleColumnNameGroupForDns,
+    defaultOrderBy: 'totalBytes'
  }
 }

--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/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
-
              }
            })
          }
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/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()