gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-1440 fix: policy的library增加鼠标悬浮提示事件

Browse Source
This commit is contained in:
chenjinsong
2023-12-11 17:48:38 +08:00
parent a7dfa33da2
commit e1a26b60ae
6 changed files with 141 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/views/detections/detectionPolicies/PolicyDrawer.vue
View File

@@ -40,7 +40,37 @@
<div v-if="detailData.ruleType==='indicator_match'">
<div class="drawer-basic-function">
<div class="detection-drawer-title">{{ $t('detection.library') }}</div>
<span class="basic-function-value">{{ $_.get(detailData, 'ruleConfigObj.knowledgeBase.name', '-') || '-' }}</span>
<el-tooltip
effect="light"
trigger="hover"
placement="left"
>
<span class="basic-function-value">{{ $_.get(detailData, 'ruleConfigObj.knowledgeBase.name', '-') || '-' }}</span>
<template #content>
<div class="policy-library-tip">
<div class="tip__header">{{$_.get(detailData, 'ruleConfigObj.knowledgeBase.name', '-')}}</div>
<div class="tip__tags">
<div class="tip__tag" v-if="knowledgeBaseSource.find(s => s.value === $_.get(detailData.ruleConfigObj, 'knowledgeBase.source'))">
{{
knowledgeBaseSource.find(s => s.value === $_.get(detailData.ruleConfigObj, 'knowledgeBase.source')) &&
knowledgeBaseSource.find(s => s.value === $_.get(detailData.ruleConfigObj, 'knowledgeBase.source')).name
}}</div>
<div
class="tip__tag"
v-if="$_.get(detailData.ruleConfigObj, 'knowledgeBase.color')"
:style="{backgroundColor: $_.get(detailData.ruleConfigObj, 'knowledgeBase.color'), color: 'white'}"
>{{colorText($_.get(detailData.ruleConfigObj, 'knowledgeBase.color'))}}</div>
</div>
<div class="tip__description" :class="{ 'tip__description--non': !($_.get(detailData.ruleConfigObj, 'knowledgeBase.description')) }">
<template v-if="$_.get(detailData.ruleConfigObj, 'knowledgeBase.description')">
{{$_.get(detailData.ruleConfigObj, 'knowledgeBase.description')}}
</template>
<template v-else>{{$t('tip.noDescription')}}</template>
</div>
</div>
</template>
</el-tooltip>
</div>
<div class="drawer-basic-function">
@@ -134,7 +164,7 @@
<script>
import { switchStatus, toUpperCaseByString } from '@/utils/tools'
import { detectionUnitList, eventSeverityColor, securityLevel, storageKey, ZH, EN } from '@/utils/constants'
import { detectionUnitList, eventSeverityColor, securityLevel, storageKey, ZH, EN, knowledgeBaseSource, knowledgeBaseColor } from '@/utils/constants'
import axios from 'axios'
import { api } from '@/utils/api'
@@ -147,6 +177,8 @@ export default {
},
data () {
return {
knowledgeBaseSource,
knowledgeBaseColor,
activeRule: 'rule',
activeTrigger: 'trigger',
detailData: {},
@@ -173,6 +205,15 @@ export default {
mounted () {
this.language = localStorage.getItem(storageKey.language) || EN
},
computed: {
colorText () {
const vm = this
return function (color) {
const t = vm.knowledgeBaseColor.find(t => t.value === color)
return t ? vm.$t(t.label) : vm.$t(vm.knowledgeBaseColor[0].label)
}
}
},
methods: {
switchStatus,
toUpperCaseByString,
@@ -255,6 +296,3 @@ export default {
}
}
</script>
<style lang="scss">
</style>

44
src/views/detections/detectionPolicies/PolicyTable.vue
View File

@@ -65,7 +65,36 @@
<span class="detection-tag-blue">{{ scope.row[item.prop] }}</span>
</template>
<template v-else-if="item.prop === 'library' && scope.row[item.prop]">
<span class="detection-table-library">{{ scope.row[item.prop] }}</span>
<el-tooltip
effect="light"
trigger="hover"
placement="left"
>
<span class="detection-table-library">{{ scope.row[item.prop] }}</span>
<template #content>
<div class="policy-library-tip">
<div class="tip__header">{{scope.row[item.prop]}}</div>
<div class="tip__tags">
<div class="tip__tag" v-if="knowledgeBaseSource.find(s => s.value === $_.get(scope.row.ruleConfigObj, 'knowledgeBase.source'))">
{{
knowledgeBaseSource.find(s => s.value === $_.get(scope.row.ruleConfigObj, 'knowledgeBase.source')) &&
knowledgeBaseSource.find(s => s.value === $_.get(scope.row.ruleConfigObj, 'knowledgeBase.source')).name
}}</div>
<div
class="tip__tag"
v-if="$_.get(scope.row.ruleConfigObj, 'knowledgeBase.color')"
:style="{backgroundColor: $_.get(scope.row.ruleConfigObj, 'knowledgeBase.color'), color: 'white'}"
>{{colorText($_.get(scope.row.ruleConfigObj, 'knowledgeBase.color'))}}</div>
</div>
<div class="tip__description" :class="{ 'tip__description--non': !($_.get(scope.row.ruleConfigObj, 'knowledgeBase.description')) }">
<template v-if="$_.get(scope.row.ruleConfigObj, 'knowledgeBase.description')">
{{$_.get(scope.row.ruleConfigObj, 'knowledgeBase.description')}}
</template>
<template v-else>{{$t('tip.noDescription')}}</template>
</div>
</div>
</template>
</el-tooltip>
</template>
<span v-else>{{ scope.row[item.prop] || '-' }}</span>
</template>
@@ -83,7 +112,7 @@ import table from '@/mixins/table'
import { dateFormatByAppearance } from '@/utils/date-util'
import { switchStatus } from '@/utils/tools'
import _ from 'lodash'
import { detectionUnitList } from '@/utils/constants'
import { detectionUnitList, knowledgeBaseSource, knowledgeBaseColor } from '@/utils/constants'
import { useRoute } from 'vue-router'
export default {
@@ -100,6 +129,8 @@ export default {
mixins: [table],
data () {
return {
knowledgeBaseColor,
knowledgeBaseSource,
tableTitle: [
{
label: this.$t('knowledge.status'),
@@ -163,6 +194,15 @@ export default {
}, 400)
}
},
computed: {
colorText () {
const vm = this
return function (color) {
const t = vm.knowledgeBaseColor.find(t => t.value === color)
return t ? vm.$t(t.label) : vm.$t(vm.knowledgeBaseColor[0].label)
}
}
},
watch: {
tableData: {
immediate: true,