Add Frontend proxies tab to the HTTP routes page by stephdl · Pull Request #1258 · NethServer/ns8-core

stephdl · 2026-07-28T11:04:52Z

Summary

Expose the Traefik trusted proxies settings in the cluster admin UI. Until now the only way to configure them was api-cli run module/traefik1/set-trusted-proxies.

The HTTP routes page gets a tab bar: the existing route table moves into a Routes tab, and a new Frontend proxies tab is added. The selected tab is kept in the view query parameter.

The new tab lists one row per node running behind a frontend HTTP proxy, with its proxy addresses and its trust depth, plus a text filter and a node filter. The Add/Edit modal takes the node, the proxy addresses (one per line) and the trust depth. The Add dropdown only offers nodes that are not configured yet, since set-trusted-proxies replaces the whole list of a node. Deleting a row sends an empty proxy list.

UI-only change: no Traefik action, schema or configuration template is touched.

Related issue

NethServer/dev#8098

Subpaths of the Carbon "network--3" icon, for empty states about network configuration. NethServer/ns8-core#1258 needs it for the frontend proxies table and carries a local copy in the meantime.

Split HTTP routes page into tabs for routes and frontend proxies. Recompute node list from clusterNodes instead of snapshotting once, so it updates regardless of load order. Restart the read chain on websocket reconnect and avoid duplicating routes from stale events.

andre8244 · 2026-08-07T08:02:08Z

is bad_ip_address i18n string used (maybe by the backend)? If not, we can remove it

stephdl · 2026-08-07T08:35:27Z

Yes, by the backend. set-trusted-proxies returns error: bad_ip_address, and
setTrustedProxiesValidationFailed() resolves the key dynamically via
getI18nStringWithFallback() — same pattern as the other modals, so grep finds nothing.
Removing it would show the raw key on screen.

andre8244 · 2026-08-24T10:37:45Z

