From 15a06e88c625e28c8f46a337a58aa2251d8554c7 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Thu, 6 Aug 2026 17:03:25 +0200
Subject: [PATCH 1/7] feat(i18n): rename ACME servers to ACME settings and add
 new keys

Rename settings_acme_servers translation keys to reflect ACME settings
terminology, add challenge type and restart message keys, and add
certificates/obsolete_tooltip keys for TLS certificates.
---
 core/ui/public/i18n/en/translation.json | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/core/ui/public/i18n/en/translation.json b/core/ui/public/i18n/en/translation.json
index 8330ac4fc..bb1e3f1b6 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",
@@ -889,6 +890,7 @@
         "uploaded": "Uploaded",
         "automatic": "Automatic",
         "obsolete": "Obsolete",
+        "obsolete_tooltip": "No longer referenced by any application, HTTP route, or user request. It may still be reachable by clients until renewed or deleted.",
         "valid": "Valid",
         "expiring": "Expiring",
         "expired": "Expired",
@@ -931,16 +933,20 @@
         "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",
+        "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",
-        "edit_acme_server": "Edit ACME server",
-        "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"
+        "challenge": "Challenge type",
+        "challenge_http_01": "HTTP-01",
+        "challenge_tls_alpn_01": "TLS-ALPN-01",
+        "edit_acme_settings": "Edit ACME settings",
+        "acme_settings_for_node": "ACME settings for {node}",
+        "acme_restart_message": "HTTP clients on {node} will be briefly disconnected. Reload the page if necessary.",
+        "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.",

From 8e6f781606c82eab7025c721c0ae7bcab6056391 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Thu, 6 Aug 2026 17:03:40 +0200
Subject: [PATCH 2/7] feat(ui): add AcmeSettings component for ACME server
 management

---
 .../src/components/settings/AcmeSettings.vue  | 317 ++++++++++++++++++
 1 file changed, 317 insertions(+)
 create mode 100644 core/ui/src/components/settings/AcmeSettings.vue

diff --git a/core/ui/src/components/settings/AcmeSettings.vue b/core/ui/src/components/settings/AcmeSettings.vue
new file mode 100644
index 000000000..b93b22ecb
--- /dev/null
+++ b/core/ui/src/components/settings/AcmeSettings.vue
@@ -0,0 +1,317 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<template>
+  <div>
+    <cv-tile light>
+      <!-- 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"
+      :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, {
+  ACME_CHALLENGE_TYPES,
+} from "@/components/settings/EditAcmeServerModal.vue";
+
+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: "",
+      currentServer: null,
+      // [eventName, handler] pairs registered on $root
+      taskListeners: [],
+      loading: {
+        getAcmeServerNum: 0,
+      },
+      error: {
+        getAcmeServer: "",
+      },
+    };
+  },
+  computed: {
+    i18nTableColumns() {
+      return this.tableColumnLabelKeys.map((key) => this.$t(key));
+    },
+    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")
+        : this.currentErrorAction;
+    },
+    tableErrorDescription() {
+      return this.instancesError || this.currentErrorDescription;
+    },
+  },
+  watch: {
+    // the parent republishes the instances after a Traefik restart killed the
+    // websocket, which is also how this table recovers
+    traefikInstances: function () {
+      this.getAcmeServer();
+    },
+  },
+  created() {
+    if (this.traefikInstances.length) {
+      this.getAcmeServer();
+    }
+  },
+  beforeDestroy() {
+    // a task completing after destroy would re-fire the whole task chain
+    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);
+    },
+    getChallengeTagKind(challenge) {
+      const challengeType = this.getChallengeType(challenge);
+      // 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;
+    },
+    hideEditServerModal() {
+      this.isShownEditServerModal = false;
+    },
+    clearTableError() {
+      this.error.getAcmeServer = "";
+      this.currentErrorAction = "";
+      this.currentErrorDescription = "";
+    },
+    async getAcmeServer() {
+      // a handler of a previous round would decrement the counter of this one
+      this.clearTaskListeners();
+      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();
+
+        // 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;
+
+      // 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--;
+    },
+    onReloadServers() {
+      this.getAcmeServer();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../styles/carbon-utils";
+
+.justify-flex-end {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

From f7a1f6aa2a39b4413d5aca9f0e444900cb4d504f Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Thu, 6 Aug 2026 17:04:01 +0200
Subject: [PATCH 3/7] feat(ui): add ACME challenge type selection to edit modal

---
 .../settings/EditAcmeServerModal.vue          | 187 +++++++++++++++---
 1 file changed, 163 insertions(+), 24 deletions(-)

diff --git a/core/ui/src/components/settings/EditAcmeServerModal.vue b/core/ui/src/components/settings/EditAcmeServerModal.vue
index dcf73e0c8..f9caa47db 100644
--- a/core/ui/src/components/settings/EditAcmeServerModal.vue
+++ b/core/ui/src/components/settings/EditAcmeServerModal.vue
@@ -12,29 +12,70 @@
     @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_settings")
     }}</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>
