CN-1479 fix: 搜索组件text和tag模式交互添加枚举

src/components/advancedSearch/TagMode.vue

@@ -40,7 +40,25 @@
         <div v-if="meta.operator.value === 'has'" class="condition__operator" style="color: #000C18">({{meta.column.label}},</div>
         <!-- 值 -->
         <div class="condition__value">
-          <div v-if="meta.value.isEditing">
+          <div  v-if="meta.value.isEditing && meta.doc">
+            <el-select
+                allow-create
+                filterable
+                size="mini"
+                v-model="meta.value.value"
+                ref="columnValue"
+                :placeholder="meta.value.value || ' '"
+                @change="(value) => selectValue(value, meta)"
+            >
+              <el-option
+                  v-for="(code, i) in meta.doc.data"
+                  :key="i"
+                  :label="code.code"
+                  :value="code.code"
+              ></el-option>
+            </el-select>
+          </div>
+          <div v-if="meta.value.isEditing && !meta.doc">
             <!--避免blur事件和keyup.enter重复执行-->
             <el-input
                 ref="valueInput"
@@ -119,6 +137,7 @@ import _ from 'lodash'
 import { handleErrorTip } from '@/components/advancedSearch/meta/error'
 import Parser, { stringInQuot } from '@/components/advancedSearch/meta/parser'
 import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import { enumerateData } from '@/utils/static-data'
 export default {
   name: 'TagMode',
   props: {
@@ -222,6 +241,15 @@ export default {
         }, 200)
       }
     },
+    selectValue (value, meta) {
+      const isWrapped = this.isSingleQuoteWrapping(value)
+      meta.value.value = isWrapped && meta.column.type === columnType.string ? value : `'${value}'`
+      meta.value.label = isWrapped && meta.column.type === columnType.string ? value : `'${value}'`
+      setTimeout(() => {
+        meta.column.isEditing = false
+        meta.value.isEditing = false
+      }, 100)
+    },
     selectConnection (value, meta) {
       meta.isEditing = false
     },
