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

CN-296 feat: 左侧筛选和搜索框交互、样式完成；数据未对接完成

Browse Source
This commit is contained in:
chenjinsong
2022-02-18 18:09:44 +08:00
parent c5b6121df1
commit d8014f859f
8 changed files with 165 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -79,13 +79,15 @@ export default {
this.$refs.tagMode && this.$refs.tagMode.addParams(params)
this.$refs.textMode && this.$refs.textMode.addParams(params)
},
// params: [{column, operator, value}, ...]
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)
// params: [{ newParam: {column, operator, value }, oldParam: { column, operator, value }], ...]
changeParams (params) {
this.$refs.tagMode && this.$refs.tagMode.changeParams(params)
this.$refs.textMode && this.$refs.textMode.changeParams(params)
},
setSql (sql) {
if (this.searchMode === 'text') {

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

@@ -242,8 +242,8 @@ export default {
this.$emit('changeMode', 'text', formatSql)
},
// 处理value，例如转换IN的值
handleValue (value, column) {
const isArray = ['IN', 'NOT IN'].indexOf(column.operator.value) > -1
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)
@@ -266,14 +266,39 @@ export default {
meta.column.label = column ? column.label : param.column
meta.operator.value = '='
meta.operator.show = true
meta.value.value = this.handleValue(param.value, column)
meta.value.value = this.handleValue(param.value, column, column.operator)
meta.value.show = true
meta.value.label = meta.value.value
this.addCondition(meta)
})
},
changeParams (params) {
params.forEach(param => {
const oldColumn = this.columnList.find(column => {
return column.name === param.oldParam.column
})
const newColumn = this.columnList.find(column => {
return column.name === param.newParam.column
})
const meta = this.metaList.find(m => m.column.name === oldColumn.name && m.operator.value === param.oldParam.operator && m.value.value === this.handleValue(param.oldParam.value, oldColumn, param.oldParam.operator))
if (meta) {
meta.column.name = newColumn.name
meta.column.type = newColumn.type
meta.column.label = newColumn.label ? newColumn.label : newColumn.name
meta.operator.value = param.newParam.operator
meta.value.value = this.handleValue(param.newParam.value, newColumn, param.newParam.operator)
meta.value.label = meta.value.value
}
})
},
removeParams (params) {
params.forEach(param => {
const column = this.columnList.find(c => {
return c.name === param.column
})
const metaIndex = this.metaList.findIndex(m => m.column.name === param.column && m.operator.value === param.operator && m.value.value === this.handleValue(param.value, column, param.operator))
this.metaList.splice(metaIndex, 1)
})
}
},
watch: {

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

@@ -104,21 +104,27 @@ export default {
})
toRaw(this.codeMirror).setValue(current)
},
removeParams () {
removeParams (params) {
let current = this.codeMirror.getValue()
params.forEach(param => {
const column = this.columnList.find(c => c.name === param.column)
// 将对应内容替换为空串
const sqlPiece = `${param.column}${handleOperatorSpace(param.operator)}${this.handleValue(param.value, column, param.operator)}`.trim()
current = current.replace(sqlPiece, '')
})
toRaw(this.codeMirror).setValue(current)
},
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)
params.forEach(param => {
const oldColumn = this.columnList.find(c => c.name === param.oldParam.column)
const newColumn = this.columnList.find(c => c.name === param.newParam.column)
// 将oldParam内容替换为newParam
const oldSqlPiece = `${param.oldParam.column}${handleOperatorSpace(param.oldParam.operator)}${this.handleValue(param.oldParam.value, oldColumn, param.oldParam.operator)}`.trim()
const newSqlPiece = `${param.newParam.column}${handleOperatorSpace(param.newParam.operator)}${this.handleValue(param.newParam.value, newColumn, param.newParam.operator)}`.trim()
current = current.replace(oldSqlPiece, newSqlPiece)
})
toRaw(this.codeMirror).setValue(current)
}
},
watch: {

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

@@ -70,6 +70,8 @@ export default class SqlParser extends SqlParserVisitor {
let tempArr = temp.split(',')
tempArr = tempArr.map(t => meta.column.type === columnType.string ? stringInQuot(t.trim()) : t.trim())
meta.value.value = `(${tempArr.join(',')})`
} else {
meta.value.value = meta.column.type === columnType.string ? stringInQuot(meta.value.value.trim()) : meta.value.value.trim()
}
meta.value.label = meta.value.value
}
@@ -156,7 +158,7 @@ export default class SqlParser extends SqlParserVisitor {
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
this.tempMeta.value.value = this.tempMeta.column.type === columnType.string ? stringInQuot(value.trim()) : value.trim()
}
this.tempMeta.value.label = this.tempMeta.value.value
}

