From f4b14a3d38e086068f593c9e5a8616349af248c9 Mon Sep 17 00:00:00 2001 From: Suchitra Swain Date: Wed, 10 Sep 2025 22:27:01 +0200 Subject: [PATCH 1/7] [2417]: feat: bandwidth chart radial charts should use same reference point --- src/status/NetworkTraffic.js | 46 +++++++++++++++++++----------------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/src/status/NetworkTraffic.js b/src/status/NetworkTraffic.js index 8b9d90cf4..538614636 100644 --- a/src/status/NetworkTraffic.js +++ b/src/status/NetworkTraffic.js @@ -6,39 +6,37 @@ import { Title } from './Commons.js' class NetworkTraffic extends React.Component { state = { - downSpeed: { - filled: 0, - total: 125000 // Starts with 1 Mb/s max - }, - upSpeed: { - filled: 0, - total: 125000 // Starts with 1 Mb/s max - } + commonTotal: 125000, + downFilled: 0, + upFilled: 0 } componentDidUpdate (_, prevState) { const { nodeBandwidth } = this.props - const down = nodeBandwidth ? parseInt(nodeBandwidth.rateIn.toFixed(0), 10) : 0 - const up = nodeBandwidth ? parseInt(nodeBandwidth.rateOut.toFixed(0), 10) : 0 + const down = nodeBandwidth ? Math.trunc(Number(nodeBandwidth.rateIn) || 0) : 0 + const up = nodeBandwidth ? Math.trunc(Number(nodeBandwidth.rateOut) || 0) : 0 + + const combinedNow = down + up + + const nextCommonTotal = Math.max(prevState.commonTotal, combinedNow) - if (down !== prevState.downSpeed.filled || up !== prevState.upSpeed.filled) { + if ( + down !== prevState.downFilled || + up !== prevState.upFilled || + nextCommonTotal !== prevState.commonTotal + ) { this.setState({ - downSpeed: { - filled: down, - total: Math.max(down, prevState.downSpeed.total) - }, - upSpeed: { - filled: up, - total: Math.max(up, prevState.upSpeed.total) - } + downFilled: down, + upFilled: up, + commonTotal: nextCommonTotal }) } } render () { const { t } = this.props - const { downSpeed, upSpeed } = this.state + const { downFilled, upFilled, commonTotal } = this.state return (
@@ -48,13 +46,17 @@ class NetworkTraffic extends React.Component { + filled={downFilled} + total={commonTotal} + />
+ filled={upFilled} + total={commonTotal} + />
From f5d3a014a9c7746a2f0f89ad363ef23de6531290 Mon Sep 17 00:00:00 2001 From: Suchitra Swain Date: Mon, 15 Sep 2025 22:59:23 +0200 Subject: [PATCH 2/7] e2e fixed --- .github/workflows/test-e2e.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/test-e2e.yml b/.github/workflows/test-e2e.yml index bd062b85d..d59d26d40 100644 --- a/.github/workflows/test-e2e.yml +++ b/.github/workflows/test-e2e.yml @@ -113,7 +113,7 @@ jobs: if: failure() uses: actions/upload-artifact@v4 with: - name: test-results + name: test-results-shard-${{ matrix.shardIndex }} path: test-results/ retention-days: 7 From 2a4a05fa7f9102fa6ac66dbf7f6c1c2060da912f Mon Sep 17 00:00:00 2001 From: Suchitra Swain Date: Mon, 15 Sep 2025 23:01:34 +0200 Subject: [PATCH 3/7] e2e fixed --- .github/workflows/test-e2e.yml | 2 +- test/e2e/settings.test.js | 17 ++++++++++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/.github/workflows/test-e2e.yml b/.github/workflows/test-e2e.yml index d59d26d40..bd062b85d 100644 --- a/.github/workflows/test-e2e.yml +++ b/.github/workflows/test-e2e.yml @@ -113,7 +113,7 @@ jobs: if: failure() uses: actions/upload-artifact@v4 with: - name: test-results-shard-${{ matrix.shardIndex }} + name: test-results path: test-results/ retention-days: 7 diff --git a/test/e2e/settings.test.js b/test/e2e/settings.test.js index 99bbad38b..82cc8561c 100644 --- a/test/e2e/settings.test.js +++ b/test/e2e/settings.test.js @@ -42,7 +42,22 @@ async function submitGatewayAndCheck (page, inputElement, submitButton, gatewayU await inputElement.fill(gatewayURL) // Check if the submit button is not null, and click it only if it's available if (submitButton) { - await submitButton.click() + try { + await page.waitForFunction( + (button) => !button.disabled, + submitButton, + { timeout: 5000 } + ) + await submitButton.click() + } catch (error) { + const freshSubmitButton = await page.waitForSelector('#public-subdomain-gateway-submit-button') + await page.waitForFunction( + (button) => !button.disabled, + freshSubmitButton, + { timeout: 5000 } + ) + await freshSubmitButton.click() + } } const hasExpectedClass = await checkClassWithTimeout(page, inputElement, expectedClass) expect(hasExpectedClass).toBe(true) From b04195f0d7bc62432b7f0087c63dd830b5fe455b Mon Sep 17 00:00:00 2001 From: Marcin Rataj Date: Wed, 17 Sep 2025 01:38:34 +0200 Subject: [PATCH 4/7] fix: improve flaky gateway settings test replace try-catch workaround with proper Playwright locator API that handles React re-renders automatically - use page.locator() with button ID for stable element reference - use expect().toBeEnabled() for proper waiting - increase timeout to 10s for slower environments --- test/e2e/settings.test.js | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/test/e2e/settings.test.js b/test/e2e/settings.test.js index 82cc8561c..c7a7e45e1 100644 --- a/test/e2e/settings.test.js +++ b/test/e2e/settings.test.js @@ -42,22 +42,12 @@ async function submitGatewayAndCheck (page, inputElement, submitButton, gatewayU await inputElement.fill(gatewayURL) // Check if the submit button is not null, and click it only if it's available if (submitButton) { - try { - await page.waitForFunction( - (button) => !button.disabled, - submitButton, - { timeout: 5000 } - ) - await submitButton.click() - } catch (error) { - const freshSubmitButton = await page.waitForSelector('#public-subdomain-gateway-submit-button') - await page.waitForFunction( - (button) => !button.disabled, - freshSubmitButton, - { timeout: 5000 } - ) - await freshSubmitButton.click() - } + const buttonId = await submitButton.evaluate(el => el.id) + // Use locator API which handles re-renders automatically + const submitBtn = page.locator(`#${buttonId}`) + // Wait for button to be enabled after input validation + await expect(submitBtn).toBeEnabled({ timeout: 10000 }) + await submitBtn.click() } const hasExpectedClass = await checkClassWithTimeout(page, inputElement, expectedClass) expect(hasExpectedClass).toBe(true) From dfb408d9d75180a4de1830b2565cd27ec6f2a56d Mon Sep 17 00:00:00 2001 From: Marcin Rataj Date: Wed, 17 Sep 2025 01:51:10 +0200 Subject: [PATCH 5/7] perf: optimize NetworkTraffic componentDidUpdate only calculate combinedNow and nextCommonTotal when bandwidth values actually change, avoiding unnecessary calculations on every render --- src/status/NetworkTraffic.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/status/NetworkTraffic.js b/src/status/NetworkTraffic.js index 538614636..34cae578c 100644 --- a/src/status/NetworkTraffic.js +++ b/src/status/NetworkTraffic.js @@ -17,15 +17,10 @@ class NetworkTraffic extends React.Component { const down = nodeBandwidth ? Math.trunc(Number(nodeBandwidth.rateIn) || 0) : 0 const up = nodeBandwidth ? Math.trunc(Number(nodeBandwidth.rateOut) || 0) : 0 - const combinedNow = down + up + if (down !== prevState.downFilled || up !== prevState.upFilled) { + const combinedNow = down + up + const nextCommonTotal = Math.max(prevState.commonTotal, combinedNow) - const nextCommonTotal = Math.max(prevState.commonTotal, combinedNow) - - if ( - down !== prevState.downFilled || - up !== prevState.upFilled || - nextCommonTotal !== prevState.commonTotal - ) { this.setState({ downFilled: down, upFilled: up, From 7795830e80fc3011448f1a6ce4171e75c84af936 Mon Sep 17 00:00:00 2001 From: Marcin Rataj Date: Wed, 17 Sep 2025 01:53:55 +0200 Subject: [PATCH 6/7] docs: add comments explaining bandwidth scale logic --- src/status/NetworkTraffic.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/status/NetworkTraffic.js b/src/status/NetworkTraffic.js index 34cae578c..b63d2c3a9 100644 --- a/src/status/NetworkTraffic.js +++ b/src/status/NetworkTraffic.js @@ -18,7 +18,10 @@ class NetworkTraffic extends React.Component { const up = nodeBandwidth ? Math.trunc(Number(nodeBandwidth.rateOut) || 0) : 0 if (down !== prevState.downFilled || up !== prevState.upFilled) { + // Combined bandwidth to determine scale needed for both meters const combinedNow = down + up + // Keep the maximum scale seen so far to prevent jarring visual changes + // when bandwidth drops (meters stay proportional to historical peak) const nextCommonTotal = Math.max(prevState.commonTotal, combinedNow) this.setState({ From aa8ab02435064980b30980a783de48d4e0085c85 Mon Sep 17 00:00:00 2001 From: Marcin Rataj Date: Wed, 17 Sep 2025 02:01:25 +0200 Subject: [PATCH 7/7] docs: explain initial bandwidth scale value --- src/status/NetworkTraffic.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/status/NetworkTraffic.js b/src/status/NetworkTraffic.js index b63d2c3a9..0ac15d2f0 100644 --- a/src/status/NetworkTraffic.js +++ b/src/status/NetworkTraffic.js @@ -6,7 +6,7 @@ import { Title } from './Commons.js' class NetworkTraffic extends React.Component { state = { - commonTotal: 125000, + commonTotal: 125000, // Initial scale: 1 Mbit/s (125000 bytes/s) downFilled: 0, upFilled: 0 }