+        <!-- 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"
         />
         <NsTextInput
           v-model.trim="url"
-          :label="$t('settings_acme_servers.url')"
+          :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
           ref="url"
         />
+        <!-- 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"
+          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 must be per button: cv-radio-group has no such prop -->
+              <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>
+          <div
+            v-if="error.challenge"
+            class="bx--form-requirement challenge-error"
+          >
+            {{ error.challenge }}
+          </div>
+        </div>
         <NsInlineNotification
           v-if="error.setAcmeServer"
           kind="error"
@@ -45,16 +86,30 @@
       </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>
 
 <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 = [
+  {
+    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",
@@ -68,26 +123,68 @@ export default {
   data() {
     return {
       url: "",
+      challenge: DEFAULT_ACME_CHALLENGE_TYPE,
       loading: {
         setAcmeServer: false,
       },
       error: {
         setAcmeServer: "",
         url: "",
+        challenge: "",
       },
+      // [eventName, handler] pairs registered on $root
+      taskListeners: [],
     };
   },
   computed: {
-    ...mapGetters(["leaderNode"]),
+    ...mapState(["isWebsocketConnected"]),
+    challengeTypes() {
+      return ACME_CHALLENGE_TYPES;
+    },
+    isChallengeSupported() {
+      return !!this.server && this.server.challenge !== undefined;
+    },
   },
   watch: {
+    isWebsocketConnected: function (isConnected) {
+      // 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.error.setAcmeServer = this.$t(
+          "settings_acme_servers.save_result_unknown"
+        );
+        this.$emit("reloadServers");
+      }
+    },
     isShown: function () {
       if (this.isShown) {
         this.url = this.server.url;
+        // 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.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");
@@ -106,6 +203,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,35 +226,46 @@ 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
       );
 
+      // the action sets additionalProperties false: send only reported fields
+      const data = { url: this.url };
+
+      if (this.isChallengeSupported) {
+        data.challenge = this.challenge;
+      }
+
+      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;
+      }
+
       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"),
+            title: this.$t("settings_acme_servers.edit_acme_settings"),
             description: this.$t("common.processing"),
             eventId,
           },
@@ -182,14 +301,21 @@ 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;
+        // 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) {
+            this.focusElement(param);
+            focusAlreadySet = true;
+          }
+        } else {
+          this.error.setAcmeServer = message;
         }
       }
     },
@@ -205,4 +331,17 @@ export default {
 
 <style scoped lang="scss">
 @import "../../styles/carbon-utils";
+
+.bx--inline-notification {
+  max-width: 38rem;
+}
+
+// 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;
+  overflow: visible;
+  color: #da1e28;
+}
 </style>

From f37f8bc73a822e69c0435acef2e5b2927d23d922 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Thu, 6 Aug 2026 17:04:17 +0200
Subject: [PATCH 4/7] fix(settings): show save label when editing existing TLS
 certificate

---
 .../ui/src/components/settings/RequestTlsCertificateModal.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/core/ui/src/components/settings/RequestTlsCertificateModal.vue b/core/ui/src/components/settings/RequestTlsCertificateModal.vue
