fix: CN-1592 UI 新增Tag检索界面:1. edit tag 时，缺少Tip，且保存时 preview 校验不通过；2. preview 里的 entity type改为选择框；3.Tip样式调整；4.table下拉的折线图未显示；

public/config.js

@@ -21,5 +21,6 @@ const DEFAULT_TIME_FILTER_RANGE = {
     performanceEvent: 60 * 24 * 7, // 实体详情--通用--性能事件
     behaviorPattern: 60 * 24 * 7 // 实体详情--IP--行为模式
   },
-  detection: 60 // 事件日志列表
+  detection: 60, // 事件日志列表
+  tag:60//标签列表
 }

src/assets/css/components/views/tag/tagForm.scss

@@ -309,6 +309,9 @@ $color-mousemove-cursor: #D3D0D8;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
+          .el-form-item {
+            margin-bottom: 0;
+          }
         }
 
         .imported-data-item-edit__input {
@@ -1183,7 +1186,7 @@ $color-mousemove-cursor: #D3D0D8;
   }
 }
 
-.info {
+.unknow {
   background-color: rgb(119, 131, 145) // 需要与js里的knowledgeBaseColor进行匹配，故保留
 }
 

src/components/table/tag/TagTable.vue

@@ -90,7 +90,7 @@
           <span v-if="item.prop === 'isBuiltIn'">
             <span>{{ getIsBuiltIn(scope.row.isBuiltIn) }}</span>
           </span>
-        <span v-else-if="item.prop === 'intent'" class="type-tag" :class="colorIntent(scope.row[item.prop])">{{scope.row[item.prop]}}</span>
+        <span v-else-if="item.prop === 'intent'" class="type-tag" :class="colorIntent(scope.row[item.prop])">{{intentText(scope.row[item.prop])}}</span>
         <span v-else>{{ scope.row[item.prop] || '-' }}</span>
       </template>
     </el-table-column>
@@ -107,10 +107,10 @@ import table from '@/mixins/table'
 import Loading from '@/components/common/Loading'
 import axios from 'axios'
 import { api } from '@/utils/api'
-import { storageKey, tagIntentColor, chartColor3 } from '@/utils/constants'
+import { storageKey, tagIntent, chartColor3 } from '@/utils/constants'
 import { urlParamsHandler, overwriteUrl, headerCellClass } from '@/utils/tools'
 import { ref, shallowRef } from 'vue'
-import { dateFormatToUTC, getNowTime } from '@/utils/date-util'
+import { dateFormatToUTC, getNowTime, getSecond } from '@/utils/date-util'
 import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import { useRoute } from 'vue-router'
@@ -194,7 +194,7 @@ export default {
       myChartArray: [],
       observedCount: 0,
       disableToEntity: false,
-      tagIntentColor
+      tagIntent
     }
   },
   /**
@@ -284,11 +284,18 @@ export default {
     }
   },
   computed: {
+    intentText () {
+      const vm = this
+      return function (intent) {
+        const t = vm.tagIntent.find(t => t.value === intent)
+        return this.$t(t.label)
+      }
+    },
     colorIntent () {
       const vm = this
       return function (intent) {
-        const t = vm.tagIntentColor.find(t => t.intent === intent)
+        const t = vm.tagIntent.find(t => t.value === intent)
-        return t ? t.name + '-list' : vm.tagIntentColor[0].name + '-list'
+        return t ? t.name + '-list' : vm.tagIntent[0].name + '-list'
       }
     }
   },
@@ -525,9 +532,11 @@ export default {
       overwriteUrl(newUrl)
     },
     initLine (item, lineUrl) {
+      const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.dashboard || 60
+      const { startTime, endTime } = getNowTime(dateRangeValue)
       const params = {
-        // startTime: getSecond(this.timeFilter.startTime),
+        startTime: getSecond(startTime),
-        // endTime: getSecond(this.timeFilter.endTime)
+        endTime: getSecond(endTime)
       }
       lineUrl = lineUrl || api.tagTrafficEntityTrend
       lineUrl = lineUrl.replace('{{name}}', item.name)
@@ -537,10 +546,7 @@ export default {
         if (response.status === 200) {
           this.showError = false
           this.isNoData = res.data.result.length === 0
-
-          if (!this.isNoData) {
           this.echartsInit(res.data.result, item, '')
-          }
         } else {
           this.isNoData = false
           this.showError = true
@@ -556,9 +562,11 @@ export default {
       })
     },
     initStatistics (item, statisticsUrl) {
+      const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.dashboard || 60
+      const { startTime, endTime } = getNowTime(dateRangeValue)
       const params = {
-        // startTime: getSecond(this.timeFilter.startTime),
+        startTime: getSecond(startTime),
-        // endTime: getSecond(this.timeFilter.endTime)
+        endTime: getSecond(endTime)
       }
       statisticsUrl = statisticsUrl || api.tagTrafficEntityStatistics
       statisticsUrl = statisticsUrl.replace('{{name}}', item.name)

src/permission.js

@@ -171,11 +171,11 @@ export function handleComponent (code) {
       return () => import('@/views/setting/KnowledgeBase')
     case 'userDefinedLibrary':
       return () => import('@/views/tag/Tag')
-    //case 'userDefinedLibrary':
+    // case 'userDefinedLibrary':
-      //return () => import('@/views/setting/KnowledgeBaseUserDefinedList')
+      // return () => import('@/views/setting/KnowledgeBaseUserDefinedList')
-    //case 'createUserDefinedLibrary':
+    // case 'createUserDefinedLibrary':
-    //case 'editUserDefinedLibrary':
+    // case 'editUserDefinedLibrary':
-      //return () => import('@/views/setting/KnowledgeBaseForm')
+      // return () => import('@/views/setting/KnowledgeBaseForm')
     case 'administration':
       return () => import('@/views/administration/Index')
     case 'user':

src/utils/constants.js

@@ -322,7 +322,7 @@ export const tagIntentOptions = [
     label: 'tag.intent.benign'
   },
   {
-    value: 'Unknown',
+    value: 'Unknow',
     label: 'tag.intent.unknown'
   }
 ]
@@ -498,29 +498,11 @@ export const knowledgeBaseCategory = [
   }
 ]
 
-export const tagIntentColor = [
-  {
-    label: 'tag.intent.unknown',
-    name: 'unknow',
-    intent: 'Unknow'
-  },
-  {
-    label: 'tag.intent.benign',
-    name: 'benign',
-    intent: 'Benign'
-  },
-  {
-    label: 'tag.intent.malicious',
-    name: 'malicious',
-    intent: 'Malicious'
-  }
-]
-
 export const tagIntent = [
   {
     label: 'tag.intent.unknown',
     value: 'Unknow',
-    name: 'info'
+    name: 'unknow'
   },
   {
     label: 'tag.intent.benign',

src/views/tag/Tag.vue

@@ -160,13 +160,14 @@ export default {
       this.getTableData(params)
     },
     search (params) {
+      this.name = params.q
+      params = { name: this.name }
       if (this.intent) {
         params = { ...params, intent: this.intent }
       }
       if (this.category) {
         params = { ...params, category: this.category }
       }
-      this.name = params.q
       this.pageObj.pageNo = 1
       this.getTableData(params)
     },

src/views/tag/TagForm.vue

@@ -162,14 +162,28 @@
                     </td>
                     <td class="imported-data-value" :title="d.entityType">
                       <el-form-item v-if="editIndex === i || (addEditFlag && d.entityValue === '' && d.entityType === '')" prop="entityType">
-                        <span class="imported-data-item-edit__input">
+                        <el-select v-model="editTagForm.entityType"
-                          <el-input v-model="editTagForm.entityType" @blur="onBlurTagItem(i)" size="mini"></el-input>
+                                   class="form-select__enable"
-                        </span>
+                                   placeholder=" "
+                                   popper-class="form-select-popper"
+                                   @change="onBlurTagItem(i)"
+                                   @blur="onBlurTagItem(i)"
+                        >
+                          <template v-for="type in tagType" :key="type.name">
+                            <el-option :label="type.label" :value="type.value"></el-option>
+                          </template>
+                        </el-select>
                       </el-form-item>
                       <span v-else>{{ d.entityType }}</span>
                     </td>
                     <td class="imported-data-msg" :title="d.msg">
-                      <i :class="d.isValid === 1 ? 'el-icon-success' : (d.isValid === 0 ? 'el-icon-error' : '')"></i>&nbsp;&nbsp;{{(d.isValid === 1 && (d.msg==='' || !d.msg) )? $t('overall.success'): d.msg }}
+                      <el-icon v-if="d.isValid === 0"  style="vertical-align: middle;">
+                        <CircleCloseFilled style="color:#E26154;" />
+                      </el-icon>
+                      <el-icon v-else-if="d.isValid === 1" style="vertical-align: middle;">
+                        <CircleCheckFilled style="color:#749F4D;" />
+                      </el-icon>
+                      {{(d.isValid === 1 && (d.msg==='' || !d.msg) )? $t('overall.success'): d.msg }}
                     </td>
                     <!--返回和保存按钮:修改记录-->
                     <td v-if="backEditFlag && !addEditFlag && editIndex === i" class="imported-data-btn">
@@ -1255,6 +1269,11 @@ export default {
           if (!response.data.data) {
             throw new Error('No data found, id: ' + this.id)
           }
+          if (response.data.data.itemList) {
+            response.data.data.itemList.forEach(item => {
+              item.isValid = 1
+            })
+          }
           this.editObject = response.data.data
           if (response.data.data.intent) {
             const curIntentObj = this.tagIntent.find(item => item.value === response.data.data.intent)