11
src/utils/api.js
View File

@@ -73,10 +73,13 @@ export const api = {
entityIpDetailSecurity: '/interface/entity/detail/overview/ip/security',
entityIpRelatedServerDomain: '/interface/entity/detail/overview/ip/relatedDomain',
entityIpRelatedServerApp: '/interface/entity/detail/overview/ip/relatedApp',
//detection
detectionEventSeverity:'/interface/detection/filter/severity',
detectionAttackType:'/interface/detection/filter/attackType',
detectionOffenderIp:'/interface/detection/filter/offenderIp',
// detection
detectionEventSeverity: '/interface/detection/filter/severity',
detectionAttackType: '/interface/detection/filter/attackType',
detectionOffenderIp: '/interface/detection/filter/offenderIp',
detectionOffenderLocation: '/interface/detection/filter/offenderLocation',
detectionVictimIp: '/interface/detection/filter/victimIp',
detectionVictimLocation: '/interface/detection/filter/victimLocation',
detectionSeverity:'/interface/detection/filter/severity',
detectionListBasic:'/interface/detection/list/basic'
}

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

@@ -1,7 +1,7 @@
<template>
<div class="detection-filter-case">
<template v-for="(filter, index) in filterData" :key="index">
<div class="detection-filter">
<div class="detection-filter" v-show="filter.data.length > 0">
<div class="filter__header" @click="filter.collapse = !filter.collapse">
<i class="el-icon-arrow-right" :class="{ 'arrow-rotate': !filter.collapse }"></i>
<span>{{filter.title}}</span>

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

