From 950df002675d30081db9a3bd5d1a9e2cf44cb63d Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 10:30:11 +0200
Subject: [PATCH 1/8] refactor(ui): merge ACME servers view into TLS
 certificates tabs

Replace the top-right navigation button with two tabs, Certificates and
ACME settings, on the TLS certificates page. The ACME servers page becomes
a child component of that page and its route redirects to the new tab.

Reorder the settings table columns so that the node comes first, and rename
the section to "ACME settings".

The certificates table is only re-indented, its content is unchanged.
---
 core/ui/public/i18n/en/translation.json       |  13 +-
 .../src/components/settings/AcmeSettings.vue  | 315 +++++++
 core/ui/src/router/index.js                   |  10 +-
 .../views/settings/SettingsAcmeServers.vue    | 396 --------
 .../settings/SettingsTlsCertificates.vue      | 891 ++++++++++--------
 5 files changed, 822 insertions(+), 803 deletions(-)
 create mode 100644 core/ui/src/components/settings/AcmeSettings.vue
 delete mode 100644 core/ui/src/views/settings/SettingsAcmeServers.vue

diff --git a/core/ui/public/i18n/en/translation.json b/core/ui/public/i18n/en/translation.json
index 8330ac4fc2..2377dafd68 100644
--- a/core/ui/public/i18n/en/translation.json
+++ b/core/ui/public/i18n/en/translation.json
@@ -848,6 +848,7 @@
     },
     "settings_tls_certificates": {
         "title": "TLS certificates",
+        "certificates": "Certificates",
         "show_all": "Show all",
         "request_certificate": "Request certificate",
         "filter_certificates": "Filter certificates",
@@ -931,13 +932,13 @@
         "certificates_not_displayed": "Certificates configured on {instanceId} are not displayed"
     },
     "settings_acme_servers": {
-        "title": "ACME servers",
-        "search_acme_server": "Search ACME server",
-        "no_acme_server": "No ACME server",
-        "no_acme_server_description": "There is no ACME server configured",
-        "url": "URL",
+        "title": "ACME settings",
+        "search_acme_server": "Search ACME settings",
+        "no_acme_server": "No ACME settings",
+        "no_acme_server_description": "No cluster node has ACME settings configured",
+        "url": "ACME directory URL",
         "node": "Node",
-        "edit_acme_server": "Edit ACME server",
+        "edit_acme_server": "Edit ACME settings",
         "edit_acme_server_for_node": "Edit ACME server for {node}",
         "reload_page": "Page reload needed",
         "edit_acme_server_leader_node_warning": "You are editing the ACME server for the leader node. After you click 'Edit ACME server' you'll need to reload the page"
diff --git a/core/ui/src/components/settings/AcmeSettings.vue b/core/ui/src/components/settings/AcmeSettings.vue
new file mode 100644
index 0000000000..a04370203e
--- /dev/null
+++ b/core/ui/src/components/settings/AcmeSettings.vue
@@ -0,0 +1,315 @@
+<!--
+  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>
+            <NsDataTable
+              :allRows="servers"
+              :columns="i18nTableColumns"
+              :rawColumns="tableColumns"
+              :sortable="true"
+              :pageSizes="[10, 25, 50, 100]"
+              :overflow-menu="true"
+              isSearchable
+              :searchPlaceholder="
+                $t('settings_acme_servers.search_acme_server')
+              "
+              :searchClearLabel="$t('common.clear_search')"
+              :noSearchResultsLabel="$t('common.no_search_results')"
+              :noSearchResultsDescription="
+                $t('common.no_search_results_description')
+              "
+              :isLoading="loadingServers"
+              :skeletonRows="5"
+              :isErrorShown="
+                !!error.listInstalledModules || !!error.getAcmeServer
+              "
+              :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_acme_servers.no_acme_server')"
+                >
+                  <template #description>
+                    <div>
+                      {{
+                        $t("settings_acme_servers.no_acme_server_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>
+                    <span>
+                      {{ row.url }}
+                    </span>
+                  </cv-data-table-cell>
+                  <cv-data-table-cell>
+                    <div class="justify-flex-end">
+                      <NsButton
+                        kind="ghost"
+                        :icon="Edit20"
+                        size="small"
+                        @click="showEditServerModal(row)"
+                        :data-test-id="row.nodeId + '-edit'"
+                        >{{ $t("common.edit") }}
+                      </NsButton>
+                    </div>
+                  </cv-data-table-cell>
+                </cv-data-table-row>
+              </template>
+            </NsDataTable>
+          </cv-column>
+        </cv-row>
+      </cv-grid>
+    </cv-tile>
+    <EditAcmeServerModal
+      :isShown="isShownEditServerModal"
+      :server="currentServer"
+      @hide="hideEditServerModal"
+      @reloadServers="onReloadServers"
+    />
+  </div>
+</template>
+
+<script>
+import to from "await-to-js";
+import { UtilService, TaskService, IconService } from "@nethserver/ns8-ui-lib";
+import EditAcmeServerModal from "@/components/settings/EditAcmeServerModal.vue";
+
+export default {
+  name: "AcmeSettings",
+  components: { EditAcmeServerModal },
+  mixins: [TaskService, UtilService, IconService],
+  data() {
+    return {
+      tablePage: [],
+      tableColumns: ["node", "url"],
+      servers: [],
+      isShownEditServerModal: false,
+      currentErrorAction: "",
+      currentErrorDescription: "",
+      traefikInstances: [],
+      currentServer: null,
+      // [eventName, handler] pairs registered on $root, removed in beforeDestroy
+      taskListeners: [],
+      loading: {
+        listInstalledModules: false,
+        getAcmeServerNum: 0,
+      },
+      error: {
+        listInstalledModules: "",
+        getAcmeServer: "",
+      },
+    };
+  },
+  computed: {
+    i18nTableColumns() {
+      return this.tableColumns.map((column) => {
+        return this.$t("settings_acme_servers." + column);
+      });
+    },
+    loadingServers() {
+      return (
+        this.loading.listInstalledModules || this.loading.getAcmeServerNum > 0
+      );
+    },
+  },
+  created() {
+    this.listInstalledModules();
+  },
+  beforeDestroy() {
+    // remove task listeners still registered on $root: a task completing after
+    // the component is gone would run its handler on a dead instance, and
+    // listInstalledModulesCompleted() would create one task per traefik node.
+    // $off only touches $root._events, the notification drawer is store-driven
+    this.taskListeners.forEach(([eventName, handler]) => {
+      this.$root.$off(eventName, handler);
+    });
+    this.taskListeners = [];
+  },
+  methods: {
+    registerTaskListener(eventName, handler) {
+      this.$root.$once(eventName, handler);
+      this.taskListeners.push([eventName, handler]);
+    },
+    showEditServerModal(server) {
+      this.currentServer = server;
+      this.isShownEditServerModal = true;
+    },
+    hideEditServerModal() {
+      this.isShownEditServerModal = false;
+    },
+    clearTableError() {
+      this.error.listInstalledModules = "";
+      this.error.getAcmeServer = "";
+      this.currentErrorAction = "";
+      this.currentErrorDescription = "";
+    },
+    async listInstalledModules() {
+      this.loading.listInstalledModules = true;
+      this.clearTableError();
+      const taskAction = "list-installed-modules";
+      const eventId = this.getUuid();
+
+      // register to task error
+      this.registerTaskListener(
+        `${taskAction}-aborted-${eventId}`,
+        this.listInstalledModulesAborted
+      );
+
+      // register to task completion
+      this.registerTaskListener(
+        `${taskAction}-completed-${eventId}`,
+        this.listInstalledModulesCompleted
+      );
+      const res = await to(
+        this.createClusterTask({
+          action: taskAction,
+          extra: {
+            title: this.$t("action." + taskAction),
+            isNotificationHidden: true,
+            eventId,
+          },
+        })
+      );
+      const err = res[0];
+      if (err) {
+        console.error(`error creating task ${taskAction}`, err);
+        const errMessage = this.getErrorMessage(err);
+        this.error.listInstalledModules = errMessage;
+        this.currentErrorAction = this.$t("action." + taskAction);
+        this.currentErrorDescription = errMessage;
+        this.loading.listInstalledModules = false;
+        return;
+      }
+    },
+    listInstalledModulesAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.listInstalledModules = this.$t("error.generic_error");
+      this.currentErrorAction = this.$t("action." + taskContext.action);
+      this.currentErrorDescription = this.$t("error.generic_error");
+      this.loading.listInstalledModules = false;
+    },
+    listInstalledModulesCompleted(taskContext, taskResult) {
+      let traefikInstances = [];
+
+      for (let instanceList of Object.values(taskResult.output)) {
+        for (let instance of instanceList) {
+          if (instance.id.startsWith("traefik")) {
+            traefikInstances.push(instance);
+          }
+        }
+      }
+      this.traefikInstances = traefikInstances;
+      this.loading.listInstalledModules = false;
+      this.getAcmeServer();
+    },
+    async getAcmeServer() {
+      this.servers = [];
+      // without this a transient failure keeps the table on the error state
+      // even once every node answers again
+      this.clearTableError();
+
+      for (const traefikInstance of this.traefikInstances) {
+        const taskAction = "get-acme-server";
+        const eventId = this.getUuid();
+        this.loading.getAcmeServerNum++;
+
+        // register to task events
+
+        this.registerTaskListener(
+          `${taskAction}-aborted-${eventId}`,
+          this.getAcmeServerAborted
+        );
+
+        this.registerTaskListener(
+          `${taskAction}-completed-${eventId}`,
+          this.getAcmeServerCompleted
+        );
+
+        const res = await to(
+          this.createModuleTaskForApp(traefikInstance.id, {
+            action: taskAction,
+            data: {
+              expand_list: true,
+            },
+            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.getAcmeServer = errMessage;
+          this.currentErrorAction = this.$t("action." + taskAction);
+          this.currentErrorDescription = errMessage;
+          this.loading.getAcmeServerNum--;
+        }
+      }
+    },
+    getAcmeServerAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.getAcmeServer = this.$t("error.generic_error");
+      this.currentErrorAction = this.$t("action." + taskContext.action);
+      this.currentErrorDescription = this.$t("error.generic_error");
+      this.loading.getAcmeServerNum--;
+    },
+    getAcmeServerCompleted(taskContext, taskResult) {
+      const server = taskResult.output;
+      const traefikId = taskContext.extra.traefikInstance.id;
+      const nodeId = taskContext.extra.traefikInstance.node;
+      const nodeUiName = taskContext.extra.traefikInstance.node_ui_name;
+      const node = { id: nodeId, ui_name: nodeUiName };
+      const nodeLabel = this.getShortNodeLabel(node) + ` (${traefikId})`;
+      server.node = nodeLabel;
+      server.nodeId = nodeId;
+      server.longNodeLabel = this.getNodeLabel(node);
+      server.traefikInstance = traefikId;
+      this.servers.push(server);
+      this.servers.sort(this.sortByProperty("node"));
+      this.loading.getAcmeServerNum--;
+    },
+    onReloadServers() {
+      this.getAcmeServer();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../styles/carbon-utils";
+
+.justify-flex-end {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/core/ui/src/router/index.js b/core/ui/src/router/index.js
index 1679cfc836..e2adbbe3af 100644
--- a/core/ui/src/router/index.js
+++ b/core/ui/src/router/index.js
@@ -77,12 +77,12 @@ const routes = [
       ),
   },
   {
+    // the ACME settings are now a tab of the TLS certificates page
     path: "/settings/acme-servers",
-    name: "SettingsAcmeServers",
-    component: () =>
-      import(
-        /* webpackChunkName: "settings-acme-servers" */ "../views/settings/SettingsAcmeServers.vue"
-      ),
+    redirect: {
+      name: "SettingsTlsCertificates",
+      query: { view: "acme" },
+    },
   },
   {
     path: "/settings/account",
diff --git a/core/ui/src/views/settings/SettingsAcmeServers.vue b/core/ui/src/views/settings/SettingsAcmeServers.vue
deleted file mode 100644
index bf1168ffe7..0000000000
--- a/core/ui/src/views/settings/SettingsAcmeServers.vue
+++ /dev/null
@@ -1,396 +0,0 @@
-<!--
-  Copyright (C) 2023 Nethesis S.r.l.
-  SPDX-License-Identifier: GPL-3.0-or-later
--->
-<template>
-  <div>
-    <cv-grid fullWidth>
-      <cv-row>
-        <cv-column>
-          <cv-breadcrumb
-            aria-label="breadcrumb"
-            :no-trailing-slash="true"
-            class="breadcrumb"
-          >
-            <cv-breadcrumb-item>
-              <cv-link to="/settings">{{ $t("settings.title") }}</cv-link>
-            </cv-breadcrumb-item>
-            <cv-breadcrumb-item>
-              <cv-link to="/settings/tls-certificates">{{
-                $t("settings_tls_certificates.title")
-              }}</cv-link>
-            </cv-breadcrumb-item>
-            <cv-breadcrumb-item>
-              <span>{{ $t("settings_acme_servers.title") }}</span>
-            </cv-breadcrumb-item>
-          </cv-breadcrumb>
-        </cv-column>
-      </cv-row>
-      <cv-row>
-        <cv-column :md="4" :xlg="10" class="subpage-title">
-          <h3>{{ $t("settings_acme_servers.title") }}</h3>
-        </cv-column>
-        <cv-column :md="4" :xlg="6">
-          <div class="page-toolbar">
-            <NsButton
-              kind="tertiary"
-              size="field"
-              :icon="Certificate20"
-              @click="goToTlsCertificates()"
-              class="subpage-toolbar-item"
-              >{{ $t("settings_tls_certificates.title") }}
-            </NsButton>
-          </div>
-        </cv-column>
-      </cv-row>
-      <cv-row>
-        <cv-column>
-          <NsInlineNotification
-            kind="warning"
-            :title="$t('common.use_landscape_mode')"
-            :description="$t('common.use_landscape_mode_description')"
-            class="landscape-warning"
-          />
-        </cv-column>
-      </cv-row>
-      <cv-row>
-        <cv-column>
-          <cv-tile light>
-            <cv-grid class="no-padding">
-              <cv-row>
-                <cv-column>
-                  <NsDataTable
-                    :allRows="servers"
-                    :columns="i18nTableColumns"
-                    :rawColumns="tableColumns"
-                    :sortable="true"
-                    :pageSizes="[10, 25, 50, 100]"
-                    :overflow-menu="true"
-                    isSearchable
-                    :searchPlaceholder="
-                      $t('settings_acme_servers.search_acme_server')
-                    "
-                    :searchClearLabel="$t('common.clear_search')"
-                    :noSearchResultsLabel="$t('common.no_search_results')"
-                    :noSearchResultsDescription="
-                      $t('common.no_search_results_description')
-                    "
-                    :isLoading="loadingServers"
-                    :skeletonRows="5"
-                    :isErrorShown="
-                      !!error.listInstalledModules || !!error.getAcmeServer
-                    "
-                    :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_acme_servers.no_acme_server')"
-                      >
-                        <template #description>
-                          <div>
-                            {{
-                              $t(
-                                "settings_acme_servers.no_acme_server_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.url }}
-                          </span>
-                        </cv-data-table-cell>
-                        <cv-data-table-cell>
-                          <span>{{ row.node }}</span>
-                        </cv-data-table-cell>
-                        <cv-data-table-cell>
-                          <div class="justify-flex-end">
-                            <NsButton
-                              kind="secondary"
-                              :icon="Edit20"
-                              size="small"
-                              @click="showEditServerModal(row)"
-                              :data-test-id="row.url + '-delete'"
-                              >{{ $t("common.edit") }}
-                            </NsButton>
-                          </div>
-                        </cv-data-table-cell>
-                      </cv-data-table-row>
-                    </template>
-                  </NsDataTable>
-                </cv-column>
-              </cv-row>
-            </cv-grid>
-          </cv-tile>
-        </cv-column>
-      </cv-row>
-    </cv-grid>
-    <EditAcmeServerModal
-      :isShown="isShownEditServerModal"
-      :server="currentServer"
-      @hide="hideEditServerModal"
-      @reloadServers="onReloadServers"
-    />
-  </div>
-</template>
-
-<script>
-import to from "await-to-js";
-import {
-  QueryParamService,
-  UtilService,
-  TaskService,
-  IconService,
-  PageTitleService,
-} from "@nethserver/ns8-ui-lib";
-import { mapState } from "vuex";
-import EditAcmeServerModal from "@/components/settings/EditAcmeServerModal.vue";
-
-export default {
-  name: "SettingsAcmeServers",
-  components: { EditAcmeServerModal },
-  mixins: [
-    TaskService,
-    UtilService,
-    IconService,
-    QueryParamService,
-    PageTitleService,
-  ],
-  pageTitle() {
-    return this.$t("settings_acme_servers.title");
-  },
-  data() {
-    return {
-      tablePage: [],
-      tableColumns: ["url", "node"],
-      servers: [],
-      internalNodes: [],
-      isShownEditServerModal: false,
-      currentErrorAction: "",
-      currentErrorDescription: "",
-      traefikInstances: [],
-      currentServer: null,
-      loading: {
-        listInstalledModules: false,
-        getAcmeServerNum: 0,
-      },
-      error: {
-        listInstalledModules: "",
-        getAcmeServer: "",
-      },
-    };
-  },
-  computed: {
-    ...mapState(["clusterNodes"]),
-    i18nTableColumns() {
-      return this.tableColumns.map((column) => {
-        return this.$t("settings_acme_servers." + column);
-      });
-    },
-    loadingServers() {
-      return (
-        this.loading.listInstalledModules || this.loading.getAcmeServerNum > 0
-      );
-    },
-  },
-  beforeRouteEnter(to, from, next) {
-    next((vm) => {
-      vm.watchQueryData(vm);
-      vm.queryParamsToDataForCore(vm, to.query);
-    });
-  },
-  beforeRouteUpdate(to, from, next) {
-    this.queryParamsToDataForCore(this, to.query);
-    next();
-  },
-  created() {
-    this.listInstalledModules();
-  },
-  methods: {
-    showEditServerModal(server) {
-      this.currentServer = server;
-      this.isShownEditServerModal = true;
-    },
-    hideEditServerModal() {
-      this.isShownEditServerModal = false;
-    },
-    async listInstalledModules() {
-      this.loading.listInstalledModules = true;
-      const taskAction = "list-installed-modules";
-      const eventId = this.getUuid();
-
-      // register to task error
-      this.$root.$once(
-        `${taskAction}-aborted-${eventId}`,
-        this.listInstalledModulesAborted
-      );
-
-      // register to task completion
-      this.$root.$once(
-        `${taskAction}-completed-${eventId}`,
-        this.listInstalledModulesCompleted
-      );
-      const res = await to(
-        this.createClusterTask({
-          action: taskAction,
-          extra: {
-            title: this.$t("action." + taskAction),
-            isNotificationHidden: true,
-            eventId,
-          },
-        })
-      );
-      const err = res[0];
-      if (err) {
-        console.error(`error creating task ${taskAction}`, err);
-        const errMessage = this.getErrorMessage(err);
-        this.error.listInstalledModules = errMessage;
-        this.currentErrorAction = this.$t("action." + taskAction);
-        this.currentErrorDescription = errMessage;
-        return;
-      }
-    },
-    listInstalledModulesAborted(taskResult, taskContext) {
-      console.error(`${taskContext.action} aborted`, taskResult);
-      this.error.listInstalledModules = this.$t("error.generic_error");
-      this.currentErrorAction = this.$t("action." + taskContext.action);
-      this.currentErrorDescription = this.$t("error.generic_error");
-      this.loading.listInstalledModules = false;
-    },
-    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.getAcmeServer();
-    },
-    async getAcmeServer() {
-      this.servers = [];
-
-      for (const traefikInstance of this.traefikInstances) {
-        const taskAction = "get-acme-server";
-        const eventId = this.getUuid();
-        this.loading.getAcmeServerNum++;
-
-        // register to task events
-
-        this.$root.$once(
-          `${taskAction}-aborted-${eventId}`,
-          this.getAcmeServerAborted
-        );
-
-        this.$root.$once(
-          `${taskAction}-completed-${eventId}`,
-          this.getAcmeServerCompleted
-        );
-
-        const res = await to(
-          this.createModuleTaskForApp(traefikInstance.id, {
-            action: taskAction,
-            data: {
-              expand_list: true,
-            },
-            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.getAcmeServer = errMessage;
-          this.currentErrorAction = this.$t("action." + taskAction);
-          this.currentErrorDescription = errMessage;
-          this.loading.getAcmeServerNum--;
-        }
-      }
-    },
-    getAcmeServerAborted(taskResult, taskContext) {
-      console.error(`${taskContext.action} aborted`, taskResult);
-      this.error.getAcmeServer = this.$t("error.generic_error");
-      this.currentErrorAction = this.$t("action." + taskContext.action);
-      this.currentErrorDescription = this.$t("error.generic_error");
-      this.loading.getAcmeServerNum--;
-    },
-    getAcmeServerCompleted(taskContext, taskResult) {
-      const server = taskResult.output;
-      const traefikId = taskContext.extra.traefikInstance.id;
-      const nodeId = taskContext.extra.traefikInstance.node;
-      const nodeUiName = taskContext.extra.traefikInstance.node_ui_name;
-      const node = { id: nodeId, ui_name: nodeUiName };
-      const nodeLabel = this.getShortNodeLabel(node) + ` (${traefikId})`;
-      server.node = nodeLabel;
-      server.nodeId = nodeId;
-      server.longNodeLabel = this.getNodeLabel(node);
-      server.traefikInstance = traefikId;
-      this.servers.push(server);
-      this.servers.sort(this.sortByProperty("url"));
-      this.loading.getAcmeServerNum--;
-    },
-    onReloadServers() {
-      this.getAcmeServer();
-    },
-    goToTlsCertificates() {
-      this.$router.push("/settings/tls-certificates");
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-@import "../../styles/carbon-utils";
-
-.justify-flex-end {
-  display: flex;
-  justify-content: flex-end;
-}
-</style>
diff --git a/core/ui/src/views/settings/SettingsTlsCertificates.vue b/core/ui/src/views/settings/SettingsTlsCertificates.vue
index d61cce9bd1..f5b8176401 100644
--- a/core/ui/src/views/settings/SettingsTlsCertificates.vue
+++ b/core/ui/src/views/settings/SettingsTlsCertificates.vue
@@ -22,21 +22,9 @@
         </cv-column>
       </cv-row>
       <cv-row>
-        <cv-column :md="4" :xlg="10" class="subpage-title">
+        <cv-column class="subpage-title">
           <h3>{{ $t("settings_tls_certificates.title") }}</h3>
         </cv-column>
-        <cv-column :md="4" :xlg="6">
-          <div class="page-toolbar">
-            <NsButton
-              kind="tertiary"
-              size="field"
-              :icon="BareMetalServer20"
-              @click="goToAcmeServers()"
-              class="subpage-toolbar-item"
-              >{{ $t("settings_acme_servers.title") }}
-            </NsButton>
-          </div>
-        </cv-column>
       </cv-row>
       <cv-row>
         <cv-column>
@@ -52,396 +40,469 @@
     <cv-grid fullWidth>
       <cv-row>
         <cv-column>
-          <cv-tile light>
-            <div v-if="offlineTraefikInstances.length">
-              <NsInlineNotification
-                v-for="instance in offlineTraefikInstances"
-                :key="instance.id"
-                kind="error"
-                :title="
-                  $t('settings_tls_certificates.node_is_offline', {
-                    node: getNodeLabel(instance),
-                  })
-                "
-                :description="getOfflineInstanceDescription(instance)"
-                :showCloseButton="false"
-              />
-            </div>
-            <div v-if="listCertificatesErrors.length">
-              <NsInlineNotification
-                v-for="(error, index) in listCertificatesErrors"
-                :key="index"
-                kind="error"
-                :title="error.title"
-                :description="error.description"
-                :showCloseButton="false"
-              />
-            </div>
-            <div class="toolbar gap-2 flex-wrap" v-if="certificates.length">
-              <!-- request certificate -->
-              <NsButton
-                v-if="nodesWithoutCertificate.length"
-                kind="primary"
-                :icon="Add20"
-                :disabled="loadingCertificates"
-                @click="showRequestCertificateModal"
-                >{{ $t("settings_tls_certificates.request_certificate") }}
-              </NsButton>
-              <cv-tooltip
-                v-else
-                alignment="center"
-                direction="top"
-                :tip="
-                  $t(
-                    'settings_tls_certificates.request_certificate_disabled_message'
-                  )
-                "
-              >
-                <NsButton
-                  kind="primary"
-                  :icon="Add20"
-                  disabled
-                  @click="showRequestCertificateModal"
-                  >{{ $t("settings_tls_certificates.request_certificate") }}
-                </NsButton>
-              </cv-tooltip>
-              <!-- upload certificate -->
-              <NsButton
-                kind="secondary"
-                :icon="Upload20"
-                @click="uploadTlsCertificateState.setVisible(true)"
-                >{{ $t("settings_tls_certificates.add_custom_certificate") }}
-              </NsButton>
-              <!-- delete obsolete certificates -->
-              <NsButton
-                kind="tertiary"
-                :icon="TrashCan20"
-                @click="showDeleteObsoleteCertificatesModal"
-                :disabled="!nodesWithObsoleteCertificates.length"
-                >{{
-                  $t("settings_tls_certificates.delete_obsolete_certificates")
-                }}
-              </NsButton>
-            </div>
-            <div>
-              <div>
-                <div class="data-table-filters">
-                  <cv-search
-                    :label="$t('common.search')"
-                    :placeholder="
-                      $t('settings_tls_certificates.filter_certificates')
-                    "
-                    :clear-aria-label="$t('common.clear_search')"
-                    v-model="filter.text"
-                    :disabled="loadingCertificates"
-                    size="large"
-                    ref="tableSearch"
-                    class="self-end"
-                    @input="onSearchInput"
-                  >
-                  </cv-search>
-                  <NsComboBox
-                    v-model="filter.certificateType"
-                    :label="$t('common.choose')"
-                    :title="$t('settings_tls_certificates.ui_type')"
-                    :auto-filter="true"
-                    :auto-highlight="true"
-                    :options="typeOptions"
-                    :disabled="loadingCertificates"
-                  >
-                  </NsComboBox>
-                  <NsComboBox
-                    v-model="filter.certificateStatus"
-                    :label="$t('common.choose')"
-                    :title="$t('settings_tls_certificates.status')"
-                    :auto-filter="true"
-                    :auto-highlight="true"
-                    :options="statusOptions"
-                    :disabled="loadingCertificates"
-                  >
-                  </NsComboBox>
-                  <NsComboBox
-                    v-model="q.selectedNodeId"
-                    :label="$t('common.choose')"
-                    :title="$t('common.node')"
-                    :auto-filter="true"
-                    :auto-highlight="true"
-                    :options="nodesForFilter"
-                    :disabled="loadingCertificates"
-                  >
-                  </NsComboBox>
-                  <cv-link
-                    @click="clearFilters()"
-                    class="self-end mb-3 shrink-0"
-                    >{{ $t("common.clear_filters") }}
-                  </cv-link>
-                </div>
-                <NsDataTable
-                  :allRows="filteredCertificates"
-                  :columns="i18nTableColumns"
-                  :rawColumns="tableColumns"
-                  :sortable="true"
-                  :pageSizes="[10, 25, 50, 100]"
-                  :overflow-menu="true"
-                  :isSearchable="false"
-                  :noSearchResultsLabel="$t('common.no_search_results')"
-                  :noSearchResultsDescription="
-                    $t('common.no_search_results_description')
-                  "
-                  :isLoading="loadingCertificates"
-                  :skeletonRows="5"
-                  :isErrorShown="!!error.listInstalledModules"
-                  :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')"
-                  ref="certificatesTable"
-                  @updatePage="tablePage = $event"
-                >
-                  <template slot="empty-state">
-                    <template v-if="hasActiveFilters && certificates.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 tls certificates -->
-                      <NsEmptyState
+          <NsTabs
+            :container="false"
+            :aria-label="$t('common.tab_navigation')"
+            :noDefaultToFirst="true"
+            @tab-selected="tabSelected"
+          >
+            <cv-tab
+              id="tab-1"
+              :label="$t('settings_tls_certificates.certificates')"
+              :selected="q.view === 'certificates'"
+            >
+              <cv-row>
+                <cv-column>
+                  <cv-tile light>
+                    <div v-if="offlineTraefikInstances.length">
+                      <NsInlineNotification
+                        v-for="instance in offlineTraefikInstances"
+                        :key="instance.id"
+                        kind="error"
                         :title="
-                          $t('settings_tls_certificates.no_tls_certificate')
+                          $t('settings_tls_certificates.node_is_offline', {
+                            node: getNodeLabel(instance),
+                          })
                         "
-                        key="no-certificates-empty-state"
-                      >
-                        <template #pictogram>
-                          <DocumentSecurityPictogram />
-                        </template>
-                        <template #description>
-                          <div class="flex flex-col items-center gap-4">
-                            <p>
-                              {{
-                                $t(
-                                  "settings_tls_certificates.no_tls_certificate_description"
-                                )
-                              }}
-                            </p>
-                            <div class="flex flex-col items-center gap-2">
-                              <NsButton
-                                v-if="nodesWithoutCertificate.length"
-                                kind="primary"
-                                :icon="Add20"
-                                :disabled="loadingCertificates"
-                                @click="showRequestCertificateModal"
-                                >{{
-                                  $t(
-                                    "settings_tls_certificates.request_certificate"
-                                  )
-                                }}
-                              </NsButton>
-                              <NsButton
-                                kind="ghost"
-                                :icon="Upload20"
-                                @click="
-                                  uploadTlsCertificateState.setVisible(true)
-                                "
-                                >{{
-                                  $t(
-                                    "settings_tls_certificates.add_custom_certificate"
-                                  )
-                                }}
-                              </NsButton>
-                            </div>
-                          </div>
-                        </template>
-                      </NsEmptyState>
-                    </template>
-                  </template>
-                  <template slot="data">
-                    <cv-data-table-row
-                      v-for="(row, rowIndex) in tablePage"
-                      :key="`${rowIndex}`"
-                      :value="`${rowIndex}`"
+                        :description="getOfflineInstanceDescription(instance)"
+                        :showCloseButton="false"
+                      />
+                    </div>
+                    <div v-if="listCertificatesErrors.length">
+                      <NsInlineNotification
+                        v-for="(error, index) in listCertificatesErrors"
+                        :key="index"
+                        kind="error"
+                        :title="error.title"
+                        :description="error.description"
+                        :showCloseButton="false"
+                      />
+                    </div>
+                    <div
+                      class="toolbar gap-2 flex-wrap"
+                      v-if="certificates.length"
                     >
-                      <cv-data-table-cell>
-                        <span>
-                          {{ row.ui_name }}
-                        </span>
-                      </cv-data-table-cell>
-                      <cv-data-table-cell>
-                        <cv-tag
-                          v-if="
-                            row.ui_type === 'automatic' ||
-                            row.ui_type === 'obsolete'
-                          "
-                          :kind="
-                            row.ui_type === 'automatic'
-                              ? 'gray'
-                              : 'high-contrast'
-                          "
-                          :label="
-                            $t('settings_tls_certificates.' + row.ui_type)
-                          "
-                          class="no-margin"
-                        ></cv-tag>
-                        <span v-else>
-                          {{ $t("settings_tls_certificates." + row.ui_type) }}
-                        </span>
-                      </cv-data-table-cell>
-                      <cv-data-table-cell>
-                        <cv-interactive-tooltip
-                          v-if="row.ui_issuer !== row.issuer"
-                          alignment="center"
-                          direction="top"
-                          class="info"
-                        >
-                          <template #trigger>
-                            <cv-link>{{ row.ui_issuer }}</cv-link>
-                          </template>
-                          <template #content>
-                            {{ row.issuer }}
-                          </template>
-                        </cv-interactive-tooltip>
-                        <span v-else>
-                          {{ row.issuer }}
-                        </span>
-                      </cv-data-table-cell>
-                      <cv-data-table-cell>
-                        <div class="flex items-center gap-2">
-                          <span>
-                            {{ row.expiration }}
-                          </span>
-                          <cv-interactive-tooltip
-                            v-if="row.status === 'expiring'"
-                            alignment="center"
-                            direction="top"
-                            class="shrink-0"
+                      <!-- request certificate -->
+                      <NsButton
+                        v-if="nodesWithoutCertificate.length"
+                        kind="primary"
+                        :icon="Add20"
+                        :disabled="loadingCertificates"
+                        @click="showRequestCertificateModal"
+                        >{{
+                          $t("settings_tls_certificates.request_certificate")
+                        }}
+                      </NsButton>
+                      <cv-tooltip
+                        v-else
+                        alignment="center"
+                        direction="top"
+                        :tip="
+                          $t(
+                            'settings_tls_certificates.request_certificate_disabled_message'
+                          )
+                        "
+                      >
+                        <NsButton
+                          kind="primary"
+                          :icon="Add20"
+                          disabled
+                          @click="showRequestCertificateModal"
+                          >{{
+                            $t("settings_tls_certificates.request_certificate")
+                          }}
+                        </NsButton>
+                      </cv-tooltip>
+                      <!-- upload certificate -->
+                      <NsButton
+                        kind="secondary"
+                        :icon="Upload20"
+                        @click="uploadTlsCertificateState.setVisible(true)"
+                        >{{
+                          $t("settings_tls_certificates.add_custom_certificate")
+                        }}
+                      </NsButton>
+                      <!-- delete obsolete certificates -->
+                      <NsButton
+                        kind="tertiary"
+                        :icon="TrashCan20"
+                        @click="showDeleteObsoleteCertificatesModal"
+                        :disabled="!nodesWithObsoleteCertificates.length"
+                        >{{
+                          $t(
+                            "settings_tls_certificates.delete_obsolete_certificates"
+                          )
+                        }}
+                      </NsButton>
+                    </div>
+                    <div>
+                      <div>
+                        <div class="data-table-filters">
+                          <cv-search
+                            :label="$t('common.search')"
+                            :placeholder="
+                              $t(
+                                'settings_tls_certificates.filter_certificates'
+                              )
+                            "
+                            :clear-aria-label="$t('common.clear_search')"
+                            v-model="filter.text"
+                            :disabled="loadingCertificates"
+                            size="large"
+                            ref="tableSearch"
+                            class="self-end"
+                            @input="onSearchInput"
                           >
-                            <template #trigger>
-                              <WarningAltFilled16 class="ns-warning" />
-                            </template>
-                            <template #content>
-                              {{
-                                $t("settings_tls_certificates.expiring_warning")
-                              }}
-                            </template>
-                          </cv-interactive-tooltip>
+                          </cv-search>
+                          <NsComboBox
+                            v-model="filter.certificateType"
+                            :label="$t('common.choose')"
+                            :title="$t('settings_tls_certificates.ui_type')"
+                            :auto-filter="true"
+                            :auto-highlight="true"
+                            :options="typeOptions"
+                            :disabled="loadingCertificates"
+                          >
+                          </NsComboBox>
+                          <NsComboBox
+                            v-model="filter.certificateStatus"
+                            :label="$t('common.choose')"
+                            :title="$t('settings_tls_certificates.status')"
+                            :auto-filter="true"
+                            :auto-highlight="true"
+                            :options="statusOptions"
+                            :disabled="loadingCertificates"
+                          >
+                          </NsComboBox>
+                          <NsComboBox
+                            v-model="q.selectedNodeId"
+                            :label="$t('common.choose')"
+                            :title="$t('common.node')"
+                            :auto-filter="true"
+                            :auto-highlight="true"
+                            :options="nodesForFilter"
+                            :disabled="loadingCertificates"
+                          >
+                          </NsComboBox>
+                          <cv-link
+                            @click="clearFilters()"
+                            class="self-end mb-3 shrink-0"
+                            >{{ $t("common.clear_filters") }}
+                          </cv-link>
                         </div>
-                      </cv-data-table-cell>
-                      <cv-data-table-cell>
-                        <cv-tag
-                          :kind="getTagKind(row.status)"
-                          :label="
-                            row.status === 'expiring'
-                              ? $t('settings_tls_certificates.valid')
-                              : $t('settings_tls_certificates.' + row.status)
+                        <NsDataTable
+                          :allRows="filteredCertificates"
+                          :columns="i18nTableColumns"
+                          :rawColumns="tableColumns"
+                          :sortable="true"
+                          :pageSizes="[10, 25, 50, 100]"
+                          :overflow-menu="true"
+                          :isSearchable="false"
+                          :noSearchResultsLabel="$t('common.no_search_results')"
+                          :noSearchResultsDescription="
+                            $t('common.no_search_results_description')
+                          "
+                          :isLoading="loadingCertificates"
+                          :skeletonRows="5"
+                          :isErrorShown="!!error.listInstalledModules"
+                          :errorTitle="currentErrorAction"
+                          :errorDescription="currentErrorDescription"
+                          :itemsPerPageLabel="$t('pagination.items_per_page')"
+                          :rangeOfTotalItemsLabel="
+                            $t('pagination.range_of_total_items')
                           "
-                          class="no-margin"
+                          :ofTotalPagesLabel="$t('pagination.of_total_pages')"
+                          :backwardText="$t('pagination.previous_page')"
+                          :forwardText="$t('pagination.next_page')"
+                          :pageNumberLabel="$t('pagination.page_number')"
+                          ref="certificatesTable"
+                          @updatePage="tablePage = $event"
                         >
-                        </cv-tag>
-                      </cv-data-table-cell>
-                      <cv-data-table-cell>
-                        <template v-if="row.names.length > 3">
-                          <div
-                            v-for="name in row.names.slice(0, 3)"
-                            :key="name"
-                          >
-                            {{ name }}
-                          </div>
-                          <cv-interactive-tooltip
-                            alignment="center"
-                            direction="top"
-                            class="info"
-                          >
-                            <template #trigger>
-                              <cv-link>
-                                {{
-                                  $tc(
-                                    "common.plus_others",
-                                    row.names.length - 3,
-                                    {
-                                      num: row.names.length - 3,
-                                    }
-                                  )
-                                }}
-                              </cv-link>
+                          <template slot="empty-state">
+                            <template
+                              v-if="hasActiveFilters && certificates.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 #content>
-                              <ul class="unordered-list">
-                                <li v-for="name in row.names" :key="name">
-                                  {{ name }}
-                                </li>
-                              </ul>
+                            <template v-else>
+                              <!-- no tls certificates -->
+                              <NsEmptyState
+                                :title="
+                                  $t(
+                                    'settings_tls_certificates.no_tls_certificate'
+                                  )
+                                "
+                                key="no-certificates-empty-state"
+                              >
+                                <template #pictogram>
+                                  <DocumentSecurityPictogram />
+                                </template>
+                                <template #description>
+                                  <div class="flex flex-col items-center gap-4">
+                                    <p>
+                                      {{
+                                        $t(
+                                          "settings_tls_certificates.no_tls_certificate_description"
+                                        )
+                                      }}
+                                    </p>
+                                    <div
+                                      class="flex flex-col items-center gap-2"
+                                    >
+                                      <NsButton
+                                        v-if="nodesWithoutCertificate.length"
+                                        kind="primary"
+                                        :icon="Add20"
+                                        :disabled="loadingCertificates"
+                                        @click="showRequestCertificateModal"
+                                        >{{
+                                          $t(
+                                            "settings_tls_certificates.request_certificate"
+                                          )
+                                        }}
+                                      </NsButton>
+                                      <NsButton
+                                        kind="ghost"
+                                        :icon="Upload20"
+                                        @click="
+                                          uploadTlsCertificateState.setVisible(
+                                            true
+                                          )
+                                        "
+                                        >{{
+                                          $t(
+                                            "settings_tls_certificates.add_custom_certificate"
+                                          )
+                                        }}
+                                      </NsButton>
+                                    </div>
+                                  </div>
+                                </template>
+                              </NsEmptyState>
                             </template>
-                          </cv-interactive-tooltip>
-                        </template>
-                        <template v-else>
-                          <div v-for="name in row.names" :key="name">
-                            {{ name }}
-                          </div>
-                        </template>
-                      </cv-data-table-cell>
-                      <cv-data-table-cell>
-                        <span>{{ row.node }}</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.name + '-menu'"
-                        >
-                          <!-- manage names -->
-                          <cv-overflow-menu-item
-                            v-if="row.default && row.type === 'internal'"
-                            @click="showManageNamesModal(row)"
-                          >
-                            <NsMenuItem
-                              :icon="Edit20"
-                              :label="
-                                $t('settings_tls_certificates.manage_names')
-                              "
-                            />
-                          </cv-overflow-menu-item>
-                          <!-- delete -->
-                          <cv-overflow-menu-item
-                            danger
-                            @click="showDeleteCertificateModal(row)"
-                          >
-                            <NsMenuItem
-                              :icon="TrashCan20"
-                              :label="$t('common.delete')"
-                            />
-                          </cv-overflow-menu-item>
-                        </cv-overflow-menu>
-                      </cv-data-table-cell>
-                    </cv-data-table-row>
-                  </template>
-                </NsDataTable>
-              </div>
-            </div>
-          </cv-tile>
+                          </template>
+                          <template slot="data">
+                            <cv-data-table-row
+                              v-for="(row, rowIndex) in tablePage"
+                              :key="`${rowIndex}`"
+                              :value="`${rowIndex}`"
+                            >
+                              <cv-data-table-cell>
+                                <span>
+                                  {{ row.ui_name }}
+                                </span>
+                              </cv-data-table-cell>
+                              <cv-data-table-cell>
+                                <cv-tag
+                                  v-if="
+                                    row.ui_type === 'automatic' ||
+                                    row.ui_type === 'obsolete'
+                                  "
+                                  :kind="
+                                    row.ui_type === 'automatic'
+                                      ? 'gray'
+                                      : 'high-contrast'
+                                  "
+                                  :label="
+                                    $t(
+                                      'settings_tls_certificates.' + row.ui_type
+                                    )
+                                  "
+                                  class="no-margin"
+                                ></cv-tag>
+                                <span v-else>
+                                  {{
+                                    $t(
+                                      "settings_tls_certificates." + row.ui_type
+                                    )
+                                  }}
+                                </span>
+                              </cv-data-table-cell>
+                              <cv-data-table-cell>
+                                <cv-interactive-tooltip
+                                  v-if="row.ui_issuer !== row.issuer"
+                                  alignment="center"
+                                  direction="top"
+                                  class="info"
+                                >
+                                  <template #trigger>
+                                    <cv-link>{{ row.ui_issuer }}</cv-link>
+                                  </template>
+                                  <template #content>
+                                    {{ row.issuer }}
+                                  </template>
+                                </cv-interactive-tooltip>
+                                <span v-else>
+                                  {{ row.issuer }}
+                                </span>
+                              </cv-data-table-cell>
+                              <cv-data-table-cell>
+                                <div class="flex items-center gap-2">
+                                  <span>
+                                    {{ row.expiration }}
+                                  </span>
+                                  <cv-interactive-tooltip
+                                    v-if="row.status === 'expiring'"
+                                    alignment="center"
+                                    direction="top"
+                                    class="shrink-0"
+                                  >
+                                    <template #trigger>
+                                      <WarningAltFilled16 class="ns-warning" />
+                                    </template>
+                                    <template #content>
+                                      {{
+                                        $t(
+                                          "settings_tls_certificates.expiring_warning"
+                                        )
+                                      }}
+                                    </template>
+                                  </cv-interactive-tooltip>
+                                </div>
+                              </cv-data-table-cell>
+                              <cv-data-table-cell>
+                                <cv-tag
+                                  :kind="getTagKind(row.status)"
+                                  :label="
+                                    row.status === 'expiring'
+                                      ? $t('settings_tls_certificates.valid')
+                                      : $t(
+                                          'settings_tls_certificates.' +
+                                            row.status
+                                        )
+                                  "
+                                  class="no-margin"
+                                >
+                                </cv-tag>
+                              </cv-data-table-cell>
+                              <cv-data-table-cell>
+                                <template v-if="row.names.length > 3">
+                                  <div
+                                    v-for="name in row.names.slice(0, 3)"
+                                    :key="name"
+                                  >
+                                    {{ name }}
+                                  </div>
+                                  <cv-interactive-tooltip
+                                    alignment="center"
+                                    direction="top"
+                                    class="info"
+                                  >
+                                    <template #trigger>
+                                      <cv-link>
+                                        {{
+                                          $tc(
+                                            "common.plus_others",
+                                            row.names.length - 3,
+                                            {
+                                              num: row.names.length - 3,
+                                            }
+                                          )
+                                        }}
+                                      </cv-link>
+                                    </template>
+                                    <template #content>
+                                      <ul class="unordered-list">
+                                        <li
+                                          v-for="name in row.names"
+                                          :key="name"
+                                        >
+                                          {{ name }}
+                                        </li>
+                                      </ul>
+                                    </template>
+                                  </cv-interactive-tooltip>
+                                </template>
+                                <template v-else>
+                                  <div v-for="name in row.names" :key="name">
+                                    {{ name }}
+                                  </div>
+                                </template>
+                              </cv-data-table-cell>
+                              <cv-data-table-cell>
+                                <span>{{ row.node }}</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.name + '-menu'"
+                                >
+                                  <!-- manage names -->
+                                  <cv-overflow-menu-item
+                                    v-if="
+                                      row.default && row.type === 'internal'
+                                    "
+                                    @click="showManageNamesModal(row)"
+                                  >
+                                    <NsMenuItem
+                                      :icon="Edit20"
+                                      :label="
+                                        $t(
+                                          'settings_tls_certificates.manage_names'
+                                        )
+                                      "
+                                    />
+                                  </cv-overflow-menu-item>
+                                  <!-- delete -->
+                                  <cv-overflow-menu-item
+                                    danger
+                                    @click="showDeleteCertificateModal(row)"
+                                  >
+                                    <NsMenuItem
+                                      :icon="TrashCan20"
+                                      :label="$t('common.delete')"
+                                    />
+                                  </cv-overflow-menu-item>
+                                </cv-overflow-menu>
+                              </cv-data-table-cell>
+                            </cv-data-table-row>
+                          </template>
+                        </NsDataTable>
+                      </div>
+                    </div>
+                  </cv-tile>
+                </cv-column>
+              </cv-row>
+            </cv-tab>
+            <cv-tab
+              id="tab-2"
+              :label="$t('settings_acme_servers.title')"
+              :selected="q.view === 'acme'"
+            >
+              <cv-row>
+                <cv-column>
+                  <AcmeSettings v-if="acmeTabVisited" />
+                </cv-column>
+              </cv-row>
+            </cv-tab>
+          </NsTabs>
         </cv-column>
       </cv-row>
     </cv-grid>
@@ -526,6 +587,11 @@ import { StateManager as UploadTlsCertificateState } from "@/components/settings
 import Upload20 from "@carbon/icons-vue/es/upload/20";
 import DeleteObsoleteCertificatesModal from "@/components/settings/DeleteObsoleteCertificatesModal.vue";
 import WarningAltFilled16 from "@carbon/icons-vue/es/warning--alt--filled/16";
+import AcmeSettings from "@/components/settings/AcmeSettings.vue";
+
+// keep in sync with the cv-tab order in the template and with tabSelected():
+// tabSelected maps the tab index, so adding a conditional tab would shift it
+const TAB_VIEWS = ["certificates", "acme"];
 
 export default {
   name: "SettingsTlsCertificates",
@@ -534,6 +600,7 @@ export default {
     UploadTlsCertificateModal,
     DeleteObsoleteCertificatesModal,
     WarningAltFilled16,
+    AcmeSettings,
   },
   mixins: [
     TaskService,
@@ -549,8 +616,12 @@ export default {
   data() {
     return {
       q: {
+        view: "",
         selectedNodeId: "",
       },
+      // mount the ACME tab on first visit and keep it alive afterwards: a v-if
+      // on q.view would re-run its whole task chain on every tab switch
+      acmeTabVisited: false,
       tablePage: [],
       tableColumns: [
         "ui_name",
@@ -778,12 +849,31 @@ export default {
     next((vm) => {
       vm.watchQueryData(vm);
       vm.queryParamsToDataForCore(vm, to.query);
+      // needed: queryParamsToDataForCore leaves q.view empty when the query has
+      // no view, and copies it verbatim when it is not a real tab name. With
+      // noDefaultToFirst, an unknown view selects no tab at all
+      vm.normalizeView();
     });
   },
   beforeRouteUpdate(to, from, next) {
     this.queryParamsToDataForCore(this, to.query);
+    // needed: queryParamsToDataForCore only assigns keys present in the query,
+    // so a same-path navigation without view would keep the previous tab
+    if (typeof to.query.view === "undefined") {
+      this.q.view = TAB_VIEWS[0];
+    }
+    this.normalizeView();
     next();
   },
+  watch: {
+    "q.view": function (view) {
+      // the watcher covers both the tab click and the deep link, since q.view
+      // is set from the query inside the beforeRouteEnter callback
+      if (view === "acme") {
+        this.acmeTabVisited = true;
+      }
+    },
+  },
   created() {
     // register to events
     this.$root.$on("reloadCertificates", this.onReloadCertificates);
@@ -1192,8 +1282,17 @@ export default {
       // reload certificates
       this.listCertificates();
     },
-    goToAcmeServers() {
-      this.$router.push("/settings/acme-servers");
+    normalizeView() {
+      if (!TAB_VIEWS.includes(this.q.view)) {
+        this.q.view = TAB_VIEWS[0];
+      }
+    },
+    tabSelected(tabNum) {
+      if (tabNum == 0) {
+        this.q.view = "certificates";
+      } else if (tabNum == 1) {
+        this.q.view = "acme";
+      }
     },
     async uploadCustomCertificate(event) {
       // set component to loading

From e2db75fce0a16b517385d2b058bd5c038363fb16 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 10:30:55 +0200
Subject: [PATCH 2/8] feat(ui): add ACME challenge type selection

Expose the ACME challenge type already supported by the traefik
set-acme-server action. Administrators can now pick TLS-ALPN-01, needed
when port 80 is unavailable or filtered, without editing traefik.yaml.

The challenge type is displayed per node as a tag in the ACME settings
table and is selectable in the edit modal through a required radio group.
Options come from a single ACME_CHALLENGE_TYPES array, so adding DNS-01
later only means adding one entry and one translation key.

Align the modal labels with the new ACME settings section.
---
 core/ui/public/i18n/en/translation.json       |  10 +-
 .../src/components/settings/AcmeSettings.vue  |  26 +++-
 .../settings/EditAcmeServerModal.vue          | 140 ++++++++++++++++--
 3 files changed, 158 insertions(+), 18 deletions(-)

diff --git a/core/ui/public/i18n/en/translation.json b/core/ui/public/i18n/en/translation.json
index 2377dafd68..4b1618c133 100644
--- a/core/ui/public/i18n/en/translation.json
+++ b/core/ui/public/i18n/en/translation.json
@@ -937,11 +937,15 @@
         "no_acme_server": "No ACME settings",
         "no_acme_server_description": "No cluster node has ACME settings configured",
         "url": "ACME directory URL",
+        "url_helper": "URL of the ACME provider used to issue certificates.",
         "node": "Node",
+        "challenge": "Challenge type",
+        "challenge_http_01": "HTTP-01",
+        "challenge_tls_alpn_01": "TLS-ALPN-01",
         "edit_acme_server": "Edit ACME settings",
-        "edit_acme_server_for_node": "Edit ACME server for {node}",
-        "reload_page": "Page reload needed",
-        "edit_acme_server_leader_node_warning": "You are editing the ACME server for the leader node. After you click 'Edit ACME server' you'll need to reload the page"
+        "acme_settings_for_node": "ACME settings for {node}",
+        "reload_page": "Reload required",
+        "edit_acme_server_leader_node_warning": "Changes to the leader node configuration require a page reload after saving."
     },
     "apps_lets_encrypt": {
         "lets_encrypt_tips": "Requests a Let's Encrypt TLS certificate automatically. Disabling this option deletes the existing certificate (if any). You can also view or delete it in Cluster settings > TLS certificates.",
diff --git a/core/ui/src/components/settings/AcmeSettings.vue b/core/ui/src/components/settings/AcmeSettings.vue
index a04370203e..1523b732d1 100644
--- a/core/ui/src/components/settings/AcmeSettings.vue
+++ b/core/ui/src/components/settings/AcmeSettings.vue
@@ -66,6 +66,14 @@
                       {{ row.url }}
                     </span>
                   </cv-data-table-cell>
+                  <cv-data-table-cell>
+                    <NsTag
+                      v-if="row.challenge"
+                      :kind="getChallengeTagKind(row.challenge)"
+                      size="sm"
+                      :label="getChallengeLabel(row.challenge)"
+                    />
+                  </cv-data-table-cell>
                   <cv-data-table-cell>
                     <div class="justify-flex-end">
                       <NsButton
@@ -97,7 +105,9 @@
 <script>
 import to from "await-to-js";
 import { UtilService, TaskService, IconService } from "@nethserver/ns8-ui-lib";
-import EditAcmeServerModal from "@/components/settings/EditAcmeServerModal.vue";
+import EditAcmeServerModal, {
+  ACME_CHALLENGE_TYPES,
+} from "@/components/settings/EditAcmeServerModal.vue";
 
 export default {
   name: "AcmeSettings",
@@ -106,7 +116,7 @@ export default {
   data() {
     return {
       tablePage: [],
-      tableColumns: ["node", "url"],
+      tableColumns: ["node", "url", "challenge"],
       servers: [],
       isShownEditServerModal: false,
       currentErrorAction: "",
@@ -155,6 +165,18 @@ export default {
       this.$root.$once(eventName, handler);
       this.taskListeners.push([eventName, handler]);
     },
+    getChallengeType(challenge) {
+      return ACME_CHALLENGE_TYPES.find((type) => type.value === challenge);
+    },
+    getChallengeTagKind(challenge) {
+      const challengeType = this.getChallengeType(challenge);
+      // fallback needed: cv-tag validates the kind against a fixed list
+      return challengeType ? challengeType.tagKind : "gray";
+    },
+    getChallengeLabel(challenge) {
+      const challengeType = this.getChallengeType(challenge);
+      return challengeType ? this.$t(challengeType.labelKey) : challenge;
+    },
     showEditServerModal(server) {
       this.currentServer = server;
       this.isShownEditServerModal = true;
diff --git a/core/ui/src/components/settings/EditAcmeServerModal.vue b/core/ui/src/components/settings/EditAcmeServerModal.vue
index dcf73e0c80..705ce8fe67 100644
--- a/core/ui/src/components/settings/EditAcmeServerModal.vue
+++ b/core/ui/src/components/settings/EditAcmeServerModal.vue
@@ -12,12 +12,17 @@
     @primary-click="setAcmeServer"
   >
     <template slot="title">{{
-      $t("settings_acme_servers.edit_acme_server_for_node", {
-        node: server ? server.node : "",
-      })
+      $t("settings_acme_servers.edit_acme_server")
     }}</template>
     <template slot="content">
       <cv-form @submit.prevent="setAcmeServer">
+        <div class="mg-bottom-md">
+          {{
+            $t("settings_acme_servers.acme_settings_for_node", {
+              node: server ? server.node : "",
+            })
+          }}
+        </div>
         <NsInlineNotification
           v-if="server && server.nodeId == leaderNode.id"
           kind="warning"
@@ -30,11 +35,49 @@
         <NsTextInput
           v-model.trim="url"
           :label="$t('settings_acme_servers.url')"
+          :helper-text="$t('settings_acme_servers.url_helper')"
           :invalid-message="error.url"
           :disabled="loading.setAcmeServer"
           data-modal-primary-focus
           ref="url"
         />
+        <!-- hidden when the module did not report a challenge type: it is too
+             old to know about it, so the UI must not invent a value -->
+        <!-- ref is on the wrapper: a ref inside v-for is an array, and
+             focusElement() calls .focus() on it without checking -->
+        <div
+          v-if="isChallengeSupported"
+          class="mg-top-md"
+          tabindex="-1"
+          ref="challenge"
+        >
+          <label id="acme-challenge-label" class="bx--label">{{
+            $t("settings_acme_servers.challenge")
+          }}</label>
+          <div role="group" aria-labelledby="acme-challenge-label">
+            <cv-radio-group :vertical="true">
+              <!-- disabled goes on each button: cv-radio-group has no such prop,
+                   while cv-radio-button forwards attributes to its input -->
+              <cv-radio-button
+                v-for="challengeType in challengeTypes"
+                :key="challengeType.value"
+                :label="$t(challengeType.labelKey)"
+                :value="challengeType.value"
+                name="acme-challenge"
+                v-model="challenge"
+                :disabled="loading.setAcmeServer"
+              />
+            </cv-radio-group>
+          </div>
+          <!-- .bx--form-requirement is display:none unless it follows a
+               [data-invalid] field wrapper, which a radio group never is -->
+          <div
+            v-if="error.challenge"
+            class="bx--form-requirement challenge-error"
+          >
+            {{ error.challenge }}
+          </div>
+        </div>
         <NsInlineNotification
           v-if="error.setAcmeServer"
           kind="error"
@@ -45,9 +88,7 @@
       </cv-form>
     </template>
     <template slot="secondary-button">{{ $t("common.cancel") }}</template>
-    <template slot="primary-button">{{
-      $t("settings_acme_servers.edit_acme_server")
-    }}</template>
+    <template slot="primary-button">{{ $t("common.save") }}</template>
   </NsModal>
 </template>
 
@@ -56,6 +97,23 @@ import to from "await-to-js";
 import { UtilService, TaskService } from "@nethserver/ns8-ui-lib";
 import { mapGetters } from "vuex";
 
+// challenge types supported by the traefik set-acme-server action.
+// DNS-01 is not implemented yet: adding it here is enough to expose it
+export const ACME_CHALLENGE_TYPES = [
+  {
+    value: "HTTP-01",
+    labelKey: "settings_acme_servers.challenge_http_01",
+    tagKind: "blue",
+  },
+  {
+    value: "TLS-ALPN-01",
+    labelKey: "settings_acme_servers.challenge_tls_alpn_01",
+    tagKind: "purple",
+  },
+];
+
+export const DEFAULT_ACME_CHALLENGE_TYPE = "HTTP-01";
+
 export default {
   name: "EditAcmeServerModal",
   mixins: [UtilService, TaskService],
@@ -68,26 +126,49 @@ export default {
   data() {
     return {
       url: "",
+      challenge: DEFAULT_ACME_CHALLENGE_TYPE,
       loading: {
         setAcmeServer: false,
       },
       error: {
         setAcmeServer: "",
         url: "",
+        challenge: "",
       },
+      // [eventName, handler] pairs registered on $root, removed in beforeDestroy
+      taskListeners: [],
     };
   },
   computed: {
     ...mapGetters(["leaderNode"]),
+    challengeTypes() {
+      return ACME_CHALLENGE_TYPES;
+    },
+    isChallengeSupported() {
+      return !!this.server && this.server.challenge !== undefined;
+    },
   },
   watch: {
     isShown: function () {
       if (this.isShown) {
         this.url = this.server.url;
+        this.challenge = this.server.challenge || DEFAULT_ACME_CHALLENGE_TYPE;
       }
     },
   },
+  beforeDestroy() {
+    // remove task listeners still registered on $root, otherwise a save
+    // completing after this modal is gone runs focusElement() on a deleted ref
+    this.taskListeners.forEach(([eventName, handler]) => {
+      this.$root.$off(eventName, handler);
+    });
+    this.taskListeners = [];
+  },
   methods: {
+    registerTaskListener(eventName, handler) {
+      this.$root.$once(eventName, handler);
+      this.taskListeners.push([eventName, handler]);
+    },
     onModalHidden() {
       this.clearErrors();
       this.$emit("hide");
@@ -106,6 +187,17 @@ export default {
           isValidationOk = false;
         }
       }
+
+      // challenge
+
+      if (this.isChallengeSupported && !this.challenge) {
+        this.error.challenge = this.$t("common.required");
+
+        if (isValidationOk) {
+          this.focusElement("challenge");
+          isValidationOk = false;
+        }
+      }
       return isValidationOk;
     },
     async setAcmeServer() {
@@ -118,33 +210,40 @@ export default {
       const eventId = this.getUuid();
 
       // register to task error
-      this.$root.$once(
+      this.registerTaskListener(
         `${taskAction}-aborted-${eventId}`,
         this.setAcmeServerAborted
       );
 
       // register to task validation
-      this.$root.$once(
+      this.registerTaskListener(
         `${taskAction}-validation-ok-${eventId}`,
         this.setAcmeServerValidationOk
       );
-      this.$root.$once(
+      this.registerTaskListener(
         `${taskAction}-validation-failed-${eventId}`,
         this.setAcmeServerValidationFailed
       );
 
       // register to task completion
-      this.$root.$once(
+      this.registerTaskListener(
         `${taskAction}-completed-${eventId}`,
         this.setAcmeServerCompleted
       );
 
+      // only send challenge when the module reported one: the action schema
+      // sets additionalProperties false, so sending a key an older traefik
+      // does not know about would fail the whole request
+      const data = { url: this.url };
+
+      if (this.isChallengeSupported) {
+        data.challenge = this.challenge;
+      }
+
       const res = await to(
         this.createModuleTaskForApp(this.server.traefikInstance, {
           action: taskAction,
-          data: {
-            url: this.url,
-          },
+          data: data,
           extra: {
             title: this.$t("settings_acme_servers.edit_acme_server"),
             description: this.$t("common.processing"),
@@ -205,4 +304,19 @@ export default {
 
 <style scoped lang="scss">
 @import "../../styles/carbon-utils";
+
+.bx--inline-notification {
+  max-width: 38rem;
+}
+
+// Carbon only reveals .bx--form-requirement next to a [data-invalid] field
+// wrapper, and a radio group never gets one, so the message needs both the
+// visibility and the error color. $text-error is not reachable from
+// carbon-utils in this Carbon version, hence the literal value
+.challenge-error {
+  display: block;
+  max-height: none;
+  overflow: visible;
+  color: #da1e28;
+}
 </style>

From fb618064deff3c8df92a6f7d96b7a1d213134ce8 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 10:31:14 +0200
Subject: [PATCH 3/8] fix(ui): preserve ACME email when saving settings

The set-acme-server action resets the notification email whenever the
email field is missing from the request, so every save from the edit modal
silently cleared it. Send back the value returned by get-acme-server.
---
 .../settings/EditAcmeServerModal.vue          | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/core/ui/src/components/settings/EditAcmeServerModal.vue b/core/ui/src/components/settings/EditAcmeServerModal.vue
index 705ce8fe67..8cad9f4513 100644
--- a/core/ui/src/components/settings/EditAcmeServerModal.vue
+++ b/core/ui/src/components/settings/EditAcmeServerModal.vue
@@ -231,15 +231,20 @@ export default {
         this.setAcmeServerCompleted
       );
 
-      // only send challenge when the module reported one: the action schema
-      // sets additionalProperties false, so sending a key an older traefik
-      // does not know about would fail the whole request
+      // only echo back the fields the module actually reported: the action
+      // schema sets additionalProperties false, so sending a key an older
+      // traefik does not know about would fail the whole request
       const data = { url: this.url };
 
       if (this.isChallengeSupported) {
         data.challenge = this.challenge;
       }
 
+      if (this.server.email !== undefined) {
+        // the action resets the email when the field is missing
+        data.email = this.server.email;
+      }
+
       const res = await to(
         this.createModuleTaskForApp(this.server.traefikInstance, {
           action: taskAction,
@@ -281,14 +286,22 @@ export default {
         const param = validationError.parameter;
 
         // set i18n error message
-        this.error[param] = this.getI18nStringWithFallback(
+        const message = this.getI18nStringWithFallback(
           "settings_acme_servers." + validationError.error,
           "error." + validationError.error
         );
 
-        if (!focusAlreadySet) {
-          this.focusElement(param);
-          focusAlreadySet = true;
+        // a parameter with no field of its own, such as email, would land on a
+        // non-reactive key and make focusElement() throw on an undefined ref
+        if (param !== "setAcmeServer" && param in this.error) {
+          this.error[param] = message;
+
+          if (!focusAlreadySet) {
+            this.focusElement(param);
+            focusAlreadySet = true;
+          }
+        } else {
+          this.error.setAcmeServer = message;
         }
       }
     },

From 4c3a9d50c8913dd3e139a185af5b24cc623d59f6 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 17:15:10 +0200
Subject: [PATCH 4/8] style(ui): shorten comments in the ACME settings UI

Bring the comments added with the ACME settings tab in line with the rest
of core/ui, where 98% of comment blocks are a single line: keep the why,
drop what the code already says and what only justified the change to a
reviewer.

Two of them are removed rather than shortened: the duplicate note about
.bx--form-requirement, which is already explained where .challenge-error
is defined, and the line restating the ACME_CHALLENGE_TYPES name.
---
 .../src/components/settings/AcmeSettings.vue  | 12 +++----
 .../settings/EditAcmeServerModal.vue          | 32 ++++++-------------
 .../settings/SettingsTlsCertificates.vue      | 16 +++-------
 3 files changed, 19 insertions(+), 41 deletions(-)

diff --git a/core/ui/src/components/settings/AcmeSettings.vue b/core/ui/src/components/settings/AcmeSettings.vue
index 1523b732d1..c6073c0b6e 100644
--- a/core/ui/src/components/settings/AcmeSettings.vue
+++ b/core/ui/src/components/settings/AcmeSettings.vue
@@ -123,7 +123,7 @@ export default {
       currentErrorDescription: "",
       traefikInstances: [],
       currentServer: null,
-      // [eventName, handler] pairs registered on $root, removed in beforeDestroy
+      // [eventName, handler] pairs to remove in beforeDestroy
       taskListeners: [],
       loading: {
         listInstalledModules: false,
@@ -151,10 +151,7 @@ export default {
     this.listInstalledModules();
   },
   beforeDestroy() {
-    // remove task listeners still registered on $root: a task completing after
-    // the component is gone would run its handler on a dead instance, and
-    // listInstalledModulesCompleted() would create one task per traefik node.
-    // $off only touches $root._events, the notification drawer is store-driven
+    // a task completing after destroy would re-fire the whole task chain
     this.taskListeners.forEach(([eventName, handler]) => {
       this.$root.$off(eventName, handler);
     });
@@ -170,7 +167,7 @@ export default {
     },
     getChallengeTagKind(challenge) {
       const challengeType = this.getChallengeType(challenge);
-      // fallback needed: cv-tag validates the kind against a fixed list
+      // cv-tag validates the kind against a fixed list
       return challengeType ? challengeType.tagKind : "gray";
     },
     getChallengeLabel(challenge) {
@@ -251,8 +248,7 @@ export default {
     },
     async getAcmeServer() {
       this.servers = [];
-      // without this a transient failure keeps the table on the error state
-      // even once every node answers again
+      // otherwise a transient error sticks after the nodes answer again
       this.clearTableError();
 
       for (const traefikInstance of this.traefikInstances) {
diff --git a/core/ui/src/components/settings/EditAcmeServerModal.vue b/core/ui/src/components/settings/EditAcmeServerModal.vue
index 8cad9f4513..f8fe39fa8b 100644
--- a/core/ui/src/components/settings/EditAcmeServerModal.vue
+++ b/core/ui/src/components/settings/EditAcmeServerModal.vue
@@ -41,10 +41,8 @@
           data-modal-primary-focus
           ref="url"
         />
-        <!-- hidden when the module did not report a challenge type: it is too
-             old to know about it, so the UI must not invent a value -->
-        <!-- ref is on the wrapper: a ref inside v-for is an array, and
-             focusElement() calls .focus() on it without checking -->
+        <!-- an older module reports no challenge type: do not invent one -->
+        <!-- ref on the wrapper: a ref inside v-for is an array, focusElement would throw -->
         <div
           v-if="isChallengeSupported"
           class="mg-top-md"
@@ -56,8 +54,7 @@
           }}</label>
           <div role="group" aria-labelledby="acme-challenge-label">
             <cv-radio-group :vertical="true">
-              <!-- disabled goes on each button: cv-radio-group has no such prop,
-                   while cv-radio-button forwards attributes to its input -->
+              <!-- disabled must be per button: cv-radio-group has no such prop -->
               <cv-radio-button
                 v-for="challengeType in challengeTypes"
                 :key="challengeType.value"
@@ -69,8 +66,6 @@
               />
             </cv-radio-group>
           </div>
-          <!-- .bx--form-requirement is display:none unless it follows a
-               [data-invalid] field wrapper, which a radio group never is -->
           <div
             v-if="error.challenge"
             class="bx--form-requirement challenge-error"
@@ -97,8 +92,7 @@ import to from "await-to-js";
 import { UtilService, TaskService } from "@nethserver/ns8-ui-lib";
 import { mapGetters } from "vuex";
 
-// challenge types supported by the traefik set-acme-server action.
-// DNS-01 is not implemented yet: adding it here is enough to expose it
+// DNS-01 is not implemented yet: adding an entry here is enough
 export const ACME_CHALLENGE_TYPES = [
   {
     value: "HTTP-01",
@@ -135,7 +129,7 @@ export default {
         url: "",
         challenge: "",
       },
-      // [eventName, handler] pairs registered on $root, removed in beforeDestroy
+      // [eventName, handler] pairs to remove in beforeDestroy
       taskListeners: [],
     };
   },
@@ -157,8 +151,7 @@ export default {
     },
   },
   beforeDestroy() {
-    // remove task listeners still registered on $root, otherwise a save
-    // completing after this modal is gone runs focusElement() on a deleted ref
+    // a save completing after destroy runs focusElement on a deleted ref
     this.taskListeners.forEach(([eventName, handler]) => {
       this.$root.$off(eventName, handler);
     });
@@ -231,9 +224,7 @@ export default {
         this.setAcmeServerCompleted
       );
 
-      // only echo back the fields the module actually reported: the action
-      // schema sets additionalProperties false, so sending a key an older
-      // traefik does not know about would fail the whole request
+      // the action sets additionalProperties false: send only reported fields
       const data = { url: this.url };
 
       if (this.isChallengeSupported) {
@@ -291,8 +282,7 @@ export default {
           "error." + validationError.error
         );
 
-        // a parameter with no field of its own, such as email, would land on a
-        // non-reactive key and make focusElement() throw on an undefined ref
+        // focusElement would throw on a parameter with no field of its own
         if (param !== "setAcmeServer" && param in this.error) {
           this.error[param] = message;
 
@@ -322,10 +312,8 @@ export default {
   max-width: 38rem;
 }
 
-// Carbon only reveals .bx--form-requirement next to a [data-invalid] field
-// wrapper, and a radio group never gets one, so the message needs both the
-// visibility and the error color. $text-error is not reachable from
-// carbon-utils in this Carbon version, hence the literal value
+// Carbon reveals .bx--form-requirement only next to a [data-invalid] wrapper,
+// which a radio group never is; $text-error is not reachable from carbon-utils
 .challenge-error {
   display: block;
   max-height: none;
diff --git a/core/ui/src/views/settings/SettingsTlsCertificates.vue b/core/ui/src/views/settings/SettingsTlsCertificates.vue
index f5b8176401..4cc72ad475 100644
--- a/core/ui/src/views/settings/SettingsTlsCertificates.vue
+++ b/core/ui/src/views/settings/SettingsTlsCertificates.vue
@@ -589,8 +589,7 @@ import DeleteObsoleteCertificatesModal from "@/components/settings/DeleteObsolet
 import WarningAltFilled16 from "@carbon/icons-vue/es/warning--alt--filled/16";
 import AcmeSettings from "@/components/settings/AcmeSettings.vue";
 
-// keep in sync with the cv-tab order in the template and with tabSelected():
-// tabSelected maps the tab index, so adding a conditional tab would shift it
+// order must match the cv-tab order: tabSelected maps the tab index
 const TAB_VIEWS = ["certificates", "acme"];
 
 export default {
@@ -619,8 +618,7 @@ export default {
         view: "",
         selectedNodeId: "",
       },
-      // mount the ACME tab on first visit and keep it alive afterwards: a v-if
-      // on q.view would re-run its whole task chain on every tab switch
+      // mount once and keep alive: a v-if would re-run the task chain
       acmeTabVisited: false,
       tablePage: [],
       tableColumns: [
@@ -849,16 +847,13 @@ export default {
     next((vm) => {
       vm.watchQueryData(vm);
       vm.queryParamsToDataForCore(vm, to.query);
-      // needed: queryParamsToDataForCore leaves q.view empty when the query has
-      // no view, and copies it verbatim when it is not a real tab name. With
-      // noDefaultToFirst, an unknown view selects no tab at all
+      // with noDefaultToFirst, an unknown or empty view selects no tab at all
       vm.normalizeView();
     });
   },
   beforeRouteUpdate(to, from, next) {
     this.queryParamsToDataForCore(this, to.query);
-    // needed: queryParamsToDataForCore only assigns keys present in the query,
-    // so a same-path navigation without view would keep the previous tab
+    // queryParamsToDataForCore skips keys absent from the query
     if (typeof to.query.view === "undefined") {
       this.q.view = TAB_VIEWS[0];
     }
@@ -867,8 +862,7 @@ export default {
   },
   watch: {
     "q.view": function (view) {
-      // the watcher covers both the tab click and the deep link, since q.view
-      // is set from the query inside the beforeRouteEnter callback
+      // covers both the tab click and the deep link
       if (view === "acme") {
         this.acmeTabVisited = true;
       }

From a387fc69eefcb8a745f418ed265cfd121b0e73bf Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Tue, 28 Jul 2026 17:44:05 +0200
Subject: [PATCH 5/8] feat(ui): recover the TLS certificates page after a
 Traefik restart

set-acme-server restarts Traefik on the edited node, and Traefik carries the
cluster admin websocket. The completion event that triggers the table refresh
is therefore lost, the loading counters never return to zero, and the page
stays on its skeleton rows until it is reloaded by hand. delete-certificate
and set-certificate restart Traefik too, through
cert_helpers.purge_acme_json_and_restart_traefik, so the Certificates tab has
the same problem.

Watch the Vuex isWebsocketConnected flag in both tabs: on reconnection, reset
the counter and read the data again. Clamp the decrements so an event
delivered after a reset cannot unbalance the counter, and key the ACME rows by
Traefik instance so it cannot duplicate a row either. The edit modal clears
its pending state on reconnection as a safety net.

The modal keeps closing on validation-ok rather than on task creation: the
ACME URL is validated server-side, so closing earlier would throw away the
inline error for a malformed URL.

Replace the leader-only reload warning with a restart warning shown for every
node, since the restart happens on whichever node is edited.
---
 core/ui/public/i18n/en/translation.json       |  3 +-
 .../src/components/settings/AcmeSettings.vue  | 42 +++++++++++++++++--
 .../settings/EditAcmeServerModal.vue          | 21 +++++++---
 .../settings/SettingsTlsCertificates.vue      | 22 ++++++++--
 4 files changed, 73 insertions(+), 15 deletions(-)

diff --git a/core/ui/public/i18n/en/translation.json b/core/ui/public/i18n/en/translation.json
index 4b1618c133..eceeea5b15 100644
--- a/core/ui/public/i18n/en/translation.json
+++ b/core/ui/public/i18n/en/translation.json
@@ -944,8 +944,7 @@
         "challenge_tls_alpn_01": "TLS-ALPN-01",
         "edit_acme_server": "Edit ACME settings",
         "acme_settings_for_node": "ACME settings for {node}",
-        "reload_page": "Reload required",
-        "edit_acme_server_leader_node_warning": "Changes to the leader node configuration require a page reload after saving."
+        "acme_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."
     },
     "apps_lets_encrypt": {
         "lets_encrypt_tips": "Requests a Let's Encrypt TLS certificate automatically. Disabling this option deletes the existing certificate (if any). You can also view or delete it in Cluster settings > TLS certificates.",
diff --git a/core/ui/src/components/settings/AcmeSettings.vue b/core/ui/src/components/settings/AcmeSettings.vue
index c6073c0b6e..ddd426c869 100644
--- a/core/ui/src/components/settings/AcmeSettings.vue
+++ b/core/ui/src/components/settings/AcmeSettings.vue
@@ -105,6 +105,7 @@
 <script>
 import to from "await-to-js";
 import { UtilService, TaskService, IconService } from "@nethserver/ns8-ui-lib";
+import { mapState } from "vuex";
 import EditAcmeServerModal, {
   ACME_CHALLENGE_TYPES,
 } from "@/components/settings/EditAcmeServerModal.vue";
@@ -136,6 +137,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(["isWebsocketConnected"]),
     i18nTableColumns() {
       return this.tableColumns.map((column) => {
         return this.$t("settings_acme_servers." + column);
@@ -147,6 +149,20 @@ export default {
       );
     },
   },
+  watch: {
+    isWebsocketConnected: function (isConnected) {
+      // a Traefik restart kills this websocket: pending task events are lost
+      if (isConnected) {
+        this.loading.getAcmeServerNum = 0;
+
+        if (this.traefikInstances.length) {
+          this.getAcmeServer();
+        } else {
+          this.listInstalledModules();
+        }
+      }
+    },
+  },
   created() {
     this.listInstalledModules();
   },
@@ -290,7 +306,7 @@ export default {
           this.error.getAcmeServer = errMessage;
           this.currentErrorAction = this.$t("action." + taskAction);
           this.currentErrorDescription = errMessage;
-          this.loading.getAcmeServerNum--;
+          this.decreaseGetAcmeServerNum();
         }
       }
     },
@@ -299,7 +315,7 @@ export default {
       this.error.getAcmeServer = this.$t("error.generic_error");
       this.currentErrorAction = this.$t("action." + taskContext.action);
       this.currentErrorDescription = this.$t("error.generic_error");
-      this.loading.getAcmeServerNum--;
+      this.decreaseGetAcmeServerNum();
     },
     getAcmeServerCompleted(taskContext, taskResult) {
       const server = taskResult.output;
@@ -312,9 +328,27 @@ export default {
       server.nodeId = nodeId;
       server.longNodeLabel = this.getNodeLabel(node);
       server.traefikInstance = traefikId;
-      this.servers.push(server);
+
+      // replace instead of append: an event delivered after a reconnection
+      // reset would otherwise duplicate the row
+      const index = this.servers.findIndex(
+        (existing) => existing.traefikInstance === traefikId
+      );
+
+      if (index > -1) {
+        this.servers.splice(index, 1, server);
+      } else {
+        this.servers.push(server);
+      }
       this.servers.sort(this.sortByProperty("node"));
-      this.loading.getAcmeServerNum--;
+      this.decreaseGetAcmeServerNum();
+    },
+    decreaseGetAcmeServerNum() {
+      // never go below zero: the reconnection watcher resets the counter
+      this.loading.getAcmeServerNum = Math.max(
+        0,
+        this.loading.getAcmeServerNum - 1
+      );
     },
     onReloadServers() {
       this.getAcmeServer();
diff --git a/core/ui/src/components/settings/EditAcmeServerModal.vue b/core/ui/src/components/settings/EditAcmeServerModal.vue
index f8fe39fa8b..afc994e425 100644
--- a/core/ui/src/components/settings/EditAcmeServerModal.vue
+++ b/core/ui/src/components/settings/EditAcmeServerModal.vue
@@ -23,12 +23,15 @@
             })
           }}
         </div>
+        <!-- set-acme-server restarts Traefik on the edited node, whichever it is -->
         <NsInlineNotification
-          v-if="server && server.nodeId == leaderNode.id"
+          v-if="server"
           kind="warning"
-          :title="$t('settings_acme_servers.reload_page')"
+          :title="$t('settings_tls_certificates.traefik_will_be_restarted')"
           :description="
-            $t('settings_acme_servers.edit_acme_server_leader_node_warning')
+            $t('settings_acme_servers.acme_restart_message', {
+              node: server.node,
+            })
           "
           :showCloseButton="false"
         />
@@ -90,7 +93,7 @@
 <script>
 import to from "await-to-js";
 import { UtilService, TaskService } from "@nethserver/ns8-ui-lib";
-import { mapGetters } from "vuex";
+import { mapState } from "vuex";
 
 // DNS-01 is not implemented yet: adding an entry here is enough
 export const ACME_CHALLENGE_TYPES = [
@@ -134,7 +137,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["leaderNode"]),
+    ...mapState(["isWebsocketConnected"]),
     challengeTypes() {
       return ACME_CHALLENGE_TYPES;
     },
@@ -143,6 +146,14 @@ export default {
     },
   },
   watch: {
+    isWebsocketConnected: function (isConnected) {
+      // safety net: nothing else clears the pending state if the restart cut
+      // the request off before validation-ok could be delivered
+      if (isConnected && this.loading.setAcmeServer) {
+        this.loading.setAcmeServer = false;
+        this.$emit("hide");
+      }
+    },
     isShown: function () {
       if (this.isShown) {
         this.url = this.server.url;
diff --git a/core/ui/src/views/settings/SettingsTlsCertificates.vue b/core/ui/src/views/settings/SettingsTlsCertificates.vue
index 4cc72ad475..8a6c55c712 100644
--- a/core/ui/src/views/settings/SettingsTlsCertificates.vue
+++ b/core/ui/src/views/settings/SettingsTlsCertificates.vue
@@ -710,7 +710,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["clusterNodes"]),
+    ...mapState(["clusterNodes", "isWebsocketConnected"]),
     i18nTableColumns() {
       return this.tableColumns.map((column) => {
         return this.$t("settings_tls_certificates." + column);
@@ -861,6 +861,13 @@ export default {
     next();
   },
   watch: {
+    isWebsocketConnected: function (isConnected) {
+      // a Traefik restart kills this websocket: pending task events are lost
+      if (isConnected) {
+        this.loading.listCertificatesNum = 0;
+        this.listCertificates();
+      }
+    },
     "q.view": function (view) {
       // covers both the tab click and the deep link
       if (view === "acme") {
@@ -1077,7 +1084,7 @@ export default {
               )} - ${this.getNodeLabel(traefikInstance)})`,
             });
           }
-          this.loading.listCertificatesNum--;
+          this.decreaseListCertificatesNum();
         }
       }
     },
@@ -1096,7 +1103,7 @@ export default {
           traefikInstance
         )} - ${this.getNodeLabel(traefikInstance)})`,
       });
-      this.loading.listCertificatesNum--;
+      this.decreaseListCertificatesNum();
     },
     listCertificatesCompleted(taskContext, taskResult) {
       const traefikId = taskContext.extra.traefikInstance.id;
@@ -1171,7 +1178,14 @@ export default {
       // $set() is needed for reactivity (see https://v2.vuejs.org/v2/guide/reactivity.html#For-Objects)
       this.$set(this.certificatesByTraefikId, traefikId, certs);
 
-      this.loading.listCertificatesNum--;
+      this.decreaseListCertificatesNum();
+    },
+    decreaseListCertificatesNum() {
+      // never go below zero: the reconnection watcher resets the counter
+      this.loading.listCertificatesNum = Math.max(
+        0,
+        this.loading.listCertificatesNum - 1
+      );
     },
     getTagKind(status) {
       switch (status) {

From 05a59572b99cb77b8addba97a92c970b2fe4adee Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Wed, 29 Jul 2026 13:09:27 +0200
Subject: [PATCH 6/8] fix: review of code

---
 core/ui/public/i18n/en/translation.json       |  17 +-
 .../src/components/settings/AcmeSettings.vue  | 150 +++++++-----------
 .../settings/EditAcmeServerModal.vue          |  47 ++++--
 .../settings/SettingsTlsCertificates.vue      |  45 ++++--
 4 files changed, 127 insertions(+), 132 deletions(-)

diff --git a/core/ui/public/i18n/en/translation.json b/core/ui/public/i18n/en/translation.json
index eceeea5b15..ae32108557 100644
--- a/core/ui/public/i18n/en/translation.json
+++ b/core/ui/public/i18n/en/translation.json
@@ -932,19 +932,20 @@
         "certificates_not_displayed": "Certificates configured on {instanceId} are not displayed"
     },
     "settings_acme_servers": {
-        "title": "ACME settings",
-        "search_acme_server": "Search ACME settings",
-        "no_acme_server": "No ACME settings",
-        "no_acme_server_description": "No cluster node has ACME settings configured",
-        "url": "ACME directory URL",
-        "url_helper": "URL of the ACME provider used to issue certificates.",
+        "acme_settings": "ACME settings",
+        "search_acme_settings": "Search ACME settings",
+        "no_acme_settings": "No ACME settings",
+        "no_acme_settings_description": "No cluster node has ACME settings configured",
+        "acme_directory_url": "ACME directory URL",
+        "acme_directory_url_helper": "URL of the ACME provider used to issue certificates.",
         "node": "Node",
         "challenge": "Challenge type",
         "challenge_http_01": "HTTP-01",
         "challenge_tls_alpn_01": "TLS-ALPN-01",
-        "edit_acme_server": "Edit ACME settings",
+        "edit_acme_settings": "Edit ACME settings",
         "acme_settings_for_node": "ACME settings for {node}",
-        "acme_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."
+        "acme_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.",
+        "save_result_unknown": "Traefik restarted before the result was known. Check the ACME settings of the node and try again if needed."
     },
     "apps_lets_encrypt": {
         "lets_encrypt_tips": "Requests a Let's Encrypt TLS certificate automatically. Disabling this option deletes the existing certificate (if any). You can also view or delete it in Cluster settings > TLS certificates.",
diff --git a/core/ui/src/components/settings/AcmeSettings.vue b/core/ui/src/components/settings/AcmeSettings.vue
index ddd426c869..4be8e48f2a 100644
--- a/core/ui/src/components/settings/AcmeSettings.vue
+++ b/core/ui/src/components/settings/AcmeSettings.vue
@@ -17,7 +17,7 @@
               :overflow-menu="true"
               isSearchable
               :searchPlaceholder="
-                $t('settings_acme_servers.search_acme_server')
+                $t('settings_acme_servers.search_acme_settings')
               "
               :searchClearLabel="$t('common.clear_search')"
               :noSearchResultsLabel="$t('common.no_search_results')"
@@ -26,11 +26,9 @@
               "
               :isLoading="loadingServers"
               :skeletonRows="5"
-              :isErrorShown="
-                !!error.listInstalledModules || !!error.getAcmeServer
-              "
-              :errorTitle="currentErrorAction"
-              :errorDescription="currentErrorDescription"
+              :isErrorShown="!!instancesError || !!error.getAcmeServer"
+              :errorTitle="tableErrorTitle"
+              :errorDescription="tableErrorDescription"
               :itemsPerPageLabel="$t('pagination.items_per_page')"
               :rangeOfTotalItemsLabel="$t('pagination.range_of_total_items')"
               :ofTotalPagesLabel="$t('pagination.of_total_pages')"
@@ -41,12 +39,12 @@
             >
               <template slot="empty-state">
                 <NsEmptyState
-                  :title="$t('settings_acme_servers.no_acme_server')"
+                  :title="$t('settings_acme_servers.no_acme_settings')"
                 >
                   <template #description>
                     <div>
                       {{
-                        $t("settings_acme_servers.no_acme_server_description")
+                        $t("settings_acme_servers.no_acme_settings_description")
                       }}
                     </div>
                   </template>
@@ -105,7 +103,6 @@
 <script>
 import to from "await-to-js";
 import { UtilService, TaskService, IconService } from "@nethserver/ns8-ui-lib";
-import { mapState } from "vuex";
 import EditAcmeServerModal, {
   ACME_CHALLENGE_TYPES,
 } from "@/components/settings/EditAcmeServerModal.vue";
@@ -114,70 +111,86 @@ export default {
   name: "AcmeSettings",
   components: { EditAcmeServerModal },
   mixins: [TaskService, UtilService, IconService],
+  props: {
+    // the parent page already lists them: do not run the task twice
+    traefikInstances: {
+      type: Array,
+      default: () => [],
+    },
+    isLoadingInstances: Boolean,
+    instancesError: {
+      type: String,
+      default: "",
+    },
+  },
   data() {
     return {
       tablePage: [],
       tableColumns: ["node", "url", "challenge"],
+      // the raw columns are row property names: labels need their own keys
+      tableColumnLabelKeys: [
+        "settings_acme_servers.node",
+        "settings_acme_servers.acme_directory_url",
+        "settings_acme_servers.challenge",
+      ],
       servers: [],
       isShownEditServerModal: false,
       currentErrorAction: "",
       currentErrorDescription: "",
-      traefikInstances: [],
       currentServer: null,
-      // [eventName, handler] pairs to remove in beforeDestroy
+      // [eventName, handler] pairs registered on $root
       taskListeners: [],
       loading: {
-        listInstalledModules: false,
         getAcmeServerNum: 0,
       },
       error: {
-        listInstalledModules: "",
         getAcmeServer: "",
       },
     };
   },
   computed: {
-    ...mapState(["isWebsocketConnected"]),
     i18nTableColumns() {
-      return this.tableColumns.map((column) => {
-        return this.$t("settings_acme_servers." + column);
-      });
+      return this.tableColumnLabelKeys.map((key) => this.$t(key));
     },
     loadingServers() {
-      return (
-        this.loading.listInstalledModules || this.loading.getAcmeServerNum > 0
-      );
+      return this.isLoadingInstances || this.loading.getAcmeServerNum > 0;
+    },
+    tableErrorTitle() {
+      return this.instancesError
+        ? this.$t("action.list-installed-modules")
+        : this.currentErrorAction;
+    },
+    tableErrorDescription() {
+      return this.instancesError || this.currentErrorDescription;
     },
   },
   watch: {
-    isWebsocketConnected: function (isConnected) {
-      // a Traefik restart kills this websocket: pending task events are lost
-      if (isConnected) {
-        this.loading.getAcmeServerNum = 0;
-
-        if (this.traefikInstances.length) {
-          this.getAcmeServer();
-        } else {
-          this.listInstalledModules();
-        }
-      }
+    // the parent republishes the instances after a Traefik restart killed the
+    // websocket, which is also how this table recovers
+    traefikInstances: function () {
+      this.getAcmeServer();
     },
   },
   created() {
-    this.listInstalledModules();
+    if (this.traefikInstances.length) {
+      this.getAcmeServer();
+    }
   },
   beforeDestroy() {
     // a task completing after destroy would re-fire the whole task chain
-    this.taskListeners.forEach(([eventName, handler]) => {
-      this.$root.$off(eventName, handler);
-    });
-    this.taskListeners = [];
+    this.clearTaskListeners();
   },
   methods: {
     registerTaskListener(eventName, handler) {
       this.$root.$once(eventName, handler);
       this.taskListeners.push([eventName, handler]);
     },
+    clearTaskListeners() {
+      this.taskListeners.forEach(([eventName, handler]) => {
+        this.$root.$off(eventName, handler);
+      });
+      this.taskListeners = [];
+    },
     getChallengeType(challenge) {
       return ACME_CHALLENGE_TYPES.find((type) => type.value === challenge);
     },
@@ -198,71 +211,14 @@ export default {
       this.isShownEditServerModal = false;
     },
     clearTableError() {
-      this.error.listInstalledModules = "";
       this.error.getAcmeServer = "";
       this.currentErrorAction = "";
       this.currentErrorDescription = "";
     },
-    async listInstalledModules() {
-      this.loading.listInstalledModules = true;
-      this.clearTableError();
-      const taskAction = "list-installed-modules";
-      const eventId = this.getUuid();
-
-      // register to task error
-      this.registerTaskListener(
-        `${taskAction}-aborted-${eventId}`,
-        this.listInstalledModulesAborted
-      );
-
-      // register to task completion
-      this.registerTaskListener(
-        `${taskAction}-completed-${eventId}`,
-        this.listInstalledModulesCompleted
-      );
-      const res = await to(
-        this.createClusterTask({
-          action: taskAction,
-          extra: {
-            title: this.$t("action." + taskAction),
-            isNotificationHidden: true,
-            eventId,
-          },
-        })
-      );
-      const err = res[0];
-      if (err) {
-        console.error(`error creating task ${taskAction}`, err);
-        const errMessage = this.getErrorMessage(err);
-        this.error.listInstalledModules = errMessage;
-        this.currentErrorAction = this.$t("action." + taskAction);
-        this.currentErrorDescription = errMessage;
-        this.loading.listInstalledModules = false;
-        return;
-      }
-    },
-    listInstalledModulesAborted(taskResult, taskContext) {
-      console.error(`${taskContext.action} aborted`, taskResult);
-      this.error.listInstalledModules = this.$t("error.generic_error");
-      this.currentErrorAction = this.$t("action." + taskContext.action);
-      this.currentErrorDescription = this.$t("error.generic_error");
-      this.loading.listInstalledModules = false;
-    },
-    listInstalledModulesCompleted(taskContext, taskResult) {
-      let traefikInstances = [];
-
-      for (let instanceList of Object.values(taskResult.output)) {
-        for (let instance of instanceList) {
-          if (instance.id.startsWith("traefik")) {
-            traefikInstances.push(instance);
-          }
-        }
-      }
-      this.traefikInstances = traefikInstances;
-      this.loading.listInstalledModules = false;
-      this.getAcmeServer();
-    },
     async getAcmeServer() {
+      // a handler of a previous round would decrement the counter of this one
+      this.clearTaskListeners();
+      this.loading.getAcmeServerNum = 0;
       this.servers = [];
       // otherwise a transient error sticks after the nodes answer again
       this.clearTableError();
@@ -344,7 +300,7 @@ export default {
       this.decreaseGetAcmeServerNum();
     },
     decreaseGetAcmeServerNum() {
-      // never go below zero: the reconnection watcher resets the counter
+      // never go below zero: a new round resets the counter
       this.loading.getAcmeServerNum = Math.max(
         0,
         this.loading.getAcmeServerNum - 1
diff --git a/core/ui/src/components/settings/EditAcmeServerModal.vue b/core/ui/src/components/settings/EditAcmeServerModal.vue
index afc994e425..f9caa47db5 100644
--- a/core/ui/src/components/settings/EditAcmeServerModal.vue
+++ b/core/ui/src/components/settings/EditAcmeServerModal.vue
@@ -12,7 +12,7 @@
     @primary-click="setAcmeServer"
   >
     <template slot="title">{{
-      $t("settings_acme_servers.edit_acme_server")
+      $t("settings_acme_servers.edit_acme_settings")
     }}</template>
     <template slot="content">
       <cv-form @submit.prevent="setAcmeServer">
@@ -37,8 +37,8 @@
         />
         <NsTextInput
           v-model.trim="url"
-          :label="$t('settings_acme_servers.url')"
-          :helper-text="$t('settings_acme_servers.url_helper')"
+          :label="$t('settings_acme_servers.acme_directory_url')"
+          :helper-text="$t('settings_acme_servers.acme_directory_url_helper')"
           :invalid-message="error.url"
           :disabled="loading.setAcmeServer"
           data-modal-primary-focus
@@ -132,7 +132,7 @@ export default {
         url: "",
         challenge: "",
       },
-      // [eventName, handler] pairs to remove in beforeDestroy
+      // [eventName, handler] pairs registered on $root
       taskListeners: [],
     };
   },
@@ -147,32 +147,44 @@ export default {
   },
   watch: {
     isWebsocketConnected: function (isConnected) {
-      // safety net: nothing else clears the pending state if the restart cut
-      // the request off before validation-ok could be delivered
+      // the restart cut the request off before any task event was delivered:
+      // the outcome is unknown, so keep the modal open and say so instead of
+      // closing as if the save had succeeded
       if (isConnected && this.loading.setAcmeServer) {
+        this.clearTaskListeners();
         this.loading.setAcmeServer = false;
-        this.$emit("hide");
+        this.error.setAcmeServer = this.$t(
+          "settings_acme_servers.save_result_unknown"
+        );
+        this.$emit("reloadServers");
       }
     },
     isShown: function () {
       if (this.isShown) {
         this.url = this.server.url;
-        this.challenge = this.server.challenge || DEFAULT_ACME_CHALLENGE_TYPE;
+        // an empty reported challenge must not be silently promoted to HTTP-01
+        this.challenge =
+          this.server.challenge === undefined
+            ? DEFAULT_ACME_CHALLENGE_TYPE
+            : this.server.challenge;
       }
     },
   },
   beforeDestroy() {
     // a save completing after destroy runs focusElement on a deleted ref
-    this.taskListeners.forEach(([eventName, handler]) => {
-      this.$root.$off(eventName, handler);
-    });
-    this.taskListeners = [];
+    this.clearTaskListeners();
   },
   methods: {
     registerTaskListener(eventName, handler) {
       this.$root.$once(eventName, handler);
       this.taskListeners.push([eventName, handler]);
     },
+    clearTaskListeners() {
+      this.taskListeners.forEach(([eventName, handler]) => {
+        this.$root.$off(eventName, handler);
+      });
+      this.taskListeners = [];
+    },
     onModalHidden() {
       this.clearErrors();
       this.$emit("hide");
@@ -242,8 +254,9 @@ export default {
         data.challenge = this.challenge;
       }
 
-      if (this.server.email !== undefined) {
-        // the action resets the email when the field is missing
+      if (this.server.email) {
+        // the action resets the email when the field is missing, and its schema
+        // may reject an empty string: forward it only when there is one
         data.email = this.server.email;
       }
 
@@ -252,7 +265,7 @@ export default {
           action: taskAction,
           data: data,
           extra: {
-            title: this.$t("settings_acme_servers.edit_acme_server"),
+            title: this.$t("settings_acme_servers.edit_acme_settings"),
             description: this.$t("common.processing"),
             eventId,
           },
@@ -293,8 +306,8 @@ export default {
           "error." + validationError.error
         );
 
-        // focusElement would throw on a parameter with no field of its own
-        if (param !== "setAcmeServer" && param in this.error) {
+        // focusElement would throw on a parameter whose field is not rendered
+        if (param in this.error && this.$refs[param]) {
           this.error[param] = message;
 
           if (!focusAlreadySet) {
diff --git a/core/ui/src/views/settings/SettingsTlsCertificates.vue b/core/ui/src/views/settings/SettingsTlsCertificates.vue
index 8a6c55c712..ad46ea0727 100644
--- a/core/ui/src/views/settings/SettingsTlsCertificates.vue
+++ b/core/ui/src/views/settings/SettingsTlsCertificates.vue
@@ -493,12 +493,17 @@
             </cv-tab>
             <cv-tab
               id="tab-2"
-              :label="$t('settings_acme_servers.title')"
+              :label="$t('settings_acme_servers.acme_settings')"
               :selected="q.view === 'acme'"
             >
               <cv-row>
                 <cv-column>
-                  <AcmeSettings v-if="acmeTabVisited" />
+                  <AcmeSettings
+                    v-if="acmeTabVisited"
+                    :traefikInstances="traefikInstances"
+                    :isLoadingInstances="loading.listInstalledModules"
+                    :instancesError="error.listInstalledModules"
+                  />
                 </cv-column>
               </cv-row>
             </cv-tab>
@@ -639,6 +644,8 @@ export default {
       currentErrorDescription: "",
       traefikInstances: [],
       currentCertificate: null,
+      // [eventName, handler] pairs registered on $root
+      taskListeners: [],
       filter: {
         text: "",
         certificateType: "",
@@ -862,10 +869,11 @@ export default {
   },
   watch: {
     isWebsocketConnected: function (isConnected) {
-      // a Traefik restart kills this websocket: pending task events are lost
+      // 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 ACME tab
       if (isConnected) {
-        this.loading.listCertificatesNum = 0;
-        this.listCertificates();
+        this.listInstalledModules();
       }
     },
     "q.view": function (view) {
@@ -889,8 +897,19 @@ export default {
   beforeDestroy() {
     // remove event listeners
     this.$root.$off("reloadCertificates");
+    this.clearTaskListeners();
   },
   methods: {
+    registerTaskListener(eventName, handler) {
+      this.$root.$once(eventName, handler);
+      this.taskListeners.push([eventName, handler]);
+    },
+    clearTaskListeners() {
+      this.taskListeners.forEach(([eventName, handler]) => {
+        this.$root.$off(eventName, handler);
+      });
+      this.taskListeners = [];
+    },
     showRequestCertificateModal() {
       this.currentCertificate = null;
       this.isShownRequestCertificateModal = true;
@@ -916,18 +935,21 @@ export default {
       this.isShownDeleteObsoleteCertificatesModal = false;
     },
     async listInstalledModules() {
+      // a handler of a previous round would decrement the counters of this one
+      this.clearTaskListeners();
       this.loading.listInstalledModules = true;
+      this.error.listInstalledModules = "";
       const taskAction = "list-installed-modules";
       const eventId = this.getUuid();
 
       // register to task error
-      this.$root.$once(
+      this.registerTaskListener(
         `${taskAction}-aborted-${eventId}`,
         this.listInstalledModulesAborted
       );
 
       // register to task completion
-      this.$root.$once(
+      this.registerTaskListener(
         `${taskAction}-completed-${eventId}`,
         this.listInstalledModulesCompleted
       );
@@ -948,6 +970,7 @@ export default {
         this.error.listInstalledModules = errMessage;
         this.currentErrorAction = this.$t("action." + taskAction);
         this.currentErrorDescription = errMessage;
+        this.loading.listInstalledModules = false;
         return;
       }
     },
@@ -1011,6 +1034,8 @@ export default {
       this.listCertificates();
     },
     async listCertificates() {
+      // a handler of a previous round would decrement the counter of this one
+      this.clearTaskListeners();
       this.offlineTraefikInstances = [];
       this.listCertificatesErrors = [];
       this.loading.listCertificatesNum = 0;
@@ -1022,7 +1047,7 @@ export default {
 
         // register to task events
 
-        this.$root.$once(
+        this.registerTaskListener(
           `${taskAction}-aborted-${eventId}`,
           (taskResult, taskContext) => {
             this.listCertificatesAborted(
@@ -1033,7 +1058,7 @@ export default {
           }
         );
 
-        this.$root.$once(
+        this.registerTaskListener(
           `${taskAction}-completed-${eventId}`,
           this.listCertificatesCompleted
         );
@@ -1181,7 +1206,7 @@ export default {
       this.decreaseListCertificatesNum();
     },
     decreaseListCertificatesNum() {
-      // never go below zero: the reconnection watcher resets the counter
+      // never go below zero: a new round resets the counter
       this.loading.listCertificatesNum = Math.max(
         0,
         this.loading.listCertificatesNum - 1

From 495c42fc141562e56b396c994319c752ff02d5e5 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Wed, 29 Jul 2026 14:36:34 +0200
Subject: [PATCH 7/8] TLS certificates page: count reads upfront and keep
 partial ACME rows (#1261)

* fix(ui): count ACME and certificate reads upfront

The counters were incremented inside the loop and decremented through a
helper clamped with Math.max(0, n - 1). The clamp hides two things: the
counter reaches zero between two iterations, so the table can leave its
loading state while the next task is still being created, and a surplus
decrement is silently swallowed instead of being impossible.

Set the counter to the number of instances before the loop and decrement
it plainly. clearTaskListeners() already makes a stale event unable to
reach a handler, so nothing is left to clamp.

Release listCertificatesNum when list-installed-modules is aborted: the
certificates chain never runs, and the skeleton rows stayed for good when
the abort followed a reconnection.

* fix(ui): keep the ACME rows readable when one node fails

error.getAcmeServer is a single shared string and NsDataTable renders its
error notification instead of the rows, so one unreachable node hid the
settings of every node that did answer.

Show the notification above the table when there are rows to keep, and
leave isErrorShown to the case where there is nothing else to display.
---
 .../src/components/settings/AcmeSettings.vue  | 32 +++++++++++--------
 .../settings/SettingsTlsCertificates.vue      | 20 +++++-------
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/core/ui/src/components/settings/AcmeSettings.vue b/core/ui/src/components/settings/AcmeSettings.vue
index 4be8e48f2a..a7b9168b05 100644
--- a/core/ui/src/components/settings/AcmeSettings.vue
+++ b/core/ui/src/components/settings/AcmeSettings.vue
@@ -8,6 +8,15 @@
       <cv-grid class="no-padding">
         <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 && servers.length"
+              kind="error"
+              :title="tableErrorTitle"
+              :description="tableErrorDescription"
+              :showCloseButton="false"
+            />
             <NsDataTable
               :allRows="servers"
               :columns="i18nTableColumns"
@@ -26,7 +35,7 @@
               "
               :isLoading="loadingServers"
               :skeletonRows="5"
-              :isErrorShown="!!instancesError || !!error.getAcmeServer"
+              :isErrorShown="!!tableError && !servers.length"
               :errorTitle="tableErrorTitle"
               :errorDescription="tableErrorDescription"
               :itemsPerPageLabel="$t('pagination.items_per_page')"
@@ -155,6 +164,9 @@ export default {
     loadingServers() {
       return this.isLoadingInstances || this.loading.getAcmeServerNum > 0;
     },
+    tableError() {
+      return this.instancesError || this.error.getAcmeServer;
+    },
     tableErrorTitle() {
       return this.instancesError
         ? this.$t("action.list-installed-modules")
@@ -218,15 +230,16 @@ export default {
     async getAcmeServer() {
       // a handler of a previous round would decrement the counter of this one
       this.clearTaskListeners();
-      this.loading.getAcmeServerNum = 0;
       this.servers = [];
       // 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
+      this.loading.getAcmeServerNum = this.traefikInstances.length;
 
       for (const traefikInstance of this.traefikInstances) {
         const taskAction = "get-acme-server";
         const eventId = this.getUuid();
-        this.loading.getAcmeServerNum++;
 
         // register to task events
 
@@ -262,7 +275,7 @@ export default {
           this.error.getAcmeServer = errMessage;
           this.currentErrorAction = this.$t("action." + taskAction);
           this.currentErrorDescription = errMessage;
-          this.decreaseGetAcmeServerNum();
+          this.loading.getAcmeServerNum--;
         }
       }
     },
@@ -271,7 +284,7 @@ export default {
       this.error.getAcmeServer = this.$t("error.generic_error");
       this.currentErrorAction = this.$t("action." + taskContext.action);
       this.currentErrorDescription = this.$t("error.generic_error");
-      this.decreaseGetAcmeServerNum();
+      this.loading.getAcmeServerNum--;
     },
     getAcmeServerCompleted(taskContext, taskResult) {
       const server = taskResult.output;
@@ -297,14 +310,7 @@ export default {
         this.servers.push(server);
       }
       this.servers.sort(this.sortByProperty("node"));
-      this.decreaseGetAcmeServerNum();
-    },
-    decreaseGetAcmeServerNum() {
-      // never go below zero: a new round resets the counter
-      this.loading.getAcmeServerNum = Math.max(
-        0,
-        this.loading.getAcmeServerNum - 1
-      );
+      this.loading.getAcmeServerNum--;
     },
     onReloadServers() {
       this.getAcmeServer();
diff --git a/core/ui/src/views/settings/SettingsTlsCertificates.vue b/core/ui/src/views/settings/SettingsTlsCertificates.vue
index ad46ea0727..2624886854 100644
--- a/core/ui/src/views/settings/SettingsTlsCertificates.vue
+++ b/core/ui/src/views/settings/SettingsTlsCertificates.vue
@@ -980,6 +980,8 @@ export default {
       this.currentErrorAction = this.$t("action." + taskContext.action);
       this.currentErrorDescription = this.$t("error.generic_error");
       this.loading.listInstalledModules = false;
+      // the certificates chain will not run: release its skeleton rows
+      this.loading.listCertificatesNum = 0;
     },
     listInstalledModulesCompleted(taskContext, taskResult) {
       // init nodes
@@ -1038,12 +1040,13 @@ export default {
       this.clearTaskListeners();
       this.offlineTraefikInstances = [];
       this.listCertificatesErrors = [];
-      this.loading.listCertificatesNum = 0;
+      // count the whole batch upfront: the counter must not reach zero between
+      // two iterations
+      this.loading.listCertificatesNum = this.traefikInstances.length;
 
       for (const traefikInstance of this.traefikInstances) {
         const taskAction = "list-certificates";
         const eventId = this.getUuid();
-        this.loading.listCertificatesNum++;
 
         // register to task events
 
@@ -1109,7 +1112,7 @@ export default {
               )} - ${this.getNodeLabel(traefikInstance)})`,
             });
           }
-          this.decreaseListCertificatesNum();
+          this.loading.listCertificatesNum--;
         }
       }
     },
@@ -1128,7 +1131,7 @@ export default {
           traefikInstance
         )} - ${this.getNodeLabel(traefikInstance)})`,
       });
-      this.decreaseListCertificatesNum();
+      this.loading.listCertificatesNum--;
     },
     listCertificatesCompleted(taskContext, taskResult) {
       const traefikId = taskContext.extra.traefikInstance.id;
@@ -1203,14 +1206,7 @@ export default {
       // $set() is needed for reactivity (see https://v2.vuejs.org/v2/guide/reactivity.html#For-Objects)
       this.$set(this.certificatesByTraefikId, traefikId, certs);
 
-      this.decreaseListCertificatesNum();
-    },
-    decreaseListCertificatesNum() {
-      // never go below zero: a new round resets the counter
-      this.loading.listCertificatesNum = Math.max(
-        0,
-        this.loading.listCertificatesNum - 1
-      );
+      this.loading.listCertificatesNum--;
     },
     getTagKind(status) {
       switch (status) {

From d3833f69fd737f2d9c3cf43b263cb7774dd0c502 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Wed, 29 Jul 2026 17:18:15 +0200
Subject: [PATCH 8/8] fix(ui): let the ACME settings table use the full page
 width

bx--grid caps its width at 99rem and centers itself, so the grid nested
in the tile left empty gutters on screens wider than 1584px. Put the
table directly in the tile, like the certificates tab does.
---
 .../src/components/settings/AcmeSettings.vue  | 176 ++++++++----------
 1 file changed, 82 insertions(+), 94 deletions(-)

diff --git a/core/ui/src/components/settings/AcmeSettings.vue b/core/ui/src/components/settings/AcmeSettings.vue
index a7b9168b05..b93b22ecbe 100644
--- a/core/ui/src/components/settings/AcmeSettings.vue
+++ b/core/ui/src/components/settings/AcmeSettings.vue
@@ -5,100 +5,88 @@
 <template>
   <div>
     <cv-tile light>
-      <cv-grid class="no-padding">
-        <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 && servers.length"
-              kind="error"
-              :title="tableErrorTitle"
-              :description="tableErrorDescription"
-              :showCloseButton="false"
-            />
-            <NsDataTable
-              :allRows="servers"
-              :columns="i18nTableColumns"
-              :rawColumns="tableColumns"
-              :sortable="true"
-              :pageSizes="[10, 25, 50, 100]"
-              :overflow-menu="true"
-              isSearchable
-              :searchPlaceholder="
-                $t('settings_acme_servers.search_acme_settings')
-              "
-              :searchClearLabel="$t('common.clear_search')"
-              :noSearchResultsLabel="$t('common.no_search_results')"
-              :noSearchResultsDescription="
-                $t('common.no_search_results_description')
-              "
-              :isLoading="loadingServers"
-              :skeletonRows="5"
-              :isErrorShown="!!tableError && !servers.length"
-              :errorTitle="tableErrorTitle"
-              :errorDescription="tableErrorDescription"
-              :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_acme_servers.no_acme_settings')"
-                >
-                  <template #description>
-                    <div>
-                      {{
-                        $t("settings_acme_servers.no_acme_settings_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>
-                    <span>
-                      {{ row.url }}
-                    </span>
-                  </cv-data-table-cell>
-                  <cv-data-table-cell>
-                    <NsTag
-                      v-if="row.challenge"
-                      :kind="getChallengeTagKind(row.challenge)"
-                      size="sm"
-                      :label="getChallengeLabel(row.challenge)"
-                    />
-                  </cv-data-table-cell>
-                  <cv-data-table-cell>
-                    <div class="justify-flex-end">
-                      <NsButton
-                        kind="ghost"
-                        :icon="Edit20"
-                        size="small"
-                        @click="showEditServerModal(row)"
-                        :data-test-id="row.nodeId + '-edit'"
-                        >{{ $t("common.edit") }}
-                      </NsButton>
-                    </div>
-                  </cv-data-table-cell>
-                </cv-data-table-row>
-              </template>
-            </NsDataTable>
-          </cv-column>
-        </cv-row>
-      </cv-grid>
+      <!-- no nested cv-grid: bx--grid caps at 99rem and centers, which leaves
+           empty gutters on screens wider than 1584px -->
+      <!-- NsDataTable replaces the rows with its error: report a partial
+           failure here, so the nodes that did answer stay readable -->
+      <NsInlineNotification
+        v-if="tableError && servers.length"
+        kind="error"
+        :title="tableErrorTitle"
+        :description="tableErrorDescription"
+        :showCloseButton="false"
+      />
+      <NsDataTable
+        :allRows="servers"
+        :columns="i18nTableColumns"
+        :rawColumns="tableColumns"
+        :sortable="true"
+        :pageSizes="[10, 25, 50, 100]"
+        :overflow-menu="true"
+        isSearchable
+        :searchPlaceholder="$t('settings_acme_servers.search_acme_settings')"
+        :searchClearLabel="$t('common.clear_search')"
+        :noSearchResultsLabel="$t('common.no_search_results')"
+        :noSearchResultsDescription="$t('common.no_search_results_description')"
+        :isLoading="loadingServers"
+        :skeletonRows="5"
+        :isErrorShown="!!tableError && !servers.length"
+        :errorTitle="tableErrorTitle"
+        :errorDescription="tableErrorDescription"
+        :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_acme_servers.no_acme_settings')">
+            <template #description>
+              <div>
+                {{ $t("settings_acme_servers.no_acme_settings_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>
+              <span>
+                {{ row.url }}
+              </span>
+            </cv-data-table-cell>
+            <cv-data-table-cell>
+              <NsTag
+                v-if="row.challenge"
+                :kind="getChallengeTagKind(row.challenge)"
+                size="sm"
+                :label="getChallengeLabel(row.challenge)"
+              />
+            </cv-data-table-cell>
+            <cv-data-table-cell>
+              <div class="justify-flex-end">
+                <NsButton
+                  kind="ghost"
+                  :icon="Edit20"
+                  size="small"
+                  @click="showEditServerModal(row)"
+                  :data-test-id="row.nodeId + '-edit'"
+                  >{{ $t("common.edit") }}
+                </NsButton>
+              </div>
+            </cv-data-table-cell>
+          </cv-data-table-row>
+        </template>
+      </NsDataTable>
     </cv-tile>
     <EditAcmeServerModal
       :isShown="isShownEditServerModal"