CN-403 fix: performance详情域名截取二级域名
This commit is contained in:
chenjinsong
File diff suppressed because one or more lines are too long
@@ -49,6 +49,10 @@ const routes = [
|
||||
{
|
||||
path: '/chart',
|
||||
component: () => import('@/views/settings/Chart')
|
||||
},
|
||||
{
|
||||
path: '/temp',
|
||||
component: () => import('@/views/Temp')
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -479,50 +479,50 @@ export function sortBy (i) {
|
||||
export function extensionEchartY (chart) {
|
||||
// 判断是否创建过div框,如果创建过就不再创建了
|
||||
// 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
|
||||
let id = document.getElementById("extension")
|
||||
const id = document.getElementById('extension')
|
||||
if (!id) {
|
||||
let div = "<div id = 'extension' style=\"display:block\"></div>"
|
||||
let contentDiv = document.createElement("div")
|
||||
const div = "<div id = 'extension' style=\"display:block\"></div>"
|
||||
const contentDiv = document.createElement('div')
|
||||
contentDiv.setAttribute('id', 'extension')
|
||||
contentDiv.setAttribute('style', 'display:block')
|
||||
document.documentElement.append(contentDiv)
|
||||
}
|
||||
chart.on('mouseover', function (params) {
|
||||
// 注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
|
||||
if(params.componentType === "yAxis") {
|
||||
if (params.componentType === 'yAxis') {
|
||||
// 设置悬浮文本的位置以及样式
|
||||
let extEle = document.getElementById("extension")
|
||||
extEle.style.cssText = "display:inline;position:absolute;" +
|
||||
" padding: 12px;" +
|
||||
" max-width: 400px !important;" +
|
||||
" color: #666;" +
|
||||
" background-color: rgb(255, 255, 255);" +
|
||||
" font-size: 14px;" +
|
||||
" line-height: 20px;" +
|
||||
" font-weight:400; " +
|
||||
" font-family: \"Microsoft YaHei\"" +
|
||||
" border-style: solid;" +
|
||||
" border-width: 1px;" +
|
||||
" border-radius: 4px;" +
|
||||
" border-color: transparent !important;" +
|
||||
" box-shadow: rgb(0 0 0 / 30%) 0px 0px 3px;" +
|
||||
" white-space: nowrap;" +
|
||||
" z-index: 99999999;"
|
||||
const extEle = document.getElementById('extension')
|
||||
extEle.style.cssText = 'display:inline;position:absolute;' +
|
||||
' padding: 12px;' +
|
||||
' max-width: 400px !important;' +
|
||||
' color: #666;' +
|
||||
' background-color: rgb(255, 255, 255);' +
|
||||
' font-size: 14px;' +
|
||||
' line-height: 20px;' +
|
||||
' font-weight:400; ' +
|
||||
' font-family: "Microsoft YaHei"' +
|
||||
' border-style: solid;' +
|
||||
' border-width: 1px;' +
|
||||
' border-radius: 4px;' +
|
||||
' border-color: transparent !important;' +
|
||||
' box-shadow: rgb(0 0 0 / 30%) 0px 0px 3px;' +
|
||||
' white-space: nowrap;' +
|
||||
' z-index: 99999999;'
|
||||
|
||||
extEle.innerHTML = params.value;
|
||||
extEle.innerHTML = params.value
|
||||
document.documentElement.onmousemove = function (event) {
|
||||
let extEle = document.getElementById("extension")
|
||||
let xx = event.pageX - extEle.offsetWidth - 20
|
||||
let yy = event.pageY + 20
|
||||
extEle.style.cssText = extEle.style.cssText+"top:"+yy+"px;left:"+xx+"px;"
|
||||
const extEle = document.getElementById('extension')
|
||||
const xx = event.pageX - extEle.offsetWidth - 20
|
||||
const yy = event.pageY + 20
|
||||
extEle.style.cssText = extEle.style.cssText + 'top:' + yy + 'px;left:' + xx + 'px;'
|
||||
}
|
||||
}
|
||||
})
|
||||
chart.on('mouseout', function (params) {
|
||||
// 注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
|
||||
if(params.componentType == "yAxis") {
|
||||
let extEle = document.getElementById("extension")
|
||||
extEle.style.cssText = "display:none;"
|
||||
if (params.componentType == 'yAxis') {
|
||||
const extEle = document.getElementById('extension')
|
||||
extEle.style.cssText = 'display:none;'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -354,7 +354,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tabHandleClickType: '',
|
||||
tabHandleClickType: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@@ -395,7 +395,7 @@ export default {
|
||||
} else {
|
||||
return getOption(this.chartInfo.type)
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resize () {
|
||||
@@ -414,19 +414,19 @@ export default {
|
||||
initEchartsWithTable () {
|
||||
this.$refs['chart' + this.chartInfo.id] &&
|
||||
this.$refs['chart' + this.chartInfo.id].initEchartsWithTable(
|
||||
`chart${this.chartInfo.id}`,
|
||||
`chart${this.chartInfo.id}`
|
||||
)
|
||||
},
|
||||
query (params) {
|
||||
this.$emit('query', params)
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tabHandleClickType: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.tabHandleClickType = n
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
@@ -442,7 +442,7 @@ export default {
|
||||
isSingleValue: isSingleValue(props.chartInfo.type),
|
||||
isSingleValueWithEcharts: isSingleValueWithEcharts(props.chartInfo.type),
|
||||
isSingleValueWithEchartsTemp: isSingleValueWithEchartsTemp(
|
||||
props.chartInfo.type,
|
||||
props.chartInfo.type
|
||||
),
|
||||
isRelationShip: isRelationShip(props.chartInfo.type),
|
||||
isTable: isTable(props.chartInfo.type),
|
||||
|
||||
@@ -236,7 +236,7 @@ import {
|
||||
isBasicTable,
|
||||
isGroup,
|
||||
isEchartsWithTable,
|
||||
isAlarmInfo,
|
||||
isAlarmInfo
|
||||
} from './charts/tools'
|
||||
import ChartError from '@/views/charts/ChartError'
|
||||
import { getNowTime } from '@/utils/date-util'
|
||||
@@ -246,7 +246,7 @@ import {
|
||||
chartActiveIpTableOrderOptions,
|
||||
chartPieTableTopOptions,
|
||||
eventSeverity,
|
||||
chartTableColumnMapping,
|
||||
chartTableColumnMapping
|
||||
} from '@/utils/constants'
|
||||
|
||||
export default {
|
||||
@@ -255,17 +255,17 @@ export default {
|
||||
chartInfo: Object,
|
||||
errorInfo: {
|
||||
type: String,
|
||||
default: '',
|
||||
default: ''
|
||||
},
|
||||
isError: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
table: Object,
|
||||
orderPieTable: Object,
|
||||
orderPieTable: Object
|
||||
},
|
||||
components: {
|
||||
ChartError,
|
||||
ChartError
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -280,30 +280,30 @@ export default {
|
||||
tableData: [
|
||||
{
|
||||
name: '192.168.20.21',
|
||||
num: 111,
|
||||
num: 111
|
||||
},
|
||||
{
|
||||
name: '192.168.20.22',
|
||||
num: 345,
|
||||
num: 345
|
||||
},
|
||||
{
|
||||
name: '192.168.20.23',
|
||||
num: 111,
|
||||
num: 111
|
||||
},
|
||||
{
|
||||
name: '192.168.20.24',
|
||||
num: 345,
|
||||
num: 345
|
||||
},
|
||||
{
|
||||
name: '192.168.20.25',
|
||||
num: 111,
|
||||
num: 111
|
||||
},
|
||||
{
|
||||
name: '192.168.20.26',
|
||||
num: 345,
|
||||
},
|
||||
], // table的所有数据
|
||||
},
|
||||
num: 345
|
||||
}
|
||||
] // table的所有数据
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -346,13 +346,13 @@ export default {
|
||||
this.isFocusAll = false
|
||||
}
|
||||
this.$emit('tabHandleClick', item)
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isFocus: {
|
||||
deep: true,
|
||||
handler(n) {},
|
||||
},
|
||||
handler (n) {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showRefreshButton () {
|
||||
@@ -361,7 +361,7 @@ export default {
|
||||
const isGroupAndParentIsBlock =
|
||||
this.$_.get(this.chartInfo.parent, 'type') === 95 && this.isGroup
|
||||
return !isGroupAndParentIsBlock
|
||||
},
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
const dateRangeValue = 60
|
||||
@@ -382,8 +382,8 @@ export default {
|
||||
isActiveIpTable: isActiveIpTable(props.chartInfo.type),
|
||||
isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
|
||||
isGroup: isGroup(props.chartInfo.type),
|
||||
isAlarmInfo: isAlarmInfo(props.chartInfo.type),
|
||||
isAlarmInfo: isAlarmInfo(props.chartInfo.type)
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -119,7 +119,7 @@ export default {
|
||||
chartInfo: Object,
|
||||
chartData: [Array, Object],
|
||||
tabHandleClickType: String,
|
||||
queryParams: Object,
|
||||
queryParams: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -151,7 +151,7 @@ export default {
|
||||
isNoData = false
|
||||
}
|
||||
return isNoData
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tabHandleClickType: {
|
||||
@@ -160,11 +160,11 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.getData(1, n)
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
alarmInfoCount: {
|
||||
deep: true,
|
||||
handler(n) {},
|
||||
handler (n) {}
|
||||
},
|
||||
queryParams: {
|
||||
deep: true,
|
||||
@@ -172,25 +172,25 @@ export default {
|
||||
if (n.startTime && n.endTime) {
|
||||
this.getCount(1)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ChartTablePagination,
|
||||
ChartTablePagination
|
||||
},
|
||||
methods: {
|
||||
unitConvert,
|
||||
getMillisecond,
|
||||
getCount () {
|
||||
let countQuery = {
|
||||
const countQuery = {
|
||||
startTime: this.queryParams.startTime,
|
||||
endTime: this.queryParams.endTime,
|
||||
eventSeverity:
|
||||
this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType,
|
||||
this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
get('/interface/dns/alarmInfoCount', {
|
||||
...countQuery,
|
||||
...countQuery
|
||||
}).then((response) => {
|
||||
if (response.code === 200) {
|
||||
this.alarmInfoCount = response.data
|
||||
@@ -209,20 +209,20 @@ export default {
|
||||
: n
|
||||
: this.tabHandleClickType === 'All'
|
||||
? ''
|
||||
: this.tabHandleClickType,
|
||||
: this.tabHandleClickType
|
||||
}
|
||||
const query = {
|
||||
startTime: this.queryParams.startTime,
|
||||
endTime: this.queryParams.endTime,
|
||||
eventSeverity:
|
||||
this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType,
|
||||
this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType
|
||||
}
|
||||
this.$emit('getAlarmInfo', null, extraParams, false, {
|
||||
startTime: query.startTime,
|
||||
endTime: query.endTime,
|
||||
endTime: query.endTime
|
||||
})
|
||||
get('/interface/dns/alarmInfoCount', {
|
||||
...query,
|
||||
...query
|
||||
}).then((response) => {
|
||||
if (response.code === 200) {
|
||||
this.alarmInfoCount = response.data
|
||||
@@ -231,7 +231,7 @@ export default {
|
||||
},
|
||||
pageJump (val) {
|
||||
this.getData(val)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
<div style="display: flex; justify-content: space-between; width: 100%;">
|
||||
<el-descriptions :column="1" style="padding: 20px 30px;">
|
||||
<el-descriptions-item :label="$t('overall.appName') + ':'">{{$_.get(chartData, "name") || '-'}}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('overall.appFullName') + ':'">{{$_.get(chartData, "allName") || '-'}}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('overall.technology') + ':'">{{$_.get(chartData, "tech") || '-'}}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('overall.remark') + ':'">{{$_.get(chartData, "description") || '-'}}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('overall.appFullName') + ':'">{{$_.get(chartData, "appLongname") || '-'}}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('overall.technology') + ':'">{{$_.get(chartData, "appTechnology") || '-'}}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('overall.remark') + ':'">{{$_.get(chartData, "appDescription") || '-'}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div class="cn-chart__body-single">
|
||||
<div class="cn-chart__body-single-table">
|
||||
|
||||
@@ -83,7 +83,7 @@ export default {
|
||||
otherData.forEach(data => {
|
||||
otherSum = otherSum + data.num
|
||||
})
|
||||
chartDataTmp.push({'num':otherSum,'name':'other'})
|
||||
chartDataTmp.push({ num: otherSum, name: 'other' })
|
||||
} else if (this.chartData.length <= 5) {
|
||||
chartDataTmp = this.chartData.slice(0, this.chartData.length)
|
||||
chartDataTmp.forEach(data => {
|
||||
|
||||
@@ -139,7 +139,7 @@ export default {
|
||||
props: {
|
||||
chartInfo: Object,
|
||||
chartData: [Array, Object],
|
||||
queryParams: Object,
|
||||
queryParams: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -147,7 +147,7 @@ export default {
|
||||
color: '',
|
||||
type: 0,
|
||||
chartOption: null,
|
||||
timer: null,
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -158,8 +158,8 @@ export default {
|
||||
this.icon = n.params.icon
|
||||
this.color = n.params.color
|
||||
this.type = n.type
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
handleSingleValue () {
|
||||
@@ -214,7 +214,7 @@ export default {
|
||||
}
|
||||
return c
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chartSingleValueTotal () {
|
||||
@@ -234,29 +234,29 @@ export default {
|
||||
data: r.values.map((v) => [
|
||||
Number(v[0]) * 1000,
|
||||
Number(v[1]),
|
||||
chartParams.unitType,
|
||||
chartParams.unitType
|
||||
]),
|
||||
lineStyle: {
|
||||
color: getChartColor[i],
|
||||
},
|
||||
color: getChartColor[i]
|
||||
}
|
||||
}
|
||||
})
|
||||
myChart.setOption(this.chartOption)
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(
|
||||
() =>
|
||||
(this.timer = setTimeout(() => {
|
||||
this.chartSingleValueTotal()
|
||||
}, 200)),
|
||||
}, 200))
|
||||
)
|
||||
},
|
||||
deactivated () {
|
||||
clearTimeout(this.timer)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -39,10 +39,10 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
pageSizeForAlarm: {
|
||||
deep:true,
|
||||
deep: true
|
||||
},
|
||||
total: {
|
||||
deep:true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -35,13 +35,13 @@ export default {
|
||||
result: {
|
||||
doh: {
|
||||
count: 111,
|
||||
percent: 0.85,
|
||||
percent: 0.85
|
||||
},
|
||||
dot: {
|
||||
count: 111,
|
||||
percent: 80.85,
|
||||
},
|
||||
},
|
||||
percent: 80.85
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -84,14 +84,14 @@ export default {
|
||||
this.myChart2.setOption(this.chartOption)
|
||||
this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart2))
|
||||
}
|
||||
let _this = this
|
||||
window.addEventListener("resize", function(){
|
||||
const _this = this
|
||||
window.addEventListener('resize', function () {
|
||||
_this.$store.getters.getChartList.forEach(chart => {
|
||||
if (chart) {
|
||||
chart.resize()
|
||||
}
|
||||
})
|
||||
});
|
||||
})
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
this.$emit('showLoading', false)
|
||||
|
||||
@@ -223,11 +223,11 @@ export function getLayout (type) {
|
||||
|
||||
export function getGroupHeight (arr) {
|
||||
if (arr.length) {
|
||||
let minYArr = [...arr]
|
||||
const minYArr = [...arr]
|
||||
minYArr.sort((a, b) => {
|
||||
return a.y - b.y
|
||||
})
|
||||
let maxYArr = [...arr]
|
||||
const maxYArr = [...arr]
|
||||
maxYArr.sort((a, b) => {
|
||||
return (b.y + b.h) - (a.y + a.h)
|
||||
})
|
||||
|
||||
@@ -347,7 +347,7 @@ export default {
|
||||
const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`)
|
||||
const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption)
|
||||
|
||||
let xData = []
|
||||
const xData = []
|
||||
dataMap.forEach(function (value, key) {
|
||||
// eventSeverityTrendOption.series[Number(getSeriesIndex(key))].data = value.map(v => Number(v[1]))
|
||||
value.forEach(item => {
|
||||
@@ -357,13 +357,13 @@ export default {
|
||||
})
|
||||
})
|
||||
eventSeverityTrendOption.series.forEach(serie => {
|
||||
let seriesData = []
|
||||
const seriesData = []
|
||||
xData.forEach(item => {
|
||||
if (dataMap.has(serie.name)) {
|
||||
let hasX = dataMap.get(serie.name).some(function(v) {
|
||||
const hasX = dataMap.get(serie.name).some(function (v) {
|
||||
if (item == v[0]) {
|
||||
seriesData.push(Number(v[1]))
|
||||
return true;
|
||||
return true
|
||||
}
|
||||
})
|
||||
if (!hasX) {
|
||||
|
||||
@@ -254,13 +254,13 @@ export const activeAttackBar = {
|
||||
axisLabel: {
|
||||
show: true,
|
||||
width: 95,
|
||||
overflow:'truncate',
|
||||
overflow: 'truncate'
|
||||
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
triggerEvent: true,
|
||||
triggerEvent: true
|
||||
},
|
||||
series: [{
|
||||
barWidth: 5,
|
||||
|
||||
@@ -45,7 +45,12 @@
|
||||
<div class="overview__right">
|
||||
<div class="overview__title">{{$t('detections.goToEntity')}}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: detection.appName})}}</div>
|
||||
<div class="row__content">
|
||||
<span>{{ $t('detections.viewDetailOf') }}</span>
|
||||
<span
|
||||
class="row__content--link"
|
||||
@click="goDetail('app', detection.appName)">{{detection.appName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__title">{{$t('detections.goToHunt')}}</div>
|
||||
<div class="overview__row">
|
||||
@@ -116,11 +121,11 @@ export default {
|
||||
path: '/entityDetail',
|
||||
query: {
|
||||
entityType: type,
|
||||
name: name,
|
||||
},
|
||||
name: name
|
||||
}
|
||||
})
|
||||
window.open(href, '_blank')
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.query()
|
||||
|
||||
@@ -49,7 +49,12 @@
|
||||
<div class="overview__right">
|
||||
<div class="overview__title">{{$t('detections.goToEntity')}}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: detection.domain})}}</div>
|
||||
<div class="row__content">
|
||||
<span>{{ $t('detections.viewDetailOf') }}</span>
|
||||
<span
|
||||
class="row__content--link"
|
||||
@click="goDetail('domain', computeSecondaryDomain(detection.domain))">{{computeSecondaryDomain(detection.domain)}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__title">{{$t('detections.goToHunt')}}</div>
|
||||
<div class="overview__row">
|
||||
@@ -61,7 +66,7 @@
|
||||
|
||||
<script>
|
||||
import { api, getData } from '@/utils/api'
|
||||
import { eventSeverityColor } from '@/utils/constants'
|
||||
import { eventSeverityColor, topDomain } from '@/utils/constants'
|
||||
export default {
|
||||
name: 'DetectionPerformanceEventDomainOverview',
|
||||
props: {
|
||||
@@ -94,6 +99,32 @@ export default {
|
||||
}
|
||||
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)
|
||||
}
|
||||
})
|
||||
if (hits.length > 0) {
|
||||
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('.')
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -120,11 +151,11 @@ export default {
|
||||
path: '/entityDetail',
|
||||
query: {
|
||||
entityType: type,
|
||||
name: name,
|
||||
},
|
||||
name: name
|
||||
}
|
||||
})
|
||||
window.open(href, '_blank')
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.query()
|
||||
|
||||
@@ -39,7 +39,12 @@
|
||||
<div class="overview__right">
|
||||
<div class="overview__title">{{$t('detections.goToEntity')}}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: detection.serverIp})}}</div>
|
||||
<div class="row__content">
|
||||
<span>{{ $t('detections.viewDetailOf') }}</span>
|
||||
<span
|
||||
class="row__content--link"
|
||||
@click="goDetail('ip', detection.serverIp)">{{detection.serverIp}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__title">{{$t('detections.goToHunt')}}</div>
|
||||
<div class="overview__row">
|
||||
@@ -108,11 +113,11 @@ export default {
|
||||
path: '/entityDetail',
|
||||
query: {
|
||||
entityType: type,
|
||||
name: name,
|
||||
},
|
||||
name: name
|
||||
}
|
||||
})
|
||||
window.open(href, '_blank')
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.query()
|
||||
|
||||
@@ -173,9 +173,7 @@
|
||||
<span>{{ $t('detections.viewDetailOf') }}</span>
|
||||
<span
|
||||
class="row__content--link"
|
||||
@click="goDetail('ip', basicInfo.victimIp)"
|
||||
>{{ basicInfo.victimIp }}</span
|
||||
>
|
||||
@click="goDetail('ip', basicInfo.victimIp)"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__title">{{ $t('detections.goToOffender') }}</div>
|
||||
@@ -287,14 +285,14 @@ import _ from 'lodash'
|
||||
export default {
|
||||
name: 'DetectionOverview',
|
||||
props: {
|
||||
detection: Object,
|
||||
detection: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
eventSeverityColor,
|
||||
basicInfo: {},
|
||||
events: [],
|
||||
reference: 'https://attack.mitre.org',
|
||||
reference: 'https://attack.mitre.org'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -318,7 +316,7 @@ export default {
|
||||
unitTypes.time,
|
||||
's',
|
||||
null,
|
||||
0,
|
||||
0
|
||||
).join('')
|
||||
if (eventStartTime > entityStartTime) {
|
||||
return `T0+${suffix}`
|
||||
@@ -328,7 +326,7 @@ export default {
|
||||
}
|
||||
return ''
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMillisecond,
|
||||
@@ -337,7 +335,7 @@ export default {
|
||||
responses[0] && (this.basicInfo = responses[0])
|
||||
responses[1] &&
|
||||
(this.events = responses[1].sort(
|
||||
(e1, e2) => e1.startTime - e2.startTime,
|
||||
(e1, e2) => e1.startTime - e2.startTime
|
||||
))
|
||||
})
|
||||
},
|
||||
@@ -347,7 +345,7 @@ export default {
|
||||
get(api.detection.securityEvent.overviewBasic, {
|
||||
eventId: this.detection.eventId,
|
||||
startTime: this.detection.startTime,
|
||||
endTime: this.detection.endTime,
|
||||
endTime: this.detection.endTime
|
||||
}).then((response) => {
|
||||
if (response.code === 200) {
|
||||
resolve(response.data.result[0])
|
||||
@@ -366,7 +364,7 @@ export default {
|
||||
get(api.detection.securityEvent.overviewEvent, {
|
||||
startTime: this.detection.startTime,
|
||||
offenderIp: this.detection.offenderIp,
|
||||
victimIp: this.detection.victimIp,
|
||||
victimIp: this.detection.victimIp
|
||||
}).then((response) => {
|
||||
if (response.code === 200) {
|
||||
resolve(response.data.result)
|
||||
@@ -384,14 +382,14 @@ export default {
|
||||
path: '/entityDetail',
|
||||
query: {
|
||||
entityType: type,
|
||||
name: name,
|
||||
},
|
||||
name: name
|
||||
}
|
||||
})
|
||||
window.open(href, '_blank')
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.query()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -200,17 +200,17 @@ export default {
|
||||
name: 'Row',
|
||||
props: {
|
||||
index: Number,
|
||||
timeFilter: Object,
|
||||
timeFilter: Object
|
||||
},
|
||||
components: {
|
||||
DetailOverview,
|
||||
DetailOverview
|
||||
},
|
||||
mixins: [entityListMixin, entityDetailMixin, relatedServer],
|
||||
data () {
|
||||
return {
|
||||
isCollapse: true, // 是否是折叠状态
|
||||
trafficUrl: '',
|
||||
entityType: '',
|
||||
entityType: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -257,7 +257,7 @@ export default {
|
||||
}
|
||||
this.entityType = type
|
||||
return type
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
entityData: {
|
||||
@@ -281,13 +281,13 @@ export default {
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
return {
|
||||
unitConvert,
|
||||
unitTypes,
|
||||
unitTypes
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -309,7 +309,7 @@ export default {
|
||||
ip: this.entityType
|
||||
}
|
||||
return queryParams
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -4,19 +4,23 @@
|
||||
<div class="overview__content">
|
||||
<div class="overview__row">
|
||||
<div class="row__label row__label--width130">APP ID</div>
|
||||
<div class="row__content">{{entityData.appId|| '-'}}</div>
|
||||
<div class="row__content">{{entity.appId|| '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label row__label--width130">{{$t('entities.category')}}</div>
|
||||
<div class="row__content">{{entityData.appCategory|| '-'}}</div>
|
||||
<div class="row__content">{{entity.appCategory|| '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label row__label--width130">{{$t('entities.subcategory')}}</div>
|
||||
<div class="row__content">{{entityData.appSubcategory || '-'}}</div>
|
||||
<div class="row__content">{{entity.appSubcategory || '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label row__label--width130">{{$t('entities.riskLevel')}}</div>
|
||||
<div class="row__content">{{appRisk(entityData.appRisk) || '-'}}</div>
|
||||
<div class="row__content">{{appRisk(entity.appRisk) || '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label row__label--width130">{{$t('overall.remark')}}</div>
|
||||
<div class="row__content">{{entity.appDescription || '-'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user