Make WebSocket multiplexer configurable via Settings (experimental) by aaryan359 · Pull Request #4527 · kubernetes-sigs/headlamp

aaryan359 · 2026-02-03T09:04:49Z

Summary

This PR makes the WebSocket multiplexer configurable via the Headlamp UI instead of
only through the REACT_APP_ENABLE_WEBSOCKET_MULTIPLEXER environment variable.
This allows users to enable or disable the multiplexer at runtime and makes it
easier to debug WebSocket-related issues.

Related Issue

Fixes #4505

Changes

Added an experimental setting to enable or disable the WebSocket multiplexer.
Persisted the user preference in application settings.
Updated WebSocket selection logic to respect user settings first, with fallback
to the REACT_APP_ENABLE_WEBSOCKET_MULTIPLEXER environment variable.

Steps to Test

Toggled the WebSocket multiplexer setting on and off via the Settings page.
Verified that the user preference persists across page reloads.
Verified that when no user preference is set, the behavior falls back to the
REACT_APP_ENABLE_WEBSOCKET_MULTIPLEXER environment variable.
Observed WebSocket behavior via browser developer tools to confirm the correct
mode is used.

Screenshots (if applicable)

Screencast.from.2026-02-03.14-31-12.webm

Signed-off-by: aaryan359 <aaryanmeena96@gmail.com>

k8s-ci-robot · 2026-02-03T09:04:59Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: aaryan359
Once this PR has been reviewed and has the lgtm label, please assign sniok for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

aaryan359 · 2026-02-03T09:05:48Z

@illume, I implemented this. Can you please review the changes?

illume

Great, thanks for this. I will take a deeper look in the following days.

Can you please check the commit message? It should follow the git commit guidelines in the contributing guide. See git log for examples. We don’t use signed-off-by in the messages in this repo.

Also please check the failing github check. The tests are failing, you can update the snapshots with
npm run test — -u

aaryan359 · 2026-02-03T13:18:55Z

@illume got it. I will update these changes shortly.

Signed-off-by: aaryan359 <aaryanmeena96@gmail.com>

Signed-off-by: Aaryan meena <134821046+aaryan359@users.noreply.github.com>

Copilot

Pull request overview

This PR introduces an experimental “WebSocket Multiplexer” toggle in the Headlamp settings, intended to let users enable/disable the multiplexer (with persistence) and fall back to the REACT_APP_ENABLE_WEBSOCKET_MULTIPLEXER environment variable when no user preference is set.

Changes:

Extended the Redux config state to include an optional enableWebsocketMultiplexer setting, persisted to localStorage.
Updated getWebsocketMultiplexerEnabled to support a user-setting override and changed the environment-variable default semantics to treat anything other than 'false' as enabled.
Added an “Experimental Features” section and “WebSocket Multiplexer” switch in the General Settings UI, updated related Storybook snapshot and mocks, and tweaked package-lock.json metadata.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`frontend/src/redux/configSlice.ts`	Adds the `enableWebsocketMultiplexer` setting to the configuration state and initial settings persisted from `localStorage`.
`frontend/src/lib/k8s/api/v2/useKubeObjectList.ts`	Extends `getWebsocketMultiplexerEnabled` to accept an optional user setting and adjusts env-var default behavior.
`frontend/src/i18n/locales/en/translation.json`	Introduces translation keys for the “Experimental Features” section and WebSocket multiplexer description.
`frontend/src/components/App/Settings/__snapshots__/Settings.General.stories.storyshot`	Updates the Storybook snapshot to include the new “Experimental Features / WebSocket Multiplexer” UI.
`frontend/src/components/App/Settings/Settings.tsx`	Wires the new `enableWebsocketMultiplexer` setting into the General Settings page and renders the experimental section with a toggle and caption.
`frontend/package-lock.json`	Marks various dependencies as `"peer": true` in the lockfile, likely reflecting a tooling/npm metadata update.
`frontend/.storybook/baseMocks.ts`	Changes the `/wsMultiplexer` mock to return a JSON response instead of an error for Storybook scenarios.

Files not reviewed (1)

frontend/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-04T11:28:09Z

frontend/src/lib/k8s/api/v2/useKubeObjectList.ts

+  // If user has explicitly set the setting, use that
+  if (userSetting !== undefined) {
+    return userSetting;
+  }


getWebsocketMultiplexerEnabled now accepts an optional userSetting, but no call sites pass this parameter (searching the codebase shows only zero-argument calls), so the user-configured "WebSocket Multiplexer" setting is never actually consulted and the behavior still depends solely on REACT_APP_ENABLE_WEBSOCKET_MULTIPLEXER. To make the setting effective and match the function’s documentation, wire the stored enableWebsocketMultiplexer value through to this helper (or have this helper read it) so that an explicit user preference overrides the environment variable.

Suggested change

}

}

// Next, try to read the stored user preference (if any)

if (typeof window !== 'undefined' && window.localStorage) {

const stored = window.localStorage.getItem('enableWebsocketMultiplexer');

if (stored === 'true') {

return true;

}

if (stored === 'false') {

return false;

}

}

Copilot · 2026-02-04T11:28:09Z

frontend/src/components/App/Settings/Settings.tsx

+                <Box>
+                  <Switch
+                    color="primary"
+                    checked={enableWebsocketMultiplexer ?? true}


