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

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

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