TLS certificates page: ACME settings tab with challenge type selection by stephdl · Pull Request #1257 · NethServer/ns8-core

stephdl · 2026-07-28T08:32:25Z

Description

The TLS certificates page had a separate ACME servers page reachable through a top-right button, and the ACME challenge type — already accepted by set-acme-server — was exposed nowhere, so TLS-ALPN-01 (needed when port 80 is unavailable) required editing traefik.yaml by hand.

This PR merges the two pages into two tabs, Certificates and ACME settings, and exposes the challenge type as a tag per node plus a required radio group in the edit modal. Options come from a single ACME_CHALLENGE_TYPES array, so DNS-01 is one entry plus one translation key away; it is left out here because it needs extra fields. The ACME table columns become Node, ACME directory URL, Challenge type, which also fixes the previous wrong order, and /settings/acme-servers redirects to /settings/tls-certificates?view=acme.

Settings remain per node. No backend change: set-acme-server already validates challenge and get-acme-server already returns it.

Surviving the Traefik restart

set-acme-server restarts Traefik, which serves the admin UI and its websocket, so the completion event carrying the table refresh is lost: stale values and skeleton rows until a manual reload. The Certificates tab has the same problem through cert_helpers.purge_acme_json_and_restart_traefik. Both tabs now watch the Vuex isWebsocketConnected flag and reload on reconnection; counters are clamped and ACME rows keyed by Traefik instance, so a late event cannot unbalance a counter or duplicate a row. The Reload required warning is gone, and the restart warning is no longer gated on the leader node — the restart happens on whichever node is edited. Mechanism borrowed from #1258, which fixes the same thing on HTTP routes; a shared mixin is the follow-up once both land.

Design

Mockups: Figma, design issue NethServer/dev#7973.

Refs: NethServer/dev#8099

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.

andre8244 · 2026-08-07T08:13:05Z

-        "no_acme_server_description": "There is no ACME server configured",
-        "url": "URL",
+        "acme_settings": "ACME settings",
+        "search_acme_settings": "Search ACME settings",


Suggested change

"search_acme_settings": "Search ACME settings",

"search_acme_settings": "Search",

andre8244 · 2026-08-24T08:05:14Z

+        "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.",


Suggested change

"acme_restart_message": "HTTP clients on {node} will be briefly disconnected. Reload the page if necessary.",

"acme_restart_message": "HTTP clients on {node} will be briefly disconnected. The page should reload automatically — otherwise, reload it manually..",

Applied, minus the double period at the end.

One thing to check: the app never reloads by itself. When Traefik restarts on the leader, the websocket drops and App.vue shows a persistent warning toast with a "Reload" action, then retries the connection after 10 seconds. So the page recovers on its own, but it does not reload. Is "reload automatically" still the wording you want, or would "reconnect automatically" be closer?

Ok, but IIRC the websocket warning toast disappears as soon as the connection is resumed, right?

Anyway, for the message I propose "HTTP clients on {node} will be briefly disconnected. The connection should resume automatically — otherwise, reload the page manually."

Ok, but IIRC the websocket warning toast disappears as soon as the connection is resumed, right?

Yes and once reconnected we trigger all the list-/get- function

Done, applied your wording.

andre8244 · 2026-08-24T08:15:48Z

+              />
+            </cv-data-table-cell>
+            <cv-data-table-cell>
+              <div class="justify-flex-end">


We can use class="flex justify-end", these class already exist here https://github.com/NethServer/ns8-core/blob/main/core/ui/src/styles/_utils.scss

andre8244 · 2026-08-24T08:17:03Z

