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

CN-714 feat: dns图表定义

Browse Source
This commit is contained in:
chenjinsong
2022-09-15 15:51:00 +08:00
parent 79a578537e
commit 33d3791c7b
7 changed files with 171 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/assets/css/components/views/charts2/linkDirectionGrid.scss
View File

@@ -1,3 +1,72 @@
.link-direction-grid {
display: flex;
border: 1px solid #E2E5EC;
height: 100%;
width: 100%;
border-radius: 4px;
.link-statistical-dimension {
width: 50%;
padding: 20px;
.dimension-title {
font-size: 14px;
color: #046ECA;
}
.data-grid {
height: 100px;
.egress-row {
padding-left: 190px;
height: 100%;
display: flex;
.egress-id {
display: flex;
align-items: flex-end;
width: 50px;
height: 100%;
margin-right: 8px;
transform: rotate(-45deg) translate(-5px,-15px);
color: #353636;
font-size: 12px;
}
}
.data-row {
display: flex;
.ingress-id {
display: flex;
align-items: center;
justify-content: flex-end;
width: 190px;
height: 50px;
margin-bottom: 10px;
padding-right: 12px;
color: #353636;
font-size: 12px;
}
.data-item {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
margin: 0 8px 8px 0;
border: 1px solid #DEDEDE;
border-radius: 4px;
.data-item__point {
height: 8px;
width: 8px;
border-radius: 50%;
background-color: #749F4D;
&:first-of-type {
margin-right: 6px;
}
}
}
}
}
}
}

19
src/mock/linkMonitor.js
View File

@@ -2,7 +2,7 @@ import Mock from 'mockjs'
const openMock = true
if (openMock) {
Mock.mock(BASE_CONFIG.baseUrl + 'interface/linkMonitor/links', 'get', function (requestObj) {
Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/links.*'), 'get', function (requestObj) {
const linkData = []
for (let i = 0; i < 94; i++) {
linkData.push({ linkId: 20 * (i + 300), totalBitsRate: Math.floor(Math.pow(1.1, i) * 10000) })
@@ -15,4 +15,21 @@ if (openMock) {
}
}
})
Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/linkTrafficDirection.*'), 'get', function (requestObj) {
const data = []
const ingressLinkIds = ['256', '512', '768', '1024', '1280', '1536', '1792', '2048', '2304', '2816']
const egressLinkIds = ['257', '513', '769', '1025', '1281', '1537', '1793', '2049', '2305', '2817']
ingressLinkIds.forEach(ingress => {
egressLinkIds.forEach(egress => {
data.push({ egressLinkId: egress, ingressLinkId: ingress, egressUsage: 128000, ingressUsage: 12800, totalBitsRate: 985412, score: 6, tcpConnectionEstablishLatency: 50, httpResponseLatency: 50, sslResponseLatency: 50, packetsLoss: 0.2, packetRetrans: 0.1 })
})
})
return {
msg: 'success',
code: 200,
data: {
result: data
}
}
})
}

2
src/mock/npm.js
View File