index 55595ae57..c40b57bf4 100644
--- a/core/ui/src/components/settings/RequestTlsCertificateModal.vue
+++ b/core/ui/src/components/settings/RequestTlsCertificateModal.vue
@@ -137,7 +137,9 @@
     </template>
     <template slot="secondary-button">{{ $t("common.cancel") }}</template>
     <template slot="primary-button">{{
-      $t("settings_tls_certificates.request_certificate")
+      certificate
+        ? $t("common.save")
+        : $t("settings_tls_certificates.request_certificate")
     }}</template>
   </NsModal>
 </template>

From aa6a6572bd60447ce26eec834c95282fba0b7cc0 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Thu, 6 Aug 2026 17:04:32 +0200
Subject: [PATCH 5/7] refactor(ui): redirect acme-servers route to TLS
 certificates tab

---
 core/ui/src/router/index.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/core/ui/src/router/index.js b/core/ui/src/router/index.js
index 1679cfc83..e2adbbe3a 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",

From 0ca77c5c20f84a8c4d44eb7ad64984a52b3885bf Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Thu, 6 Aug 2026 17:04:45 +0200
Subject: [PATCH 6/7] refactor(ui): remove unused SettingsAcmeServers view

---
 .../views/settings/SettingsAcmeServers.vue    | 396 ------------------
 1 file changed, 396 deletions(-)
 delete mode 100644 core/ui/src/views/settings/SettingsAcmeServers.vue

diff --git a/core/ui/src/views/settings/SettingsAcmeServers.vue b/core/ui/src/views/settings/SettingsAcmeServers.vue
deleted file mode 100644
index bf1168ffe..000000000
--- 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>

From a22fa5b47f0b45d4f9e64b9a96a2c78ea020b913 Mon Sep 17 00:00:00 2001
From: Stephane de Labrusse <stephdl@de-labrusse.fr>
Date: Thu, 6 Aug 2026 17:04:59 +0200
Subject: [PATCH 7/7] feat(ui): merge ACME settings into TLS certificates page
 as tabs

---
 .../settings/SettingsTlsCertificates.vue      | 956 ++++++++++--------
 1 file changed, 553 insertions(+), 403 deletions(-)

diff --git a/core/ui/src/views/settings/SettingsTlsCertificates.vue b/core/ui/src/views/settings/SettingsTlsCertificates.vue
index d61cce9bd..eb8d31c39 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,488 @@
     <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-interactive-tooltip
+                                  v-if="row.ui_type === 'obsolete'"
+                                  alignment="start"
+                                  direction="right"
+                                  class="info clickable-tooltip"
+                                >
+                                  <template #trigger>
+                                    <cv-tag
+                                      kind="high-contrast"
+                                      :label="
+                                        $t('settings_tls_certificates.obsolete')
+                                      "
+                                      class="no-margin"
+                                    ></cv-tag>
+                                  </template>
+                                  <template #content>
+                                    {{
+                                      $t(
+                                        "settings_tls_certificates.obsolete_tooltip"
+                                      )
+                                    }}
+                                  </template>
+                                </cv-interactive-tooltip>
+                                <cv-tag
+                                  v-else-if="row.ui_type === 'automatic'"
+                                  kind="gray"
+                                  :label="
+                                    $t('settings_tls_certificates.automatic')
+                                  "
+                                  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 clickable-tooltip"
+                                >
+                                  <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.acme_settings')"
+              :selected="q.view === 'acme'"
+            >
+              <cv-row>
+                <cv-column>
+                  <AcmeSettings
+                    v-if="acmeTabVisited"
+                    :traefikInstances="traefikInstances"
+                    :isLoadingInstances="loading.listInstalledModules"
+                    :instancesError="error.listInstalledModules"
+                  />
+                </cv-column>
+              </cv-row>
+            </cv-tab>
+          </NsTabs>
         </cv-column>
       </cv-row>
     </cv-grid>
@@ -462,6 +542,7 @@
       :isShown="isShownDeleteCertificateModal"
       :name="currentCertificate ? currentCertificate.ui_name : ''"
       :title="$t('settings_tls_certificates.delete_certificate')"