+<style scoped lang="scss">
+@import "../../styles/carbon-utils";
+
+.justify-flex-end {


We can remove this class

andre8244 · 2026-08-24T08:52:12Z

+
+// 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,


Are these CSS rules needed? 🤔

Half of them were, yes. I measured it in the browser: carbon already sets cursor: pointer via .bx--tooltip__trigger:not(.bx--btn--icon-only), so the rule on the trigger did nothing. I removed it.

But .bx--tag sets cursor: default, so the pointer was lost when hovering the "Obsolete" tag itself, which is the trigger content. I kept one narrow rule for that case:

// carbon's .bx--tag forces a default cursor, hiding that the tooltip opens on click .clickable-tag ::v-deep .bx--tag { cursor: pointer; }

Happy to drop it too if you would rather not special-case the tag.

IIRC the tooltip is shown on click, not on hover, right? So we need a visual cue (the cursor pointer) to show the element as interactive. Let's keep only the .clickable-tag ::v-deep .bx--tag rule.

andre8244 · 2026-08-24T08:56:18Z

+            :noDefaultToFirst="true"
+            @tab-selected="tabSelected"
+          >
+            <cv-tab


This file has become very big (~1500 loc), maybe we can try to externalize two components, e.g. TlsCertficatesPanel and AcmeSettingsPanel

Done. SettingsTlsCertificates.vue is down to 289 lines: page chrome, tab state, and the list-installed-modules chain whose Traefik instance list both tabs consume. The certificates tab moved to TlsCertificatesPanel.vue, and AcmeSettings.vue is now AcmeSettingsPanel.vue for symmetry.

Two notes on the wiring:

The node filter is bound to a query param, and watchQueryData is bound to the view instance in beforeRouteEnter, so the view still owns selectedNodeId and passes it down with .sync.

The panel now runs listCertificates() from a watcher on traefikInstances instead of being called at the end of listInstalledModulesCompleted, same trigger AcmeSettingsPanel already used.

I also dropped the selectedNodeLabel computed while moving the code; it was defined and never referenced, already dead on main.

Tested on a live single-node cluster: both tabs, filters, query params, the upload modal and its error mapping, the tooltips, and the ACME edit modal.

Follow review feedback: the search box label repeated the table title, and the restart notice did not say the page comes back on its own.

styles/_utils.scss is imported globally, so the local justify-flex-end rule duplicated flex and justify-end. Removing it empties the style block.

The view had grown past 1500 lines. Move the certificates tab into TlsCertificatesPanel and rename AcmeSettings to AcmeSettingsPanel, leaving the view with the page chrome, the tab state and the shared Traefik instance list it feeds to both panels. The node filter stays bound to a query param, so the view owns it and passes it down with .sync. Drop the selectedNodeLabel computed, which was never referenced. Also narrow the tooltip cursor rule: carbon already sets a pointer on the tooltip trigger, only .bx--tag overrides it.

Drop comments the code already states and shorten the ones worth keeping.

stephdl force-pushed the sdl-8099 branch 3 times, most recently from 0b7fcc7 to fb61806 Compare July 28, 2026 13:33

stephdl mentioned this pull request Jul 29, 2026

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

Merged

7 tasks

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

stephdl added 7 commits August 6, 2026 17:03

feat(i18n): rename ACME servers to ACME settings and add new keys

15a06e8

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.

feat(ui): add AcmeSettings component for ACME server management

8e6f781

feat(ui): add ACME challenge type selection to edit modal

f7a1f6a

fix(settings): show save label when editing existing TLS certificate

f37f8bc

refactor(ui): redirect acme-servers route to TLS certificates tab

aa6a657

refactor(ui): remove unused SettingsAcmeServers view

0ca77c5

feat(ui): merge ACME settings into TLS certificates page as tabs

a22fa5b

stephdl force-pushed the sdl-8099 branch from e39d18a to a22fa5b Compare August 6, 2026 15:05

stephdl requested review from andre8244 and removed request for AmaLuci August 6, 2026 15:05

andre8244 reviewed Aug 24, 2026

View reviewed changes

stephdl added 6 commits August 25, 2026 15:08

fix(i18n): reword ACME search placeholder and restart message

f81eb57

Follow review feedback: the search box label repeated the table title, and the restart notice did not say the page comes back on its own.

refactor(ui): use global flex utilities in ACME settings table

44e65f1

styles/_utils.scss is imported globally, so the local justify-flex-end rule duplicated flex and justify-end. Removing it empties the style block.

style(ui): trim redundant comments from the TLS certificates pages

9413c25

Drop comments the code already states and shorten the ones worth keeping.

fix(i18n): reword ACME restart message

a202ccd

stephdl requested a review from andre8244 August 26, 2026 12:05

andre8244 approved these changes Aug 27, 2026

View reviewed changes

Navigation Menu

Uh oh!

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

TLS certificates page: ACME settings tab with challenge type selection#1257
stephdl wants to merge 13 commits into
mainfrom
sdl-8099

stephdl commented Jul 28, 2026 •

edited

Loading

Uh oh!

andre8244 Aug 7, 2026

Uh oh!

andre8244 Aug 24, 2026

Uh oh!

stephdl Aug 25, 2026

Uh oh!

andre8244 Aug 26, 2026 •

edited

Loading

Uh oh!

stephdl Aug 26, 2026 •

edited

Loading

Uh oh!

stephdl Aug 26, 2026

Uh oh!

andre8244 Aug 24, 2026

Uh oh!

andre8244 Aug 24, 2026

Uh oh!

andre8244 Aug 24, 2026

Uh oh!

stephdl Aug 25, 2026

Uh oh!

andre8244 Aug 26, 2026

Uh oh!

andre8244 Aug 24, 2026

Uh oh!

stephdl Aug 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	"search_acme_settings": "Search ACME settings",
	"search_acme_settings": "Search",

	"acme_restart_message": "HTTP clients on {node} will be briefly disconnected. Reload the page if necessary.",
	"acme_restart_message": "HTTP clients on {node} will be briefly disconnected. The page should reload automatically — otherwise, reload it manually..",

Uh oh!

Conversation

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

Uh oh!

Description

Surviving the Traefik restart

Design

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

andre8244 Aug 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

stephdl commented Jul 28, 2026 •

edited

Loading

andre8244 Aug 26, 2026 •

edited

Loading

stephdl Aug 26, 2026 •

edited

Loading