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

fix: 修复 npm 下钻接口字段

Browse Source
This commit is contained in:
@changcode
2022-08-30 19:08:29 +08:00
parent 72f058ff7e
commit 258a7fd4a6
5 changed files with 232 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -81,14 +81,25 @@
}
}
}
.el-table__header-wrapper .el-table__header {
tr th:nth-last-child(-n+3) {
text-align: center;
}
}
.el-table__body-wrapper.is-scrolling-none {
height: 306px !important;
tr td {
padding: 13px 0;
}
tr td:nth-last-child(-n+3) {
text-align: center;
.data-total {
justify-content: center;
}
}
.data-total{
}
}
.data-total {
display: flex !important;
.data-total-category-icon {
i {
@@ -122,15 +133,25 @@
background: #749F4D;
}
}
.data-total-value {
display: flex;
justify-content: right;
width: 50%;
}
.data-trend{
display: flex;
width: 50%;
}
.data-total-trend {
display: flex;
justify-content: left;
margin-left: 6px;
font-size: 12px;
align-items: center;
justify-content: center;
margin-top: 2px;
border-radius: 10px;
font-weight:500;
font-weight: 500;
font-size: 12px;
height: 20px;
padding: 0 5px;
@@ -142,11 +163,11 @@
}
.data-total-trend-green {
background-color: rgba(126,159,84,0.12);
color:#7E9F54;
color: #7E9F54;
}
.data-total-trend-red {
background-color: rgba(226,97,84,0.12);
color:#E26154;
color: #E26154;
.cn-icon-rise1{
color: #E44D3E;
}

2
src/utils/api.js
View File

@@ -163,6 +163,8 @@ export const api = {
relatedSessions: '/interface/application/performance/relatedSessions',
// 各维度下钻流量曲线图
trafficGraph: '/interface/application/performance/overview/drilldown/drilldown/dimension/trafficGraph',
// 各维度下钻网络性能
networkAnalysis: '/interface/application/performance/overview/drilldown/dimension/networkAnalysis',
// 下钻地图
map: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/trafficAnalysis',
mapTcp: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/tcpSessionDelay',

18
src/views/charts2/charts/SingleValue.vue
View File

@@ -3,7 +3,7 @@
<template v-if="index === 0">
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<div class="single-value__content">
<div class="single-value__content-number">{{unitConvert(npm.establishLatencyAvg, unitTypes.time).join(' ')}}</div>
<div class="single-value__content-number">{{unitConvert(npm.establishLatencyMsAvg, unitTypes.time).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;{{unitConvert(npm.value, unitTypes.percent).join('')}}
</div>
@@ -16,8 +16,8 @@
<div v-else></div>
</div>
<div class="single-value__circle">
<div class="single-value__circle-p95">P95: {{unitConvert(npm.establishLatencyP95, unitTypes.time).join(' ')}}</div>
<div class="single-value__circle-p99">P99: {{unitConvert(npm.establishLatencyP99, unitTypes.time).join(' ')}}</div>
<div class="single-value__circle-p95">P95: {{unitConvert(npm.establishLatencyMsP95, unitTypes.time).join(' ')}}</div>
<div class="single-value__circle-p99">P99: {{unitConvert(npm.establishLatencyMsP99, unitTypes.time).join(' ')}}</div>
</div>
</template>
<template v-if="index === 1">
@@ -63,7 +63,7 @@
<template v-if="index === 3">
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<div class="single-value__content">
<div class="single-value__content-number">{{unitConvert(npm.sequenceGapLossAvg, unitTypes.percent).join(' ')}}</div>
<div class="single-value__content-number">{{unitConvert(npm.tcpLostlenPercentAvg, 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;{{unitConvert(npm.value, unitTypes.percent).join('')}}
</div>
@@ -76,14 +76,14 @@
<div v-else></div>
</div>
<div class="single-value__circle">
<div class="single-value__circle-p95">P95: {{unitConvert(npm.sequenceGapLossP95, unitTypes.percent).join(' ')}}</div>
<div class="single-value__circle-p99">P99: {{unitConvert(npm.sequenceGapLossP99, unitTypes.percent).join(' ')}}</div>
<div class="single-value__circle-p95">P95: {{unitConvert(npm.tcpLostlenPercentP95, unitTypes.percent).join(' ')}}</div>
<div class="single-value__circle-p99">P99: {{unitConvert(npm.tcpLostlenPercentP99, unitTypes.percent).join(' ')}}</div>
</div>
</template>
<template v-if="index === 4">
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<div class="single-value__content">
<div class="single-value__content-number">{{unitConvert(npm.pktRetransAvg, unitTypes.percent).join(' ')}}</div>
<div class="single-value__content-number">{{unitConvert(npm.pktRetransPercentAvg, 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;{{unitConvert(npm.value, unitTypes.percent).join('')}}
</div>
@@ -96,8 +96,8 @@
<div v-else></div>
</div>
<div class="single-value__circle">
<div class="single-value__circle-p95">P95: {{unitConvert(npm.pktRetransP95, unitTypes.percent).join(' ')}}</div>
<div class="single-value__circle-p99">P99: {{unitConvert(npm.pktRetransP99, unitTypes.percent).join(' ')}}</div>
<div class="single-value__circle-p95">P95: {{unitConvert(npm.pktRetransPercentP95, unitTypes.percent).join(' ')}}</div>
<div class="single-value__circle-p99">P99: {{unitConvert(npm.pktRetransPercentP99, unitTypes.percent).join(' ')}}</div>
</div>
</template>
</div>

12
src/views/charts2/charts/npm/NpmAppCategoryScore.vue
View File

@@ -34,7 +34,8 @@
<span class="data-total-category-value">{{$t(scope.row.i18n)}}</span>
</template>
<template v-else-if="item.prop === 'total'">
{{unitConvert(scope.row.totalPacketsRate, unitTypes.bps).join('')}}
<div class="data-total-value">{{unitConvert(scope.row.totalPacketsRate, unitTypes.bps).join('')}}</div>
<div class="data-trend">
<div v-if="scope.row.bytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('')}}
</div>
@@ -45,9 +46,11 @@
<i class="cn-icon-constant cn-icon"></i>
</div>
<div v-else></div>
</div>
</template>
<template v-else-if="item.prop === 'outbound'">
{{unitConvert(scope.row.outboundPacketsRate, unitTypes.bps).join('')}}
<div class="data-total-value">{{unitConvert(scope.row.outboundPacketsRate, unitTypes.bps).join('')}}</div>
<div class="data-trend">
<div v-if="scope.row.outboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('')}}
</div>
@@ -58,9 +61,11 @@
<i class="cn-icon-constant cn-icon"></i>
</div>
<div v-else></div>
</div>
</template>
<template v-else-if="item.prop === 'inbound'">
{{unitConvert(scope.row.inboundPacketsRate, unitTypes.bps).join('')}}
<div class="data-total-value">{{unitConvert(scope.row.inboundPacketsRate, unitTypes.bps).join('')}}</div>
<div class="data-trend">
<div v-if="scope.row.inboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('')}}
</div>
@@ -71,6 +76,7 @@
<i class="cn-icon-constant cn-icon"></i>
</div>
<div v-else></div>
</div>
</template>
<template v-else-if="item.prop === 'score'">
<div v-if="scope.row.score <= 2" :class="{'data-score-red': scope.row.score <= 2}" class="data-score">

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

@@ -82,6 +82,43 @@ export default {
params.type = type
}
}
if (type && condition) {
this.toggleLoading(true)
get(api.npm.overview.networkAnalysis, params).then(res => {
if (res.code === 200) {
res.data.result = {
establishLatencyMsAvg: 0.16,
establishLatencyMsP50: 0.16,
establishLatencyMsP90: 0.16,
establishLatencyMsP95: 0.16,
establishLatencyMsP99: 0.16,
httpResponseLatencyAvg: 0.16,
httpResponseLatencyP50: 0.16,
httpResponseLatencyP90: 0.16,
httpResponseLatencyP95: 0.16,
httpResponseLatencyP99: 0.16,
sslConLatencyAvg: 0.16,
sslConLatencyP50: 0.16,
sslConLatencyP90: 0.16,
sslConLatencyP95: 0.16,
sslConLatencyP99: 0.16,
tcpLostlenPercentAvg: 0.16,
tcpLostlenPercentP50: 0.16,
tcpLostlenPercentP90: 0.16,
tcpLostlenPercentP95: 0.16,
tcpLostlenPercentP99: 0.16,
pktRetransPercentAvg: 0.16,
pktRetransPercentP50: 0.16,
pktRetransPercentP90: 0.16,
pktRetransPercentP95: 0.16,
pktRetransPercentP99: 0.16
}
this.npmNetworkCycleData = res.data.result
}
}).finally(() => {
this.toggleLoading(false)
})
} else {
const tcp = get(api.npm.overview.tcpSessionDelay, params)
const http = get(api.npm.overview.httpResponseDelay, params)
const ssl = get(api.npm.overview.sslConDelay, params)
@@ -97,6 +134,7 @@ export default {
}).finally(() => {
this.toggleLoading(false)
})
}
},
npmNetworkLastCycleQuery () {
let condition = ''
@@ -134,39 +172,52 @@ export default {
params.type = type
}
}
const tcp = get(api.npm.overview.tcpSessionDelay, params)
const http = get(api.npm.overview.httpResponseDelay, params)
const ssl = get(api.npm.overview.sslConDelay, params)
const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params)
const packetPercent = get(api.npm.overview.packetRetransPercent, params)
if (type && condition) {
this.toggleLoading(true)
Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
get(api.npm.overview.networkAnalysis, params).then(res => {
const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
const scoreInfo = {}
res.forEach((t, i) => {
if (t.code === 200) {
if (t.data.result.establishLatencyAvg || t.data.result.establishLatencyAvg === 0) {
t.data.result.establishLatencyMs = t.data.result.establishLatencyAvg
let index = 0
if (res.code === 200) {
res.data.result = {
establishLatencyMsAvg: 0.16,
httpResponseLatencyAvg: 0.16,
sslConLatencyAvg: 0.16,
tcpLostlenPercentAvg: 1,
pktRetransPercentAvg: 1
}
if (t.data.result.httpResponseLatencyAvg || t.data.result.httpResponseLatencyAvg === 0) {
t.data.result.httpResponseLatency = t.data.result.httpResponseLatencyAvg
if (res.data.result.establishLatencyMsAvg || res.data.result.establishLatencyMsAvg === 0) {
res.data.result.establishLatencyMs = res.data.result.establishLatencyMsAvg
index = 0
}
if (t.data.result.sequenceGapLossAvg || t.data.result.sequenceGapLossAvg === 0) {
t.data.result.tcpLostlenPercent = t.data.result.sequenceGapLossAvg
if (res.data.result.httpResponseLatencyAvg || res.data.result.httpResponseLatencyAvg === 0) {
res.data.result.httpResponseLatency = res.data.result.establishLatencyMsAvg
index = 1
}
if (t.data.result.pktRetransAvg || t.data.result.pktRetransAvg === 0) {
t.data.result.pktRetransPercent = t.data.result.pktRetransAvg
if (res.data.result.tcpLostlenPercentAvg || res.data.result.tcpLostlenPercentAvg === 0) {
res.data.result.tcpLostlenPercent = res.data.result.establishLatencyMsAvg
index = 3
}
if (t.data.result.sslConLatencyAvg || t.data.result.sslConLatencyAvg === 0) {
t.data.result.sslConLatency = t.data.result.sslConLatencyAvg
if (res.data.result.pktRetransPercentAvg || res.data.result.pktRetransPercentAvg === 0) {
res.data.result.pktRetransPercent = res.data.result.establishLatencyMsAvg
index = 4
}
scoreInfo[keyPre[i] + 'Score'] = computeScore(t.data.result, i)
this.npmNetworkLastCycleData.push(t.data.result)
this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData)
if (res.data.result.sslConLatencyAvg || res.data.result.sslConLatencyAvg === 0) {
res.data.result.sslConLatency = res.data.result.establishLatencyMsAvg
index = 2
}
scoreInfo[keyPre[index] + 'Score'] = computeScore(res.data.result, index)
this.npmNetworkLastCycleData = res.data.result
let timer = null
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
}, 300)
} else {
t[keyPre[i] + 'Score'] = 0
res[keyPre[index] + 'Score'] = 0
}
})
scoreInfo.score = Math.ceil((scoreInfo.tcpScore + scoreInfo.httpScore + scoreInfo.sslScore + scoreInfo.tcpLostScore + scoreInfo.packetRetransScore) * 6)
if (scoreInfo.score > 6) {
scoreInfo.score = 6
@@ -177,8 +228,58 @@ export default {
}).finally(() => {
this.toggleLoading(false)
})
} else {
const tcp = get(api.npm.overview.tcpSessionDelay, params)
const http = get(api.npm.overview.httpResponseDelay, params)
const ssl = get(api.npm.overview.sslConDelay, params)
const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params)
const packetPercent = get(api.npm.overview.packetRetransPercent, params)
this.toggleLoading(true)
Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
res.forEach((t, i) => {
if (t.code === 200) {
this.npmNetworkLastCycleData.push(t.data.result)
this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 1)
}
})
}).finally(() => {
this.toggleLoading(false)
})
}
},
npmNetworkQuantity (cycle, lastCycle) {
npmNetworkQuantity (cycle, lastCycle, num) {
if (num === 0) {
this.npmNetworkData[0] = {
establishLatencyMsAvg: cycle.establishLatencyMsAvg,
establishLatencyMsP99: cycle.establishLatencyMsP99,
establishLatencyMsP95: cycle.establishLatencyMsP95,
value: getChainRatio(cycle.establishLatencyMsAvg, lastCycle.establishLatencyMsAvg)
}
this.npmNetworkData[1] = {
httpResponseLatencyAvg: cycle.httpResponseLatencyAvg,
httpResponseLatencyP99: cycle.httpResponseLatencyP99,
httpResponseLatencyP95: cycle.httpResponseLatencyP95,
value: getChainRatio(cycle.httpResponseLatencyAvg, lastCycle.httpResponseLatencyAvg)
}
this.npmNetworkData[2] = {
sslConLatencyAvg: cycle.sslConLatencyAvg,
sslConLatencyP99: cycle.sslConLatencyP99,
sslConLatencyP95: cycle.sslConLatencyP95,
value: getChainRatio(cycle.sslConLatencyAvg, lastCycle.sslConLatencyAvg)
}
this.npmNetworkData[3] = {
tcpLostlenPercentAvg: cycle.tcpLostlenPercentAvg,
tcpLostlenPercentP99: cycle.tcpLostlenPercentP99,
tcpLostlenPercentP95: cycle.tcpLostlenPercentP95,
value: getChainRatio(cycle.tcpLostlenPercentAvg, lastCycle.tcpLostlenPercentAvg)
}
this.npmNetworkData[4] = {
pktRetransPercentAvg: cycle.pktRetransPercentAvg,
pktRetransPercentP99: cycle.pktRetransPercentP99,
pktRetransPercentP95: cycle.pktRetransPercentP95,
value: getChainRatio(cycle.pktRetransPercentAvg, lastCycle.pktRetransPercentAvg)
}
} else if (num === 1) {
cycle.forEach(t => {
lastCycle.forEach(e => {
Object.keys(t).forEach(r => {
@@ -192,6 +293,7 @@ export default {
})
this.npmNetworkData = cycle
}
}
},
mounted () {
if (this.chart) {