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

CN-334 Detection--严重程度趋势图更改

Browse Source 
1.x轴接口返回数据格式更改，安全事件和服务质量事件都需要更改
2.修复detection俩页面查询出数据后页面卡死问题
3.列表下拉内容假数据去掉，对接接口数据
This commit is contained in:
hanyuxia
2022-03-03 18:01:26 +08:00
parent 0c8892f8e4
commit ed373c1c85
7 changed files with 381 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/utils/date-util.js
View File

@@ -40,3 +40,8 @@ export function getNowTime (interval) {
endTime
}
}
//日期格式转换
export function rTime(date) {
let json_date = new Date(date).toJSON();
return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
}

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

@@ -14,9 +14,16 @@
></detection-search>
<!-- 内容区 -->
<div class="explorer-container" style="height: calc(100% - 20px); flex-direction: column">
<div class="detection__event-severity-bar" :id="`eventSeverityTrendBar${pageType}`">
<detection-no-data v-if="isEventSeverityNoData"></detection-no-data>
<div class="entity__loading" style="background: #eff2f5;opacity: .6;" v-show="loading">
<i class="el-icon-loading"></i>
</div>
<template v-if="isEventSeverityNoData">
<div class="no-data detection__event-severity-bar" >No data</div>
</template>
<template v-if="!isEventSeverityNoData">
<div class="detection__event-severity-bar" :id="`eventSeverityTrendBar${pageType}`">
</div>
</template>
<div style="display: flex; flex-grow: 1">
<detection-filter
:filter-data="filterData[pageType]"
@@ -31,25 +38,38 @@
<div class="chart-header">
<div class="chart-header__title">{{$t('detection.severity')}}</div>
</div>
<template v-if="isStatisticsSeverityNoData">
<div class="no-data chart-content" >No data</div>
</template>
<template v-if="!isStatisticsSeverityNoData">
<div class="chart-content" :id="`eventSeverityPie${pageType}`">
<detection-no-data v-if="isStatisticsSeverityNoData"></detection-no-data>
</div>
</template>
</div>
<div class="statistics__category">
<div class="chart-header">
<div class="chart-header__title">{{$t('detection.categoryProportion')}}</div>
</div>
<template v-if="isStatisticsCategoryNoData">
<div class="no-data chart-content" >No data</div>
</template>
<template v-if="!isStatisticsCategoryNoData">
<div class="chart-content" :id="`detectionCategoryPer${pageType}`">
<detection-no-data v-if="isStatisticsCategoryNoData"></detection-no-data>
</div>
</template>
</div>
<div class="statistics__active-attack">
<div class="chart-header">
<div class="chart-header__title">{{pageType === detectionPageType.securityEvent ? $t('detection.activeAttacker') : $t('detections.activeEntity')}}</div>
</div>
<div class="chart-content" style="" :id="`detectionActiveAttacker${pageType}`">
<detection-no-data v-if="isStatisticsActiveAttackNoData"></detection-no-data>
<template v-if="isStatisticsActiveAttackNoData">
<div class="no-data chart-content" >No data</div>
</template>
<template v-if="!isStatisticsActiveAttackNoData">
<div class="chart-content" :id="`detectionActiveAttacker${pageType}`">
</div>
</template>
</div>
</div>
<detection-list
@@ -87,7 +107,7 @@ import DetectionFilter from '@/views/detections/DetectionFilter'
import DetectionList from '@/views/detections/DetectionList'
import Pagination from '@/components/common/Pagination'
import { defaultPageSize, detectionPageType } from '@/utils/constants'
import { getNowTime, getSecond } from '@/utils/date-util'
import { getNowTime, getSecond,rTime } from '@/utils/date-util'
import { ref } from 'vue'
import * as echarts from 'echarts'
import { multipleBarOption, pieForSeverity, activeAttackBar, getAttackColor, getSeverityColor, getSeriesIndex } from '@/views/detections/options/detectionOptions'
@@ -193,24 +213,122 @@ export default {
},
listData: [],
listLoading: false,
eventSeverityData: [],
severityPerOption: null,
severityPerData: [],
categoryPerOption: null,
categoryPerData: [],
activeAttackOption: null,
activeAttackData: [],
isEventSeverityNoData: true,
isStatisticsSeverityNoData: true,
isStatisticsCategoryNoData: true,
isStatisticsActiveAttackNoData: true
eventSeverityData:[],
statisticsSeverityData:[],
statisticsCategoryData:[],
statisticsActiveAttackData:[],
isEventSeverityNoData:false,
isStatisticsSeverityNoData:false,
isStatisticsCategoryNoData:false,
isStatisticsActiveAttackNoData:false,
loading: false,
}
},
methods: {
// 初始化顶部大柱状图
initEventSeverityTrendData (params) {
this.loading = true
getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => {
/*data = [
{
"stat_time": "2022-01-01T10:07:03.008Z",
"event_severity": "critical",
"count": 5
},
{
"stat_time": "2022-01-02T10:07:03.008Z",
"event_severity": "critical",
"count": 15
},{
"stat_time": "2022-01-03T10:07:03.008Z",
"event_severity": "critical",
"count": 25
},
{
"stat_time": "2022-01-04T10:07:03.008Z",
"event_severity": "critical",
"count": 7
},{
"stat_time": "2022-01-01T10:07:03.008Z",
"event_severity": "high",
"count": 8
},
{
"stat_time": "2022-01-02T10:07:03.008Z",
"event_severity": "high",
"count": 2
},{
"stat_time": "2022-01-03T10:07:03.008Z",
"event_severity": "high",
"count": 25
},
{
"stat_time": "2022-01-04T10:07:03.008Z",
"event_severity": "high",
"count": 7
},{
"stat_time": "2022-01-01T10:07:03.008Z",
"event_severity": "medium",
"count": 9
},
{
"stat_time": "2022-01-02T10:07:03.008Z",
"event_severity": "medium",
"count": 15
},{
"stat_time": "2022-01-03T10:07:03.008Z",
"event_severity": "medium",
"count": 35
},
{
"stat_time": "2022-01-04T10:07:03.008Z",
"event_severity": "medium",
"count": 7
},{
"stat_time": "2022-01-01T10:07:03.008Z",
"event_severity": "low",
"count": 5
},
{
"stat_time": "2022-01-02T10:07:03.008Z",
"event_severity": "low",
"count": 1
},{
"stat_time": "2022-01-03T10:07:03.008Z",
"event_severity": "low",
"count": 25
},
{
"stat_time": "2022-01-04T10:07:03.008Z",
"event_severity": "low",
"count": 17
},{
"stat_time": "2022-01-01T10:07:03.008Z",
"event_severity": "info",
"count": 5
},
{
"stat_time": "2022-01-02T10:07:03.008Z",
"event_severity": "info",
"count": 15
},{
"stat_time": "2022-01-03T10:07:03.008Z",
"event_severity": "info",
"count": 25
},
{
"stat_time": "2022-01-04T10:07:03.008Z",
"event_severity": "info",
"count": 27
},
]*/
/*data2 = [
{
legend: 'critical',
values: [[1435781430781, '999'], [1435781431781, '222'], [1435781432781, '11'], [1435781433781, '3']]
@@ -229,23 +347,38 @@ export default {
values: [[1435781430781, '5'], [1435781431781, '7'], [1435781432781, '5'], [1435781433781, '8']]
}
]*/
this.eventSeverityData = data
if (!this.$_.isEmpty(data)) {
const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`)
const detectionChart = echarts.init(chartDom)
const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption)
let dataMap = new Map()
data.forEach(item => {
eventSeverityTrendOption.series[Number(getSeriesIndex(item.legend))].data = item.values.map(v => Number(v[1]))
if(item.eventSeverity){
if(!dataMap.has(item.eventSeverity)){
let count = [[item.statTime,item.count]]
dataMap.set(item.eventSeverity,count)
}else {
dataMap.get(item.eventSeverity).push([item.statTime,item.count])
}
}
})
eventSeverityTrendOption.xAxis.data = data[0].values.map(v => [window.$dayJs.tz(Number(v[0])).format('YYYY-MM-DD HH:mm:ss')])
this.$nextTick(() => {
const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`)
const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption)
dataMap.forEach(function(value,key){
eventSeverityTrendOption.series[Number(getSeriesIndex(key))].data = value.map(v => Number(v[1]))
});
eventSeverityTrendOption.xAxis.data = dataMap.get('critical').map(v =>rTime(v[0]))
const detectionChart = echarts.init(chartDom)
detectionChart.setOption(eventSeverityTrendOption)
})
this.isEventSeverityNoData = false
//this.isEventSeverityNoData = false
this.loading = false
}else {
//this.isEventSeverityNoData = true
}
}).catch(error => {
})
},
// 初始化左侧事件严重等级和小饼图
initEventSeverityData (params) {
getData(api.detection[this.pageType].eventSeverity, params).then(data => {
@@ -267,6 +400,84 @@ export default {
count: 300
}
]*/
this.statisticsSeverityData = data
//this.isStatisticsSeverityNoData = true
this.filterData = {
securityEvent: [
{
title: this.$t('detections.eventSeverity'),
column: 'eventSeverity',
collapse: false,
value: [], // value之间是or的关系
data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
},
{
title: this.$t('detections.securityType'),
column: 'securityType',
collapse: false,
value: [],
data: [] // 从接口动态获取
},
{
title: this.$t('detections.victimIp'),
column: 'victimIp',
collapse: false,
value: [],
showMore: true,
showIndex: 9,
data: [] // 从接口动态获取
},
{
title: this.$t('detections.victimLocation'),
column: 'victimLocationCountry',
collapse: false,
value: [],
showMore: false,
showIndex: 9,
data: [
{
label: 'China',
value: 'china',
count: 50
}
] // 从接口动态获取
},
{
title: this.$t('detections.offenderIp'),
column: 'offenderIp',
collapse: false,
value: [],
showMore: false,
showIndex: 9,
data: [] // 从接口动态获取
},
{
title: this.$t('detections.offenderLocation'),
column: 'offenderLocationCountry',
collapse: false,
value: [],
showMore: false,
showIndex: 9,
data: [] // 从接口动态获取
}
],
performanceEvent: [
{
title: this.$t('detections.eventSeverity'),
column: 'eventSeverity',
collapse: false,
value: [], // value之间是or的关系
data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
},
{
title: this.$t('detections.securityType'),
column: 'securityType',
collapse: false,
value: [],
data: [] // 从接口动态获取
}
]
}
if (!this.$_.isEmpty(data)) {
this.filterData[this.pageType][0].data = data.map(r => ({ label: r.eventSeverity, value: r.eventSeverity, count: r.count }))
const eventSeverityOption = this.$_.cloneDeep(pieForSeverity)
@@ -276,7 +487,7 @@ export default {
const chartDom = document.getElementById(`eventSeverityPie${this.pageType}`)
const detectionChart = echarts.init(chartDom)
detectionChart.setOption(eventSeverityOption)
this.isStatisticsSeverityNoData = false
//this.isStatisticsSeverityNoData = false
}
}).catch(error => {
@@ -305,6 +516,8 @@ export default {
count: 50
}
]*/
this.statisticsCategoryData = data
//this.isStatisticsCategoryNoData = true
if (!this.$_.isEmpty(data)) {
this.filterData[this.pageType][1].data = data.map(r => ({
label: r.attackType,
@@ -318,7 +531,7 @@ export default {
return {value: d.count, name: d.attackType, itemStyle: {color: getAttackColor(d.attackType)}}
})
detectionChart.setOption(securityTypeOption)
this.isStatisticsCategoryNoData = false
//this.isStatisticsCategoryNoData = false
}
}).catch(error => {
@@ -376,6 +589,8 @@ export default {
count: 55355
}
]*/
this.statisticsActiveAttackData = data
if (!this.$_.isEmpty(data)) {
this.filterData[this.pageType][4].data = data.map(r => ({
label: r.offenderIp,
@@ -389,13 +604,13 @@ export default {
const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
const detectionChart = echarts.init(chartDom)
const offenderIpOption = this.$_.cloneDeep(activeAttackBar)
data.sort(this.sortBy('count'))
data.sort(this.sortBy('count'));
data = data.slice(0,5)
offenderIpOption.series[0].data = data.map(d => {
return [d.count, d.offenderIp]
}).reverse()
detectionChart.setOption(offenderIpOption)
this.isStatisticsActiveAttackNoData = false
//this.isStatisticsActiveAttackNoData = false
}
}).catch(error => {
@@ -550,6 +765,8 @@ export default {
count: 50
}
]*/
this.statisticsActiveAttackData = data
if (!this.$_.isEmpty(data)) {
const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
const detectionChart = echarts.init(chartDom)
const option = this.$_.cloneDeep(activeAttackBar)
@@ -557,8 +774,8 @@ export default {
return [d.count, d.name]
}).reverse()
detectionChart.setOption(option)
}
}).catch(error => {
})
},
computeFilterPage (data) {
@@ -876,12 +1093,20 @@ export default {
})
},
timeRefreshChange () {
this.initNoData()
if (!this.$refs.dateTimeRange.isCustom) {
const value = this.timeFilter.dateRangeValue
this.$refs.dateTimeRange.quickChange(value)
}
},
initNoData(){
this.isEventSeverityNoData = false
this.isStatisticsSeverityNoData = false
this.isStatisticsCategoryNoData = false
this.isStatisticsActiveAttackNoData = false
},
reload (s, e, v) {
this.initNoData()
this.dateTimeRangeChange(s, e, v)
},
// methods
@@ -889,6 +1114,7 @@ export default {
this.timeFilter = { startTime: s, endTime: e, dateRangeValue: v }
},
search (metaList, formatSql) {
this.initNoData()
if (formatSql) {
this.q = formatSql
this.metaList = metaList
@@ -961,6 +1187,68 @@ export default {
this.queryList()
},
watch: {
eventSeverityData: {
deep: true,
handler (n) {
if (!n || n.length === 0) {
this.timeout = setTimeout(() => {
this.isEventSeverityNoData = true
//this.$set(this.isEventSeverityNoData ,true)
this.loading = false
}, 500)
} else {
clearTimeout(this.timeout)
//this.$set(this.isEventSeverityNoData ,false)
this.isEventSeverityNoData = false
this.loading = false
}
}
},
statisticsSeverityData: {
deep: true,
handler (n) {
if (!n || n.length === 0) {
this.timeout = setTimeout(() => {
//this.$set(this.isStatisticsSeverityNoData ,true)
this.isStatisticsSeverityNoData = true
}, 500)
} else {
clearTimeout(this.timeout)
//this.$set(this.isStatisticsSeverityNoData ,false)
this.isStatisticsSeverityNoData = false
}
}
},
statisticsCategoryData: {
deep: true,
handler (n) {
if (!n || n.length === 0) {
this.timeout = setTimeout(() => {
this.isStatisticsCategoryNoData = true
//this.$set(this.isStatisticsCategoryNoData ,true)
}, 500)
} else {
clearTimeout(this.timeout)
//this.$set(this.isStatisticsCategoryNoData ,false)
this.isStatisticsCategoryNoData = false
}
}
},
statisticsActiveAttackData: {
deep: true,
handler (n) {
if (!n || n.length === 0) {
this.timeout = setTimeout(() => {
this.isStatisticsActiveAttackNoData = true
//this.$set(this.isStatisticsActiveAttackNoData ,true)
}, 500)
} else {
clearTimeout(this.timeout)
//this.$set(this.isStatisticsActiveAttackNoData ,false)
this.isStatisticsActiveAttackNoData = false
}
}
},
timeFilter (n) {
this.search(this.metaList, this.q)
},
@@ -1016,7 +1304,6 @@ export default {
setup () {
const { params } = useRoute()
const pageType = params.typeName
const dateRangeValue = 60
const { startTime, endTime } = getNowTime(dateRangeValue)
const timeFilter = ref({ startTime, endTime, dateRangeValue })

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

@@ -75,31 +75,17 @@ export default {
methods: {
query () {
this.basicInfo = {
clientLocationCountry: 1212,
clientLocationProvince: '112.2.2.3',
clientLocationRegion: 'China',
clientAsn: 'Hebei',
serverLocationCountry: 'Xingtai',
serverLocationProvince: 'hehe',
serverLocationRegion: '2.2.2.2',
serverAsn: 'China',
domainCategoryName: 'Hebei',
domainCategoryGroup: 'Xingtai',
domainReputationScore: 'hehe',
domainReputationLevel: 'high',
appCategory: 'vpn',
appSubcategory: 'foreign vpn',
appRisk: 'critical'
}
/* this.queryBasic().then(responses => {
}) */
this.queryBasic().then(responses => {
})
},
queryBasic () {
return new Promise((resolve, reject) => {
try {
get(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(response => {
if (response.code === 200) {
resolve(response.data.list)
this.basicInfo = response.data.result[0]
resolve(response.data.result)
} else {
reject(response)
}

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

@@ -79,31 +79,17 @@ export default {
methods: {
query () {
this.basicInfo = {
clientLocationCountry: 1212,
clientLocationProvince: '112.2.2.3',
clientLocationRegion: 'China',
clientAsn: 'Hebei',
serverLocationCountry: 'Xingtai',
serverLocationProvince: 'hehe',
serverLocationRegion: '2.2.2.2',
serverAsn: 'China',
domainCategoryName: 'Hebei',
domainCategoryGroup: 'Xingtai',
domainReputationScore: 'hehe',
domainReputationLevel: 'high',
appCategory: 'vpn',
appSubcategory: 'foreign vpn',
appRisk: 'critical'
}
/* this.queryBasic().then(responses => {
}) */
this.queryBasic().then(responses => {
})
},
queryBasic () {
return new Promise((resolve, reject) => {
try {
get(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(response => {
if (response.code === 200) {
resolve(response.data.list)
this.basicInfo = response.data.result[0]
resolve(response.data.result)
} else {
reject(response)
}

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

@@ -66,29 +66,15 @@ export default {
methods: {
query () {
this.basicInfo = {
clientLocationCountry: 1212,
clientLocationProvince: '112.2.2.3',
clientLocationRegion: 'China',
clientAsn: 'Hebei',
serverLocationCountry: 'Xingtai',
serverLocationProvince: 'hehe',
serverLocationRegion: '2.2.2.2',
serverAsn: 'China',
domainCategoryName: 'Hebei',
domainCategoryGroup: 'Xingtai',
domainReputationScore: 'hehe',
domainReputationLevel: 'high',
appCategory: 'vpn',
appSubcategory: 'foreign vpn',
appRisk: 'critical'
}
/* this.queryBasic().then(responses => {
}) */
this.queryBasic().then(responses => {
})
},
queryBasic () {
return new Promise((resolve, reject) => {
try {
getData(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.serverIp }).then(data => {
this.basicInfo = data[0]
resolve(data)
}).catch(error => {
reject(error)

115
src/views/detections/overview/DetectionSecurityEventOverview.vue
View File

@@ -179,107 +179,8 @@ export default {
getMillisecond,
query () {
this.basicInfo = {
eventId: 1212,
offenderIp: '112.2.2.3',
offenderLocationCountry: 'China',
offenderLocationProvince: 'Hebei',
offenderLocationRegion: 'Xingtai',
offenderAsn: 'hehe',
victimIp: '2.2.2.2',
victimLocationCountry: 'China',
victimLocationProvince: 'Hebei',
victimLocationRegion: 'Xingtai',
victimAsn: 'hehe',
domain: '5aibj.com',
domainCategoryName: 'bbs',
domainCategoryGroup: 'hehe',
domainReputationLevel: 'high',
appName: 'express vpn',
appCategory: 'vpn',
appSubcategory: 'foreign vpn',
appRisk: 'critical',
cryptominingPool: 'btcP',
cryptominingCoinType: 'btc',
cryptominingSoftware: 'a',
malwareName: 'gtw',
malwareAlias: 'gt',
malwareDescription: 'this is description,this is description,this is description,this is description,this is description,this is description,this is description,this is description,this is description,this is description,',
malwarePlatforms: 'windows',
malwareTechniques: 'Audio captures',
malwareGroups: 'Silver terrier',
startTime: 1645417930
}
this.events = [
{
eventSeverity: 'high',
securityType: 'command and control',
offenderIp: '2.2.2.2',
victimIp: '2.2.2.3',
startTime: 1645307930
},
{
eventSeverity: 'critical',
securityType: 'command and control',
offenderIp: '2.2.2.2',
victimIp: '112.2.2.3',
startTime: 1645317930
},
{
eventSeverity: 'high',
securityType: 'command and control',
offenderIp: '2.2.2.2',
victimIp: '2.2.2.3',
startTime: 1645327930
},
{
eventSeverity: 'high',
securityType: 'command and control',
offenderIp: '2.2.2.2',
victimIp: '2.2.2.3',
startTime: 1645337930
},
{
eventSeverity: 'high',
securityType: 'command and control',
offenderIp: '2.2.2.2',
victimIp: '2.2.2.3',
startTime: 1645347930
},
{
eventSeverity: 'high',
securityType: 'command and control',
offenderIp: '2.2.2.2',
victimIp: '2.2.2.3',
startTime: 1645357930
},
{
eventSeverity: 'high',
securityType: 'command and control',
offenderIp: '2.2.2.2',
victimIp: '2.2.2.3',
startTime: 1645367930
},
{
eventSeverity: 'high',
securityType: 'command and control',
offenderIp: '2.2.2.2',
victimIp: '2.2.2.3',
startTime: 1645397930
},
{
eventSeverity: 'high',
securityType: 'command and control',
offenderIp: '2.2.2.2',
victimIp: '2.2.2.3',
startTime: 1645407930
},
{
eventSeverity: 'high',
securityType: 'command and control',
offenderIp: '2.2.2.2',
victimIp: '2.2.2.3',
startTime: 1645417930
}
]
Promise.all([this.queryBasic(), this.queryEvent()]).then(responses => {
})
@@ -287,9 +188,13 @@ export default {
queryBasic () {
return new Promise((resolve, reject) => {
try {
get(api.detectionOverviewBasic, { eventId: this.detection.eventId }).then(response => {
get(api.detection.securityEvent.overviewBasic, { eventId: this.detection.eventId }).then(response => {
if (response.code === 200) {
resolve(response.data.list)
let data = response.data.result[0]
if (!this.$_.isEmpty(data)) {
this.basicInfo = data
}
resolve(response.data.result)
} else {
reject(response)
}
@@ -302,9 +207,13 @@ export default {
queryEvent () {
return new Promise((resolve, reject) => {
try {
get(api.detectionOverviewEvent, { eventId: this.detection.eventId }).then(response => {
get(api.detection.securityEvent.overviewEvent, { eventId: this.detection.eventId }).then(response => {
if (response.code === 200) {
resolve(response.data.list)
let data = response.data.result
if (!this.$_.isEmpty(data)) {
this.events = response.data.result
}
resolve(response.data.result)
} else {
reject(response)
}