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

2023-12-11 17:48:38 +08:00
parent a7dfa33da2
commit e1a26b60ae
6 changed files with 141 additions and 50 deletions
--- a/src/assets/css/components/views/detections/detection-table.scss
+++ b/src/assets/css/components/views/detections/detection-table.scss
@@ -1,4 +1,3 @@
-
 .detection-table {
  .el-table th > .cell, .el-table .cell {
    padding-left: 0 !important;
@@ -32,7 +31,37 @@
    height: 32px !important;
  }
 }
+.policy-library-tip {
+  max-width: 180px;
+  padding: 4px;

+  .tip__header {
+    color: #353636;
+    font-weight: bold;
+    font-size: 14px;
+  }
+  .tip__tags {
+    display: flex;
+    margin-top: 8px;
+
+    .tip__tag {
+      margin-right: 10px;
+      padding: 2px 10px;
+      background-color: #EBF7FA;
+      color: #046ECA;
+      box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+      border-radius: 12px;
+    }
+  }
+  .tip__description {
+    margin-top: 14px;
+    color: #666;
+
+    &.tip__description--non {
+      color: #999;
+    }
+  }
+}
 .detection-tag-blue, .detection-tag-red, .detection-tag-gray, .detection-tag-status0, .detection-tag-status1 {
  display: inline-block;
  border-radius: 10px;
--- a/src/components/table/setting/KnowledgeBaseTableForRow.vue
+++ b/src/components/table/setting/KnowledgeBaseTableForRow.vue
@@ -129,7 +129,7 @@

 <script>
 import table from '@/mixins/table'
-import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
+import { knowledgeBaseCategory, knowledgeBaseSource, knowledgeBaseColor } from '@/utils/constants'
 export default {
  name: 'KnowledgeBaseTableForRow',
  props: {
@@ -207,23 +207,7 @@ export default {
          width: 80
        }
      ],
-      knowledgeBaseColor: [
-        {
-          label: this.$t('knowledge.info'),
-          value: 'rgb(119,131,145)',
-          name: 'info'
-        },
-        {
-          label: this.$t('knowledge.benign'),
-          value: 'rgb(116,159,77)',
-          name: 'benign'
-        },
-        {
-          label: this.$t('knowledge.malicious'),
-          value: 'rgb(226,97,84)',
-          name: 'malicious'
-        }
-      ]
+      knowledgeBaseColor
    }
  },
  watch: {
@@ -260,7 +244,7 @@ export default {
      const vm = this
      return function (color) {
        const t = vm.knowledgeBaseColor.find(t => t.value === color)
-        return t ? t.label : vm.knowledgeBaseColor[0].label
+        return t ? vm.$t(t.label) : vm.$t(vm.knowledgeBaseColor[0].label)
      }
    },
    colorName () {
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -430,7 +430,23 @@ export const knowledgeBaseCategory = [
    value: 'user_defined'
  }
 ]
-
+export const knowledgeBaseColor = [
+  {
+    label: 'knowledge.info',
+    value: 'rgb(119,131,145)',
+    name: 'info'
+  },
+  {
+    label: 'knowledge.benign',
+    value: 'rgb(116,159,77)',
+    name: 'benign'
+  },
+  {
+    label: 'knowledge.malicious',
+    value: 'rgb(226,97,84)',
+    name: 'malicious'
+  }
+]
 export const knowledgeCategoryValue = {
  webSketch: 'websketch',
  aiTagging: 'ai_tagging',
@@ -498,15 +514,15 @@ export const knowledgeBaseSource = [
    value: 'cn_psiphon3_ip'
  },
  {
-    name: 'IP Tag',
+    name: 'IP',
    value: 'cn_ip_tag_user_defined'
  },
  {
-    name: 'Domain Tag',
+    name: 'Domain',
    value: 'cn_domain_tag_user_defined'
  },
  {
-    name: 'APP Tag',
+    name: 'APP',
    value: 'cn_app_tag_user_defined'
  }
 ]
--- a/src/views/detections/detectionPolicies/PolicyDrawer.vue
+++ b/src/views/detections/detectionPolicies/PolicyDrawer.vue
@@ -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>
+                <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>
--- a/src/views/detections/detectionPolicies/PolicyTable.vue
+++ b/src/views/detections/detectionPolicies/PolicyTable.vue
@@ -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]">
+          <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,
--- a/src/views/setting/KnowledgeBaseForm.vue
+++ b/src/views/setting/KnowledgeBaseForm.vue
@@ -45,7 +45,7 @@
                  </div>
                </template>
                <template v-for="color in knowledgeBaseColor" :key="color.name">
-                  <el-option  :value="color.label" >
+                  <el-option :value="color.label" :label="$t(color.label)">
                    <div class="knowledge-color">
                      <span class="knowledge-color__icon" :class="color.name"></span> <span>{{$t(color.label)}}</span>
                    </div>
@@ -236,7 +236,7 @@
 import { useRoute } from 'vue-router'
 import { nextTick, reactive, ref } from 'vue'
 import _ from 'lodash'
-import { knowledgeBaseType, storageKey, unitTypes, knowledgeSourceValue, itemListHeight, knowledgeCategoryValue } from '@/utils/constants'
+import { knowledgeBaseType, storageKey, unitTypes, knowledgeSourceValue, itemListHeight, knowledgeCategoryValue, knowledgeBaseColor } from '@/utils/constants'
 import Pagination from '@/components/common/Pagination'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import axios from 'axios'
@@ -515,23 +515,7 @@ export default {
      status: 1,
      oldItemIds: [],
      oldTagItem: {},
-      knowledgeBaseColor: [
-        {
-          label: this.$t('knowledge.info'),
-          value: 'rgb(119,131,145)',
-          name: 'info'
-        },
-        {
-          label: this.$t('knowledge.benign'),
-          value: 'rgb(116,159,77)',
-          name: 'benign'
-        },
-        {
-          label: this.$t('knowledge.malicious'),
-          value: 'rgb(226,97,84)',
-          name: 'malicious'
-        }
-      ]
+      knowledgeBaseColor
    }
  },
  methods: {