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

CN-587 feat: 调整实体detection列表无数据提示

Browse Source
This commit is contained in:
changyongqiang
2022-05-25 14:52:30 +08:00
parent f77b3abacd
commit fd34f58b7b
12 changed files with 108 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/assets/css/components/views/charts/chart.scss
View File

@@ -408,3 +408,25 @@
cursor: pointer;
z-index: 2;
}
.panel-chart__no-data.all-clear {
flex-direction: column;
.no-recent-alerts {
display: flex;
flex-direction: column;
color: #333333;
font-weight: 400;
text-align: center;
i {
color: #23BF9A;
font-size: 50px;
}
span {
font-size: 22px;
margin: 5px 0;
}
}
no-detection {
font-size: 12px;
color: #333;
}
}

10
src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
View File

@@ -55,6 +55,16 @@
flex-wrap: wrap;
padding: 2px 0;
font-size: 14px;
.no-recent-alerts {
font-size: 12px;
color: #333333;
font-weight: 400;
line-height: 19px;
i {
color: #23BF9A;
margin-right: 4px;
}
}
&.overview__row--small-font {
font-size: 12px;

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

@@ -1,7 +1,7 @@
<template>
<div class="cn-chart">
<loading :loading="loading && !isTabs && !isBlock && !isGroup"></loading>
<chart-no-data v-if="isNoData"></chart-no-data>
<chart-no-data v-if="isNoData" :active-tab="activeTab"></chart-no-data>
<template v-else>
<chart-tabs
ref="chart"
@@ -397,7 +397,8 @@ export default {
table: Object,
timeFilter: Object,
orderPieTable: String,
tabHandleClickType: String
tabHandleClickType: String,
activeTab: Number
},
computed: {
isNoData () {

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

@@ -36,6 +36,7 @@
:loading="loading"
:entity="entity"
:table="table"
:active-tab="activeTab"
:is-fullscreen="isFullscreen"
:order-pie-table="orderPieTable"
:time-filter="timeFilter"
@@ -102,7 +103,8 @@ export default {
timeFilter: Object, // 时间范围
isFullscreen: Boolean,
panelLock: Boolean,
entity: Object
entity: Object,
activeTab: Number
},
data () {
return {

3
src/views/charts/PanelChartList.vue
View File

@@ -32,6 +32,7 @@
:chart-info="item"
:time-filter="timeFilter"
:entity="entity"
:active-tab="activeTab"
@groupShow="groupShow"
@showFullscreen="showFullscreen"
></panel-chart>
@@ -56,6 +57,7 @@
:is-fullscreen="true"
:panelLock="panelLock"
:time-filter="timeFilter"
:active-tab="activeTab"
@showFullscreen="showFullscreen"
></panel-chart>
</el-dialog>
@@ -84,6 +86,7 @@ export default {
panelLock: { type: Boolean, default: true },
isGroup: Boolean,
entity: Object,
activeTab: Number,
dataList: Array // 看板中所有图表信息
},
data () {

14
src/views/charts/charts/ChartNoData.vue
View File

@@ -1,9 +1,19 @@
<template>
<div class="panel-chart__no-data">No data</div>
<div v-if="!activeTab && activeTab !== 706 && activeTab !== 707" class="panel-chart__no-data">No data</div>
<div v-else class="panel-chart__no-data all-clear">
<div class="no-recent-alerts">
<i class="el-icon-success"></i>
<span>{{$t('detection.allClear')}}</span>
</div>
<div class="no-detection">{{$t('detection.noDetection')}}</div>
</div>
</template>
<script>
export default {
name: 'ChartNoData'
name: 'ChartNoData',
props: {
activeTab: Number
}
}
</script>

5
src/views/charts/charts/ChartRelationShip.vue
View File

@@ -100,7 +100,7 @@
<div class="ship-body-list-title">{{$t('relationShip.alert')}}</div>
<div class="ship-body-list-value security">
<template v-if="entityData.showShipServerity">
<template v-for="(item, index) in entityData.shipServerity" :key="index">
<template v-for="(item, index) in entityData.shipSeverity" :key="index">
<template v-if="item.severityData && item.severityData.length > 0">
<span class="ship-body-list-security-alert" :class="iconClass(item)">{{ item.eventSeverity }}</span>
<span class="ship-body-list-security-length">{{ item.severityData.length }}</span>
@@ -137,6 +137,7 @@ export default {
entityType: 'ip',
trafficUrl: api.entityIpDetailTraffic,
performanceUrl: api.entityIpDetailPerformance,
securityUrl: api.entityIpDetailSecurity,
ServerOverviewUrl: api.entityIpRelatedServerIpOverview,
basicProperties: api.entityIpDetailBasic
},
@@ -144,6 +145,7 @@ export default {
entityType: 'domain',
trafficUrl: api.entityDomainDetailTraffic,
performanceUrl: api.entityDomainDetailPerformance,
securityUrl: api.entityDomainDetailSecurity,
ServerOverviewUrl: api.entityDomainRelatedServerDomainOverview,
basicProperties: api.entityDomainDetailBasic
},
@@ -151,6 +153,7 @@ export default {
entityType: 'app',
trafficUrl: api.entityAppDetailTraffic,
performanceUrl: api.entityAppDetailPerformance,
securityUrl: api.entityAppDetailSecurity,
ServerOverviewUrl: api.entityAppRelatedServerAppOverview,
basicProperties: api.entityAppDetailBasic
},

1
src/views/charts/charts/ChartTabs.vue
View File

@@ -15,6 +15,7 @@
v-if="activeTab == tab.id"
:time-filter="timeFilter"
:data-list="tab.children"
:active-tab="activeTab"
:panel-lock="true"
:entity="entity"
>

79
src/views/charts/charts/chart-relation-ship.js
View File

@@ -19,10 +19,13 @@ export default {
chartOption: null,
sentChart: null,
receivedChart: null,
tableData: {}
tableData: {},
shipSeverity: []
},
chartOption: null,
echartsArray: []
echartsArray: [],
security: [],
performance: []
}
},
computed: {
@@ -161,41 +164,47 @@ export default {
})
},
queryEntityDetailPerformance (urlObj, params, queryParams) {
queryEntityDetailAll (urlObj, params, queryParams) {
this.loadingAlert = true
get(urlObj.performanceUrl, queryParams).then(response => {
if (response.code === 200) {
this.entityData.shipServerity = []
const criticalList = response.data.result.filter(item => item.eventSeverity === 'critical')
const highList = response.data.result.filter(item => item.eventSeverity === 'high')
const infoList = response.data.result.filter(item => item.eventSeverity === 'info')
const mediumList = response.data.result.filter(item => item.eventSeverity === 'medium')
const lowList = response.data.result.filter(item => item.eventSeverity === 'low')
this.entityData.shipServerity.push(
{
severityData: criticalList,
eventSeverity: 'critical'
}, {
severityData: highList,
eventSeverity: 'high'
}, {
severityData: infoList,
eventSeverity: 'info'
}, {
severityData: mediumList,
eventSeverity: 'medium'
}, {
severityData: lowList,
eventSeverity: 'low'
}
)
this.entityData.shipServerity.forEach(item => {
if (item.severityData.length > 0) {
this.entityData.showShipServerity = true
} else {
this.entityData.showShipServerity = false
}
})
this.performance = response.data.result
}
})
get(urlObj.securityUrl, queryParams).then(response => {
this.security = response.data.result
})
const severity = [...this.security, ...this.performance]
const criticalList = severity.filter(item => item.eventSeverity === 'critical')
const highList = severity.filter(item => item.eventSeverity === 'high')
const infoList = severity.filter(item => item.eventSeverity === 'info')
const mediumList = severity.filter(item => item.eventSeverity === 'medium')
const lowList = severity.filter(item => item.eventSeverity === 'low')
this.entityData.shipSeverity[0] = {
severityData: criticalList,
eventSeverity: 'critical'
}
this.entityData.shipSeverity[1] = {
severityData: highList,
eventSeverity: 'high'
}
this.entityData.shipSeverity[2] = {
severityData: infoList,
eventSeverity: 'info'
}
this.entityData.shipSeverity[3] = {
severityData: mediumList,
eventSeverity: 'medium'
}
this.entityData.shipSeverity[4] = {
severityData: lowList,
eventSeverity: 'low'
}
this.entityData.shipSeverity.forEach(item => {
if (item.severityData.length > 0) {
this.entityData.showShipServerity = true
} else {
this.entityData.showShipServerity = false
}
this.loadingAlert = false
})
@@ -245,7 +254,7 @@ export default {
this.entityData.tableData.symbol = params.data.symbol.slice(8)
this.entityData.tableData.type = urlObj.entityType
this.queryEntityDetailTraffic(urlObj, params, queryParams)
this.queryEntityDetailPerformance(urlObj, params, queryParams)
this.queryEntityDetailAll(urlObj, params, queryParams)
this.queryEntityDetaServerOverview(urlObj, params, queryParams)
this.getBasicProperties(urlObj, params, queryParams)
},

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

@@ -145,8 +145,7 @@
<div class="overview__content overview__content-loading">
<loading :loading="loadingAlert"></loading>
<div class="overview__row">
<div class="row__label">{{$t('entities.recentAlert')}}</div>
<div class="row__content">{{entityData.performanceNum}}</div>
<span v-if="performanceData.length === 0" class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
</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">{{dateFormatByAppearance(performance.startTime) || '-'}}</div>
@@ -166,8 +165,7 @@
<div class="overview__content overview__content-loading">
<loading :loading="loadingSecurityEvents"></loading>
<div class="overview__row">
<div class="row__label">{{$t('entities.recentSecurity')}}</div>
<div class="row__content">{{entityData.securityNum}}</div>
<span v-if="entityData.securityList.length <= 0" class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
</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">{{dateFormatByAppearance(security.startTime) || '-'}}</div>

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

@@ -149,8 +149,7 @@
<div class="overview__content overview__content-loading">
<loading :loading="loadingAlert"></loading>
<div class="overview__row">
<div class="row__label">{{$t('entities.recentAlert')}}</div>
<div class="row__content">{{entityData.performanceNum}}</div>
<span v-if="performanceData.length === 0" class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
</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">{{dateFormatByAppearance(performance.startTime) || '-'}}</div>
@@ -170,8 +169,7 @@
<div class="overview__content overview__content-loading">
<loading :loading="loadingSecurityEvents"></loading>
<div class="overview__row">
<div class="row__label">{{$t('entities.recentSecurity')}}</div>
<div class="row__content">{{entityData.securityNum}}</div>
<span v-if="securityData.length === 0" class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
</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">{{dateFormatByAppearance(getMillisecond(security.startTime)) || '-'}}</div>

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

@@ -172,8 +172,7 @@
<div class="overview__content overview__content-loading">
<loading :loading="loadingAlert"></loading>
<div class="overview__row">
<div class="row__label">{{$t('entities.recentAlert')}}</div>
<div class="row__content">{{entityData.performanceNum}}</div>
<span v-if="performanceData.length === 0" class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
</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">{{dateFormatByAppearance(performance.startTime) || '-'}}</div>
@@ -193,8 +192,7 @@
<div class="overview__content overview__content-loading">
<loading :loading="loadingSecurityEvents"></loading>
<div class="overview__row">
<div class="row__label">{{$t('entities.recentSecurity')}}</div>
<div class="row__content">{{entityData.securityNum}}</div>
<span v-if="securityData.length === 0" class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
</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">{{dateFormatByAppearance(security.startTime) || '-'}}</div>