fix: 1、搜索组件有关枚举的添加国际化；2、修复tag模式下切换key，value还保留上次选择的问题；3、修复切换语言环境，搜索参数包含其他语言导致不能识别转换的问题

2023-12-20 18:38:38 +08:00
parent 19160c0da1
commit abab03eb12
10 changed files with 84 additions and 31 deletions
--- a/src/components/advancedSearch/TagMode.vue
+++ b/src/components/advancedSearch/TagMode.vue
@@ -273,6 +273,25 @@ export default {
          if (!meta.operator.value) {
            meta.operator.isEditing = true
            meta.operator.show = true
+          } else {
+            // 切换column，清除上次column选择的value，包含枚举的则删除，in操作符的让类型回归array
+            meta.value.value = ''
+            meta.value.label = ''
+            meta.value.isEditing = true
+            meta.value.show = true
+            const obj = enumerateData.find(d => d.name === meta.column.label)
+            if (obj) {
+              meta.doc = obj
+              if (this.$refs.valuesSelect) {
+                // 触发focus后，select弹窗并没有生效
+                this.$refs.valuesSelect[0].focus(meta)
+              }
+            } else {
+              delete meta.doc
+            }
+            if (meta.operator.value.toLowerCase() === 'in') {
+              meta.column.type = columnType.array
+            }
          }
        }, 200)
      }
--- a/src/components/advancedSearch/meta/parser.js
+++ b/src/components/advancedSearch/meta/parser.js
@@ -4,6 +4,7 @@ import ParserError, { errorDesc, errorTypes } from '@/components/advancedSearch/
 import _ from 'lodash'
 import { ElMessage } from 'element-plus'
 import i18n from '@/i18n'
