gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 搜索框支持in和like

Browse Source
This commit is contained in:
chenjinsong
2022-02-18 10:07:43 +08:00
parent ea383ee958
commit ca22b4e312
11 changed files with 380 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/css/components/views/detections/detections.scss
View File

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

9
src/components/advancedSearch/Index.vue
View File

@@ -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

27
src/components/advancedSearch/TagMode.vue
View File

@@ -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: {

30
src/components/advancedSearch/TextMode.vue
View File

@@ -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)
})

67
src/components/advancedSearch/meta/sql-parser.js
View File

@@ -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) {
} else {
if (_.isArray(meta.value.value)) {
meta.value.value = meta.value.value.map(v => {
return stringInQuot(v)
const tempArr = meta.value.value.map(v => {
return meta.column.type === columnType.string ? stringInQuot(v.trim()) : v.trim()
})
meta.value.label = `(${meta.value.value.join(',')})`
meta.value.value = `(${tempArr.join(',')})`
meta.value.label = meta.value.value
} else {
meta.value.value = stringInQuot(meta.value.value)
meta.value.label = stringInQuot(meta.value.value)
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(',')})`
}
this.metaList.push(meta)
} else {
if (_.isArray(meta.value.value)) {
meta.value.label = `(${meta.value.value.join(',')})`
} else {
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)) {
this.tempMeta.value.value = value.map(v => {
return stringInQuot(v)
const tempArr = value.map(v => {
return this.tempMeta.column.type === columnType.string ? stringInQuot(v.trim()) : v.trim()
})
this.tempMeta.value.label = `(${this.tempMeta.value.value.join(',')})`
this.tempMeta.value.value = `(${tempArr.join(',')})`
this.tempMeta.value.label = this.tempMeta.value.value
} else {
this.tempMeta.value.value = stringInQuot(value)
this.tempMeta.value.label = stringInQuot(value)
}
const isArray = ['IN', 'NOT IN'].indexOf(this.tempMeta.operator.value) > -1
if (isArray) {
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.value = value
if (_.isArray(value)) {
this.tempMeta.value.label = `(${this.tempMeta.value.value.join(',')})`
} else {
this.tempMeta.value.label = 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,

18
src/utils/tools.js
View File

@@ -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
}
}
}

15
src/views/detections/DetectionFilter.vue
View File

@@ -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">
<el-checkbox :label="d.value">
<template v-for="(d, i) in filter.data" :key="i">
<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>

69
src/views/detections/DetectionSearch.vue
View File

@@ -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)
}
}
}
}

168
src/views/detections/Index.vue
View File

@@ -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,8 +586,57 @@ 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
const { startTime, endTime } = getNowTime(dateRangeValue)

9
src/views/entityExplorer/EntityExplorer.vue
View File

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

4
src/views/entityExplorer/search/ExplorerSearch.vue
View File

@@ -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)) {
// 全文搜索处理
if (metaList && this.$_.isArray(metaList)) {
const hasFullText = metaList.some(meta => {
return meta.column && meta.column.type === columnType.fullText
})