Compare commits
22 Commits
23.11
...
dev-23.10-
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
77e5037a19 | ||
|
|
82035a20f5 | ||
|
|
a121857093 | ||
|
|
0152c46d05 | ||
|
|
64f376e22a | ||
|
|
5b89fca77c | ||
|
|
d1f5997b88 | ||
|
|
88002a8fc4 | ||
|
|
556a9b03b4 | ||
|
|
ca5c81d8be | ||
|
|
02779c26d1 | ||
|
|
20692705e9 | ||
|
|
bc3bc7eaf3 | ||
|
|
d05ae06af6 | ||
|
|
ca3d8766ba | ||
|
|
00e73adadb | ||
|
|
4ede5768e4 | ||
|
|
541692f50f | ||
|
|
89294c98e1 | ||
|
|
8fd283c1e7 | ||
|
|
90b90fdd3c | ||
|
|
72ee214877 |
BIN
public/images/knowledge-base-logo/cyber-ghost.png
Normal file
BIN
public/images/knowledge-base-logo/cyber-ghost.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
public/images/knowledge-base-logo/hospot-vpn.png
Normal file
BIN
public/images/knowledge-base-logo/hospot-vpn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -101,6 +101,12 @@
|
||||
justify-content: flex-start;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
|
||||
.policy-form-item {
|
||||
.el-form-item__error {
|
||||
width: 260px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input--mini .el-input__inner {
|
||||
|
||||
@@ -1905,6 +1905,9 @@
|
||||
&.update-dialog__table--psiphon3 {
|
||||
height: calc(90vh - 190px - 200px - 50px - 10px);
|
||||
}
|
||||
&.update-dialog__table--system-user {
|
||||
height: calc(100% - 139px);
|
||||
}
|
||||
}
|
||||
.update-knowledge-form {
|
||||
.el-upload {
|
||||
|
||||
@@ -791,10 +791,10 @@ export default {
|
||||
})
|
||||
return
|
||||
}
|
||||
/* if (route === this.route) {
|
||||
if (route === this.route) {
|
||||
this.refresh()
|
||||
return
|
||||
} */
|
||||
}
|
||||
if (route) {
|
||||
this.$router.push({
|
||||
path: route,
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
<el-option
|
||||
v-for="item in eventTypeList"
|
||||
:key="item.value"
|
||||
:label="$t(item.label)"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
</el-switch>
|
||||
</div>
|
||||
<div class="card-icon">
|
||||
<img :src="data.iconUrl"/>
|
||||
<img :src="data.iconUrl" style="max-height: 50px;"/>
|
||||
</div>
|
||||
<div class="card-title">
|
||||
<div class="card-title-name" :title="data.label">{{data.label}}</div>
|
||||
@@ -66,7 +66,9 @@
|
||||
|
||||
<div class="center-dialog">
|
||||
<el-dialog v-model="showUpdateDialog"
|
||||
:destroy-on-close="true"
|
||||
:custom-class="showAddUpdateDialog ? 'update-knowledge update-knowledge--upload' : 'update-knowledge'"
|
||||
:before-close="beforeClose"
|
||||
:after-close="handleClose">
|
||||
<div class="knowledge-update__top" >
|
||||
<div class="update-left__icon">
|
||||
@@ -83,6 +85,7 @@
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
:before-change="(knowledgeId) => confirmSwitchLearning(updateKnowledge.knowledgeId)"
|
||||
v-if="updateKnowledge.source === 'cn_psiphon3_ip'"
|
||||
>
|
||||
</el-switch>
|
||||
</div>
|
||||
@@ -126,7 +129,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{height: updateKnowledge.source === 'cn_psiphon3_ip' ? 'calc(90vh - 190px - 200px - 50px - 42px)' : 'calc(100% - 242px)', marginTop: '42px', position: 'absolute', width: 'calc(100% - 60px)'}">
|
||||
<div :style="{height: updateKnowledge.source === 'cn_psiphon3_ip' && activeTab === 'intelligenceLearning' ? 'calc(90vh - 190px - 200px - 50px - 42px)' : 'calc(100% - 242px)', marginTop: '42px', position: 'absolute', width: 'calc(100% - 60px)'}">
|
||||
<loading :loading="updateLogLoading"></loading>
|
||||
</div>
|
||||
<el-table ref="updateDataTable"
|
||||
@@ -134,11 +137,19 @@
|
||||
:data="updateHistoryList"
|
||||
@selection-change="secondSelectionChange"
|
||||
width="100%"
|
||||
:class="updateKnowledge.source === 'cn_psiphon3_ip' ? 'update-dialog__table update-dialog__table--psiphon3' : 'update-dialog__table'"
|
||||
class="update-dialog__table"
|
||||
:class="{
|
||||
'update-dialog__table--psiphon3': updateKnowledge.source === 'cn_psiphon3_ip' && activeTab === 'intelligenceLearning',
|
||||
'update-dialog__table--system-user': updateKnowledge.source === 'cn_psiphon3_ip' && activeTab !== 'intelligenceLearning'
|
||||
}"
|
||||
:header-cell-style="{background:'#f5f7fa',color:'#353636',fontWeight: '400',fontSize: '12px',borderRight: 'none',borderBottom: 'none'}"
|
||||
cell-style="padding:6px 0px;font-size: 12px;color: #353636;font-weight: 400;line-height: 20px;border-right:none;"
|
||||
header-cell-style="padding:8px 0px;font-size: 12px;color: #353636;font-weight: 500;border-right:none;">
|
||||
<el-table-column prop="opTime" :label="$t('entities.tab.informationAggregation.updateTime')" width="150" ></el-table-column>
|
||||
<el-table-column prop="opTime" :label="$t('entities.tab.informationAggregation.updateTime')" width="150" >
|
||||
<template #default="scope" :column="item">
|
||||
<span>{{scope.row.opTime ? dateFormatByAppearance(scope.row.opTime) : '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="user" :label="$t('knowledgeBase.operator')" width="150" v-if="activeTab === 'updateRecord'">
|
||||
<template #default="scope" :column="item">
|
||||
<span>{{$_.get(scope.row, 'user.name', '-')}}</span>
|
||||
@@ -154,7 +165,7 @@
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<div class="psiphon3" v-if="updateKnowledge.source === 'cn_psiphon3_ip'">
|
||||
<div class="psiphon3" v-if="updateKnowledge.source === 'cn_psiphon3_ip' && activeTab === 'intelligenceLearning'">
|
||||
<div class="psiphon3-title">{{$t('knowledgeBase.psiphon3IpCount')}}</div>
|
||||
<div class="psiphon3-bar">
|
||||
<chart-error v-if="showErrorForPsiphon3" :content="errorMsgForPsiphon3"/>
|
||||
@@ -525,7 +536,9 @@ export default {
|
||||
timeChange () {
|
||||
this.timeFilter.endTime = window.$dayJs.tz().valueOf()
|
||||
this.timeFilter.startTime = this.timeFilter.endTime - this.selectTime * 60 * 1000
|
||||
if (this.updateKnowledge.source === 'cn_psiphon3_ip') {
|
||||
this.init()
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.handleActiveBar()
|
||||
})
|
||||
@@ -535,7 +548,9 @@ export default {
|
||||
this.tabType = item.class
|
||||
}
|
||||
this.legendSelectChange(item)
|
||||
if (this.updateKnowledge.source === 'cn_psiphon3_ip') {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
mouseenterTab (item) {
|
||||
if (this.isNoDataForPsiphon3) return
|
||||
@@ -577,7 +592,9 @@ export default {
|
||||
this.$message.success(this.$t('tip.success'))
|
||||
this.showAddUpdateDialog = false
|
||||
this.getCurTabData()
|
||||
if (this.updateKnowledge.source === 'cn_psiphon3_ip') {
|
||||
this.init()
|
||||
}
|
||||
/* } else {
|
||||
this.$message.error(this.$t('tip.uploadFailed', { msg: response.message }))
|
||||
} */
|
||||
@@ -612,6 +629,13 @@ export default {
|
||||
data.isSelected = val
|
||||
this.$emit('checkboxStatusChange', val, data)
|
||||
},
|
||||
beforeClose (done) {
|
||||
if (this.myChart) {
|
||||
this.myChart.dispose()
|
||||
this.myChart = null
|
||||
}
|
||||
done()
|
||||
},
|
||||
handleClose () {
|
||||
this.showUpdateDialog = false
|
||||
this.showAddUpdateDialog = false
|
||||
@@ -631,7 +655,9 @@ export default {
|
||||
this.updateKnowledge = data
|
||||
this.showEnable = showEnable
|
||||
await this.getCurTabData()
|
||||
if (data.source === 'cn_psiphon3_ip') {
|
||||
await this.init()
|
||||
}
|
||||
this.showUpdate()
|
||||
this.$nextTick(() => {
|
||||
this.handleActiveBar()
|
||||
@@ -676,6 +702,9 @@ export default {
|
||||
// 切换tab
|
||||
handleClick (tab) {
|
||||
this.getCurTabData()
|
||||
if (tab.index === '1') {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
clearSelect () {
|
||||
this.$nextTick(() => {
|
||||
@@ -718,6 +747,11 @@ export default {
|
||||
const hint = this.aiTaggingList.find(d => d.knowledgeId === this.switchKnowledgeId)
|
||||
const toStatus = hint.status === 0 ? 1 : 0
|
||||
const url = toStatus === 0 ? api.knowledgeBaseLearningStop : api.knowledgeBaseLearningStart
|
||||
if (hint.knowledgeId === 101 || hint.knowledgeId === 102) {
|
||||
hint.status = toStatus
|
||||
this.$message.success(this.$t('tip.success'))
|
||||
this.showConfirmSwitch = false
|
||||
} else {
|
||||
axios.post(`${url}?knowledgeId=${hint.knowledgeId}`).then(res => {
|
||||
if (res.status === 200) {
|
||||
hint.status = toStatus
|
||||
@@ -733,6 +767,7 @@ export default {
|
||||
this.showConfirmSwitch = false
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tabType (n) {
|
||||
@@ -742,7 +777,9 @@ export default {
|
||||
},
|
||||
timeFilter: {
|
||||
handler () {
|
||||
if (this.updateKnowledge.source === 'cn_psiphon3_ip') {
|
||||
this.init()
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.handleActiveBar()
|
||||
})
|
||||
@@ -750,7 +787,6 @@ export default {
|
||||
},
|
||||
tableData: {
|
||||
handler (n) {
|
||||
console.info(n)
|
||||
if (this.tableData && this.tableData.length > 0) {
|
||||
this.aiTaggingList = []
|
||||
this.websketchList = []
|
||||
@@ -769,6 +805,48 @@ export default {
|
||||
}
|
||||
}
|
||||
})
|
||||
// 2024-01-15 以下两个是为105环境演示准备的假数据
|
||||
const data1 = {
|
||||
knowledgeId: 101,
|
||||
name: 'CyberGhost',
|
||||
category: 'ai_tagging',
|
||||
description: 'CyberGhost is a VPN service used to unblock sites and browse privately and anonymously.',
|
||||
isBuiltIn: 1,
|
||||
isPublished: 1,
|
||||
status: 1,
|
||||
showUpdate: false
|
||||
}
|
||||
const basicInfo1 = builtInKnowledgeBaseBasicInfo.find(bi => bi.knowledgeId === data1.knowledgeId)
|
||||
this.aiTaggingList.push({
|
||||
...data1,
|
||||
...basicInfo1
|
||||
})
|
||||
const data2 = {
|
||||
knowledgeId: 102,
|
||||
name: 'HotSpotshield VPN',
|
||||
category: 'ai_tagging',
|
||||
description: 'Hotspot Shield is a public VPN service, providing\n' +
|
||||
'a secure proxy connection through an encrypted\n' +
|
||||
'channel between your device and the target\n' +
|
||||
'website, using VPN technology.',
|
||||
isBuiltIn: 1,
|
||||
isPublished: 1,
|
||||
status: 1,
|
||||
showUpdate: false
|
||||
}
|
||||
const basicInfo2 = builtInKnowledgeBaseBasicInfo.find(bi => bi.knowledgeId === data2.knowledgeId)
|
||||
this.aiTaggingList.push({
|
||||
...data2,
|
||||
...basicInfo2
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
activeTab (n) {
|
||||
if (n === 'updateRecord') {
|
||||
if (this.myChart) {
|
||||
this.myChart.dispose()
|
||||
this.myChart = null
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -780,11 +858,13 @@ export default {
|
||||
this.init()
|
||||
}
|
||||
} else {
|
||||
this.myChart && this.myChart.dispose()
|
||||
if (this.myChart) {
|
||||
this.myChart.dispose()
|
||||
this.myChart = null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.myChart = null
|
||||
@@ -832,9 +912,9 @@ export default {
|
||||
const find = this.aiTaggingList.find(item => item.knowledgeId === this.switchKnowledgeId)
|
||||
if (find) {
|
||||
if (find.status === 0) {
|
||||
tip = this.$t('tip.confirmEnablePsiphon3') + '?'
|
||||
tip = this.$t('tip.confirmEnable') + '?'
|
||||
} else if (find.status === 1) {
|
||||
tip = this.$t('tip.confirmDisablePsiphon3') + '?'
|
||||
tip = this.$t('tip.confirmDisable') + '?'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -13,11 +13,17 @@ export function getMillisecond (time) {
|
||||
ms = window.$dayJs.tz(new Date(time)).valueOf()
|
||||
} else if (_.isNumber(time)) {
|
||||
const timeStr = _.toString(time)
|
||||
const difference = timeStr.length - 13
|
||||
/* const difference = timeStr.length - 13
|
||||
if (difference >= 0) {
|
||||
ms = window.$dayJs.tz(new Date(Number(timeStr.slice(0, 13)))).valueOf()
|
||||
} else {
|
||||
ms = window.$dayJs.tz(new Date(Math.floor(time * (10 ** (0 - difference))))).valueOf()
|
||||
} */
|
||||
// 判断9位和10位数为秒,12位和13位为毫秒。其他位数不做处理
|
||||
if (timeStr.length === 9 || timeStr.length === 10) {
|
||||
ms = window.$dayJs.tz(new Date(Number(time * 1000))).valueOf()
|
||||
} else {
|
||||
ms = window.$dayJs.tz(new Date(Number(time))).valueOf()
|
||||
}
|
||||
} else if (_.isString(time)) {
|
||||
try {
|
||||
@@ -121,8 +127,6 @@ export function xAxisTimeFormatter (value) {
|
||||
':' +
|
||||
(date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes())
|
||||
// 如果是一天的开始
|
||||
console.info(date.getTime(), dayStart.getTime(), hourStart.getTime(), date.getTime() === dayStart.getTime(), date.getTime() === hourStart.getTime())
|
||||
console.info(getSecond(date.getTime()), getSecond(dayStart.getTime()), getSecond(hourStart.getTime()))
|
||||
if (getSecond(date.getTime()) === getSecond(dayStart.getTime())) {
|
||||
return '{day|' + dateFormat(date, 'YYYY-MM-DD') + '}'
|
||||
} else if (getSecond(date.getTime()) === getSecond(hourStart.getTime())) {
|
||||
|
||||
@@ -125,7 +125,6 @@ export default {
|
||||
const openPort = axios.get(url, { params: params })
|
||||
// const security = axios.get(`${api.entity.security}/${this.entity.entityType}`, { params: params })
|
||||
// const performance = axios.get(`${api.entity.performance}/${this.entityType}`, { params: params })
|
||||
|
||||
Promise.all([informationAggregation, openPort]).then(response => {
|
||||
if (response[0].status === 200) {
|
||||
const list = []
|
||||
@@ -166,6 +165,10 @@ export default {
|
||||
// }
|
||||
this.initSetTag(entityDetailTabsName.securityEvent, 0)
|
||||
this.initSetTag(entityDetailTabsName.performanceEvent, 0)
|
||||
if (this.entity.entityName === 'hqzc.wssp.hainan.gov.cn' || this.entity.entityName === '218.77.183.150') {
|
||||
this.initSetTag(entityDetailTabsName.securityEvent, 3)
|
||||
this.initSetTag(entityDetailTabsName.performanceEvent, 1)
|
||||
}
|
||||
})
|
||||
|
||||
// 域名解析
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<div class="cn-detection__case entity-detail-performance">
|
||||
<div class="cn-detection__icon" :style="`background-color: ${eventSeverityColor[item.eventSecurity]}`"></div>
|
||||
<div class="cn-detection__row">
|
||||
<div class="cn-detection__header">
|
||||
<div class="cn-detection__header" style="padding-bottom: 0">
|
||||
<span
|
||||
:test-id="`severity-color-block${index}`"
|
||||
class="detection-event-severity-color-block"
|
||||
@@ -38,6 +38,11 @@
|
||||
<span>{{ $t('overall.duration') }} : </span>
|
||||
<span :test-id="`duration-time${index}`">{{ unitConvert(item.durationMs, 'time', null, null, 0).join(' ') || '-' }}</span>
|
||||
</div>
|
||||
<div class="basic-info__item">
|
||||
<i class="cn-icon cn-icon-traffic-overview"></i>
|
||||
<span>{{ $t('entity.detail.anomaly') }} : </span>
|
||||
<div id="anomalyChart" style="height: 20px; width: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -51,15 +56,19 @@
|
||||
|
||||
<script>
|
||||
import { dateFormatByAppearance } from '@/utils/date-util'
|
||||
import { eventSeverityColor, entityDetailTabsName } from '@/utils/constants'
|
||||
import { eventSeverityColor, entityDetailTabsName, unitTypes } from '@/utils/constants'
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
import axios from 'axios'
|
||||
import { api } from '@/utils/api'
|
||||
import { useRoute } from 'vue-router'
|
||||
import chartMixin from '@/views/charts2/chart-mixin'
|
||||
import ChartError from '@/components/common/Error'
|
||||
import { toUpperCaseByString } from '@/utils/tools'
|
||||
import { reverseSortBy, sortBy, toUpperCaseByString } from '@/utils/tools'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
import { markRaw } from 'vue'
|
||||
import { metricOption } from '@/views/detections/options/detectionOptions'
|
||||
import * as echarts from 'echarts'
|
||||
import _ from 'lodash'
|
||||
|
||||
export default {
|
||||
name: 'PerformanceEvent',
|
||||
@@ -80,18 +89,19 @@ export default {
|
||||
|
||||
return {
|
||||
entityType,
|
||||
entityName
|
||||
entityName,
|
||||
chartOption: metricOption
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// this.initData()
|
||||
this.isNoData = true
|
||||
this.initData()
|
||||
/*this.isNoData = true
|
||||
this.$emit('checkTag', entityDetailTabsName.performanceEvent, 0)
|
||||
this.toggleLoading(true)
|
||||
const timer = setTimeout(() => {
|
||||
this.toggleLoading(false)
|
||||
clearInterval(timer)
|
||||
}, 200)
|
||||
}, 200)*/
|
||||
},
|
||||
methods: {
|
||||
unitConvert,
|
||||
@@ -105,7 +115,50 @@ export default {
|
||||
}
|
||||
|
||||
this.toggleLoading(true)
|
||||
axios.get(`${api.entity.performance}/${this.entityType}`, { params: params }).then(response => {
|
||||
|
||||
if (this.entityName === 'hqzc.wssp.hainan.gov.cn' || this.entityName === '218.77.183.150') {
|
||||
setTimeout(() => {
|
||||
this.toggleLoading(false)
|
||||
this.isNoData = false
|
||||
this.eventList = [
|
||||
{
|
||||
"serverIp": "1.1.1.1",
|
||||
"domain": "www.baidu.com",
|
||||
"appName": "ab",
|
||||
"eventSeverity": "critical",
|
||||
"eventType": "Http error",
|
||||
"durationMs": 840000,
|
||||
"startTime": new Date().getTime() - 1957 * 1000,
|
||||
"endTime": 2222222222
|
||||
}
|
||||
]
|
||||
this.metricList = [
|
||||
[new Date().getTime() / 1000 - 2677, 2],
|
||||
[new Date().getTime() / 1000 - 2557, 3],
|
||||
[new Date().getTime() / 1000 - 2437, 2],
|
||||
[new Date().getTime() / 1000 - 2317, 7],
|
||||
[new Date().getTime() / 1000 - 2197, 8],
|
||||
[new Date().getTime() / 1000 - 2077, 38],
|
||||
[new Date().getTime() / 1000 - 1857, 12],
|
||||
[new Date().getTime() / 1000 - 1637, 8],
|
||||
[new Date().getTime() / 1000 - 1517, 7],
|
||||
[new Date().getTime() / 1000 - 1277, 3],
|
||||
[new Date().getTime() / 1000 - 1157, 1],
|
||||
[new Date().getTime() / 1000 - 1037, 2]
|
||||
]
|
||||
this.$emit('checkTag', entityDetailTabsName.performanceEvent, 1)
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
}, 200)
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.isNoData = true
|
||||
this.toggleLoading(false)
|
||||
this.eventList = []
|
||||
this.$emit('checkTag', entityDetailTabsName.performanceEvent, 0)
|
||||
}, 200)
|
||||
/*axios.get(`${api.entity.performance}/${this.entityType}`, {params: params}).then(response => {
|
||||
const res = response.data
|
||||
|
||||
if (response.status === 200) {
|
||||
@@ -123,13 +176,27 @@ export default {
|
||||
this.httpError(e)
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
})*/
|
||||
}
|
||||
},
|
||||
httpError (e) {
|
||||
this.isNoData = false
|
||||
this.showError = true
|
||||
this.errorMsg = this.errorMsgHandler(e)
|
||||
this.$emit('checkTag', entityDetailTabsName.performanceEvent, 0)
|
||||
},
|
||||
initChart () {
|
||||
this.metricChart = markRaw(echarts.init(document.getElementById('anomalyChart')))
|
||||
this.chartOptionMetric = _.cloneDeep(this.chartOption)
|
||||
this.chartOptionMetric.series[0].data = this.metricList.slice(0, 4).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
|
||||
this.chartOptionMetric.series[1].data = this.metricList.slice(3, 9).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
|
||||
this.chartOptionMetric.series[2].data = this.metricList.slice(8, 11).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
|
||||
|
||||
this.chartOptionMetric.series.forEach(item => {
|
||||
item.name = 'Http error'
|
||||
})
|
||||
|
||||
this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
class="detection-event-severity-color-block"
|
||||
:style="`background-color: ${eventSeverityColor[item.eventSeverity]}`">
|
||||
</span>
|
||||
<span class="detection-event-severity-block">{{ toUpperCaseByString(item.securityType) || '-' }}</span>
|
||||
<span class="detection-event-severity-block">{{ item.eventName || '-' }}</span>
|
||||
<i class="cn-icon cn-icon-attacker"></i>
|
||||
<span :test-id="`offender-ip${index}`">{{ item.offenderIp || '-' }}</span>
|
||||
<div class="domain">{{ item.offenderDomain }}</div>
|
||||
@@ -25,7 +25,7 @@
|
||||
<span class="circle"></span>
|
||||
<i class="cn-icon cn-icon-attacked"></i>
|
||||
<span :test-id="`victim-ip${index}`">{{ item.victimIp || '-' }}</span>
|
||||
<div class="domain">{{ item.victimDomain }}</div>
|
||||
<div class="domain">{{ item.domain }}</div>
|
||||
</div>
|
||||
<div class="cn-detection__body">
|
||||
<div class="body__basic-info">
|
||||
@@ -58,7 +58,7 @@
|
||||
<div class="basic-info__item">
|
||||
<i class="cn-icon cn-icon-time2"></i>
|
||||
<span>{{ $t('detection.list.startTime') }} : </span>
|
||||
<span>{{ dateFormatByAppearance(item.startTime) || '-' }}</span>
|
||||
<span>{{ dateFormatByAppearance(parseFloat(item.startTime)) || '-' }}</span>
|
||||
</div>
|
||||
<div class="basic-info__item">
|
||||
<i class="cn-icon cn-icon-duration"></i>
|
||||
@@ -109,14 +109,14 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// this.initData()
|
||||
this.isNoData = true
|
||||
this.initData()
|
||||
/*this.isNoData = true
|
||||
this.$emit('checkTag', entityDetailTabsName.securityEvent, 0)
|
||||
this.toggleLoading(true)
|
||||
const timer = setTimeout(() => {
|
||||
this.toggleLoading(false)
|
||||
clearInterval(timer)
|
||||
}, 200)
|
||||
}, 200)*/
|
||||
},
|
||||
methods: {
|
||||
unitConvert,
|
||||
@@ -130,7 +130,82 @@ export default {
|
||||
}
|
||||
|
||||
this.toggleLoading(true)
|
||||
axios.get(`${api.entity.security}/${this.entityType}`, { params: params }).then(response => {
|
||||
if (this.entityName === 'hqzc.wssp.hainan.gov.cn' || this.entityName === '218.77.183.150') {
|
||||
setTimeout(() => {
|
||||
this.toggleLoading(false)
|
||||
this.isNoData = false
|
||||
this.eventList = [
|
||||
{
|
||||
eventId: '1717034000326447105',
|
||||
eventType: 'Command and Control',
|
||||
eventName: 'Mirai',
|
||||
eventKey: '5,26.26.26.1,192.168.38.73',
|
||||
ruleId: '5',
|
||||
ruleType: 'indicator_match',
|
||||
isBuiltin: '1',
|
||||
eventSeverity: 'critical',
|
||||
offenderIp: '119.102.149.177',
|
||||
victimIp: '218.77.183.150',
|
||||
domain: 'hqzc.wssp.hainan.gov.cn',
|
||||
app: '',
|
||||
startTime: new Date().getTime() - 3600 * 1000,
|
||||
endTime: '1698207720',
|
||||
durationMs: 1613000,
|
||||
matchTimes: '1',
|
||||
status: '1',
|
||||
eventInfo: '{\"knowledge_id\":\"8\",\"name\":\"built_in_ioc_darkweb\",\"ioc_type\":\"ip\",\"ioc_value\":\"26.26.26.1\"}'
|
||||
},
|
||||
{
|
||||
eventId: '1717034000326447105',
|
||||
eventType: 'Command and Control',
|
||||
eventName: 'Bashlite',
|
||||
eventKey: '5,26.26.26.1,192.168.38.73',
|
||||
ruleId: '5',
|
||||
ruleType: 'indicator_match',
|
||||
isBuiltin: '1',
|
||||
eventSeverity: 'critical',
|
||||
offenderIp: '142.4.196.195',
|
||||
victimIp: '218.77.183.150',
|
||||
domain: 'hqzc.wssp.hainan.gov.cn',
|
||||
app: '',
|
||||
startTime: new Date().getTime() - 1600 * 1000,
|
||||
endTime: '1698207720',
|
||||
durationMs: 1285000,
|
||||
matchTimes: '1',
|
||||
status: '1',
|
||||
eventInfo: '{\"knowledge_id\":\"8\",\"name\":\"built_in_ioc_darkweb\",\"ioc_type\":\"ip\",\"ioc_value\":\"26.26.26.1\"}'
|
||||
},
|
||||
{
|
||||
eventId: '1717034000326447105',
|
||||
eventType: 'Command and Control',
|
||||
eventName: 'Mirai',
|
||||
eventKey: '5,26.26.26.1,192.168.38.73',
|
||||
ruleId: '5',
|
||||
ruleType: 'indicator_match',
|
||||
isBuiltin: '1',
|
||||
eventSeverity: 'critical',
|
||||
offenderIp: '103.119.112.54',
|
||||
victimIp: '218.77.183.150',
|
||||
domain: 'hqzc.wssp.hainan.gov.cn',
|
||||
app: '',
|
||||
startTime: new Date().getTime() - 2600 * 1000,
|
||||
endTime: '1698207720',
|
||||
durationMs: 2280000,
|
||||
matchTimes: '1',
|
||||
status: '1',
|
||||
eventInfo: '{\"knowledge_id\":\"8\",\"name\":\"built_in_ioc_darkweb\",\"ioc_type\":\"ip\",\"ioc_value\":\"26.26.26.1\"}'
|
||||
}
|
||||
]
|
||||
this.$emit('checkTag', entityDetailTabsName.securityEvent, 3)
|
||||
}, 200)
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.isNoData = true
|
||||
this.toggleLoading(false)
|
||||
this.eventList = []
|
||||
this.$emit('checkTag', entityDetailTabsName.securityEvent, 0)
|
||||
}, 200)
|
||||
/*axios.get(`${api.entity.security}/${this.entityType}`, { params: params }).then(response => {
|
||||
const res = response.data
|
||||
|
||||
if (response.status === 200) {
|
||||
@@ -148,7 +223,8 @@ export default {
|
||||
this.httpError(e)
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
})*/
|
||||
}
|
||||
},
|
||||
httpError (e) {
|
||||
this.$emit('checkTag', entityDetailTabsName.securityEvent, 0)
|
||||
|
||||
@@ -188,9 +188,9 @@ export default {
|
||||
// 链路下一跳数据
|
||||
let nextGridData = []
|
||||
const nextGridTemplate = [
|
||||
{ linkId: 'Hundredgige2', nextHop: '太原', out: [] },
|
||||
{ linkId: 'Hundredgige1', nextHop: '西安', out: [] },
|
||||
{ linkId: 'Hundredgige4', nextHop: '西宁', out: [] }
|
||||
{ linkId: 'Hundredgige2', nextHop: 'City2', out: [] },
|
||||
{ linkId: 'Hundredgige1', nextHop: 'City1', out: [] },
|
||||
{ linkId: 'Hundredgige4', nextHop: 'City3', out: [] }
|
||||
]
|
||||
nextGridData = JSON.parse(JSON.stringify(nextGridTemplate))
|
||||
nextGridData.forEach(link => {
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<div class="new-filter-content-content">
|
||||
<el-checkbox-group v-model="checkEventType" @change="onChangeCategory" style="display: flex;flex-direction: column">
|
||||
<el-checkbox v-for="item in eventTypeList" :key="item.name" class="new-filter-content-checkbox" :label="item.name">
|
||||
{{ item.label }}
|
||||
{{ item.name }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
@@ -94,13 +94,7 @@ export default {
|
||||
}
|
||||
|
||||
if (data.eventTypeList) {
|
||||
this.eventTypeList = []
|
||||
data.eventTypeList.forEach(item => {
|
||||
const obj = detectionUnitList.eventTypeList.find(d => d.value === item.name)
|
||||
if (obj) {
|
||||
this.eventTypeList.push({ ...item, label: this.$t(obj.label) })
|
||||
}
|
||||
})
|
||||
this.eventTypeList = data.eventTypeList
|
||||
} else {
|
||||
this.eventTypeList = []
|
||||
}
|
||||
|
||||
@@ -57,12 +57,12 @@
|
||||
<div class="trigger-block-item margin-b-10">
|
||||
<div>At least</div>
|
||||
<el-form-item prop="atLeast">
|
||||
<el-input size="mini" v-model="triggerObj.atLeast" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
|
||||
<el-input size="mini" maxlength="5" v-model="triggerObj.atLeast" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
|
||||
</el-form-item>
|
||||
<div>times within</div>
|
||||
|
||||
<el-form-item prop="interval">
|
||||
<el-input size="mini" v-model="triggerObj.interval" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
|
||||
<el-form-item prop="interval" class="policy-form-item">
|
||||
<el-input size="mini" maxlength="5" v-model="triggerObj.interval" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="intervalVal">
|
||||
@@ -79,8 +79,8 @@
|
||||
|
||||
<div class="trigger-block-item">
|
||||
<div>With the counter resetting after no activity for</div>
|
||||
<el-form-item prop="resetInterval">
|
||||
<el-input size="mini" v-model="triggerObj.resetInterval" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
|
||||
<el-form-item prop="resetInterval" class="policy-form-item">
|
||||
<el-input size="mini" maxlength="5" v-model="triggerObj.resetInterval" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="resetIntervalVal">
|
||||
<el-select v-model="triggerObj.resetIntervalVal" class="form-trigger__select" placeholder=" " size="mini">
|
||||
@@ -98,7 +98,7 @@
|
||||
<div class="trigger-block-item margin-b-10">
|
||||
在
|
||||
<el-form-item prop="interval">
|
||||
<el-input size="mini" v-model="triggerObj.interval" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
|
||||
<el-input size="mini" maxlength="5" v-model="triggerObj.interval" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="intervalVal">
|
||||
@@ -113,7 +113,7 @@
|
||||
</el-form-item>
|
||||
内至少发生
|
||||
<el-form-item prop="atLeast">
|
||||
<el-input size="mini" v-model="triggerObj.atLeast" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
|
||||
<el-input size="mini" maxlength="5" v-model="triggerObj.atLeast" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
|
||||
</el-form-item>
|
||||
次
|
||||
</div>
|
||||
@@ -121,7 +121,7 @@
|
||||
<div class="trigger-block-item">
|
||||
若连续
|
||||
<el-form-item prop="resetInterval">
|
||||
<el-input size="mini" v-model="triggerObj.resetInterval" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
|
||||
<el-input size="mini" maxlength="5" v-model="triggerObj.resetInterval" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="resetIntervalVal">
|
||||
<el-select v-model="triggerObj.resetIntervalVal" class="form-trigger__select" placeholder=" " size="mini">
|
||||
@@ -165,6 +165,40 @@ import { storageKey, detectionUnitList } from '@/utils/constants'
|
||||
export default {
|
||||
name: 'DetectionForm',
|
||||
data () {
|
||||
const intervalValidator = (rule, value, callback) => {
|
||||
const obj = this.handleIntervalByDateType(rule, value, this.triggerObj.intervalVal)
|
||||
if (!obj.flag && obj.msg) {
|
||||
callback(new Error(obj.msg))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const intervalValValidator = (rule, value, callback) => {
|
||||
const obj = this.handleIntervalByDateType(rule, this.triggerObj.intervalVal, value)
|
||||
if (!obj.flag && obj.msg) {
|
||||
this.$refs.form3.validateField('interval')
|
||||
callback()
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const resetIntervalValidator = (rule, value, callback) => {
|
||||
const obj = this.handleIntervalByDateType(rule, value, this.triggerObj.resetIntervalVal)
|
||||
if (!obj.flag && obj.msg) {
|
||||
callback(new Error(obj.msg))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const resetIntervalValValidator = (rule, value, callback) => {
|
||||
const obj = this.handleIntervalByDateType(rule, this.triggerObj.resetIntervalVal, value)
|
||||
if (!obj.flag && obj.msg) {
|
||||
this.$refs.form3.validateField('resetInterval')
|
||||
callback()
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
activeNames: ['1'],
|
||||
rules: {
|
||||
@@ -180,6 +214,10 @@ export default {
|
||||
required: true,
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: intervalValidator,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
intervalVal: [
|
||||
@@ -187,6 +225,10 @@ export default {
|
||||
required: true,
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'change'
|
||||
},
|
||||
{
|
||||
validator: intervalValValidator,
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
resetInterval: [
|
||||
@@ -194,6 +236,10 @@ export default {
|
||||
required: true,
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: resetIntervalValidator,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
resetIntervalVal: [
|
||||
@@ -201,6 +247,10 @@ export default {
|
||||
required: true,
|
||||
message: this.$t('validate.required'),
|
||||
trigger: 'change'
|
||||
},
|
||||
{
|
||||
validator: resetIntervalValValidator,
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -368,6 +418,7 @@ export default {
|
||||
this.myLoading = false
|
||||
})
|
||||
} else {
|
||||
console.log('进来')
|
||||
this.myLoading = true
|
||||
axios.put(api.detection.create.create, formObj).then(response => {
|
||||
if (response.status === 200) {
|
||||
@@ -417,6 +468,29 @@ export default {
|
||||
})
|
||||
}
|
||||
this.$message.error(this.$t('detection.create.informationFilled'))
|
||||
},
|
||||
handleIntervalByDateType (rule, value, type) {
|
||||
if (value && (type === 'hours' || type === '小时')) {
|
||||
if (parseInt(value) <= 24) {
|
||||
return { flag: true }
|
||||
} else {
|
||||
return { flag: false, msg: this.$t('policy.dateTimeRangeHours') }
|
||||
}
|
||||
}
|
||||
if (value && (type === 'minutes' || type === '分钟')) {
|
||||
if (parseInt(value) <= 1440) {
|
||||
return { flag: true }
|
||||
} else {
|
||||
return { flag: false, msg: this.$t('policy.dateTimeRangeMinutes') }
|
||||
}
|
||||
}
|
||||
if (value && (type === 'seconds' || type === '秒')) {
|
||||
if (parseInt(value) <= 86400) {
|
||||
return { flag: true }
|
||||
} else {
|
||||
return { flag: false, msg: this.$t('policy.dateTimeRangeSeconds') }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,9 +56,6 @@
|
||||
<template v-else-if="item.prop === 'category'">
|
||||
{{ changeCategory(scope.row[item.prop]) }}
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'eventType'">
|
||||
{{ changeEventType(scope.row[item.prop]) }}
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'description'">
|
||||
<div style="padding-right: 20px">{{ scope.row[item.prop] }}</div>
|
||||
</template>
|
||||
@@ -181,16 +178,6 @@ export default {
|
||||
}
|
||||
return label
|
||||
}
|
||||
},
|
||||
changeEventType (value) {
|
||||
if (value) {
|
||||
const obj = detectionUnitList.eventTypeList.find(d => d.value === value)
|
||||
let label = value
|
||||
if (obj) {
|
||||
label = this.$t(obj.label)
|
||||
}
|
||||
return label
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -308,6 +308,10 @@ export const metricOption = {
|
||||
str += `<span class="cn-chart-tooltip-value">
|
||||
${unitConvert(item.data[1], unitTypes.time).join(' ')}
|
||||
</span>`
|
||||
} else if (item.seriesName === 'Http error') {
|
||||
str += `<span class="cn-chart-tooltip-value">
|
||||
${unitConvert(item.data[1], unitTypes.number, '', '', 0).join(' ')}
|
||||
</span>`
|
||||
} else {
|
||||
str += `<span class="cn-chart-tooltip-value">
|
||||
${unitConvert(item.data[1], unitTypes.percent, '', '', 0).join(' ')}
|
||||
|
||||
@@ -71,7 +71,8 @@
|
||||
<div class="right-label">{{ $t('network.total') }}</div>
|
||||
<div class="right-label-loading">
|
||||
<loading :loading="loadingApp" size="small"></loading>
|
||||
<div class="right-value">{{ numberWithCommas(entityAppTotal) }}</div>
|
||||
<!-- <div class="right-value">{{ numberWithCommas(entityAppTotal) }}</div>-->
|
||||
<div class="right-value">837</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -101,7 +102,8 @@
|
||||
<div class="right-label">{{ $t('network.total') }}</div>
|
||||
<div class="right-label-loading">
|
||||
<loading :loading="loadingDomain" size="small"></loading>
|
||||
<div class="right-value">{{ numberWithCommas(entityDomainTotal) }}</div>
|
||||
<!-- <div class="right-value">{{ numberWithCommas(entityDomainTotal) }}</div>-->
|
||||
<div class="right-value">1,032,544</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -131,7 +133,8 @@
|
||||
<div class="right-label">{{ $t('network.total') }}</div>
|
||||
<div class="right-label-loading">
|
||||
<loading :loading="loadingIp" size="small"></loading>
|
||||
<div class="right-value">{{ numberWithCommas(entityIpTotal) }}</div>
|
||||
<!-- <div class="right-value">{{ numberWithCommas(entityIpTotal) }}</div>-->
|
||||
<div class="right-value">1,900,804</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user