@@ -279,6 +307,10 @@ export default {
       // 处理搜索值
       meta.value.isEditing = true
       meta.value.show = true
+      const obj = enumerateData.find(d => d.name === meta.column.label)
+      if (obj) {
+        meta.doc = obj
+      }
       // 若是in或not in，column的type要改成array，否则是string
       if (operator.toLowerCase().indexOf('in') > -1) {
         meta.column.type = columnType.array
@@ -292,9 +324,16 @@ export default {
         }
       }
       this.$nextTick(() => {
-        const selectList = this.$refs.valueInput
+        if (meta.doc) {
-        if (selectList && selectList.length > 0) {
+          const selectList = this.$refs.columnValue
-          this.$refs.valueInput[selectList.length - 1].focus() // 在for循环里生成的dom，所以是数组
+          if (selectList && selectList.length > 0) {
+            this.$refs.columnValue[selectList.length - 1].focus() // 在for循环里生成的dom，所以是数组
+          }
+        } else {
+          const selectList = this.$refs.valueInput
+          if (selectList && selectList.length > 0) {
+            this.$refs.valueInput[selectList.length - 1].focus() // 在for循环里生成的dom，所以是数组
+          }
         }
       })
     },

src/components/advancedSearch/TextMode.vue

@@ -322,7 +322,7 @@ export default {
       }
     },
     _initComponent () {
-      getDataset(this, this.queryParams || {}).then((dataset, dataDisposeFun) => {
+      getDataset(this, this.queryParams || {}, this.columnList).then((dataset, dataDisposeFun) => {
         this.dataset = Object.freeze(dataset)
       }).catch(err => {
         console.error(err)

src/components/advancedSearch/showhint/Hint/HelperInfo.vue

@@ -75,7 +75,7 @@ export default {
         const fields = this.getDataset().sourceData.fields
         const obj = fields.find(d => d.label === hintSearch)
         if (obj) {
-          hintSearch = obj.name
+          hintSearch = obj.label
         }
       }
 

src/components/advancedSearch/showhint/packages/getDataset.js

@@ -221,7 +221,9 @@ export class Dataset {
     keywords = (keywords.trim && keywords.trim()) || keywords
     const fieldInfo = {}
     const matchItem = this.sourceData.filtersList.find((item) => {
-      const itemName = item.name && item.name.toLowerCase()
+      // const itemName = item.name && item.name.toLowerCase()
+      // 左侧面板的options值，即枚举的值
+      const itemName = item.label && item.label.toLowerCase()
       return keywords.toLowerCase() === itemName
     })
     if (!matchItem) {
@@ -276,9 +278,9 @@ export class Dataset {
 }
 
 // 获取数据集
-export function getDataset (component, params) {
+export function getDataset (component, params, list) {
   return new Promise((resolve, reject) => {
-    const schemeInstance = new Scheme(component, params)
+    const schemeInstance = new Scheme(component, params, list)
     schemeInstance.getFormatedData((schemeData) => {
       const dataset = new Dataset(schemeData)
       resolve(dataset, () => {

src/components/advancedSearch/showhint/packages/service/Scheme.js

@@ -1,14 +1,74 @@
-// import vm from '@/main.js'
 import { getSchemaInfo } from '@/utils/timeQueryApi'
-import { cacheData } from '@/components/advancedSearch/showhint/packages/service/mockData'
-// import {cacheData} from "@/components/common/search/packages/service/oldMockData";
 
 export class Scheme {
-  constructor (context, params) {
+  constructor (context, params, list) {
     // 先从缓存获取数据
     this.queryparams = params
     this.context = context
+    this.columnList = list
     this.schemeData = null
+    this.myCacheData = {
+      doc: {
+        functions: {
+          aggregation: [],
+          date: [],
+          operator: [
+            {
+              name: '=',
+              label: '=',
+              function: 'expr = value'
+            },
+            {
+              name: 'has',
+              label: 'HAS',
+              function: 'has(expr, value)'
+            },
+            {
+              name: 'in',
+              label: 'IN',
+              function: 'expr in (values)'
+            },
+            {
+              name: 'like',
+              label: 'LIKE',
+              function: 'expr like value'
+            }
+          ]
+        },
+        schema_query: {
+          references: {
+            aggregation: [
+              {
+                type: 'int',
+                functions: ''
+              },
+              {
+                type: 'string',
+                functions: ''
+              },
+              {
+                type: 'array',
+                functions: ''
+              }
+            ],
+            operator: [
+              {
+                type: 'int',
+                functions: '=,in,like,has'
+              },
+              {
+                type: 'string',
+                functions: '=,in,like,has'
+              },
+              {
+                type: 'array',
+                functions: '=,in,like,has'
+              }
+            ]
+          }
+        }
+      }
+    }
   }
 
   filterQueryData (list) {
@@ -76,41 +136,12 @@ export class Scheme {
     return formatedData
   }
 
-  getRemoteOptions () {
-    // query   查询地址  key 关键字(唯一标识)  value 值就是label 用于展示
-    this.schemeData.filtersList.forEach((item) => {
-      if (item.doc && item.doc.data) {
-        return
-      }
-      if (item.doc && item.doc.dict_location) {
-        const { path, key, value } = item.doc.dict_location
-        return vm.$get(path, { pageSize: 500, pageNo: 1 }).then((res) => {
-          if (res.code === 200) {
-            const dataList = res.data.list
-            if (res.data.total > 500) {
-              // 超出500条 直接不处理了 ,没缓存
-              return
-            }
-            localStorage.setItem(`${this.context.$route.path}_${item.name}`, JSON.stringify(res.data.list))
-            const data = dataList.map(item => {
-              return {
-                code: item[key],
-                value: item[value]
-              }
-            })
-            item.doc.data = data
-          }
-        }).catch((err) => {
-          console.error(err)
-        })
-      }
-    })
-  }
-
   async getFormatedData (callback) {
-    const cacheDat = cacheData
+    const cacheData = this.myCacheData
-    if (cacheDat) {
+    cacheData.fields = this.columnList
-      this.schemeData = this.formatSchemaData(cacheDat)
+
+    if (this.columnList) {
+      this.schemeData = this.formatSchemaData(cacheData)
       // this.getRemoteOptions()
       callback && callback(this.schemeData)
       return

src/utils/static-data.js

@@ -343,7 +343,7 @@ const securityEvent = [
   {
     name: 'event_type',
     type: 'string',
-    label: 'event_type',
+    label: 'eventType',
     doc: {
       constraints: {
         operator_functions: '=,in,like'
@@ -353,7 +353,7 @@ const securityEvent = [
   {
     name: 'event_name',
     type: 'string',
-    label: 'event_name',
+    label: 'eventName',
     doc: {
       constraints: {
         operator_functions: '=,in,like'
@@ -373,7 +373,7 @@ const securityEvent = [
   {
     name: 'offender_ip',
     type: 'string',
-    label: 'offender Ip',
+    label: 'offenderIp',
     doc: {
       constraints: {
         operator_functions: '=,in,like'
@@ -383,7 +383,7 @@ const securityEvent = [
   {
     name: 'victim_ip',
     type: 'string',
-    label: 'victim Ip',
+    label: 'victimIp',
     doc: {
       constraints: {
         operator_functions: '=,in,like'
@@ -409,6 +409,49 @@ const securityEvent = [
         operator_functions: '=,in,like'
       }
     }
+  },
+  {
+    name: 'status',
+    label: 'status',
+    type: 'string',
+    doc: {
+      constraints: {
+        operator_functions: '=,in'
+      }
+    }
+  }
+]
+
+export const enumerateData = [
+  {
+    name: 'status',
+    data: [
+      { code: 'Ended', value: 1 },
+      { code: 'Active', value: 0 }
+    ]
+  },
+  {
+    name: 'eventType',
+    data: [
+      { code: 'Initial Access', value: 'Initial Access' },
+      { code: 'Command and Control', value: 'Command and Control' },
+      { code: 'Credential Access', value: 'Credential Access' },
+      { code: 'Lateral Movement', value: 'Lateral Movement' },
+      { code: 'Collection', value: 'Collection' },
+      { code: 'Impact', value: 'Impact' },
+      { code: 'Anonymity', value: 'Anonymity' },
+      { code: 'Regulatory Risk', value: 'Regulatory Risk' }
+    ]
+  },
+  {
+    name: 'severity',
+    data: [
+      { code: 'critical', value: 'critical' },
+      { code: 'high', value: 'high' },
+      { code: 'Medium', value: 'Medium' },
+      { code: 'low', value: 'low' },
+      { code: 'info', value: 'info' }
+    ]
   }
 ]
 
@@ -422,6 +465,12 @@ if (schema) {
     securityEventMetadata = JSON.parse(schema).securityEventMetadata.searchColumns
   }
 }
+securityEventMetadata.forEach(item => {
+  const obj = enumerateData.find(d => d.name === item.label)
+  if (obj) {
+    item.doc.data = obj.data
+  }
+})
 export const schemaDetectionSecurity = securityEventMetadata
 
 export const operatorList = ['=', '!=', /* '>', '<', '>=', '<=', */'IN', 'NOT IN', 'LIKE', 'NOT LIKE']

src/views/detections/DetectionSearch.vue

@@ -10,6 +10,7 @@
             class="advanced-search--show-list"
             :full-text="true"
             :show-list="showList"
+            showHint
             @search="search"
         ></advanced-search>
       </div>