389 lines
11 KiB
Vue
389 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<div
|
|||
|
|
class="entity-explorer"
|
|||
|
|
:class="{'entity-explorer--show-list': showList}">
|
|||
|
|
<!-- 顶部工具栏，在列表页显示 -->
|
|||
|
|
<div class="explorer-top-tools" v-show="showList">
|
|||
|
|
<DateTimeRange class="date-time-range" :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" ref="dateTimeRange" @change="reload"/>
|
|||
|
|
<TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
|
|||
|
|
<el-button-group size="mini">
|
|||
|
|
<el-button size="mini" @click="listMode = 'list'" :class="{'active': listMode === 'list'}"><i class="cn-icon cn-icon-list"></i></el-button>
|
|||
|
|
<el-button size="mini" @click="listMode = 'block'" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></i></el-button>
|
|||
|
|
</el-button-group>
|
|||
|
|
</div>
|
|||
|
|
<!-- 搜索组件 -->
|
|||
|
|
<explorer-search
|
|||
|
|
:class="{'explorer-search--show-list': showList}"
|
|||
|
|
:show-list="showList"
|
|||
|
|
@search="search"
|
|||
|
|
></explorer-search>
|
|||
|
|
<!-- 内容区 -->
|
|||
|
|
<div class="explorer-container" v-if="showList">
|
|||
|
|
<entity-filter
|
|||
|
|
:filter-data="filterData"
|
|||
|
|
></entity-filter>
|
|||
|
|
<entity-list
|
|||
|
|
:list-data="listData"
|
|||
|
|
:list-mode="listMode"
|
|||
|
|
></entity-list>
|
|||
|
|
</div>
|
|||
|
|
<div class="explorer-foot" v-else>
|
|||
|
|
<div>
|
|||
|
|
<el-divider direction="vertical"></el-divider>
|
|||
|
|
<div class="entity-overview">
|
|||
|
|
<div class="overview-left">
|
|||
|
|
<span>86</span>
|
|||
|
|
<span>APP</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="overview-right">
|
|||
|
|
<div class="right-row">
|
|||
|
|
<i class="cn-icon cn-icon-increase"></i>
|
|||
|
|
<div class="right-label">New</div>
|
|||
|
|
<div class="right-value">51</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right-row">
|
|||
|
|
<i class="cn-icon cn-icon-active"></i>
|
|||
|
|
<div class="right-label">Active</div>
|
|||
|
|
<div class="right-value">56</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<el-divider direction="vertical"></el-divider>
|
|||
|
|
<div class="entity-overview">
|
|||
|
|
<div class="overview-left">
|
|||
|
|
<span>186</span>
|
|||
|
|
<span>DOMAIN</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="overview-right">
|
|||
|
|
<div class="right-row">
|
|||
|
|
<i class="cn-icon cn-icon-increase"></i>
|
|||
|
|
<div class="right-label">New</div>
|
|||
|
|
<div class="right-value">40</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right-row">
|
|||
|
|
<i class="cn-icon cn-icon-active"></i>
|
|||
|
|
<div class="right-label">Active</div>
|
|||
|
|
<div class="right-value">18</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<el-divider direction="vertical"></el-divider>
|
|||
|
|
<div class="entity-overview">
|
|||
|
|
<div class="overview-left">
|
|||
|
|
<span>861</span>
|
|||
|
|
<span>IP</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="overview-right">
|
|||
|
|
<div class="right-row">
|
|||
|
|
<i class="cn-icon cn-icon-increase"></i>
|
|||
|
|
<div class="right-label">New</div>
|
|||
|
|
<div class="right-value">99</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right-row">
|
|||
|
|
<i class="cn-icon cn-icon-active"></i>
|
|||
|
|
<div class="right-label">Active</div>
|
|||
|
|
<div class="right-value">37</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<el-divider direction="vertical"></el-divider>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import ExplorerSearch from '@/views/entityExplorer/search/ExplorerSearch'
|
|||
|
|
import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
|
|||
|
|
import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
|
|||
|
|
import EntityFilter from '@/views/entityExplorer/EntityFilter'
|
|||
|
|
import EntityList from '@/views/entityExplorer/entityList/EntityList'
|
|||
|
|
import { entityType, entityFilterType } from '@/utils/constants'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'entity-explorer',
|
|||
|
|
components: {
|
|||
|
|
ExplorerSearch,
|
|||
|
|
DateTimeRange,
|
|||
|
|
TimeRefresh,
|
|||
|
|
EntityFilter,
|
|||
|
|
EntityList
|
|||
|
|
},
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
showList: false,
|
|||
|
|
listMode: 'block', // entity列表的模式，list|block
|
|||
|
|
timeFilter: {},
|
|||
|
|
|
|||
|
|
filterData: [
|
|||
|
|
{
|
|||
|
|
type: 'ip',
|
|||
|
|
title: entityType.ip,
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
label: this.$t('overall.country'),
|
|||
|
|
column: 'country_distinct_count',
|
|||
|
|
icon: entityFilterType.ip[0].icon,
|
|||
|
|
value: 15
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: this.$t('overall.province'),
|
|||
|
|
column: 'province_distinct_count',
|
|||
|
|
icon: entityFilterType.ip[1].icon,
|
|||
|
|
value: 201
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: this.$t('overall.city'),
|
|||
|
|
column: 'city_distinct_count',
|
|||
|
|
icon: entityFilterType.ip[2].icon,
|
|||
|
|
value: 1052
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: this.$t('entities.asn'),
|
|||
|
|
column: 'asn_distinct_count',
|
|||
|
|
icon: entityFilterType.ip[3].icon,
|
|||
|
|
value: 76
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'app',
|
|||
|
|
title: entityType.app,
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
label: this.$t('entities.category'),
|
|||
|
|
column: 'category_distinct_count',
|
|||
|
|
icon: entityFilterType.app[0].icon,
|
|||
|
|
value: 15
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: this.$t('entities.subcategory'),
|
|||
|
|
column: 'subcategory_distinct_count',
|
|||
|
|
icon: entityFilterType.app[1].icon,
|
|||
|
|
value: 201
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: this.$t('entities.risk'),
|
|||
|
|
column: 'risk_distinct_count',
|
|||
|
|
icon: entityFilterType.app[2].icon,
|
|||
|
|
value: 1052
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'domain',
|
|||
|
|
title: entityType.domain,
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
label: this.$t('entities.domainDetail.categoryGroup'),
|
|||
|
|
column: 'category_group_distinct_count',
|
|||
|
|
icon: entityFilterType.domain[0].icon,
|
|||
|
|
value: 31
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: this.$t('entities.category'),
|
|||
|
|
column: 'category_distinct_count',
|
|||
|
|
icon: entityFilterType.domain[1].icon,
|
|||
|
|
value: 82
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: this.$t('entities.reputationLevel'),
|
|||
|
|
column: 'reputation_level_distinct_count',
|
|||
|
|
icon: entityFilterType.domain[2].icon,
|
|||
|
|
value: 8
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
listData: JSON.parse(`[
|
|||
|
|
{
|
|||
|
|
"entityType": "app",
|
|||
|
|
"appName": "360cn",
|
|||
|
|
"appCategory": "general-internet",
|
|||
|
|
"appId": "",
|
|||
|
|
"appRisk": "1",
|
|||
|
|
"appSubcategory": "internet-utility"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"entityType": "app",
|
|||
|
|
"appName": "suning",
|
|||
|
|
"appCategory": "general-internet",
|
|||
|
|
"appId": "",
|
|||
|
|
"appRisk": "1",
|
|||
|
|
"appSubcategory": "internet-utility"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"entityType": "app",
|
|||
|
|
"appName": "dianping",
|
|||
|
|
"appCategory": "general-internet",
|
|||
|
|
"appId": "",
|
|||
|
|
"appRisk": "1",
|
|||
|
|
"appSubcategory": "internet-utility"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"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"
|
|||
|
|
}
|
|||
|
|
]`)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
timeRefreshChange () {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
reload () {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
search (param) {
|
|||
|
|
if (!this.showList) {
|
|||
|
|
this.showList = true
|
|||
|
|
}
|
|||
|
|
// 带参数时，只查询对应类型的entity；不带参数时，3种entity都查
|
|||
|
|
if (param) {
|
|||
|
|
return '1'
|
|||
|
|
} else {
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
queryFilter () {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
queryList () {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|