+      :deleteLabel="$t('common.delete')"
       :description="
         $t('settings_tls_certificates.delete_certificate_description', {
           name: currentCertificate ? currentCertificate.ui_name : '',
@@ -526,6 +607,10 @@ 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";
+
+// order must match the cv-tab order: tabSelected maps the tab index
+const TAB_VIEWS = ["certificates", "acme"];
 
 export default {
   name: "SettingsTlsCertificates",
@@ -534,6 +619,7 @@ export default {
     UploadTlsCertificateModal,
     DeleteObsoleteCertificatesModal,
     WarningAltFilled16,
+    AcmeSettings,
   },
   mixins: [
     TaskService,
@@ -549,8 +635,11 @@ export default {
   data() {
     return {
       q: {
+        view: "",
         selectedNodeId: "",
       },
+      // mount once and keep alive: a v-if would re-run the task chain
+      acmeTabVisited: false,
       tablePage: [],
       tableColumns: [
         "ui_name",
@@ -570,6 +659,8 @@ export default {
       currentErrorDescription: "",
       traefikInstances: [],
       currentCertificate: null,
+      // [eventName, handler] pairs registered on $root
+      taskListeners: [],
       filter: {
         text: "",
         certificateType: "",
@@ -641,7 +732,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["clusterNodes"]),
+    ...mapState(["clusterNodes", "isWebsocketConnected"]),
     i18nTableColumns() {
       return this.tableColumns.map((column) => {
         return this.$t("settings_tls_certificates." + column);
@@ -778,12 +869,35 @@ export default {
     next((vm) => {
       vm.watchQueryData(vm);
       vm.queryParamsToDataForCore(vm, to.query);
+      // with noDefaultToFirst, an unknown or empty view selects no tab at all
+      vm.normalizeView();
     });
   },
   beforeRouteUpdate(to, from, next) {
     this.queryParamsToDataForCore(this, to.query);
+    // queryParamsToDataForCore skips keys absent from the query
+    if (typeof to.query.view === "undefined") {
+      this.q.view = TAB_VIEWS[0];
+    }
+    this.normalizeView();
     next();
   },
+  watch: {
+    isWebsocketConnected: function (isConnected) {
+      // a Traefik restart kills this websocket: pending task events are lost.
+      // Always restart from the instance list, it chains everything else and
+      // republishes traefikInstances for the ACME tab
+      if (isConnected) {
+        this.listInstalledModules();
+      }
+    },
+    "q.view": function (view) {
+      // covers both the tab click and the deep link
+      if (view === "acme") {
+        this.acmeTabVisited = true;
+      }
+    },
+  },
   created() {
     // register to events
     this.$root.$on("reloadCertificates", this.onReloadCertificates);
@@ -798,8 +912,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;
@@ -825,18 +950,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
       );
@@ -857,6 +985,7 @@ export default {
         this.error.listInstalledModules = errMessage;
         this.currentErrorAction = this.$t("action." + taskAction);
         this.currentErrorDescription = errMessage;
+        this.loading.listInstalledModules = false;
         return;
       }
     },
@@ -866,6 +995,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
@@ -920,18 +1051,21 @@ 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;
+      // 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
 
-        this.$root.$once(
+        this.registerTaskListener(
           `${taskAction}-aborted-${eventId}`,
           (taskResult, taskContext) => {
             this.listCertificatesAborted(
@@ -942,7 +1076,7 @@ export default {
           }
         );
 
-        this.$root.$once(
+        this.registerTaskListener(
           `${taskAction}-completed-${eventId}`,
           this.listCertificatesCompleted
         );
@@ -1192,8 +1326,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
@@ -1375,4 +1518,11 @@ export default {
 .icon-and-text {
   justify-content: flex-start;
 }
+
+// carbon renders the interactive tooltip trigger as a button with a default
+// cursor, which hides the fact the tooltip opens on click
+.clickable-tooltip ::v-deep .bx--tooltip__trigger,
+.clickable-tooltip ::v-deep .bx--tooltip__trigger * {
+  cursor: pointer;
+}
 </style>