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

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;

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: [
+      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'
-        }
-      ]
     }
   },
   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 () {

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'
   }
 ]

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>

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,

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: [
+      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'
-        }
-      ]
     }
   },
   methods: {