@@ -7,7 +7,7 @@
:column-list="columnList"
:operator-list="operatorList"
:connection-list="connectionList"
:full-text="true"
:full-text="false"
class="advanced-search--show-list"
@search="search"
></advanced-search>
@@ -75,8 +75,8 @@ export default {
}
},
methods: {
search () {
search (metaList, formatSql) {
this.$emit('search', metaList, formatSql)
},
changeParams (params) { // params: { column: columnName, oldValue: [...], newValue: [...] }
// 向下传递时需要再转换一次param格式为[{column, operator, value}, ...]
@@ -93,7 +93,7 @@ export default {
const p = {
column: humpToLine(params.column),
operator: '=',
value: params.newValue
value: params.oldValue
}
this.$refs.search.removeParams([p])
} else if (params.oldValue.length === 2 && params.newValue.length === 1) {
@@ -108,8 +108,8 @@ export default {
operator: '=',
value: params.newValue
}
this.$refs.search.changeParams(newParam, oldParam)
} else if (params.oldValue.length === 1 && params.newArray.length === 2) {
this.$refs.search.changeParams([{ newParam, oldParam }])
} else if (params.oldValue.length === 1 && params.newValue.length === 2) {
// 4.参数值数量从1到多, operator由'='改为'in'
const oldParam = {
column: humpToLine(params.column),
@@ -121,7 +121,20 @@ export default {
operator: 'IN',
value: params.newValue
}
this.$refs.search.changeParams(newParam, oldParam)
this.$refs.search.changeParams([{ newParam, oldParam }])
} else {
// 5.参数值数量从多到多，加1或者减1
const oldParam = {
column: humpToLine(params.column),
operator: 'IN',
value: params.oldValue
}
const newParam = {
column: humpToLine(params.column),
operator: 'IN',
value: params.newValue
}
this.$refs.search.changeParams([{ newParam, oldParam }])
}
}
}

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

@@ -81,7 +81,7 @@ import DetectionFilter from '@/views/detections/DetectionFilter'
import DetectionList from '@/views/detections/DetectionList'
import Pagination from '@/components/common/Pagination'
import { defaultPageSize } from '@/utils/constants'
import { getNowTime } from '@/utils/date-util'
import {getNowTime, getSecond} from '@/utils/date-util'
import { ref } from 'vue'
import * as echarts from 'echarts'
import { multipleBarOption,pieForSeverity,activeAttackBar,getAttackColor,getSeverityColor } from '@/views/detections/options/detectionOptions'
@@ -89,7 +89,6 @@ 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: {
@@ -145,6 +144,7 @@ export default {
},
{
title: this.$t('detections.securityType'),
column: 'securityType',
collapse: false,
value: [],
data: [
@@ -157,6 +157,7 @@ export default {
},
{
title: this.$t('detections.victimIp'),
column: 'victimIp',
collapse: false,
value: [],
showMore: true,
@@ -271,6 +272,7 @@ export default {
},
{
title: this.$t('detections.victimLocation'),
column: 'victimLocation',
collapse: false,
value: [],
showMore: false,
@@ -285,6 +287,7 @@ export default {
},
{
title: this.$t('detections.offenderIp'),
column: 'offenderIp',
collapse: false,
value: [],
showMore: false,
@@ -299,6 +302,7 @@ export default {
},
{
title: this.$t('detections.offenderLocation'),
column: 'offenderLocation',
collapse: false,
value: [],
showMore: false,
@@ -331,8 +335,9 @@ export default {
this.eventSeverityOption = this.$_.cloneDeep(multipleBarOption)
const queryParams = {
...this.timeFilter,
q:this.q,
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
q: this.q
}
get(api.detectionEventSeverity, queryParams).then(response => {
response = {
@@ -384,10 +389,11 @@ export default {
this.severityPerOption = this.$_.cloneDeep(pieForSeverity)
const queryParams = {
...this.timeFilter,
q:this.q,
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
q: this.q
}
get(api.detectionSeverity, queryParams).then(response => {
get(api.detectionEventSeverity, queryParams).then(response => {
response = {
"code": 200,
"success": true,
@@ -415,6 +421,7 @@ export default {
}
}
if (response.code === 200) {
this.filterData[0].data = response.data.result.map(r => ({ label: r.eventSeverity, value: r.eventSeverity, count: r.count }))
this.severityPerData = response.data.result.map(d => {
return { value: d.count, name: d.eventSeverity,itemStyle:{color:getSeverityColor(d.eventSeverity)}}
})
@@ -432,8 +439,9 @@ export default {
this.categoryPerOption = this.$_.cloneDeep(pieForSeverity)
const queryParams = {
...this.timeFilter,
q:this.q,
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
q: this.q
}
get(api.detectionAttackType, queryParams).then(response => {
response = {
@@ -484,8 +492,9 @@ export default {
this.activeAttackOption = this.$_.cloneDeep(activeAttackBar)
const queryParams = {
...this.timeFilter,
q:this.q,
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
q: this.q
}
get(api.detectionOffenderIp, queryParams).then(response => {
response = {
@@ -515,6 +524,7 @@ export default {
}
}
if (response.code === 200) {
this.filterData[4].data = response.data.result.map(r => ({ label: r.offenderIp, value: r.offenderIp, count: r.count }))
this.activeAttackData = response.data.result.map(d => {
return [d.count,d.offenderIp]
})
@@ -526,6 +536,42 @@ export default {
})
})
},
initVictimIp () {
const queryParams = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
q: this.q
}
get(api.detectionVictimIp, queryParams).then(response => {
if (response.data && response.data.result) {
this.filterData[2].data = response.data.result.map(r => ({ label: r.victimIp, value: r.victimIp, count: r.count }))
}
})
},
initVictimLocation () {
const queryParams = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
q: this.q
}
get(api.detectionVictimLocation, queryParams).then(response => {
if (response.data && response.data.result) {
this.filterData[3].data = response.data.result.map(r => ({ label: r.victimLocationCountry, value: r.victimLocationCountry, count: r.count }))
}
})
},
initOffenderLocation () {
const queryParams = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
q: this.q
}
get(api.detectionOffenderLocation, queryParams).then(response => {
if (response.data && response.data.result) {
this.filterData[5].data = response.data.result.map(r => ({ label: r.victimLocationCountry, value: r.victimLocationCountry, count: r.count }))
}
})
},
initListData(){
const queryParams = {
...this.timeFilter,
@@ -609,7 +655,30 @@ export default {
dateTimeRangeChange (s, e, v) {
this.timeFilter = { startTime: s, endTime: e, dateRangeValue: v }
},
search () {
search (metaList, formatSql) {
if (formatSql) {
this.q = formatSql
this.metaList = metaList
} else {
this.q = ''
this.metaList = []
}
this.queryFilter()
this.queryList()
this.queryListTotal()
},
queryFilter () {
this.initSeverityPerData()
this.initCategoryPerData()
this.initActiveAttackData()
this.initOffenderLocation()
this.initVictimIp()
this.initVictimLocation()
},
queryList () {
},
queryListTotal () {
},
filter (filterColumn) {
@@ -694,19 +763,6 @@ export default {
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