+import store from '@/store'

 const strReg = {
  // 需要不限制语言，正则过滤中英日俄语出错实现语言都通过。留个记录观察，后续校验
@@ -1500,11 +1501,22 @@ export default class Parser {
        searchList.forEach((item, index) => {
          const obj = this.columnList.find(d => item.indexOf(d.label) > -1)
          if (obj && obj.doc.data) {
-            obj.doc.data.forEach(item1 => {
+            for (let i = 0; i < obj.doc.data.length; i++) {
+              const item1 = obj.doc.data[i]
              if (item.indexOf(item1.code) > -1) {
                searchList[index] = searchList[index].replace(new RegExp(item1.code, 'g'), item1.value)
+                // 匹配到code，终止匹配
+                break
+              } else {
+                // 该操作是避免中文参数切换到英文环境时，code经i18n转为英文，匹配不到中文参数的情况
+                Object.keys(store.state.i18nObj).forEach(lang => {
+                  const i18nCode = store.state.i18nObj[lang][item1.code1]
+                  if (item.indexOf(i18nCode) > -1) {
+                    searchList[index] = searchList[index].replace(new RegExp(i18nCode, 'g'), item1.value)
+                  }
+                })
              }
-            })
+            }
          }
        })
        key = searchList.join(' AND ')
--- a/src/components/advancedSearch/showhint/Hint/HelperInfo.vue
+++ b/src/components/advancedSearch/showhint/Hint/HelperInfo.vue
@@ -82,21 +82,21 @@ export default {

      let searchKey = hintSearch.toUpperCase() || ''
      searchKey = searchKey.trim()
-      if (functionTips[searchKey]) {
-        return functionTips[searchKey].description
-      }
+      // if (functionTips[searchKey]) {
+      //   return functionTips[searchKey].description
+      // }
      if (operatorTips[searchKey]) {
        return operatorTips[searchKey].description
      }
-      if (sqlTips[searchKey]) {
-        return sqlTips[searchKey].description
-      }
+      // if (sqlTips[searchKey]) {
+      //   return sqlTips[searchKey].description
+      // }
      if (filterTips[searchKey]) {
        return filterTips[searchKey].description
      }
-      if (varTips[searchKey]) {
-        return varTips[searchKey].description
-      }
+      // if (varTips[searchKey]) {
+      //   return varTips[searchKey].description
+      // }

      // 完整的匹配关键字
      if (this.getDataset()) {
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -11,6 +11,7 @@ export async function loadI18n () {
    const items = await getI18n()
    if (items) {
      store.commit('loadI18n')
+      store.state.i18nObj = items
      Object.keys(items).forEach(lang => {
        i18n.global.mergeLocaleMessage(lang, items[lang])
      })
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -12,7 +12,8 @@ const store = createStore({
      i18n: false,
      showEntityTypeSelector: false, // 在entity explore页面时，控制header显示实体类型选择框
      from: '', // entity type
-      test: 'jest' // 用于单测的demo
+      test: 'jest', // 用于单测的demo
+      i18nObj: {} // 存放i18n的值，用于搜索组件切换环境时参数包含其他语言时使用的
    }
  },
  getters: {
--- a/src/utils/static-data.js
+++ b/src/utils/static-data.js
@@ -426,8 +426,8 @@ export const enumerateData = [
  {
    name: 'status',
    data: [
-      { code: 'Ended', value: 1 },
-      { code: 'Active', value: 0 }
+      { code: _this.$t('detections.ended'), code1: 'detections.ended', value: 1 },
+      { code: _this.$t('detections.active'), code1: 'detections.active', value: 0 }
    ]
  },
  {
@@ -446,11 +446,11 @@ export const enumerateData = [
  {
    name: 'severity',
    data: [
-      { code: 'critical', value: 'critical' },
-      { code: 'high', value: 'high' },
-      { code: 'Medium', value: 'Medium' },
-      { code: 'low', value: 'low' },
-      { code: 'info', value: 'info' }
+      { code: _this.$t('overall.critical'), code1: 'overall.critical', value: 'critical' },
+      { code: _this.$t('overall.high'), code1: 'overall.high', value: 'high' },
+      { code: _this.$t('overall.medium'), code1: 'overall.medium', value: 'medium' },
+      { code: _this.$t('overall.low'), code1: 'overall.low', value: 'low' },
+      { code: _this.$t('overall.info'), code1: 'overall.info', value: 'info' }
    ]
  }
 ]
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -1,7 +1,7 @@
 import { ElMessageBox, ElMessage } from 'element-plus'
 import i18n from '@/i18n'
 import _ from 'lodash'
-import { storageKey, iso36112, topDomain, echartsFontSize, dbGeoDataTableName, networkTable, dbDrilldownTableConfig, ZH, EN } from '@/utils/constants'
+import { storageKey, iso36112, topDomain, echartsFontSize, dbGeoDataTableName, networkTable, dbDrilldownTableConfig, ZH, EN, securityLevel } from '@/utils/constants'
 import { getIso36112JsonData, getDictList } from '@/utils/api'
 import { format } from 'echarts'
 import router from '@/router'
@@ -1447,3 +1447,19 @@ export const changeTimeByDate = (date) => {
    }
  }
 }
+
+/**
+ * 转换严重程度severity的国际化值
+ */
+export const changeI18nOfSeverity = (severity) => {
+  if (severity) {
+    const obj = securityLevel.find(d => d.value === severity)
+    if (obj) {
+      return i18n.global.t(obj.label)
+    } else {
+      return severity
+    }
+  } else {
+    return '-'
+  }
+}
--- a/src/views/detections/DetectionRow.vue
+++ b/src/views/detections/DetectionRow.vue
@@ -33,7 +33,7 @@
              <div class="basic-info__item" v-if="detection.severity">
                <i class="cn-icon cn-icon-severity-level"></i>
                <span>{{$t('detection.list.security')}}&nbsp;:&nbsp;&nbsp;</span>
-                <span>{{detection.severity || '-'}}</span>
+                <span>{{changeI18nOfSeverity(detection.severity)}}</span>
              </div>
              <div class="basic-info__item" v-if="detection.eventSeverity">
                <i class="cn-icon cn-icon-severity-level"></i>
@@ -116,7 +116,7 @@ import DetectionSecurityEventOverview from '@/views/detections/overview/Detectio
 import DetectionPerformanceEventIpOverview from '@/views/detections/overview/DetectionPerformanceEventIpOverview'
 import DetectionPerformanceEventAppOverview from '@/views/detections/overview/DetectionPerformanceEventAppOverview'
 import DetectionPerformanceEventDomainOverview from '@/views/detections/overview/DetectionPerformanceEventDomainOverview'
-import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import { overwriteUrl, urlParamsHandler, changeI18nOfSeverity } from '@/utils/tools'
 export default {
  name: 'DetectionRow',
  components: {
@@ -189,6 +189,7 @@ export default {
    unitConvert,
    getMillisecond,
    dateFormatByAppearance,
+    changeI18nOfSeverity,
    /* 切换折叠状态 */
    switchCollapse () {
      this.isCollapse = !this.isCollapse
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -133,7 +133,7 @@ import {
 } from '@/views/detections/options/detectionOptions'
 import { api } from '@/utils/api'
 import axios from 'axios'
-import { urlParamsHandler, overwriteUrl, extensionEchartY, reverseSortBy } from '@/utils/tools'
+import { urlParamsHandler, overwriteUrl, extensionEchartY, reverseSortBy, changeI18nOfSeverity } from '@/utils/tools'
 import { useRoute } from 'vue-router'
 import Loading from '@/components/common/Loading'
 import ChartTabs from '@/components/common/ChartTabs'
@@ -313,12 +313,12 @@ export default {
        if (!this.$_.isEmpty(data)) {
          const dataMap = new Map()
          data.forEach(item => {
-            if (item.severity) {
-              if (!dataMap.has(item.severity)) {
+            if (changeI18nOfSeverity(item.severity)) {
+              if (!dataMap.has(changeI18nOfSeverity(item.severity))) {
                const count = [[getMillisecond(parseFloat(item.statTime)), item.count]]
-                dataMap.set(item.severity, count)
+                dataMap.set(changeI18nOfSeverity(item.severity), count)
              } else {
-                dataMap.get(item.severity).push([getMillisecond(parseFloat(item.statTime)), item.count])
+                dataMap.get(changeI18nOfSeverity(item.severity)).push([getMillisecond(parseFloat(item.statTime)), item.count])
              }
            }
          })
@@ -337,6 +337,7 @@ export default {
          })

          eventSeverityTrendOption.series.forEach(serie => {
+            serie.name = changeI18nOfSeverity(serie.name)
            const seriesData = []
            xData.forEach(item => {
              if (dataMap.has(serie.name)) {
@@ -388,11 +389,11 @@ export default {
        }
        this.statisticsSeverityData = data
        if (!this.$_.isEmpty(data)) {
-          this.filterData[this.pageType][1].data = data.map(r => ({ label: r.severity, value: r.severity, count: r.count }))
+          this.filterData[this.pageType][1].data = data.map(r => ({ label: changeI18nOfSeverity(r.severity), value: r.severity, count: r.count }))
          this.isCheckFilterByQ(params, 1)
          const eventSeverityOption = this.$_.cloneDeep(pieForSeverity)
          eventSeverityOption.series[0].data = data.map(d => {
-            return { value: d.count, name: d.severity, itemStyle: { color: getSeverityColor(d.severity) } }
+            return { value: d.count, name: changeI18nOfSeverity(d.severity), itemStyle: { color: getSeverityColor(d.severity) } }
          })
          const chartDom = document.getElementById(`eventSeverityPie${this.pageType}`)
          let detectionChart = echarts.getInstanceByDom(chartDom)
--- a/src/views/detections/overview/DetectionSecurityEventOverview.vue
+++ b/src/views/detections/overview/DetectionSecurityEventOverview.vue
@@ -143,7 +143,7 @@
          <div class="row__content row__content--link" v-if="$_.get(detection, 'malware.reference')">
            {{ detection.malware.reference }}
          </div>
-          <div class="row__content">-</div>
+          <div class="row__content" v-else>-</div>
        </div>
      </template>
      <template v-else-if="detection.darkweb">
@@ -315,7 +315,7 @@
                  class="cn-icon cn-icon-alert-level"
                  :style="`color:${eventSeverityColor[event.severity]}`"
                ></i>
-                <span>{{ event.severity }}</span>
+                <span>{{ changeI18nOfSeverity(event.severity) }}</span>
              </div>
              <div class="timeline__security-type">{{ event.eventType }}</div>
              <div class="timeline__start-time">{{ dateFormatByAppearance(parseInt(event.startTime)) }}</div>
@@ -360,6 +360,7 @@ import { getMillisecond, dateFormatByAppearance } from '@/utils/date-util'
 import { eventSeverityColor, unitTypes, countryNameIdMapping, riskLevelMapping, riskLevelColor, riskLevelColor1 } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 import _ from 'lodash'
+import { changeI18nOfSeverity } from '@/utils/tools'
 export default {
  name: 'DetectionOverview',
  props: {
@@ -440,6 +441,7 @@ export default {
  methods: {
    getMillisecond,
    dateFormatByAppearance,
+    changeI18nOfSeverity,
    /** 初始化实体详情 */
    initEntityDetail () {
      // 调接口查询攻击者和受害者IP、Domain、APP的更多信息；