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

CN-866 feat: 单测用例--network overview ddos检测图 编写单测用例

Browse Source
This commit is contained in:
@changcode
2023-01-29 16:04:01 +08:00
parent 4655eed55f
commit e9edd9cf05
4 changed files with 55 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,15 +11,15 @@
<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">{{unitConvert($_.get(ddosData, 'attackerCount'), unitTypes.number).join(' ') || 0}}</div>
<div class="ddos-detection-type-value-number" test-id="attackerCount">{{unitConvert($_.get(ddosData, 'attackerCount'), unitTypes.number).join(' ')}}</div>
</div>
<div class="ddos-detection-type-value">
<div class="ddos-detection-type-value-name">{{$t('network.number0fVictims')}}</div>
<div class="ddos-detection-type-value-number">{{unitConvert($_.get(ddosData, 'victimCount'), unitTypes.number).join(' ') || 0}}</div>
<div class="ddos-detection-type-value-number" test-id="victimCount">{{unitConvert($_.get(ddosData, 'victimCount'), unitTypes.number).join(' ')}}</div>
</div>
<div class="ddos-detection-type-value">
<div class="ddos-detection-type-value-name">{{$t('network.number0fDetectedAttackEvents')}}</div>
<div class="ddos-detection-type-value-number ddos-event">{{unitConvert($_.get(ddosData, 'attackEventCount'), unitTypes.number).join(' ') || 0}}</div>
<div class="ddos-detection-type-value-number ddos-event" test-id="attackEventCount">{{unitConvert($_.get(ddosData, 'attackEventCount'), unitTypes.number).join(' ')}}</div>
</div>
</div>
<el-button size="small">{{$t('network.ddosDetection')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
@@ -63,8 +63,8 @@ export default {
methods: {
ddosDetectDataRequests () {
const params = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime)
startTime: this.timeFilter && this.timeFilter.startTime ? getSecond(this.timeFilter.startTime) : '',
endTime: this.timeFilter && this.timeFilter.endTime ? getSecond(this.timeFilter.endTime) : ''
}
this.toggleLoading(true)
get(api.netWorkOverview.ddosEventAnalysis, params).then(res => {

35
src/views/charts2/charts/npm/NpmNetworkQuantity.vue
View File

@@ -1,47 +1,47 @@
<template>
<div class="npm-network-quantity" test-id="npmOverviewQuantity">
<div class="npm-network-quantity">
<div class="single-value" v-for="(npm, index) in newNpmNetworkData" :key="index">
<div class="single-value__title" style="display: flex">
{{ $t(npmNetworkName[index].name) }}
<chart-error v-if="npm.message" tooltip :content="npm.message"></chart-error>
</div>
<div class="single-value__content">
<div class="single-value__content-number" v-if="index ===0 || index ===1 || index ===2">
<div class="single-value__content" >
<div class="single-value__content-number" v-if="index ===0 || index ===1 || index ===2" :test-id="`singleValueContent${index}`">
{{ unitConvert(npm.Avg, unitTypes.time).join(' ') }}
</div>
<div class="single-value__content-number" v-else>
<div class="single-value__content-number" v-else :test-id="`singleValueContent${index}`">
{{unitConvert(npm.Avg, unitTypes.percent).join(' ')}}
</div>
<div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;
<span v-if="npm.value <= 5">
<div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red" >
<i class="cn-icon-rise1 cn-icon" :test-id="`singleValueTrendIcon${index}`"></i>&nbsp;
<span v-if="npm.value <= 5" :test-id="`singleValueTrendValue${index}`">
{{ unitConvert(npm.value, unitTypes.percent).join('') }}
</span>
<span v-else>>500.00%</span>
<span v-else :test-id="`singleValueTrendValue${index}`">>500.00%</span>
</div>
<div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-decline cn-icon"></i>&nbsp;
<span v-if="npm.value >= -5">
{{ unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '') }}
<div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green" >
<i class="cn-icon-decline cn-icon" :test-id="`singleValueTrendIcon${index}`"></i>&nbsp;
<span v-if="npm.value >= -5" :test-id="`singleValueTrendValue${index}`">
{{ unitConvert(npm.value, unitTypes.percent).join('') }}
</span>
<span v-else>>500.00%</span>
<span v-else :test-id="`singleValueTrendValue${index}`">>500.00%</span>
</div>
<div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>
<div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black" >
<i class="cn-icon-constant cn-icon" :test-id="`singleValueTrendIcon${index}`"></i>
</div>
<div v-else></div>
</div>
<div class="single-value__circle">
<div class="single-value__circle-p95">
<div class="single-value__circle-p95" :test-id="`singleValueP95${index}`">
<span v-if="index ===0 || index ===1 || index ===2">
P95:{{ unitConvert(npm.P95, unitTypes.time).join(' ') }}</span>
<span v-else>
P95:{{ unitConvert(npm.P95, unitTypes.percent).join(' ') }}
</span>
</div>
<div class="single-value__circle-p99">
<div class="single-value__circle-p99" :test-id="`singleValueP99${index}`">
<span v-if="index ===0 || index ===1 || index ===2">
P99:{{ unitConvert(npm.P99, unitTypes.time).join(' ') }}
</span>
@@ -128,7 +128,6 @@ export default {
endTime: getSecond(this.timeFilter.endTime),
cycle: 0
}
console.log(params)
if (parseFloat(this.tabIndex) === 0) {
this.side = 'client'
} else if (parseFloat(this.tabIndex) === 1) {