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

CN-399 Detection--服务质量事件 指标变化曲线开发:时间查询参数应为秒级时间戳

Browse Source
This commit is contained in:
hyx
2022-03-21 15:11:14 +08:00
parent df4c410ce9
commit 7ae2c30eb4
3 changed files with 176 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
View File

@@ -160,8 +160,8 @@ export default {
get(api.detection.performanceEvent.metric, { get(api.detection.performanceEvent.metric, {
domain: this.detection.domain, domain: this.detection.domain,
startTime: this.searchStartTime*1000, startTime: this.searchStartTime,
endTime: this.searchEndTime*1000, endTime: this.searchEndTime,
}).then((response) => { }).then((response) => {
if (response.code === 200) { if (response.code === 200) {
resolve(response.data.result[0]) resolve(response.data.result[0])

319
src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
View File

@@ -5,9 +5,9 @@
<div class="overview__row"> <div class="overview__row">
<div class="row__content"> <div class="row__content">
<span <span
class="row__content--link" class="row__content--link"
@click="goDetail('domain', computeSecondaryDomain(detection.domain))" @click="goDetail('domain', computeSecondaryDomain(detection.domain))"
>{{ computeSecondaryDomain(detection.domain) }}</span> >{{ computeSecondaryDomain(detection.domain) }}</span>
<template v-if="detection.eventType === 'dns error'"> <template v-if="detection.eventType === 'dns error'">
<span> <span>
{{$t('detections.dnsQueryError')}} {{$t('detections.dnsQueryError')}}
@@ -51,8 +51,8 @@
<div class="row__content"> <div class="row__content">
<span>{{ $t('detections.viewDetailOf') }}</span> &nbsp; <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
<span <span
class="row__content--link" class="row__content--link"
@click="goDetail('domain', computeSecondaryDomain(detection.domain))">{{computeSecondaryDomain(detection.domain)}}</span> @click="goDetail('domain', computeSecondaryDomain(detection.domain))">{{computeSecondaryDomain(detection.domain)}}</span>
</div> </div>
</div> </div>
<div class="overview__title">{{$t('detections.goToHunt')}}</div> <div class="overview__title">{{$t('detections.goToHunt')}}</div>
@@ -91,154 +91,179 @@
</template> </template>
<script> <script>
import { api, getData } from '@/utils/api' import { api, getData } from '@/utils/api'
import { eventSeverityColor, unitTypes } from '@/utils/constants' import { eventSeverityColor,unitTypes ,topDomain} from '@/utils/constants'
import { getSecond } from '@/utils/date-util' import { getSecond } from '@/utils/date-util'
import { get } from '@/utils/http' import { get } from '@/utils/http'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { markRaw } from 'vue' import { markRaw } from 'vue'
import { metricOption } from '@/views/detections/options/detectionOptions' import { metricOption } from '@/views/detections/options/detectionOptions'
import { sortBy, reverseSortBy, computeSecondaryDomain } from '@/utils/tools' import { sortBy,reverseSortBy } from '@/utils/tools'
export default { export default {
name: 'DetectionPerformanceEventDomainOverview', name: 'DetectionPerformanceEventDomainOverview',
props: { props: {
detection: Object detection: Object
},
data () {
return {
eventSeverityColor,
basicInfo: {},
metricList:[[1435781430781, "1"], [1435781431781, "5"],[1435781432781, "5"], [1435781433781, "3"],[1435781434781, "4"], [1435781435781, "5"]],
metricChart: null,
searchStartTime:null,
searchEndTime:null
}
},
computed: {
computeLocation () {
return function (basicInfo) {
let result = ''
if (basicInfo.serverLocationCountry) {
result += basicInfo.serverLocationCountry
}
if (basicInfo.serverLocationProvince) {
if (result) {
result += ', '
}
result += basicInfo.serverLocationProvince
}
if (basicInfo.serverLocationRegion) {
if (result) {
result += ', '
}
result += basicInfo.serverLocationRegion
}
return result || '-'
}
}
},
methods: {
computeSecondaryDomain,
query () {
this.queryBasic().then(responses => {
responses && (this.basicInfo = responses)
})
this.queryMetric().then(responses => {
responses && (this.metricList = responses.values)
this.initChart()
}).catch(error => {
console.log(error)
}).finally(() => {
setTimeout(() => {
try {
this.$nextTick(() => {
console.log(this.metricChart)
this.metricChart && this.metricChart.resize()
})
} catch (e) {}
}, 250)
})
}, },
data () {
initChart(){ return {
this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartDomain')))//使用markRaw的原因：vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type') eventSeverityColor,
this.chartOptionMetric = _.cloneDeep(this.chartOption) basicInfo: {},
metricList:[[1435781430781, "1"], [1435781431781, "5"],[1435781432781, "5"], [1435781433781, "3"],[1435781434781, "4"], [1435781435781, "5"]],
this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点 metricChart: null,
//let endIndex = (this.metricList). findIndex ((item) => item[0] <= 1435781434781 ); searchStartTime:null,
let endIndex = (this.metricList). findIndex ((item) => item[0] <= this.detection.endTime*1000 ); searchEndTime:null
endIndex = this.metricList.length-endIndex
this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点
//let startIndex = (this.metricList). findIndex ((item) => item[0] >= 1435781432781 );
let startIndex = (this.metricList). findIndex ((item) => item[0] >= this.detection.startTime*1000 );
if(startIndex >-1 && endIndex >-1){
this.chartOptionMetric.series[0].data = this.metricList.slice(0,startIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex-1,endIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex-1,this.metricList.length).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
} }
this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
console.log(this.chartOptionMetric)
}, },
computed: {
queryMetric() { computeLocation () {
return new Promise((resolve, reject) => { return function (basicInfo) {
try { let result = ''
let allTime = this.detection.endTime-this.detection.startTime if (basicInfo.serverLocationCountry) {
let nowTime = getSecond(new Date()) result += basicInfo.serverLocationCountry
this.searchStartTime = this.detection.startTime-allTime/2 }
this.searchEndTime = _.min([nowTime,(this.detection.endTime+allTime/2)]) if (basicInfo.serverLocationProvince) {
if (result) {
get(api.detection.performanceEvent.metric, { result += ', '
domain: this.detection.domain, }
startTime: this.searchStartTime*1000, result += basicInfo.serverLocationProvince
endTime: this.searchEndTime*1000, }
}).then((response) => { if (basicInfo.serverLocationRegion) {
if (response.code === 200) { if (result) {
resolve(response.data.result[0]) result += ', '
} else { }
reject(response) result += basicInfo.serverLocationRegion
}
return result || '-'
}
},
computeSecondaryDomain () {
return function (name) {
// 命中的顶级域名
let hitTopDomain = ''
// 同顶级域名比对
const hits = []
topDomain.forEach(td => {
const hitIndex = name.lastIndexOf(td)
if (hitIndex > -1 && hitIndex + td.length === name.length) {
hits.push(td)
} }
}) })
} catch (e) { if (hits.length > 0) {
reject(e) hits.sort((a, b) => {
return b.split('.').length - a.split('.').length
})
hitTopDomain = hits[0]
} else {
const arr = name.split('.')
hitTopDomain = arr[arr.length - 1]
}
const index = name.lastIndexOf(hitTopDomain)
const preArr = name.substring(0, index).split('.')
return [preArr[preArr.length - 2], hitTopDomain].join('.')
} }
}) }
}, },
queryBasic () { methods: {
return new Promise((resolve, reject) => { query () {
try { this.queryBasic().then(responses => {
getData(api.detection.performanceEvent.overviewBasic, { domain: this.detection.domain, startTime: this.detection.startTime }).then(data => { responses && (this.basicInfo = responses)
resolve(data[0]) })
}).catch(error => {
reject(error) this.queryMetric().then(responses => {
}) responses && (this.metricList = responses.values)
} catch (e) { this.initChart()
reject(e) }).catch(error => {
console.log(error)
}).finally(() => {
setTimeout(() => {
try {
this.$nextTick(() => {
console.log(this.metricChart)
this.metricChart && this.metricChart.resize()
})
} catch (e) {}
}, 250)
})
},
initChart(){
this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartDomain')))//使用markRaw的原因：vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')
this.chartOptionMetric = _.cloneDeep(this.chartOption)
this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点
//let endIndex = (this.metricList). findIndex ((item) => item[0] <= 1435781434781 );
let endIndex = (this.metricList). findIndex ((item) => item[0] <= this.detection.endTime*1000 );
endIndex = this.metricList.length-endIndex
this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点
//let startIndex = (this.metricList). findIndex ((item) => item[0] >= 1435781432781 );
let startIndex = (this.metricList). findIndex ((item) => item[0] >= this.detection.startTime*1000 );
if(startIndex >-1 && endIndex >-1){
this.chartOptionMetric.series[0].data = this.metricList.slice(0,startIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex-1,endIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex-1,this.metricList.length).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
} }
})
this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
console.log(this.chartOptionMetric)
},
queryMetric() {
return new Promise((resolve, reject) => {
try {
let allTime = this.detection.endTime-this.detection.startTime
let nowTime = getSecond(new Date())
this.searchStartTime = this.detection.startTime-allTime/2
this.searchEndTime = _.min([nowTime,(this.detection.endTime+allTime/2)])
get(api.detection.performanceEvent.metric, {
domain: this.detection.domain,
startTime: this.searchStartTime,
endTime: this.searchEndTime,
}).then((response) => {
if (response.code === 200) {
resolve(response.data.result[0])
} else {
reject(response)
}
})
} catch (e) {
reject(e)
}
})
},
queryBasic () {
return new Promise((resolve, reject) => {
try {
getData(api.detection.performanceEvent.overviewBasic, { domain: this.detection.domain, startTime: this.detection.startTime }).then(data => {
resolve(data[0])
}).catch(error => {
reject(error)
})
} catch (e) {
reject(e)
}
})
},
goDetail (type, name) {
const { href } = this.$router.resolve({
path: '/entityDetail',
query: {
entityType: type,
name: name
}
})
window.open(href, '_blank')
}
}, },
goDetail (type, name) { mounted () {
const { href } = this.$router.resolve({ this.query()
path: '/entityDetail', },
query: { setup () {
entityType: type, return {
name: name chartOption: metricOption,
} }
}) },
window.open(href, '_blank') }
} </script>
},
mounted () {
this.query()
},
setup () {
return {
chartOption: metricOption,
}
},
}
</script>

4
src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
View File

@@ -183,8 +183,8 @@ export default {
get(api.detection.performanceEvent.metric, { get(api.detection.performanceEvent.metric, {
domain: this.detection.domain, domain: this.detection.domain,
startTime: this.searchStartTime*1000, startTime: this.searchStartTime,
endTime: this.searchEndTime*1000, endTime: this.searchEndTime,
}).then((response) => { }).then((response) => {
if (response.code === 200) { if (response.code === 200) {
resolve(response.data.result[0]) resolve(response.data.result[0])