worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix(client): ネットワークトラフィックが10MB/sを超えると、ネットワークメトリクスウィジェットのグラフが誤って出力される問題

Browse source
This commit is contained in:
NoriDev 2023-06-06 22:18:14 +09:00
parent 9f9fc6fc84
commit af256f8215
3 changed files with 46 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
CHANGELOG_CHERRYPICK.md
View file

@ -22,6 +22,14 @@
이 문서는 CherryPick의 변경 사항만 포함합니다.<br> 이 문서는 CherryPick의 변경 사항만 포함합니다.<br>
전체 변경 사항을 확인하려면, [CHANGELOG.md](CHANGELOG.md) 문서를 참고하십시오. 전체 변경 사항을 확인하려면, [CHANGELOG.md](CHANGELOG.md) 문서를 참고하십시오.
## 13.x.x-cp-4.x.x
출시일: unreleased
### Client
- Fix: 네트워크 트래픽이 10MB/s를 초과하면 네트워크 통계 위젯의 그래프가 잘못 출력되는 문제
---
## 13.13.1-cp-4.0.0 ## 13.13.1-cp-4.0.0
출시일: 2023/06/06 출시일: 2023/06/06

20
packages/frontend/src/widgets/server-metric/cpu-mem-net-pie.vue
View file

@ -14,14 +14,26 @@
</div> </div>
<div :class="$style.divider"></div> <div :class="$style.divider"></div>
<div :class="$style.div"> <div :class="$style.div">
<!-- 基準が10MBなので、基準を超えるとグラフが壊れる問題がある --> <!-- Max: 10GB -->
<XPie :class="$style.pie" :value="inRecent / 10000000"/> <XPie v-if="inRecent > 1000000000" :class="$style.pie" :value="inRecent / 1000000000"/>
<!-- Max: 1GB -->
<XPie v-else-if="inRecent > 100000000" :class="$style.pie" :value="inRecent / 100000000"/>
<!-- Max: 100MB -->
<XPie v-else-if="inRecent > 10000000 && inRecent <= 100000000" :class="$style.pie" :value="inRecent / 100000000"/>
<!-- Max: 10MB -->
<XPie v-else :class="$style.pie" :value="inRecent / 10000000"/>
<div :class="$style.div2"> <div :class="$style.div2">
<p>NET rx</p> <p>NET rx</p>
<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text"><tspan>{{ bytes(inRecent, 1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">{{ bytesSizes(inRecent) }}</span></tspan></text> <text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text"><tspan>{{ bytes(inRecent, 1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">{{ bytesSizes(inRecent) }}</span></tspan></text>
</div> </div>
<!-- 基準が10MBなので、基準を超えるとグラフが壊れる問題がある --> <!-- Max: 10GB -->
<XPie :class="$style.pie" :value="outRecent / 10000000"/> <XPie v-if="outRecent > 1000000000" :class="$style.pie" :value="outRecent / 1000000000"/>
<!-- Max: 1GB -->
<XPie v-if="outRecent > 100000000" :class="$style.pie" :value="outRecent / 100000000"/>
<!-- Max: 100MB -->
<XPie v-else-if="outRecent > 10000000 && outRecent <= 100000000" :class="$style.pie" :value="outRecent / 100000000"/>
<!-- Max: 10MB -->
<XPie v-else :class="$style.pie" :value="outRecent / 10000000"/>
<div :class="$style.div2"> <div :class="$style.div2">
<p>NET tx</p> <p>NET tx</p>
<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text"><tspan>{{ bytes(outRecent, 1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">{{ bytesSizes(outRecent) }}</span></tspan></text> <text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text"><tspan>{{ bytes(outRecent, 1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">{{ bytesSizes(outRecent) }}</span></tspan></text>

23
packages/frontend/src/widgets/server-metric/net-pie.vue
View file

@ -1,13 +1,25 @@
<template> <template>
<div :class="$style.root"> <div :class="$style.root">
<!-- 基準が10MBなので、基準を超えるとグラフが壊れる問題がある --> <!-- Max: 10GB -->
<XPie :class="$style.pie" :value="inRecent / 10000000"/> <XPie v-if="inRecent > 1000000000" :class="$style.pie" :value="inRecent / 1000000000"/>
<!-- Max: 1GB -->
<XPie v-else-if="inRecent > 100000000" :class="$style.pie" :value="inRecent / 100000000"/>
<!-- Max: 100MB -->
<XPie v-else-if="inRecent > 10000000 && inRecent <= 100000000" :class="$style.pie" :value="inRecent / 100000000"/>
<!-- Max: 10MB -->
<XPie v-else :class="$style.pie" :value="inRecent / 10000000"/>
<div :class="$style.div"> <div :class="$style.div">
<p>NET rx</p> <p>NET rx</p>
<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text"><tspan>{{ bytes(inRecent, 1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">{{ bytesSizes(inRecent) }}</span></tspan></text> <text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text"><tspan>{{ bytes(inRecent, 1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">{{ bytesSizes(inRecent) }}</span></tspan></text>
</div> </div>
<!-- 基準が10MBなので、基準を超えるとグラフが壊れる問題がある --> <!-- Max: 10GB -->
<XPie :class="$style.pie" :value="outRecent / 10000000"/> <XPie v-if="outRecent > 1000000000" :class="$style.pie" :value="outRecent / 1000000000"/>
<!-- Max: 1GB -->
<XPie v-if="outRecent > 100000000" :class="$style.pie" :value="outRecent / 100000000"/>
<!-- Max: 100MB -->
<XPie v-else-if="outRecent > 10000000 && outRecent <= 100000000" :class="$style.pie" :value="outRecent / 100000000"/>
<!-- Max: 10MB -->
<XPie v-else :class="$style.pie" :value="outRecent / 10000000"/>
<div :class="$style.div"> <div :class="$style.div">
<p>NET tx</p> <p>NET tx</p>
<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text"><tspan>{{ bytes(outRecent, 1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">{{ bytesSizes(outRecent) }}</span></tspan></text> <text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text"><tspan>{{ bytes(outRecent, 1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">{{ bytesSizes(outRecent) }}</span></tspan></text>
@ -32,6 +44,9 @@ let outRecent: number = $ref(0);
function onStats(connStats) { function onStats(connStats) {
inRecent = connStats.net.rx; inRecent = connStats.net.rx;
outRecent = connStats.net.tx; outRecent = connStats.net.tx;
console.log('in: ' + inRecent);
console.log('out: ' + outRecent);
} }
onMounted(() => { onMounted(() => {