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

perf: nodata处理、npmLine.vue代码优化

Browse Source
This commit is contained in:
chenjinsong
2022-09-08 17:09:38 +08:00
parent 1ec0859b60
commit fd3ddea871
13 changed files with 103 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,7 @@
height: 100%;
width: 100%;
color: #999;
position: absolute;
}
.data-column__span {
font-weight: bold;

3
src/assets/css/components/views/charts2/networkOverviewLine.scss
View File

@@ -1,10 +1,11 @@
.line.network {
height: 100%;
width: 100%;
position: relative;
border: 1px solid #E2E5EC;
border-radius: 4px;
.chart-drawing {
height: 100%;
height: calc(100% - 74px);
width: 100%;
.echarts-tooltip.echarts-tooltip-dark {
.cn-chart-body {

1
src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
View File

@@ -27,6 +27,7 @@
background: #E2E5EC;
}
.performance-event-pie {
position: relative;
height: 50%;
width: 100%;
.chart-drawing {

1
src/assets/css/components/views/charts2/npmAppCategoryScore.scss
View File

@@ -4,6 +4,7 @@
width: 100%;
display: flex;
.npm-app-left {
position: relative;
height: 100%;
display: flex;
flex: 1;

1
src/assets/css/components/views/charts2/npmEventsByType.scss
View File

@@ -1,4 +1,5 @@
.npm-event {
position: relative;
width: 100%;
height: 100%;
.npm-event-title {

1
src/assets/css/components/views/charts2/npmLine.scss
View File

@@ -1,4 +1,5 @@
.npm-line {
position: relative;
height: 100%;
width: 100%;
border: 1px solid #f0f0f0;

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

@@ -1,6 +1,6 @@
<template>
<div class="cn-chart" style="height: 100%; width: 100%;">
<loading :loading="loading"></loading>
<loading :loading="loading && !disableLoading"></loading>
<network-overview-line
v-if="chart.type === typeMapping.networkOverview.line"
:chart="chart"
@@ -171,6 +171,13 @@ export default {
queryParams: {}
}
},
computed: {
// 排除某些不需要loading的图表，例如npm-tabs
disableLoading () {
const disableChartTypes = [typeMapping.npm.npmTabs]
return disableChartTypes.indexOf(this.chart.type) > -1
}
},
mounted () {
this.getChartData()
},

9
src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="ddos-detection">
<chart-no-data v-if="isNoData"></chart-no-data>
<div class="ddos-detection-title"><i class="cn-icon cn-icon-a-DDosDetection"></i>{{$t('network.ddosDetection')}}</div>
<div class="ddos-detection-value">
<chart-no-data v-if="isNoData"></chart-no-data>
<div class="ddos-detection-type" v-else>
<div class="ddos-detection-value" v-if="!isNoData">
<div class="ddos-detection-type">
<div class="ddos-detection-type-value">
<div class="ddos-detection-type-value-name">{{$t('network.numberOfAttacks')}}</div>
<div class="ddos-detection-type-value-number">{{$_.get(ddosData, 'attackerCount') || 0}}</div>
@@ -59,11 +59,10 @@ export default {
if (res.code === 200) {
if (res.data.result.length === 0) {
this.isNoData = true
return
} else {
this.ddosData = res.data.result[0]
this.isNoData = false
}
this.ddosData = res.data.result[0]
}
}).finally(() => {
this.toggleLoading(false)

6
src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
View File

@@ -1,5 +1,6 @@
<template>
<div class="line network">
<chart-no-data v-if="isNoData"></chart-no-data>
<div class="line-header">
<div class="line-header-left">
<div class="line-value-active" v-if="activeTab"></div>
@@ -57,10 +58,7 @@
</div>
</div>
</div>
<div style="height: calc(100% - 74px); width: 100%;">
<chart-no-data v-if="isNoData"></chart-no-data>
<div class="chart-drawing" v-show="showMarkLine" id="overviewLineChart"></div>
</div>
<div class="chart-drawing" v-show="showMarkLine" id="overviewLineChart"></div>
</div>
</template>

47
src/views/charts2/charts/npm/NpmEventsHeader.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="npm-header">
<div class="npm-header-body" v-for="(item, index) in chartData" :key="index">
<div class="npm-header-body" v-for="(item, index) in chartData" :key=index>
<div class="npm-header-body-severity">
<div class="npm-header-body-severity-icon" :class="item.eventSeverity"></div>
<div class="npm-header-body-severity-value">{{item.eventSeverity}}</div>
@@ -20,7 +20,33 @@ export default {
mixins: [chartMixin],
data () {
return {
chartData: [],
chartData: [
{
eventSeverity: 'critical',
count: '-',
index: 0
},
{
eventSeverity: 'high',
count: '-',
index: 1
},
{
eventSeverity: 'medium',
count: '-',
index: 2
},
{
eventSeverity: 'low',
count: '-',
index: 3
},
{
eventSeverity: 'info',
count: '-',
index: 4
}
],
type: 'severity'
}
},
@@ -43,19 +69,12 @@ export default {
get(api.npm.events.list, params).then(res => {
if (res.code === 200) {
res.data.result.forEach(t => {
if (t.eventSeverity === 'critical') {
t.index = 0
} else if (t.eventSeverity === 'high') {
t.index = 1
} else if (t.eventSeverity === 'info') {
t.index = 4
} else if (t.eventSeverity === 'low') {
t.index = 3
} else if (t.eventSeverity === 'medium') {
t.index = 2
}
this.chartData.forEach(d => {
if (d.eventSeverity === t.eventSeverity) {
d.count = t.count
}
})
})
this.chartData = res.data.result.sort((a, b) => { return a.index - b.index })
}
}).finally(() => {
this.toggleLoading(false)

171
src/views/charts2/charts/npm/NpmLine.vue
View File

@@ -1,5 +1,6 @@
<template>
<div class="npm-line">
<chart-no-data v-if="isNoData"></chart-no-data>
<template v-if="chartData.id === 11">
<div class="npm-line-header">
<div class="npm-line-header-title">{{$t(chartData.i18n) || chartData.name}}</div>
@@ -10,33 +11,27 @@
</div>
</div>
</div>
<chart-no-data v-if="throughputName"></chart-no-data>
<div v-show="!throughputName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
<template v-else-if="chartData.id === 12">
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
<chart-no-data v-if="tcpName"></chart-no-data>
<div v-show="!tcpName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
<template v-else-if="chartData.id === 13">
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
<chart-no-data v-if="httpName"></chart-no-data>
<div v-show="!httpName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
<template v-else-if="chartData.id === 14">
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
<chart-no-data v-if="sslName"></chart-no-data>
<div v-show="!sslName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
<template v-else-if="chartData.id === 15">
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
<chart-no-data v-if="packetsLossName"></chart-no-data>
<div v-show="!packetsLossName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
<template v-else-if="chartData.id === 16">
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
<chart-no-data v-if="packetsRetrainsName"></chart-no-data>
<div v-show="!packetsRetrainsName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template>
</div>
</template>
@@ -80,14 +75,8 @@ export default {
timer: null,
myChartArray: [],
side: this.$store.state.panel.npmLocationSide,
country: this.$store.state.panel.npmLocationCountry,
country: this.$store.state.panel.npmLocationCountry
// province: '',
throughputName: '',
tcpName: '',
httpName: '',
sslName: '',
packetsLossName: '',
packetsRetrainsName: ''
}
},
watch: {
@@ -122,112 +111,48 @@ export default {
// province: this.province
}
this.toggleLoading(true)
if (this.chartData.id === 11) {
get(api.npm.location.thoughput, params).then(res => {
if (res.code === 200) {
if (res.data.result.length === 0) {
this.throughputName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
return
} else {
this.throughputName = ''
}
res.data.result.forEach((t, i) => {
if (t.type === 'totalBytesRate') {
this.chartOptionLineData[i].values = t.values
} else if (t.type === 'inboundBytesRate') {
this.chartOptionLineData[i].values = t.values
} else if (t.type === 'outboundBytesRate') {
this.chartOptionLineData[i].values = t.values
let url
if (this.chart.params) {
if (this.chart.params.index === 0) {
url = api.npm.location.thoughput
} else if (this.chart.params.index === 1) {
url = api.npm.location.tcpConnectionEstablishLatency
} else if (this.chart.params.index === 2) {
url = api.npm.location.httpResponseLatency
} else if (this.chart.params.index === 3) {
url = api.npm.location.sslHandshakeLatency
} else if (this.chart.params.index === 4) {
url = api.npm.location.packetsLoss
} else if (this.chart.params.index === 5) {
url = api.npm.location.packetsRetrains
}
if (url) {
get(url, params).then(res => {
if (res.code === 200) {
this.isNoData = res.data.result.length === 0
if (this.chart.params.index === 0) {
res.data.result.forEach((t, i) => {
if (t.type === 'totalBytesRate') {
this.chartOptionLineData[i].values = t.values
} else if (t.type === 'inboundBytesRate') {
this.chartOptionLineData[i].values = t.values
} else if (t.type === 'outboundBytesRate') {
this.chartOptionLineData[i].values = t.values
}
})
const result = this.chartOptionLineData.filter(t => this.chartData.params.color.indexOf(t.color) > -1)
this.echartsInit(result, this.chartData, this.chartData.params.unitType)
} else {
this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
}
})
const result = this.chartOptionLineData.filter(t => this.chartData.params.color.indexOf(t.color) > -1)
this.echartsInit(result, this.chartData, this.chartData.params.unitType)
} else {
this.throughputName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
}).finally(() => {
this.toggleLoading(false)
})
} else if (this.chartData.id === 12) {
get(api.npm.location.tcpConnectionEstablishLatency, params).then(res => {
if (res.code === 200) {
if (res.data.result.length === 0) {
this.tcpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
return
} else {
this.tcpName = ''
}
this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
} else {
this.tcpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
}).finally(() => {
this.toggleLoading(false)
})
} else if (this.chartData.id === 13) {
get(api.npm.location.httpResponseLatency, params).then(res => {
if (res.code === 200) {
if (res.data.result.length === 0) {
this.httpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
return
} else {
this.httpName = ''
}
this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
} else {
this.httpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
}).finally(() => {
this.toggleLoading(false)
})
} else if (this.chartData.id === 14) {
get(api.npm.location.sslHandshakeLatency, params).then(res => {
if (res.code === 200) {
if (res.data.result.length === 0) {
this.sslName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
return
} else {
this.sslName = ''
}
this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
} else {
this.sslName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
}).finally(() => {
this.toggleLoading(false)
})
} else if (this.chartData.id === 15) {
get(api.npm.location.packetsLoss, params).then(res => {
if (res.code === 200) {
if (res.data.result.length === 0) {
this.packetsLossName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
return
} else {
this.packetsLossName = ''
}
this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
} else {
this.packetsLossName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
}).finally(() => {
this.toggleLoading(false)
})
} else if (this.chartData.id === 16) {
get(api.npm.location.packetsRetrains, params).then(res => {
if (res.code === 200) {
if (res.data.result.length === 0) {
this.packetsRetrainsName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
return
} else {
this.packetsRetrainsName = ''
}
this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
} else {
this.packetsRetrainsName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
}).finally(() => {
this.toggleLoading(false)
})
}).finally(() => {
this.toggleLoading(false)
})
}
} else {
this.isNoData = true
this.toggleLoading(false)
}
},
echartsInit (data, chartData, type) {

4
src/views/charts2/charts/npm/NpmRecentEvents.vue
View File

@@ -96,9 +96,7 @@ export default {
this.toggleLoading(true)
get(url, params).then(res => {
if (res.code === 200) {
if (res.data.result.length === 0) {
this.isNoData = true
}
this.isNoData = res.data.result.length === 0
res.data.result.forEach(e => {
if (e.startTime) {
e.startTime = dateFormatByAppearance(e.startTime)

1
src/views/charts2/charts/npm/NpmTabs.vue
View File

@@ -76,7 +76,6 @@ export default {
}
},
mounted () {
this.toggleLoading(false)
if (this.chart.panelId === drillDownPanelTypeMapping.npmOverviewIp) {
// 当client或server的session数为0时，对应tab置灰，不可选，默认高亮另一个不为0的tab
const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)