CN-1391 fix: 修复一系列bug

This commit is contained in:
chenjinsong
2023-10-22 18:29:34 +08:00
parent 7d34b8388c
commit 40d43acb6c
11 changed files with 269 additions and 145 deletions

View File

@@ -4,6 +4,18 @@
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
} }
.detections {
.entity__pagination{
bottom: 9px;
height: 40px;
width: 100%;
}
.detections__container {
display: flex;
flex-direction: column;
padding-bottom: 20px;
}
}
.detection__list { .detection__list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@@ -43,7 +43,7 @@ export function rTime (date) {
} }
// 日期转换为时间戳 // 日期转换为时间戳
export function toTime (date) { export function toTime (date) {
return new Date(date).getTime() return new Date(parseFloat(date)).getTime()
} }
// 时间格式转换 // 时间格式转换
export function dateFormat (date, format = 'YYYY-MM-DD HH:mm:ss') { export function dateFormat (date, format = 'YYYY-MM-DD HH:mm:ss') {

View File

@@ -1,8 +1,7 @@
<template> <template>
<div class="detection-filter-case"> <div class="detection-filter-case">
<div class="no-data" v-if="isNoData">{{ $t('npm.noData') }}</div>
<div class="new-detection-filter-title">{{$t('detections.filters')}}</div> <div class="new-detection-filter-title">{{$t('detections.filters')}}</div>
<div class="no-data" v-if="isNoData">{{ $t('npm.noData') }}</div>
<template v-for="(filter, index) in filterData" :key="index"> <template v-for="(filter, index) in filterData" :key="index">
<div class="detection-filter" v-show="filter.data.length > 0"> <div class="detection-filter" v-show="filter.data.length > 0">
<div class="filter__header" @click="filter.collapse = !filter.collapse"> <div class="filter__header" @click="filter.collapse = !filter.collapse">

View File

@@ -68,13 +68,14 @@ export default {
this.listData.forEach((item, i) => { this.listData.forEach((item, i) => {
this.myListData.push(this.$_.cloneDeep(item)) this.myListData.push(this.$_.cloneDeep(item))
if (item.eventInfoObj) { if (item.eventInfoObj) {
axios.get(`${api.detection.securityEvent.detail}/${item.eventInfoObj.ioc_type}/resource=${item.eventInfoObj.ioc_value}`).then(res => { axios.get(`${api.detection.securityEvent.detail}/${item.eventInfoObj.ioc_type}?resource=${item.eventInfoObj.ioc_value}`).then(res => {
if (res.status === 200) { if (res.status === 200) {
this.myListData[i].malwareName = res.data.data.malware.malwareName this.myListData[i].malwareName = (this.$_.get(res, 'data.data.malware.malwareName', '-')) || '-'
} else { } else {
this.myListData[i].malwareName = '-' this.myListData[i].malwareName = '-'
} }
}).catch(e => { }).catch(e => {
console.error(e)
this.myListData[i].malwareName = '-' this.myListData[i].malwareName = '-'
}) })
} }
@@ -107,9 +108,11 @@ export default {
immediate: true, immediate: true,
deep: true, deep: true,
handler (n) { handler (n) {
console.info(n)
if (!n || n.length === 0) { if (!n || n.length === 0) {
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
this.noData = true this.noData = true
this.myListData = []
}, 500) }, 500)
} else { } else {
clearTimeout(this.timeout) clearTimeout(this.timeout)

View File

@@ -66,9 +66,9 @@
<span>{{$t('overall.duration')}}&nbsp;:&nbsp;&nbsp;</span> <span>{{$t('overall.duration')}}&nbsp;:&nbsp;&nbsp;</span>
<span> <span>
{{ detection.matchTimes || '-'}} {{ $t('detection.list.times') }} / {{ detection.matchTimes || '-'}} {{ $t('detection.list.times') }} /
{{unitConvert(detection.durationS, 'time', 's', null, 0).join(' ') || '-'}} {{unitConvert(parseInt(detection.durationS), 'time', 's', null, 0).join(' ') || '-'}}
</span> </span>
<div v-if="parseInt(detection.status)===0" class="margin-l-10 detection-row-active">Active</div> <div v-if="parseInt(detection.status) === 0" class="margin-l-10 detection-row-active">{{$t('detections.active')}}</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -21,7 +21,6 @@
<script> <script>
import AdvancedSearch from '@/components/advancedSearch/Index' import AdvancedSearch from '@/components/advancedSearch/Index'
import { humpToLine } from '@/utils/tools'
import { schemaDetectionSecurity } from '@/utils/static-data' import { schemaDetectionSecurity } from '@/utils/static-data'
export default { export default {
name: 'DetectionSearch', name: 'DetectionSearch',
@@ -120,7 +119,7 @@ export default {
if (params.oldValue.length === 0 && params.newValue.length === 1) { if (params.oldValue.length === 0 && params.newValue.length === 1) {
// 1.参数值数量从0到1直接addParams // 1.参数值数量从0到1直接addParams
const p = { const p = {
column: humpToLine(params.column), column: params.column,
operator: '=', operator: '=',
value: params.newValue value: params.newValue
} }
@@ -128,7 +127,7 @@ export default {
} else if (params.oldValue.length === 1 && params.newValue.length === 0) { } else if (params.oldValue.length === 1 && params.newValue.length === 0) {
// 2.参数值数量从1到0直接removeParams // 2.参数值数量从1到0直接removeParams
const p = { const p = {
column: humpToLine(params.column), column: params.column,
operator: '=', operator: '=',
value: params.oldValue value: params.oldValue
} }
@@ -136,12 +135,12 @@ export default {
} else if (params.oldValue.length === 2 && params.newValue.length === 1) { } else if (params.oldValue.length === 2 && params.newValue.length === 1) {
// 3.参数值数量从多到1operator由'in'改为'=' // 3.参数值数量从多到1operator由'in'改为'='
const oldParam = { const oldParam = {
column: humpToLine(params.column), column: params.column,
operator: 'IN', operator: 'IN',
value: params.oldValue value: params.oldValue
} }
const newParam = { const newParam = {
column: humpToLine(params.column), column: params.column,
operator: '=', operator: '=',
value: params.newValue value: params.newValue
} }
@@ -149,12 +148,12 @@ export default {
} else if (params.oldValue.length === 1 && params.newValue.length === 2) { } else if (params.oldValue.length === 1 && params.newValue.length === 2) {
// 4.参数值数量从1到多, operator由'='改为'in' // 4.参数值数量从1到多, operator由'='改为'in'
const oldParam = { const oldParam = {
column: humpToLine(params.column), column: params.column,
operator: '=', operator: '=',
value: params.oldValue value: params.oldValue
} }
const newParam = { const newParam = {
column: humpToLine(params.column), column: params.column,
operator: 'IN', operator: 'IN',
value: params.newValue value: params.newValue
} }
@@ -162,12 +161,12 @@ export default {
} else { } else {
// 5.参数值数量从多到多加1或者减1 // 5.参数值数量从多到多加1或者减1
const oldParam = { const oldParam = {
column: humpToLine(params.column), column: params.column,
operator: 'IN', operator: 'IN',
value: params.oldValue value: params.oldValue
} }
const newParam = { const newParam = {
column: humpToLine(params.column), column: params.column,
operator: 'IN', operator: 'IN',
value: params.newValue value: params.newValue
} }

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="entity-explorer entity-explorer--show-list"> <div class="entity-explorer entity-explorer--show-list detections">
<!-- 顶部工具栏在列表页显示 --> <!-- 顶部工具栏在列表页显示 -->
<div class="explorer-top-tools explorer-detection-top-tools"> <div class="explorer-top-tools explorer-detection-top-tools">
<div class="explorer-top-tools-title">{{$t('overall.detections')}}</div> <div class="explorer-top-tools-title">{{$t('overall.detections')}}</div>
@@ -33,7 +33,7 @@
@search="search" @search="search"
></detection-search> ></detection-search>
<!-- 内容区 --> <!-- 内容区 -->
<div class="explorer-container" style="height: calc(100% - 20px);flex-direction: column"> <div class="detections__container">
<loading :loading="loading"></loading> <loading :loading="loading"></loading>
<template v-if="isEventSeverityNoData"> <template v-if="isEventSeverityNoData">
<div class="no-data detection__event-severity-bar" >{{ $t('npm.noData') }}</div> <div class="no-data detection__event-severity-bar" >{{ $t('npm.noData') }}</div>
@@ -121,7 +121,7 @@ import DetectionFilter from '@/views/detections/DetectionFilter'
import DetectionList from '@/views/detections/DetectionList' import DetectionList from '@/views/detections/DetectionList'
import Pagination from '@/components/common/Pagination' import Pagination from '@/components/common/Pagination'
import { defaultPageSize, detectionPageType } from '@/utils/constants' import { defaultPageSize, detectionPageType } from '@/utils/constants'
import { getNowTime, getSecond, toTime } from '@/utils/date-util' import { getNowTime, getSecond, getMillisecond } from '@/utils/date-util'
import { ref, shallowRef } from 'vue' import { ref, shallowRef } from 'vue'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { import {
@@ -131,12 +131,13 @@ import {
multipleBarOption, multipleBarOption,
pieForSeverity pieForSeverity
} from '@/views/detections/options/detectionOptions' } from '@/views/detections/options/detectionOptions'
import { api, getData } from '@/utils/api' import { api } from '@/utils/api'
import axios from 'axios' import axios from 'axios'
import { extensionEchartY, reverseSortBy, switchStatus } from '@/utils/tools' import { urlParamsHandler, overwriteUrl, extensionEchartY, reverseSortBy } from '@/utils/tools'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import Loading from '@/components/common/Loading' import Loading from '@/components/common/Loading'
import ChartTabs from '@/components/common/ChartTabs' import ChartTabs from '@/components/common/ChartTabs'
import { useStore } from 'vuex'
export default { export default {
name: 'Index', name: 'Index',
@@ -199,7 +200,7 @@ export default {
}, },
{ {
title: this.$t('detections.eventType'), title: this.$t('detections.eventType'),
column: 'event_type', column: 'eventType',
topColumn: 'event_type', topColumn: 'event_type',
collapse: false, collapse: false,
value: [], value: [],
@@ -207,7 +208,7 @@ export default {
}, },
{ {
title: this.$t('detections.victimIp'), title: this.$t('detections.victimIp'),
column: 'victim_ip', column: 'victimIP',
topColumn: 'victim_ip', topColumn: 'victim_ip',
collapse: false, collapse: false,
value: [], value: [],
@@ -232,7 +233,7 @@ export default {
// }, // },
{ {
title: this.$t('detections.offenderIp'), title: this.$t('detections.offenderIp'),
column: 'offender_ip', column: 'offenderIP',
topColumn: 'offender_ip', topColumn: 'offender_ip',
collapse: false, collapse: false,
value: [], value: [],
@@ -290,25 +291,40 @@ export default {
}, },
methods: { methods: {
initStatusData (params) { initStatusData (params) {
getData(api.detection[this.pageType].statusStatistics, params).then(data => { axios.get(api.detection[this.pageType].statusStatistics, { params }).then(res => {
this.filterData[this.pageType][0].data = data.map(r => ({ label: this.$t(switchStatus(r.status)), value: r.status, count: r.count })) if (res.status === 200) {
const data = res.data.data.result
this.filterData[this.pageType][0].data = data.map(r => {
let label = ''
if (r.status === '0') {
label = this.$t('detections.active')
} else if (r.status === '1') {
label = this.$t('detections.ended')
}
return { label, value: r.status, count: r.count }
})
}
}).catch(e => {
console.error(e)
this.filterData[this.pageType][0].data = []
this.errorMsgHandler(e)
}) })
}, },
/** 初始化顶部大柱状图 */ /** 初始化顶部大柱状图 */
initEventSeverityTrendData (params) { initEventSeverityTrendData (params) {
this.loading = true this.loading = true
// getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => { axios.get(api.detection[this.pageType].timeDistribution, { params }).then(res => {
getData(api.detection[this.pageType].timeDistribution, params).then(data => { const data = res.data.data.result
this.eventSeverityData = data this.eventSeverityData = data
if (!this.$_.isEmpty(data)) { if (!this.$_.isEmpty(data)) {
const dataMap = new Map() const dataMap = new Map()
data.forEach(item => { data.forEach(item => {
if (item.severity) { if (item.severity) {
if (!dataMap.has(item.severity)) { if (!dataMap.has(item.severity)) {
const count = [[toTime(item.statTime), item.count]] const count = [[getMillisecond(parseFloat(item.statTime)), item.count]]
dataMap.set(item.severity, count) dataMap.set(item.severity, count)
} else { } else {
dataMap.get(item.severity).push([toTime(item.statTime), item.count]) dataMap.get(item.severity).push([getMillisecond(parseFloat(item.statTime)), item.count])
} }
} }
}) })
@@ -347,12 +363,6 @@ export default {
serie.data = seriesData serie.data = seriesData
}) })
// eventSeverityTrendOption.xAxis.data = dataMap.get('info').map(v => rTime(v[0]))
eventSeverityTrendOption.xAxis = [{
type: 'time',
splitNumber: 8
}]
let detectionChart = echarts.getInstanceByDom(chartDom) let detectionChart = echarts.getInstanceByDom(chartDom)
if (detectionChart) { if (detectionChart) {
echarts.dispose(detectionChart) echarts.dispose(detectionChart)
@@ -364,8 +374,9 @@ export default {
} else { } else {
// this.isEventSeverityNoData = true // this.isEventSeverityNoData = true
} }
}).catch(error => { }).catch(e => {
console.log(error) console.error(e)
this.errorMsgHandler(e)
}).finally(() => { }).finally(() => {
this.$nextTick(() => { this.$nextTick(() => {
this.loading = false this.loading = false
@@ -374,8 +385,8 @@ export default {
}, },
/** 初始化左侧事件严重等级和第一个小饼图 */ /** 初始化左侧事件严重等级和第一个小饼图 */
initEventSeverityData (params) { initEventSeverityData (params) {
// getData(api.detection[this.pageType].eventSeverity, params).then(data => { axios.get(api.detection[this.pageType].severityStatistics, { params }).then(res => {
getData(api.detection[this.pageType].severityStatistics, params).then(data => { const data = res.data.data.result
this.statisticsSeverityData = data this.statisticsSeverityData = data
if (!this.$_.isEmpty(data)) { if (!this.$_.isEmpty(data)) {
this.filterData[this.pageType][1].data = data.map(r => ({ label: r.severity, value: r.severity, count: r.count })) this.filterData[this.pageType][1].data = data.map(r => ({ label: r.severity, value: r.severity, count: r.count }))
@@ -401,12 +412,15 @@ export default {
} }
}) })
} }
}).catch(error => { }).catch(e => {
console.log(error) console.error(e)
this.filterData[this.pageType][1].data = []
this.errorMsgHandler(e)
}) })
}, },
initEventTypeData (params) { initEventTypeData (params) {
getData(api.detection[this.pageType].eventType, params).then(data => { axios.get(api.detection[this.pageType].eventType, { params }).then(res => {
const data = res.data.data.result
this.statisticsCategoryData = data this.statisticsCategoryData = data
if (!this.$_.isEmpty(data)) { if (!this.$_.isEmpty(data)) {
this.filterData[this.pageType][2].data = data.map(r => ({ this.filterData[this.pageType][2].data = data.map(r => ({
@@ -433,14 +447,16 @@ export default {
vm.filterData.performanceEvent[1].value = vm.triggerFilterDataValue(vm.filterData.performanceEvent[1].value, e.data.name) vm.filterData.performanceEvent[1].value = vm.triggerFilterDataValue(vm.filterData.performanceEvent[1].value, e.data.name)
}) })
} }
}).catch(error => { }).catch(e => {
console.log(error) console.error(e)
this.filterData[this.pageType][2].data = []
this.errorMsgHandler(e)
}) })
}, },
/** 第二个饼图和左侧filter的eventType */ /** 第二个饼图和左侧filter的eventType */
initSecurityTypeData (params) { initSecurityTypeData (params) {
// getData(api.detection[this.pageType].securityType, params).then(data => { axios.get(api.detection[this.pageType].eventTypeStatistics, { params }).then(res => {
getData(api.detection[this.pageType].eventTypeStatistics, params).then(data => { const data = res.data.data.result
this.statisticsCategoryData = data this.statisticsCategoryData = data
if (!this.$_.isEmpty(data)) { if (!this.$_.isEmpty(data)) {
this.filterData[this.pageType][2].data = data.map(r => ({ this.filterData[this.pageType][2].data = data.map(r => ({
@@ -467,14 +483,16 @@ export default {
vm.filterData.securityEvent[1].value = vm.triggerFilterDataValue(vm.filterData.securityEvent[1].value, e.data.name) vm.filterData.securityEvent[1].value = vm.triggerFilterDataValue(vm.filterData.securityEvent[1].value, e.data.name)
}) })
} }
}).catch(error => { }).catch(e => {
console.log(error) console.error(e)
this.filterData[this.pageType][2].data = []
this.errorMsgHandler(e)
}) })
}, },
/** 横向柱状图和左侧filter的offenderIp */ /** 横向柱状图和左侧filter的offenderIp */
initOffenderIpData (params) { initOffenderIpData (params) {
// getData(api.detection[this.pageType].offenderIp, params).then(data => { axios.get(api.detection[this.pageType].offenderIpStatistics, { params }).then(res => {
getData(api.detection[this.pageType].offenderIpStatistics, params).then(data => { let data = res.data.data.result
this.statisticsActiveAttackData = data this.statisticsActiveAttackData = data
if (!this.$_.isEmpty(data)) { if (!this.$_.isEmpty(data)) {
this.filterData[this.pageType][4].data = data.map(r => ({ this.filterData[this.pageType][4].data = data.map(r => ({
@@ -507,44 +525,33 @@ export default {
vm.filterData.securityEvent[4].value = vm.triggerFilterDataValue(vm.filterData.securityEvent[4].value, e.data[1]) vm.filterData.securityEvent[4].value = vm.triggerFilterDataValue(vm.filterData.securityEvent[4].value, e.data[1])
}) })
} }
}).catch(error => { }).catch(e => {
console.log(error) console.error(e)
this.filterData[this.pageType][4].data = []
this.filterData[this.pageType][4].showMore = false
this.filterData[this.pageType][4].showIndex = 9
this.errorMsgHandler(e)
}) })
}, },
initVictimIpData (params) { initVictimIpData (params) {
// getData(api.detection[this.pageType].victimIp, params).then(data => { axios.get(api.detection[this.pageType].victimIpStatistics, { params }).then(res => {
getData(api.detection[this.pageType].victimIpStatistics, params).then(data => { const data = res.data.data.result
this.filterData[this.pageType][3].data = data.map(r => ({ label: r.victimIp, value: r.victimIp, count: r.count })) this.filterData[this.pageType][3].data = data.map(r => ({ label: r.victimIp, value: r.victimIp, count: r.count }))
const { showMore, showIndex } = this.computeFilterPage(this.filterData[this.pageType][3].data) const { showMore, showIndex } = this.computeFilterPage(this.filterData[this.pageType][3].data)
this.filterData[this.pageType][3].showMore = showMore this.filterData[this.pageType][3].showMore = showMore
this.filterData[this.pageType][3].showIndex = showIndex this.filterData[this.pageType][3].showIndex = showIndex
}).catch(error => { }).catch(e => {
console.log(error) console.error(e)
}) this.filterData[this.pageType][3].data = []
}, this.filterData[this.pageType][3].showMore = false
initVictimLocationData (params) { this.filterData[this.pageType][3].showIndex = 9
getData(api.detection[this.pageType].victimLocation, params).then(data => { this.errorMsgHandler(e)
this.filterData[this.pageType][3].data = data.map(r => ({ label: r.victimLocationCountry, value: r.victimLocationCountry, count: r.count }))
const { showMore, showIndex } = this.computeFilterPage(this.filterData[this.pageType][3].data)
this.filterData[this.pageType][3].showMore = showMore
this.filterData[this.pageType][3].showIndex = showIndex
}).catch(error => {
console.log(error)
})
},
initOffenderLocationData (params) {
getData(api.detection[this.pageType].offenderLocation, params).then(data => {
this.filterData[this.pageType][5].data = data.map(r => ({ label: r.offenderLocationCountry, value: r.offenderLocationCountry, count: r.count }))
const { showMore, showIndex } = this.computeFilterPage(this.filterData[this.pageType][5].data)
this.filterData[this.pageType][5].showMore = showMore
this.filterData[this.pageType][5].showIndex = showIndex
}).catch(error => {
console.log(error)
}) })
}, },
initActiveEntity (params) { initActiveEntity (params) {
getData(api.detection[this.pageType].activeEntity, params).then(data => { axios.get(api.detection[this.pageType].activeEntity, { params }).then(res => {
let data = res.data.data.result
this.statisticsActiveAttackData = data this.statisticsActiveAttackData = data
if (!this.$_.isEmpty(data)) { if (!this.$_.isEmpty(data)) {
const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`) const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
@@ -604,7 +611,7 @@ export default {
}) })
} }
}).catch(error => { }).catch(error => {
console.log(error) console.error(error)
}) })
}, },
triggerFilterDataValue (array, value) { triggerFilterDataValue (array, value) {
@@ -634,28 +641,39 @@ export default {
axios.get(api.detection[this.pageType].securityList, { params }).then(response => { axios.get(api.detection[this.pageType].securityList, { params }).then(response => {
if (response.status === 200) { if (response.status === 200) {
const data = response.data.data.result const data = response.data.data.result
data.forEach(item => { console.info(data)
item.eventInfoObj = JSON.parse(item.eventInfo) if (data.length > 0) {
}) data.forEach(item => {
this.listData = data item.eventInfoObj = JSON.parse(item.eventInfo)
item.startTime = parseFloat(item.startTime)
})
this.listData = data
} else {
this.listData = []
}
} else { } else {
this.listData = [] this.listData = []
console.error(response.data.message) console.error(response.data.message)
this.$message.error(response.data.message) this.$message.error(response.data.message)
} }
}) })
// getData(api.detection[this.pageType].listCount, params).then(data => { axios.get(api.detection[this.pageType].securityCount, { params }).then(data => {
getData(api.detection[this.pageType].securityCount, params).then(data => { this.pageObj.total = parseInt(data)
this.pageObj.total = data
}).catch(error => { }).catch(error => {
console.log(error) console.error(error)
}) })
}, },
timeRefreshChange () { timeRefreshChange () {
this.initNoData() // 不是自选时间
if (!this.$refs.dateTimeRange.isCustom) { if (this.$refs.dateTimeRange) {
const value = this.timeFilter.dateRangeValue if (!this.$refs.dateTimeRange.isCustom) {
this.$refs.dateTimeRange.quickChange(value) const value = this.timeFilter.dateRangeValue
this.$refs.dateTimeRange.quickChange(value)
} else {
this.timeFilter = JSON.parse(JSON.stringify(this.timeFilter))
}
} else {
this.timeFilter = JSON.parse(JSON.stringify(this.timeFilter))
} }
}, },
initNoData () { initNoData () {
@@ -664,9 +682,16 @@ export default {
this.isStatisticsCategoryNoData = false this.isStatisticsCategoryNoData = false
this.isStatisticsActiveAttackNoData = false this.isStatisticsActiveAttackNoData = false
}, },
reload (s, e, v) { reload (startTime, endTime, dateRangeValue) {
this.initNoData() this.initNoData()
this.dateTimeRangeChange(s, e, v) this.dateTimeRangeChange(startTime, endTime, dateRangeValue)
const { query } = this.$route
const newUrl = urlParamsHandler(window.location.href, query, {
startTime: this.timeFilter.startTime,
endTime: this.timeFilter.endTime,
range: dateRangeValue.value
})
overwriteUrl(newUrl)
}, },
// methods // methods
dateTimeRangeChange (s, e, v) { dateTimeRangeChange (s, e, v) {
@@ -723,9 +748,7 @@ export default {
this.initEventSeverityData(params) this.initEventSeverityData(params)
if (this.pageType === detectionPageType.securityEvent) { if (this.pageType === detectionPageType.securityEvent) {
this.initOffenderIpData(params) this.initOffenderIpData(params)
// this.initOffenderLocationData(params)
this.initVictimIpData(params) this.initVictimIpData(params)
// this.initVictimLocationData(params)
this.initSecurityTypeData(params) this.initSecurityTypeData(params)
} else if (this.pageType === detectionPageType.performanceEvent) { } else if (this.pageType === detectionPageType.performanceEvent) {
// this.initActiveEntity(params) // this.initActiveEntity(params)
@@ -902,12 +925,37 @@ export default {
window.removeEventListener('resize', this.debounceFunc) window.removeEventListener('resize', this.debounceFunc)
}, },
setup () { setup () {
const { params } = useRoute() const store = useStore()
const pageType = params.typeName let { params, query, path } = useRoute()
const dateRangeValue = 60 // 获取路由跳转过的历史状态,赋值给当前界面,起到保留状态的作用,如浏览器的回退前进等
const { startTime, endTime } = getNowTime(dateRangeValue) const routerObj = store.getters.getRouterHistoryList.find(item => item.t === query.t)
const timeFilter = ref({ startTime, endTime, dateRangeValue }) if (routerObj) {
params = routerObj.params
query = routerObj.query
path = routerObj.path
// 如果当前界面之前载入过,获取状态后更新地址栏,以便后续的赋值操作
const newUrl = urlParamsHandler(window.location.href, useRoute().query, query)
overwriteUrl(newUrl)
}
const pageType = params.typeName
// 获取url携带的range、startTime、endTime
const rangeParam = query.range
const startTimeParam = query.startTime
const endTimeParam = query.endTime
const dateRangeValue = rangeParam ? parseInt(query.range) : 60
const timeFilter = ref({ dateRangeValue })
if (!startTimeParam || !endTimeParam) {
const { startTime, endTime } = getNowTime(60)
timeFilter.value.startTime = getSecond(startTime)
timeFilter.value.endTime = getSecond(endTime)
// 如果没有时间参数就将参数写入url
const newUrl = urlParamsHandler(window.location.href, useRoute().query, { startTime: timeFilter.value.startTime, endTime: timeFilter.value.endTime, range: dateRangeValue })
overwriteUrl(newUrl)
} else {
timeFilter.value.startTime = parseInt(startTimeParam)
timeFilter.value.endTime = parseInt(endTimeParam)
}
return { return {
timeFilter, timeFilter,
pageType pageType

View File

@@ -4,7 +4,7 @@ import {
} from '@/views/charts/charts/tools' } from '@/views/charts/charts/tools'
import unitConvert from '@/utils/unit-convert' import unitConvert from '@/utils/unit-convert'
import _ from 'lodash' import _ from 'lodash'
import { dateFormatByAppearance } from '@/utils/date-util' import { dateFormatByAppearance, xAxisTimeFormatter, xAxisTimeRich } from '@/utils/date-util'
import { unitTypes } from '@/utils/constants' import { unitTypes } from '@/utils/constants'
const severitySeriesIndexMappings = [ const severitySeriesIndexMappings = [
@@ -67,8 +67,8 @@ export const multipleBarOption = {
source: [ source: [
] ]
}, },
xAxis: { xAxis: [{
type: 'category', type: 'time',
axisTick: { show: false }, axisTick: { show: false },
axisLine: { axisLine: {
show: true, show: true,
@@ -77,13 +77,16 @@ export const multipleBarOption = {
} }
}, },
axisLabel: { axisLabel: {
formatter: xAxisTimeFormatter,
rich: xAxisTimeRich,
color: '#737373', color: '#737373',
interval: 'auto' interval: 'auto'
}, },
splitNumber: 8,
splitLine: { splitLine: {
show: false show: false
} }
}, }],
yAxis: { yAxis: {
axisTick: { show: false }, axisTick: { show: false },
axisLine: { axisLine: {

View File

@@ -299,48 +299,40 @@ export default {
// 根据detection的eventInfo对象的ioc_type进行判断若为domainmalware信息从domain详情中获取并填充domain信息 // 根据detection的eventInfo对象的ioc_type进行判断若为domainmalware信息从domain详情中获取并填充domain信息
// 若ioc_type为ip则调用ip接口填充malware信息 // 若ioc_type为ip则调用ip接口填充malware信息
// 最后调用app填充app信息。经上获取完整实体详情则最少需要调用4次接口 // 最后调用app填充app信息。经上获取完整实体详情则最少需要调用4次接口
const offenderIPDetail = axios.get(`${api.detection.securityEvent.ipDetail}/resource=${this.detection.offenderIp}`) if (this.detection.offenderIp) {
const victimIPDetail = axios.get(`${api.detection.securityEvent.ipDetail}/resource=${this.detection.victimIp}`) axios.get(`${api.detection.securityEvent.ipDetail}?resource=${this.detection.offenderIp}`).then(res => {
let ipDetail
let domainDetail
let promiseList = []
const appDetail = axios.get(`${api.detection.securityEvent.appDetail}/resource=${this.detection.app}`)
if (this.detection.eventInfoObj.ioc_type.toLowerCase() === 'domain') {
domainDetail = axios.get(`${api.detection.securityEvent.domainDetail}/resource=${this.detection.eventInfoObj.ioc_value}`)
promiseList = [offenderIPDetail, victimIPDetail, domainDetail, appDetail]
}
if (this.detection.eventInfoObj.ioc_type.toLowerCase() === 'ip') {
ipDetail = axios.get(`${api.detection.securityEvent.ipDetail}/resource=${this.detection.eventInfoObj.ioc_value}`)
domainDetail = axios.get(`${api.detection.securityEvent.domainDetail}/resource=${this.detection.domain}`)
promiseList = [offenderIPDetail, victimIPDetail, domainDetail, appDetail, ipDetail]
}
Promise.all(promiseList).then((responses) => {
responses.forEach((res, i) => {
if (res.status === 200) { if (res.status === 200) {
if (i === 0) { this.basicInfo.offenderInfo = res.data.data
this.basicInfo.offenderInfo = res.data.data if (this.$_.get(this.detection, 'eventInfoObj.ioc_type', '').toLowerCase() === 'ip') {
this.basicInfo.malwareInfo = res.data.data.malware
} }
if (i === 1) {
this.basicInfo.victimInfo = res.data.data
}
if (i === 2) {
this.basicInfo.domainInfo = res.data.data
}
if (i === 3) {
this.basicInfo.appInfo = res.data.data
}
if (i === 4) {
this.basicInfo.malwareInfo = res.data.data.malwareInfo
}
} else {
console.error(res)
} }
}) })
if (this.detection.eventInfoObj.ioc_type.toLowerCase() === 'domain') { }
this.basicInfo.malwareInfo = this.basicInfo.domainInfo.malware || {} if (this.detection.victimIp) {
} axios.get(`${api.detection.securityEvent.ipDetail}?resource=${this.detection.victimIp}`).then(res => {
}) if (res.status === 200) {
this.basicInfo.victimInfo = res.data.data
}
})
}
if (this.detection.domain) {
axios.get(`${api.detection.securityEvent.domainDetail}?resource=${this.detection.domain}`).then(res => {
if (res.status === 200) {
this.basicInfo.domainInfo = res.data.data
if (this.$_.get(this.detection, 'eventInfoObj.ioc_type', '').toLowerCase() === 'domain') {
this.basicInfo.malwareInfo = res.data.data.malware
}
}
})
}
if (this.detection.app) {
axios.get(`${api.detection.securityEvent.appDetail}?resource=${this.detection.app}`).then(res => {
if (res.status === 200) {
this.basicInfo.appInfo = res.data.data
}
})
}
}, },
queryEvent () { queryEvent () {
axios.get(api.detection.securityEvent.relationEvent, { axios.get(api.detection.securityEvent.relationEvent, {

View File

@@ -13,3 +13,65 @@ export const undefinedData = {
httpResponseLatency: undefined, httpResponseLatency: undefined,
establishLatencyMs: undefined establishLatencyMs: undefined
} }
export const commonData = {
tcpLostlenPercent: 0.02,
pktRetransPercent: 0.005,
sslConLatency: 350,
httpResponseLatency: 160,
establishLatencyMs: 180
}
export const commonScoreBase = {
establishLatencyMs: {
p10: 10,
p90: 200
},
httpResponseLatency: {
p10: 20,
p90: 200
},
sslConLatency: {
p10: 30,
p90: 300
},
tcpLostlenPercent: {
p10: 0.005,
p90: 0.05
},
pktRetransPercent: {
p10: 0.01,
p90: 0.2
}
}
export const commonData2 = {
tcpLostlenPercent: 0.034,
pktRetransPercent: 0.145,
sslConLatency: 500,
httpResponseLatency: 32,
establishLatencyMs: 183
}
export const commonScoreBase2 = {
establishLatencyMs: {
p10: 90,
p90: 250
},
httpResponseLatency: {
p10: 60,
p90: 200
},
sslConLatency: {
p10: 300,
p90: 800
},
tcpLostlenPercent: {
p10: 0.01,
p90: 0.2
},
pktRetransPercent: {
p10: 0.05,
p90: 0.3
}
}

View File

@@ -1,11 +1,17 @@
import { computeScore } from '@/utils/tools' import { computeScore } from '@/utils/tools'
import { zeroData, undefinedData } from './mockData/score' import { zeroData, undefinedData, commonScoreBase, commonData, commonData2, commonScoreBase2 } from './mockData/score'
describe('computeScore测试', () => { describe('computeScore测试', () => {
test('含0', () => { test('含0', () => {
expect(computeScore(zeroData)).toEqual(6) expect(computeScore(zeroData, commonScoreBase)).toEqual(6)
}) })
test('含undefined', () => { test('含undefined', () => {
expect(computeScore(undefinedData)).toEqual('-') expect(computeScore(undefinedData, commonScoreBase)).toEqual('-')
})
test('普通数据', () => {
expect(computeScore(commonData, commonScoreBase)).toEqual(4)
})
test('普通数据2', () => {
expect(computeScore(commonData2, commonScoreBase2)).toEqual(4)
}) })
}) })