From 037eb820f050d2ee44e9c712ed4f6da34df8ad35 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 13:03:31 +0200
Subject: [PATCH 01/28] feat(ui): add i18n strings for frontend proxies
 settings

Add the action titles for get-trusted-proxies and set-trusted-proxies, the
settings_http_routes keys of the new tab and a generic common.add label.
---
 core/ui/public/i18n/en/translation.json | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/core/ui/public/i18n/en/translation.json b/core/ui/public/i18n/en/translation.json
index 8330ac4fc..cc96c3206 100644
--- a/core/ui/public/i18n/en/translation.json
+++ b/core/ui/public/i18n/en/translation.json
@@ -18,6 +18,7 @@
         "clear_search": "Clear search",
         "settings": "Settings",
         "cancel": "Cancel",
+        "add": "Add",
         "node": "Node",
         "nodes_c": "Node | Nodes",
         "version": "Version",
@@ -402,6 +403,8 @@
         "set-route": "Set route",
         "delete-route": "Delete route",
         "list-routes": "List routes",
+        "get-trusted-proxies": "Retrieve frontend proxies",
+        "set-trusted-proxies": "Configure frontend proxies",
         "set-certificate": "Set certificate",
         "set-default-certificate": "Request certificate",
         "delete-certificate": "Delete certificate",
@@ -844,7 +847,27 @@
         "show_logs": "Show logs",
         "traefik_will_be_restarted": "Traefik will be restarted",
         "delete_route_with_certificate_message": "Deleting this route will briefly disconnect HTTP clients connected to {node}.",
