CN-1540 fix: 提取Tag展示逻辑公共部分

This commit is contained in:
刘洪洪
2024-01-04 16:39:39 +08:00
parent 8b81181ae2
commit 80027fbd46
6 changed files with 100 additions and 159 deletions

View File

@@ -1,7 +1,19 @@
import { ElMessageBox, ElMessage } from 'element-plus'
import i18n from '@/i18n'
import _ from 'lodash'
import { storageKey, iso36112, topDomain, echartsFontSize, dbGeoDataTableName, networkTable, dbDrilldownTableConfig, ZH, EN, securityLevel } from '@/utils/constants'
import {
storageKey,
iso36112,
topDomain,
echartsFontSize,
dbGeoDataTableName,
networkTable,
dbDrilldownTableConfig,
ZH,
EN,
securityLevel,
entityDetailTags, entityDefaultColor, tagValueLabelMapping
} from '@/utils/constants'
import { getIso36112JsonData, getDictList } from '@/utils/api'
import { format } from 'echarts'
import router from '@/router'
@@ -1481,3 +1493,75 @@ export const changeTimestampToTime = (timestamp) => {
return '-'
}
}
/**
* 规范实体的tag展示
*/
export const formatTags = (data, type, list) => {
Object.keys(data).forEach(k => {
if (k !== 'userDefinedTags' && data[k]) {
if (_.isArray(data[k])) {
data[k].forEach(k3 => {
const find = entityDetailTags[type].find(t => t.name === k3.pluginName)
if (find) {
list.push({ key: 'pluginName', value: tagValueHandler(k3.pluginName), type: find.type })
} else {
list.push({ key: 'pluginName', value: tagValueHandler(k3.pluginName), color: k3.knowledgeBase ? (k3.knowledgeBase.color || entityDefaultColor) : entityDefaultColor })
}
})
} else {
Object.keys(data[k]).forEach(k2 => {
const find = entityDetailTags[type].find(t => t.name === k2)
if (find) {
list.push({ key: k2, value: tagValueHandler(data[k][k2]), type: find.type })
}
})
}
}
})
}
/**
* 规范实体详情的tag展示
*/
export const formatTagsOfDetails = (data, type, list) => {
data.forEach(r => {
Object.keys(r).forEach(k => {
const aggregation = {
createTime: r[k].createTime,
updateTime: r[k].updateTime,
status: r[k].isValid,
intelligenceContent: []
}
if (k === 'userDefinedTag') {
aggregation.intelligenceContent.push({ key: k, value: r[k].tagValue, type: 'normal' })
} else {
if (_.isArray(r[k])) {
r[k].forEach(k3 => {
const find = entityDetailTags[type].find(t => t.name === k3.pluginName)
if (find) {
aggregation.intelligenceContent.push({ key: 'pluginName', value: tagValueHandler(k3.pluginName), type: find.type })
} else {
aggregation.intelligenceContent.push({ key: 'pluginName', value: tagValueHandler(k3.pluginName), color: k3.knowledgeBase ? (k3.knowledgeBase.color || entityDefaultColor) : entityDefaultColor })
}
})
} else {
Object.keys(r[k]).forEach(k2 => {
const find = entityDetailTags[type].find(t => t.name === k2)
if (find) {
aggregation.intelligenceContent.push({ key: k2, value: tagValueHandler(r[k][k2]), type: find.type })
}
})
}
}
if (aggregation.intelligenceContent.length > 0) {
list.push(aggregation)
}
})
})
}
const tagValueHandler = (value) => {
const find = tagValueLabelMapping.find(t => t.value === value)
return find ? find.name : value
}

View File

