feat: 搜索框支持in和like

src/assets/css/components/views/detections/detections.scss

@@ -56,3 +56,9 @@
     }
   }
 }
+.filter__more {
+  padding-top: 5px;
+  font-size: 14px;
+  color: $--color-primary;
+  cursor: pointer;
+}

src/components/advancedSearch/Index.vue

@@ -74,10 +74,19 @@ export default {
         this.metaList = data
       }
     },
+    // params: [{column, operator, value}, ...]
     addParams (params) {
       this.$refs.tagMode && this.$refs.tagMode.addParams(params)
       this.$refs.textMode && this.$refs.textMode.addParams(params)
     },
+    removeParams (params) {
+      this.$refs.tagMode && this.$refs.tagMode.removeParams(params)
+      this.$refs.textMode && this.$refs.textMode.removeParams(params)
+    },
+    changeParams (n, o) {
+      this.$refs.tagMode && this.$refs.tagMode.changeParams(n, o)
+      this.$refs.textMode && this.$refs.textMode.changeParams(n, o)
+    },
     setSql (sql) {
       if (this.searchMode === 'text') {
         this.sql = sql

src/components/advancedSearch/TagMode.vue

@@ -241,22 +241,39 @@ export default {
       this.metaList = metaList
       this.$emit('changeMode', 'text', formatSql)
     },
+    // 处理value，例如转换IN的值
+    handleValue (value, column) {
+      const isArray = ['IN', 'NOT IN'].indexOf(column.operator.value) > -1
+      if (isArray) {
+        if (this.$_.isArray(value)) {
+          value = value.map(v => column.type === columnType.string ? stringInQuot(v) : v)
+          return `(${value.join(',')})`
+        } else {
+          return value
+        }
+      } else {
+        return column.type === columnType.string ? stringInQuot(value) : value
+      }
+    },
     addParams (params) {
-      Object.keys(params).forEach(key => {
+      params.forEach(param => {
         const column = this.columnList.find(column => {
-          return column.name === key
+          return column.name === param.column
         })
         const meta = new Meta()
-        meta.column.name = key
+        meta.column.name = param.column
         meta.column.type = column ? column.type : columnType.string
-        meta.column.label = column ? column.label : key
+        meta.column.label = column ? column.label : param.column
         meta.operator.value = '='
         meta.operator.show = true
-        meta.value.value = meta.column.type === columnType.string ? stringInQuot(params[key]) : params[key]
+        meta.value.value = this.handleValue(param.value, column)
         meta.value.show = true
         meta.value.label = meta.value.value
         this.addCondition(meta)
       })
+    },
+    changeParams (params) {
+
     }
   },
   watch: {

src/components/advancedSearch/TextMode.vue

@@ -18,7 +18,7 @@ import 'codemirror/addon/hint/show-hint'
 import 'codemirror/addon/hint/show-hint.css'
 import 'codemirror/addon/display/placeholder'
 import 'codemirror/mode/sql/sql'
-import SqlParser, { stringInQuot } from '@/components/advancedSearch/meta/sql-parser'
+import SqlParser, { stringInQuot, handleOperatorSpace } from '@/components/advancedSearch/meta/sql-parser'
 import CodeMirror from 'codemirror'
 import { toRaw } from 'vue'
 import { columnType } from '@/components/advancedSearch/meta/meta'
@@ -82,12 +82,40 @@ export default {
         this.$emit('changeMode', 'tag', [])
       }
     },
+    // 处理value，例如转换IN的值
+    handleValue (value, column, operator) {
+      const isArray = ['IN', 'NOT IN'].indexOf(operator) > -1
+      if (isArray) {
+        if (this.$_.isArray(value)) {
+          value = value.map(v => column.type === columnType.string ? stringInQuot(v) : v)
+          return `(${value.join(',')})`
+        } else {
+          return value
+        }
+      } else {
+        return column.type === columnType.string ? stringInQuot(value) : value
+      }
+    },
     addParams (params) {
+      let current = this.codeMirror.getValue()
+      params.forEach(param => {
+        const column = this.columnList.find(c => c.name === param.column)
+        current = `${current ? current + ' AND ' : ''}${param.column}${handleOperatorSpace(param.operator)}${this.handleValue(param.value, column, param.operator)}`
+      })
+      toRaw(this.codeMirror).setValue(current)
+    },
+    removeParams () {
+
+    },
+    changeParams (params) {
       Object.keys(params).forEach(key => {
         const column = this.columnList.find(column => {
           return column.name === key
         })
+        console.info(this.columnList, params)
         let current = this.codeMirror.getValue()
+        let selected = column.value
+        // if (selected && selected.length )
         current = `${current ? current + 'AND ' : ''}${key}=${(column.type === columnType.string ? stringInQuot(params[key]) : params[key])}`
         toRaw(this.codeMirror).setValue(current)
       })

src/components/advancedSearch/meta/sql-parser.js

@@ -53,21 +53,24 @@ export default class SqlParser extends SqlParserVisitor {
           m.column.name = meta.column.name
           m.column.label = m.column.name
           this.metaList.push(m)
-        } else if (meta.column.type === columnType.string) {
-          if (_.isArray(meta.value.value)) {
-            meta.value.value = meta.value.value.map(v => {
-              return stringInQuot(v)
-            })
-            meta.value.label = `(${meta.value.value.join(',')})`
-          } else {
-            meta.value.value = stringInQuot(meta.value.value)
-            meta.value.label = stringInQuot(meta.value.value)
-          }
-          this.metaList.push(meta)
         } else {
           if (_.isArray(meta.value.value)) {
-            meta.value.label = `(${meta.value.value.join(',')})`
+            const tempArr = meta.value.value.map(v => {
+              return meta.column.type === columnType.string ? stringInQuot(v.trim()) : v.trim()
+            })
+            meta.value.value = `(${tempArr.join(',')})`
+            meta.value.label = meta.value.value
           } else {
+            const isArray = ['IN', 'NOT IN'].indexOf(meta.operator.value) > -1
+            if (isArray) {
+              const leftBracketIndex = meta.value.value.indexOf('(')
+              const rightBracketIndex = meta.value.value.lastIndexOf(')')
+              let temp = meta.value.value.substring(0, rightBracketIndex)
+              temp = meta.value.value.substring(leftBracketIndex + 1, temp.length)
+              let tempArr = temp.split(',')
+              tempArr = tempArr.map(t => meta.column.type === columnType.string ? stringInQuot(t.trim()) : t.trim())
+              meta.value.value = `(${tempArr.join(',')})`
+            }
             meta.value.label = meta.value.value
           }
           this.metaList.push(meta)
@@ -88,7 +91,7 @@ export default class SqlParser extends SqlParserVisitor {
       if (isFullText) {
         if (meta.meta === condition) {
           if (meta.column.type !== columnType.fullText) {
-            sql += `${meta.column.name}${meta.operator.value}${meta.value.value} `
+            sql += `${meta.column.name}${handleOperatorSpace(meta.operator.value)}${meta.value.value} `
           } else {
             sql += "QUERY('"
             this.columnList.forEach(column => {
@@ -101,7 +104,7 @@ export default class SqlParser extends SqlParserVisitor {
         if (meta.meta === condition) {
           sql += (meta.column.name)
           if (meta.column.type !== columnType.fullText) {
-            sql += `${meta.operator.value}${meta.value.value} `
+            sql += `${handleOperatorSpace(meta.operator.value)}${meta.value.value} `
           } else {
             sql += ' '
           }
@@ -136,23 +139,26 @@ export default class SqlParser extends SqlParserVisitor {
             this.metaList.push(cloneMeta(this.tempMeta))
           }
         } else {
-          if (this.tempMeta.column.type === columnType.string) {
+          if (_.isArray(value)) {
-            if (_.isArray(value)) {
+            const tempArr = value.map(v => {
-              this.tempMeta.value.value = value.map(v => {
+              return this.tempMeta.column.type === columnType.string ? stringInQuot(v.trim()) : v.trim()
-                return stringInQuot(v)
+            })
-              })
+            this.tempMeta.value.value = `(${tempArr.join(',')})`
-              this.tempMeta.value.label = `(${this.tempMeta.value.value.join(',')})`
+            this.tempMeta.value.label = this.tempMeta.value.value
-            } else {
-              this.tempMeta.value.value = stringInQuot(value)
-              this.tempMeta.value.label = stringInQuot(value)
-            }
           } else {
-            this.tempMeta.value.value = value
+            const isArray = ['IN', 'NOT IN'].indexOf(this.tempMeta.operator.value) > -1
-            if (_.isArray(value)) {
+            if (isArray) {
-              this.tempMeta.value.label = `(${this.tempMeta.value.value.join(',')})`
+              const leftBracketIndex = value.indexOf('(')
+              const rightBracketIndex = value.lastIndexOf(')')
+              let temp = value.substring(0, rightBracketIndex)
+              temp = value.substring(leftBracketIndex + 1, temp.length)
+              let tempArr = temp.split(',')
+              tempArr = tempArr.map(t => this.tempMeta.column.type === columnType.string ? stringInQuot(t.trim()) : t.trim())
+              this.tempMeta.value.value = `(${tempArr.join(',')})`
             } else {
-              this.tempMeta.value.label = value
+              this.tempMeta.value.value = value
             }
+            this.tempMeta.value.label = this.tempMeta.value.value
           }
           this.tempMeta.value.show = true
           this.metaList.push(cloneMeta(this.tempMeta))
@@ -168,7 +174,7 @@ export default class SqlParser extends SqlParserVisitor {
       // (not)in和(not)like特殊处理
       case 'like':
       case 'in': {
-        const { column, operator, handleValue } = handleInOrLike(value)
+        const { column, operator, handleValue } = handleInOrLike(value, type)
         this.buildMeta('expression', column)
         this.buildMeta('operator', operator)
         this.buildMeta('expression', handleValue)
@@ -245,6 +251,11 @@ export function stringInQuot (value) {
   const match = `${value}`.match(/^'.+?'$/)
   return match ? value : `'${value}'`
 }
+// IN和LIKE前后加空格
+export function handleOperatorSpace (operator) {
+  return ['IN', 'NOT IN', 'LIKE', 'NOT LIKE'].indexOf(operator) > -1 ? ` ${operator} ` : operator
+}
+// in、like拆分方法；解析后内容挤一堆，如：a in ('b')解析结果是ain('b')，需要拆分
 function handleInOrLike (value, type) {
   let sep
   if (type === 'in') {
@@ -255,7 +266,7 @@ function handleInOrLike (value, type) {
   const notSep = `not${sep}`
   let arr
   let operator
-  if (value.split(notSep).length === 3) {
+  if (value.split(notSep).length === 2) {
     arr = value.split(notSep)
     operator = `NOT ${type.toUpperCase()}`
   } else {
@@ -266,9 +277,9 @@ function handleInOrLike (value, type) {
 
   let v
   if (type === 'in') {
-    v = arr[2].substring(0, arr[2].length - 2).split(',')
+    v = `(${arr[1]}`
   } else if (type === 'like') {
-    v = `'${arr[2]}'`
+    v = `'${arr[1]}`
   }
   return {
     column: columnName,

src/utils/tools.js

@@ -535,3 +535,21 @@ export function copyValue (item) {
 export function getCurrentRoute () {
   return router.currentRoute && router.currentRoute.path
 }
+
+// 判断数据相等
+export function arrayIsEqual (arr1, arr2) {
+  if (arr1 === arr2) { // 如果2个数组对应的指针相同，那么肯定相等，同时也对比一下类型
+    return true
+  } else {
+    if (arr1.length !== arr2.length) {
+      return false
+    } else {
+      for (const i in arr1) { // 循环遍历对比每个位置的元素
+        if (arr1[i] !== arr2[i]) { // 只要出现一次不相等，那么2个数组就不相等
+          return false
+        }
+      } // for循环完成，没有出现不相等的情况，那么2个数组相等
+      return true
+    }
+  }
+}

src/views/detections/DetectionFilter.vue

@@ -9,8 +9,8 @@
         <el-collapse-transition>
           <div class="filter__body" v-show="!filter.collapse">
             <el-checkbox-group v-model="filter.value">
-              <template v-for="d in filter.data" :key="d.value">
+              <template v-for="(d, i) in filter.data" :key="i">
-                <el-checkbox :label="d.value">
+                <el-checkbox :label="d.value" v-if="!filter.showIndex || filter.showIndex >= i">
                   <div class="filter__checkbox-label">
                     <span class="severity-color-block" v-if="filter.column === 'eventSeverity'" :style="`background-color: ${eventSeverityColor[d.value]}`"></span>
                     <span :style="filter.column === 'eventSeverity' ? 'padding-left: 10px' : ''">{{d.label}}</span>
@@ -18,10 +18,10 @@
                 </el-checkbox>
               </template>
             </el-checkbox-group>
+            <div class="filter__more" v-if="filter.showMore" @click="showMore(filter)">{{$t('overall.showMore')}}</div>
           </div>
         </el-collapse-transition>
       </div>
-
     </template>
   </div>
 </template>
@@ -44,6 +44,15 @@ export default {
         info: '#D1BD50'
       }
     }
+  },
+  methods: {
+    /*filterChange (value, filter) {
+      this.$emit('filter', filter.column)
+    },*/
+    showMore (filter) {
+      filter.showIndex && (filter.showIndex += 10)
+      filter.showIndex >= filter.data.length && (filter.showMore = false)
+    }
   }
 }
 </script>

src/views/detections/DetectionSearch.vue

@@ -21,6 +21,7 @@
 
 <script>
 import AdvancedSearch from '@/components/advancedSearch/Index'
+import { humpToLine } from '@/utils/tools'
 export default {
   name: 'DetectionSearch',
   components: {
@@ -38,9 +39,29 @@ export default {
           name: 'security_type',
           type: 'string',
           label: 'Security type'
+        },
+        {
+          name: 'victim_ip',
+          type: 'string',
+          label: 'Victim IP'
+        },
+        {
+          name: 'victim_location_country',
+          type: 'string',
+          label: 'Victim location'
+        },
+        {
+          name: 'offender_ip',
+          type: 'string',
+          label: 'Offender IP'
+        },
+        {
+          name: 'offender_location_country',
+          type: 'string',
+          label: 'Offender location'
         }
       ],
-      operatorList: ['=', '!=', '>', '<', '>=', '<='/*, 'IN', 'NOT IN', 'LIKE', 'NOT LIKE'*/],
+      operatorList: ['=', '!=', '>', '<', '>=', '<=', 'IN', 'NOT IN', 'LIKE', 'NOT LIKE'],
       connectionList: [
         {
           value: 'AND',
@@ -56,6 +77,52 @@ export default {
   methods: {
     search () {
 
+    },
+    changeParams (params) { // params: { column: columnName, oldValue: [...], newValue: [...] }
+      // 向下传递时需要再转换一次param格式为[{column, operator, value}, ...]
+      if (params.oldValue.length === 0 && params.newValue.length === 1) {
+        // 1.参数值数量从0到1，直接addParams
+        const p = {
+          column: humpToLine(params.column),
+          operator: '=',
+          value: params.newValue
+        }
+        this.$refs.search.addParams([p])
+      } else if (params.oldValue.length === 1 && params.newValue.length === 0) {
+        // 2.参数值数量从1到0，直接removeParams
+        const p = {
+          column: humpToLine(params.column),
+          operator: '=',
+          value: params.newValue
+        }
+        this.$refs.search.removeParams([p])
+      } else if (params.oldValue.length === 2 && params.newValue.length === 1) {
+        // 3.参数值数量从多到1，operator由'in'改为'='
+        const oldParam = {
+          column: humpToLine(params.column),
+          operator: 'IN',
+          value: params.oldValue
+        }
+        const newParam = {
+          column: humpToLine(params.column),
+          operator: '=',
+          value: params.newValue
+        }
+        this.$refs.search.changeParams(newParam, oldParam)
+      } else if (params.oldValue.length === 1 && params.newArray.length === 2) {
+        // 4.参数值数量从1到多, operator由'='改为'in'
+        const oldParam = {
+          column: humpToLine(params.column),
+          operator: '=',
+          value: params.oldValue
+        }
+        const newParam = {
+          column: humpToLine(params.column),
+          operator: 'IN',
+          value: params.newValue
+        }
+        this.$refs.search.changeParams(newParam, oldParam)
+      }
     }
   }
 }

src/views/detections/Index.vue

@@ -15,7 +15,7 @@
     <!-- 内容区 -->
     <div class="explorer-container" style="height: calc(100% - 20px); flex-direction: column">
       <div class="detection__event-severity-bar" id="detectionEventSeverityBar"></div>
-        <div style="display: flex; height: 100%;">
+        <div style="display: flex;">
         <detection-filter
             :filter-data="filterData"
             :q="q"
@@ -89,6 +89,7 @@ import ChartEchart from '@/views/charts/charts/ChartEchart'
 import { api } from '@/utils/api'
 import { get } from '@/utils/http'
 
+import { arrayIsEqual } from '@/utils/tools'
 export default {
   name: 'Index',
   components: {
@@ -158,11 +159,113 @@ export default {
           title: this.$t('detections.victimIp'),
           collapse: false,
           value: [],
+          showMore: true,
+          showIndex: 9,
           data: [
             {
               label: '1.2.6.8',
               value: '1.2.6.8',
               count: 50
+            },
+            {
+              label: '1.2.6.9',
+              value: '1.2.6.9',
+              count: 50
+            },
+            {
+              label: '1.2.6.0',
+              value: '1.2.6.0',
+              count: 50
+            },
+            {
+              label: '1.2.6.1',
+              value: '1.2.6.1',
+              count: 50
+            },
+            {
+              label: '1.2.6.2',
+              value: '1.2.6.2',
+              count: 50
+            },
+            {
+              label: '1.2.6.3',
+              value: '1.2.6.3',
+              count: 50
+            },
+            {
+              label: '1.2.6.4',
+              value: '1.2.6.4',
+              count: 50
+            },
+            {
+              label: '1.2.6.5',
+              value: '1.2.6.5',
+              count: 50
+            },
+            {
+              label: '1.2.6.6',
+              value: '1.2.6.6',
+              count: 50
+            },
+            {
+              label: '1.2.6.7',
+              value: '1.2.6.7',
+              count: 50
+            },
+            {
+              label: '1.2.7.8',
+              value: '1.2.7.8',
+              count: 50
+            },
+            {
+              label: '1.2.8.8',
+              value: '1.2.8.8',
+              count: 50
+            },
+            {
+              label: '1.2.9.8',
+              value: '1.2.9.8',
+              count: 50
+            },
+            {
+              label: '1.2.6.18',
+              value: '1.2.6.18',
+              count: 50
+            },
+            {
+              label: '1.2.6.28',
+              value: '1.2.6.28',
+              count: 50
+            },
+            {
+              label: '1.2.6.38',
+              value: '1.2.6.38',
+              count: 50
+            },
+            {
+              label: '1.2.6.48',
+              value: '1.2.6.48',
+              count: 50
+            },
+            {
+              label: '1.2.6.58',
+              value: '1.2.6.58',
+              count: 50
+            },
+            {
+              label: '1.2.6.68',
+              value: '1.2.6.68',
+              count: 50
+            },
+            {
+              label: '1.2.6.78',
+              value: '1.2.6.78',
+              count: 50
+            },
+            {
+              label: '1.2.6.88',
+              value: '1.2.6.88',
+              count: 50
             }
           ] // 从接口动态获取
         },
@@ -170,6 +273,8 @@ export default {
           title: this.$t('detections.victimLocation'),
           collapse: false,
           value: [],
+          showMore: false,
+          showIndex: 9,
           data: [
             {
               label: 'China',
@@ -182,6 +287,8 @@ export default {
           title: this.$t('detections.offenderIp'),
           collapse: false,
           value: [],
+          showMore: false,
+          showIndex: 9,
           data: [
             {
               label: '1.2.6.8',
@@ -194,6 +301,8 @@ export default {
           title: this.$t('detections.offenderLocation'),
           collapse: false,
           value: [],
+          showMore: false,
+          showIndex: 9,
           data: [
             {
               label: 'China',
@@ -433,8 +542,12 @@ export default {
     search () {
 
     },
-    filter () {
+    filter (filterColumn) {
-
+      const params = {}
+      params[filterColumn] = this.filterData.find(f => {
+        return f.column === filterColumn
+      }).value
+      this.$refs.search.changeParams(params)
     },
     pageSize (val) {
       this.pageObj.pageSize = val
@@ -473,7 +586,56 @@ export default {
   watch: {
     timeFilter (n) {
       this.search(this.metaList, this.q)
+    },
+    'filterData.0.value': {
+      deep: true,
+      handler (n, o) {
+        this.$refs.search.changeParams({ column: this.filterData[0].column, oldValue: o, newValue: n })
+      }
+    },
+    'filterData.1.value': {
+      deep: true,
+      handler (n, o) {
+        this.$refs.search.changeParams({ column: this.filterData[1].column, oldValue: o, newValue: n })
+      }
+    },
+    'filterData.2.value': {
+      deep: true,
+      handler (n, o) {
+        this.$refs.search.changeParams({ column: this.filterData[2].column, oldValue: o, newValue: n })
+      }
+    },
+    'filterData.3.value': {
+      deep: true,
+      handler (n, o) {
+        this.$refs.search.changeParams({ column: this.filterData[3].column, oldValue: o, newValue: n })
+      }
+    },
+    'filterData.4.value': {
+      deep: true,
+      handler (n, o) {
+        this.$refs.search.changeParams({ column: this.filterData[4].column, oldValue: o, newValue: n })
+      }
+    },
+    'filterData.5.value': {
+      deep: true,
+      handler (n, o) {
+        this.$refs.search.changeParams({ column: this.filterData[5].column, oldValue: o, newValue: n })
+      }
     }
+    /*filterData: {
+      deep: true,
+      handler (n, o) {
+        console.info(n, o)
+        n.forEach((f, i) => {
+          console.info(f.value, o[i].value)
+          console.info(arrayIsEqual(f.value, o[i].value))
+          if (!arrayIsEqual(f.value, o[i].value)) {
+            this.$refs.search.changeParams({ column: f.column, oldValue: o[i].value, newValue: f.value })
+          }
+        })
+      }
+    }*/
   },
   setup () {
     const dateRangeValue = 60

src/views/entityExplorer/EntityExplorer.vue

@@ -552,9 +552,12 @@ export default {
     },
     /* filter组件内点击后查询 */
     filter (name, topData) {
-      const params = {}
+      const params = {
-      params[topData.topColumn] = name
+        column: topData.topColumn,
-      this.$refs.search.addParams(params)
+        operator: '=',
+        value: name
+      }
+      this.$refs.search.addParams([params])
     },
     /* 查询filter数据 */
     queryFilter (params) {

src/views/entityExplorer/search/ExplorerSearch.vue

@@ -192,7 +192,7 @@ export default {
           label: 'APP risk'
         }
       ],
-      operatorList: ['=', '!=', '>', '<', '>=', '<='/*, 'IN', 'NOT IN', 'LIKE', 'NOT LIKE'*/],
+      operatorList: ['=', '!=', '>', '<', '>=', '<=', 'IN', 'NOT IN', 'LIKE', 'NOT LIKE'],
       connectionList: [
         {
           value: 'AND',
@@ -227,8 +227,8 @@ export default {
         }
         localStorage.setItem(storageKey.entitySearchHistory, JSON.stringify(arr))
       }
+      // 全文搜索处理
       if (metaList && this.$_.isArray(metaList)) {
-        // 全文搜索处理
         const hasFullText = metaList.some(meta => {
           return meta.column && meta.column.type === columnType.fullText
         })