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

feat: 搜索框（部分内容,缺全文搜索处理）

Browse Source
This commit is contained in:
chenjinsong
2022-01-25 19:47:08 +08:00
parent f22a1f30eb
commit fe285adfa9
8 changed files with 112 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -61,7 +61,7 @@ export default {
},
methods: {
search (metaList, formatSql) {
this.$emit('search', formatSql)
this.$emit('search', metaList, formatSql)
},
changeMode (mode, data) {
this.searchMode = mode
@@ -77,8 +77,8 @@ export default {
}
},
setup (props) {
// 默认为文本模式 TODO 改回text
let searchMode = ref('tag')
// 默认为文本模式
let searchMode = ref('text')
if (props.defaultMode) {
switch (props.defaultMode) {
case 'tag': {

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

@@ -107,6 +107,7 @@ export default {
// 新增条件
addCondition (meta) {
this.metaList.forEach(m => {
console.info(m)
m.cancelEditing()
})
// 先判断上一个condition是否已填写完整，没有则删除；之后将当前所有meta的内容的isEditing置为false
@@ -132,7 +133,6 @@ export default {
this.$refs.columnSelect.focus()
})
}
console.info(this.metaList)
},
addConnection () {
this.metaList.push(new Meta(connection))
@@ -161,16 +161,16 @@ export default {
})
meta.column.label = selectedColumn.label
meta.column.type = selectedColumn.type
}
setTimeout(() => {
meta.column.isEditing = false
setTimeout(() => {
meta.column.isEditing = false
// 处理操作符
if (!meta.operator.value) {
meta.operator.isEditing = true
meta.operator.show = true
}
}, 200)
// 处理操作符
if (!meta.operator.value) {
meta.operator.isEditing = true
meta.operator.show = true
}
}, 200)
}
},
selectConnection (value, meta) {
meta.isEditing = false
@@ -185,7 +185,11 @@ export default {
setTimeout(() => {
meta.column.isEditing = false
if (meta.isEmpty()) {
this.metaList.splice(index, 1)
if (this.metaList.length > 1) {
this.metaList.splice(index - 1, 2)
} else {
this.metaList.splice(index, 1)
}
}
}, 200)
},
@@ -231,6 +235,7 @@ export default {
changeMode () {
const parser = new SqlParser(this.metaList, this.columnList)
const { metaList, formatSql } = parser.formatMetaList()
console.info(formatSql)
this.metaList = metaList
this.$emit('changeMode', 'text', formatSql)
},

14
src/components/advancedSearch/meta/meta.js
View File

@@ -88,3 +88,17 @@ export default class Meta {
}
}
}
export function cloneMeta (source) {
if (source instanceof Meta) {
const m = new Meta(source.meta)
Object.keys(source).forEach(s => {
m[s] = _.cloneDeep(source[s])
})
return m
} else if (_.isArray(source)) {
return source.map(s => {
return cloneMeta(s)
})
}
}

1
src/components/entities/EntityTop.vue
View File

@@ -71,7 +71,6 @@ export default {
this.$emit('close')
},
filter (row) {
console.info(row.name, this.item)
this.$emit('filter', row.name, this.item)
},
initEntityTop (leftVal, itemVal, data, totalCount) {

21
src/utils/sql-parser.js
View File

@@ -1,5 +1,5 @@
import { GenericSQL, SqlParserVisitor } from 'dt-sql-parser'
import Meta, { connection, condition, columnType } from '@/components/advancedSearch/meta/meta'
import Meta, { connection, condition, columnType, cloneMeta } from '@/components/advancedSearch/meta/meta'
import _ from 'lodash'
// 补全语句，用于解析
const sqlPrev = 'select a from b where '
@@ -34,7 +34,7 @@ export default class SqlParser extends SqlParserVisitor {
this.tempMeta.column.type = columnType.fullText
this.tempMeta.column.name = stringInQuot(this.tempMeta.column.name)
this.tempMeta.column.label = this.tempMeta.column.name
this.metaList.push(_.cloneDeep(this.tempMeta))
this.metaList.push(cloneMeta(this.tempMeta))
}
this.tempMeta = null
return {
@@ -44,12 +44,15 @@ export default class SqlParser extends SqlParserVisitor {
}
formatMetaList () {
const tempMetaList = _.cloneDeep(this.metaList)
const tempMetaList = cloneMeta(this.metaList)
this.metaList = []
tempMetaList.forEach(meta => {
if (meta.meta === condition) {
if (meta.column.type === columnType.fullText) {
this.metaList.push({ ...meta, name: stringInQuot(meta.name), label: stringInQuot(meta.name) })
const m = cloneMeta(meta)
m.column.name = stringInQuot(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 => {
@@ -69,6 +72,8 @@ export default class SqlParser extends SqlParserVisitor {
}
this.metaList.push(meta)
}
} else {
this.metaList.push(meta)
}
})
return {
@@ -81,9 +86,11 @@ export default class SqlParser extends SqlParserVisitor {
let sql = ''
metaList.forEach(meta => {
if (meta.meta === condition) {
sql += meta.column.name
sql += (meta.column.name)
if (meta.column.type !== columnType.fullText) {
sql += `${meta.operator.value}${meta.value.value} `
} else {
sql += ' '
}
}
if (meta.meta === connection) {
@@ -133,7 +140,7 @@ export default class SqlParser extends SqlParserVisitor {
}
}
this.tempMeta.value.show = true
this.metaList.push(_.cloneDeep(this.tempMeta))
this.metaList.push(cloneMeta(this.tempMeta))
}
break
}
@@ -158,7 +165,7 @@ export default class SqlParser extends SqlParserVisitor {
this.tempMeta.column.type = columnType.fullText
this.tempMeta.column.name = stringInQuot(this.tempMeta.column.name)
this.tempMeta.column.label = this.tempMeta.column.name
this.metaList.push(_.cloneDeep(this.tempMeta))
this.metaList.push(cloneMeta(this.tempMeta))
this.tempMeta = null
}
const meta = new Meta(connection)

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

@@ -23,7 +23,7 @@
<div style="display: flex; height: 100%;">
<entity-filter
:filter-data="filterData"
:search-params="searchParams"
:q="q"
:time-filter="timeFilter"
@filter="filter"
></entity-filter>
@@ -124,7 +124,7 @@ import EntityList from '@/views/entityExplorer/entityList/EntityList'
import { entityType, entityFilterType, defaultPageSize } from '@/utils/constants'
import { get } from '@/utils/http'
import { api } from '@/utils/api'
import { getNowTime } from '@/utils/date-util'
import { getNowTime, getSecond } from '@/utils/date-util'
import { ref } from 'vue'
import pagination from '@/components/common/Pagination'
@@ -155,7 +155,6 @@ export default {
entityIpNew: '-',
entityIpActive: '-',
searchParams: {},
showFilter: ['ip', 'app', 'domain'], // ip,domain,app
pageObj: {
pageNo: 1,
@@ -256,6 +255,8 @@ export default {
}
],
listData: [],
q: '',
limitFilterType: true, // 是否限定了filter的类型
listLoading: false/*,
listData: JSON.parse(`[
{
@@ -435,21 +436,49 @@ export default {
dateTimeRangeChange (s, e, v) {
this.timeFilter = { startTime: s, endTime: e, dateRangeValue: v }
},
search (params) {
if (params) {
this.searchParams = params
search (metaList, formatSql) {
if (formatSql) {
this.q = formatSql
} else {
this.q = ''
}
if (!this.showList) {
this.showList = true
}
// 带参数时，只查询对应类型的entity；不带参数时，3种entity都查
if (this.searchParams && Object.keys(this.searchParams).length > 0) {
this.queryFilter({ entityType: 'ip', q: this.searchParams.q, ...this.timeFilter })
this.queryFilter({ entityType: 'app', q: this.searchParams.q, ...this.timeFilter })
this.queryFilter({ entityType: 'domain', q: this.searchParams.q, ...this.timeFilter })
this.queryList({ q: this.searchParams.q, ...this.timeFilter, ...this.pageObj })
this.queryListTotal({ q: this.searchParams.q, ...this.timeFilter })
if (formatSql) {
const entityTypeMeta = metaList.find(meta => {
return meta.column && meta.column === 'entity_type'
})
if (entityTypeMeta) {
let entityType = ''
this.limitFilterType = false
if (entityTypeMeta.value.value === "'ip'") {
this.limitFilterType = true
entityType = 'ip'
} else if (entityTypeMeta.value.value === "'domain'") {
this.limitFilterType = true
entityType = 'domain'
} else if (entityTypeMeta.value.value === "'app'") {
this.limitFilterType = true
entityType = 'app'
} else {
this.limitFilterType = false
}
this.queryFilter({ entityType: entityType, q: formatSql, ...this.timeFilter })
this.queryList({ q: formatSql, ...this.timeFilter, ...this.pageObj })
this.queryListTotal({ q: formatSql, ...this.timeFilter })
} else {
this.limitFilterType = false
this.queryFilter({ entityType: 'ip', q: formatSql, ...this.timeFilter })
this.queryFilter({ entityType: 'domain', q: formatSql, ...this.timeFilter })
this.queryFilter({ entityType: 'app', q: formatSql, ...this.timeFilter })
this.queryList({ q: formatSql, ...this.timeFilter, ...this.pageObj })
this.queryListTotal({ q: formatSql, ...this.timeFilter })
}
} else {
this.limitFilterType = false
this.queryFilter({ entityType: 'ip', ...this.timeFilter })
this.queryFilter({ entityType: 'app', ...this.timeFilter })
this.queryFilter({ entityType: 'domain', ...this.timeFilter })
@@ -494,8 +523,8 @@ export default {
queryFilter (params) {
const queryParams = {
...params,
startTime: parseInt(params.startTime / 1000),
endTime: parseInt(params.endTime / 1000)
startTime: getSecond(params.startTime),
endTime: getSecond(params.endTime)
}
get(api.entityFilter, queryParams).then(response => {
if (response.data.result) {
@@ -505,6 +534,10 @@ export default {
d.value = response.data.result[d.column]
})
this.filterData[0].totalCount = response.data.result.count
if (this.limitFilterType) {
this.cleanFilterData(1)
this.cleanFilterData(2)
}
break
}
case 'app': {
@@ -512,6 +545,10 @@ export default {
d.value = response.data.result[d.column]
})
this.filterData[1].totalCount = response.data.result.count
if (this.limitFilterType) {
this.cleanFilterData(0)
this.cleanFilterData(2)
}
break
}
case 'domain': {
@@ -519,6 +556,10 @@ export default {
d.value = response.data.result[d.column]
})
this.filterData[2].totalCount = response.data.result.count
if (this.limitFilterType) {
this.cleanFilterData(0)
this.cleanFilterData(1)
}
break
}
}
@@ -616,6 +657,12 @@ export default {
this.entityIpActive = response.data.result
}
})
},
cleanFilterData (index) {
this.filterData[index].data.forEach(d => {
d.value = 0
})
this.filterData[index].totalCount = 0
}
},
mounted () {

4
src/views/entityExplorer/EntityFilter.vue
View File

@@ -44,7 +44,7 @@ export default {
},
props: {
filterData: Array,
searchParams: Object,
q: String,
timeFilter: Object
},
data () {
@@ -63,7 +63,7 @@ export default {
const offsetLeft = this.$refs['entityTopTen' + i].offsetLeft
const leftVal = offsetLeft + width
const queryParams = {
q: this.searchParams.q,
q: this.q,
entityType: type,
column: item.topColumn,
top: 10,

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

@@ -177,8 +177,8 @@ export default {
}
},
methods: {
search (q) {
this.$emit('search', { q: q })
search (metaList, formatSql) {
this.$emit('search', metaList, formatSql)
},
addParams (params) {
this.$refs.search.addParams(params)