@@ -65,13 +65,11 @@ import ChartError from '@/components/common/Error'
import {
drillDownPanelTypeMapping,
entityType,
entityDetailTags,
tagValueLabelMapping,
riskLevelMapping,
entityDefaultColor,
riskLevelColor1
} from '@/utils/constants'
import { selectElementText, copySelectionText, getTagColor } from '@/utils/tools'
import { selectElementText, copySelectionText, getTagColor, formatTags } from '@/utils/tools'
import { ref } from 'vue'
import i18n from '@/i18n'
import { useRouter } from 'vue-router'
@@ -127,10 +125,6 @@ export default {
},
methods: {
getTagColor,
tagValueHandler (value) {
const find = tagValueLabelMapping.find(t => t.value === value)
return find ? find.name : value
},
getData () {
this.toggleLoading(true)
this.showError = false
@@ -151,28 +145,7 @@ export default {
if (tagData) {
const res = tagData.data
if (tagData.status === 200) {
Object.keys(res.data).forEach(k => {
if (k !== 'userDefinedTags' && res.data[k]) {
// 此处是vpnLearningDomain/Ip/App的tag
if (_.isArray(res.data[k])) {
res.data[k].forEach(k3 => {
const find = entityDetailTags[this.entity.entityType].find(t => t.name === k3.pluginName)
if (find) {
this.levelTwoTags.push({ key: 'pluginName', value: this.tagValueHandler(k3.pluginName), type: find.type })
} else {
this.levelTwoTags.push({ key: 'pluginName', value: this.tagValueHandler(k3.pluginName), color: k3.knowledgeBase ? (k3.knowledgeBase.color || entityDefaultColor) : entityDefaultColor })
}
})
} else {
Object.keys(res.data[k]).forEach(k2 => {
const find = entityDetailTags[this.entity.entityType].find(t => t.name === k2)
if (find) {
this.levelTwoTags.push({ key: k2, value: this.tagValueHandler(res.data[k][k2]), type: find.type })
}
})
}
}
})
formatTags(res.data, this.entity.entityType, this.levelTwoTags)
if (_.isArray(res.data.userDefinedTags)) {
this.levelTwoTags = _.concat(this.levelTwoTags, res.data.userDefinedTags.map(tag => ({ value: tag.tagValue, color: tag.knowledgeBase ? tag.knowledgeBase.color : entityDefaultColor })))
}

View File

@@ -30,8 +30,7 @@
<script>
import chartMixin from '@/views/charts2/chart-mixin'
import i18n from '@/i18n'
import { entityDetailTabsName, entityDetailTags } from '@/utils/constants'
import { entityDetailTabsName } from '@/utils/constants'
import { reactive, ref } from 'vue'
import InformationAggregation from '@/views/charts2/charts/entityDetail/tabs/InformationAggregation'
import DomainNameResolution from '@/views/charts2/charts/entityDetail/tabs/DomainNameResolution'
@@ -42,11 +41,11 @@ import OpenPort from '@/views/charts2/charts/entityDetail/tabs/OpenPort'
import AccountInformation from '@/views/charts2/charts/entityDetail/tabs/AccountInformation'
import DeviceInformation from '@/views/charts2/charts/entityDetail/tabs/DeviceInformation'
import DigitalCertificate from '@/views/charts2/charts/entityDetail/tabs/DigitalCertificate'
import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
import { formatTagsOfDetails, overwriteUrl, urlParamsHandler } from '@/utils/tools'
import { useRoute } from 'vue-router'
import axios from 'axios'
import { api } from '@/utils/api'
import { tagValueLabelMapping, entityType, entityDetailTabConfig } from '../../../../utils/constants'
import { entityType, entityDetailTabConfig } from '../../../../utils/constants'
export default {
name: 'EntityDetailTabs',
@@ -118,29 +117,7 @@ export default {
const informationAggregationResponse = response[0].value
if (informationAggregationResponse && informationAggregationResponse.status === 200) {
const list = []
informationAggregationResponse.data.data.result.forEach(r => {
Object.keys(r).forEach(k => {
const aggregation = {
createTime: r[k].createTime,
updateTime: r[k].updateTime,
status: r[k].isValid,
intelligenceContent: []
}
if (k === 'userDefinedTag') {
aggregation.intelligenceContent.push({ key: k, value: r[k].tagValue, type: 'normal' })
} else {
Object.keys(r[k]).forEach(k2 => {
const find = entityDetailTags[this.entity.entityType].find(t => t.name === k2)
if (find) {
aggregation.intelligenceContent.push({ key: k2, value: this.tagValueHandler(r[k][k2]), type: find.type })
}
})
}
if (aggregation.intelligenceContent.length > 0) {
list.push(aggregation)
}
})
})
formatTagsOfDetails(informationAggregationResponse.data.data.result, this.entity.entityType, list)
this.initSetTag(entityDetailTabsName.informationAggregation, list.length)
}
const openPortResponse = response[1].value
@@ -276,10 +253,6 @@ export default {
case 'domain': return api.entity.openPortOfDomain
case 'app': return api.entity.openPortOfApp
}
},
tagValueHandler (value) {
const find = tagValueLabelMapping.find(t => t.value === value)
return find ? find.name : value
}
},
beforeUnmount () {

View File

@@ -71,10 +71,11 @@
import chartMixin from '@/views/charts2/chart-mixin'
import axios from 'axios'
import { api } from '@/utils/api'
import { entityDetailTabsName, entityDetailTags, tagValueLabelMapping } from '@/utils/constants'
import { entityDetailTabsName } from '@/utils/constants'
import { dateFormatByAppearance, getNowTime } from '@/utils/date-util'
import chartNoData from '@/views/charts/charts/ChartNoData'
import { ref } from 'vue'
import { formatTagsOfDetails } from '@/utils/tools'
export default {
name: 'InformationAggregation',
@@ -105,17 +106,6 @@ export default {
return 'padding-0'
}
},
tagValueHandler (k, k2, value) {
if (k === 'psiphon3Ip') {
if (k2 === 'type') {
const find = tagValueLabelMapping.find(t => t.value === value)
if (find) {
return find.name
}
}
}
return value
},
getData () {
this.loading = true
this.showError = false
@@ -132,29 +122,7 @@ export default {
// this.isNoData = res.data.result.length === 0
this.showError = false
if (res.data.result.length > 0) {
res.data.result.forEach(r => {
Object.keys(r).forEach(k => {
const aggregation = {
createTime: r[k].createTime,
updateTime: r[k].updateTime,
status: r[k].isValid,
intelligenceContent: []
}
if (k === 'userDefinedTag') {
aggregation.intelligenceContent.push({ key: k, value: r[k].tagValue, type: 'normal' })
} else {
Object.keys(r[k]).forEach(k2 => {
const find = entityDetailTags[this.entity.entityType].find(t => t.name === k2)
if (find) {
aggregation.intelligenceContent.push({ key: k2, value: this.tagValueHandler(k, k2, r[k][k2]), type: find.type })
}
})
}
if (aggregation.intelligenceContent.length > 0) {
this.informationAggregationList.push(aggregation)
}
})
})
formatTagsOfDetails(res.data.result, this.entity.entityType, this.informationAggregationList)
this.$emit('checkTag', entityDetailTabsName.informationAggregation, this.informationAggregationList.length)
} else {
this.$emit('checkTag', entityDetailTabsName.informationAggregation, 0)

View File

@@ -2,7 +2,8 @@ import _ from 'lodash'
import i18n from '@/i18n'
import axios from 'axios'
import { api } from '@/utils/api'
import { entityDefaultColor, entityDetailTags, tagValueLabelMapping } from '@/utils/constants'
import { entityDefaultColor } from '@/utils/constants'
import { formatTags } from '@/utils/tools'
export default class Node {
/*
@@ -80,28 +81,7 @@ export default class Node {
const tags = await this.queryTags(entityType, entityName)
let _tags = []
Object.keys(tags).forEach(k => {
if (k !== 'userDefinedTags' && tags[k]) {
// 此处是vpnLearningDomain/Ip/App的tag
if (_.isArray(tags[k])) {
tags[k].forEach(k3 => {
const find = entityDetailTags[entityType].find(t => t.name === k3.pluginName)
if (find) {
_tags.push({ key: 'pluginName', value: this.tagValueHandler('', '', k3.pluginName), type: find.type })
} else {
_tags.push({ key: 'pluginName', value: this.tagValueHandler('', '', k3.pluginName), color: k3.knowledgeBase ? (k3.knowledgeBase.color || entityDefaultColor) : entityDefaultColor })
}
})
} else {
Object.keys(tags[k]).forEach(k2 => {
const find = entityDetailTags[entityType].find(t => t.name === k2)
if (find) {
_tags.push({ key: k2, value: this.tagValueHandler(k, k2, tags[k][k2]), type: find.type })
}
})
}
}
})
formatTags(tags, entityType, _tags)
if (_.isArray(tags.userDefinedTags)) {
_tags = _.concat(_tags, tags.userDefinedTags.map(tag => ({ value: tag.tagValue, color: tag.knowledgeBase ? tag.knowledgeBase.color : entityDefaultColor })))
}
@@ -153,18 +133,6 @@ export default class Node {
throw response
}
}
tagValueHandler (k, k2, value) {
if (k === 'psiphon3Ip') {
if (k2 === 'type') {
const find = tagValueLabelMapping.find(t => t.value === value)
if (find) {
return find.name
}
}
}
return value
}
}
export const nodeType = {
rootNode: 'rootNode',

View File

@@ -202,9 +202,9 @@ import relatedServer from '@/mixins/relatedServer'
import Loading from '@/components/common/Loading'
import axios from 'axios'
import { api } from '@/utils/api'
import { entityDefaultColor, entityDetailTags, tagValueLabelMapping } from '@/utils/constants'
import { entityDefaultColor } from '@/utils/constants'
import _ from 'lodash'
import { getTagColor } from '@/utils/tools'
import { getTagColor, formatTags } from '@/utils/tools'
export default {
name: 'Row',
@@ -303,28 +303,7 @@ export default {
axios.get(`${url}?resource=${this.entity.entityValue}`).then(responese => {
const res = responese.data
if (responese.status === 200) {
Object.keys(res.data).forEach(k => {
if (k !== 'userDefinedTags' && res.data[k]) {
// 此处是vpnLearningDomain/Ip/App的tag
if (_.isArray(res.data[k])) {
res.data[k].forEach(k3 => {
const find = entityDetailTags[this.entity.entityType].find(t => t.name === k3.pluginName)
if (find) {
this.levelTwoTags.push({ key: 'pluginName', value: this.tagValueHandler(k3.pluginName), type: find.type })
} else {
this.levelTwoTags.push({ key: 'pluginName', value: this.tagValueHandler(k3.pluginName), color: k3.knowledgeBase ? (k3.knowledgeBase.color || entityDefaultColor) : entityDefaultColor })
}
})
} else {
Object.keys(res.data[k]).forEach(k2 => {
const find = entityDetailTags[this.entity.entityType].find(t => t.name === k2)
if (find) {
this.levelTwoTags.push({ key: k2, value: this.tagValueHandler(res.data[k][k2]), type: find.type })
}
})
}
}
})
formatTags(res.data, this.entity.entityType, this.levelTwoTags)
if (_.isArray(res.data.userDefinedTags)) {
this.levelTwoTags = _.concat(this.levelTwoTags, res.data.userDefinedTags.map(tag => ({ value: tag.tagValue, color: tag.knowledgeBase ? tag.knowledgeBase.color : entityDefaultColor })))
}
@@ -332,10 +311,6 @@ export default {
}
})
},
tagValueHandler (value) {
const find = tagValueLabelMapping.find(t => t.value === value)
return find ? find.name : value
},
/* 切换折叠状态 */
switchCollapse () {
this.isCollapse = !this.isCollapse