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

CN-989 实体详情--域名解析和开放端口tab开发

Browse Source
This commit is contained in:
hyx
2023-05-06 11:37:03 +08:00
parent eadfd66556
commit 76e8fe9734
5 changed files with 124 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/css/components/index.scss
View File

@@ -65,6 +65,7 @@
@import './views/charts2/linkBlock';
@import './views/charts2/linkTrafficSankey';
@import './views/charts2/linkDirectionGrid';
@import './views/charts2/domainNameResolution.scss';
@import 'views/charts2/linkTrafficLine';
@import 'views/charts2/dnsTrafficLine';
@import 'views/charts2/dnsRecentEvents';

54
src/assets/css/components/views/charts2/domainNameResolution.scss Normal file
View File

@@ -0,0 +1,54 @@
.type-data__column {
display:flex;
flex-direction: column;
margin-left:5px;
margin-right:0px;
margin-top:0px;
.type-data {
display:flex;
flex-flow:row wrap;
margin-top:15px;
.type-title {
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom:15px;
margin-right:10px;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #575757;
line-height: 20px;
font-weight: 600;
.title-mark {
width: 4px;
height: 16px;
margin-left:0px;
margin-right: 6px;
background: #38ACD2;
border-radius: 1px;
}
}
.type-content {
display:flex;
flex-flow: row wrap;
width:100%;
.data-item {
display: flex;
justify-content: center;
align-items: center;
background: rgba(119,131,145,0.06);
border: 1px solid rgba(119,131,145,0.36);
border-radius: 2px;
height:28px;
padding:8px 15px;
margin-right:10px;
margin-bottom:15px;
font-size: 12px;
color: #353636;
font-weight: 400;
}
}
}
}

5
src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
View File

@@ -15,6 +15,7 @@
<domain-name-resolution v-else-if="tab.name === entityDetailTabsName.domainNameResolution"></domain-name-resolution>
<security-event v-else-if="tab.name === entityDetailTabsName.securityEvent" :timeFilter="timeFilter" />
<performance-event v-else-if="tab.name === entityDetailTabsName.performanceEvent" />
<open-port v-else-if="tab.name === entityDetailTabsName.openPort"></open-port>
</el-tab-pane>
</el-tabs>
</div>
@@ -29,6 +30,7 @@ import InformationAggregation from '@/views/charts2/charts/entityDetail/tabs/Inf
import DomainNameResolution from '@/views/charts2/charts/entityDetail/tabs/DomainNameResolution'
import SecurityEvent from '@/views/charts2/charts/entityDetail/tabs/SecurityEvent'
import PerformanceEvent from '@/views/charts2/charts/entityDetail/tabs/PerformanceEvent'
import OpenPort from '@/views/charts2/charts/entityDetail/tabs/OpenPort'
export default {
name: 'EntityDetailTabs',
@@ -37,7 +39,8 @@ export default {
PerformanceEvent,
SecurityEvent,
InformationAggregation,
DomainNameResolution
DomainNameResolution,
OpenPort
},
data () {
return {

40
src/views/charts2/charts/entityDetail/tabs/DomainNameResolution.vue
View File

@@ -1,9 +1,45 @@
<template>
域名解析
<div class="type-data__column">
<div class="type-data">
<div class="type-title">
<span class="title-mark" ></span>{{ $t('entities.tab.relatedApp') }}&nbsp;&nbsp;({{relatedAppList.length}})</div>
<div class="type-content">
<div v-for="app in relatedAppList" class="data-item">{{app}}</div>
</div>
</div>
<div class="type-data">
<div class="type-title">
<span class="title-mark" ></span>{{ $t('entities.tab.relatedIp') }}&nbsp;&nbsp;({{relatedIpList.length}})</div>
<div class="type-content">
<div v-for="ip in relatedIpList" class="data-item">{{ip}}</div>
</div>
</div>
<div class="type-data">
<div class="type-title">
<span class="title-mark" ></span>{{ $t('entities.tab.relatedDomain') }}&nbsp;&nbsp;({{relatedDomainList.length}})</div>
<div class="type-content">
<div v-for="domain in relatedDomainList" class="data-item">{{domain}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DomainNameResolution'
name: 'DomainNameResolution',
props: {
},
data () {
return {
relatedAppList: [],
relatedIpList: [],
relatedDomainList: []
}
},
mounted () {
this.relatedAppList = ['Wechat', 'baidu', 'Wechat', 'baidu', 'Wechat', 'baidu', 'Wechat']
this.relatedIpList = ['116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242']
this.relatedDomainList = ['-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com']
}
}
</script>

27
src/views/charts2/charts/entityDetail/tabs/OpenPort.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<div class="type-data__column">
<div class="type-data">
<div class="type-title">
<span class="title-mark" ></span>{{ $t('entities.tab.currentDevelopmentPortsAndServices') }}&nbsp;&nbsp;(5)</div>
<div class="type-content">
<div v-for="openPort in openPortList" class="data-item">{{openPort}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'OpenPort',
props: {
},
data () {
return {
openPortList: []
}
},
mounted () {
this.openPortList = ['11/rpcbind', '22/rpcbind', '231/zmpt', '22/rpcbind', '231/zmpt']
}
}
</script>