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

Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev

Browse Source
This commit is contained in:
zhangxiaolong
2022-03-10 14:57:49 +08:00
parent 455ecae0c3 b02d6adac6
commit e57642f52c
6 changed files with 110 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,5 +42,5 @@ export function getNowTime (interval) {
} }
// 日期格式转换 // 日期格式转换
export function rTime (date) { export function rTime (date) {
return window.$dayJs.tz(new Date(date)).format('YYYY-MM-DD HH:mm:ss') return window.$dayJs.tz(new Date(date)).format('MM-DD HH:mm')
} }

9
src/views/charts/charts/ChartEchart.vue
View File

@@ -100,6 +100,15 @@ export default {
unitType: chartParams.unitType ? chartParams.unitType : 'number' unitType: chartParams.unitType ? chartParams.unitType : 'number'
} }
}) })
}else {
this.chartOption.series[0].data = this.chartData.map(d => {
return {
name: lineToSpace(d.name),
data: d,
value: parseInt(d.num),
unitType: chartParams.unitType ? chartParams.unitType : 'number'
}
})
} }
} else { } else {
const seriesTemplate = this.chartOption.series[0] const seriesTemplate = this.chartOption.series[0]

3
src/views/charts/charts/options/line.js
View File

@@ -24,8 +24,7 @@ export const line = {
formatter: function (value, index, a, b) { formatter: function (value, index, a, b) {
return unitConvert(value, unitTypes.number).join(' ') return unitConvert(value, unitTypes.number).join(' ')
} }
}, }
minInterval: 1
}, },
animation: false, animation: false,
grid: { grid: {

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

@@ -235,137 +235,147 @@ export default {
initEventSeverityTrendData (params) { initEventSeverityTrendData (params) {
this.loading = true this.loading = true
getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => { getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => {
/* data = [ /*data = [
{ {
"stat_time": "2022-01-01T10:07:03.008Z", "statTime": "2022-01-01T10:07:03.008Z",
"event_severity": "critical", "eventSeverity": "critical",
"count": 5 "count": 5
}, },
{ {
"stat_time": "2022-01-02T10:07:03.008Z", "statTime": "2022-01-02T10:07:03.008Z",
"event_severity": "critical", "eventSeverity": "critical",
"count": 15 "count": 15
},{ },{
"stat_time": "2022-01-03T10:07:03.008Z", "statTime": "2022-01-03T10:07:03.008Z",
"event_severity": "critical", "eventSeverity": "critical",
"count": 25 "count": 25
}, },
{ {
"stat_time": "2022-01-04T10:07:03.008Z", "statTime": "2022-01-04T10:07:03.008Z",
"event_severity": "critical", "eventSeverity": "critical",
"count": 7 "count": 7
},{ },{
"stat_time": "2022-01-01T10:07:03.008Z", "statTime": "2022-01-01T10:07:03.008Z",
"event_severity": "high", "eventSeverity": "high",
"count": 8 "count": 8
}, },
{ {
"stat_time": "2022-01-02T10:07:03.008Z", "statTime": "2022-01-02T10:07:03.008Z",
"event_severity": "high", "eventSeverity": "high",
"count": 2 "count": 2
},{ },{
"stat_time": "2022-01-03T10:07:03.008Z", "statTime": "2022-01-03T10:07:03.008Z",
"event_severity": "high", "eventSeverity": "high",
"count": 25 "count": 25
}, },
{ {
"stat_time": "2022-01-04T10:07:03.008Z", "statTime": "2022-01-04T10:07:03.008Z",
"event_severity": "high", "eventSeverity": "high",
"count": 7 "count": 7
},{ },{
"stat_time": "2022-01-01T10:07:03.008Z", "statTime": "2022-01-01T10:07:03.008Z",
"event_severity": "medium", "eventSeverity": "medium",
"count": 9 "count": 9
}, },
{ {
"stat_time": "2022-01-02T10:07:03.008Z", "statTime": "2022-01-02T10:07:03.008Z",
"event_severity": "medium", "eventSeverity": "medium",
"count": 15 "count": 15
},{ },{
"stat_time": "2022-01-03T10:07:03.008Z", "statTime": "2022-01-03T10:07:03.008Z",
"event_severity": "medium", "eventSeverity": "medium",
"count": 35 "count": 35
}, },
{ {
"stat_time": "2022-01-04T10:07:03.008Z", "statTime": "2022-01-04T10:07:03.008Z",
"event_severity": "medium", "eventSeverity": "medium",
"count": 7 "count": 7
},{ },{
"stat_time": "2022-01-01T10:07:03.008Z", "statTime": "2022-01-01T10:07:03.008Z",
"event_severity": "low", "eventSeverity": "low",
"count": 5 "count": 5
}, },
{ {
"stat_time": "2022-01-02T10:07:03.008Z", "statTime": "2022-01-02T10:07:03.008Z",
"event_severity": "low", "eventSeverity": "low",
"count": 1 "count": 1
},{ },{
"stat_time": "2022-01-03T10:07:03.008Z", "statTime": "2022-01-03T10:07:03.008Z",
"event_severity": "low", "eventSeverity": "low",
"count": 25 "count": 25
}, },
{ {
"stat_time": "2022-01-04T10:07:03.008Z", "statTime": "2022-01-04T10:07:03.008Z",
"event_severity": "low", "eventSeverity": "low",
"count": 17 "count": 17
},{ },{
"stat_time": "2022-01-01T10:07:03.008Z", "statTime": "2022-01-01T10:07:03.008Z",
"event_severity": "info", "eventSeverity": "info",
"count": 5 "count": 5
}, },
{ {
"stat_time": "2022-01-02T10:07:03.008Z", "statTime": "2022-01-02T10:07:03.008Z",
"event_severity": "info", "eventSeverity": "info",
"count": 15 "count": 15
},{ },{
"stat_time": "2022-01-03T10:07:03.008Z", "statTime": "2022-01-03T10:07:03.008Z",
"event_severity": "info", "eventSeverity": "info",
"count": 25 "count": 25
}, },
{ {
"stat_time": "2022-01-04T10:07:03.008Z", "statTime": "2022-01-04T10:07:03.008Z",
"event_severity": "info", "eventSeverity": "info",
"count": 27 "count": 27
}, },
] */ ]*/
/* data2 = [
{
legend: 'critical',
values: [[1435781430781, '999'], [1435781431781, '222'], [1435781432781, '11'], [1435781433781, '3']]
},
{
legend: 'high',
values: [[1435781430781, '2'], [1435781431781, '3'], [1435781432781, '6'], [1435781433781, '4']]
}, {
legend: 'medium',
values: [[1435781430781, '4'], [1435781431781, '1'], [1435781432781, '5'], [1435781433781, '3']]
}, {
legend: 'low',
values: [[1435781430781, '1'], [1435781431781, '4'], [1435781432781, '1'], [1435781433781, '3']]
}, {
legend: 'info',
values: [[1435781430781, '5'], [1435781431781, '7'], [1435781432781, '5'], [1435781433781, '8']]
}
] */
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.eventSeverity) { if (item.eventSeverity) {
if (!dataMap.has(item.eventSeverity)) { if (!dataMap.has(item.eventSeverity)) {
const count = [[item.statTime, item.count]] const count = [[rTime(item.statTime), item.count]]
dataMap.set(item.eventSeverity, count) dataMap.set(item.eventSeverity, count)
} else { } else {
dataMap.get(item.eventSeverity).push([item.statTime, item.count]) dataMap.get(item.eventSeverity).push([rTime(item.statTime), item.count])
} }
} }
}) })
const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`) const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`)
const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption) const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption)
let xData = []
dataMap.forEach(function (value, key) { dataMap.forEach(function (value, key) {
eventSeverityTrendOption.series[Number(getSeriesIndex(key))].data = value.map(v => Number(v[1])) //eventSeverityTrendOption.series[Number(getSeriesIndex(key))].data = value.map(v => Number(v[1]))
value.forEach(item => {
if(xData.indexOf(item[0]) < 0){
xData.push(item[0])
}
})
}) })
eventSeverityTrendOption.xAxis.data = dataMap.get('critical').map(v => rTime(v[0])) eventSeverityTrendOption.series.forEach(serie => {
let seriesData = []
xData.forEach(item => {
if(dataMap.has(serie.name)){
let hasX = dataMap.get(serie.name).some(function(v) {
if (item == v[0]) {
seriesData.push(Number(v[1]))
return true;
}
})
if(!hasX){
seriesData.push(0)
}
}else {
seriesData.push(0)
}
})
serie.data = seriesData
})
//eventSeverityTrendOption.xAxis.data = dataMap.get('info').map(v => rTime(v[0]))
eventSeverityTrendOption.xAxis.data = xData
const detectionChart = echarts.init(chartDom) const detectionChart = echarts.init(chartDom)
detectionChart.setOption(eventSeverityTrendOption) detectionChart.setOption(eventSeverityTrendOption)
// this.isEventSeverityNoData = false // this.isEventSeverityNoData = false

