From 34e16fc890c7c5ae385e3e9488d8cea8feccd6c0 Mon Sep 17 00:00:00 2001 From: hyx Date: Fri, 4 Nov 2022 12:18:26 +0800 Subject: [PATCH] =?UTF-8?q?CN-762=20DNS=20service=20insights=20=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E5=BB=BA=E8=AE=AE:=E4=BF=AE=E6=94=B9=E7=94=B1dns?= =?UTF-8?q?=E7=9A=84qtype=E5=8F=8Arcode=E7=BB=B4=E5=BA=A6=E8=BD=AC?= =?UTF-8?q?=E6=8D=A2=E5=AF=B9=E5=BA=94=E5=90=8D=E7=A7=B0=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98=E6=89=80=E5=BD=B1=E5=93=8D=E7=9A=84=E9=83=A8=E5=88=86?= =?UTF-8?q?=EF=BC=88panel=E5=90=8D=E7=A7=B0=EF=BC=8C=E9=A1=B6=E9=83=A8?= =?UTF-8?q?=E5=9B=9B=E7=BA=A7=E8=8F=9C=E5=8D=95=E6=98=BE=E7=A4=BA=E5=8F=8A?= =?UTF-8?q?=E4=B8=8B=E6=8B=89=E6=98=BE=E7=A4=BA=E7=AD=89=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/Header.vue | 124 ++++++++++++------ src/utils/tools.js | 50 +++---- src/views/charts2/Panel.vue | 17 ++- .../networkOverview/NetworkOverviewTabs.vue | 56 ++++++-- 4 files changed, 159 insertions(+), 88 deletions(-) diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue index 0ed9b011..caec6129 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/Header.vue @@ -53,7 +53,17 @@ trigger="click"> @@ -65,7 +75,15 @@ @@ -190,11 +208,12 @@ import { networkTable, operationType, storageKey, - wholeScreenRouterMapping + wholeScreenRouterMapping, + fromRoute } from '@/utils/constants' import { api } from '@/utils/api' import { ref } from 'vue' -import { combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler, combinDrilldownTableWithUserConfig,mapDnsData } from '@/utils/tools' +import { combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler, combinDrilldownTableWithUserConfig,getDnsMapData } from '@/utils/tools' import { getNowTime, getSecond } from '@/utils/date-util' import { db } from '@/indexedDB' @@ -226,10 +245,15 @@ export default { showMenu: false, dropDownValue: '', breadcrumbColumnValueListShow: [], + curTabProp:'', + dnsRcodeMapData:[], + dnsQtypeMapData:[], + isDnsMapType:false, valueMeta: [], showBackground: false, selected: false, valueMenuId: '', + fromRoute: fromRoute, detectionMenuList: [ { name: 'securityEvents', @@ -270,6 +294,7 @@ export default { }, breadcrumb () { const breadcrumbMap = [] + this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null this.$store.getters.menuList.forEach(menu => { if (this.$_.isEmpty(menu.children) && menu.route) { breadcrumbMap.push({ name: this.$t(menu.i18n), path: menu.route, columnName: menu.columnName, columnValue: menu.columnValue }) @@ -312,8 +337,10 @@ export default { } } }, - mounted () { + async mounted () { this.from = Object.keys(this.entityType)[0] + this.dnsQtypeMapData = await getDnsMapData('dnsQtype') + this.dnsRcodeMapData = await getDnsMapData('dnsRcode') this.initDropdownList() }, setup () { @@ -350,7 +377,18 @@ export default { window.location.reload() }) }, + getCurTabByLabel(label){ + let curTab = null + let tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' + let curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview + if (curTableInCode && curTableInCode.tabList) { + curTab = curTableInCode.tabList.find(item => item.label == label) + } + return curTab + }, async initDropdownList () { + //是否需要dns的qtype和rcode的数据字典 + this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null let currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : '' let columnName = this.getUrlParam(this.curTabState.thirdMenu, '') let type = 'ip' @@ -371,18 +409,20 @@ export default { } get(curTableInCode.url.drilldownList, params).then(async response => { if (response.code === 200) { - let dataList = response.data.result - if('qtype' === type){ - dataList = await mapDnsData(dataList,'dnsQtype','qtype') - }else if('rcode' === type){ - dataList = await mapDnsData(dataList,'dnsRcode','rcode') - } - this.breadcrumbColumnValueListShow = dataList + this.breadcrumbColumnValueListShow = response.data.result + this.dnsQtypeMapData = await getDnsMapData('dnsQtype') + this.dnsRcodeMapData = await getDnsMapData('dnsRcode') this.$nextTick(() => { this.breadcrumbColumnValueListShow.forEach(item => { const selectedDom = document.getElementById(item) if (selectedDom) { - if (item === currentValue) { + let itemName = item + if(this.curTabProp === 'qtype'){ + itemName = this.dnsQtypeMapData.get(item) + }else if(this.curTabProp === 'rcode'){ + itemName = this.dnsRcodeMapData.get(item) + } + if (itemName === currentValue) { selectedDom.style.cssText = 'color:#0091ff;font-weight: bold;' } else { selectedDom.style.cssText = '' @@ -413,32 +453,37 @@ export default { }, changeValue (value) { // 设置面包屑显示的内容及hover时的title + let valName = value + if(this.tab === 'qtype'){ + valName =this.dnsQtypeMapData.get(value) + }else if(this.tab === 'rcode'){ + valName =this.dnsRcodeMapData.get(value) + } + this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null document.getElementById('breadcrumbValue').innerText = value - document.getElementById('breadcrumbButton').setAttribute('title', value) - document.getElementById(this.valueMenuId).setAttribute('title', value) + //document.getElementById('breadcrumbButton').setAttribute('title', valName) + document.getElementById(this.valueMenuId).setAttribute('title', valName) document.getElementById('breadcrumbButton').click() // const columnName = this.$store.getters.getBreadcrumbColumnName const columnName = this.getUrlParam(this.curTabState.thirdMenu, '') - const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName) - if (tabObjGroup && tabObjGroup.length > 0) { - const curTab = tabObjGroup[0] - if (curTab) { - const queryCondition = [] - const searchProps = curTab.dillDownProp - if (curTab.prop === 'protocolPort') { - const valueGroup = value.split(':') - if (valueGroup) { - queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'") - queryCondition.push('common_server_port=' + valueGroup[1]) - } - console.log(queryCondition.join(' AND ')) - this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ') - } else { - searchProps.forEach(item => { - queryCondition.push(item + "='" + value.replaceAll("'", "\\\\'") + "'") - }) - this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ') + //const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName) + let curTab = this.getCurTabByLabel() + if (curTab) { + const queryCondition = [] + const searchProps = curTab.dillDownProp + if (curTab.prop === 'protocolPort') { + const valueGroup = value.split(':') + if (valueGroup) { + queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'") + queryCondition.push('common_server_port=' + valueGroup[1]) } + console.log(queryCondition.join(' AND ')) + this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ') + } else { + searchProps.forEach(item => { + queryCondition.push(item + "='" + value.replaceAll("'", "\\\\'") + "'") + }) + this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ') } } this.changeUrlTabState() @@ -509,7 +554,6 @@ export default { if (!columnName) { // 点击第二级菜单 this.$store.commit('setNetworkOverviewTabList', []) } - // 清空网络概况的特殊面包屑 this.$store.getters.menuList.forEach(menu => { if (!this.$_.isEmpty(menu.children)) { @@ -520,16 +564,18 @@ export default { child.columnName = columnName this.urlChangeParams[this.curTabState.thirdMenu] = columnName this.urlChangeParams[this.curTabState.fourthMenu] = columnValue - const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName) - const type = tabObjGroup && tabObjGroup[0] ? tabObjGroup[0].prop : '' - this.urlChangeParams[this.curTabState.dimensionType] = type + //const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName) + //let curTab = this.getCurTabByLabel() + //const type = curTab ? curTab.prop : '' + //this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null + //this.urlChangeParams[this.curTabState.dimensionType] = type this.urlChangeParams[this.curTabState.panelName] = columnValue } else if (columnName) { // 点击的为列名 child.columnValue = '' child.columnName = columnName this.urlChangeParams[this.curTabState.thirdMenu] = columnName this.urlChangeParams[this.curTabState.fourthMenu] = '' - this.urlChangeParams[this.curTabState.panelName] = columnName + this.urlChangeParams[this.curTabState.panelName] = columnValue const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s') const curTab = getDefaultCurTab(tableType, metric, columnName) diff --git a/src/utils/tools.js b/src/utils/tools.js index e3ca0c12..6a583419 100644 --- a/src/utils/tools.js +++ b/src/utils/tools.js @@ -855,46 +855,28 @@ export function getTabList (curTable, curMetric) { } return tabs } -export async function mapDnsData(list,type,prop){ - let valueGroup = [] +export async function getDnsMapData(type){ + let codeValueMap = new Map() const dnsData = await getDictList({ type:type,pageSize: -1 }) - if(list && list.length > 0){ - list.forEach(data => { - if(typeof data === 'string'){ - let code = Number(data) - let dictData = dnsData.find(mapData => {return Number(mapData.code) === code}) - if(dictData){ - data = dictData.value - }else { - dnsData.forEach(mapData => { - let range = mapData.code.split('-') - if(range && range.length >= 2){ - let start = range[0].trim() - let eEnd = range[1].trim() - data = (start <= code && code <= eEnd) ? mapData.value : code - } - }) + if(dnsData && dnsData.length>0) { + dnsData.forEach(mapData => { + let code = mapData.code + if(code.indexOf('-')>-1){ + let range = mapData.code.split('-') + if(range && range.length >= 2){ + let start = range[0].trim() + let eEnd = range[1].trim() + mapData.value = (start <= code && code <= eEnd) ? mapData.value : code + for (let i = start; i <= eEnd; i++) { + codeValueMap.set(i,mapData.value) + } } }else { - let code = Number(data[prop]) - let dictData = dnsData.find(mapData => {return Number(mapData.code) === code}) - if(dictData){ - data[prop] = dictData.value - }else { - dnsData.forEach(mapData => { - let range = mapData.code.split('-') - if(range && range.length >= 2){ - let start = range[0].trim() - let eEnd = range[1].trim() - data[prop] = (start <= code && code <= eEnd) ? mapData.value : code - } - }) - } + codeValueMap.set(code,mapData.value) } - valueGroup.push(data) }) } - return valueGroup + return codeValueMap } export function combineTabList (tableType, list, commonTabList) { const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue index 3aa52321..039d98c5 100644 --- a/src/views/charts2/Panel.vue +++ b/src/views/charts2/Panel.vue @@ -66,7 +66,7 @@ import { import { getPanelList, getChartList } from '@/utils/api' import { getNowTime, getSecond } from '@/utils/date-util' import { getTypeCategory } from '@/views/charts/charts/tools' -import { urlParamsHandler, overwriteUrl } from '@/utils/tools' +import { urlParamsHandler, overwriteUrl,getDnsMapData } from '@/utils/tools' import ChartList from '@/views/charts2/ChartList' import { useStore } from 'vuex' @@ -87,6 +87,8 @@ export default { panelLock: true, extraParams: {}, panelName: '', + dnsRcodeMapData: [], + dnsQtypeMapData: [], score: null, curTabState: curTabState } @@ -107,7 +109,18 @@ export default { }, async mounted () { // this.panelName = this.$store.getters.getPanelName - this.panelName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : '' + let pName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : '' + let curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null + this.dnsQtypeMapData = await getDnsMapData('dnsQtype') + this.dnsRcodeMapData = await getDnsMapData('dnsRcode') + if(curTabProp === 'qtype'){ + this.panelName = this.dnsQtypeMapData.get(pName) + }else if(curTabProp === 'rcode'){ + this.panelName = this.dnsRcodeMapData.get(pName) + }else { + this.panelName = pName + } + // const curOperationType = this.$store.getters.getTabOperationType /* const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true) if (this.panelName && this.$route.path === '/panel/networkAppPerformance' && curOperationType !== operationType.thirdMenu) { diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue index bd74ab56..3faf818d 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue @@ -73,8 +73,22 @@