When enableWebsocketMultiplexer is undefined (i.e., the user has never set a preference), the switch renders as checked due to checked={enableWebsocketMultiplexer ?? true}, which presents the UI as "on" even if the environment variable currently disables the multiplexer. To avoid this confusing mismatch and better align with the "use env var when no user preference is set" behavior, consider deriving the initial checked state from the same logic that determines the effective default (e.g., using the env var–based helper) rather than hard-coding true for the undefined case.

Suggested change

checked={enableWebsocketMultiplexer ?? true}

checked={enableWebsocketMultiplexer ?? false}

Copilot · 2026-02-04T11:28:09Z

frontend/src/redux/configSlice.ts

+     * enableWebsocketMultiplexer enables the websocket multiplexer for optimized resource watching.
+     * This is an experimental feature. If not explicitly set by the user, respects the
+     * REACT_APP_ENABLE_WEBSOCKET_MULTIPLEXER environment variable.


The comment here states that enableWebsocketMultiplexer "If not explicitly set by the user, respects the REACT_APP_ENABLE_WEBSOCKET_MULTIPLEXER environment variable", but the current implementation of the settings state does not incorporate the env var at all—initialState.settings.enableWebsocketMultiplexer is taken solely from storedSettings. To avoid misleading documentation, either update this comment to describe only what this field stores, or adjust the surrounding logic so that the effective value truly falls back to the environment variable when no user preference has been recorded.

Suggested change

* enableWebsocketMultiplexer enables the websocket multiplexer for optimized resource watching.

* This is an experimental feature. If not explicitly set by the user, respects the

* REACT_APP_ENABLE_WEBSOCKET_MULTIPLEXER environment variable.

* enableWebsocketMultiplexer stores the user preference for enabling the websocket

* multiplexer for optimized resource watching. This is an experimental feature.

illume

It looks like there’s some github checks failing.

Please take a look? Also at the open review comments?

aaryan359 · 2026-02-06T21:29:02Z

@illume, after the latest merge, these issues came up. I didn’t get enough time to fix them, but I’ll complete it very soon.

illume · 2026-02-12T17:24:46Z

I converted this to draft. If you continue it, please take it off draft when it's ready to review again :)

feat(settings): add UI toggle for WebSocket multiplexer

b13b955

Signed-off-by: aaryan359 <aaryanmeena96@gmail.com>

k8s-ci-robot requested review from skoeva and yolossn February 3, 2026 09:04

k8s-ci-robot added the cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. label Feb 3, 2026

k8s-ci-robot added the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Feb 3, 2026

illume requested changes Feb 3, 2026

View reviewed changes

illume added this to the v0.41.0 milestone Feb 3, 2026

k8s-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Feb 3, 2026

aaryan359 and others added 2 commits February 4, 2026 02:24

fix ci eror

408e172

Signed-off-by: aaryan359 <aaryanmeena96@gmail.com>

Merge branch 'main' into feature/websocket-multiplexer-setting

ded54ff

Signed-off-by: Aaryan meena <134821046+aaryan359@users.noreply.github.com>

k8s-ci-robot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Feb 3, 2026

illume requested a review from Copilot February 4, 2026 11:24

Copilot started reviewing on behalf of illume February 4, 2026 11:24 View session

Copilot AI reviewed Feb 4, 2026

View reviewed changes

illume requested changes Feb 6, 2026

View reviewed changes

illume marked this pull request as draft February 12, 2026 17:24

k8s-ci-robot added the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Feb 12, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make WebSocket multiplexer configurable via Settings (experimental)#4527

Make WebSocket multiplexer configurable via Settings (experimental)#4527
aaryan359 wants to merge 3 commits intokubernetes-sigs:mainfrom
aaryan359:feature/websocket-multiplexer-setting

aaryan359 commented Feb 3, 2026

Uh oh!

k8s-ci-robot commented Feb 3, 2026

Uh oh!

aaryan359 commented Feb 3, 2026

Uh oh!

illume left a comment •

edited

Loading

Uh oh!

aaryan359 commented Feb 3, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 4, 2026

Uh oh!

Copilot AI Feb 4, 2026

Uh oh!

Copilot AI Feb 4, 2026

Uh oh!

illume left a comment

Uh oh!

aaryan359 commented Feb 6, 2026

Uh oh!

illume commented Feb 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-  }
+  }
+  // Next, try to read the stored user preference (if any)
+  if (typeof window !== 'undefined' && window.localStorage) {
+    const stored = window.localStorage.getItem('enableWebsocketMultiplexer');
+    if (stored === 'true') {
+      return true;
+    }
+    if (stored === 'false') {
+      return false;
+    }
+  }

	checked={enableWebsocketMultiplexer ?? true}
	checked={enableWebsocketMultiplexer ?? false}

Conversation

aaryan359 commented Feb 3, 2026

Summary

Related Issue

Changes

Steps to Test

Screenshots (if applicable)

Uh oh!

k8s-ci-robot commented Feb 3, 2026

Uh oh!

aaryan359 commented Feb 3, 2026

Uh oh!

illume left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aaryan359 commented Feb 3, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

illume left a comment

Choose a reason for hiding this comment

Uh oh!

aaryan359 commented Feb 6, 2026

Uh oh!

illume commented Feb 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

illume left a comment •

edited

Loading