-        "revoke_certificate_message": "Revoking the route certificate will briefly disconnect HTTP clients connected to {node}."
+        "revoke_certificate_message": "Revoking the route certificate will briefly disconnect HTTP clients connected to {node}.",
+        "routes": "Routes",
+        "frontend_proxies": "Frontend proxies",
+        "frontend_proxies_description": "If Traefik runs behind another HTTP proxy, such as an external load balancer or a CDN, configure here the proxy addresses to trust: the real client IP address is read from the X-Forwarded-For header only for requests coming from these addresses.",
+        "proxies": "Frontend proxies",
+        "depth": "Trust depth",
+        "add_frontend_proxy": "Add frontend proxy",
+        "edit_frontend_proxy_node": "Edit frontend proxies of {node}",
+        "delete_frontend_proxy_node": "Delete frontend proxies of {node}",
+        "delete_frontend_proxy_description": "Delete the frontend proxies of {node}? The real client IP address won't be read from the X-Forwarded-For header anymore, and the trust depth will be reset to 0.",
+        "no_frontend_proxy": "No frontend proxy",
+        "no_frontend_proxy_description": "There is no node configured to run behind a frontend HTTP proxy",
+        "search_frontend_proxy": "Search node",
+        "frontend_proxy_node_helper": "Select the node running behind a frontend HTTP proxy",
+        "frontend_proxies_placeholder": "E.g. 192.168.1.10",
+        "frontend_proxies_helper": "Enter one IPv4 or IPv6 address per line. CIDR ranges are not supported",
+        "trust_depth": "Trust depth",
+        "trust_depth_helper": "Number of frontend proxy levels to trust",
+        "trust_depth_invalid": "Enter a whole number greater than or equal to 0",
+        "bad_ip_address": "Invalid IP address. Enter one IPv4 or IPv6 address per line, without CIDR prefix",
+        "set_frontend_proxy_restart_message": "Saving will briefly disconnect HTTP clients connected to {node}."
     },
     "settings_tls_certificates": {
         "title": "TLS certificates",

From 4d92bcb6b76fa043e6f0a635a60b1594bb5d7c53 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 13:03:31 +0200
Subject: [PATCH 02/28] feat(ui): add frontend proxy configuration modal

Let the operator set the frontend proxy addresses and the trust depth of a
node. Accept bare IPv4 and IPv6 addresses only, since the traefik
set-trusted-proxies action validates them with ipaddress.ip_address() and
rejects CIDR ranges. Always send both proxies and depth, because omitting
depth makes the action reset it to 1.
---
 .../settings/ConfigureFrontendProxyModal.vue  | 339 ++++++++++++++++++
 1 file changed, 339 insertions(+)
 create mode 100644 core/ui/src/components/settings/ConfigureFrontendProxyModal.vue

diff --git a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
new file mode 100644
index 000000000..3c1550458
--- /dev/null
+++ b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
@@ -0,0 +1,339 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<template>
+  <NsModal
+    size="default"
+    :visible="isShown"
+    :primary-button-disabled="loading.setTrustedProxies"
+    :isLoading="loading.setTrustedProxies"
+    @modal-hidden="onModalHidden"
+    @primary-click="setTrustedProxies"
+  >
+    <template slot="title">{{
+      isEditing
+        ? $t("settings_http_routes.edit_frontend_proxy_node", {
+            node: proxyConfig ? proxyConfig.nodeLabel : "",
+          })
+        : $t("settings_http_routes.add_frontend_proxy")
+    }}</template>
+    <template slot="content">
+      <cv-form @submit.prevent="setTrustedProxies">
+        <NsComboBox
+          v-model="selectedNodeId"
+          :label="$t('common.choose')"
+          :title="$t('common.node')"
+          :auto-filter="true"
+          :auto-highlight="true"
+          :options="nodes"
+          :disabled="isEditing || loading.setTrustedProxies"
+          :invalid-message="error.node"
+          light
+          tooltipAlignment="start"
+          tooltipDirection="top"
+          ref="node"
+        >
+          <template slot="tooltip">
+            {{ $t("settings_http_routes.frontend_proxy_node_helper") }}
+          </template>
+        </NsComboBox>
+        <cv-text-area
+          v-model.trim="proxies_str"
+          :placeholder="$t('settings_http_routes.frontend_proxies_placeholder')"
+          :label="$t('settings_http_routes.frontend_proxies')"
+          :helper-text="$t('settings_http_routes.frontend_proxies_helper')"
+          :invalid-message="error.proxies"
+          :disabled="loading.setTrustedProxies"
+          ref="proxies"
+        />
+        <cv-number-input
+          v-model="depth"
+          :label="$t('settings_http_routes.trust_depth')"
+          :helper-text="$t('settings_http_routes.trust_depth_helper')"
+          :invalid-message="error.depth"
+          :disabled="loading.setTrustedProxies"
+          :min="0"
+          :step="1"
+          class="narrow mg-bottom-md"
+          ref="depth"
+        />
+        <NsInlineNotification
+          kind="warning"
+          :title="$t('settings_http_routes.traefik_will_be_restarted')"
+          :description="
+            $t('settings_http_routes.set_frontend_proxy_restart_message', {
+              node: selectedNodeLabel,
+            })
+          "
+          :showCloseButton="false"
+        />
+        <!-- need to wrap error notification inside a div: custom elements like NsInlineNotification don't have scrollIntoView() function -->
+        <div ref="setTrustedProxiesError">
+          <NsInlineNotification
+            v-if="error.setTrustedProxies"
+            kind="error"
+            :title="$t('action.set-trusted-proxies')"
+            :description="error.setTrustedProxies"
+            :showCloseButton="false"
+          />
+        </div>
+      </cv-form>
+    </template>
+    <template slot="secondary-button">{{ $t("common.cancel") }}</template>
+    <template slot="primary-button">{{
+      isEditing ? $t("common.save") : $t("common.add")
+    }}</template>
+  </NsModal>
+</template>
+
+<script>
+import to from "await-to-js";
+import { UtilService, TaskService } from "@nethserver/ns8-ui-lib";
+
+export default {
+  name: "ConfigureFrontendProxyModal",
+  mixins: [UtilService, TaskService],
+  props: {
+    isShown: Boolean,
+    nodes: {
+      type: Array,
+      required: true,
+    },
+    proxyConfig: { type: [Object, null], default: null },
+    isEditing: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      selectedNodeId: "",
+      proxies_str: "",
+      depth: 1,
+      loading: {
+        setTrustedProxies: false,
+      },
+      error: {
+        node: "",
+        proxies: "",
+        depth: "",
+        setTrustedProxies: "",
+      },
+    };
+  },
+  computed: {
+    selectedNode() {
+      return this.nodes.find((node) => node.value === this.selectedNodeId);
+    },
+    selectedNodeLabel() {
+      return this.selectedNode ? this.selectedNode.label : "";
+    },
+  },
+  watch: {
+    isShown: function () {
+      if (this.isShown) {
+        this.clearErrors();
+
+        if (this.isEditing && this.proxyConfig) {
+          this.selectedNodeId = this.proxyConfig.nodeId;
+          this.proxies_str = this.proxyConfig.proxies_str;
+          // show the depth as returned by the backend, even if it is 0
+          this.depth = this.proxyConfig.depth;
+        } else {
+          this.selectedNodeId = "";
+          this.proxies_str = "";
+          this.depth = 1;
+        }
+      }
+    },
+    "error.setTrustedProxies": function () {
+      if (this.error.setTrustedProxies) {
+        // scroll to notification error
+
+        this.$nextTick(() => {
+          const el = this.$refs.setTrustedProxiesError;
+          this.scrollToElement(el);
+        });
+      }
+    },
+  },
+  methods: {
+    onModalHidden() {
+      this.clearErrors();
+      this.$emit("hide");
+    },
+    getProxyList() {
+      return this.proxies_str
+        .split("\n")
+        .map((proxy) => proxy.trim())
+        .filter((proxy) => proxy !== "");
+    },
+    validateSetTrustedProxies() {
+      this.clearErrors();
+
+      let isValidationOk = true;
+
+      // node
+
+      if (!this.selectedNodeId) {
+        this.error.node = this.$t("common.required");
+
+        if (isValidationOk) {
+          this.focusElement("node");
+          isValidationOk = false;
+        }
+      }
+
+      // frontend proxies
+
+      const proxyList = this.getProxyList();
+
+      if (!proxyList.length) {
+        this.error.proxies = this.$t("common.required");
+
+        if (isValidationOk) {
+          this.focusElement("proxies");
+          isValidationOk = false;
+        }
+      } else {
+        // the traefik set-trusted-proxies action validates with
+        // ipaddress.ip_address(), so only bare IPv4 and IPv6 addresses are
+        // accepted: CIDR ranges are rejected by the backend
+        const ipv4Pattern =
+          /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+        const ipv6Pattern =
+          /^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$/;
+
+        for (const proxy of proxyList) {
+          if (!ipv4Pattern.test(proxy) && !ipv6Pattern.test(proxy)) {
+            // determine if it looks like an IPv6 address
+            const isIPv6Like = proxy.includes(":");
+            this.error.proxies = this.$t(
+              isIPv6Like
+                ? "settings_http_routes.invalid_ipv6"
+                : "settings_http_routes.invalid_ipv4",
+              { ip: proxy }
+            );
+
+            if (isValidationOk) {
+              this.focusElement("proxies");
+              isValidationOk = false;
+            }
+            break;
+          }
+        }
+      }
+
+      // trust depth
+
+      const depth = Number(this.depth);
+
+      if (this.depth === "" || this.depth === null) {
+        this.error.depth = this.$t("common.required");
+
+        if (isValidationOk) {
+          this.focusElement("depth");
+          isValidationOk = false;
+        }
+      } else if (!Number.isInteger(depth) || depth < 0) {
+        // the action input schema requires an integer with minimum 0
+        this.error.depth = this.$t("settings_http_routes.trust_depth_invalid");
+
+        if (isValidationOk) {
+          this.focusElement("depth");
+          isValidationOk = false;
+        }
+      }
+
+      return isValidationOk;
+    },
+    async setTrustedProxies() {
+      if (!this.validateSetTrustedProxies()) {
+        return;
+      }
+      // nodes carry the traefik instance id in their traefikInstance property
+      const traefikInstanceId = this.selectedNode.traefikInstance;
+      this.loading.setTrustedProxies = true;
+      this.error.setTrustedProxies = "";
+      const taskAction = "set-trusted-proxies";
+      const eventId = this.getUuid();
+
+      // register to task events
+
+      this.$root.$once(
+        `${taskAction}-aborted-${eventId}`,
+        this.setTrustedProxiesAborted
+      );
+
+      this.$root.$once(
+        `${taskAction}-validation-failed-${eventId}`,
+        this.setTrustedProxiesValidationFailed
+      );
+
+      this.$root.$once(
+        `${taskAction}-completed-${eventId}`,
+        this.setTrustedProxiesCompleted
+      );
+
+      const res = await to(
+        this.createModuleTaskForApp(traefikInstanceId, {
+          action: taskAction,
+          // always send both fields: omitting depth makes the backend reset it
+          // to 1
+          data: {
+            proxies: this.getProxyList(),
+            depth: Number(this.depth),
+          },
+          extra: {
+            title: this.$t("action." + taskAction),
+            description: this.$t("common.processing"),
+            eventId,
+          },
+        })
+      );
+      const err = res[0];
+
+      if (err) {
+        console.error(`error creating task ${taskAction}`, err);
+        this.error.setTrustedProxies = this.getErrorMessage(err);
+        this.loading.setTrustedProxies = false;
+        return;
+      }
+    },
+    setTrustedProxiesAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.setTrustedProxies = this.$t("error.generic_error");
+      this.loading.setTrustedProxies = false;
+    },
+    setTrustedProxiesValidationFailed(validationErrors) {
+      this.loading.setTrustedProxies = false;
+      let focusAlreadySet = false;
+
+      for (const validationError of validationErrors) {
+        const param = validationError.parameter;
+
+        // set i18n error message
+        this.error[param] = this.getI18nStringWithFallback(
+          "settings_http_routes." + validationError.error,
+          "error." + validationError.error
+        );
+
+        if (!focusAlreadySet) {
+          this.focusElement(param);
+          focusAlreadySet = true;
+        }
+      }
+    },
+    setTrustedProxiesCompleted() {
+      this.loading.setTrustedProxies = false;
+      this.$emit("hide");
+      this.$emit("reloadTrustedProxies");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../styles/carbon-utils";
+</style>

From e7232e2ad76252a54532919d34d1dbaafa6a6478 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 13:03:31 +0200
Subject: [PATCH 03/28] feat(ui): add frontend proxies tab content

List the nodes running behind a frontend HTTP proxy, one row per node, by
running get-trusted-proxies on every traefik instance. Nodes without any
frontend proxy are hidden. Deleting a row sends an empty proxy list, which
also resets the trust depth to 0.
---
 .../settings/HttpFrontendProxies.vue          | 421 ++++++++++++++++++
 1 file changed, 421 insertions(+)
 create mode 100644 core/ui/src/components/settings/HttpFrontendProxies.vue

diff --git a/core/ui/src/components/settings/HttpFrontendProxies.vue b/core/ui/src/components/settings/HttpFrontendProxies.vue
new file mode 100644
index 000000000..c7caf8c56
--- /dev/null
+++ b/core/ui/src/components/settings/HttpFrontendProxies.vue
@@ -0,0 +1,421 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<template>
+  <div>
+    <cv-tile light>
+      <cv-grid class="no-padding">
+        <cv-row>
+          <cv-column>
+            <div class="mg-bottom-md">
+              {{ $t("settings_http_routes.frontend_proxies_description") }}
+            </div>
+          </cv-column>
+        </cv-row>
+        <cv-row class="toolbar">
+          <cv-column>
+            <NsButton
+              kind="secondary"
+              :icon="Add20"
+              :disabled="loadingProxies || !unconfiguredNodes.length"
+              @click="showAddProxyModal"
+              data-test-id="add-frontend-proxy"
+              >{{ $t("settings_http_routes.add_frontend_proxy") }}
+            </NsButton>
+          </cv-column>
+        </cv-row>
+        <cv-row>
+          <cv-column>
+            <NsDataTable
+              :allRows="proxyConfigs"
+              :columns="i18nTableColumns"
+              :rawColumns="tableColumns"
+              :sortable="true"
+              :pageSizes="[10, 25, 50, 100]"
+              :overflow-menu="true"
+              isSearchable
+              :searchPlaceholder="
+                $t('settings_http_routes.search_frontend_proxy')
+              "
+              :searchClearLabel="$t('common.clear_search')"
+              :noSearchResultsLabel="$t('common.no_search_results')"
+              :noSearchResultsDescription="
+                $t('common.no_search_results_description')
+              "
+              :isLoading="loadingProxies"
+              :skeletonRows="3"
+              :isErrorShown="!!error.getTrustedProxies"
+              :errorTitle="currentErrorAction"
+              :errorDescription="currentErrorDescription"
+              :itemsPerPageLabel="$t('pagination.items_per_page')"
+              :rangeOfTotalItemsLabel="$t('pagination.range_of_total_items')"
+              :ofTotalPagesLabel="$t('pagination.of_total_pages')"
+              :backwardText="$t('pagination.previous_page')"
+              :forwardText="$t('pagination.next_page')"
+              :pageNumberLabel="$t('pagination.page_number')"
+              @updatePage="tablePage = $event"
+            >
+              <template slot="empty-state">
+                <NsEmptyState
+                  :title="$t('settings_http_routes.no_frontend_proxy')"
+                >
+                  <template #description>
+                    <div>
+                      {{
+                        $t("settings_http_routes.no_frontend_proxy_description")
+                      }}
+                    </div>
+                  </template>
+                </NsEmptyState>
+              </template>
+              <template slot="data">
+                <cv-data-table-row
+                  v-for="(row, rowIndex) in tablePage"
+                  :key="`${rowIndex}`"
+                  :value="`${rowIndex}`"
+                >
+                  <cv-data-table-cell>
+                    <span>{{ row.node }}</span>
+                  </cv-data-table-cell>
+                  <cv-data-table-cell>
+                    <div class="flex flex-col">
+                      <span v-for="proxy in row.proxies" :key="proxy">
+                        {{ proxy }}
+                      </span>
+                    </div>
+                  </cv-data-table-cell>
+                  <cv-data-table-cell>
+                    <span>{{ row.depth }}</span>
+                  </cv-data-table-cell>
+                  <cv-data-table-cell class="table-overflow-menu-cell">
+                    <cv-overflow-menu
+                      flip-menu
+                      class="table-overflow-menu"
+                      :data-test-id="row.node + '-menu'"
+                    >
+                      <cv-overflow-menu-item
+                        @click="showEditProxyModal(row)"
+                        :data-test-id="row.node + '-edit'"
+                      >
+                        <NsMenuItem :icon="Edit20" :label="$t('common.edit')" />
+                      </cv-overflow-menu-item>
+                      <cv-overflow-menu-item
+                        danger
+                        @click="showDeleteProxyModal(row)"
+                        :data-test-id="row.node + '-delete'"
+                      >
+                        <NsMenuItem
+                          :icon="TrashCan20"
+                          :label="$t('common.delete')"
+                        />
+                      </cv-overflow-menu-item>
+                    </cv-overflow-menu>
+                  </cv-data-table-cell>
+                </cv-data-table-row>
+              </template>
+            </NsDataTable>
+          </cv-column>
+        </cv-row>
+      </cv-grid>
+    </cv-tile>
+    <ConfigureFrontendProxyModal
+      :isShown="isShownConfigureProxyModal"
+      :nodes="isEditingProxy ? internalNodes : unconfiguredNodes"
+      :proxyConfig="currentProxyConfig"
+      :isEditing="isEditingProxy"
+      @hide="hideConfigureProxyModal"
+      @reloadTrustedProxies="getTrustedProxies"
+    />
+    <!-- delete frontend proxy modal -->
+    <NsDangerDeleteModal
+      :isShown="isShownDeleteProxyModal"
+      :name="proxyConfigToDelete ? proxyConfigToDelete.node : ''"
+      :title="
+        $t('settings_http_routes.delete_frontend_proxy_node', {
+          node: proxyConfigToDelete ? proxyConfigToDelete.node : '',
+        })
+      "
+      :warning="$t('common.please_read_carefully')"
+      :description="
+        $t('settings_http_routes.delete_frontend_proxy_description', {
+          node: proxyConfigToDelete ? proxyConfigToDelete.node : '',
+        })
+      "
+      :typeToConfirm="
+        $t('common.type_to_confirm', {
+          name: proxyConfigToDelete ? proxyConfigToDelete.node : '',
+        })
+      "
+      :isErrorShown="!!error.deleteTrustedProxies"
+      :errorTitle="$t('action.set-trusted-proxies')"
+      :errorDescription="error.deleteTrustedProxies"
+      :isWarningShown="false"
+      @hide="hideDeleteProxyModal"
+      @confirmDelete="deleteTrustedProxies"
+      data-test-id="delete-frontend-proxy-modal"
+    >
+      <template #explanation>
+        <div class="mt-4">
+          <NsInlineNotification
+            kind="warning"
+            :title="$t('settings_http_routes.traefik_will_be_restarted')"
+            :description="
+              $t('settings_http_routes.set_frontend_proxy_restart_message', {
+                node: proxyConfigToDelete ? proxyConfigToDelete.node : '',
+              })
+            "
+            :showCloseButton="false"
+          />
+        </div>
+      </template>
+    </NsDangerDeleteModal>
+  </div>
+</template>
+
+<script>
+import to from "await-to-js";
+import { UtilService, TaskService, IconService } from "@nethserver/ns8-ui-lib";
+import ConfigureFrontendProxyModal from "@/components/settings/ConfigureFrontendProxyModal.vue";
+
+export default {
+  name: "HttpFrontendProxies",
+  components: {
+    ConfigureFrontendProxyModal,
+  },
+  mixins: [TaskService, UtilService, IconService],
+  props: {
+    // cluster nodes, as built by the parent view: nodes running a traefik
+    // instance carry a traefikInstance property
+    nodes: {
+      type: Array,
+      required: true,
+    },
+    traefikInstances: {
+      type: Array,
+      required: true,
+    },
+    isLoadingInstances: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      tablePage: [],
+      // raw column names must match row properties: they are used by
+      // NsDataTable for the default search and sort
+      tableColumns: ["node", "proxies", "depth"],
+      proxyConfigs: [],
+      currentProxyConfig: null,
+      proxyConfigToDelete: null,
+      isShownConfigureProxyModal: false,
+      isShownDeleteProxyModal: false,
+      isEditingProxy: false,
+      currentErrorAction: "",
+      currentErrorDescription: "",
+      loading: {
+        getTrustedProxiesNum: 0,
+        deleteTrustedProxies: false,
+      },
+      error: {
+        getTrustedProxies: "",
+        deleteTrustedProxies: "",
+      },
+    };
+  },
+  computed: {
+    i18nTableColumns() {
+      return this.tableColumns.map((column) => {
+        return this.$t("settings_http_routes." + column);
+      });
+    },
+    loadingProxies() {
+      return this.isLoadingInstances || this.loading.getTrustedProxiesNum > 0;
+    },
+    // only nodes running a traefik instance can be configured
+    internalNodes() {
+      return this.nodes.filter((node) => node.traefikInstance);
+    },
+    unconfiguredNodes() {
+      const configuredNodeIds = this.proxyConfigs.map(
+        (proxyConfig) => proxyConfig.nodeId
+      );
+
+      return this.internalNodes.filter(
+        (node) => !configuredNodeIds.includes(node.value)
+      );
+    },
+  },
+  watch: {
+    traefikInstances: function () {
+      this.getTrustedProxies();
+    },
+  },
+  created() {
+    if (this.traefikInstances.length) {
+      this.getTrustedProxies();
+    }
+  },
+  methods: {
+    showAddProxyModal() {
+      this.isEditingProxy = false;
+      this.currentProxyConfig = null;
+      this.isShownConfigureProxyModal = true;
+    },
+    showEditProxyModal(proxyConfig) {
+      this.isEditingProxy = true;
+      this.currentProxyConfig = proxyConfig;
+      this.isShownConfigureProxyModal = true;
+    },
+    hideConfigureProxyModal() {
+      this.isShownConfigureProxyModal = false;
+    },
+    showDeleteProxyModal(proxyConfig) {
+      this.error.deleteTrustedProxies = "";
+      this.proxyConfigToDelete = proxyConfig;
+      this.isShownDeleteProxyModal = true;
+    },
+    hideDeleteProxyModal() {
+      this.isShownDeleteProxyModal = false;
+    },
+    async getTrustedProxies() {
+      this.proxyConfigs = [];
+      this.error.getTrustedProxies = "";
+
+      for (const traefikInstance of this.traefikInstances) {
+        const taskAction = "get-trusted-proxies";
+        const eventId = this.getUuid();
+        this.loading.getTrustedProxiesNum++;
+
+        // register to task events
+
+        this.$root.$once(
+          `${taskAction}-aborted-${eventId}`,
+          this.getTrustedProxiesAborted
+        );
+
+        this.$root.$once(
+          `${taskAction}-completed-${eventId}`,
+          this.getTrustedProxiesCompleted
+        );
+
+        const res = await to(
+          this.createModuleTaskForApp(traefikInstance.id, {
+            action: taskAction,
+            extra: {
+              title: this.$t("action." + taskAction),
+              isNotificationHidden: true,
+              traefikInstance: traefikInstance,
+              eventId,
+            },
+          })
+        );
+        const err = res[0];
+
+        if (err) {
+          console.error(`error creating task ${taskAction}`, err);
+          const errMessage = this.getErrorMessage(err);
+          this.error.getTrustedProxies = errMessage;
+          this.currentErrorAction = this.$t("action." + taskAction);
+          this.currentErrorDescription = errMessage;
+          this.loading.getTrustedProxiesNum--;
+        }
+      }
+    },
+    getTrustedProxiesAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.getTrustedProxies = this.$t("error.generic_error");
+      this.currentErrorAction = this.$t("action." + taskContext.action);
+      this.currentErrorDescription = this.$t("error.generic_error");
+      this.loading.getTrustedProxiesNum--;
+    },
+    getTrustedProxiesCompleted(taskContext, taskResult) {
+      const traefikId = taskContext.extra.traefikInstance.id;
+      const nodeId = taskContext.extra.traefikInstance.node;
+      const nodeUiName = taskContext.extra.traefikInstance.node_ui_name;
+      // get-trusted-proxies builds the list from a set, so the order is not
+      // stable across calls: sort it to keep the display consistent
+      const proxies = (taskResult.output.proxies || []).sort();
+
+      // nodes without any frontend proxy are not listed
+      if (proxies.length) {
+        const node = { id: nodeId, ui_name: nodeUiName };
+
+        this.proxyConfigs.push({
+          nodeId: nodeId,
+          node: this.getShortNodeLabel(node) + ` (${traefikId})`,
+          nodeLabel: this.getShortNodeLabel(node),
+          traefikInstance: traefikId,
+          proxies: proxies,
+          proxies_str: proxies.join("\n"),
+          depth: taskResult.output.depth || 0,
+        });
+        this.proxyConfigs.sort(this.sortByProperty("node"));
+      }
+      this.loading.getTrustedProxiesNum--;
+    },
+    async deleteTrustedProxies() {
+      this.loading.deleteTrustedProxies = true;
+      this.error.deleteTrustedProxies = "";
+      const taskAction = "set-trusted-proxies";
+      const eventId = this.getUuid();
+
+      // register to task events
+
+      this.$root.$once(
+        `${taskAction}-aborted-${eventId}`,
+        this.deleteTrustedProxiesAborted
+      );
+
+      this.$root.$once(
+        `${taskAction}-completed-${eventId}`,
+        this.deleteTrustedProxiesCompleted
+      );
+
+      const res = await to(
+        this.createModuleTaskForApp(this.proxyConfigToDelete.traefikInstance, {
+          action: taskAction,
+          // an empty proxy list clears the configuration: the backend also
+          // resets the trust depth to 0
+          data: {
+            proxies: [],
+            depth: 0,
+          },
+          extra: {
+            title: this.$t("settings_http_routes.delete_frontend_proxy_node", {
+              node: this.proxyConfigToDelete.node,
+            }),
+            description: this.$t("common.processing"),
+            eventId,
+          },
+        })
+      );
+      const err = res[0];
+
+      if (err) {
+        console.error(`error creating task ${taskAction}`, err);
+        this.error.deleteTrustedProxies = this.getErrorMessage(err);
+        this.loading.deleteTrustedProxies = false;
+        return;
+      }
+      this.hideDeleteProxyModal();
+    },
+    deleteTrustedProxiesAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.deleteTrustedProxies = this.$t("error.generic_error");
+      this.loading.deleteTrustedProxies = false;
+    },
+    deleteTrustedProxiesCompleted() {
+      this.loading.deleteTrustedProxies = false;
+
+      // reload frontend proxies
+      this.getTrustedProxies();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../styles/carbon-utils";
+</style>

From eecdc9858fdaa11ed34415d60c82899f367afd2d Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 13:03:31 +0200
Subject: [PATCH 04/28] feat(ui): add frontend proxies tab to HTTP routes page

Move the existing route table into a Routes tab and add a Frontend proxies
tab. Track the selected tab in the view query parameter and pass the
already discovered traefik instances down to the new tab.
---
 .../src/views/settings/SettingsHttpRoutes.vue | 405 ++++++++++--------
 1 file changed, 225 insertions(+), 180 deletions(-)

diff --git a/core/ui/src/views/settings/SettingsHttpRoutes.vue b/core/ui/src/views/settings/SettingsHttpRoutes.vue
index 28c3e1898..aae339715 100644
--- a/core/ui/src/views/settings/SettingsHttpRoutes.vue
+++ b/core/ui/src/views/settings/SettingsHttpRoutes.vue
@@ -40,6 +40,7 @@
         <cv-column>
           <NsInlineNotification
             v-if="
+              q.view !== 'frontend-proxies' &&
               q.selectedNodeId &&
               q.selectedNodeId !== 'all' &&
               selectedNodeLabel
@@ -59,196 +60,224 @@
       </cv-row>
       <cv-row>
         <cv-column>
-          <cv-tile light>
-            <cv-grid class="no-padding">
-              <cv-row>
-                <cv-column :md="4">
-                  <cv-combo-box
-                    v-model="q.selectedNodeId"
-                    :label="$t('common.choose')"
-                    :title="$t('common.show')"
-                    :auto-filter="true"
-                    :auto-highlight="true"
-                    :options="nodesForFilter"
-                    :disabled="loading.listInstalledModules"
-                    class="mg-bottom-xlg"
-                  >
-                  </cv-combo-box>
-                </cv-column>
-              </cv-row>
-              <cv-row class="toolbar">
-                <cv-column>
-                  <NsButton
-                    kind="secondary"
-                    :icon="Add20"
-                    @click="showCreateRouteModal"
-                    >{{ $t("settings_http_routes.create_route") }}
-                  </NsButton>
-                </cv-column>
-              </cv-row>
-              <cv-row>
-                <cv-column>
-                  <NsDataTable
-                    :allRows="filteredRoutes"
-                    :columns="i18nTableColumns"
-                    :rawColumns="tableColumns"
-                    :sortable="true"
-                    :pageSizes="[10, 25, 50, 100]"
-                    :overflow-menu="true"
-                    isSearchable
-                    :searchPlaceholder="$t('settings_http_routes.search_route')"
-                    :searchClearLabel="$t('common.clear_search')"
-                    :noSearchResultsLabel="$t('common.no_search_results')"
-                    :noSearchResultsDescription="
-                      $t('common.no_search_results_description')
-                    "
-                    :isLoading="loadingRoutes"
-                    :skeletonRows="5"
-                    :isErrorShown="
-                      !!error.listInstalledModules || !!error.listRoutes
-                    "
-                    :errorTitle="currentErrorAction"
-                    :errorDescription="currentErrorDescription"
-                    :itemsPerPageLabel="$t('pagination.items_per_page')"
-                    :rangeOfTotalItemsLabel="
-                      $t('pagination.range_of_total_items')
-                    "
-                    :ofTotalPagesLabel="$t('pagination.of_total_pages')"
-                    :backwardText="$t('pagination.previous_page')"
-                    :forwardText="$t('pagination.next_page')"
-                    :pageNumberLabel="$t('pagination.page_number')"
-                    :filterRowsCallback="filterHttpRoutes"
-                    :customSortTable="sortHttpRoutes"
-                    @updatePage="tablePage = $event"
-                  >
-                    <template slot="empty-state">
-                      <NsEmptyState
-                        :title="$t('settings_http_routes.no_http_route')"
+          <NsTabs
+            :container="false"
+            :aria-label="$t('common.tab_navigation')"
+            :noDefaultToFirst="true"
+            @tab-selected="tabSelected"
+          >
+            <cv-tab
+              id="tab-1"
+              :label="$t('settings_http_routes.routes')"
+              :selected="q.view === 'routes'"
+            >
+              <cv-tile light>
+                <cv-grid class="no-padding">
+                  <cv-row>
+                    <cv-column :md="4">
+                      <cv-combo-box
+                        v-model="q.selectedNodeId"
+                        :label="$t('common.choose')"
+                        :title="$t('common.show')"
+                        :auto-filter="true"
+                        :auto-highlight="true"
+                        :options="nodesForFilter"
+                        :disabled="loading.listInstalledModules"
+                        class="mg-bottom-xlg"
                       >
-                        <template #description>
-                          <div>
-                            {{
-                              $t(
-                                "settings_http_routes.no_http_route_description"
-                              )
-                            }}
-                          </div>
-                        </template>
-                      </NsEmptyState>
-                    </template>
-                    <template slot="data">
-                      <cv-data-table-row
-                        v-for="(row, rowIndex) in tablePage"
-                        :key="`${rowIndex}`"
-                        :value="`${rowIndex}`"
+                      </cv-combo-box>
+                    </cv-column>
+                  </cv-row>
+                  <cv-row class="toolbar">
+                    <cv-column>
+                      <NsButton
+                        kind="secondary"
+                        :icon="Add20"
+                        @click="showCreateRouteModal"
+                        >{{ $t("settings_http_routes.create_route") }}
+                      </NsButton>
+                    </cv-column>
+                  </cv-row>
+                  <cv-row>
+                    <cv-column>
+                      <NsDataTable
+                        :allRows="filteredRoutes"
+                        :columns="i18nTableColumns"
+                        :rawColumns="tableColumns"
+                        :sortable="true"
+                        :pageSizes="[10, 25, 50, 100]"
+                        :overflow-menu="true"
+                        isSearchable
+                        :searchPlaceholder="
+                          $t('settings_http_routes.search_route')
+                        "
+                        :searchClearLabel="$t('common.clear_search')"
+                        :noSearchResultsLabel="$t('common.no_search_results')"
+                        :noSearchResultsDescription="
+                          $t('common.no_search_results_description')
+                        "
+                        :isLoading="loadingRoutes"
+                        :skeletonRows="5"
+                        :isErrorShown="
+                          !!error.listInstalledModules || !!error.listRoutes
+                        "
+                        :errorTitle="currentErrorAction"
+                        :errorDescription="currentErrorDescription"
+                        :itemsPerPageLabel="$t('pagination.items_per_page')"
+                        :rangeOfTotalItemsLabel="
+                          $t('pagination.range_of_total_items')
+                        "
+                        :ofTotalPagesLabel="$t('pagination.of_total_pages')"
+                        :backwardText="$t('pagination.previous_page')"
+                        :forwardText="$t('pagination.next_page')"
+                        :pageNumberLabel="$t('pagination.page_number')"
+                        :filterRowsCallback="filterHttpRoutes"
+                        :customSortTable="sortHttpRoutes"
+                        @updatePage="tablePage = $event"
                       >
-                        <cv-data-table-cell>
-                          <div class="flex items-center gap-2">
-                            <span v-if="row.host && row.path">
-                              {{ row.host }}{{ row.path }}
-                            </span>
-                            <span v-else>
-                              {{ row.host || row.path }}
-                            </span>
-                            <cv-interactive-tooltip
-                              v-if="row.lets_encrypt_status === 'pending'"
-                              alignment="center"
-                              direction="top"
-                              class="shrink-0"
-                            >
-                              <template #trigger>
-                                <WarningAltFilled16 class="ns-warning" />
-                              </template>
-                              <template #content>
+                        <template slot="empty-state">
+                          <NsEmptyState
+                            :title="$t('settings_http_routes.no_http_route')"
+                          >
+                            <template #description>
+                              <div>
                                 {{
                                   $t(
-                                    "settings_http_routes.cannot_obtain_tls_certificate"
+                                    "settings_http_routes.no_http_route_description"
                                   )
                                 }}
-                                <cv-link
-                                  @click="goToPendingCertificateLogs(row)"
-                                >
-                                  {{ $t("settings_http_routes.show_logs") }}
-                                </cv-link>
-                              </template>
-                            </cv-interactive-tooltip>
-                          </div>
-                        </cv-data-table-cell>
-                        <cv-data-table-cell>
-                          <cv-link @click="showRouteDetailModal(row)">
-                            {{ row.name }}
-                          </cv-link>
-                        </cv-data-table-cell>
-                        <cv-data-table-cell>
-                          <span>
-                            {{ $t(`settings_http_routes.${row.type}`) }}
-                          </span>
-                        </cv-data-table-cell>
-                        <cv-data-table-cell>
-                          <span>{{ row.node }}</span>
-                        </cv-data-table-cell>
-                        <cv-data-table-cell>
-                          <NsTag
-                            v-if="!row.user_created"
-                            kind="gray"
-                            size="sm"
-                            :label="$t('settings_http_routes.automatic')"
-                          />
-                          <NsTag
-                            v-if="
-                              row.ip_allowlist !== undefined &&
-                              row.ip_allowlist.length > 0
-                            "
-                            kind="high-contrast"
-                            size="sm"
-                            :label="$t('settings_http_routes.restricted')"
-                            class="no-margin"
-                          />
-                        </cv-data-table-cell>
-                        <cv-data-table-cell class="table-overflow-menu-cell">
-                          <cv-overflow-menu
-                            flip-menu
-                            class="table-overflow-menu"
-                            :data-test-id="row.name + '-menu'"
+                              </div>
+                            </template>
+                          </NsEmptyState>
+                        </template>
+                        <template slot="data">
+                          <cv-data-table-row
+                            v-for="(row, rowIndex) in tablePage"
+                            :key="`${rowIndex}`"
+                            :value="`${rowIndex}`"
                           >
-                            <cv-overflow-menu-item
-                              @click="showRouteDetailModal(row)"
-                              :data-test-id="row.name + '-details'"
-                            >
-                              <NsMenuItem
-                                :icon="ArrowRight20"
-                                :label="$t('common.see_details')"
+                            <cv-data-table-cell>
+                              <div class="flex items-center gap-2">
+                                <span v-if="row.host && row.path">
+                                  {{ row.host }}{{ row.path }}
+                                </span>
+                                <span v-else>
+                                  {{ row.host || row.path }}
+                                </span>
+                                <cv-interactive-tooltip
+                                  v-if="row.lets_encrypt_status === 'pending'"
+                                  alignment="center"
+                                  direction="top"
+                                  class="shrink-0"
+                                >
+                                  <template #trigger>
+                                    <WarningAltFilled16 class="ns-warning" />
+                                  </template>
+                                  <template #content>
+                                    {{
+                                      $t(
+                                        "settings_http_routes.cannot_obtain_tls_certificate"
+                                      )
+                                    }}
+                                    <cv-link
+                                      @click="goToPendingCertificateLogs(row)"
+                                    >
+                                      {{ $t("settings_http_routes.show_logs") }}
+                                    </cv-link>
+                                  </template>
+                                </cv-interactive-tooltip>
+                              </div>
+                            </cv-data-table-cell>
+                            <cv-data-table-cell>
+                              <cv-link @click="showRouteDetailModal(row)">
+                                {{ row.name }}
+                              </cv-link>
+                            </cv-data-table-cell>
+                            <cv-data-table-cell>
+                              <span>
+                                {{ $t(`settings_http_routes.${row.type}`) }}
+                              </span>
+                            </cv-data-table-cell>
+                            <cv-data-table-cell>
+                              <span>{{ row.node }}</span>
+                            </cv-data-table-cell>
+                            <cv-data-table-cell>
+                              <NsTag
+                                v-if="!row.user_created"
+                                kind="gray"
+                                size="sm"
+                                :label="$t('settings_http_routes.automatic')"
                               />
-                            </cv-overflow-menu-item>
-                            <cv-overflow-menu-item
-                              @click="showEditRouteModal(row)"
-                              :data-test-id="row.name + '-edit'"
-                            >
-                              <NsMenuItem
-                                :icon="Edit20"
-                                :label="$t('common.edit')"
+                              <NsTag
+                                v-if="
+                                  row.ip_allowlist !== undefined &&
+                                  row.ip_allowlist.length > 0
+                                "
+                                kind="high-contrast"
+                                size="sm"
+                                :label="$t('settings_http_routes.restricted')"
+                                class="no-margin"
                               />
-                            </cv-overflow-menu-item>
-                            <cv-overflow-menu-item
-                              danger
-                              @click="showDeleteRouteModal(row)"
-                              :disabled="!row.user_created"
-                              :data-test-id="row.name + '-delete'"
+                            </cv-data-table-cell>
+                            <cv-data-table-cell
+                              class="table-overflow-menu-cell"
                             >
-                              <NsMenuItem
-                                :icon="TrashCan20"
-                                :label="$t('common.delete')"
-                              />
-                            </cv-overflow-menu-item>
-                          </cv-overflow-menu>
-                        </cv-data-table-cell>
-                      </cv-data-table-row>
-                    </template>
-                  </NsDataTable>
-                </cv-column>
-              </cv-row>
-            </cv-grid>
-          </cv-tile>
+                              <cv-overflow-menu
+                                flip-menu
+                                class="table-overflow-menu"
+                                :data-test-id="row.name + '-menu'"
+                              >
+                                <cv-overflow-menu-item
+                                  @click="showRouteDetailModal(row)"
+                                  :data-test-id="row.name + '-details'"
+                                >
+                                  <NsMenuItem
+                                    :icon="ArrowRight20"
+                                    :label="$t('common.see_details')"
+                                  />
+                                </cv-overflow-menu-item>
+                                <cv-overflow-menu-item
+                                  @click="showEditRouteModal(row)"
+                                  :data-test-id="row.name + '-edit'"
+                                >
+                                  <NsMenuItem
+                                    :icon="Edit20"
+                                    :label="$t('common.edit')"
+                                  />
+                                </cv-overflow-menu-item>
+                                <cv-overflow-menu-item
+                                  danger
+                                  @click="showDeleteRouteModal(row)"
+                                  :disabled="!row.user_created"
+                                  :data-test-id="row.name + '-delete'"
+                                >
+                                  <NsMenuItem
+                                    :icon="TrashCan20"
+                                    :label="$t('common.delete')"
+                                  />
+                                </cv-overflow-menu-item>
+                              </cv-overflow-menu>
+                            </cv-data-table-cell>
+                          </cv-data-table-row>
+                        </template>
+                      </NsDataTable>
+                    </cv-column>
+                  </cv-row>
+                </cv-grid>
+              </cv-tile>
+            </cv-tab>
+            <cv-tab
+              id="tab-2"
+              :label="$t('settings_http_routes.frontend_proxies')"
+              :selected="q.view === 'frontend-proxies'"
+            >
+              <HttpFrontendProxies
+                :nodes="internalNodes"
+                :traefikInstances="traefikInstances"
+                :isLoadingInstances="loading.listInstalledModules"
+              />
+            </cv-tab>
+          </NsTabs>
         </cv-column>
       </cv-row>
     </cv-grid>
@@ -327,6 +356,7 @@ import {
 import { mapState } from "vuex";
 import HttpRouteDetailModal from "@/components/settings/HttpRouteDetailModal.vue";
 import CreateOrEditHttpRouteModal from "@/components/settings/CreateOrEditHttpRouteModal.vue";
+import HttpFrontendProxies from "@/components/settings/HttpFrontendProxies.vue";
 import _cloneDeep from "lodash/cloneDeep";
 import WarningAltFilled16 from "@carbon/icons-vue/es/warning--alt--filled/16";
 
@@ -335,6 +365,7 @@ export default {
   components: {
     HttpRouteDetailModal,
     CreateOrEditHttpRouteModal,
+    HttpFrontendProxies,
     WarningAltFilled16,
   },
   mixins: [
@@ -351,6 +382,7 @@ export default {
   data() {
     return {
       q: {
+        view: "",
         selectedNodeId: "",
       },
       tablePage: [],
@@ -443,7 +475,20 @@ export default {
   created() {
     this.listInstalledModules();
   },
+  mounted() {
+    // if no view is set in query params, default to routes tab
+    if (!this.q.view) {
+      this.q.view = "routes";
+    }
+  },
   methods: {
+    tabSelected(tabNum) {
+      if (tabNum == 0) {
+        this.q.view = "routes";
+      } else if (tabNum == 1) {
+        this.q.view = "frontend-proxies";
+      }
+    },
     showCreateRouteModal() {
       this.isEditingRoute = false;
       this.isShownCreateOrEditRouteModal = true;

From c4d3c48ab4fe4fb22e476255f1e0e066879f236b Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 15:06:58 +0200
Subject: [PATCH 05/28] fix(ui): align frontend proxies strings with the design

Use the empty state wording of the design, drop the CIDR example and the word
CIDR from the address field, since the traefik set-trusted-proxies action
rejects CIDR ranges. Add the trust depth tooltip and the node placeholder, and
remove the strings of the description paragraph and of the restart warning.
---
 core/ui/public/i18n/en/translation.json | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/core/ui/public/i18n/en/translation.json b/core/ui/public/i18n/en/translation.json
index cc96c3206..cdb96668a 100644
--- a/core/ui/public/i18n/en/translation.json
+++ b/core/ui/public/i18n/en/translation.json
@@ -850,24 +850,23 @@
         "revoke_certificate_message": "Revoking the route certificate will briefly disconnect HTTP clients connected to {node}.",
         "routes": "Routes",
         "frontend_proxies": "Frontend proxies",
-        "frontend_proxies_description": "If Traefik runs behind another HTTP proxy, such as an external load balancer or a CDN, configure here the proxy addresses to trust: the real client IP address is read from the X-Forwarded-For header only for requests coming from these addresses.",
         "proxies": "Frontend proxies",
         "depth": "Trust depth",
         "add_frontend_proxy": "Add frontend proxy",
         "edit_frontend_proxy_node": "Edit frontend proxies of {node}",
         "delete_frontend_proxy_node": "Delete frontend proxies of {node}",
         "delete_frontend_proxy_description": "Delete the frontend proxies of {node}? The real client IP address won't be read from the X-Forwarded-For header anymore, and the trust depth will be reset to 0.",
-        "no_frontend_proxy": "No frontend proxy",
-        "no_frontend_proxy_description": "There is no node configured to run behind a frontend HTTP proxy",
-        "search_frontend_proxy": "Search node",
-        "frontend_proxy_node_helper": "Select the node running behind a frontend HTTP proxy",
-        "frontend_proxies_placeholder": "E.g. 192.168.1.10",
-        "frontend_proxies_helper": "Enter one IPv4 or IPv6 address per line. CIDR ranges are not supported",
+        "no_frontend_proxy": "No frontend proxy configured",
+        "no_frontend_proxy_description": "Add frontend proxy addresses to correctly identify client IPs behind reverse proxies or load balancers.",
+        "filter_frontend_proxies": "Filter",
+        "choose_node": "Choose node",
+        "frontend_proxies_placeholder": "e.g. 192.168.1.10\n2001:db8::1",
+        "frontend_proxies_helper": "Enter one IPv4 or IPv6 address per line",
         "trust_depth": "Trust depth",
-        "trust_depth_helper": "Number of frontend proxy levels to trust",
+        "trust_depth_helper": "Number of frontend proxy levels",
+        "trust_depth_tooltip": "Number of frontend proxies between the client and Traefik. 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 whole number greater than or equal to 0",
-        "bad_ip_address": "Invalid IP address. Enter one IPv4 or IPv6 address per line, without CIDR prefix",
-        "set_frontend_proxy_restart_message": "Saving will briefly disconnect HTTP clients connected to {node}."
+        "bad_ip_address": "Invalid IP address. Enter one IPv4 or IPv6 address per line, without CIDR prefix"
     },
     "settings_tls_certificates": {
         "title": "TLS certificates",

From 3207c82d111ff4a960e81f9695c566f165535eb6 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 15:06:58 +0200
Subject: [PATCH 06/28] feat(ui): add network pictogram

Hold the subpaths of the Carbon network--3 icon, which the design uses for the
frontend proxies empty state. The library ships no routing pictogram.
---
 core/ui/src/components/NetworkPictogram.vue | 24 +++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 core/ui/src/components/NetworkPictogram.vue

diff --git a/core/ui/src/components/NetworkPictogram.vue b/core/ui/src/components/NetworkPictogram.vue
new file mode 100644
index 000000000..fdfd83523
--- /dev/null
+++ b/core/ui/src/components/NetworkPictogram.vue
@@ -0,0 +1,24 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<!--
+  Subpaths of the Carbon "network--3" icon, which uses the same 32x32 viewbox as
+  NsPictogram: NsPictogram provides the svg wrapper and the fill.
+-->
+<template>
+  <path
+    id="network--3"
+    d="M30,30H22V22h8Zm-6-2h4V24H24Z
+	M20,27H8A6,6,0,0,1,8,15h2v2H8a4,4,0,0,0,0,8H20Z
+	M20,20H12V12h8Zm-6-2h4V14H14Z
+	M24,17H22V15h2a4,4,0,0,0,0-8H12V5H24a6,6,0,0,1,0,12Z
+	M10,10H2V2h8ZM4,8H8V4H4Z"
+  />
+</template>
+
+<script>
+export default {
+  name: "NetworkPictogram",
+};
+</script>

From c749194e655699c12939f984deb20d2be598b1ed Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 15:06:58 +0200
Subject: [PATCH 07/28] fix(ui): align frontend proxy modal with the design

Drop the node tooltip and add one to the trust depth, following the label
markup of NsTextInput since cv-number-input has no tooltip slot. Widen the
trust depth field so its helper text is no longer clipped, and remove the
restart warning.
---
 .../settings/ConfigureFrontendProxyModal.vue  | 54 +++++++++++--------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
index 3c1550458..46ed1051c 100644
--- a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
+++ b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
@@ -22,7 +22,7 @@
       <cv-form @submit.prevent="setTrustedProxies">
         <NsComboBox
           v-model="selectedNodeId"
-          :label="$t('common.choose')"
+          :label="$t('settings_http_routes.choose_node')"
           :title="$t('common.node')"
           :auto-filter="true"
           :auto-highlight="true"
@@ -30,14 +30,8 @@
           :disabled="isEditing || loading.setTrustedProxies"
           :invalid-message="error.node"
           light
-          tooltipAlignment="start"
-          tooltipDirection="top"
           ref="node"
-        >
-          <template slot="tooltip">
-            {{ $t("settings_http_routes.frontend_proxy_node_helper") }}
-          </template>
-        </NsComboBox>
+        />
         <cv-text-area
           v-model.trim="proxies_str"
           :placeholder="$t('settings_http_routes.frontend_proxies_placeholder')"
@@ -47,27 +41,34 @@
           :disabled="loading.setTrustedProxies"
           ref="proxies"
         />
+        <!-- cv-number-input has no tooltip slot: render the label separately,
+             following the same markup as NsTextInput -->
+        <div class="label-with-tooltip">
+          <span class="bx--label">
+            {{ $t("settings_http_routes.trust_depth") }}
+          </span>
+          <cv-interactive-tooltip
+            alignment="start"
+            direction="top"
+            class="info"
+          >
+            <template slot="content">
+              {{ $t("settings_http_routes.trust_depth_tooltip") }}
+            </template>
+          </cv-interactive-tooltip>
+        </div>
         <cv-number-input
           v-model="depth"
-          :label="$t('settings_http_routes.trust_depth')"
+          :label="''"
+          :aria-label="$t('settings_http_routes.trust_depth')"
           :helper-text="$t('settings_http_routes.trust_depth_helper')"
           :invalid-message="error.depth"
           :disabled="loading.setTrustedProxies"
           :min="0"
           :step="1"
-          class="narrow mg-bottom-md"
+          class="trust-depth mg-bottom-md"
           ref="depth"
         />
-        <NsInlineNotification
-          kind="warning"
-          :title="$t('settings_http_routes.traefik_will_be_restarted')"
-          :description="
-            $t('settings_http_routes.set_frontend_proxy_restart_message', {
-              node: selectedNodeLabel,
-            })
-          "
-          :showCloseButton="false"
-        />
         <!-- need to wrap error notification inside a div: custom elements like NsInlineNotification don't have scrollIntoView() function -->
         <div ref="setTrustedProxiesError">
           <NsInlineNotification
@@ -126,9 +127,6 @@ export default {
     selectedNode() {
       return this.nodes.find((node) => node.value === this.selectedNodeId);
     },
-    selectedNodeLabel() {
-      return this.selectedNode ? this.selectedNode.label : "";
-    },
   },
   watch: {
     isShown: function () {
@@ -336,4 +334,14 @@ export default {
 
 <style scoped lang="scss">
 @import "../../styles/carbon-utils";
+
+.label-with-tooltip {
+  display: flex;
+  align-items: baseline;
+}
+
+// wide enough to render the helper text on a single line
+.trust-depth {
+  max-width: 15rem;
+}
 </style>

From 833ac63b13077414e4d8f5aaa200b3160d90289b Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 15:06:58 +0200
Subject: [PATCH 08/28] fix(ui): align frontend proxies tab with the design

Add the filter row with the node dropdown and the clear filters link, and turn
the table search off in favour of it. Show the add button as primary, inside
the empty state when no node is configured and above the table otherwise.
Drop the description paragraph and the restart warning.
---
 .../settings/HttpFrontendProxies.vue          | 183 ++++++++++++++----
 1 file changed, 146 insertions(+), 37 deletions(-)

diff --git a/core/ui/src/components/settings/HttpFrontendProxies.vue b/core/ui/src/components/settings/HttpFrontendProxies.vue
index c7caf8c56..f0f73cf91 100644
--- a/core/ui/src/components/settings/HttpFrontendProxies.vue
+++ b/core/ui/src/components/settings/HttpFrontendProxies.vue
@@ -8,15 +8,42 @@
       <cv-grid class="no-padding">
         <cv-row>
           <cv-column>
-            <div class="mg-bottom-md">
-              {{ $t("settings_http_routes.frontend_proxies_description") }}
+            <div class="data-table-filters">
+              <cv-search
+                :label="$t('common.search')"
+                :placeholder="
+                  $t('settings_http_routes.filter_frontend_proxies')
+                "
+                :clear-aria-label="$t('common.clear_search')"
+                v-model="filter.text"
+                :disabled="loadingProxies"
+                size="large"
+                ref="tableSearch"
+                class="self-end"
+              >
+              </cv-search>
+              <NsComboBox
+                v-model="filter.nodeId"
+                :label="$t('common.choose')"
+                :title="$t('common.node')"
+                :auto-filter="true"
+                :auto-highlight="true"
+                :options="nodesForFilter"
+                :disabled="loadingProxies"
+              >
+              </NsComboBox>
+              <cv-link @click="clearFilters()" class="self-end mb-3 shrink-0"
+                >{{ $t("common.clear_filters") }}
+              </cv-link>
             </div>
           </cv-column>
         </cv-row>
-        <cv-row class="toolbar">
+        <!-- when no proxy is configured at all, the button is shown inside the
+             empty state -->
+        <cv-row v-if="proxyConfigs.length" class="toolbar">
           <cv-column>
             <NsButton
-              kind="secondary"
+              kind="primary"
               :icon="Add20"
               :disabled="loadingProxies || !unconfiguredNodes.length"
               @click="showAddProxyModal"
@@ -28,17 +55,13 @@
         <cv-row>
           <cv-column>
             <NsDataTable
-              :allRows="proxyConfigs"
+              :allRows="filteredProxyConfigs"
               :columns="i18nTableColumns"
               :rawColumns="tableColumns"
               :sortable="true"
               :pageSizes="[10, 25, 50, 100]"
               :overflow-menu="true"
-              isSearchable
-              :searchPlaceholder="
-                $t('settings_http_routes.search_frontend_proxy')
-              "
-              :searchClearLabel="$t('common.clear_search')"
+              :isSearchable="false"
               :noSearchResultsLabel="$t('common.no_search_results')"
               :noSearchResultsDescription="
                 $t('common.no_search_results_description')
@@ -57,17 +80,59 @@
               @updatePage="tablePage = $event"
             >
               <template slot="empty-state">
-                <NsEmptyState
-                  :title="$t('settings_http_routes.no_frontend_proxy')"
-                >
-                  <template #description>
-                    <div>
-                      {{
-                        $t("settings_http_routes.no_frontend_proxy_description")
-                      }}
-                    </div>
-                  </template>
-                </NsEmptyState>
+                <template v-if="hasActiveFilters && proxyConfigs.length">
+                  <!-- no search results -->
+                  <NsEmptyState
+                    :title="$t('common.no_search_results')"
+                    key="no-results-empty-state"
+                  >
+                    <template #description>
+                      <div class="flex flex-col items-center text-center gap-2">
+                        <p>
+                          {{ $t("common.no_search_results_description") }}
+                        </p>
+                        <NsButton
+                          kind="ghost"
+                          size="field"
+                          @click="clearFilters()"
+                          >{{ $t("common.clear_filters") }}
+                        </NsButton>
+                      </div>
+                    </template>
+                  </NsEmptyState>
+                </template>
+                <template v-else>
+                  <!-- no frontend proxy configured -->
+                  <NsEmptyState
+                    :title="$t('settings_http_routes.no_frontend_proxy')"
+                    key="no-frontend-proxy-empty-state"
+                  >
+                    <template #pictogram>
+                      <NetworkPictogram />
+                    </template>
+                    <template #description>
+                      <div class="flex flex-col items-center gap-4">
+                        <p>
+                          {{
+                            $t(
+                              "settings_http_routes.no_frontend_proxy_description"
+                            )
+                          }}
+                        </p>
+                        <NsButton
+                          kind="primary"
+                          :icon="Add20"
+                          :disabled="
+                            loadingProxies || !unconfiguredNodes.length
+                          "
+                          @click="showAddProxyModal"
+                          data-test-id="add-frontend-proxy-empty-state"
+                          >{{ $t("settings_http_routes.add_frontend_proxy") }}
+                        </NsButton>
+                      </div>
+                    </template>
+                  </NsEmptyState>
+                </template>
               </template>
               <template slot="data">
                 <cv-data-table-row
@@ -154,34 +219,22 @@
       @hide="hideDeleteProxyModal"
       @confirmDelete="deleteTrustedProxies"
       data-test-id="delete-frontend-proxy-modal"
-    >
-      <template #explanation>
-        <div class="mt-4">
-          <NsInlineNotification
-            kind="warning"
-            :title="$t('settings_http_routes.traefik_will_be_restarted')"
-            :description="
-              $t('settings_http_routes.set_frontend_proxy_restart_message', {
-                node: proxyConfigToDelete ? proxyConfigToDelete.node : '',
-              })
-            "
-            :showCloseButton="false"
-          />
-        </div>
-      </template>
-    </NsDangerDeleteModal>
+    />
   </div>
 </template>
 
 <script>
 import to from "await-to-js";
 import { UtilService, TaskService, IconService } from "@nethserver/ns8-ui-lib";
+import _cloneDeep from "lodash/cloneDeep";
 import ConfigureFrontendProxyModal from "@/components/settings/ConfigureFrontendProxyModal.vue";
+import NetworkPictogram from "@/components/NetworkPictogram.vue";
 
 export default {
   name: "HttpFrontendProxies",
   components: {
     ConfigureFrontendProxyModal,
+    NetworkPictogram,
   },
   mixins: [TaskService, UtilService, IconService],
   props: {
@@ -207,6 +260,12 @@ export default {
       // NsDataTable for the default search and sort
       tableColumns: ["node", "proxies", "depth"],
       proxyConfigs: [],
+      // the filters are local on purpose: the parent view already binds
+      // q.selectedNodeId to the node filter of the Routes tab
+      filter: {
+        text: "",
+        nodeId: "any",
+      },
       currentProxyConfig: null,
       proxyConfigToDelete: null,
       isShownConfigureProxyModal: false,
@@ -246,6 +305,52 @@ export default {
         (node) => !configuredNodeIds.includes(node.value)
       );
     },
+    nodesForFilter() {
+      if (!this.internalNodes.length) {
+        return [];
+      }
+
+      // add "Any node" at the beginning of internalNodes array
+      const nodes = _cloneDeep(this.internalNodes);
+
+      nodes.unshift({
+        name: "any",
+        label: this.$t("common.any_node"),
+        value: "any",
+      });
+      return nodes;
+    },
+    filteredProxyConfigs() {
+      let proxyConfigs = this.proxyConfigs;
+
+      // filter by node
+      if (this.filter.nodeId && this.filter.nodeId !== "any") {
+        proxyConfigs = proxyConfigs.filter((proxyConfig) => {
+          return proxyConfig.nodeId === this.filter.nodeId;
+        });
+      }
+
+      // filter by text
+      if (this.filter.text.trim()) {
+        const searchText = this.filter.text.toLowerCase().trim();
+        proxyConfigs = proxyConfigs.filter((proxyConfig) => {
+          return (
+            proxyConfig.node.toLowerCase().includes(searchText) ||
+            proxyConfig.proxies.some((proxy) =>
+              proxy.toLowerCase().includes(searchText)
+            ) ||
+            proxyConfig.depth.toString().includes(searchText)
+          );
+        });
+      }
+      return proxyConfigs;
+    },
+    hasActiveFilters() {
+      return (
+        (this.filter.text && this.filter.text.trim() !== "") ||
+        (this.filter.nodeId && this.filter.nodeId !== "any")
+      );
+    },
   },
   watch: {
     traefikInstances: function () {
@@ -258,6 +363,10 @@ export default {
     }
   },
   methods: {
+    clearFilters() {
+      this.filter.text = "";
+      this.filter.nodeId = "any";
+    },
     showAddProxyModal() {
       this.isEditingProxy = false;
       this.currentProxyConfig = null;

From d948581359ea095382a1c72ec1f53ba7106993ae Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 15:54:44 +0200
Subject: [PATCH 09/28] feat(ui): add the frontend proxy restart message

One message for both the save and the delete path: applying either one
restarts Traefik and drops the HTTP clients of the node.
---
 core/ui/public/i18n/en/translation.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/core/ui/public/i18n/en/translation.json b/core/ui/public/i18n/en/translation.json
index cdb96668a..c55e85dfc 100644
--- a/core/ui/public/i18n/en/translation.json
+++ b/core/ui/public/i18n/en/translation.json
@@ -866,7 +866,8 @@
         "trust_depth_helper": "Number of frontend proxy levels",
         "trust_depth_tooltip": "Number of frontend proxies between the client and Traefik. 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 whole number greater than or equal to 0",
-        "bad_ip_address": "Invalid IP address. Enter one IPv4 or IPv6 address per line, without CIDR prefix"
+        "bad_ip_address": "Invalid IP address. Enter one IPv4 or IPv6 address per line, without CIDR prefix",
+        "frontend_proxy_restart_message": "Traefik will briefly disconnect HTTP clients connected to {node}. If your session goes through this node, the page will reconnect automatically after a few seconds."
     },
     "settings_tls_certificates": {
         "title": "TLS certificates",

From c2fc8643a8450cad8316e7c9ed557584d5aec1d7 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 15:54:44 +0200
Subject: [PATCH 10/28] fix(ui): warn about the Traefik restart and recover
 from it

Restore the restart warning: saving disconnects the HTTP clients of the node,
and the design does not mention it. Stop waiting for the task completion event
once the websocket comes back, since Traefik restarting means the action was
applied and the event is gone with the old connection.
---
 .../settings/ConfigureFrontendProxyModal.vue  | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
index 46ed1051c..fcae9406f 100644
--- a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
+++ b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
@@ -69,6 +69,16 @@
           class="trust-depth mg-bottom-md"
           ref="depth"
         />
+        <NsInlineNotification
+          kind="warning"
+          :title="$t('settings_http_routes.traefik_will_be_restarted')"
+          :description="
+            $t('settings_http_routes.frontend_proxy_restart_message', {
+              node: selectedNodeLabel,
+            })
+          "
+          :showCloseButton="false"
+        />
         <!-- need to wrap error notification inside a div: custom elements like NsInlineNotification don't have scrollIntoView() function -->
         <div ref="setTrustedProxiesError">
           <NsInlineNotification
@@ -91,6 +101,7 @@
 <script>
 import to from "await-to-js";
 import { UtilService, TaskService } from "@nethserver/ns8-ui-lib";
+import { mapState } from "vuex";
 
 export default {
   name: "ConfigureFrontendProxyModal",
@@ -124,11 +135,25 @@ export default {
     };
   },
   computed: {
+    ...mapState(["isWebsocketConnected"]),
     selectedNode() {
       return this.nodes.find((node) => node.value === this.selectedNodeId);
     },
+    selectedNodeLabel() {
+      return this.selectedNode ? this.selectedNode.label : "";
+    },
   },
   watch: {
+    isWebsocketConnected: function (isConnected) {
+      // set-trusted-proxies restarts Traefik, so the websocket can go down
+      // before the task completion event is delivered: stop waiting for it. The
+      // restart itself means the action was applied, and the parent reloads the
+      // values on its own reconnection watcher
+      if (isConnected && this.loading.setTrustedProxies) {
+        this.loading.setTrustedProxies = false;
+        this.$emit("hide");
+      }
+    },
     isShown: function () {
       if (this.isShown) {
         this.clearErrors();

From 482e4243897298f2063251925705ec3c243d7f80 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 15:54:44 +0200
Subject: [PATCH 11/28] fix(ui): reload the frontend proxies after a Traefik
 restart

Traefik serves the cluster admin UI and its websocket, so restarting it makes
the events of the running get-trusted-proxies tasks unreachable and the table
stayed in its loading state until a manual page reload. Read the values again
when the websocket comes back, and keep the counter and the rows consistent if
an event is delivered after the reset. Restore the restart warning in the
delete confirmation.
---
 .../settings/HttpFrontendProxies.vue          | 50 +++++++++++++++++--
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/core/ui/src/components/settings/HttpFrontendProxies.vue b/core/ui/src/components/settings/HttpFrontendProxies.vue
index f0f73cf91..4a2ca2d6b 100644
--- a/core/ui/src/components/settings/HttpFrontendProxies.vue
+++ b/core/ui/src/components/settings/HttpFrontendProxies.vue
@@ -219,7 +219,22 @@
       @hide="hideDeleteProxyModal"
       @confirmDelete="deleteTrustedProxies"
       data-test-id="delete-frontend-proxy-modal"
-    />
+    >
+      <template #explanation>
+        <div class="mt-4">
+          <NsInlineNotification
+            kind="warning"
+            :title="$t('settings_http_routes.traefik_will_be_restarted')"
+            :description="
+              $t('settings_http_routes.frontend_proxy_restart_message', {
+                node: proxyConfigToDelete ? proxyConfigToDelete.node : '',
+              })
+            "
+            :showCloseButton="false"
+          />
+        </div>
+      </template>
+    </NsDangerDeleteModal>
   </div>
 </template>
 
@@ -227,6 +242,7 @@
 import to from "await-to-js";
 import { UtilService, TaskService, IconService } from "@nethserver/ns8-ui-lib";
 import _cloneDeep from "lodash/cloneDeep";
+import { mapState } from "vuex";
 import ConfigureFrontendProxyModal from "@/components/settings/ConfigureFrontendProxyModal.vue";
 import NetworkPictogram from "@/components/NetworkPictogram.vue";
 
@@ -284,6 +300,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(["isWebsocketConnected"]),
     i18nTableColumns() {
       return this.tableColumns.map((column) => {
         return this.$t("settings_http_routes." + column);
@@ -356,6 +373,17 @@ export default {
     traefikInstances: function () {
       this.getTrustedProxies();
     },
+    isWebsocketConnected: function (isConnected) {
+      // set-trusted-proxies restarts Traefik, which serves the cluster admin UI
+      // and its websocket: the task events of the running get-trusted-proxies
+      // tasks are lost, so their counter would never come back to zero and the
+      // table would stay in its loading state. Read the values again instead
+      if (isConnected) {
+        this.loading.getTrustedProxiesNum = 0;
+        this.loading.deleteTrustedProxies = false;
+        this.getTrustedProxies();
+      }
+    },
   },
   created() {
     if (this.traefikInstances.length) {
@@ -428,16 +456,24 @@ export default {
           this.error.getTrustedProxies = errMessage;
           this.currentErrorAction = this.$t("action." + taskAction);
           this.currentErrorDescription = errMessage;
-          this.loading.getTrustedProxiesNum--;
+          this.decreaseGetTrustedProxiesNum();
         }
       }
     },
+    decreaseGetTrustedProxiesNum() {
+      // never go below zero: the reconnection watcher resets the counter, so a
+      // task event delivered after the reset must not unbalance it
+      this.loading.getTrustedProxiesNum = Math.max(
+        0,
+        this.loading.getTrustedProxiesNum - 1
+      );
+    },
     getTrustedProxiesAborted(taskResult, taskContext) {
       console.error(`${taskContext.action} aborted`, taskResult);
       this.error.getTrustedProxies = this.$t("error.generic_error");
       this.currentErrorAction = this.$t("action." + taskContext.action);
       this.currentErrorDescription = this.$t("error.generic_error");
-      this.loading.getTrustedProxiesNum--;
+      this.decreaseGetTrustedProxiesNum();
     },
     getTrustedProxiesCompleted(taskContext, taskResult) {
       const traefikId = taskContext.extra.traefikInstance.id;
@@ -447,6 +483,12 @@ export default {
       // stable across calls: sort it to keep the display consistent
       const proxies = (taskResult.output.proxies || []).sort();
 
+      // drop any previous row of this node: a late task event or an overlapping
+      // reload must not duplicate it
+      this.proxyConfigs = this.proxyConfigs.filter(
+        (proxyConfig) => proxyConfig.nodeId !== nodeId
+      );
+
       // nodes without any frontend proxy are not listed
       if (proxies.length) {
         const node = { id: nodeId, ui_name: nodeUiName };
@@ -462,7 +504,7 @@ export default {
         });
         this.proxyConfigs.sort(this.sortByProperty("node"));
       }
-      this.loading.getTrustedProxiesNum--;
+      this.decreaseGetTrustedProxiesNum();
     },
     async deleteTrustedProxies() {
       this.loading.deleteTrustedProxies = true;

From 6bef7e2f216d4db18ee5e644681abf6b3174515a Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 15:54:44 +0200
Subject: [PATCH 12/28] fix(ui): reload the HTTP routes after a Traefik restart

Reloading the page while Traefik restarts left the routes table stuck in its
loading state, because the list-routes events were delivered to the closed
websocket. Read the routes again when the websocket comes back.
---
 .../src/views/settings/SettingsHttpRoutes.vue | 33 ++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/core/ui/src/views/settings/SettingsHttpRoutes.vue b/core/ui/src/views/settings/SettingsHttpRoutes.vue
index aae339715..57953300b 100644
--- a/core/ui/src/views/settings/SettingsHttpRoutes.vue
+++ b/core/ui/src/views/settings/SettingsHttpRoutes.vue
@@ -412,7 +412,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["clusterNodes"]),
+    ...mapState(["clusterNodes", "isWebsocketConnected"]),
     i18nTableColumns() {
       return this.tableColumns.map((column) => {
         return this.$t("settings_http_routes." + column);
@@ -462,6 +462,23 @@ export default {
       return nodes;
     },
   },
+  watch: {
+    isWebsocketConnected: function (isConnected) {
+      // Traefik serves the cluster admin UI and its websocket, so an action
+      // restarting it makes the task events of the running tasks unreachable:
+      // their counter would never come back to zero and the table would stay in
+      // its loading state. Read the routes again instead
+      if (isConnected) {
+        this.loading.listRoutesNum = 0;
+
+        if (this.traefikInstances.length) {
+          this.listRoutes();
+        } else {
+          this.listInstalledModules();
+        }
+      }
+    },
+  },
   beforeRouteEnter(to, from, next) {
     next((vm) => {
       vm.watchQueryData(vm);
@@ -650,16 +667,21 @@ export default {
           this.error.listRoutes = errMessage;
           this.currentErrorAction = this.$t("action." + taskAction);
           this.currentErrorDescription = errMessage;
-          this.loading.listRoutesNum--;
+          this.decreaseListRoutesNum();
         }
       }
     },
+    decreaseListRoutesNum() {
+      // never go below zero: the reconnection watcher resets the counter, so a
+      // task event delivered after the reset must not unbalance it
+      this.loading.listRoutesNum = Math.max(0, this.loading.listRoutesNum - 1);
+    },
     listRoutesAborted(taskResult, taskContext) {
       console.error(`${taskContext.action} aborted`, taskResult);
       this.error.listRoutes = this.$t("error.generic_error");
       this.currentErrorAction = this.$t("action." + taskContext.action);
       this.currentErrorDescription = this.$t("error.generic_error");
-      this.loading.listRoutesNum--;
+      this.decreaseListRoutesNum();
     },
     listRoutesCompleted(taskContext, taskResult) {
       const routes = [];
@@ -692,10 +714,13 @@ export default {
         route.traefikInstance = traefikId;
         routes.push(route);
       }
+      // drop any previous route of this Traefik instance: a late task event or
+      // an overlapping reload must not duplicate them
       this.routes = this.routes
+        .filter((route) => route.traefikInstance !== traefikId)
         .concat(routes)
         .sort(this.sortByProperty("name"));
-      this.loading.listRoutesNum--;
+      this.decreaseListRoutesNum();
 
       // compute logs path for pending certificates
 

From 1cc338d814da241f526678d8c1df270d54a3b313 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 16:20:37 +0200
Subject: [PATCH 13/28] fix(ui): tidy the frontend proxy modal

Hide the node field when editing: it cannot be changed, the modal title already
names the node, and a disabled combo box does not paint its value. Cap the
notifications at the width of the form fields. Close as soon as the task is
created, since the completion event cannot arrive before Traefik has restarted
and the page has reconnected.
---
 .../settings/ConfigureFrontendProxyModal.vue  | 37 +++++++++++++++----
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
index fcae9406f..7d4c0098b 100644
--- a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
+++ b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
@@ -20,14 +20,17 @@
     }}</template>
     <template slot="content">
       <cv-form @submit.prevent="setTrustedProxies">
+        <!-- when editing, the node cannot be changed and it is already named in
+             the modal title -->
         <NsComboBox
+          v-if="!isEditing"
           v-model="selectedNodeId"
           :label="$t('settings_http_routes.choose_node')"
           :title="$t('common.node')"
           :auto-filter="true"
           :auto-highlight="true"
           :options="nodes"
-          :disabled="isEditing || loading.setTrustedProxies"
+          :disabled="loading.setTrustedProxies"
           :invalid-message="error.node"
           light
           ref="node"
@@ -145,10 +148,9 @@ export default {
   },
   watch: {
     isWebsocketConnected: function (isConnected) {
-      // set-trusted-proxies restarts Traefik, so the websocket can go down
-      // before the task completion event is delivered: stop waiting for it. The
-      // restart itself means the action was applied, and the parent reloads the
-      // values on its own reconnection watcher
+      // safety net: the modal already closes when the task is created, but if
+      // the request itself was cut off by the restart there would be nothing
+      // left to clear the pending state
       if (isConnected && this.loading.setTrustedProxies) {
         this.loading.setTrustedProxies = false;
         this.$emit("hide");
@@ -197,9 +199,10 @@ export default {
 
       let isValidationOk = true;
 
-      // node
+      // node: the field is only rendered when adding, so there is nothing to
+      // focus when editing
 
-      if (!this.selectedNodeId) {
+      if (!this.isEditing && !this.selectedNodeId) {
         this.error.node = this.$t("common.required");
 
         if (isValidationOk) {
@@ -323,6 +326,12 @@ export default {
         this.loading.setTrustedProxies = false;
         return;
       }
+      // close as soon as the task is created, like the delete flow does: the
+      // action restarts Traefik, which carries this websocket, so the completion
+      // event cannot be delivered before the page reconnects. The task
+      // notification reports the outcome
+      this.loading.setTrustedProxies = false;
+      this.$emit("hide");
     },
     setTrustedProxiesAborted(taskResult, taskContext) {
       console.error(`${taskContext.action} aborted`, taskResult);
@@ -331,6 +340,13 @@ export default {
     },
     setTrustedProxiesValidationFailed(validationErrors) {
       this.loading.setTrustedProxies = false;
+
+      // the modal is already closed by the time the backend answers, so the
+      // task notification is what reports the failure: only fill the inline
+      // errors when it is still on screen
+      if (!this.isShown) {
+        return;
+      }
       let focusAlreadySet = false;
 
       for (const validationError of validationErrors) {
@@ -350,7 +366,6 @@ export default {
     },
     setTrustedProxiesCompleted() {
       this.loading.setTrustedProxies = false;
-      this.$emit("hide");
       this.$emit("reloadTrustedProxies");
     },
   },
@@ -365,6 +380,12 @@ export default {
   align-items: baseline;
 }
 
+// align the notifications with the form fields, which the global styles cap at
+// the same width
+.bx--inline-notification {
+  max-width: 38rem;
+}
+
 // wide enough to render the helper text on a single line
 .trust-depth {
   max-width: 15rem;

From 19efc1f15bb8f18532c87f7ca4868cff9611d201 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 16:20:37 +0200
Subject: [PATCH 14/28] fix(ui): fix the frontend proxies filter row

Carbon makes the search box and the combo box full width, so cap them to keep
the design proportions. Leave the node filter empty until the user picks a
value and reuse the sentinel of the routes table: NsComboBox resolves the label
of a value only against the options loaded when it is set, so the preselected
sentinel was painted as a raw value.
---
 .../settings/HttpFrontendProxies.vue          | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/core/ui/src/components/settings/HttpFrontendProxies.vue b/core/ui/src/components/settings/HttpFrontendProxies.vue
index 4a2ca2d6b..529d2f502 100644
--- a/core/ui/src/components/settings/HttpFrontendProxies.vue
+++ b/core/ui/src/components/settings/HttpFrontendProxies.vue
@@ -19,7 +19,7 @@
                 :disabled="loadingProxies"
                 size="large"
                 ref="tableSearch"
-                class="self-end"
+                class="self-end filter-field"
               >
               </cv-search>
               <NsComboBox
@@ -30,6 +30,7 @@
                 :auto-highlight="true"
                 :options="nodesForFilter"
                 :disabled="loadingProxies"
+                class="filter-field"
               >
               </NsComboBox>
               <cv-link @click="clearFilters()" class="self-end mb-3 shrink-0"
@@ -280,7 +281,11 @@ export default {
       // q.selectedNodeId to the node filter of the Routes tab
       filter: {
         text: "",
-        nodeId: "any",
+        // empty until the user picks a node: setting the "all" sentinel here
+        // would paint the raw value, because NsComboBox resolves the label of a
+        // value only against the options available when it is set, and the node
+        // options are not loaded yet
+        nodeId: "",
       },
       currentProxyConfig: null,
       proxyConfigToDelete: null,
@@ -330,10 +335,11 @@ export default {
       // add "Any node" at the beginning of internalNodes array
       const nodes = _cloneDeep(this.internalNodes);
 
+      // same sentinel as the node filter of the routes table
       nodes.unshift({
-        name: "any",
+        name: "all",
         label: this.$t("common.any_node"),
-        value: "any",
+        value: "all",
       });
       return nodes;
     },
@@ -341,7 +347,7 @@ export default {
       let proxyConfigs = this.proxyConfigs;
 
       // filter by node
-      if (this.filter.nodeId && this.filter.nodeId !== "any") {
+      if (this.filter.nodeId && this.filter.nodeId !== "all") {
         proxyConfigs = proxyConfigs.filter((proxyConfig) => {
           return proxyConfig.nodeId === this.filter.nodeId;
         });
@@ -365,7 +371,7 @@ export default {
     hasActiveFilters() {
       return (
         (this.filter.text && this.filter.text.trim() !== "") ||
-        (this.filter.nodeId && this.filter.nodeId !== "any")
+        (this.filter.nodeId && this.filter.nodeId !== "all")
       );
     },
   },
@@ -393,7 +399,7 @@ export default {
   methods: {
     clearFilters() {
       this.filter.text = "";
-      this.filter.nodeId = "any";
+      this.filter.nodeId = "";
     },
     showAddProxyModal() {
       this.isEditingProxy = false;
@@ -569,4 +575,11 @@ export default {
 
 <style scoped lang="scss">
 @import "../../styles/carbon-utils";
+
+// the filter row is a flex container and Carbon makes these fields full width,
+// so they need an explicit cap to keep the design proportions
+.filter-field {
+  max-width: 18rem;
+  width: 100%;
+}
 </style>

From 84afc70bd51899ce8327d430fd570ffdb88c3700 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 16:40:17 +0200
Subject: [PATCH 15/28] style(ui): shorten the frontend proxies comments

Keep one line per comment, like the surrounding views, and drop the ones the
code already says.
---
 core/ui/src/components/NetworkPictogram.vue   |  5 +--
 .../settings/ConfigureFrontendProxyModal.vue  | 36 ++++++-------------
 .../src/views/settings/SettingsHttpRoutes.vue | 11 ++----
 3 files changed, 14 insertions(+), 38 deletions(-)

diff --git a/core/ui/src/components/NetworkPictogram.vue b/core/ui/src/components/NetworkPictogram.vue
index fdfd83523..8509bdf26 100644
--- a/core/ui/src/components/NetworkPictogram.vue
+++ b/core/ui/src/components/NetworkPictogram.vue
@@ -2,10 +2,7 @@
   Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
-<!--
-  Subpaths of the Carbon "network--3" icon, which uses the same 32x32 viewbox as
-  NsPictogram: NsPictogram provides the svg wrapper and the fill.
--->
+<!-- Subpaths of the Carbon "network--3" icon: NsPictogram provides the svg wrapper -->
 <template>
   <path
     id="network--3"
diff --git a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
index 7d4c0098b..78c3a1f60 100644
--- a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
+++ b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
@@ -20,8 +20,7 @@
     }}</template>
     <template slot="content">
       <cv-form @submit.prevent="setTrustedProxies">
-        <!-- when editing, the node cannot be changed and it is already named in
-             the modal title -->
+        <!-- when editing, the node is fixed and already named in the modal title -->
         <NsComboBox
           v-if="!isEditing"
           v-model="selectedNodeId"
@@ -44,8 +43,7 @@
           :disabled="loading.setTrustedProxies"
           ref="proxies"
         />
-        <!-- cv-number-input has no tooltip slot: render the label separately,
-             following the same markup as NsTextInput -->
+        <!-- cv-number-input has no tooltip slot: label markup copied from NsTextInput -->
         <div class="label-with-tooltip">
           <span class="bx--label">
             {{ $t("settings_http_routes.trust_depth") }}
@@ -148,9 +146,7 @@ export default {
   },
   watch: {
     isWebsocketConnected: function (isConnected) {
-      // safety net: the modal already closes when the task is created, but if
-      // the request itself was cut off by the restart there would be nothing
-      // left to clear the pending state
+      // safety net: nothing else clears the pending state if the request was cut off
       if (isConnected && this.loading.setTrustedProxies) {
         this.loading.setTrustedProxies = false;
         this.$emit("hide");
@@ -199,8 +195,7 @@ export default {
 
       let isValidationOk = true;
 
-      // node: the field is only rendered when adding, so there is nothing to
-      // focus when editing
+      // the node field is only rendered when adding
 
       if (!this.isEditing && !this.selectedNodeId) {
         this.error.node = this.$t("common.required");
@@ -223,9 +218,7 @@ export default {
           isValidationOk = false;
         }
       } else {
-        // the traefik set-trusted-proxies action validates with
-        // ipaddress.ip_address(), so only bare IPv4 and IPv6 addresses are
-        // accepted: CIDR ranges are rejected by the backend
+        // set-trusted-proxies validates with ipaddress.ip_address(): no CIDR ranges
         const ipv4Pattern =
           /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
         const ipv6Pattern =
@@ -233,7 +226,6 @@ export default {
 
         for (const proxy of proxyList) {
           if (!ipv4Pattern.test(proxy) && !ipv6Pattern.test(proxy)) {
-            // determine if it looks like an IPv6 address
             const isIPv6Like = proxy.includes(":");
             this.error.proxies = this.$t(
               isIPv6Like
@@ -263,7 +255,7 @@ export default {
           isValidationOk = false;
         }
       } else if (!Number.isInteger(depth) || depth < 0) {
-        // the action input schema requires an integer with minimum 0
+        // the input schema requires an integer >= 0
         this.error.depth = this.$t("settings_http_routes.trust_depth_invalid");
 
         if (isValidationOk) {
@@ -278,7 +270,6 @@ export default {
       if (!this.validateSetTrustedProxies()) {
         return;
       }
-      // nodes carry the traefik instance id in their traefikInstance property
       const traefikInstanceId = this.selectedNode.traefikInstance;
       this.loading.setTrustedProxies = true;
       this.error.setTrustedProxies = "";
@@ -305,8 +296,7 @@ export default {
       const res = await to(
         this.createModuleTaskForApp(traefikInstanceId, {
           action: taskAction,
-          // always send both fields: omitting depth makes the backend reset it
-          // to 1
+          // always send depth: the backend resets it to 1 if omitted
           data: {
             proxies: this.getProxyList(),
             depth: Number(this.depth),
@@ -326,10 +316,7 @@ export default {
         this.loading.setTrustedProxies = false;
         return;
       }
-      // close as soon as the task is created, like the delete flow does: the
-      // action restarts Traefik, which carries this websocket, so the completion
-      // event cannot be delivered before the page reconnects. The task
-      // notification reports the outcome
+      // close now: the restart kills the websocket, so no completion event will arrive
       this.loading.setTrustedProxies = false;
       this.$emit("hide");
     },
@@ -341,9 +328,7 @@ export default {
     setTrustedProxiesValidationFailed(validationErrors) {
       this.loading.setTrustedProxies = false;
 
-      // the modal is already closed by the time the backend answers, so the
-      // task notification is what reports the failure: only fill the inline
-      // errors when it is still on screen
+      // the modal is usually closed by now: the task notification reports the failure
       if (!this.isShown) {
         return;
       }
@@ -380,8 +365,7 @@ export default {
   align-items: baseline;
 }
 
-// align the notifications with the form fields, which the global styles cap at
-// the same width
+// align with the form fields, capped at the same width globally
 .bx--inline-notification {
   max-width: 38rem;
 }
diff --git a/core/ui/src/views/settings/SettingsHttpRoutes.vue b/core/ui/src/views/settings/SettingsHttpRoutes.vue
index 57953300b..01058025f 100644
--- a/core/ui/src/views/settings/SettingsHttpRoutes.vue
+++ b/core/ui/src/views/settings/SettingsHttpRoutes.vue
@@ -464,10 +464,7 @@ export default {
   },
   watch: {
     isWebsocketConnected: function (isConnected) {
-      // Traefik serves the cluster admin UI and its websocket, so an action
-      // restarting it makes the task events of the running tasks unreachable:
-      // their counter would never come back to zero and the table would stay in
-      // its loading state. Read the routes again instead
+      // a Traefik restart kills this websocket: pending task events are lost, so read again
       if (isConnected) {
         this.loading.listRoutesNum = 0;
 
@@ -672,8 +669,7 @@ export default {
       }
     },
     decreaseListRoutesNum() {
-      // never go below zero: the reconnection watcher resets the counter, so a
-      // task event delivered after the reset must not unbalance it
+      // never go below zero: the reconnection watcher resets the counter
       this.loading.listRoutesNum = Math.max(0, this.loading.listRoutesNum - 1);
     },
     listRoutesAborted(taskResult, taskContext) {
@@ -714,8 +710,7 @@ export default {
         route.traefikInstance = traefikId;
         routes.push(route);
       }
-      // drop any previous route of this Traefik instance: a late task event or
-      // an overlapping reload must not duplicate them
+      // drop the previous routes of this instance: a late event must not duplicate them
       this.routes = this.routes
         .filter((route) => route.traefikInstance !== traefikId)
         .concat(routes)

From c2af19d9b6e40cd915c78494128c46a4dc561fc1 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 16:40:17 +0200
Subject: [PATCH 16/28] fix(ui): explain why the add frontend proxy button is
 disabled

The button was greyed out with no reason given once every node had a frontend
proxy, which is the normal state of a single node cluster. Wrap it in a tooltip
when there is nothing left to add, the same way the TLS certificates page does,
and keep it plain while the values are still loading. Shorten the comments of
this file too.
---
 core/ui/public/i18n/en/translation.json       |  1 +
 .../settings/HttpFrontendProxies.vue          | 61 +++++++++----------
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/core/ui/public/i18n/en/translation.json b/core/ui/public/i18n/en/translation.json
index c55e85dfc..4d8d62f1c 100644
--- a/core/ui/public/i18n/en/translation.json
+++ b/core/ui/public/i18n/en/translation.json
@@ -853,6 +853,7 @@
         "proxies": "Frontend proxies",
         "depth": "Trust depth",
         "add_frontend_proxy": "Add frontend proxy",
+        "add_frontend_proxy_disabled_message": "All cluster nodes already have a frontend proxy",
         "edit_frontend_proxy_node": "Edit frontend proxies of {node}",
         "delete_frontend_proxy_node": "Delete frontend proxies of {node}",
         "delete_frontend_proxy_description": "Delete the frontend proxies of {node}? The real client IP address won't be read from the X-Forwarded-For header anymore, and the trust depth will be reset to 0.",
diff --git a/core/ui/src/components/settings/HttpFrontendProxies.vue b/core/ui/src/components/settings/HttpFrontendProxies.vue
index 529d2f502..e610b1c0b 100644
--- a/core/ui/src/components/settings/HttpFrontendProxies.vue
+++ b/core/ui/src/components/settings/HttpFrontendProxies.vue
@@ -39,18 +39,34 @@
             </div>
           </cv-column>
         </cv-row>
-        <!-- when no proxy is configured at all, the button is shown inside the
-             empty state -->
+        <!-- with no proxy configured, the button lives in the empty state -->
         <cv-row v-if="proxyConfigs.length" class="toolbar">
           <cv-column>
             <NsButton
+              v-if="unconfiguredNodes.length || loadingProxies"
               kind="primary"
               :icon="Add20"
-              :disabled="loadingProxies || !unconfiguredNodes.length"
+              :disabled="loadingProxies"
               @click="showAddProxyModal"
               data-test-id="add-frontend-proxy"
               >{{ $t("settings_http_routes.add_frontend_proxy") }}
             </NsButton>
+            <cv-tooltip
+              v-else
+              alignment="start"
+              direction="top"
+              :tip="
+                $t('settings_http_routes.add_frontend_proxy_disabled_message')
+              "
+            >
+              <NsButton
+                kind="primary"
+                :icon="Add20"
+                disabled
+                data-test-id="add-frontend-proxy"
+                >{{ $t("settings_http_routes.add_frontend_proxy") }}
+              </NsButton>
+            </cv-tooltip>
           </cv-column>
         </cv-row>
         <cv-row>
@@ -123,9 +139,7 @@
                         <NsButton
                           kind="primary"
                           :icon="Add20"
-                          :disabled="
-                            loadingProxies || !unconfiguredNodes.length
-                          "
+                          :disabled="loadingProxies"
                           @click="showAddProxyModal"
                           data-test-id="add-frontend-proxy-empty-state"
                           >{{ $t("settings_http_routes.add_frontend_proxy") }}
@@ -255,8 +269,7 @@ export default {
   },
   mixins: [TaskService, UtilService, IconService],
   props: {
-    // cluster nodes, as built by the parent view: nodes running a traefik
-    // instance carry a traefikInstance property
+    // built by the parent view: nodes with a traefik instance carry traefikInstance
     nodes: {
       type: Array,
       required: true,
@@ -273,18 +286,13 @@ export default {
   data() {
     return {
       tablePage: [],
-      // raw column names must match row properties: they are used by
-      // NsDataTable for the default search and sort
+      // must match row properties: NsDataTable searches and sorts on them
       tableColumns: ["node", "proxies", "depth"],
       proxyConfigs: [],
-      // the filters are local on purpose: the parent view already binds
-      // q.selectedNodeId to the node filter of the Routes tab
+      // local on purpose: the parent binds q.selectedNodeId to the Routes tab filter
       filter: {
         text: "",
-        // empty until the user picks a node: setting the "all" sentinel here
-        // would paint the raw value, because NsComboBox resolves the label of a
-        // value only against the options available when it is set, and the node
-        // options are not loaded yet
+        // empty until picked: NsComboBox paints the raw value if the options are not loaded yet
         nodeId: "",
       },
       currentProxyConfig: null,
@@ -380,10 +388,7 @@ export default {
       this.getTrustedProxies();
     },
     isWebsocketConnected: function (isConnected) {
-      // set-trusted-proxies restarts Traefik, which serves the cluster admin UI
-      // and its websocket: the task events of the running get-trusted-proxies
-      // tasks are lost, so their counter would never come back to zero and the
-      // table would stay in its loading state. Read the values again instead
+      // a Traefik restart kills this websocket: pending task events are lost, so read again
       if (isConnected) {
         this.loading.getTrustedProxiesNum = 0;
         this.loading.deleteTrustedProxies = false;
@@ -467,8 +472,7 @@ export default {
       }
     },
     decreaseGetTrustedProxiesNum() {
-      // never go below zero: the reconnection watcher resets the counter, so a
-      // task event delivered after the reset must not unbalance it
+      // never go below zero: the reconnection watcher resets the counter
       this.loading.getTrustedProxiesNum = Math.max(
         0,
         this.loading.getTrustedProxiesNum - 1
@@ -485,12 +489,10 @@ export default {
       const traefikId = taskContext.extra.traefikInstance.id;
       const nodeId = taskContext.extra.traefikInstance.node;
       const nodeUiName = taskContext.extra.traefikInstance.node_ui_name;
-      // get-trusted-proxies builds the list from a set, so the order is not
-      // stable across calls: sort it to keep the display consistent
+      // get-trusted-proxies returns a Python set: sort for a stable display
       const proxies = (taskResult.output.proxies || []).sort();
 
-      // drop any previous row of this node: a late task event or an overlapping
-      // reload must not duplicate it
+      // drop the previous row of this node: a late event must not duplicate it
       this.proxyConfigs = this.proxyConfigs.filter(
         (proxyConfig) => proxyConfig.nodeId !== nodeId
       );
@@ -533,8 +535,7 @@ export default {
       const res = await to(
         this.createModuleTaskForApp(this.proxyConfigToDelete.traefikInstance, {
           action: taskAction,
-          // an empty proxy list clears the configuration: the backend also
-          // resets the trust depth to 0
+          // an empty list clears the configuration and resets the depth to 0
           data: {
             proxies: [],
             depth: 0,
@@ -566,7 +567,6 @@ export default {
     deleteTrustedProxiesCompleted() {
       this.loading.deleteTrustedProxies = false;
 
-      // reload frontend proxies
       this.getTrustedProxies();
     },
   },
@@ -576,8 +576,7 @@ export default {
 <style scoped lang="scss">
 @import "../../styles/carbon-utils";
 
-// the filter row is a flex container and Carbon makes these fields full width,
-// so they need an explicit cap to keep the design proportions
+// Carbon makes these full width: cap them to keep the design proportions
 .filter-field {
   max-width: 18rem;
   width: 100%;

From e8bb24c20c1c147ffa3e52ceee4de5c00c7372b5 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 17:01:57 +0200
Subject: [PATCH 17/28] fix(ui): match the trust depth font with the other
 fields

Carbon renders number inputs in monospace at 0.75rem, so the value looked much
smaller than the addresses right above it.
---
 .../components/settings/ConfigureFrontendProxyModal.vue   | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
index 78c3a1f60..7c5f4de6e 100644
--- a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
+++ b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
@@ -374,4 +374,12 @@ export default {
 .trust-depth {
   max-width: 15rem;
 }
+
+// Carbon renders number inputs in monospace 0.75rem: match the other fields
+.trust-depth ::v-deep input[type="number"] {
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.42857;
+  letter-spacing: 0.16px;
+}
 </style>

From 44c948d3c7f75808d859fa74201de77b4d6265ef Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 17:07:03 +0200
Subject: [PATCH 18/28] fix(ui): reset the node field when reopening the add
 modal

NsComboBox repaints its text only when the new value matches an option, so
clearing the value left the previously picked node on screen while the model was
already empty. Remount it when the modal opens for an addition. Hide the restart
warning until a node is picked, since it named an empty node.
---
 .../src/components/settings/ConfigureFrontendProxyModal.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
index 7c5f4de6e..0d6d43fec 100644
--- a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
+++ b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
@@ -21,8 +21,11 @@
     <template slot="content">
       <cv-form @submit.prevent="setTrustedProxies">
         <!-- when editing, the node is fixed and already named in the modal title -->
+        <!-- the key forces a remount: NsComboBox keeps its previous text when the
+             value is cleared, since it only repaints on a matching option -->
         <NsComboBox
           v-if="!isEditing"
+          :key="nodeComboBoxKey"
           v-model="selectedNodeId"
           :label="$t('settings_http_routes.choose_node')"
           :title="$t('common.node')"
@@ -71,6 +74,7 @@
           ref="depth"
         />
         <NsInlineNotification
+          v-if="selectedNodeLabel"
           kind="warning"
           :title="$t('settings_http_routes.traefik_will_be_restarted')"
           :description="
@@ -122,6 +126,7 @@ export default {
   data() {
     return {
       selectedNodeId: "",
+      nodeComboBoxKey: 0,
       proxies_str: "",
       depth: 1,
       loading: {
@@ -165,6 +170,7 @@ export default {
           this.selectedNodeId = "";
           this.proxies_str = "";
           this.depth = 1;
+          this.nodeComboBoxKey++;
         }
       }
     },

From 003b4fb61642556829ce99359e1b3891af8807d5 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 17:20:59 +0200
Subject: [PATCH 19/28] fix(ui): shorten the frontend proxy modal messages

Drop the trust depth reset from the delete confirmation: it is an implementation
detail, and a depth without any proxy means nothing. Tighten the restart warning
too.
---
 core/ui/public/i18n/en/translation.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/ui/public/i18n/en/translation.json b/core/ui/public/i18n/en/translation.json
index 4d8d62f1c..bf60ff4a7 100644
--- a/core/ui/public/i18n/en/translation.json
+++ b/core/ui/public/i18n/en/translation.json
@@ -856,7 +856,7 @@
         "add_frontend_proxy_disabled_message": "All cluster nodes already have a frontend proxy",
         "edit_frontend_proxy_node": "Edit frontend proxies of {node}",
         "delete_frontend_proxy_node": "Delete frontend proxies of {node}",
-        "delete_frontend_proxy_description": "Delete the frontend proxies of {node}? The real client IP address won't be read from the X-Forwarded-For header anymore, and the trust depth will be reset to 0.",
+        "delete_frontend_proxy_description": "Delete the frontend proxies of {node}? The real client IP won't be read from the X-Forwarded-For header anymore.",
         "no_frontend_proxy": "No frontend proxy configured",
         "no_frontend_proxy_description": "Add frontend proxy addresses to correctly identify client IPs behind reverse proxies or load balancers.",
         "filter_frontend_proxies": "Filter",
@@ -868,7 +868,7 @@
         "trust_depth_tooltip": "Number of frontend proxies between the client and Traefik. 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 whole number greater than or equal to 0",
         "bad_ip_address": "Invalid IP address. Enter one IPv4 or IPv6 address per line, without CIDR prefix",
-        "frontend_proxy_restart_message": "Traefik will briefly disconnect HTTP clients connected to {node}. If your session goes through this node, the page will reconnect automatically after a few seconds."
+        "frontend_proxy_restart_message": "HTTP clients connected to {node} will be briefly disconnected. If your session goes through this node, the page reconnects on its own."
     },
     "settings_tls_certificates": {
         "title": "TLS certificates",

From c1bc47008da67df90f47379962270082fcdec769 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Wed, 29 Jul 2026 13:30:00 +0200
Subject: [PATCH 20/28] fix: code review

---
 core/ui/public/i18n/en/translation.json       |   1 +
 .../settings/ConfigureFrontendProxyModal.vue  |  52 +++++---
 .../settings/HttpFrontendProxies.vue          | 118 ++++++++++++++----
 .../src/views/settings/SettingsHttpRoutes.vue |  37 ++++--
 4 files changed, 152 insertions(+), 56 deletions(-)

diff --git a/core/ui/public/i18n/en/translation.json b/core/ui/public/i18n/en/translation.json
index bf60ff4a7..dea07ecbb 100644
--- a/core/ui/public/i18n/en/translation.json
+++ b/core/ui/public/i18n/en/translation.json
@@ -854,6 +854,7 @@
         "depth": "Trust depth",
         "add_frontend_proxy": "Add frontend proxy",
         "add_frontend_proxy_disabled_message": "All cluster nodes already have a frontend proxy",
+        "add_frontend_proxy_no_node_message": "No cluster node with a Traefik instance is available",
         "edit_frontend_proxy_node": "Edit frontend proxies of {node}",
         "delete_frontend_proxy_node": "Delete frontend proxies of {node}",
         "delete_frontend_proxy_description": "Delete the frontend proxies of {node}? The real client IP won't be read from the X-Forwarded-For header anymore.",
diff --git a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
index 0d6d43fec..3e5bf8048 100644
--- a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
+++ b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
@@ -108,6 +108,15 @@ import to from "await-to-js";
 import { UtilService, TaskService } from "@nethserver/ns8-ui-lib";
 import { mapState } from "vuex";
 
+// set-trusted-proxies validates with ipaddress.ip_address(): no CIDR ranges, and
+// no leading-zero octets, which Python rejects since 3.9.5
+const IPV4_OCTET = "(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])";
+const IPV4 = `${IPV4_OCTET}(\\.${IPV4_OCTET}){3}`;
+const IPV4_PATTERN = new RegExp(`^${IPV4}$`);
+const IPV6_PATTERN = new RegExp(
+  `^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}${IPV4}|([0-9a-fA-F]{1,4}:){1,4}:${IPV4})$`
+);
+
 export default {
   name: "ConfigureFrontendProxyModal",
   mixins: [UtilService, TaskService],
@@ -202,8 +211,10 @@ export default {
       let isValidationOk = true;
 
       // the node field is only rendered when adding
+      // check selectedNode, not selectedNodeId: the parent drops nodes from the
+      // options as soon as they get a configuration, even while the modal is open
 
-      if (!this.isEditing && !this.selectedNodeId) {
+      if (!this.isEditing && !this.selectedNode) {
         this.error.node = this.$t("common.required");
 
         if (isValidationOk) {
@@ -224,14 +235,8 @@ export default {
           isValidationOk = false;
         }
       } else {
-        // set-trusted-proxies validates with ipaddress.ip_address(): no CIDR ranges
-        const ipv4Pattern =
-          /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
-        const ipv6Pattern =
-          /^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$/;
-
         for (const proxy of proxyList) {
-          if (!ipv4Pattern.test(proxy) && !ipv6Pattern.test(proxy)) {
+          if (!IPV4_PATTERN.test(proxy) && !IPV6_PATTERN.test(proxy)) {
             const isIPv6Like = proxy.includes(":");
             this.error.proxies = this.$t(
               isIPv6Like
@@ -253,7 +258,8 @@ export default {
 
       const depth = Number(this.depth);
 
-      if (this.depth === "" || this.depth === null) {
+      // cv-number-input emits NaN, not "", when a numeric value is cleared
+      if (this.depth === "" || this.depth === null || Number.isNaN(depth)) {
         this.error.depth = this.$t("common.required");
 
         if (isValidationOk) {
@@ -276,7 +282,10 @@ export default {
       if (!this.validateSetTrustedProxies()) {
         return;
       }
-      const traefikInstanceId = this.selectedNode.traefikInstance;
+      // when editing, the node combo box is not rendered: read the instance from the row
+      const traefikInstanceId = this.isEditing
+        ? this.proxyConfig.traefikInstance
+        : this.selectedNode.traefikInstance;
       this.loading.setTrustedProxies = true;
       this.error.setTrustedProxies = "";
       const taskAction = "set-trusted-proxies";
@@ -294,6 +303,11 @@ export default {
         this.setTrustedProxiesValidationFailed
       );
 
+      this.$root.$once(
+        `${taskAction}-validation-ok-${eventId}`,
+        this.setTrustedProxiesValidationOk
+      );
+
       this.$root.$once(
         `${taskAction}-completed-${eventId}`,
         this.setTrustedProxiesCompleted
@@ -322,22 +336,22 @@ export default {
         this.loading.setTrustedProxies = false;
         return;
       }
-      // close now: the restart kills the websocket, so no completion event will arrive
-      this.loading.setTrustedProxies = false;
-      this.$emit("hide");
+      // stay open until validation completes: closing now would hide the field errors
     },
     setTrustedProxiesAborted(taskResult, taskContext) {
       console.error(`${taskContext.action} aborted`, taskResult);
-      this.error.setTrustedProxies = this.$t("error.generic_error");
       this.loading.setTrustedProxies = false;
+
+      // an abort after validation is reported by the task notification
+      this.$emit("hide");
+    },
+    setTrustedProxiesValidationOk() {
+      // the restart kills the websocket, so no completion event will arrive
+      this.loading.setTrustedProxies = false;
+      this.$emit("hide");
     },
     setTrustedProxiesValidationFailed(validationErrors) {
       this.loading.setTrustedProxies = false;
-
-      // the modal is usually closed by now: the task notification reports the failure
-      if (!this.isShown) {
-        return;
-      }
       let focusAlreadySet = false;
 
       for (const validationError of validationErrors) {
diff --git a/core/ui/src/components/settings/HttpFrontendProxies.vue b/core/ui/src/components/settings/HttpFrontendProxies.vue
index e610b1c0b..e42fc30e3 100644
--- a/core/ui/src/components/settings/HttpFrontendProxies.vue
+++ b/core/ui/src/components/settings/HttpFrontendProxies.vue
@@ -71,6 +71,15 @@
         </cv-row>
         <cv-row>
           <cv-column>
+            <!-- NsDataTable replaces the rows with its error: report a partial
+                 failure here, so the nodes that did answer stay readable -->
+            <NsInlineNotification
+              v-if="tableError && proxyConfigs.length"
+              kind="error"
+              :title="tableErrorTitle"
+              :description="tableErrorDescription"
+              :showCloseButton="false"
+            />
             <NsDataTable
               :allRows="filteredProxyConfigs"
               :columns="i18nTableColumns"
@@ -85,9 +94,9 @@
               "
               :isLoading="loadingProxies"
               :skeletonRows="3"
-              :isErrorShown="!!error.getTrustedProxies"
-              :errorTitle="currentErrorAction"
-              :errorDescription="currentErrorDescription"
+              :isErrorShown="!!tableError && !proxyConfigs.length"
+              :errorTitle="tableErrorTitle"
+              :errorDescription="tableErrorDescription"
               :itemsPerPageLabel="$t('pagination.items_per_page')"
               :rangeOfTotalItemsLabel="$t('pagination.range_of_total_items')"
               :ofTotalPagesLabel="$t('pagination.of_total_pages')"
@@ -137,6 +146,7 @@
                           }}
                         </p>
                         <NsButton
+                          v-if="unconfiguredNodes.length || loadingProxies"
                           kind="primary"
                           :icon="Add20"
                           :disabled="loadingProxies"
@@ -144,6 +154,25 @@
                           data-test-id="add-frontend-proxy-empty-state"
                           >{{ $t("settings_http_routes.add_frontend_proxy") }}
                         </NsButton>
+                        <!-- no node to configure: the modal would open on an empty combo box -->
+                        <cv-tooltip
+                          v-else
+                          alignment="start"
+                          direction="top"
+                          :tip="
+                            $t(
+                              'settings_http_routes.add_frontend_proxy_no_node_message'
+                            )
+                          "
+                        >
+                          <NsButton
+                            kind="primary"
+                            :icon="Add20"
+                            disabled
+                            data-test-id="add-frontend-proxy-empty-state"
+                            >{{ $t("settings_http_routes.add_frontend_proxy") }}
+                          </NsButton>
+                        </cv-tooltip>
                       </div>
                     </template>
                   </NsEmptyState>
@@ -227,6 +256,7 @@
           name: proxyConfigToDelete ? proxyConfigToDelete.node : '',
         })
       "
+      :loading="loading.deleteTrustedProxies"
       :isErrorShown="!!error.deleteTrustedProxies"
       :errorTitle="$t('action.set-trusted-proxies')"
       :errorDescription="error.deleteTrustedProxies"
@@ -282,6 +312,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    // the instance lookup belongs to the parent: without it there is nothing to read
+    instancesError: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {
@@ -302,6 +337,9 @@ export default {
       isEditingProxy: false,
       currentErrorAction: "",
       currentErrorDescription: "",
+      // bumped on every read: the events of the previous one must be ignored
+      getTrustedProxiesRound: 0,
+      isFirstWebsocketConnection: true,
       loading: {
         getTrustedProxiesNum: 0,
         deleteTrustedProxies: false,
@@ -322,6 +360,17 @@ export default {
     loadingProxies() {
       return this.isLoadingInstances || this.loading.getTrustedProxiesNum > 0;
     },
+    tableError() {
+      return this.instancesError || this.error.getTrustedProxies;
+    },
+    tableErrorTitle() {
+      return this.instancesError
+        ? this.$t("action.list-installed-modules")
+        : this.currentErrorAction;
+    },
+    tableErrorDescription() {
+      return this.instancesError || this.currentErrorDescription;
+    },
     // only nodes running a traefik instance can be configured
     internalNodes() {
       return this.nodes.filter((node) => node.traefikInstance);
@@ -388,12 +437,22 @@ export default {
       this.getTrustedProxies();
     },
     isWebsocketConnected: function (isConnected) {
+      if (!isConnected) {
+        return;
+      }
+
+      // the initial connection is not a reconnection: created() already read
+      if (this.isFirstWebsocketConnection) {
+        this.isFirstWebsocketConnection = false;
+        return;
+      }
+
       // a Traefik restart kills this websocket: pending task events are lost, so read again
-      if (isConnected) {
-        this.loading.getTrustedProxiesNum = 0;
+      if (this.loading.deleteTrustedProxies) {
         this.loading.deleteTrustedProxies = false;
-        this.getTrustedProxies();
+        this.hideDeleteProxyModal();
       }
+      this.getTrustedProxies();
     },
   },
   created() {
@@ -404,7 +463,8 @@ export default {
   methods: {
     clearFilters() {
       this.filter.text = "";
-      this.filter.nodeId = "";
+      // "all", not "": NsComboBox only repaints its text on a matching option
+      this.filter.nodeId = "all";
     },
     showAddProxyModal() {
       this.isEditingProxy = false;
@@ -428,24 +488,29 @@ export default {
       this.isShownDeleteProxyModal = false;
     },
     async getTrustedProxies() {
+      const round = ++this.getTrustedProxiesRound;
       this.proxyConfigs = [];
       this.error.getTrustedProxies = "";
+      // count the whole batch upfront: the counter must not reach zero between
+      // two iterations, nor be decreased by the events of a previous round
+      this.loading.getTrustedProxiesNum = this.traefikInstances.length;
 
       for (const traefikInstance of this.traefikInstances) {
         const taskAction = "get-trusted-proxies";
         const eventId = this.getUuid();
-        this.loading.getTrustedProxiesNum++;
 
         // register to task events
 
         this.$root.$once(
           `${taskAction}-aborted-${eventId}`,
-          this.getTrustedProxiesAborted
+          (taskResult, taskContext) =>
+            this.getTrustedProxiesAborted(round, taskResult, taskContext)
         );
 
         this.$root.$once(
           `${taskAction}-completed-${eventId}`,
-          this.getTrustedProxiesCompleted
+          (taskContext, taskResult) =>
+            this.getTrustedProxiesCompleted(round, taskContext, taskResult)
         );
 
         const res = await to(
@@ -467,25 +532,25 @@ export default {
           this.error.getTrustedProxies = errMessage;
           this.currentErrorAction = this.$t("action." + taskAction);
           this.currentErrorDescription = errMessage;
-          this.decreaseGetTrustedProxiesNum();
+          this.loading.getTrustedProxiesNum--;
         }
       }
     },
-    decreaseGetTrustedProxiesNum() {
-      // never go below zero: the reconnection watcher resets the counter
-      this.loading.getTrustedProxiesNum = Math.max(
-        0,
-        this.loading.getTrustedProxiesNum - 1
-      );
-    },
-    getTrustedProxiesAborted(taskResult, taskContext) {
+    getTrustedProxiesAborted(round, taskResult, taskContext) {
       console.error(`${taskContext.action} aborted`, taskResult);
+
+      if (round !== this.getTrustedProxiesRound) {
+        return;
+      }
       this.error.getTrustedProxies = this.$t("error.generic_error");
       this.currentErrorAction = this.$t("action." + taskContext.action);
       this.currentErrorDescription = this.$t("error.generic_error");
-      this.decreaseGetTrustedProxiesNum();
+      this.loading.getTrustedProxiesNum--;
     },
-    getTrustedProxiesCompleted(taskContext, taskResult) {
+    getTrustedProxiesCompleted(round, taskContext, taskResult) {
+      if (round !== this.getTrustedProxiesRound) {
+        return;
+      }
       const traefikId = taskContext.extra.traefikInstance.id;
       const nodeId = taskContext.extra.traefikInstance.node;
       const nodeUiName = taskContext.extra.traefikInstance.node_ui_name;
@@ -512,7 +577,7 @@ export default {
         });
         this.proxyConfigs.sort(this.sortByProperty("node"));
       }
-      this.decreaseGetTrustedProxiesNum();
+      this.loading.getTrustedProxiesNum--;
     },
     async deleteTrustedProxies() {
       this.loading.deleteTrustedProxies = true;
@@ -557,16 +622,21 @@ export default {
         this.loading.deleteTrustedProxies = false;
         return;
       }
-      this.hideDeleteProxyModal();
+      // stay open until the task ends: closing now would hide an abort error.
+      // If the Traefik restart kills the websocket first, the reconnection
+      // watcher closes the modal and reads the configuration again.
     },
     deleteTrustedProxiesAborted(taskResult, taskContext) {
       console.error(`${taskContext.action} aborted`, taskResult);
       this.error.deleteTrustedProxies = this.$t("error.generic_error");
       this.loading.deleteTrustedProxies = false;
+
+      // the node may have been left untouched: show what it holds now
+      this.getTrustedProxies();
     },
     deleteTrustedProxiesCompleted() {
       this.loading.deleteTrustedProxies = false;
-
+      this.hideDeleteProxyModal();
       this.getTrustedProxies();
     },
   },
diff --git a/core/ui/src/views/settings/SettingsHttpRoutes.vue b/core/ui/src/views/settings/SettingsHttpRoutes.vue
index 01058025f..125babcef 100644
--- a/core/ui/src/views/settings/SettingsHttpRoutes.vue
+++ b/core/ui/src/views/settings/SettingsHttpRoutes.vue
@@ -275,6 +275,7 @@
                 :nodes="internalNodes"
                 :traefikInstances="traefikInstances"
                 :isLoadingInstances="loading.listInstalledModules"
+                :instancesError="error.listInstalledModules"
               />
             </cv-tab>
           </NsTabs>
@@ -360,6 +361,9 @@ import HttpFrontendProxies from "@/components/settings/HttpFrontendProxies.vue";
 import _cloneDeep from "lodash/cloneDeep";
 import WarningAltFilled16 from "@carbon/icons-vue/es/warning--alt--filled/16";
 
+// tab order: the view query param is the tab selector
+const VIEWS = ["routes", "frontend-proxies"];
+
 export default {
   name: "SettingsHttpRoutes",
   components: {
@@ -398,6 +402,7 @@ export default {
       currentRoute: null,
       routeToDelete: null,
       isEditingRoute: false,
+      isFirstWebsocketConnection: true,
       pendingCertificatesLogsPath: {},
       loading: {
         listInstalledModules: false,
@@ -464,15 +469,23 @@ export default {
   },
   watch: {
     isWebsocketConnected: function (isConnected) {
+      if (!isConnected) {
+        return;
+      }
+
+      // the initial connection is not a reconnection: created() already read
+      if (this.isFirstWebsocketConnection) {
+        this.isFirstWebsocketConnection = false;
+        return;
+      }
+
       // a Traefik restart kills this websocket: pending task events are lost, so read again
-      if (isConnected) {
-        this.loading.listRoutesNum = 0;
+      this.loading.listRoutesNum = 0;
 
-        if (this.traefikInstances.length) {
-          this.listRoutes();
-        } else {
-          this.listInstalledModules();
-        }
+      if (this.traefikInstances.length) {
+        this.listRoutes();
+      } else {
+        this.listInstalledModules();
       }
     },
   },
@@ -490,17 +503,15 @@ export default {
     this.listInstalledModules();
   },
   mounted() {
-    // if no view is set in query params, default to routes tab
-    if (!this.q.view) {
+    // the tabs have no default selection: an unknown view would leave them all closed
+    if (!VIEWS.includes(this.q.view)) {
       this.q.view = "routes";
     }
   },
   methods: {
     tabSelected(tabNum) {
-      if (tabNum == 0) {
-        this.q.view = "routes";
-      } else if (tabNum == 1) {
-        this.q.view = "frontend-proxies";
+      if (VIEWS[tabNum]) {
+        this.q.view = VIEWS[tabNum];
       }
     },
     showCreateRouteModal() {

From afb3293d2f933cc64db7014ac7ef6ae21ebd6fa9 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Wed, 29 Jul 2026 13:58:17 +0200
Subject: [PATCH 21/28] fix: websocket is not watched

---
 core/ui/src/components/settings/HttpFrontendProxies.vue | 5 ++++-
 core/ui/src/views/settings/SettingsHttpRoutes.vue       | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/core/ui/src/components/settings/HttpFrontendProxies.vue b/core/ui/src/components/settings/HttpFrontendProxies.vue
index e42fc30e3..31516e939 100644
--- a/core/ui/src/components/settings/HttpFrontendProxies.vue
+++ b/core/ui/src/components/settings/HttpFrontendProxies.vue
@@ -441,7 +441,7 @@ export default {
         return;
       }
 
-      // the initial connection is not a reconnection: created() already read
+      // the connection that follows the mount is not a reconnection: created() already read
       if (this.isFirstWebsocketConnection) {
         this.isFirstWebsocketConnection = false;
         return;
@@ -456,6 +456,9 @@ export default {
     },
   },
   created() {
+    // when the websocket is already up, the next connection is a reconnection
+    this.isFirstWebsocketConnection = !this.isWebsocketConnected;
+
     if (this.traefikInstances.length) {
       this.getTrustedProxies();
     }
diff --git a/core/ui/src/views/settings/SettingsHttpRoutes.vue b/core/ui/src/views/settings/SettingsHttpRoutes.vue
index 125babcef..50a54b7b5 100644
--- a/core/ui/src/views/settings/SettingsHttpRoutes.vue
+++ b/core/ui/src/views/settings/SettingsHttpRoutes.vue
@@ -473,7 +473,7 @@ export default {
         return;
       }
 
-      // the initial connection is not a reconnection: created() already read
+      // the connection that follows the mount is not a reconnection: created() already read
       if (this.isFirstWebsocketConnection) {
         this.isFirstWebsocketConnection = false;
         return;
@@ -500,6 +500,8 @@ export default {
     next();
   },
   created() {
+    // when the websocket is already up, the next connection is a reconnection
+    this.isFirstWebsocketConnection = !this.isWebsocketConnected;
     this.listInstalledModules();
   },
   mounted() {

From e93cf9e24a799e8579bb6e58a5e9f94fae833405 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Wed, 29 Jul 2026 14:30:32 +0200
Subject: [PATCH 22/28] fix(ui): drop stale task events instead of clamping
 loading counters

The read counters were clamped with Math.max(0, n - 1) because a batch
started on websocket reconnection ran while the events of the previous
one were still arriving, and the surplus decrements could clear the
loading state with an empty table.

Tear the $root listeners down at the start of each read and on destroy,
count the whole batch upfront and drop the clamps. This also stops a
handler from running on a destroyed component.

The first-connection guard is gone: it assumed the socket came up after
the mount, but it is already connected when the page is opened, so the
reconnection that follows a Traefik restart was swallowed and the tables
stayed on their skeleton rows. A duplicated read on a cold load is
harmless now that stale events cannot unbalance a counter.

Release two loading states that stayed true for good: the
list-installed-modules error branch, and the routes counter when the
chain is aborted before it starts.
---
 .../settings/HttpFrontendProxies.vue          | 83 ++++++++++---------
 .../src/views/settings/SettingsHttpRoutes.vue | 77 ++++++++++-------
 2 files changed, 89 insertions(+), 71 deletions(-)

diff --git a/core/ui/src/components/settings/HttpFrontendProxies.vue b/core/ui/src/components/settings/HttpFrontendProxies.vue
index 31516e939..7fe46a3b6 100644
--- a/core/ui/src/components/settings/HttpFrontendProxies.vue
+++ b/core/ui/src/components/settings/HttpFrontendProxies.vue
@@ -337,9 +337,9 @@ export default {
       isEditingProxy: false,
       currentErrorAction: "",
       currentErrorDescription: "",
-      // bumped on every read: the events of the previous one must be ignored
-      getTrustedProxiesRound: 0,
-      isFirstWebsocketConnection: true,
+      // [eventName, handler] pairs registered on $root
+      readListeners: [],
+      deleteListeners: [],
       loading: {
         getTrustedProxiesNum: 0,
         deleteTrustedProxies: false,
@@ -433,37 +433,45 @@ export default {
     },
   },
   watch: {
+    // the parent republishes the instances after a Traefik restart killed the
+    // websocket, which is also how this table recovers
     traefikInstances: function () {
       this.getTrustedProxies();
     },
     isWebsocketConnected: function (isConnected) {
-      if (!isConnected) {
-        return;
-      }
-
-      // the connection that follows the mount is not a reconnection: created() already read
-      if (this.isFirstWebsocketConnection) {
-        this.isFirstWebsocketConnection = false;
-        return;
-      }
-
-      // a Traefik restart kills this websocket: pending task events are lost, so read again
-      if (this.loading.deleteTrustedProxies) {
+      // safety net: nothing else clears the pending state if the request was cut off
+      if (isConnected && this.loading.deleteTrustedProxies) {
         this.loading.deleteTrustedProxies = false;
         this.hideDeleteProxyModal();
       }
-      this.getTrustedProxies();
     },
   },
   created() {
-    // when the websocket is already up, the next connection is a reconnection
-    this.isFirstWebsocketConnection = !this.isWebsocketConnected;
-
     if (this.traefikInstances.length) {
       this.getTrustedProxies();
     }
   },
+  beforeDestroy() {
+    // a task completing after destroy would run a handler on a dead instance
+    this.clearListeners(this.readListeners);
+    this.clearListeners(this.deleteListeners);
+  },
   methods: {
+    registerListener(listeners, eventName, handler) {
+      this.$root.$once(eventName, handler);
+      listeners.push([eventName, handler]);
+    },
+    clearListeners(listeners) {
+      listeners.forEach(([eventName, handler]) => {
+        this.$root.$off(eventName, handler);
+      });
+      listeners.splice(0);
+    },
+    clearTableError() {
+      this.error.getTrustedProxies = "";
+      this.currentErrorAction = "";
+      this.currentErrorDescription = "";
+    },
     clearFilters() {
       this.filter.text = "";
       // "all", not "": NsComboBox only repaints its text on a matching option
@@ -491,11 +499,13 @@ export default {
       this.isShownDeleteProxyModal = false;
     },
     async getTrustedProxies() {
-      const round = ++this.getTrustedProxiesRound;
+      // a handler of a previous round would decrement the counter of this one
+      this.clearListeners(this.readListeners);
       this.proxyConfigs = [];
-      this.error.getTrustedProxies = "";
+      // otherwise a transient error sticks after the nodes answer again
+      this.clearTableError();
       // count the whole batch upfront: the counter must not reach zero between
-      // two iterations, nor be decreased by the events of a previous round
+      // two iterations
       this.loading.getTrustedProxiesNum = this.traefikInstances.length;
 
       for (const traefikInstance of this.traefikInstances) {
@@ -504,16 +514,16 @@ export default {
 
         // register to task events
 
-        this.$root.$once(
+        this.registerListener(
+          this.readListeners,
           `${taskAction}-aborted-${eventId}`,
-          (taskResult, taskContext) =>
-            this.getTrustedProxiesAborted(round, taskResult, taskContext)
+          this.getTrustedProxiesAborted
         );
 
-        this.$root.$once(
+        this.registerListener(
+          this.readListeners,
           `${taskAction}-completed-${eventId}`,
-          (taskContext, taskResult) =>
-            this.getTrustedProxiesCompleted(round, taskContext, taskResult)
+          this.getTrustedProxiesCompleted
         );
 
         const res = await to(
@@ -539,21 +549,14 @@ export default {
         }
       }
     },
-    getTrustedProxiesAborted(round, taskResult, taskContext) {
+    getTrustedProxiesAborted(taskResult, taskContext) {
       console.error(`${taskContext.action} aborted`, taskResult);
-
-      if (round !== this.getTrustedProxiesRound) {
-        return;
-      }
       this.error.getTrustedProxies = this.$t("error.generic_error");
       this.currentErrorAction = this.$t("action." + taskContext.action);
       this.currentErrorDescription = this.$t("error.generic_error");
       this.loading.getTrustedProxiesNum--;
     },
-    getTrustedProxiesCompleted(round, taskContext, taskResult) {
-      if (round !== this.getTrustedProxiesRound) {
-        return;
-      }
+    getTrustedProxiesCompleted(taskContext, taskResult) {
       const traefikId = taskContext.extra.traefikInstance.id;
       const nodeId = taskContext.extra.traefikInstance.node;
       const nodeUiName = taskContext.extra.traefikInstance.node_ui_name;
@@ -590,12 +593,14 @@ export default {
 
       // register to task events
 
-      this.$root.$once(
+      this.registerListener(
+        this.deleteListeners,
         `${taskAction}-aborted-${eventId}`,
         this.deleteTrustedProxiesAborted
       );
 
-      this.$root.$once(
+      this.registerListener(
+        this.deleteListeners,
         `${taskAction}-completed-${eventId}`,
         this.deleteTrustedProxiesCompleted
       );
diff --git a/core/ui/src/views/settings/SettingsHttpRoutes.vue b/core/ui/src/views/settings/SettingsHttpRoutes.vue
index 50a54b7b5..7aa60ebf4 100644
--- a/core/ui/src/views/settings/SettingsHttpRoutes.vue
+++ b/core/ui/src/views/settings/SettingsHttpRoutes.vue
@@ -402,7 +402,8 @@ export default {
       currentRoute: null,
       routeToDelete: null,
       isEditingRoute: false,
-      isFirstWebsocketConnection: true,
+      // [eventName, handler] pairs registered on $root for the read chain
+      readListeners: [],
       pendingCertificatesLogsPath: {},
       loading: {
         listInstalledModules: false,
@@ -469,22 +470,10 @@ export default {
   },
   watch: {
     isWebsocketConnected: function (isConnected) {
-      if (!isConnected) {
-        return;
-      }
-
-      // the connection that follows the mount is not a reconnection: created() already read
-      if (this.isFirstWebsocketConnection) {
-        this.isFirstWebsocketConnection = false;
-        return;
-      }
-
-      // a Traefik restart kills this websocket: pending task events are lost, so read again
-      this.loading.listRoutesNum = 0;
-
-      if (this.traefikInstances.length) {
-        this.listRoutes();
-      } else {
+      // a Traefik restart kills this websocket: pending task events are lost.
+      // Always restart from the instance list, it chains everything else and
+      // republishes traefikInstances for the frontend proxies tab
+      if (isConnected) {
         this.listInstalledModules();
       }
     },
@@ -500,10 +489,12 @@ export default {
     next();
   },
   created() {
-    // when the websocket is already up, the next connection is a reconnection
-    this.isFirstWebsocketConnection = !this.isWebsocketConnected;
     this.listInstalledModules();
   },
+  beforeDestroy() {
+    // a task completing after destroy would re-fire the whole read chain
+    this.clearListeners(this.readListeners);
+  },
   mounted() {
     // the tabs have no default selection: an unknown view would leave them all closed
     if (!VIEWS.includes(this.q.view)) {
@@ -542,19 +533,34 @@ export default {
     hideDeleteRouteModal() {
       this.isShownDeleteRouteModal = false;
     },
+    registerListener(listeners, eventName, handler) {
+      this.$root.$once(eventName, handler);
+      listeners.push([eventName, handler]);
+    },
+    clearListeners(listeners) {
+      listeners.forEach(([eventName, handler]) => {
+        this.$root.$off(eventName, handler);
+      });
+      listeners.splice(0);
+    },
     async listInstalledModules() {
+      // a handler of a previous chain would decrement the counter of this one
+      this.clearListeners(this.readListeners);
       this.loading.listInstalledModules = true;
+      this.error.listInstalledModules = "";
       const taskAction = "list-installed-modules";
       const eventId = this.getUuid();
 
       // register to task error
-      this.$root.$once(
+      this.registerListener(
+        this.readListeners,
         `${taskAction}-aborted-${eventId}`,
         this.listInstalledModulesAborted
       );
 
       // register to task completion
-      this.$root.$once(
+      this.registerListener(
+        this.readListeners,
         `${taskAction}-completed-${eventId}`,
         this.listInstalledModulesCompleted
       );
@@ -575,7 +581,8 @@ export default {
         this.error.listInstalledModules = errMessage;
         this.currentErrorAction = this.$t("action." + taskAction);
         this.currentErrorDescription = errMessage;
-        return;
+        // otherwise the tables keep their skeleton rows for good
+        this.loading.listInstalledModules = false;
       }
     },
     listInstalledModulesAborted(taskResult, taskContext) {
@@ -584,6 +591,8 @@ export default {
       this.currentErrorAction = this.$t("action." + taskContext.action);
       this.currentErrorDescription = this.$t("error.generic_error");
       this.loading.listInstalledModules = false;
+      // the routes chain will not run: release its skeleton rows
+      this.loading.listRoutesNum = 0;
     },
     listInstalledModulesCompleted(taskContext, taskResult) {
       // init nodes
@@ -637,20 +646,28 @@ export default {
     },
     async listRoutes() {
       this.routes = [];
+      // otherwise a transient error sticks after the nodes answer again
+      this.error.listRoutes = "";
+      this.currentErrorAction = "";
+      this.currentErrorDescription = "";
+      // count the whole batch upfront: the counter must not reach zero between
+      // two iterations
+      this.loading.listRoutesNum = this.traefikInstances.length;
 
       for (const traefikInstance of this.traefikInstances) {
         const taskAction = "list-routes";
         const eventId = this.getUuid();
-        this.loading.listRoutesNum++;
 
         // register to task events
 
-        this.$root.$once(
+        this.registerListener(
+          this.readListeners,
           `${taskAction}-aborted-${eventId}`,
           this.listRoutesAborted
         );
 
-        this.$root.$once(
+        this.registerListener(
+          this.readListeners,
           `${taskAction}-completed-${eventId}`,
           this.listRoutesCompleted
         );
@@ -677,20 +694,16 @@ export default {
           this.error.listRoutes = errMessage;
           this.currentErrorAction = this.$t("action." + taskAction);
           this.currentErrorDescription = errMessage;
-          this.decreaseListRoutesNum();
+          this.loading.listRoutesNum--;
         }
       }
     },
-    decreaseListRoutesNum() {
-      // never go below zero: the reconnection watcher resets the counter
-      this.loading.listRoutesNum = Math.max(0, this.loading.listRoutesNum - 1);
-    },
     listRoutesAborted(taskResult, taskContext) {
       console.error(`${taskContext.action} aborted`, taskResult);
       this.error.listRoutes = this.$t("error.generic_error");
       this.currentErrorAction = this.$t("action." + taskContext.action);
       this.currentErrorDescription = this.$t("error.generic_error");
-      this.decreaseListRoutesNum();
+      this.loading.listRoutesNum--;
     },
     listRoutesCompleted(taskContext, taskResult) {
       const routes = [];
@@ -728,7 +741,7 @@ export default {
         .filter((route) => route.traefikInstance !== traefikId)
         .concat(routes)
         .sort(this.sortByProperty("name"));
-      this.decreaseListRoutesNum();
+      this.loading.listRoutesNum--;
 
       // compute logs path for pending certificates
 

From 8a52a5d481b523423f23c2d6f3ae81c08381c82f Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Wed, 29 Jul 2026 14:31:02 +0200
Subject: [PATCH 23/28] fix(ui): fill the node filter when the cluster nodes
 land late

internalNodes was built once, inside listInstalledModulesCompleted, from
the vuex clusterNodes. App.vue fills that state through get-cluster-status,
which on a page reload usually answers after list-installed-modules: the
list came out empty and both the node filter and the modal combo box had
nothing to offer, while the table rows kept showing because they are built
from the get-trusted-proxies output instead.

Make it a computed of clusterNodes and traefikInstances so it no longer
depends on which task answers first, and move the combo box repaint to a
watcher that runs when the options actually exist.
---
 .../src/views/settings/SettingsHttpRoutes.vue | 81 ++++++++++---------
 1 file changed, 44 insertions(+), 37 deletions(-)

diff --git a/core/ui/src/views/settings/SettingsHttpRoutes.vue b/core/ui/src/views/settings/SettingsHttpRoutes.vue
index 7aa60ebf4..86487edf3 100644
--- a/core/ui/src/views/settings/SettingsHttpRoutes.vue
+++ b/core/ui/src/views/settings/SettingsHttpRoutes.vue
@@ -392,7 +392,6 @@ export default {
       tablePage: [],
       tableColumns: ["route", "name", "type", "node", "attributes"],
       routes: [],
-      internalNodes: [],
       isShownCreateOrEditRouteModal: false,
       isShownRouteDetailModal: false,
       isShownDeleteRouteModal: false,
@@ -452,6 +451,27 @@ export default {
       }
       return "";
     },
+    // clusterNodes can land after list-installed-modules, on a page reload it
+    // usually does: recompute the list instead of snapshotting it once
+    internalNodes() {
+      return this.clusterNodes.map((node) => {
+        const nodeId = node.id.toString();
+        const traefikInstance = this.traefikInstances.find(
+          (instance) => instance.node === nodeId
+        );
+        const internalNode = {
+          name: nodeId,
+          label: this.getShortNodeLabel(node),
+          value: nodeId,
+        };
+
+        if (traefikInstance) {
+          internalNode.label += ` (${traefikInstance.id})`;
+          internalNode.traefikInstance = traefikInstance.id;
+        }
+        return internalNode;
+      });
+    },
     nodesForFilter() {
       if (!this.internalNodes.length) {
         return [];
@@ -469,6 +489,13 @@ export default {
     },
   },
   watch: {
+    // the filter has no option to select until both clusterNodes and the
+    // instances landed, in either order
+    internalNodes: function (internalNodes) {
+      if (internalNodes.length) {
+        this.repaintNodeFilter();
+      }
+    },
     isWebsocketConnected: function (isConnected) {
       // a Traefik restart kills this websocket: pending task events are lost.
       // Always restart from the instance list, it chains everything else and
@@ -533,6 +560,22 @@ export default {
     hideDeleteRouteModal() {
       this.isShownDeleteRouteModal = false;
     },
+    repaintNodeFilter() {
+      this.$nextTick(() => {
+        if (!this.q.selectedNodeId) {
+          // initially show all nodes
+          this.q.selectedNodeId = "all";
+          return;
+        }
+        const nodeId = this.q.selectedNodeId;
+
+        // cv-combo-box only repaints its text when the value changes
+        this.q.selectedNodeId = "";
+        this.$nextTick(() => {
+          this.q.selectedNodeId = nodeId;
+        });
+      });
+    },
     registerListener(listeners, eventName, handler) {
       this.$root.$once(eventName, handler);
       listeners.push([eventName, handler]);
@@ -595,53 +638,17 @@ export default {
       this.loading.listRoutesNum = 0;
     },
     listInstalledModulesCompleted(taskContext, taskResult) {
-      // init nodes
-      let nodes = [];
-
-      for (let node of this.clusterNodes) {
-        nodes.push({
-          name: node.id.toString(),
-          label: this.getShortNodeLabel(node),
-          value: node.id.toString(),
-        });
-      }
-
       let traefikInstances = [];
 
       for (let instanceList of Object.values(taskResult.output)) {
         for (let instance of instanceList) {
           if (instance.id.startsWith("traefik")) {
             traefikInstances.push(instance);
-
-            // update nodes labels
-            const node = nodes.find((node) => node.value === instance.node);
-
-            if (node) {
-              node.label += ` (${instance.id})`;
-              node.traefikInstance = instance.id;
-            }
           }
         }
       }
-      this.internalNodes = nodes;
       this.traefikInstances = traefikInstances;
       this.loading.listInstalledModules = false;
-
-      this.$nextTick(() => {
-        if (!this.q.selectedNodeId) {
-          // initially show all nodes
-          this.q.selectedNodeId = "all";
-        } else {
-          const nodeId = this.q.selectedNodeId;
-
-          // workaround to update combo box
-          this.q.selectedNodeId = "";
-          this.$nextTick(() => {
-            this.q.selectedNodeId = nodeId;
-          });
-        }
-      });
-
       this.listRoutes();
     },
     async listRoutes() {

From 753c7aa2452ee95fe836e288eadc991c8131c60a Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Wed, 29 Jul 2026 14:48:34 +0200
Subject: [PATCH 24/28] fix(ui): paint the frontend proxies node filter on load

NsComboBox fills its input from the options only when its value changes:
the options watcher calls updateOptions(), which never recomputes the text
from the current value. The filter started on an empty value, which matches
no option, so the box kept its placeholder while the table behaved as if
"Any node" were selected.

Re-set the value once the options exist, the workaround the TLS
certificates page already uses on its own node filter.
---
 .../settings/HttpFrontendProxies.vue           | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/core/ui/src/components/settings/HttpFrontendProxies.vue b/core/ui/src/components/settings/HttpFrontendProxies.vue
index 7fe46a3b6..6b01fb8cc 100644
--- a/core/ui/src/components/settings/HttpFrontendProxies.vue
+++ b/core/ui/src/components/settings/HttpFrontendProxies.vue
@@ -327,7 +327,7 @@ export default {
       // local on purpose: the parent binds q.selectedNodeId to the Routes tab filter
       filter: {
         text: "",
-        // empty until picked: NsComboBox paints the raw value if the options are not loaded yet
+        // set to the "all" sentinel by repaintNodeFilter(), once the options exist
         nodeId: "",
       },
       currentProxyConfig: null,
@@ -433,6 +433,13 @@ export default {
     },
   },
   watch: {
+    // NsComboBox paints its text from the options only when the value changes,
+    // and the parent publishes the nodes well after this component is created
+    nodesForFilter: function (nodesForFilter) {
+      if (nodesForFilter.length) {
+        this.repaintNodeFilter();
+      }
+    },
     // the parent republishes the instances after a Traefik restart killed the
     // websocket, which is also how this table recovers
     traefikInstances: function () {
@@ -477,6 +484,15 @@ export default {
       // "all", not "": NsComboBox only repaints its text on a matching option
       this.filter.nodeId = "all";
     },
+    repaintNodeFilter() {
+      const nodeId = this.filter.nodeId || "all";
+
+      // the value has to change for NsComboBox to read the options again
+      this.filter.nodeId = "";
+      this.$nextTick(() => {
+        this.filter.nodeId = nodeId;
+      });
+    },
     showAddProxyModal() {
       this.isEditingProxy = false;
       this.currentProxyConfig = null;

From 0e92c33511e79c233e2ebf0b24b66ecd98fa2e9a Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Wed, 29 Jul 2026 16:31:06 +0200
Subject: [PATCH 25/28] style(ui): make the frontend proxies textarea taller

---
 core/ui/src/components/settings/ConfigureFrontendProxyModal.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
index 3e5bf8048..3f09a6b52 100644
--- a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
+++ b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
@@ -44,6 +44,7 @@
           :helper-text="$t('settings_http_routes.frontend_proxies_helper')"
           :invalid-message="error.proxies"
           :disabled="loading.setTrustedProxies"
+          rows="4"
           ref="proxies"
         />
         <!-- cv-number-input has no tooltip slot: label markup copied from NsTextInput -->

From 631a9ebf778874642a23d43676f476f00d6f119c Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Wed, 29 Jul 2026 17:23:42 +0200
Subject: [PATCH 26/28] fix(ui): stop capping the frontend proxies tab on wide
 screens

Carbon gives .bx--grid a max-width of 99rem plus auto margins at its
largest breakpoint, so past 1584px the grid nested in the tab panel was
capped and recentered: the filters, the button and the table all sat well
inside the tile. Nothing shows below that width, which is why a 27" looks
right and a 32" does not.
---
 core/ui/src/components/settings/HttpFrontendProxies.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/core/ui/src/components/settings/HttpFrontendProxies.vue b/core/ui/src/components/settings/HttpFrontendProxies.vue
index 6b01fb8cc..8bb4e6019 100644
--- a/core/ui/src/components/settings/HttpFrontendProxies.vue
+++ b/core/ui/src/components/settings/HttpFrontendProxies.vue
@@ -5,7 +5,8 @@
 <template>
   <div>
     <cv-tile light>
-      <cv-grid class="no-padding">
+      <!-- fullWidth: without it Carbon caps the grid at 99rem and centers it -->
+      <cv-grid fullWidth class="no-padding">
         <cv-row>
           <cv-column>
             <div class="data-table-filters">

From 0375d2c43538f752edec4a4539093cbb9784b244 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Wed, 29 Jul 2026 17:23:42 +0200
Subject: [PATCH 27/28] fix(ui): stop capping the routes tab on wide screens

Same missing fullWidth as the frontend proxies tab, on the grid nested in
the routes tab panel. This one predates the tabs, the grid was already
nested in the tile.
---
 core/ui/src/views/settings/SettingsHttpRoutes.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/core/ui/src/views/settings/SettingsHttpRoutes.vue b/core/ui/src/views/settings/SettingsHttpRoutes.vue
index 86487edf3..db2f3ce4a 100644
--- a/core/ui/src/views/settings/SettingsHttpRoutes.vue
+++ b/core/ui/src/views/settings/SettingsHttpRoutes.vue
@@ -72,7 +72,8 @@
               :selected="q.view === 'routes'"
             >
               <cv-tile light>
-                <cv-grid class="no-padding">
+                <!-- fullWidth: without it Carbon caps the grid at 99rem and centers it -->
+                <cv-grid fullWidth class="no-padding">
                   <cv-row>
                     <cv-column :md="4">
                       <cv-combo-box

From 38f3db0314db722c7f9f46a04402a711b1d930b7 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Thu, 30 Jul 2026 14:35:32 +0200
Subject: [PATCH 28/28] chore(ui): use NetworkPictogram from ns8-ui-lib

The pictogram now ships in ns8-ui-lib 2.0.1, so drop the local copy and
let the global registration provide it.
---
 core/ui/package.json                          |  2 +-
 core/ui/src/components/NetworkPictogram.vue   | 21 -------------------
 .../settings/HttpFrontendProxies.vue          |  2 --
 core/ui/yarn.lock                             | 10 ++++-----
 4 files changed, 6 insertions(+), 29 deletions(-)
 delete mode 100644 core/ui/src/components/NetworkPictogram.vue

diff --git a/core/ui/package.json b/core/ui/package.json
index 71f901a85..215791a80 100644
--- a/core/ui/package.json
+++ b/core/ui/package.json
@@ -16,7 +16,7 @@
     "@carbon/icons-vue": "^10.37.0",
     "@carbon/themes": "^10.34.0",
     "@carbon/vue": "^2.40.0",
-    "@nethserver/ns8-ui-lib": "^1.12.4",
+    "@nethserver/ns8-ui-lib": "^2.0.1",
     "await-to-js": "^3.0.0",
     "axios": "^0.33.0",
     "carbon-components": "^10.41.0",
diff --git a/core/ui/src/components/NetworkPictogram.vue b/core/ui/src/components/NetworkPictogram.vue
deleted file mode 100644
index 8509bdf26..000000000
--- a/core/ui/src/components/NetworkPictogram.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright (C) 2026 Nethesis S.r.l.
-  SPDX-License-Identifier: GPL-3.0-or-later
--->
-<!-- Subpaths of the Carbon "network--3" icon: NsPictogram provides the svg wrapper -->
-<template>
-  <path
-    id="network--3"
-    d="M30,30H22V22h8Zm-6-2h4V24H24Z
-	M20,27H8A6,6,0,0,1,8,15h2v2H8a4,4,0,0,0,0,8H20Z
-	M20,20H12V12h8Zm-6-2h4V14H14Z
-	M24,17H22V15h2a4,4,0,0,0,0-8H12V5H24a6,6,0,0,1,0,12Z
-	M10,10H2V2h8ZM4,8H8V4H4Z"
-  />
-</template>
-
-<script>
-export default {
-  name: "NetworkPictogram",
-};
-</script>
diff --git a/core/ui/src/components/settings/HttpFrontendProxies.vue b/core/ui/src/components/settings/HttpFrontendProxies.vue
index 8bb4e6019..633b86f71 100644
--- a/core/ui/src/components/settings/HttpFrontendProxies.vue
+++ b/core/ui/src/components/settings/HttpFrontendProxies.vue
@@ -290,13 +290,11 @@ import { UtilService, TaskService, IconService } from "@nethserver/ns8-ui-lib";
 import _cloneDeep from "lodash/cloneDeep";
 import { mapState } from "vuex";
 import ConfigureFrontendProxyModal from "@/components/settings/ConfigureFrontendProxyModal.vue";
-import NetworkPictogram from "@/components/NetworkPictogram.vue";
 
 export default {
   name: "HttpFrontendProxies",
   components: {
     ConfigureFrontendProxyModal,
-    NetworkPictogram,
   },
   mixins: [TaskService, UtilService, IconService],
   props: {
diff --git a/core/ui/yarn.lock b/core/ui/yarn.lock
index fae5d8163..169a8b507 100644
--- a/core/ui/yarn.lock
+++ b/core/ui/yarn.lock
@@ -3289,9 +3289,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nethserver/ns8-ui-lib@npm:^1.12.4":
-  version: 1.12.4
-  resolution: "@nethserver/ns8-ui-lib@npm:1.12.4"
+"@nethserver/ns8-ui-lib@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "@nethserver/ns8-ui-lib@npm:2.0.1"
   dependencies:
     "@rollup/plugin-json": ^4.1.0
     core-js: ^3.15.2
@@ -3300,7 +3300,7 @@ __metadata:
     vue-date-fns: ^2.0.1
   peerDependencies:
     vue: ^2.6.12
-  checksum: 319c09ec851a7391c49da77f1849d09a40da199349e5d797d1dd6d09b688a316f6bcc4cacd0018dc7a2348ccda9f155bf25ceb981720e854dde85490f8c28257
+  checksum: 1f87dc7ae9994d8c2ebe6348714f900f39096975be4f24af10b2adfa1c84e53b8782ae379d3c71b19873361d46a1f426cb8db23f7d69ae749059f3db138520a6
   languageName: node
   linkType: hard
 
@@ -14771,7 +14771,7 @@ __metadata:
     "@carbon/icons-vue": ^10.37.0
     "@carbon/themes": ^10.34.0
     "@carbon/vue": ^2.40.0
-    "@nethserver/ns8-ui-lib": ^1.12.4
+    "@nethserver/ns8-ui-lib": ^2.0.1
     "@storybook/addon-actions": ^6.2.9
     "@storybook/addon-essentials": ^6.2.9
     "@storybook/addon-links": ^6.2.9