+    </template>
+    <template slot="secondary-button">{{ $t("common.cancel") }}</template>
+    <template slot="primary-button">{{
+      isEditing ? $t("common.save") : $t("common.add")


Suggested change

isEditing ? $t("common.save") : $t("common.add")

isEditing ? $t("common.save") : $t("common.add_frontend_proxy")

Done. The key lives in common now, and common.add is gone.

Sorry, my suggestion was not accurate, add_frontend_proxy belongs to settings_http_routes section, not common

andre8244 · 2026-08-24T10:38:04Z

        "clear_search": "Clear search",
        "settings": "Settings",
        "cancel": "Cancel",
+        "add": "Add",


Suggested change

"add": "Add",

Both route and frontend proxy modals declared their own IPv4 and IPv6 patterns. Move them to a shared mixin exposing isIpAddress (no prefix, matching what set-trusted-proxies accepts) and isIpAddressOrCidr. The route allow list now rejects leading-zero octets such as 192.168.001.1, which Python ipaddress refuses since 3.9.5.

Name the modal primary button after the action instead of a bare "Add", reuse common.eg_value for the address placeholder, shorten the trust depth error and tell the user the page reloads on its own.

The component is the body of a tab, and the routes tab gets a sibling panel next.

Match the mockup and the frontend proxies tab: put the search box, the node combo and a clear filters link on one row, drop the search box the data table owned, and make the create button primary. Filtering to nothing now shows a no results state instead of an empty table. The node filter notification above the tabs is gone, the clear filters link replaces it. Move the tab body and its three modals to HttpRoutesPanel, mirroring HttpFrontendProxiesPanel. The view keeps the query params, the tab selector and the single list-installed-modules chain that feeds both panels; each panel reloads from a traefikInstances watcher. The node filter stays a query param, so the panel takes it as a prop and mirrors it locally: repainting the combo box needs a synchronous write that a round trip through the URL cannot guarantee.

stephdl · 2026-08-25T10:03:18Z

Pushed. Four commits.

Also reworked the routes tab to match the mockup and the frontend proxies tab: search box, node combo and a clear filters link on one row, no search box inside the data table, primary create button. Filtering to nothing shows a no results state. The node filter notification above the tabs is gone, the clear filters link replaces it.

Two things worth a look:

The route allow list now rejects leading-zero octets such as 192.168.001.1. Side effect of sharing one strict IPv4 pattern. Traefik would reject them anyway.
The ns8-ui-lib bump to 2.0.1 carries the Vue 2.7 major. core/ui is already on vue: ^2.7.0, so nothing breaks.

Verified against a cluster with the dev server: both tabs, filters, query params after reload, tab switching, IP validation, CIDR still accepted in the route allow list.

deleteRoute and setTrustedProxies registered raw $root.$once handlers that nothing ever removed. Navigating away with a delete in flight ran deleteRouteCompleted on a destroyed component and reissued the whole list-routes batch, and the modal leaked four handlers per save because only one of validation-failed and completed ever fires. Track them like the read chain does and clear them on destroy.

clearListeners cannot stop a batch already suspended on an await: it resumes, registers listeners for its remaining instances and decrements the counter of the newer batch, which clears the skeleton rows early. Give each batch a generation and bail out when it is no longer current.

The proxies panel had no instancesError watcher: a get-trusted-proxies batch in flight when list-installed-modules failed left the table in skeleton state for good. The routes panel already guards this. created() and the isWebsocketConnected watcher both started a read, so a cold page load created two list-installed-modules tasks and threw the first result away.

cv-combo-box auto-filter narrows the option list as the user types, which hides the sentinel and the other nodes while a value is being edited.

Mirror the routes tab: the view owns the node filter as a query param, so the selection survives a reload and can be linked to. The proxies table gets its own param, the two tabs filter independently.

The label is specific to the HTTP routes page, common holds the strings shared across pages.

Both HTTP routes tabs now match the TLS certificates layout: the primary button sits on top of the search and filter bar.

andre8244

Let's fix a i18n string then LGTM

andre8244 · 2026-08-26T08:24:54Z

+        "trust_depth_tooltip": "With a trust depth of 1, the client IP address is read from the last entry of the X-Forwarded-For header.",
+        "trust_depth_invalid": "Enter a number of 1 or higher",
+        "bad_ip_address": "Invalid IP address. Enter one IPv4 or IPv6 address per line, without CIDR prefix",
+        "frontend_proxy_restart_message": "HTTP clients connected to {node} will be briefly disconnected. The page should reload automatically — otherwise, reload it manually."


Let's fix this like in PR 1257

stephdl self-assigned this Jul 28, 2026

This was referenced Jul 28, 2026

TLS certificates page: ACME settings tab with challenge type selection #1257

Open

TLS certificates page: count reads upfront and keep partial ACME rows #1261

Merged

Add NetworkPictogram NethServer/ns8-ui-lib#87

Merged

stephdl requested a review from AmaLuci August 3, 2026 10:20

stephdl force-pushed the sdl-8098-frontend-proxies branch 2 times, most recently from 45ae764 to 17d439b Compare August 6, 2026 13:06

stephdl requested review from andre8244 and removed request for AmaLuci August 6, 2026 13:07

stephdl added 4 commits August 6, 2026 17:08

feat(i18n): add frontend proxies translation strings

9fd71e2

feat(ui): add frontend proxy config modal for HTTP routes

09328a4

feat(ui): add HTTP frontend proxies settings component

de5d66a

stephdl force-pushed the sdl-8098-frontend-proxies branch from 17d439b to 24eaa01 Compare August 6, 2026 15:09

chore(ui): bump @nethserver/ns8-ui-lib to 2.0.1

f52c905

andre8244 reviewed Aug 7, 2026

View reviewed changes

Comment thread core/ui/src/views/settings/SettingsHttpRoutes.vue Outdated

Comment thread core/ui/public/i18n/en/translation.json

Comment thread core/ui/public/i18n/en/translation.json Outdated

Comment thread core/ui/src/components/settings/ConfigureFrontendProxyModal.vue Outdated

stephdl added 4 commits August 7, 2026 09:07

fix(frontend-proxies): clarify frontend proxy i18n messages

50bb7e1

fix(settings): remove extra bottom margin on trust depth input

e71d1f3

fix(http-frontend-proxies): use nodeId for delete confirmation match

1b521de

feat(settings): add pictogram to HTTP routes empty state

7546cd1

stephdl force-pushed the sdl-8098-frontend-proxies branch from 895f9ee to 7546cd1 Compare August 7, 2026 09:08

fix(frontend-proxy): reject trust depth of 0, require minimum 1

ce71b70

stephdl requested a review from andre8244 August 7, 2026 09:41

andre8244 reviewed Aug 24, 2026

View reviewed changes

stephdl added 3 commits August 25, 2026 11:57

fix(ui): apply the review wording to the frontend proxy strings

72af9a3

Name the modal primary button after the action instead of a bare "Add", reuse common.eg_value for the address placeholder, shorten the trust depth error and tell the user the page reloads on its own.

refactor(ui): rename HttpFrontendProxies to HttpFrontendProxiesPanel

c82cc9f

The component is the body of a tab, and the routes tab gets a sibling panel next.

stephdl added 3 commits August 25, 2026 12:38

stephdl requested a review from andre8244 August 25, 2026 12:10

stephdl added 4 commits August 26, 2026 11:15

fix(ui): stop the node filters from filtering their own options

ae3fe96

cv-combo-box auto-filter narrows the option list as the user types, which hides the sentinel and the other nodes while a value is being edited.

feat(ui): filter frontend proxies by node from the URL

8b2e841

Mirror the routes tab: the view owns the node filter as a query param, so the selection survives a reload and can be linked to. The proxies table gets its own param, the two tabs filter independently.

fix(ui): move add_frontend_proxy under settings_http_routes

029d42a

The label is specific to the HTTP routes page, common holds the strings shared across pages.

fix(ui): move the add buttons above the http routes filters

a5b1062

Both HTTP routes tabs now match the TLS certificates layout: the primary button sits on top of the search and filter bar.

andre8244 approved these changes Aug 27, 2026

View reviewed changes

	isEditing ? $t("common.save") : $t("common.add")
	isEditing ? $t("common.save") : $t("common.add_frontend_proxy")

Uh oh!

Conversation

stephdl commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Related issue

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

andre8244 commented Aug 7, 2026

Uh oh!

stephdl commented Aug 7, 2026

Uh oh!

andre8244 Aug 24, 2026

Choose a reason for hiding this comment

Uh oh!

stephdl Aug 25, 2026

Choose a reason for hiding this comment

Uh oh!

andre8244 Aug 26, 2026

Choose a reason for hiding this comment

Uh oh!

andre8244 Aug 24, 2026

Choose a reason for hiding this comment

Uh oh!

stephdl Aug 25, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

stephdl commented Aug 25, 2026

Uh oh!

andre8244 left a comment

Choose a reason for hiding this comment

Uh oh!

andre8244 Aug 26, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

stephdl commented Jul 28, 2026 •

edited

Loading