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-22 11:09:13 +08:00
parent 754b0b0c60 f3c664bd5a
commit 20e782c49f
49 changed files with 1699 additions and 634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
babel.config.js
View File

@@ -12,7 +12,8 @@ module.exports = {
],
plugins: [
'@vue/babel-plugin-jsx',
'@babel/proposal-class-properties',
['@babel/proposal-class-properties', { loose: true }],
['@babel/plugin-proposal-private-methods', { loose: true }],
'@babel/transform-runtime',
'lodash'
],

8
src/assets/css/components/components/common/pagination.scss
View File

@@ -66,3 +66,11 @@
border-color: rgba(154,154,154,0.20);
}
}
.entity__pagination .pagination {
.el-pager li.more + li {
display: none;
}
.el-pager li.number:not(:last-of-type) {
display: inline-block !important;
}
}

2
src/assets/css/components/views/charts/chartSingleValue.scss
View File

@@ -201,7 +201,7 @@
.content__title {
display: flex;
align-items: end;
align-items: flex-end;
height: 50%;
font-size: 16px;
color: #666666;

4
src/assets/css/components/views/charts/panel.scss
View File

@@ -131,7 +131,7 @@
}
.header__operations {
display: flex;
justify-content: end;
justify-content: flex-end;
align-items: center;
.header__operation-btn {
@@ -225,7 +225,7 @@
border-bottom: 1px solid $--content-right-background-color;
.header__operations {
display: flex;
justify-content: end;
justify-content: flex-end;
align-items: center;
.header__operation.header__operation--echarts {

25
src/assets/css/components/views/detections/detection-overview.scss
View File

@@ -8,6 +8,18 @@
display: flex;
flex-direction: column;
.overview__metric {
display:flex;
flex-direction: row;
padding-top: 10px;
.metric__column {
display:flex;
flex-direction: column;
margin-right: 15px;
}
}
.overview__title {
padding: 10px 0;
color: #333;
@@ -33,6 +45,19 @@
color: #6B717B;
}
.row__charts {
height: 20px;
width: 80px;
}
.row__content--metric {
display: flex;
flex-wrap: nowrap;
color: #666666;
font-size:14px;
font-weight: 400;
}
.row__content {
display: flex;
color: #3976CB;

18
src/assets/css/font/iconfont.css
View File

@@ -1,8 +1,8 @@
@font-face {
font-family: "cn-icon"; /* Project id 2614877 */
src: url('iconfont.woff2?t=1647073084945') format('woff2'),
url('iconfont.woff?t=1647073084945') format('woff'),
url('iconfont.ttf?t=1647073084945') format('truetype');
src: url('iconfont.woff2?t=1647594989129') format('woff2'),
url('iconfont.woff?t=1647594989129') format('woff'),
url('iconfont.ttf?t=1647594989129') format('truetype');
}
.cn-icon {
@@ -13,6 +13,18 @@
-moz-osx-font-smoothing: grayscale;
}
.cn-icon-domain2:before {
content: "\e767";
}
.cn-icon-ip2:before {
content: "\e768";
}
.cn-icon-app2:before {
content: "\e769";
}
.cn-icon-intercept:before {
content: "\e600";
}

2
src/assets/css/font/iconfont.js
View File

File diff suppressed because one or more lines are too long

BIN
src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

8
src/components/common/Pagination.vue
View File

@@ -9,7 +9,7 @@
:current-page="pageObj.pageNo"
:page-sizes="pageSizes?pageSizes:[20, 50, 100]"
:page-size="Number(pageObj.pageSize)"
layout="total, prev, pager, next, slot"
:layout="layout"
:total="pageObj.total"
>
<el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini" :popper-append-to-body="appendToBody" class="pagination-size-select" @change="size" :popper-class="popClass" @visible-change="popperVisible">
@@ -31,7 +31,11 @@ export default {
tableId: {},
postPageSizes: {},
appendToBody: { default: true },
popClass: {}
popClass: {},
layout: {
type: String,
default: 'total, prev, pager, next, slot'
}
},
data () {
return {

6
src/components/entities/EntityList.vue
View File

@@ -171,15 +171,15 @@ export default {
let className
switch (this.from) {
case ('ip'): {
className = 'cn-icon cn-icon-ip ip-green'
className = 'cn-icon cn-icon-ip2 ip-green'
break
}
case ('domain'): {
className = 'cn-icon cn-icon-domain domain-blue'
className = 'cn-icon cn-icon-domain2 domain-blue'
break
}
case ('app'): {
className = 'cn-icon cn-icon-app app-orange'
className = 'cn-icon cn-icon-app2 app-orange'
break
}
default: break

2
src/components/layout/Header.vue
View File

@@ -18,7 +18,7 @@
<el-option v-for="(value, key) in entityType" :label="value" :key="key" :value="key">
<template v-if="value === entityType.ip"><i style="color: #23BF9A;" class="cn-icon cn-icon-ip"></i></template>
<template v-else-if="value === entityType.domain"><i style="color: #23BF9A;" class="cn-icon cn-icon-domain"></i></template>
<template v-else-if="value === entityType.app"><i style="color: #23BF9A;" class="cn-icon cn-icon-app"></i></template>
<template v-else-if="value === entityType.app"><i style="color: #23BF9A;" class="cn-icon cn-icon-app2"></i></template>
{{value}}
</el-option>
<template #prefix>

4
src/router/index.js
View File

@@ -49,6 +49,10 @@ const routes = [
{
path: '/chart',
component: () => import('@/views/settings/Chart')
},
{
path: '/temp',
component: () => import('@/views/Temp')
}
]
}

2
src/store/modules/panel.js
View File

@@ -15,7 +15,7 @@ const panel = {
x: 0,
y: 0
},
chartList:[]
chartList: []
},
mutations: {
setShowRightBox (state, flag) {

17
src/utils/api.js
View File

@@ -34,8 +34,6 @@ export const api = {
entityNew: '/interface/entity/index/new',
entityActive: '/interface/entity/index/active',
entityTraffic: '/interface/entity/list/traffic',
entityAlertNum: '/interface/entity/list/alertNum',
entitySecurityNum: '/interface/entity/list/detectionNum',
ipBytes: '/interface/entity/detail/ip/bytes',
domainBytes: '/interface/entity/detail/domain/bytes',
appBytes: '/interface/entity/detail/app/bytes',
@@ -45,8 +43,8 @@ export const api = {
entityAppDetailNetworkQuantity: '/interface/entity/detail/overview/app/networkQuantity',
entityAppDetailLinkIn: '/interface/entity/detail/overview/app/linkIn',
entityAppDetailLinkOut: '/interface/entity/detail/overview/app/linkOut',
entityAppDetailAlert: '/interface/entity/detail/overview/app/alert',
entityAppDetailSecurity: '/interface/entity/detail/overview/app/security',
entityAppDetailPerformance: '/interface/entity/detail/overview/app/performanceEvent',
entityAppDetailSecurity: '/interface/entity/detail/overview/app/securityEvent',
entityAppRelatedServerDomain: '/interface/entity/detail/overview/app/relatedDomain',
entityAppRelatedServerIp: '/interface/entity/detail/overview/app/relatedServerIp',
// domain detail
@@ -56,8 +54,8 @@ export const api = {
entityDomainDetailNetworkQuantity: '/interface/entity/detail/overview/domain/networkQuantity',
entityDomainDetailLinkIn: '/interface/entity/detail/overview/domain/linkIn',
entityDomainDetailLinkOut: '/interface/entity/detail/overview/domain/linkOut',
entityDomainDetailAlert: '/interface/entity/detail/overview/domain/alert',
entityDomainDetailSecurity: '/interface/entity/detail/overview/domain/security',
entityDomainDetailPerformance: '/interface/entity/detail/overview/domain/performanceEvent',
entityDomainDetailSecurity: '/interface/entity/detail/overview/domain/securityEvent',
entityDomainRelatedServerIp: '/interface/entity/detail/overview/domain/relatedServerIp',
entityDomainRelatedServerApp: '/interface/entity/detail/overview/domain/relatedApp',
// ip detail
@@ -69,8 +67,8 @@ export const api = {
entityIpDetailNetworkQuantity: '/interface/entity/detail/overview/ip/networkQuantity',
entityIpDetailLinkIn: '/interface/entity/detail/overview/ip/linkIn',
entityIpDetailLinkOut: '/interface/entity/detail/overview/ip/linkOut',
entityIpDetailAlert: '/interface/entity/detail/overview/ip/alert',
entityIpDetailSecurity: '/interface/entity/detail/overview/ip/security',
entityIpDetailPerformance: '/interface/entity/detail/overview/ip/performanceEvent',
entityIpDetailSecurity: '/interface/entity/detail/overview/ip/securityEvent',
entityIpRelatedServerDomain: '/interface/entity/detail/overview/ip/relatedDomain',
entityIpRelatedServerApp: '/interface/entity/detail/overview/ip/relatedApp',
// detection
@@ -95,7 +93,8 @@ export const api = {
activeEntity: '/interface/detection/performance/filter/activeEntity',
listBasic: '/interface/detection/performance/list/basic',
listCount: '/interface/detection/performance/list/count',
overviewBasic: '/interface/detection/performance/detail/overview/basic'
overviewBasic: '/interface/detection/performance/detail/overview/basic',
metric:'/interface/detection/performance/detail/overview/metric'
}
}
}

4
src/utils/constants.js
View File

File diff suppressed because one or more lines are too long

115
src/utils/tools.js
View File

@@ -1,7 +1,7 @@
import { ElMessageBox, ElMessage } from 'element-plus'
import i18n from '@/i18n'
import _ from 'lodash'
import { storageKey, iso36112 } from '@/utils/constants'
import { storageKey, iso36112, topDomain } from '@/utils/constants'
import { getIso36112JsonData } from '@/utils/api'
import { format } from 'echarts'
import router from '@/router'
@@ -461,68 +461,68 @@ export function humpToLine (name) {
}
return name.replace(/([A-Z])/g, '_$1').toLowerCase()
}
//排序功能:从大到小，降序排列
// 排序功能:从大到小，降序排列
export function reverseSortBy (i) {
return function (a, b) {
return b[i] - a[i]
}
}
//排序功能:从小到大，升序排列
// 排序功能:从小到大，升序排列
export function sortBy (i) {
return function (a, b) {
return a[i] - b[i]
}
}
//echart图标，y轴鼠标悬浮时，显示标签所有内容
export function extensionEchartY(chart){
//判断是否创建过div框,如果创建过就不再创建了
//该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
let id = document.getElementById("extension")
if(!id) {
let div = "<div id = 'extension' style=\"display:block\"></div>"
let contentDiv = document.createElement("div")
contentDiv.setAttribute('id','extension')
contentDiv.setAttribute('style','display:block')
// echart图标，y轴鼠标悬浮时，显示标签所有内容
export function extensionEchartY (chart) {
// 判断是否创建过div框,如果创建过就不再创建了
// 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
const id = document.getElementById('extension')
if (!id) {
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") {
//设置悬浮文本的位置以及样式
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;"
chart.on('mouseover', function (params) {
// 注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
if (params.componentType === 'yAxis') {
// 设置悬浮文本的位置以及样式
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;
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;"
extEle.innerHTML = params.value
document.documentElement.onmousemove = function (event) {
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;"
chart.on('mouseout', function (params) {
// 注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
if (params.componentType == 'yAxis') {
const extEle = document.getElementById('extension')
extEle.style.cssText = 'display:none;'
}
})
}
@@ -606,6 +606,31 @@ export function copyValue (item) {
ElMessage.success(i18n.global.t('tip.copySuccess'))
}
export function computeSecondaryDomain (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('.')
}
export function getCurrentRoute () {
return router.currentRoute && router.currentRoute.path
}

113
src/views/Temp.vue Normal file
View File

@@ -0,0 +1,113 @@
<template>
<div style="overflow: auto;height: 100%;">
<div style="height: 8000px; overflow: auto; width: 100%; display: flex; flex-direction: column; align-content: center; background-color: white;">
<!-- <div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">session/s</div>
<div id="lineCanvas1" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">bytes</div>
<div id="lineCanvas2" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">rate</div>
<div id="lineCanvas3" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">行程卡流量数据 rate</div>
<div id="lineCanvas6" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>-->
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">流量变化曲线</div>
<div id="lineCanvas" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
<!-- <div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">协议占比</div>
<div id="pieCanvas0" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">APP占比</div>
<div id="pieCanvas1" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">域名占比</div>
<div id="pieCanvas2" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">IP占比</div>
<div id="pieCanvas3" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">出占比</div>
<div id="pieCanvas4" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>
<div style="padding-left: 30px; font-size: 18px; font-weight: bold; color: #666;">入占比</div>
<div id="pieCanvas5" style="margin-bottom: 100px; height: 500px; width: 100%;"></div>-->
</div>
</div>
</template>
<script>
import { lineData, lineOption } from './testData'
import * as echarts from 'echarts'
import { getMillisecond } from '@/utils/date-util'
import unitConvert from '@/utils/unit-convert'
import { unitTypes } from '@/utils/constants'
export default {
name: 'Temp',
methods: {
/*initLine (lineData, index) {
const data = lineData.map(d => {
return [getMillisecond(new Date(d[0]).getTime()), d[index]]
})
const option = this.$_.cloneDeep(lineOption2)
option.series.data = data
if (index === 1) {
option.yAxis.axisLabel.formatter = function (params) {
return unitConvert(params, unitTypes.number).join(' ')
}
} else if (index === 2) {
option.yAxis.axisLabel.formatter = function (params) {
return unitConvert(params, unitTypes.byte).join(' ')
}
} else if (index === 3) {
option.yAxis.axisLabel.formatter = function (params) {
const arr = unitConvert(params, unitTypes.byte).join(' ')
return arr.replace(/B/g, 'bps')
}
} else if (index === 6) {
option.yAxis.axisLabel.formatter = function (params) {
const arr = unitConvert(params, unitTypes.byte).join(' ')
return arr.replace(/B/g, 'Mbps')
}
}
const dom = document.getElementById(`lineCanvas${index}`)
const lineChart = echarts.init(dom)
this.$nextTick(() => {
lineChart.setOption(option)
})
},*/
initLineChart () {
// 数据转为需要的格式：[[timestamp, value]]
const data = lineData.map(d => {
return [getMillisecond(new Date(d[2]).getTime()), d[1]]
})
const option = this.$_.cloneDeep(lineOption)
option.series.data = data
const dom = document.getElementById('lineCanvas')
const lineChart = echarts.init(dom)
this.$nextTick(() => {
lineChart.setOption(option)
})
},
/* initPie (index) {
const data = pieData[index].map(p => {
return {
value: parseFloat(p[1].replace('%', '')).toFixed(2),
name: p[0]
}
})
const option = this.$_.cloneDeep(pieOption)
option.series[0].data = data
const dom = document.getElementById(`pieCanvas${index}`)
const pieChart = echarts.init(dom)
this.$nextTick(() => {
pieChart.setOption(option)
})
} */
},
mounted () {
/*this.initLine(lineData2, 1)
this.initLine(lineData2, 2)
this.initLine(lineData2, 3)
this.initLine(lineData3, 6)*/
this.initLineChart()
/* this.initPie(0)
this.initPie(1)
this.initPie(2)
this.initPie(3)
this.initPie(4)
this.initPie(5) */
}
}
</script>

34
src/views/charts/Chart.vue
View File

@@ -352,9 +352,9 @@ export default {
ChartAlarmInfo,
ChartDomainRecursiveResolve
},
data() {
data () {
return {
tabHandleClickType: '',
tabHandleClickType: ''
}
},
props: {
@@ -374,7 +374,7 @@ export default {
tabHandleClickType: String
},
computed: {
isNoData() {
isNoData () {
return (
!this.loading &&
(_.isEmpty(this.chartData) || this.isError) &&
@@ -389,47 +389,47 @@ export default {
!this.isAlarmInfo
)
},
chartOption() {
chartOption () {
if (this.customChartOption) {
return _.cloneDeep(this.customChartOption)
} else {
return getOption(this.chartInfo.type)
}
},
}
},
methods: {
resize() {
resize () {
this.$refs['chart' + this.chartInfo.id] &&
this.$refs['chart' + this.chartInfo.id].resize()
},
showLoading(show) {
showLoading (show) {
this.$emit('showLoading', show)
},
getAlarmInfo(url, extraParams, isRefresh, timeFilter) {
getAlarmInfo (url, extraParams, isRefresh, timeFilter) {
this.$emit('getChartData', url, extraParams, isRefresh, timeFilter)
},
getChartData(url, extraParams) {
getChartData (url, extraParams) {
this.$emit('getChartData', url, extraParams)
},
initEchartsWithTable() {
initEchartsWithTable () {
this.$refs['chart' + this.chartInfo.id] &&
this.$refs['chart' + this.chartInfo.id].initEchartsWithTable(
`chart${this.chartInfo.id}`,
`chart${this.chartInfo.id}`
)
},
query(params) {
query (params) {
this.$emit('query', params)
},
}
},
watch: {
tabHandleClickType: {
deep: true,
handler(n) {
handler (n) {
this.tabHandleClickType = n
},
}
}
},
setup(props) {
setup (props) {
return {
isEcharts: isEcharts(props.chartInfo.type),
isEchartsLine: isEchartsLine(props.chartInfo.type),
@@ -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),

66
src/views/charts/ChartHeader.vue
View File

@@ -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,19 +255,19 @@ 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() {
data () {
return {
chartTableColumnMapping,
dropdownMenuShow: false,
@@ -280,37 +280,37 @@ 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: {
refresh() {
refresh () {
this.$emit('refresh')
},
timeRefreshChange() {
timeRefreshChange () {
// 不是自选时间
if (!this.$refs.dateTimeRange.isCustom) {
const value = this.chartTimeFilter.dateRangeValue
@@ -319,26 +319,26 @@ export default {
this.$emit('refresh', this.chartTimeFilter)
}
},
reload(s, e, v) {
reload (s, e, v) {
this.dateTimeRangeChange(s, e, v)
},
groupShow() {
groupShow () {
this.$emit('groupShow', this.chartInfo)
},
dateTimeRangeChange(s, e, v) {
dateTimeRangeChange (s, e, v) {
this.chartTimeFilter = { startTime: s, endTime: e, dateRangeValue: v }
this.$emit('refresh', this.chartTimeFilter)
},
tableLimitChange() {
tableLimitChange () {
this.$emit('tableChange')
},
activeIpTableLimitChange() {
activeIpTableLimitChange () {
this.$emit('tableChange')
},
orderPieTableChange() {
orderPieTableChange () {
this.$emit('orderPieTableChange', this.orderPieTable)
},
tabHandleClick(item) {
tabHandleClick (item) {
this.isFocus = item
if (item === 'All') {
this.isFocusAll = true
@@ -346,24 +346,24 @@ export default {
this.isFocusAll = false
}
this.$emit('tabHandleClick', item)
},
}
},
watch: {
isFocus: {
deep: true,
handler(n) {},
},
handler (n) {}
}
},
computed: {
showRefreshButton() {
showRefreshButton () {
// 自己是group且父元素是block时，不显示刷新按钮
// TODO 父元素是block，且只有自己一个子元素时，不显示刷新按钮
const isGroupAndParentIsBlock =
this.$_.get(this.chartInfo.parent, 'type') === 95 && this.isGroup
return !isGroupAndParentIsBlock
},
}
},
setup(props) {
setup (props) {
const dateRangeValue = 60
const { startTime, endTime } = getNowTime(dateRangeValue)
// entity详情内的chart时间工具不是公共的，需要单独定义
@@ -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>

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

@@ -181,10 +181,10 @@ export default {
this.queryTimeRange = { startTime: getSecond(this.chartTimeFilter.startTime), endTime: getSecond(this.chartTimeFilter.endTime) }
}
const chartParams = this.chartInfo.params
if(isAlarmInfo && JSON.stringify(extraParams) === '{}'){
if (isAlarmInfo && JSON.stringify(extraParams) === '{}') {
extraParams = {
pageNo : 1,
pageSize : 9
pageNo: 1,
pageSize: 9
}
}
// 接口查询参数
@@ -426,7 +426,7 @@ export default {
isCryptocurrencyEventList: isCryptocurrencyEventList(props.chartInfo.type),
isAppBasicInfo: isAppBasicInfo(props.chartInfo.type),
isAppRelatedDomain: isAppRelatedDomain(props.chartInfo.type),
isAlarmInfo:isAlarmInfo(props.chartInfo.type)
isAlarmInfo: isAlarmInfo(props.chartInfo.type)
}
}
}

2
src/views/charts/charts/ChartActiveIpTable.vue
View File

@@ -28,7 +28,7 @@
v-for="(c, i) in table.tableColumns"
show-overflow-tooltip
:key="i"
:label="$t(chartTableOrderOptionsMapping[c])"
:label="c"
:prop="c"
>
<template #default="{ row }">

50
src/views/charts/charts/ChartAlarmInfo.vue
View File

@@ -119,16 +119,16 @@ export default {
chartInfo: Object,
chartData: [Array, Object],
tabHandleClickType: String,
queryParams: Object,
queryParams: Object
},
data() {
data () {
return {
pageSizeForAlarm: 9,
eventSeverityColor: eventSeverityColor,
pageNo: 1,
alarmInfoCount: {},
fromChartData: '',
isNoData:false
isNoData: false
// result: [
// {
// entityType: 'ip',
@@ -145,52 +145,52 @@ export default {
}
},
computed: {
isNoData() {
isNoData () {
let isNoData = true
if (!this.$_.isEmpty(this.chartData)) {
isNoData = false
}
return isNoData
},
}
},
watch: {
tabHandleClickType: {
deep: true,
handler(n) {
handler (n) {
this.$nextTick(() => {
this.getData(1, n)
})
},
}
},
alarmInfoCount: {
deep: true,
handler(n) {},
handler (n) {}
},
queryParams: {
deep: true,
handler(n) {
handler (n) {
if (n.startTime && n.endTime) {
this.getCount(1)
}
},
},
}
}
},
components: {
ChartTablePagination,
ChartTablePagination
},
methods: {
unitConvert,
getMillisecond,
getCount() {
let countQuery = {
getCount () {
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
@@ -198,7 +198,7 @@ export default {
})
})
},
getData(val, n) {
getData (val, n) {
this.pageNo = val
const extraParams = {
pageNo: val,
@@ -208,30 +208,30 @@ 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
}
})
},
pageJump(val) {
pageJump (val) {
this.getData(val)
},
},
}
}
}
</script>

6
src/views/charts/charts/ChartAppBasicInfo.vue
View File

@@ -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">

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

@@ -38,10 +38,10 @@ export default {
this.handleYaxis()
if (this.isEchartsPie) {
if(chartParams.size && chartParams.size === 'small'){
if (chartParams.size && chartParams.size === 'small') {
this.chartOption.series[0] = {
...this.chartOption.series[0],
radius : ['30%', '45%'],
radius: ['30%', '45%'],
label: {
show: false
},
@@ -51,18 +51,18 @@ export default {
}
this.chartOption.legend = {
...this.chartOption.legend,
left :'60%',
itemGap:5,
itemWidth:8,
itemHeight:8,
left: '60%',
itemGap: 5,
itemWidth: 8,
itemHeight: 8,
formatter: function (name) {
return name.length > 9 ? name.substr(0, 9) + '...' : name
//return echarts.format.truncateText(name, 6, '…');
// return echarts.format.truncateText(name, 6, '…');
},
tooltip: {
show: true
},
textStyle: { //图例文字的样式
textStyle: { // 图例文字的样式
color: '#666666',
fontSize: 12,
fontWeight: 400
@@ -72,23 +72,23 @@ export default {
let otherData = []
this.chartData.sort(reverseSortBy('num'))
if(this.chartData.length>5){
if (this.chartData.length > 5) {
chartDataTmp = this.chartData.slice(0, 5)
chartDataTmp.forEach(data=>{
if(data.name===''){
chartDataTmp.forEach(data => {
if (data.name === '') {
data.name = ' '
}
})
let otherSum = 0
otherData = this.chartData.slice(5)
otherData.forEach(data=>{
otherSum = otherSum+data.num
otherData.forEach(data => {
otherSum = otherSum + data.num
})
chartDataTmp.push({'num':otherSum,'name':'other'})
} else if(this.chartData.length<=5){
chartDataTmp.push({ num: otherSum, name: 'other' })
} else if (this.chartData.length <= 5) {
chartDataTmp = this.chartData.slice(0, this.chartData.length)
chartDataTmp.forEach(data=>{
if(data.name===''){
chartDataTmp.forEach(data => {
if (data.name === '') {
data.name = ' '
}
})
@@ -102,7 +102,7 @@ export default {
unitType: chartParams.unitType ? chartParams.unitType : 'number'
}
})
}else {
} else {
this.chartOption.series[0].data = this.chartData.map(d => {
return {
name: lineToSpace(d.name),

38
src/views/charts/charts/ChartSingleValue.vue
View File

@@ -139,30 +139,30 @@ export default {
props: {
chartInfo: Object,
chartData: [Array, Object],
queryParams: Object,
queryParams: Object
},
data() {
data () {
return {
icon: '',
color: '',
type: 0,
chartOption: null,
timer: null,
timer: null
}
},
watch: {
chartInfo: {
deep: true,
immediate: true,
handler(n) {
handler (n) {
this.icon = n.params.icon
this.color = n.params.color
this.type = n.type
},
},
}
}
},
computed: {
handleSingleValue() {
handleSingleValue () {
const value =
this.$_.isEmpty(this.chartData) || this.$_.get(this, 'chartData')
? this.chartData
@@ -185,7 +185,7 @@ export default {
}
return result
},
singleValueClass() {
singleValueClass () {
return function (type) {
let c
switch (type) {
@@ -214,10 +214,10 @@ export default {
}
return c
}
},
}
},
methods: {
chartSingleValueTotal() {
chartSingleValueTotal () {
const chartParams = this.$_.get(this.chartInfo, 'params') || {}
if (this.type === 52) {
const dom = document.getElementById(`chart${this.chartInfo.id}`)
@@ -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() {
mounted () {
this.$nextTick(
() =>
(this.timer = setTimeout(() => {
this.chartSingleValueTotal()
}, 200)),
}, 200))
)
},
deactivated() {
deactivated () {
clearTimeout(this.timer)
},
}
}
</script>

10
src/views/charts/charts/ChartTablePagination.vue
View File

@@ -37,12 +37,12 @@ export default {
}
}
},
watch:{
pageSizeForAlarm:{
deep:true,
watch: {
pageSizeForAlarm: {
deep: true
},
total:{
deep:true,
total: {
deep: true
}
},
methods: {

8
src/views/charts/charts/ChartTwoSituationStatistics.vue
View File

@@ -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
}
}
}
}
}

10
src/views/charts/charts/chart-echart-mixin.js
View File

@@ -85,14 +85,14 @@ export default {
this.myChart2.setOption(this.chartOption)
this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart2))
}
let _this = this
window.addEventListener("resize", function(){
_this.$store.getters.getChartList.forEach(chart =>{
if(chart){
const _this = this
window.addEventListener('resize', function () {
_this.$store.getters.getChartList.forEach(chart => {
if (chart) {
chart.resize()
}
})
});
})
} finally {
setTimeout(() => {
this.$emit('showLoading', false)

6
src/views/charts/charts/options/bar.js
View File

@@ -1,11 +1,9 @@
import unitConvert from '@/utils/unit-convert'
import { unitTypes } from '@/utils/constants'
import { unitTypes, chartColor } from '@/utils/constants'
import {
categoryVerticalFormatter,
chartColor,
getCharBartColor,
timeVerticalFormatter,
tooLongFormatter
timeVerticalFormatter
} from '@/views/charts/charts/tools'
export const ipOpenPortBar = {

8
src/views/charts/charts/tools.js
View File

@@ -223,16 +223,16 @@ 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)
})
return maxYArr[0].y + maxYArr[0].h - minYArr[0].y
/*let lastItem = []
/* let lastItem = []
let maxY = arr[0].y
arr.forEach((children, index) => {
if (maxY === children.y) {
@@ -251,7 +251,7 @@ export function getGroupHeight (arr) {
if (maxY < 0) {
maxY = 0
}
return maxHeight + maxY*/
return maxHeight + maxY */
} else {
return 1
}

6
src/views/detections/DetectionRow.vue
View File

@@ -133,15 +133,15 @@ export default {
let className
switch (this.detection.entityType) {
case ('ip'): {
className = 'cn-icon cn-icon-ip'
className = 'cn-icon cn-icon-ip2'
break
}
case ('domain'): {
className = 'cn-icon cn-icon-domain'
className = 'cn-icon cn-icon-domain2'
break
}
case ('app'): {
className = 'cn-icon cn-icon-app'
className = 'cn-icon cn-icon-app2'
break
}
default:

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

@@ -112,7 +112,7 @@ import { ref } from 'vue'
import * as echarts from 'echarts'
import { multipleBarOption, pieForSeverity, activeAttackBar, getAttackColor, getSeverityColor, getSeriesIndex } from '@/views/detections/options/detectionOptions'
import { api, getData } from '@/utils/api'
import { reverseSortBy ,sortBy ,extensionEchartY} from '@/utils/tools'
import { reverseSortBy, sortBy, extensionEchartY } from '@/utils/tools'
import { useRoute } from 'vue-router'
import DetectionNoData from '@/views/detections/DetectionNoData'
@@ -237,7 +237,7 @@ export default {
initEventSeverityTrendData (params) {
this.loading = true
getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => {
/*data = [
/* data = [
{
"statTime": "2022-01-01T10:07:03.008Z",
"eventSeverity": "critical",
@@ -329,7 +329,7 @@ export default {
"eventSeverity": "info",
"count": 27
},
]*/
] */
this.eventSeverityData = data
if (!this.$_.isEmpty(data)) {
const dataMap = new Map()
@@ -347,36 +347,36 @@ 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]))
// eventSeverityTrendOption.series[Number(getSeriesIndex(key))].data = value.map(v => Number(v[1]))
value.forEach(item => {
if(xData.indexOf(item[0]) < 0){
if (xData.indexOf(item[0]) < 0) {
xData.push(item[0])
}
})
})
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) {
if (dataMap.has(serie.name)) {
const hasX = dataMap.get(serie.name).some(function (v) {
if (item == v[0]) {
seriesData.push(Number(v[1]))
return true;
return true
}
})
if(!hasX){
if (!hasX) {
seriesData.push(0)
}
}else {
} else {
seriesData.push(0)
}
})
serie.data = seriesData
})
//eventSeverityTrendOption.xAxis.data = dataMap.get('info').map(v => rTime(v[0]))
// eventSeverityTrendOption.xAxis.data = dataMap.get('info').map(v => rTime(v[0]))
eventSeverityTrendOption.xAxis.data = xData
const detectionChart = echarts.init(chartDom)
detectionChart.setOption(eventSeverityTrendOption)
@@ -709,7 +709,7 @@ export default {
return [d.count, d.name]
}).reverse()
detectionChart.setOption(option)
extensionEchartY(detectionChart)//y轴标签过长时，鼠标悬浮，显示所有内容
extensionEchartY(detectionChart)// y轴标签过长时，鼠标悬浮，显示所有内容
}
}).catch(error => {
})

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

@@ -1,6 +1,7 @@
import {
chartColor,
tooLongFormatter
tooLongFormatter,
axisFormatter
} from '@/views/charts/charts/tools'
import unitConvert from '@/utils/unit-convert'
import _ from 'lodash'
@@ -104,7 +105,7 @@ export const multipleBarOption = {
{
name: 'critical',
type: 'bar',
stack:'eventSeverityTrend',
stack: 'eventSeverityTrend',
emphasis: {
focus: 'series'
},
@@ -117,7 +118,7 @@ export const multipleBarOption = {
{
name: 'high',
type: 'bar',
stack:'eventSeverityTrend',
stack: 'eventSeverityTrend',
emphasis: {
focus: 'series'
},
@@ -130,7 +131,7 @@ export const multipleBarOption = {
{
name: 'medium',
type: 'bar',
stack:'eventSeverityTrend',
stack: 'eventSeverityTrend',
emphasis: {
focus: 'series'
},
@@ -143,7 +144,7 @@ export const multipleBarOption = {
{
name: 'low',
type: 'bar',
stack:'eventSeverityTrend',
stack: 'eventSeverityTrend',
emphasis: {
focus: 'series'
},
@@ -156,7 +157,7 @@ export const multipleBarOption = {
{
name: 'info',
type: 'bar',
stack:'eventSeverityTrend',
stack: 'eventSeverityTrend',
emphasis: {
focus: 'series'
},
@@ -253,14 +254,14 @@ export const activeAttackBar = {
axisLine: { show: false },
axisLabel: {
show: true,
width:95,
overflow:'truncate',
width: 95,
overflow: 'truncate'
},
splitLine: {
show: false
},
triggerEvent: true,
triggerEvent: true
},
series: [{
barWidth: 5,
@@ -286,3 +287,93 @@ export const activeAttackBar = {
barCategoryGap: '10%'
}]
}
export const metricOption = {
tooltip: {
show:true,
trigger: 'axis',
formatter(params){
let str = '<div>'
let item = params[0]
const tData = item.data[0]
str += '<div style="margin-bottom: 5px">'
str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
str += '</div>'
str += '<div class="cn-chart-tooltip-box">'
str += item.marker
str += `<span class="cn-chart-tooltip-content">
${item.seriesName}
</span>`
str += `<span class="cn-chart-tooltip-value">
${unitConvert(item.data[1], item.data[2]).join(' ')}
</span>`
str += '</div>'
return str
},
className: 'nz-chart-tooltip',
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important',
textStyle: {
width: '20px',
overflow: 'truncate'
},
appendToBody: true
},
xAxis: {
type: 'time',
show: false
},
yAxis: {
type: 'value',
show: false
},
animation: false,
grid: {
left: 0,
bottom: 2,
top: 5,
right: 0
},
legend: {
show: false
},
series: [
{
name:'metric',
type: 'line',
legendHoverLink: false,
lineStyle: {
width: 1,
type:'dashed'
},
color: '#ec836c',
data: [],
showSymbol: false
},
{
name:'metric',
type: 'line',
legendHoverLink: false,
lineStyle: {
width: 1,
type:'solid'
},
areaStyle: {
color: 'rgba(244, 187, 174, 0.59)'
},
color: '#ec836c',
data: [],
showSymbol: false
},
{
name:'metric',
type: 'line',
legendHoverLink: false,
lineStyle: {
width: 1,
type:'dashed'
},
color: '#ec836c',
data: [],
showSymbol: false
}
]
}

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

@@ -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> &nbsp;
<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">
@@ -56,8 +61,15 @@
</template>
<script>
import { api, getData } from '@/utils/api'
import { eventSeverityColor } from '@/utils/constants'
import { api, getData } from '@/utils/api'
import { unitTypes } from '@/utils/constants'
import { getSecond } from '@/utils/date-util'
import { get } from '@/utils/http'
import * as echarts from 'echarts'
import { markRaw } from 'vue'
import { metricOption } from '@/views/detections/options/detectionOptions'
import { sortBy,reverseSortBy } from '@/utils/tools'
export default {
name: 'DetectionPerformanceEventAppOverview',
props: {
@@ -66,7 +78,8 @@ export default {
data () {
return {
eventSeverityColor,
basicInfo: {}
basicInfo: {},
metricList:[],
}
},
computed: {
@@ -97,7 +110,74 @@ export default {
this.queryBasic().then(responses => {
responses && (this.basicInfo = responses)
})
this.queryMetric().then(responses => {
responses && (this.metricList = responses.values)
if(this.metricList.length>0){
this.initChart()
}else {
let chartDom = document.getElementById('detectionMetricChartDomain')
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}
}).catch(error => {
console.log(error)
}).finally(() => {
setTimeout(() => {
try {
this.$nextTick(() => {
this.metricChart && this.metricChart.resize()
})
} catch (e) {}
}, 250)
})
},
initChart(){
this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartDomain')))
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)
},
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 {
@@ -111,19 +191,24 @@ export default {
}
})
},
goDetail(type, name) {
goDetail (type, name) {
const { href } = this.$router.resolve({
path: '/entityDetail',
query: {
entityType: type,
name: name,
},
name: name
}
})
window.open(href, '_blank')
},
}
},
mounted () {
this.query()
}
},
setup () {
return {
chartOption: metricOption,
}
},
}
</script>

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

@@ -5,10 +5,9 @@
<div class="overview__row">
<div class="row__content">
<span
class="row__content--link"
@click="goDetail('domain', detection.domain)"
>{{ detection.domain }}</span
>
class="row__content--link"
@click="goDetail('domain', computeSecondaryDomain(detection.domain))"
>{{ computeSecondaryDomain(detection.domain) }}</span>
<template v-if="detection.eventType === 'dns error'">
<span>
{{$t('detections.dnsQueryError')}}
@@ -49,85 +48,225 @@
<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> &nbsp;
<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">
<div class="row__content row__content--link">{{$t('detections.viewAllRelated')}}</div>
</div>
<div class="overview__metric">
<div class="metric__column">
<div class="overview__title">{{$t('detections.metric')}}</div>
<div class="overview__row">
<div class="row__content--metric ">{{detection.domain || '-'}}</div>
</div>
</div>
<div class="metric__column">
<div class="overview__title">{{$t('detections.value')}}</div>
<div class="overview__row">
<div class="row__charts" id="detectionMetricChartDomain" ></div>
</div>
</div>
<div class="metric__column">
<div class="overview__title">{{$t('detections.startTime')}}</div>
<div class="overview__row">
<div class="row__content--metric ">{{dayJs.tz(detection.startTime*1000).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
</div>
</div>
<div class="metric__column">
<div class="overview__title">{{$t('detections.endTime')}}</div>
<div class="overview__row">
<div class="row__content--metric ">{{dayJs.tz(detection.endTime*1000).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { api, getData } from '@/utils/api'
import { eventSeverityColor } from '@/utils/constants'
export default {
name: 'DetectionPerformanceEventDomainOverview',
props: {
detection: Object
},
data () {
return {
eventSeverityColor,
basicInfo: {}
}
},
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 || '-'
import { api, getData } from '@/utils/api'
import { eventSeverityColor,unitTypes ,topDomain} from '@/utils/constants'
import { getSecond } from '@/utils/date-util'
import { get } from '@/utils/http'
import * as echarts from 'echarts'
import { markRaw } from 'vue'
import { metricOption } from '@/views/detections/options/detectionOptions'
import { sortBy,reverseSortBy } from '@/utils/tools'
export default {
name: 'DetectionPerformanceEventDomainOverview',
props: {
detection: Object
},
data () {
return {
eventSeverityColor,
basicInfo: {},
metricList:[],
metricChart: null,
searchStartTime:null,
searchEndTime:null
}
}
},
methods: {
query () {
this.queryBasic().then(responses => {
responses && (this.basicInfo = responses)
})
},
queryBasic () {
return new Promise((resolve, reject) => {
try {
getData(api.detection.performanceEvent.overviewBasic, { appName: this.detection.appName, startTime: this.detection.startTime }).then(data => {
resolve(data[0])
}).catch(error => {
reject(error)
})
} catch (e) {
reject(e)
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 || '-'
}
})
},
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('.')
}
}
},
goDetail(type, name) {
const { href } = this.$router.resolve({
path: '/entityDetail',
query: {
entityType: type,
name: name,
},
})
window.open(href, '_blank')
methods: {
query () {
this.queryBasic().then(responses => {
responses && (this.basicInfo = responses)
})
this.queryMetric().then(responses => {
responses && (this.metricList = responses.values)
if(this.metricList.length>0){
this.initChart()
}else {
let chartDom = document.getElementById('detectionMetricChartDomain')
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}
}).catch(error => {
console.log(error)
}).finally(() => {
setTimeout(() => {
try {
this.$nextTick(() => {
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)
},
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')
}
},
mounted () {
this.query()
},
setup () {
return {
chartOption: metricOption,
}
},
},
mounted () {
this.query()
}
}
</script>
</script>

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

@@ -39,18 +39,57 @@
<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> &nbsp;
<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">
<div class="row__content row__content--link">{{$t('detections.viewAllRelated')}}</div>
</div>
<div class="overview__metric">
<div class="metric__column">
<div class="overview__title">{{$t('detections.metric')}}</div>
<div class="overview__row">
<div class="row__content--metric ">{{detection.serverIp || '-'}}</div>
</div>
</div>
<div class="metric__column">
<div class="overview__title">{{$t('detections.value')}}</div>
<div class="overview__row">
<div class="row__charts" id="detectionMetricChartIp" ></div>
</div>
</div>
<div class="metric__column">
<div class="overview__title">{{$t('detections.startTime')}}</div>
<div class="overview__row">
<div class="row__content--metric ">{{dayJs.tz(detection.startTime*1000).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
</div>
</div>
<div class="metric__column">
<div class="overview__title">{{$t('detections.endTime')}}</div>
<div class="overview__row">
<div class="row__content--metric ">{{dayJs.tz(detection.endTime*1000).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { api, getData } from '@/utils/api'
import { unitTypes } from '@/utils/constants'
import { getSecond } from '@/utils/date-util'
import { get } from '@/utils/http'
import * as echarts from 'echarts'
import { markRaw } from 'vue'
import { metricOption } from '@/views/detections/options/detectionOptions'
import { sortBy,reverseSortBy } from '@/utils/tools'
export default {
name: 'DetectionPerformanceEventIpOverview',
props: {
@@ -58,7 +97,11 @@ export default {
},
data () {
return {
basicInfo: {}
basicInfo: {},
metricList:[],
metricChart: null,
searchStartTime:null,
searchEndTime:null
}
},
computed: {
@@ -89,7 +132,75 @@ export default {
this.queryBasic().then(responses => {
responses && (this.basicInfo = responses)
})
this.queryMetric().then(responses => {
responses && (this.metricList = responses.values)
if(this.metricList.length>0){
this.initChart()
}else {
let chartDom = document.getElementById('detectionMetricChartDomain')
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}
}).catch(error => {
console.log(error)
}).finally(() => {
setTimeout(() => {
try {
this.$nextTick(() => {
this.metricChart && this.metricChart.resize()
})
} catch (e) {}
}, 250)
})
},
initChart(){
this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartIp')))
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)
},
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 {
@@ -103,19 +214,24 @@ export default {
}
})
},
goDetail(type, name) {
goDetail (type, name) {
const { href } = this.$router.resolve({
path: '/entityDetail',
query: {
entityType: type,
name: name,
},
name: name
}
})
window.open(href, '_blank')
},
}
},
mounted () {
this.query()
}
} ,
setup () {
return {
chartOption: metricOption,
}
},
}
</script>

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

@@ -173,9 +173,7 @@
<span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
<span
class="row__content--link"
@click="goDetail('ip', basicInfo.victimIp)"
>{{ basicInfo.victimIp }}</span
>
@click="goDetail('ip', basicInfo.victimIp)">{{ basicInfo.victimIp }}</span>
</div>
</div>
<div class="overview__title">{{ $t('detections.goToOffender') }}</div>
@@ -287,18 +285,18 @@ import _ from 'lodash'
export default {
name: 'DetectionOverview',
props: {
detection: Object,
detection: Object
},
data() {
data () {
return {
eventSeverityColor,
basicInfo: {},
events: [],
reference: 'https://attack.mitre.org',
reference: 'https://attack.mitre.org'
}
},
computed: {
formatT0() {
formatT0 () {
const vm = this
return function (event) {
const diffSeconds = event.diffSeconds
@@ -318,7 +316,7 @@ export default {
unitTypes.time,
's',
null,
0,
0
).join('')
if (eventStartTime > entityStartTime) {
return `T0+${suffix}`
@@ -328,26 +326,26 @@ export default {
}
return ''
}
},
}
},
methods: {
getMillisecond,
query() {
query () {
Promise.all([this.queryBasic(), this.queryEvent()]).then((responses) => {
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
))
})
},
queryBasic() {
queryBasic () {
return new Promise((resolve, reject) => {
try {
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])
@@ -360,13 +358,13 @@ export default {
}
})
},
queryEvent() {
queryEvent () {
return new Promise((resolve, reject) => {
try {
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)
@@ -379,19 +377,19 @@ export default {
}
})
},
goDetail(type, name) {
goDetail (type, name) {
const { href } = this.$router.resolve({
path: '/entityDetail',
query: {
entityType: type,
name: name,
},
name: name
}
})
window.open(href, '_blank')
},
}
},
mounted() {
mounted () {
this.query()
},
}
}
</script>

6
src/views/entityExplorer/EntityDetail.vue
View File

@@ -110,15 +110,15 @@ export default {
let className
switch (this.entityData.entityType) {
case ('ip'): {
className = 'cn-icon cn-icon-ip'
className = 'cn-icon cn-icon-ip2'
break
}
case ('domain'): {
className = 'cn-icon cn-icon-domain'
className = 'cn-icon cn-icon-domain2'
break
}
case ('app'): {
className = 'cn-icon cn-icon-app'
className = 'cn-icon cn-icon-app2'
break
}
default: break

164
src/views/entityExplorer/EntityExplorer.vue
View File

@@ -259,169 +259,7 @@ export default {
q: '',
metaList: [],
limitFilterType: true, // 是否限定了filter的类型
listLoading: false/*,
listData: JSON.parse(`[
{
"entityType": "app",
"appName": "360cn",
"appCategory": "general-internet",
"appId": "",
"appRisk": "1",
"appSubcategory": "internet-utility"
},
{
"domainCategory": "Streaming Media",
"domainCategoryGroup": "IT Resources",
"domainReputationScore": 79,
"domainName": "9ddm.com",
"entityType": "domain",
"domainReputationLevel": "Low Risk"
},
{
"ipAsn": "",
"ipLocationCountry": "China",
"entityType": "ip",
"ipLocationProvince": "Other",
"ipAddr": "116.178.30.96",
"ipLocationCity": "Other"
},
{
"entityType": "app",
"appName": "youku",
"appCategory": "general-internet",
"appId": "",
"appRisk": "1",
"appSubcategory": "internet-utility"
},
{
"entityType": "app",
"appName": "qqmusic",
"appCategory": "media",
"appId": "",
"appRisk": "3",
"appSubcategory": "multimedia-streaming"
},
{
"entityType": "app",
"appName": "meituan",
"appCategory": "general-internet",
"appId": "",
"appRisk": "1",
"appSubcategory": "internet-utility"
},
{
"entityType": "app",
"appName": "sohu",
"appCategory": "general-internet",
"appId": "",
"appRisk": "1",
"appSubcategory": "internet-utility"
},
{
"entityType": "app",
"appName": "mqtt",
"appCategory": "networking",
"appId": "",
"appRisk": "1",
"appSubcategory": "remote-access"
},
{
"entityType": "app",
"appName": "adjust",
"appCategory": "general-internet",
"appId": "",
"appRisk": "1",
"appSubcategory": "internet-utility"
},
{
"entityType": "app",
"appName": "tiktok",
"appCategory": "media",
"appId": "",
"appRisk": "2",
"appSubcategory": "photo-video"
},
{
"entityType": "app",
"appName": "4399com",
"appCategory": "general-internet",
"appId": "",
"appRisk": "1",
"appSubcategory": "internet-utility"
},
{
"entityType": "app",
"appName": "ixigua",
"appCategory": "media",
"appId": "",
"appRisk": "1",
"appSubcategory": "Multimedia-streaming"
},
{
"entityType": "app",
"appName": "oicq",
"appCategory": "collaboration",
"appId": "",
"appRisk": "1",
"appSubcategory": "instant-messaging"
},
{
"entityType": "app",
"appName": "digicert",
"appCategory": "general-internet",
"appId": "",
"appRisk": "1",
"appSubcategory": "internet-utility"
},
{
"entityType": "app",
"appName": "rdp",
"appCategory": "networking",
"appId": "",
"appRisk": "4",
"appSubcategory": "remote-access"
},
{
"entityType": "app",
"appName": "163com",
"appCategory": "general-internet",
"appId": "",
"appRisk": "1",
"appSubcategory": "internet-utility"
},
{
"entityType": "app",
"appName": "meitu",
"appCategory": "general-internet",
"appId": "",
"appRisk": "1",
"appSubcategory": "internet-utility"
},
{
"entityType": "app",
"appName": "gitv_tv",
"appCategory": "media",
"appId": "",
"appRisk": "1",
"appSubcategory": "Multimedia-streaming"
},
{
"entityType": "app",
"appName": "tencent",
"appCategory": "general-internet",
"appId": "",
"appRisk": "1",
"appSubcategory": "internet-utility"
},
{
"entityType": "app",
"appName": "thunder",
"appCategory": "networking",
"appId": "",
"appRisk": "1",
"appSubcategory": "infrastructure"
}
]`) */
listLoading: false
}
},
methods: {

42
src/views/entityExplorer/entityList/Row.vue
View File

@@ -154,14 +154,14 @@
<div class="basic-info__item">
<i class="cn-icon cn-icon-entity-alert"></i>
<span>{{ $t('entities.recentAlert') }}&nbsp;:&nbsp;&nbsp;</span>
<span>{{ entityData.alertCount || '-' }}</span>
<span>{{ entityData.performanceCount}}</span>
</div>
<div class="basic-info__item">
<i class="cn-icon cn-icon-safe"></i>
<span
>{{ $t('entities.recentSecurity') }}&nbsp;:&nbsp;&nbsp;</span
>
<span>{{ entityData.securityCount || '-' }}</span>
<span>{{ entityData.securityCount}}</span>
</div>
</div>
<div
@@ -200,21 +200,21 @@ export default {
name: 'Row',
props: {
index: Number,
timeFilter: Object,
timeFilter: Object
},
components: {
DetailOverview,
DetailOverview
},
mixins: [entityListMixin, entityDetailMixin, relatedServer],
data() {
data () {
return {
isCollapse: true, // 是否是折叠状态
trafficUrl: '',
entityType: '',
entityType: ''
}
},
computed: {
ipLocationRegion() {
ipLocationRegion () {
return function (entityData) {
const hasProvinceAndCity =
entityData.ipLocationProvince &&
@@ -237,7 +237,7 @@ export default {
}
}
},
entityType() {
entityType () {
let type
switch (this.entityData.entityType) {
case 'ip': {
@@ -257,12 +257,12 @@ export default {
}
this.entityType = type
return type
},
}
},
watch: {
entityData: {
deep: true,
handler(n) {
handler (n) {
if (n.entityType) {
switch (n.entityType) {
case 'ip': {
@@ -281,35 +281,35 @@ export default {
break
}
}
},
},
}
}
},
setup() {
setup () {
return {
unitConvert,
unitTypes,
unitTypes
}
},
methods: {
/* 切换折叠状态 */
switchCollapse() {
switchCollapse () {
this.isCollapse = !this.isCollapse
this.$emit('switchCollapse', this.isCollapse, this.index)
},
/* 设为折叠状态 */
collapse() {
collapse () {
this.isCollapse = true
},
getQueryParams() {
getQueryParams () {
const queryParams = {
startTime: parseInt(this.timeFilter.startTime / 1000),
endTime: parseInt(this.timeFilter.endTime / 1000),
appName: this.entityType,
domain:this.entityType,
ip:this.entityType
domain: this.entityType,
ip: this.entityType
}
return queryParams
},
},
}
}
}
</script>

38
src/views/entityExplorer/entityList/detailOverview/App.vue
View File

@@ -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>
@@ -131,17 +135,17 @@
<div class="overview__content">
<div class="overview__row">
<div class="row__label">{{$t('entities.recentAlert')}}</div>
<div class="row__content">{{entityData.alertNum || '-'}}</div>
<div class="row__content">{{entityData.performanceNum || '-'}}</div>
</div>
<div class="overview__row overview__row--small-font" v-for="(alert, index) in entityData.alertList" :key="index">
<div class="row__label row__label--width160">{{alert.startTime}}</div>
<div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
<div class="row__label row__label--width160">{{dayJs.tz(getMillisecond(performance.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{alert.alertSeverity}}</div>
<div>{{alert.alertName}}</div>
<div class="alert-level-tag alert-level-tag--high">{{performance.eventSeverity}}</div>
<div>{{performance.eventType}}</div>
</div>
<div class="row__desc"></div>
</div>
<div class="overview__row overview__row--small-font" v-if="entityData.alertList && entityData.alertList.length > 3">
<div class="overview__row overview__row--small-font" v-if="entityData.performanceList && entityData.performanceList.length > 3">
<div class="show-more">{{$t('overall.showMore')}}>></div>
</div>
</div>
@@ -154,10 +158,10 @@
<div class="row__content">{{entityData.securityNum || '-'}}</div>
</div>
<div class="overview__row overview__row--small-font" v-for="(security, index) in entityData.securityList" :key="index">
<div class="row__label row__label--width160">{{security.startTime}}</div>
<div class="row__label row__label--width160">{{dayJs.tz(getMillisecond(security.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{security.securitySeverity}}</div>
<div>{{security.sourceName}}</div>
<div class="alert-level-tag alert-level-tag--high">{{security.eventSeverity}}</div>
<div>{{security.securityType}}</div>
</div>
<div class="row__desc"></div>
</div>
@@ -188,6 +192,7 @@ import _ from 'lodash'
import ChartSingleValue from '@/views/charts/charts/ChartSingleValue'
import { get } from '@/utils/http'
import relatedServer from '@/mixins/relatedServer'
import { getSecond, getMillisecond } from '@/utils/date-util'
export default {
name: 'App',
@@ -205,7 +210,7 @@ export default {
networkQuantityUrl: api.entityAppDetailNetworkQuantity,
linkInUrl: api.entityAppDetailLinkIn,
linkOutUrl: api.entityAppDetailLinkOut,
alertUrl: api.entityAppDetailAlert,
performanceUrl: api.entityAppDetailPerformance,
securityUrl: api.entityAppDetailSecurity,
trafficUrlMap: api.entityAppDetailTrafficMap,
relatedServerDomainUrl: api.entityAppRelatedServerDomain,
@@ -260,10 +265,11 @@ export default {
}
},
methods: {
getMillisecond,
getQueryParams () {
const queryParams = {
startTime: parseInt(this.timeFilter.startTime / 1000),
endTime: parseInt(this.timeFilter.endTime / 1000),
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
appName: this.entity.appName
}
return queryParams

27
src/views/entityExplorer/entityList/detailOverview/Domain.vue
View File

@@ -139,17 +139,17 @@
<div class="overview__content">
<div class="overview__row">
<div class="row__label">{{$t('entities.recentAlert')}}</div>
<div class="row__content">{{entityData.alertNum || '-'}}</div>
<div class="row__content">{{entityData.performanceNum || '-'}}</div>
</div>
<div class="overview__row overview__row--small-font" v-for="(alert, index) in entityData.alertList" :key="index">
<div class="row__label row__label--width160">{{alert.startTime}}</div>
<div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
<div class="row__label row__label--width160">{{dayJs.tz(getMillisecond(performance.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{alert.alertSeverity}}</div>
<div>{{alert.alertName}}</div>
<div class="alert-level-tag alert-level-tag--high">{{performance.eventSeverity}}</div>
<div>{{performance.eventType}}</div>
</div>
<div class="row__desc"></div>
</div>
<div class="overview__row overview__row--small-font" v-if="entityData.alertList && entityData.alertList.length > 3">
<div class="overview__row overview__row--small-font" v-if="entityData.performanceList && entityData.performanceList.length > 3">
<div class="show-more">{{$t('overall.showMore')}}>></div>
</div>
</div>
@@ -162,10 +162,10 @@
<div class="row__content">{{entityData.securityNum || '-'}}</div>
</div>
<div class="overview__row overview__row--small-font" v-for="(security, i) in entityData.securityList" :key="i">
<div class="row__label row__label--width160">{{security.startTime}}</div>
<div class="row__label row__label--width160">{{dayJs.tz(getMillisecond(security.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{security.securitySeverity}}</div>
<div>{{security.sourceName}}</div>
<div class="alert-level-tag alert-level-tag--high">{{security.eventSeverity}}</div>
<div>{{security.securityType}}</div>
</div>
<div class="row__desc"></div>
</div>
@@ -196,6 +196,8 @@ import Chart from '@/views/charts/Chart'
import _ from 'lodash'
import { get } from '@/utils/http'
import relatedServer from '@/mixins/relatedServer'
import { getSecond, getMillisecond } from '@/utils/date-util'
export default {
name: 'Domain',
components: {
@@ -212,7 +214,7 @@ export default {
networkQuantityUrl: api.entityDomainDetailNetworkQuantity,
linkInUrl: api.entityDomainDetailLinkIn,
linkOutUrl: api.entityDomainDetailLinkOut,
alertUrl: api.entityDomainDetailAlert,
performanceUrl: api.entityDomainDetailPerformance,
securityUrl: api.entityDomainDetailSecurity,
trafficUrlMap: api.entityDomainDetailTrafficMap,
relatedServerIpUrl: api.entityDomainRelatedServerIp,
@@ -268,10 +270,11 @@ export default {
}
},
methods: {
getMillisecond,
getQueryParams () {
const queryParams = {
startTime: parseInt(this.timeFilter.startTime / 1000),
endTime: parseInt(this.timeFilter.endTime / 1000),
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
domain: this.entity.domainName
}
return queryParams

27
src/views/entityExplorer/entityList/detailOverview/Ip.vue
View File

@@ -123,17 +123,17 @@
<div class="overview__content">
<div class="overview__row">
<div class="row__label">{{$t('entities.recentAlert')}}</div>
<div class="row__content">{{entityData.alertNum || '-'}}</div>
<div class="row__content">{{entityData.performanceNum || '-'}}</div>
</div>
<div class="overview__row overview__row--small-font" v-for="(alert, index) in entityData.alertList" :key="index">
<div class="row__label row__label--width160">{{alert.startTime}}</div>
<div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
<div class="row__label row__label--width160">{{dayJs.tz(getMillisecond(performance.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{alert.alertSeverity}}</div>
<div>{{alert.alertName}}</div>
<div class="alert-level-tag alert-level-tag--high">{{performance.eventSeverity}}</div>
<div>{{performance.eventType}}</div>
</div>
<div class="row__desc"></div>
</div>
<div class="overview__row overview__row--small-font" v-if="entityData.alertList && entityData.alertList.length > 3">
<div class="overview__row overview__row--small-font" v-if="entityData.performanceList && entityData.performanceList.length > 3">
<div class="show-more">{{$t('overall.showMore')}}>></div>
</div>
</div>
@@ -146,10 +146,10 @@
<div class="row__content">{{entityData.securityNum || '-'}}</div>
</div>
<div class="overview__row overview__row--small-font" v-for="(security, index) in entityData.securityList" :key="index">
<div class="row__label row__label--width160">{{security.startTime}}</div>
<div class="row__label row__label--width160">{{dayJs.tz(getMillisecond(security.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{security.securitySeverity}}</div>
<div>{{security.sourceName}}</div>
<div class="alert-level-tag alert-level-tag--high">{{security.eventSeverity}}</div>
<div>{{security.securityType}}</div>
</div>
<div class="row__desc"></div>
</div>
@@ -180,6 +180,7 @@ import Chart from '@/views/charts/Chart'
import _ from 'lodash'
import { get } from '@/utils/http'
import relatedServer from '@/mixins/relatedServer'
import { getSecond, getMillisecond } from '@/utils/date-util'
export default {
name: 'Ip',
@@ -190,7 +191,6 @@ export default {
},
data () {
return {
// entityData: {}
entityType: 'ip',
trafficUrl: api.entityIpDetailTraffic,
trafficUrlMap: api.entityIpDetailTrafficMap,
@@ -198,7 +198,7 @@ export default {
networkQuantityUrl: api.entityIpDetailNetworkQuantity,
linkInUrl: api.entityIpDetailLinkIn,
linkOutUrl: api.entityIpDetailLinkOut,
alertUrl: api.entityIpDetailAlert,
performanceUrl: api.entityIpDetailPerformance,
securityUrl: api.entityIpDetailSecurity,
relatedServerDomainUrl: api.entityIpRelatedServerDomain,
relatedServerAppUrl: api.entityIpRelatedServerApp,
@@ -272,10 +272,11 @@ export default {
}
},
methods: {
getMillisecond,
getQueryParams () {
const queryParams = {
startTime: parseInt(this.timeFilter.startTime / 1000),
endTime: parseInt(this.timeFilter.endTime / 1000),
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
ip: this.entity.ipAddr
}
return queryParams

15
src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
View File

@@ -74,7 +74,7 @@ export default {
this.entityData.p50 = t.aggregation.p50
this.entityData.p90 = t.aggregation.p90
} else if (t.legend === 'bytesSentRate') {
this.entityData.bytesSentRate = _.nth(t.values,-3)[1]
this.entityData.bytesSentRate = _.nth(t.values, -3)[1]
this.chartOptionSent = {
...this.chartOption,
series: [
@@ -90,7 +90,7 @@ export default {
}
},
color: '#69b072',
data: _.dropRight(t.values,2).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
data: _.dropRight(t.values, 2).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
showSymbol: false
}
]
@@ -212,11 +212,11 @@ export default {
}
},
queryEntityDetailAlert () {
get(this.alertUrl, this.getQueryParams()).then(response => {
queryEntityDetailPerformance () {
get(this.performanceUrl, this.getQueryParams()).then(response => {
if (response.code === 200) {
this.entityData.alertNum = response.data.result.length
this.entityData.alertList = response.data.result
this.entityData.performanceNum = response.data.result.length
this.entityData.performanceList = response.data.result
}
})
},
@@ -232,8 +232,7 @@ export default {
queryEntityDetail () {
this.queryEntityDetailTraffic()
// this.queryEntityDetailRelation()
this.queryEntityDetailAlert()
this.queryEntityDetailPerformance()
this.queryEntityDetailSecurity()
this.queryEntityDetailNetworkQuantity()
this.queryEntityDetailLinkOutUrl()

69
src/views/entityExplorer/entityList/entityListMixin.js
View File

@@ -4,6 +4,7 @@ import { api } from '@/utils/api'
import * as echarts from 'echarts'
import { entityListLineOption } from '@/views/charts/charts/chart-options'
import { riskLevelMapping, unitTypes } from '@/utils/constants'
import { getSecond } from '@/utils/date-util'
export default {
props: {
@@ -22,15 +23,15 @@ export default {
let className
switch (this.entityData.entityType) {
case ('ip'): {
className = 'cn-icon cn-icon-ip'
className = 'cn-icon cn-icon-ip2'
break
}
case ('domain'): {
className = 'cn-icon cn-icon-domain'
className = 'cn-icon cn-icon-domain2'
break
}
case ('app'): {
className = 'cn-icon cn-icon-app'
className = 'cn-icon cn-icon-app2'
break
}
default: break
@@ -149,27 +150,61 @@ export default {
},
querySecurity () {
const queryParams = {
startTime: parseInt(this.timeFilter.startTime / 1000),
endTime: parseInt(this.timeFilter.endTime / 1000),
entityType: this.entityData.entityType,
name: this.entityName
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime)
}
get(api.entitySecurityNum, queryParams).then(response => {
let url
switch (this.entityData.entityType) {
case ('ip'): {
url = api.entityIpDetailSecurity
queryParams.ip = this.entityName
break
}
case ('domain'): {
url = api.entityDomainDetailSecurity
queryParams.domain = this.entityName
break
}
case ('app'): {
url = api.entityAppDetailSecurity
queryParams.appName = this.entityName
break
}
default: break
}
get(url, queryParams).then(response => {
if (response.code === 200) {
this.entityData.securityCount = response.data.result[0].count
this.entityData.securityCount = response.data.result && response.data.result.length
}
})
},
queryAlert () {
queryPerformance () {
const queryParams = {
startTime: parseInt(this.timeFilter.startTime / 1000),
endTime: parseInt(this.timeFilter.endTime / 1000),
entityType: this.entityData.entityType,
name: this.entityName
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime)
}
get(api.entityAlertNum, queryParams).then(response => {
let url
switch (this.entityData.entityType) {
case ('ip'): {
url = api.entityIpDetailPerformance
queryParams.ip = this.entityName
break
}
case ('domain'): {
url = api.entityDomainDetailPerformance
queryParams.domain = this.entityName
break
}
case ('app'): {
url = api.entityAppDetailPerformance
queryParams.appName = this.entityName
break
}
default: break
}
get(url, queryParams).then(response => {
if (response.code === 200) {
this.entityData.alertCount = response.data.result[0].value
this.entityData.performanceCount = response.data.result && response.data.result.length
}
})
},
@@ -259,7 +294,7 @@ export default {
this.entityData = _.cloneDeep(this.entity)
setTimeout(() => { this.queryTraffic() })
setTimeout(() => { this.querySecurity() })
setTimeout(() => { this.queryAlert() })
setTimeout(() => { this.queryPerformance() })
if (this.listMode === 'block') {
setTimeout(() => { this.queryTrafficLine() })
}

122
src/views/entityExplorer/search/ExplorerSearch.vue
View File

@@ -67,8 +67,7 @@ export default {
{
name: 'entity_type',
type: 'string',
// label: this.$t('overall.type')
label: 'Type'
label: 'Entity type'
},
{
name: 'ip_addr',
@@ -78,31 +77,42 @@ export default {
{
name: 'ip_location_country',
type: 'string',
// label: this.$t('overall.country')
label: 'Country'
label: 'IP.Country'
},
{
name: 'ip_location_province',
type: 'string',
// label: this.$t('overall.province')
label: 'Province'
label: 'IP.Province'
},
{
name: 'ip_location_city',
type: 'string',
// label: this.$t('overall.city')
label: 'City'
label: 'IP.City'
},
{
name: 'ip_asn',
type: 'string',
// label: this.$t('entities.asn')
label: 'ASN'
label: 'IP.ASN'
},
{
name: 'ip_os',
name: 'dns_server_role',
type: 'string',
label: 'OS'
label: 'IP.DNS server role'
},
{
name: 'dns_server_org',
type: 'string',
label: 'IP.DNS server organization'
},
{
name: 'dns_server_os',
type: 'string',
label: 'IP.Operating system'
},
{
name: 'dns_server_software',
type: 'string',
label: 'IP.DNS server software'
},
{
name: 'domain_name',
@@ -112,84 +122,122 @@ export default {
{
name: 'domain_category',
type: 'string',
// label: this.$t('entities.domainCategory')
label: 'Domain category'
label: 'Domain.Category'
},
{
name: 'domain_category_group',
type: 'string',
// label: this.$t('entities.domainDetail.categoryGroup')
label: 'Domain category group'
},
{
name: 'domain_reputation_score',
type: 'long',
// label: this.$t('entities.domainDetail.reputationValue')
label: 'Domain reputation score'
label: 'Domain.Category group'
},
{
name: 'domain_reputation_level',
type: 'string',
// label: this.$t('entities.reputationLevel')
label: 'Domain reputation level'
label: 'Domain.Reputation'
},
{
name: 'domain_whois_email',
type: 'string',
label: 'Domain whois email'
label: 'Domain.Whois email'
},
{
name: 'domain_whois_name_servers',
type: 'string',
label: 'Domain whois ns'
label: 'Domain.Whois nameserver'
},
{
name: 'domain_whois_registrar',
type: 'string',
label: 'Domain whois registrar'
label: 'Domain.Whois registrar'
},
{
name: 'domain_whois_org',
type: 'string',
label: 'Domain whois organization'
label: 'Domain.Whois organization'
},
{
name: 'domain_whois_address',
type: 'string',
label: 'Domain.Whois address'
},
{
name: 'domain_whois_city',
type: 'string',
label: 'Domain whois city'
label: 'Domain.Whois city'
},
{
name: 'domain_whois_state',
type: 'string',
label: 'Domain whois state'
label: 'Domain.Whois state'
},
{
name: 'domain_whois_country',
type: 'string',
label: 'Domain whois country'
label: 'Domain.Whois country'
},
{
name: 'domain_icp_owner',
type: 'string',
label: 'Domain.ICP owner'
},
{
name: 'domain_icp_company_name',
type: 'string',
label: 'Domain.ICP company'
},
{
name: 'domain_icp_company_type',
type: 'string',
label: 'Domain.ICP company type'
},
{
name: 'domain_icp_site_license',
type: 'string',
label: 'Domain.ICP site license'
},
{
name: 'domain_icp_site_name',
type: 'string',
label: 'Domain.ICP site'
},
{
name: 'app_name',
type: 'string',
label: 'APP'
},
{
name: 'app_id',
type: 'string',
label: 'APP.ID'
},
{
name: 'app_category',
type: 'string',
// label: this.$t('trafficSummary.appCategory')
label: 'APP category'
label: 'APP.Category'
},
{
name: 'app_subcategory',
type: 'string',
// label: this.$t('entities.domainDetail.appSubcategory')
label: 'APP subcategory'
label: 'APP.Subcategory'
},
{
name: 'app_risk',
type: 'string',
// label: this.$t('trafficSummary.appRisk')
label: 'APP risk'
label: 'APP.Risk'
},
{
name: 'app_description',
type: 'string',
label: 'APP.Description'
},
{
name: 'app_longname',
type: 'string',
label: 'APP.Long name'
},
{
name: 'app_technology',
type: 'string',
label: 'APP.Technology'
}
],
operatorList: ['=', '!=', '>', '<', '>=', '<=', 'IN', 'NOT IN', 'LIKE', 'NOT LIKE'],

515
src/views/testData.js Normal file
View File

@@ -0,0 +1,515 @@
import unitConvert from '@/utils/unit-convert'
import { unitTypes } from '@/utils/constants'
const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
'#73BFDE', '#3BA172', '#FC8452', '#E97CCC',
'#9960B4', '#FEA69E', '#57CBAC', '#63B6AC']
export const lineData = [
[28969982733514,772532872894,"2022-03-04 00:00:00"],
[27655234991362,737472933103,"2022-03-04 00:05:00"],
[26925138516067,718003693762,"2022-03-04 00:10:00"],
[29522842016923,787275787118,"2022-03-04 00:15:00"],
[25315943945800,675091838555,"2022-03-04 00:20:00"],
[24971549517943,665907987145,"2022-03-04 00:25:00"],
[24899825440652,663995345084,"2022-03-04 00:30:00"],
[25247379305464,673263448146,"2022-03-04 00:35:00"],
[23363417530377,623024467477,"2022-03-04 00:40:00"],
[22781937328826,607518328769,"2022-03-04 00:45:00"],
[22334875960906,595596692291,"2022-03-04 00:50:00"],
[21625712171831,576685657915,"2022-03-04 00:55:00"],
[21117202081518,563125388840,"2022-03-04 01:00:00"],
[20123617702070,536629805389,"2022-03-04 01:05:00"],
[19202419248804,512064513301,"2022-03-04 01:10:00"],
[18754213565825,500112361755,"2022-03-04 01:15:00"],
[18124255840306,483313489075,"2022-03-04 01:20:00"],
[19837519272799,529000513941,"2022-03-04 01:25:00"],
[16301475125024,434706003334,"2022-03-04 01:30:00"],
[15762406250887,420330833357,"2022-03-04 01:35:00"],
[15458290240500,412221073080,"2022-03-04 01:40:00"],
[14309311385826,381581636955,"2022-03-04 01:45:00"],
[13814278959849,368380772263,"2022-03-04 01:50:00"],
[13335451883308,355612050222,"2022-03-04 01:55:00"],
[12995486528765,346546307434,"2022-03-04 02:00:00"],
[13166511401387,351106970704,"2022-03-04 02:05:00"],
[11490091356144,306402436164,"2022-03-04 02:10:00"],
[11533102061117,307549388296,"2022-03-04 02:15:00"],
[10871792048158,289914454618,"2022-03-04 02:20:00"],
[10121791046211,269914427899,"2022-03-04 02:25:00"],
[9967875245668,265810006551,"2022-03-04 02:30:00"],
[12210204288490,325605447693,"2022-03-04 02:35:00"],
[8575864848104,228689729283,"2022-03-04 02:40:00"],
[8301752853884,221380076104,"2022-03-04 02:45:00"],
[8050811819445,214688315185,"2022-03-04 02:50:00"],
[7778642815575,207430475082,"2022-03-04 02:55:00"],
[8569941208437,228531765558,"2022-03-04 03:00:00"],
[8198759570750,218633588553,"2022-03-04 03:05:00"],
[6656628393357,177510090490,"2022-03-04 03:10:00"],
[6454278312443,172114088332,"2022-03-04 03:15:00"],
[6284559794438,167588261185,"2022-03-04 03:20:00"],
[6019610840169,160522955738,"2022-03-04 03:25:00"],
[5948136061943,158616961652,"2022-03-04 03:30:00"],
[5902670520287,157404547208,"2022-03-04 03:35:00"],
[5504265610957,146780416292,"2022-03-04 03:40:00"],
[5356920067248,142851201793,"2022-03-04 03:45:00"],
[5395947893404,143891943824,"2022-03-04 03:50:00"],
[5431225782305,144832687528,"2022-03-04 03:55:00"],
[5060360621581,134942949909,"2022-03-04 04:00:00"],
[4734877060777,126263388287,"2022-03-04 04:05:00"],
[4896120032211,130563200859,"2022-03-04 04:10:00"],
[4656914516166,124184387098,"2022-03-04 04:15:00"],
[4370447723752,116545272633,"2022-03-04 04:20:00"],
[4552708884362,121405570250,"2022-03-04 04:25:00"],
[4296041295231,114561101206,"2022-03-04 04:30:00"],
[4142572107934,110468589545,"2022-03-04 04:35:00"],
[4241430444184,113104811845,"2022-03-04 04:40:00"],
[4224243392620,112646490470,"2022-03-04 04:45:00"],
[4198266946467,111953785239,"2022-03-04 04:50:00"],
[3858300702268,102888018727,"2022-03-04 04:55:00"],
[3854869214167,102796512378,"2022-03-04 05:00:00"],
[3789374874342,101049996649,"2022-03-04 05:05:00"],
[3610647812809,96283941675,"2022-03-04 05:10:00"],
[3581341904272,95502450781,"2022-03-04 05:15:00"],
[3419585709043,91188952241,"2022-03-04 05:20:00"],
[3439507132019,91720190187,"2022-03-04 05:25:00"],
[3511079821680,93628795245,"2022-03-04 05:30:00"],
[3240669123023,86417843281,"2022-03-04 05:35:00"],
[3231235979808,86166292795,"2022-03-04 05:40:00"],
[3149380897927,83983490611,"2022-03-04 05:45:00"],
[3292441899857,87798450663,"2022-03-04 05:50:00"],
[3324837434174,88662331578,"2022-03-04 05:55:00"],
[3267947498799,87145266635,"2022-03-04 06:00:00"],
[3294621183448,87856564892,"2022-03-04 06:05:00"],
[3445680106467,91884802839,"2022-03-04 06:10:00"],
[3390821619902,90421909864,"2022-03-04 06:15:00"],
[3398196120285,90618563208,"2022-03-04 06:20:00"],
[3304281747967,88114179946,"2022-03-04 06:25:00"],
[3302100743607,88056019830,"2022-03-04 06:30:00"],
[3358226493011,89552706480,"2022-03-04 06:35:00"],
[3556776773250,94847380620,"2022-03-04 06:40:00"],
[3476802054030,92714721441,"2022-03-04 06:45:00"],
[3406187475416,90831666011,"2022-03-04 06:50:00"],
[4416938530654,117785027484,"2022-03-04 06:55:00"],
[3594270288815,95847207702,"2022-03-04 07:00:00"],
[3626775377470,96714010066,"2022-03-04 07:05:00"],
[3565999784799,95093327595,"2022-03-04 07:10:00"],
[3959810819463,105594955186,"2022-03-04 07:15:00"],
[3986304658215,106301457552,"2022-03-04 07:20:00"],
[4201272551124,112033934697,"2022-03-04 07:25:00"],
[4159651840527,110924049081,"2022-03-04 07:30:00"],
[4388957660565,117038870948,"2022-03-04 07:35:00"],
[4585723812812,122285968342,"2022-03-04 07:40:00"],
[4845957647361,129225537263,"2022-03-04 07:45:00"],
[5073862803258,135303008087,"2022-03-04 07:50:00"],
[5423185300814,144618274688,"2022-03-04 07:55:00"],
[6007173373329,160191289955,"2022-03-04 08:00:00"],
[6555173772201,174804633925,"2022-03-04 08:05:00"],
[6351412507869,169371000210,"2022-03-04 08:10:00"],
[6945767585118,185220468936,"2022-03-04 08:15:00"],
[7073454395363,188625450543,"2022-03-04 08:20:00"],
[7620059685888,203201591624,"2022-03-04 08:25:00"],
[8618131474251,229816839313,"2022-03-04 08:30:00"],
[8190582889750,218415543727,"2022-03-04 08:35:00"],
[8516248200631,227099952017,"2022-03-04 08:40:00"],
[8847870579615,235943215456,"2022-03-04 08:45:00"],
[9291696664567,247778577722,"2022-03-04 08:50:00"],
[9813479864123,261692796377,"2022-03-04 08:55:00"],
[10166374951215,271103332032,"2022-03-04 09:00:00"],
[10566660997360,281777626596,"2022-03-04 09:05:00"],
[11198613029954,298629680799,"2022-03-04 09:10:00"],
[11027698150233,294071950673,"2022-03-04 09:15:00"],
[11534686635398,307591643611,"2022-03-04 09:20:00"],
[11778600764516,314096020387,"2022-03-04 09:25:00"],
[12104533073099,322787548616,"2022-03-04 09:30:00"],
[12244570656108,326521884163,"2022-03-04 09:35:00"],
[12615700396885,336418677250,"2022-03-04 09:40:00"],
[12964143713872,345710499037,"2022-03-04 09:45:00"],
[13016114473998,347096385973,"2022-03-04 09:50:00"],
[13252632094282,353403522514,"2022-03-04 09:55:00"],
[13805416715607,368144445750,"2022-03-04 10:00:00"],
[13934744922725,371593197939,"2022-03-04 10:05:00"],
[14127016542407,376720441131,"2022-03-04 10:10:00"],
[14434554026516,384921440707,"2022-03-04 10:15:00"],
[14432110437071,384856278322,"2022-03-04 10:20:00"],
[14649574536632,390655320977,"2022-03-04 10:25:00"],
[14768680014249,393831467047,"2022-03-04 10:30:00"],
[14910852414432,397622731052,"2022-03-04 10:35:00"],
[15294731712930,407859512345,"2022-03-04 10:40:00"],
[15354741150417,409459764011,"2022-03-04 10:45:00"],
[15372120739418,409923219718,"2022-03-04 10:50:00"],
[15652062314015,417388328374,"2022-03-04 10:55:00"],
[15790550169279,421081337847,"2022-03-04 11:00:00"],
[15974814432383,425995051530,"2022-03-04 11:05:00"],
[18106420031673,482837867511,"2022-03-04 11:10:00"],
[15964304282474,425714780866,"2022-03-04 11:15:00"],
[15866249649602,423099990656,"2022-03-04 11:20:00"],
[16138677050405,430364721344,"2022-03-04 11:25:00"],
[16372432990421,436598213078,"2022-03-04 11:30:00"],
[16533202568615,440885401830,"2022-03-04 11:35:00"],
[17045752272964,454553393946,"2022-03-04 11:40:00"],
[16981335555512,452835614814,"2022-03-04 11:45:00"],
[17118154627460,456484123399,"2022-03-04 11:50:00"],
[17148391455384,457290438810,"2022-03-04 11:55:00"],
[17470154502790,465870786741,"2022-03-04 12:00:00"],
[17568308659292,468488230914,"2022-03-04 12:05:00"],
[17773841618441,473969109825,"2022-03-04 12:10:00"],
[17781079987430,474162132998,"2022-03-04 12:15:00"],
[17990021005772,479733893487,"2022-03-04 12:20:00"],
[18384547822059,490254608588,"2022-03-04 12:25:00"],
[18460819489936,492288519732,"2022-03-04 12:30:00"],
[18490806709057,493088178908,"2022-03-04 12:35:00"],
[18412730482192,491006146192,"2022-03-04 12:40:00"],
[18553258883770,494753570234,"2022-03-04 12:45:00"],
[18669863379552,497863023455,"2022-03-04 12:50:00"],
[19963735697348,532366285263,"2022-03-04 12:55:00"],
[18376553533228,490041427553,"2022-03-04 13:00:00"],
[18558850510486,494902680280,"2022-03-04 13:05:00"],
[18679720275525,498125874014,"2022-03-04 13:10:00"],
[18950990373556,505359743295,"2022-03-04 13:15:00"],
[18912683201075,504338218695,"2022-03-04 13:20:00"],
[18953166427540,505417771401,"2022-03-04 13:25:00"],
[19088811649287,509034977314,"2022-03-04 13:30:00"],
[19195979674584,511892791322,"2022-03-04 13:35:00"],
[19353757750157,516100206671,"2022-03-04 13:40:00"],
[19623023814087,523280635042,"2022-03-04 13:45:00"],
[20006183846599,533498235909,"2022-03-04 13:50:00"],
[20129862506855,536796333516,"2022-03-04 13:55:00"],
[20690589312453,551749048332,"2022-03-04 14:00:00"],
[20817415642015,555131083787,"2022-03-04 14:05:00"],
[21227766113590,566073763029,"2022-03-04 14:10:00"],
[21468895104362,572503869450,"2022-03-04 14:15:00"],
[21814949310487,581731981613,"2022-03-04 14:20:00"],
[22049560972841,587988292609,"2022-03-04 14:25:00"],
[22520902322071,600557395255,"2022-03-04 14:30:00"],
[22717789840723,605807729086,"2022-03-04 14:35:00"],
[25977481697643,692732845270,"2022-03-04 14:40:00"],
[21169021431468,564507238172,"2022-03-04 14:45:00"],
[21185682154079,564951524109,"2022-03-04 14:50:00"],
[21213274986598,565687332976,"2022-03-04 14:55:00"],
[22852488297521,609399687934,"2022-03-04 15:00:00"],
[20180887262764,538156993674,"2022-03-04 15:05:00"],
[20262326460868,540328705623,"2022-03-04 15:10:00"],
[19957329914253,532195464380,"2022-03-04 15:15:00"],
[19540290479846,521074412796,"2022-03-04 15:20:00"],
[19381049642638,516827990470,"2022-03-04 15:25:00"],
[19371501072878,516573361943,"2022-03-04 15:30:00"],
[19195290832621,511874422203,"2022-03-04 15:35:00"],
[19074211930206,508645651472,"2022-03-04 15:40:00"],
[18985114573233,506269721953,"2022-03-04 15:45:00"],
[18986918180614,506317818150,"2022-03-04 15:50:00"],
[18967837386524,505808996974,"2022-03-04 15:55:00"],
[18807707047729,501538854606,"2022-03-04 16:00:00"],
[19012905978812,507010826102,"2022-03-04 16:05:00"],
[20562508930526,548333571481,"2022-03-04 16:10:00"],
[18338426278704,489024700765,"2022-03-04 16:15:00"],
[18524673457921,493991292211,"2022-03-04 16:20:00"],
[18839461266122,502385633763,"2022-03-04 16:25:00"],
[18840101405285,502402704141,"2022-03-04 16:30:00"],
[18834745820616,502259888550,"2022-03-04 16:35:00"],
[19498057758493,519948206893,"2022-03-04 16:40:00"],
[18983988305868,506239688156,"2022-03-04 16:45:00"],
[20375548066233,543347948433,"2022-03-04 16:50:00"],
[18694198464973,498511959066,"2022-03-04 16:55:00"],
[19224086887778,512642317007,"2022-03-04 17:00:00"],
[19234955299191,512932141312,"2022-03-04 17:05:00"],
[19241735704890,513112952130,"2022-03-04 17:10:00"],
[19689558526944,525054894052,"2022-03-04 17:15:00"],
[19512222588749,520325935700,"2022-03-04 17:20:00"],
[19771517781318,527240474168,"2022-03-04 17:25:00"],
[19635672658400,523617937557,"2022-03-04 17:30:00"],
[19851175792287,529364687794,"2022-03-04 17:35:00"],
[20084780673112,535594151283,"2022-03-04 17:40:00"],
[19971398581725,532570628846,"2022-03-04 17:45:00"],
[19857295439822,529527878395,"2022-03-04 17:50:00"],
[19872338682121,529929031523,"2022-03-04 17:55:00"],
[19796261122491,527900296600,"2022-03-04 18:00:00"],
[19782809702179,527541592058,"2022-03-04 18:05:00"],
[19839234416622,529046251110,"2022-03-04 18:10:00"],
[20465886156507,545756964174,"2022-03-04 18:15:00"],
[20122679882572,536604796869,"2022-03-04 18:20:00"],
[20289864215593,541063045749,"2022-03-04 18:25:00"],
[20434921600336,544931242676,"2022-03-04 18:30:00"],
[20669436913095,551184984349,"2022-03-04 18:35:00"],
[20817112208239,555122992220,"2022-03-04 18:40:00"],
[21646842996895,577249146584,"2022-03-04 18:45:00"],
[21523247456176,573953265498,"2022-03-04 18:50:00"],
[21135907030527,563624187481,"2022-03-04 18:55:00"],
[21731228167496,579499417800,"2022-03-04 19:00:00"],
[21555331268992,574808833840,"2022-03-04 19:05:00"],
[21448235081778,571952935514,"2022-03-04 19:10:00"],
[21876037548520,583361001294,"2022-03-04 19:15:00"],
[21955699128376,585485310090,"2022-03-04 19:20:00"],
[22338536796271,595694314567,"2022-03-04 19:25:00"],
[22290878986561,594423439642,"2022-03-04 19:30:00"],
[22696524500427,605240653345,"2022-03-04 19:35:00"],
[22883190465854,610218412423,"2022-03-04 19:40:00"],
[22865109623699,609736256632,"2022-03-04 19:45:00"],
[23463713109730,625699016259,"2022-03-04 19:50:00"],
[23561285058428,628300934891,"2022-03-04 19:55:00"],
[23703339789957,632089061066,"2022-03-04 20:00:00"],
[24166899328339,644450648756,"2022-03-04 20:05:00"],
[24447031010328,651920826942,"2022-03-04 20:10:00"],
[24608672777197,656231274059,"2022-03-04 20:15:00"],
[25275462425767,674012331354,"2022-03-04 20:20:00"],
[25198372992317,671956613128,"2022-03-04 20:25:00"],
[25647780613614,683940816363,"2022-03-04 20:30:00"],
[25625250554055,683340014775,"2022-03-04 20:35:00"],
[25480742337277,679486462327,"2022-03-04 20:40:00"],
[25832082625742,688855536686,"2022-03-04 20:45:00"],
[26231695749025,699511886641,"2022-03-04 20:50:00"],
[26735506293998,712946834507,"2022-03-04 20:55:00"],
[27091127815174,722430075071,"2022-03-04 21:00:00"],
[27277891781922,727410447518,"2022-03-04 21:05:00"],
[27528934099470,734104909319,"2022-03-04 21:10:00"],
[28294252754307,754513406782,"2022-03-04 21:15:00"],
[28578676115585,762098029749,"2022-03-04 21:20:00"],
[28723861609291,765969642914,"2022-03-04 21:25:00"],
[28624746916514,763326584440,"2022-03-04 21:30:00"],
[29567967418560,788479131162,"2022-03-04 21:35:00"],
[29459425404208,785584677446,"2022-03-04 21:40:00"],
[29566556067019,788441495121,"2022-03-04 21:45:00"],
[30572964671261,815279057900,"2022-03-04 21:50:00"],
[30329564491753,808788386447,"2022-03-04 21:55:00"],
[31664399376903,844383983384,"2022-03-04 22:00:00"],
[31116443452479,829771825399,"2022-03-04 22:05:00"],
[31378469745516,836759193214,"2022-03-04 22:10:00"],
[31658679635004,844231456933,"2022-03-04 22:15:00"],
[31875840546222,850022414566,"2022-03-04 22:20:00"],
[32289185521687,861044947245,"2022-03-04 22:25:00"],
[32417837401154,864475664031,"2022-03-04 22:30:00"],
[32346688630505,862578363480,"2022-03-04 22:35:00"],
[33016598180193,880442618138,"2022-03-04 22:40:00"],
[33146008154865,883893550796,"2022-03-04 22:45:00"],
[33268634987419,887163599665,"2022-03-04 22:50:00"],
[33397396256547,890597233508,"2022-03-04 22:55:00"],
[33844643741649,902523833111,"2022-03-04 23:00:00"],
[33958156438588,905550838362,"2022-03-04 23:05:00"],
[33894723651827,903859297382,"2022-03-04 23:10:00"],
[38141959774630,1017118927323,"2022-03-04 23:15:00"],
[32317662070360,861804321876,"2022-03-04 23:20:00"],
[32413119587555,864349855668,"2022-03-04 23:25:00"],
[32548084168381,867948911157,"2022-03-04 23:30:00"],
[32156620281908,857509874184,"2022-03-04 23:35:00"],
[32214736023145,859059627284,"2022-03-04 23:40:00"],
[32164564599083,857721722642,"2022-03-04 23:45:00"],
[31727303531249,846061427500,"2022-03-04 23:50:00"],
[32145322359204,857208596245,"2022-03-04 23:55:00"]
]
export const lineData2 = []
export const lineData3 = []
export const lineOption = {
tooltip: {
trigger: 'axis'
},
color: chartColor,
xAxis: {
type: 'time',
splitNumber: 12,
axisLabel: {
formatter: '{HH}:{mm}'
}
},
yAxis: {
splitLine: { show: false },
offset: 10,
axisLabel: {
formatter (params) {
const arr = unitConvert(params, unitTypes.byte).join(' ')
return arr.replace(/B/g, 'bps')
}
}
},
visualMap: {
show: false,
pieces: [
{
gt: 0,
lte: 536130030141,
color: '#FBDB0F'
},
{
gt: 536130030141,
lte: 844057710428,
color: '#FC7D02'
},
{
gt: 844057710428,
lte: 969266744524,
color: '#FD0100'
},
{
gt: 969266744524,
lte: 9840702500000,
color: '#AA069F'
}
],
outOfRange: {
color: '#999'
}
},
series: {
type: 'line',
symbol: 'none',
markLine: {
silent: true,
lineStyle: {
color: '#999'
},
symbol: 'none',
label: {
formatter (params) {
const arr = unitConvert(params.value, unitTypes.byte).join(' ')
let desc = ''
switch (params.dataIndex) {
case 0: {
desc = 'P50'
break
}
case 1: {
desc = 'P90'
break
}
case 2: {
desc = 'P99'
break
}
default: break
}
return `${arr.replace(/B/g, 'bps')} (${desc})`
}
},
data: [
{
yAxis: 536130030141
},
{
yAxis: 844057710428
},
{
yAxis: 969266744524
}
]
}
}
}
export const lineOption2 = {
tooltip: {
trigger: 'axis'
},
color: chartColor,
xAxis: {
type: 'time',
splitNumber: 12,
axisLabel: {
formatter: '{MM}-{dd} {HH}:{mm}',
rotate: 30
}
},
yAxis: {
splitLine: { show: false },
offset: 10,
axisLabel: {
formatter (params) {
const arr = unitConvert(params, unitTypes.byte).join(' ')
return arr.replace(/B/g, 'bps')
}
}
},
series: {
type: 'line',
symbol: 'none'
}
}
export const pieData = [
[
['HTTP', '36.30%'],
['HTTPS', '33.75%'],
['UNCATEGORIZED', '24.41%'],
['QUIC', '2.13%'],
['SSL', '2.04%'],
['STUN', '0.67%'],
['STUN.DTLS', '0.36%'],
['RTMP', '0.16%'],
['RTSP', '0.03%'],
['DNS', '0.03%'],
['Other', '0.13%']
],
[
['douyin', '6.12%'],
['wechat', '4.87%'],
['kuaishou', '3.18%'],
['qq', '1.86%'],
['qq_web', '1.52%'],
['http2', '1.30%'],
['youku', '0.94%'],
['bmff', '0.90%'],
['ppstream', '0.62%'],
['other', '78.69%']
],
[
['douyinvod.com', '9.18%'],
['qq.com', '1.43%'],
['kwaicdn.com', '1.37%'],
['douyincdn.com', '1.16%'],
['qpic.cn', '0.75%'],
['yximgs.com', '0.65%'],
['vivo.com.cn', '0.50%'],
['amemv.com', '0.43%'],
['heytapdownload.com', '0.34%'],
['apple.com', '0.26%'],
['other', '83.93%']
],
[
['113.200.130.0/24', '4.17%'],
['116.177.229.0/24', '1.37%'],
['116.177.224.0/24', '1.16%'],
['116.177.238.0/24', '1.14%'],
['139.170.154.0/24', '1.11%'],
['113.200.134.0/24', '1.10%'],
['116.177.239.0/24', '1.02%'],
['116.177.241.0/24', '0.94%'],
['103.251.162.0/24', '0.78%'],
['116.177.254.0/24', '0.74%'],
['other', '86.47%']
],
[
['256', '263884843187921'],
['1280', '259115014797786'],
['2304', '179350957251842'],
['2048', '146226265132311'],
['1536', '144883427788620'],
['1792', '144644004094863'],
['512', '141461036696155'],
['2816', '83886557825029'],
['1024', '78239831113846'],
['768', '62392314982139']
],
[
['2049', '244714000000000'],
['1537', '243301000000000'],
['2305', '211735000000000'],
['257', '207454000000000'],
['1281', '197125000000000'],
['513', '174418000000000'],
['1025', '78240600000000'],
['769', '75635600000000'],
['2817', '71460900000000']
]
]
export const pieOption = {
tooltip: {
trigger: 'item'
},
legend: {
show: false
},
color: chartColor,
series: [
{
type: 'pie',
radius: '80%',
label: {
formatter: '{b} {d}%'
}
}
]
}