CN-1416 fix: 增加一些字符的国际化映射

src/components/table/detection/GeneralSettings.vue

@@ -47,7 +47,7 @@
           <el-option
               v-for="item in categoryList"
               :key="item.value"
-              :label="item.label"
+              :label="$t(item.label)"
               :value="item.value"
           />
         </el-select>
@@ -59,7 +59,7 @@
           <el-option
               v-for="item in eventTypeList"
               :key="item.value"
-              :label="item.label"
+              :label="$t(item.label)"
               :value="item.value"
           />
         </el-select>
@@ -109,9 +109,8 @@
 </template>
 
 <script>
-import { detectionRuleType, storageKey } from '@/utils/constants'
+import { detectionRuleType, storageKey, detectionUnitList } from '@/utils/constants'
 import { switchStatus } from '@/utils/tools'
-import { detectionUnitList } from '@/utils/static-data'
 
 export default {
   name: 'GeneralSettings',

src/components/table/detection/RuleDefinition.vue

@@ -169,7 +169,7 @@
             <el-option
                 v-for="item in sourceList"
                 :key="item.value"
-                :label="item.label"
+                :label="$t(item.label)"
                 :value="item.value"
             />
           </el-select>
@@ -199,7 +199,7 @@
             <el-option
                 v-for="item in levelList"
                 :key="item.label"
-                :label="item.label"
+                :label="$t(item.label)"
                 :value="item.value"
             />
           </el-select>
@@ -215,8 +215,7 @@
 
 <script>
 import HistoryTopKeys from '@/components/table/detection/HistoryTopKeys'
-import { eventSeverityColor, detectionRuleType } from '@/utils/constants'
+import { eventSeverityColor, detectionRuleType, detectionUnitList, securityLevel } from '@/utils/constants'
-import { detectionUnitList } from '@/utils/static-data'
 import axios from 'axios'
 import _ from 'lodash'
 import { api } from '@/utils/api'
@@ -372,7 +371,7 @@ export default {
   methods: {
     initData () {
       this.sourceList = detectionUnitList.sourceList || []
-      this.levelList = detectionUnitList.levelList || []
+      this.levelList = securityLevel || []
       // threshold模式还没确定，所以数据暂时静态数据，后续根据需要修改
       this.conditionList = detectionUnitList.conditionList || []
       this.metricList = detectionUnitList.metricList || []

src/utils/static-data.js

@@ -221,27 +221,27 @@ export const dataForDnsTrafficLine = {
 export const dataForNpmEventsHeader = {
   chartData: [
     {
-      eventSeverity: 'critical',
+      eventSeverity: 'overall.critical',
       count: '-',
       index: 0
     },
     {
-      eventSeverity: 'high',
+      eventSeverity: 'overall.high',
       count: '-',
       index: 1
     },
     {
-      eventSeverity: 'medium',
+      eventSeverity: 'overall.medium',
       count: '-',
       index: 2
     },
     {
-      eventSeverity: 'low',
+      eventSeverity: 'overall.low',
       count: '-',
       index: 3
     },
     {
-      eventSeverity: 'info',
+      eventSeverity: 'overall.info',
       count: '-',
       index: 4
     }
@@ -430,59 +430,3 @@ export const connectionList = [
   //   label: 'OR'
   // }
 ]
-
-export const detectionUnitList = {
-  statusList: [
-    { status: 1 },
-    { status: 0 }
-  ],
-  categoryList: [
-    { value: 'security_event', label: 'Security Event' }/* ,
-    { value: 'performance_event', label: 'Performance Event' } */
-  ],
-  eventTypeList: [
-    { value: 'Initial Access', label: 'Initial Access' },
-    { value: 'Command and Control', label: 'Command and Control' },
-    { value: 'Credential Access', label: 'Credential Access' },
-    { value: 'Lateral Movement', label: 'Lateral Movement' },
-    { value: 'Collection', label: 'Collection' },
-    { value: 'Impact', label: 'Impact' },
-    { value: 'Anonymity', label: 'Anonymity' },
-    { value: 'Regulatory Risk', label: 'Regulatory Risk' }
-  ],
-  sourceList: [
-    { value: 'session_record', label: 'Session Record' }
-  ],
-  levelList: [
-    { value: 'critical', label: 'Critical' },
-    { value: 'high', label: 'High' },
-    { value: 'medium', label: 'Medium' },
-    { value: 'low', label: 'Low' },
-    { value: 'info', label: 'Info' }
-  ],
-  metricList: [
-    { value: 'tcp_lostlen_ratio', label: 'Bits/second' },
-    { value: 's2c_byte_retrans_ratio', label: 'Packets/second' },
-    { value: 's2c_byte_retrans_ratio1', label: 'Sessions/second' }
-  ],
-  conditionList: [
-    { value: 'than', label: 'Greater Than' },
-    { value: 'less', label: 'Greater Less' },
-    { value: 'equal', label: 'Greater Equal' }
-  ],
-  libraryList: [
-    { value: 'library name', knowledgeId: 7, label: 'Library name' },
-    { value: 'library name1', knowledgeId: 8, label: 'Library name1' },
-    { value: 'library name2', knowledgeId: 9, label: 'Library name2' }
-  ],
-  intervalList: [
-    { value: 'hours', label: 'hours' },
-    { value: 'minutes', label: 'minutes' },
-    { value: 'seconds', label: 'seconds' }
-  ],
-  intervalListCN: [
-    { value: 'hours', label: '小时' },
-    { value: 'minutes', label: '分钟' },
-    { value: 'seconds', label: '秒' }
-  ]
-}

src/views/charts2/charts/npm/NpmEventsHeader.vue

@@ -3,7 +3,7 @@
   <div class="npm-header-body" v-for="(item, index) in chartData" :key=index>
     <div class="npm-header-body-severity">
       <div class="npm-header-body-severity-icon" :class="item.eventSeverity" :test-id="`icon${index}`"></div>
-      <div class="npm-header-body-severity-value" :test-id="`severity${index}`">{{item.eventSeverity}}</div>
+      <div class="npm-header-body-severity-value" :test-id="`severity${index}`">{{ $t(item.eventSeverity) }}</div>
     </div>
     <chart-error v-if="showError" tooltip :content="errorMsg" />
     <div v-else class="npm-header-body-total" :test-id="`total${index}`">{{item.count}}</div>
@@ -45,7 +45,7 @@ export default {
         endTime: this.timeFilter && this.timeFilter.endTime ? getSecond(this.timeFilter.endTime) : '',
         type: this.type
       }
-      /*this.toggleLoading(true)
+      /* this.toggleLoading(true)
       axios.get(api.npm.events.list, { params: params }).then(response => {
         const res = response.data
         if (response.status === 200) {
@@ -69,7 +69,7 @@ export default {
         this.errorMsg = this.errorMsgHandler(e)
       }).finally(() => {
         this.toggleLoading(false)
-      })*/
+      }) */
       this.toggleLoading(false)
     }
   },

src/views/detections/detectionPolicies/Index.vue

@@ -203,7 +203,6 @@ export default {
         }).catch(() => {
         })
       } else {
-        // todo 调用接口删除
         this.toggleLoading(true)
         axios.delete(api.detection.delete + '?ruleIds=' + ids).then(response => {
           if (response.status === 200) {

src/views/detections/detectionPolicies/PolicyDrawer.vue

@@ -31,7 +31,7 @@
 
             <div class="drawer-basic-function">
               <div class="detection-drawer-title">{{ $t('config.user.source') }}</div>
-              <div class="basic-function-value">{{ $_.get(detailData, 'category', '-') || '-' }}</div>
+              <div class="basic-function-value">{{ changeCategory(detailData.category) }}</div>
             </div>
 
             <div v-if="detailData.ruleType==='indicator_match'">
@@ -44,7 +44,7 @@
                 <div class="detection-drawer-title">{{ $t('detection.level') }}</div>
                 <div class="detection-drawer-title">
                   <div class="detection__icon" :style="`background-color: ${eventSeverityColor[detailData.ruleConfigObj.level]}`"></div>
-                  <div class="basic-function-value">{{ $_.get(detailData, 'ruleConfigObj.level', '-') || '-' }}</div>
+                  <div class="basic-function-value">{{ changeSecurityLevel(detailData.ruleConfigObj) }}</div>
                 </div>
               </div>
             </div>
@@ -82,11 +82,11 @@
     <div class="detection-drawer-collapse" style="margin: 20px 0">
       <el-collapse v-model="activeTrigger">
         <el-collapse-item :title="$t('detection.create.trigger')" name="trigger">
-          <div class="drawer-collapse-content">
+          <div class="drawer-collapse-content" v-if="language==='en'">
             <div class="drawer-collapse-trigger">
               Triggered when conditions occur at least
               <span style="color: #046ECA">
-                {{ $_.get(detailData, 'ruleTriggerObj.atLeast', '-') || '-' }} time
+                {{ atLeast }} {{ times }}
               </span> in
               <span style="color: #046ECA">
                 {{ getNumberFromStr($_.get(detailData, 'ruleTriggerObj.interval', '0')) || '-' }}
@@ -102,6 +102,26 @@
               </div>
             </div>
           </div>
+          <div class="drawer-collapse-content" v-if="language==='cn'">
+            <div class="drawer-collapse-trigger">
+              当条件为
+              <span style="color: #046ECA">
+                {{ getNumberFromStr($_.get(detailData, 'ruleTriggerObj.interval', '0')) || '-' }}
+                {{ changeValueToLabel(detailData.ruleTriggerObj) }}
+              </span>内至少出现
+              <span style="color: #046ECA">
+                {{ $_.get(detailData, 'ruleTriggerObj.atLeast', '-') || '-' }} 次
+              </span>时触发
+            </div>
+
+            <div class="drawer-basic-function">
+              <div class="detection-drawer-title">评估频率</div>
+              <div class="drawer-trigger-minutes">
+                {{ getNumberFromStr($_.get(detailData, 'ruleTriggerObj.resetInterval', '0')) || '-' }}
+                {{ changeValueToLabel(detailData.ruleTriggerObj) }}
+              </div>
+            </div>
+          </div>
         </el-collapse-item>
       </el-collapse>
     </div>
@@ -111,7 +131,7 @@
 
 <script>
 import { switchStatus, toUpperCaseByString } from '@/utils/tools'
-import { eventSeverityColor } from '@/utils/constants'
+import { detectionUnitList, eventSeverityColor, securityLevel, storageKey } from '@/utils/constants'
 import axios from 'axios'
 import { api } from '@/utils/api'
 
@@ -128,7 +148,10 @@ export default {
       activeTrigger: 'trigger',
       detailData: {},
       eventSeverityColor,
-      severityList: []
+      severityList: [],
+      language: 'en',
+      atLeast: 0,
+      times: 'time'
     }
   },
   watch: {
@@ -142,6 +165,9 @@ export default {
       }
     }
   },
+  mounted () {
+    this.language = localStorage.getItem(storageKey.language) || 'en'
+  },
   methods: {
     switchStatus,
     toUpperCaseByString,
@@ -159,8 +185,13 @@ export default {
 
       axios.get(`${api.detection.detail}/${this.drawerInfo.ruleId}`).then(res => {
         if (res.status === 200) {
-          const data = res.data.data
+          this.detailData = res.data.data
-          this.detailData = data
+          this.atLeast = this.$_.get(this.detailData, 'ruleTriggerObj.atLeast', '-')
+          if (!isNaN(this.atLeast) && this.atLeast > 1) {
+            this.times = 'times'
+          } else {
+            this.times = 'time'
+          }
         }
       }).catch(err => {
         console.error(err)
@@ -168,6 +199,50 @@ export default {
     },
     getNumberFromStr (str) {
       return str.match(/\d+(\.\d+)?/g)[0]
+    },
+    changeCategory (value) {
+      if (value) {
+        const obj = detectionUnitList.categoryList.find(d => d.value === value)
+        let label = value
+        if (obj) {
+          label = this.$t(obj.label)
+        }
+        return label
+      } else {
+        return '-'
+      }
+    },
+    changeSecurityLevel (config) {
+      if (config) {
+        if (config.level) {
+          const obj = securityLevel.find(d => d.value === config.level)
+          let label = config.level
+          if (obj) {
+            label = this.$t(obj.label)
+          }
+          return label
+        } else {
+          return '-'
+        }
+      } else {
+        return '-'
+      }
+    },
+    changeValueToLabel (config) {
+      if (config) {
+        if (config.intervalVal) {
+          const obj = detectionUnitList.intervalListCN.find(d => d.value === config.intervalVal)
+          let label = config.intervalVal
+          if (obj) {
+            label = this.$t(obj.label)
+          }
+          return label
+        } else {
+          return '-'
+        }
+      } else {
+        return '-'
+      }
     }
   }
 }

src/views/detections/detectionPolicies/PolicyFilter.vue

@@ -20,7 +20,7 @@
         <div class="new-filter-content-content">
           <el-checkbox-group v-model="checkCategory" @change="onChangeCategory">
             <el-checkbox v-for="item in categoryList" :key="item.name" class="new-filter-content-checkbox" :label="item.name">
-              {{ item.name }}
+              {{ item.label }}
             </el-checkbox>
           </el-checkbox-group>
         </div>
@@ -31,7 +31,7 @@
         <div class="new-filter-content-content">
           <el-checkbox-group v-model="checkEventType" @change="onChangeCategory" style="display: flex;flex-direction: column">
             <el-checkbox v-for="item in eventTypeList" :key="item.name" class="new-filter-content-checkbox" :label="item.name">
-              {{ item.name }}
+              {{ item.label }}
             </el-checkbox>
           </el-checkbox-group>
         </div>
@@ -44,6 +44,7 @@
 import axios from 'axios'
 import { api } from '@/utils/api'
 import { switchStatus } from '@/utils/tools'
+import { detectionUnitList } from '@/utils/constants'
 
 export default {
   name: 'DetectionFilter',
@@ -81,13 +82,25 @@ export default {
           }
 
           if (data.categoryList) {
-            this.categoryList = data.categoryList
+            this.categoryList = []
+            data.categoryList.forEach(item => {
+              const obj = detectionUnitList.categoryList.find(d => d.value === item.name)
+              if (obj) {
+                this.categoryList.push({ ...item, label: this.$t(obj.label) })
+              }
+            })
           } else {
             this.categoryList = []
           }
 
           if (data.eventTypeList) {
-            this.eventTypeList = data.eventTypeList
+            this.eventTypeList = []
+            data.eventTypeList.forEach(item => {
+              const obj = detectionUnitList.eventTypeList.find(d => d.value === item.name)
+              if (obj) {
+                this.eventTypeList.push({ ...item, label: this.$t(obj.label) })
+              }
+            })
           } else {
             this.eventTypeList = []
           }

src/views/detections/detectionPolicies/PolicyTable.vue

@@ -53,6 +53,12 @@
             {{ $t(switchStatus(scope.row[item.prop])) }}
           </div>
         </template>
+        <template v-else-if="item.prop === 'category'">
+          {{ changeCategory(scope.row[item.prop]) }}
+        </template>
+        <template v-else-if="item.prop === 'eventType'">
+          {{ changeEventType(scope.row[item.prop]) }}
+        </template>
         <template v-else-if="item.prop === 'description'">
           <div style="padding-right: 20px">{{ scope.row[item.prop] }}</div>
         </template>
@@ -78,6 +84,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'
 
 export default {
   name: 'DetectionTable',
@@ -128,15 +135,13 @@ export default {
           show: true
         },
         {
-          // label: this.$t('config.user.createTime'),
+          label: this.$t('detection.create.dimensions'),
-          label: 'Dimensions',
           prop: 'dimensions',
           minWidth: 204,
           show: true
         },
         {
-          // label: this.$t('config.user.createTime'),
+          label: this.$t('detection.library'),
-          label: 'Library',
           prop: 'library',
           minWidth: 204,
           show: true
@@ -166,6 +171,26 @@ export default {
     switchStatus,
     rowDoubleClick (data) {
       this.$emit('rowDoubleClick', data)
+    },
+    changeCategory (value) {
+      if (value) {
+        const obj = detectionUnitList.categoryList.find(d => d.value === value)
+        let label = value
+        if (obj) {
+          label = this.$t(obj.label)
+        }
+        return label
+      }
+    },
+    changeEventType (value) {
+      if (value) {
+        const obj = detectionUnitList.eventTypeList.find(d => d.value === value)
+        let label = value
+        if (obj) {
+          label = this.$t(obj.label)
+        }
+        return label
+      }
     }
   }
 }

src/views/detections/overview/DetectionSecurityEventOverview.vue

@@ -75,8 +75,8 @@
           <div class="row__content" v-if="$_.get(basicInfo, 'domainInfo.category.reputationLevel')">
             <div
                 class="row__tag row__tag__level"
-                :style="`background-color:${eventSeverityColor[basicInfo.domainInfo.category.reputationLevel]}`">
+                :style="`background-color:${riskLevelColor1[basicInfo.domainInfo.category.reputationLevel]}`">
-              {{ basicInfo.domainInfo.category.reputationLevel }}
+              {{ reputationLevel(basicInfo.domainInfo.category.reputationLevel) || '-' }}
             </div>
           </div>
           <div class="row__content" v-else>-</div>
@@ -346,7 +346,7 @@
 import axios from 'axios'
 import { api } from '@/utils/api'
 import { getMillisecond, dateFormatByAppearance } from '@/utils/date-util'
-import { eventSeverityColor, unitTypes, countryNameIdMapping, riskLevelMapping, riskLevelColor } from '@/utils/constants'
+import { eventSeverityColor, unitTypes, countryNameIdMapping, riskLevelMapping, riskLevelColor, riskLevelColor1 } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 import _ from 'lodash'
 export default {
@@ -358,6 +358,7 @@ export default {
     return {
       eventSeverityColor,
       riskLevelColor,
+      riskLevelColor1,
       basicInfo: {},
       events: [],
       reference: 'https://attack.mitre.org',
@@ -391,7 +392,15 @@ export default {
         const m = riskLevelMapping.find(mapping => {
           return mapping.value == level
         })
-        return (m && m.name) || level
+        return (m && this.$t(m.label)) || level
+      }
+    },
+    reputationLevel () {
+      return function (level) {
+        const m = riskLevelMapping.find(mapping => {
+          return mapping.name == level
+        })
+        return (m && this.$t(m.label)) || level
       }
     },
     locationRegion (info) {