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

2024-04-15 16:51:28 +08:00
parent a5e70bb2f0
commit 4c408ccb04
7 changed files with 60 additions and 46 deletions
--- a/public/config.js
+++ b/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//标签列表
 }
--- a/src/assets/css/components/views/tag/tagForm.scss
+++ b/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进行匹配，故保留
 }

--- a/src/components/table/tag/TagTable.vue
+++ b/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)
-        return t ? t.name + '-list' : vm.tagIntentColor[0].name + '-list'
+        const t = vm.tagIntent.find(t => t.value === intent)
+        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),
-        // endTime: getSecond(this.timeFilter.endTime)
+        startTime: getSecond(startTime),
+        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, '')
-          }
+          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),
-        // endTime: getSecond(this.timeFilter.endTime)
+        startTime: getSecond(startTime),
+        endTime: getSecond(endTime)
      }
      statisticsUrl = statisticsUrl || api.tagTrafficEntityStatistics
      statisticsUrl = statisticsUrl.replace('{{name}}', item.name)
--- a/src/permission.js
+++ b/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':
-      //return () => import('@/views/setting/KnowledgeBaseUserDefinedList')
-    //case 'createUserDefinedLibrary':
-    //case 'editUserDefinedLibrary':
-      //return () => import('@/views/setting/KnowledgeBaseForm')
+    // case 'userDefinedLibrary':
+      // return () => import('@/views/setting/KnowledgeBaseUserDefinedList')
+    // case 'createUserDefinedLibrary':
+    // case 'editUserDefinedLibrary':
+      // return () => import('@/views/setting/KnowledgeBaseForm')
    case 'administration':
      return () => import('@/views/administration/Index')
    case 'user':
--- a/src/utils/constants.js
+++ b/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',
--- a/src/views/tag/Tag.vue
+++ b/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)
    },
--- a/src/views/tag/TagForm.vue
+++ b/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-input v-model="editTagForm.entityType" @blur="onBlurTagItem(i)" size="mini"></el-input>
-                        </span>
+                        <el-select v-model="editTagForm.entityType"
+                                   class="form-select__enable"
+                                   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)