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

fix: 实体代码整理

Browse Source
This commit is contained in:
chenjinsong
2022-03-27 20:52:07 +08:00
parent f6f82d26c4
commit b9cdb81bc6
3 changed files with 34 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/utils/constants.js
View File

@@ -192,6 +192,12 @@ export const dnsServerRole = {
RTDNSM: 'RTDNSM' RTDNSM: 'RTDNSM'
} }
export const performanceMetricMapping = {
'dns error': 'DNS Error Rate',
'http error': 'HTTP Error Rate',
'high dns response time': 'DNS Response Latency'
}
export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666', export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
'#73BFDE', '#3BA172', '#FC8452', '#9960B4', '#73BFDE', '#3BA172', '#FC8452', '#9960B4',
'#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC', '#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC',

4
src/views/charts/PanelChart.vue
View File

@@ -251,9 +251,9 @@ export default {
} }
}).finally(() => { }).finally(() => {
setTimeout(() => { setTimeout(() => {
if(!(isIpHostedDomain(this.chartInfo.type) || isAppRelatedDomain(this.chartInfo.type)) ){ if (!(isIpHostedDomain(this.chartInfo.type) || isAppRelatedDomain(this.chartInfo.type))) {
this.loading = false this.loading = false
}else if(!this.chartData || this.chartData.length === 0){ } else if (!this.chartData || this.chartData.length === 0) {
this.loading = false this.loading = false
} }
}, 200) }, 200)

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

@@ -88,15 +88,14 @@
</template> </template>
<script> <script>
import { eventSeverityColor } from '@/utils/constants' import { eventSeverityColor, unitTypes } from '@/utils/constants'
import { api, getData } from '@/utils/api' import { api, getData } from '@/utils/api'
import { unitTypes } 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 } from '@/utils/tools' import { sortBy, reverseSortBy } from '@/utils/tools'
export default { export default {
name: 'DetectionPerformanceEventAppOverview', name: 'DetectionPerformanceEventAppOverview',
props: { props: {
@@ -106,7 +105,7 @@ export default {
return { return {
eventSeverityColor, eventSeverityColor,
basicInfo: {}, basicInfo: {},
metricList:[], metricList: []
} }
}, },
computed: { computed: {
@@ -139,15 +138,15 @@ export default {
}) })
this.queryMetric().then(responses => { this.queryMetric().then(responses => {
responses && (this.metricList = responses.values) responses && (this.metricList = responses.values)
if(this.metricList.length>0){ if (this.metricList.length > 0) {
this.initChart() this.initChart()
}else { } else {
let chartDom = document.getElementById(`detectionMetricChartApp${this.detection.appName}`) const chartDom = document.getElementById(`detectionMetricChartApp${this.detection.appName}`)
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>' chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
} }
}).catch(error => { }).catch(error => {
console.log(error) console.log(error)
let chartDom = document.getElementById(`detectionMetricChartApp${this.detection.appName}`) const chartDom = document.getElementById(`detectionMetricChartApp${this.detection.appName}`)
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>' chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}).finally(() => { }).finally(() => {
setTimeout(() => { setTimeout(() => {
@@ -160,35 +159,35 @@ export default {
}) })
}, },
initChart(){ initChart () {
this.metricChart = markRaw(echarts.init(document.getElementById(`detectionMetricChartApp${this.detection.appName}`))) this.metricChart = markRaw(echarts.init(document.getElementById(`detectionMetricChartApp${this.detection.appName}`)))
this.chartOptionMetric = _.cloneDeep(this.chartOption) this.chartOptionMetric = _.cloneDeep(this.chartOption)
this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点 this.metricList.sort(reverseSortBy(0))// 将返回的数据按时间降序排序，方便找到实线和虚线的交点
//let endIndex = (this.metricList). findIndex ((item) => item[0] <= 1435781434781 ); // let endIndex = (this.metricList). findIndex ((item) => item[0] <= 1435781434781 );
let endIndex = (this.metricList). findIndex ((item) => item[0] <= this.detection.endTime ); let endIndex = (this.metricList).findIndex((item) => item[0] <= this.detection.endTime)
endIndex = this.metricList.length-endIndex endIndex = this.metricList.length - endIndex
this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点 this.metricList.sort(sortBy(0))// 将返回的数据按时间升序排序，方便找到实线和虚线的交点
//let startIndex = (this.metricList). findIndex ((item) => item[0] >= 1435781432781 ); // let startIndex = (this.metricList). findIndex ((item) => item[0] >= 1435781432781 );
let startIndex = (this.metricList). findIndex ((item) => item[0] >= this.detection.startTime ); const startIndex = (this.metricList).findIndex((item) => item[0] >= this.detection.startTime)
if(startIndex >-1 && endIndex >-1){ if (startIndex > -1 && endIndex > -1) {
this.chartOptionMetric.series[0].data = this.metricList.slice(0,startIndex).map(v => [Number(v[0])*1000, Number(v[1]), unitTypes.number]) this.chartOptionMetric.series[0].data = this.metricList.slice(0, startIndex).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex-1,endIndex).map(v => [Number(v[0])*1000, Number(v[1]), unitTypes.number]) this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex - 1, endIndex).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex-1,this.metricList.length).map(v => [Number(v[0])*1000, Number(v[1]), unitTypes.number]) this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex - 1, this.metricList.length).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
} }
this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric) this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
}, },
queryMetric() { queryMetric () {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
let allTime = this.detection.endTime-this.detection.startTime const allTime = this.detection.endTime - this.detection.startTime
let nowTime = getSecond(new Date()) const nowTime = getSecond(new Date())
this.searchStartTime = this.detection.startTime-allTime/2 this.searchStartTime = this.detection.startTime - allTime / 2
this.searchEndTime = _.min([nowTime,(this.detection.endTime+allTime/2)]) this.searchEndTime = _.min([nowTime, (this.detection.endTime + allTime / 2)])
get(api.detection.performanceEvent.metric, { get(api.detection.performanceEvent.metric, {
domain: this.detection.domain, domain: this.detection.domain,
@@ -237,8 +236,8 @@ export default {
}, },
setup () { setup () {
return { return {
chartOption: metricOption, chartOption: metricOption
} }
}, }
} }
</script> </script>