@@ -2,7 +2,7 @@ import Mock from 'mockjs'
const openMock = false
if (openMock) {
Mock.mock(RegExp(BASE_CONFIG.baseUrl + 'visual/panel*'), 'get', function (requestObj) {
Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'visual/panel.*'), 'get', function (requestObj) {
return {
"msg": "success",
"code": 200,

5
src/utils/api.js
View File

@@ -20,6 +20,8 @@ export const api = {
login: '/sys/login',
// user
user: '/sys/user',
// 获取配置
config: '/sys/config',
// role
role: '/sys/role',
menu: '/sys/role/menu/',
@@ -196,7 +198,8 @@ export const api = {
}
},
linkMonitor: {
links: '/interface/linkMonitor/links'
links: '/interface/linkMonitor/links',
linkTrafficDirection: '/interface/linkMonitor/linkTrafficDirection'
}
}

8
src/views/charts2/Chart.vue
View File

@@ -128,6 +128,12 @@
:chart="chart"
@toggleLoading="toggleLoading"
></link-traffic-line>
<link-direction-grid
v-else-if="chart.type === typeMapping.linkMonitor.linkDirectionGrid"
:time-filter="timeFilter"
:chart="chart"
@toggleLoading="toggleLoading"
></link-direction-grid>
<dns-active-malicious-domain
v-else-if="chart.type === typeMapping.dnsInsight.dnsActiveMaliciousDomain"
:time-filter="timeFilter"
@@ -186,9 +192,11 @@ import DnsTrafficLine from '@/views/charts2/charts/dnsInsight/DnsTrafficLine'
import { get } from '@/utils/http'
import { getNowTime, getSecond } from '@/utils/date-util'
import { ref } from 'vue'
import LinkDirectionGrid from '@/views/charts2/charts/linkMonitor/LinkDirectionGrid'
export default {
name: 'Chart',
components: {
LinkDirectionGrid,
NpmEventsHeader,
NpmRecentEvents,
NpmEventsByType,

5
src/views/charts2/chart-tools.js
View File

@@ -23,10 +23,11 @@ export const typeMapping = {
linkMonitor: {
linkBlock: 707,
linkTrafficSankey: 708,
linkTrafficLine: 105
linkTrafficLine: 105,
linkDirectionGrid: 709
},
dnsInsight: {
dnsTrafficLine: 106,
dnsTrafficLine: 704,
dnsEventChart: 711,
dnsRecentEvents: 605,
dnsActiveMaliciousDomain: 604

70
src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
View File

@@ -1,12 +1,78 @@
<template>
<div class="link-direction-grid"></div>
<div class="link-direction-grid">
<div class="link-statistical-dimension">
<div class="dimension-title">{{$t('linkMonitor.egressLink')}}&nbsp;&&nbsp;{{$t('linkMonitor.ingressLink')}}</div>
<div class="data-grid">
<div class="egress-row">
<div class="egress-id" v-for="(item, index) in gridData" :key="index">{{item.linkId}}</div>
</div>
<div class="data-row" v-for="(row, index) in gridData" :key="index">
<div class="ingress-id">{{row.linkId}}</div>
<div class="data-item" v-for="(item, index2) in row.egress" :key="index2">
<div class="data-item__point"></div>
<div class="data-item__point"></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import chartMixin from '@/views/charts2/chart-mixin'
import { getSecond } from '@/utils/date-util'
import { api } from '@/utils/api'
import { get } from '@/utils/http'
export default {
name: 'LinkDirectionGrid',
mixins: [chartMixin]
mixins: [chartMixin],
data () {
return {
gridData: [],
gridData2: []
}
},
methods: {
init () {
const params = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime)
}
const configRequest = get(api.config, { ckey: 'link_info' })
const dataRequest = get(api.linkMonitor.linkTrafficDirection, params)
Promise.all([configRequest, dataRequest]).then(res => {
if (res[0].code === 200 && res[1].code === 200) {
if (res[0].page.list && res[0].page.list.length > 0) {
// 链路基本信息
const linkInfo = JSON.parse(res[0].page.list[0].cvalue)
// 链路流量数据
const linkData = res[1].data.result
const gridData = []
linkData.forEach(d => {
const ingressLink = linkInfo.find(l => l.originalLinkId === d.ingressLinkId)
const egressLink = linkInfo.find(l => l.originalLinkId === d.egressLinkId)
if (ingressLink && egressLink) {
const data = gridData.find(g => g.linkId === ingressLink.linkId)
if (data) {
const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
if (!existedEgressLink) {
data.egress.push({ linkId: egressLink.linkId, totalBitsRate: d.totalBitsRate })
}
} else {
gridData.push({ linkId: ingressLink.linkId, egress: [{ linkId: egressLink.linkId, totalBitsRate: d.totalBitsRate }] })
}
}
})
this.gridData = gridData
}
}
})
}
},
mounted () {
this.toggleLoading(false)
this.init()
}
}
</script>