24
src/views/detections/options/detectionOptions.js
View File

@@ -52,7 +52,7 @@ export const multipleBarOption = {
legend: { legend: {
icon: 'circle', icon: 'circle',
top: 10, top: 10,
right: 10, right: 30,
itemWidth: 10, // 设置宽度 itemWidth: 10, // 设置宽度
itemHeight: 10 // 设置高度 itemHeight: 10 // 设置高度
}, },
@@ -72,7 +72,7 @@ export const multipleBarOption = {
}, },
axisLabel: { axisLabel: {
color: '#737373', color: '#737373',
interval: 0 interval: 'auto'
}, },
splitLine: { splitLine: {
show: false show: false
@@ -104,6 +104,10 @@ export const multipleBarOption = {
{ {
name: 'critical', name: 'critical',
type: 'bar', type: 'bar',
stack:'eventSeverityTrend',
emphasis: {
focus: 'series'
},
barWidth: 15, barWidth: 15,
seriesLayoutBy: 'row', seriesLayoutBy: 'row',
itemStyle: { itemStyle: {
@@ -113,6 +117,10 @@ export const multipleBarOption = {
{ {
name: 'high', name: 'high',
type: 'bar', type: 'bar',
stack:'eventSeverityTrend',
emphasis: {
focus: 'series'
},
barWidth: 15, barWidth: 15,
seriesLayoutBy: 'row', seriesLayoutBy: 'row',
itemStyle: { itemStyle: {
@@ -122,6 +130,10 @@ export const multipleBarOption = {
{ {
name: 'medium', name: 'medium',
type: 'bar', type: 'bar',
stack:'eventSeverityTrend',
emphasis: {
focus: 'series'
},
barWidth: 15, barWidth: 15,
seriesLayoutBy: 'row', seriesLayoutBy: 'row',
itemStyle: { itemStyle: {
@@ -131,6 +143,10 @@ export const multipleBarOption = {
{ {
name: 'low', name: 'low',
type: 'bar', type: 'bar',
stack:'eventSeverityTrend',
emphasis: {
focus: 'series'
},
barWidth: 15, barWidth: 15,
seriesLayoutBy: 'row', seriesLayoutBy: 'row',
itemStyle: { itemStyle: {
@@ -140,6 +156,10 @@ export const multipleBarOption = {
{ {
name: 'info', name: 'info',
type: 'bar', type: 'bar',
stack:'eventSeverityTrend',
emphasis: {
focus: 'series'
},
barWidth: 15, barWidth: 15,
seriesLayoutBy: 'row', seriesLayoutBy: 'row',
itemStyle: { itemStyle: {

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

@@ -172,13 +172,14 @@ export default {
}, },
computed: { computed: {
formatT0 () { formatT0 () {
const vm = this
return function (event) { return function (event) {
const diffSeconds = event.diffSeconds const diffSeconds = event.diffSeconds
if (diffSeconds === 0) { if (diffSeconds === 0) {
return 'T0' return 'T0'
} }
const eventStartTime = event.startTime const eventStartTime = event.startTime
const entityStartTime = this.detection.startTime const entityStartTime = vm.detection.startTime
if (_.isNumber(diffSeconds) && _.isNumber(eventStartTime) && _.isNumber(entityStartTime)) { if (_.isNumber(diffSeconds) && _.isNumber(eventStartTime) && _.isNumber(entityStartTime)) {
const suffix = unitConvert(diffSeconds, unitTypes.time, 's', null, 0).join('') const suffix = unitConvert(diffSeconds, unitTypes.time, 's', null, 0).join('')