ui: toast per-type durations, Details modal for long errors, concise acme.sh failure summary

This commit is contained in:
2026-09-03 03:29:50 +00:00
parent 7e6fd71bdc
commit d78b90db00
5 changed files with 146 additions and 16 deletions
+9 -1
View File
@@ -677,7 +677,15 @@ const res = await apiFetch('/api/firewall/zones', { method: 'GET' });
### `toast(message, type, duration)` ### `toast(message, type, duration)`
Show a toast notification. Auto-dismisses after `duration` ms (default 4000). `type` is one of `'info'`, `'success'`, `'error'`, `'warning'`. Returns a toast ID. Show a toast notification. `type` is one of `'info'`, `'success'`, `'error'`, `'warning'`. Returns a toast ID.
When `duration` is omitted, per-type defaults apply: `'info'` and `'success'` auto-dismiss after 4000 ms, `'warning'` after 8000 ms, and `'error'` toasts **never** auto-dismiss (they stay until dismissed so long failure messages remain readable). Pass an explicit `duration` (ms, `0` = indefinite) to override the default.
Toast behavior:
- Dismissal is only via the `×` button (or `dismissToast(id)`); clicking the toast body does not dismiss it.
- The auto-dismiss timer pauses while the pointer is over the toast.
- Long messages (>200 chars or containing newlines) render compact — first line, ellipsized — with a **Details** button that opens a modal showing the full text in a scrollable mono block.
### `dismissToast(id)` ### `dismissToast(id)`
+27 -5
View File
@@ -98,11 +98,15 @@ def _run_acme(args: list[str]) -> str:
*args, *args,
# Append the full transcript to $ACME_HOME/acme.sh.log so manual # Append the full transcript to $ACME_HOME/acme.sh.log so manual
# runs (whose stdout is captured below) leave a persistent record # runs (whose stdout is captured below) leave a persistent record
# of the raw CA exchange. Last on purpose: acme.sh treats the next # of the raw CA exchange. The log file is passed explicitly (never
# token after --log as its optional file argument, so a trailing # as a bare trailing --log): a valueless trailing --log makes
# --log defaults the log to $LE_CONFIG_HOME/acme.sh.log and can # acme.sh's arg loop double-shift under dash (the --log branch
# never swallow a real argument. # shifts once, then the loop's trailing `shift 1` runs with zero
# positional params) and fails with "shift: can't shift that many"
# (exit 2). The explicit path keeps the same default destination
# ($LE_CONFIG_HOME/acme.sh.log) and can never swallow a real arg.
"--log", "--log",
str(Path(acme_home_env) / "acme.sh.log"),
] ]
try: try:
@@ -125,12 +129,30 @@ def _run_acme(args: list[str]) -> str:
if result.returncode != 0: if result.returncode != 0:
logger.error("acme.sh failed (rc=%d): %s", result.returncode, output.strip()) logger.error("acme.sh failed (rc=%d): %s", result.returncode, output.strip())
raise RuntimeError( raise RuntimeError(
f"acme.sh failed with exit code {result.returncode}: {output.strip()}" f"acme.sh failed with exit code {result.returncode}: "
f"{_summarize_acme_output(output)}"
) )
return output return output
def _summarize_acme_output(output: str) -> str:
"""Reduce raw acme.sh output to a concise, human-readable summary.
acme.sh prints timestamped transcript lines; the failure reason is
in the final lines (e.g. "The retryafter=86400 value is too large
(> 600), will not retry anymore."). Strips per-line timestamps and
the "Please check log file" pointer so the summary stays toast-
sized. The full transcript remains in the log and acme.sh.log.
"""
lines = [line.strip() for line in output.strip().splitlines() if line.strip()]
lines = [re.sub(r"^\[[^\]]*\] ", "", line) for line in lines]
lines = [line for line in lines if not line.startswith("Please check log file")]
if not lines:
return "(no output)"
return "; ".join(lines[-2:])
def set_email(email: str) -> None: def set_email(email: str) -> None:
"""Configure the default ACME contact email. """Configure the default ACME contact email.
+38 -4
View File
@@ -107,19 +107,53 @@ export const _toasts = [];
const _toastIds = { next: 1 }; const _toastIds = { next: 1 };
/** /**
* Show a toast notification. Auto-dismisses after `duration` ms. * Default auto-dismiss durations per toast type (ms). 0 = never
* auto-dismiss. Errors stay on screen until dismissed so long
* failure messages remain readable.
*/
const _TOAST_DEFAULT_DURATIONS = {
info: 4000,
success: 4000,
warning: 8000,
error: 0,
};
/**
* Auto-dismiss timer that pauses while the toast is hovered.
* Re-checks in 1s while hovered instead of dismissing.
*/
function _scheduleToastDismiss(id, delay) {
setTimeout(() => {
const t = _toasts.find(t => t.id === id);
if (!t) return;
if (t.hovered) _scheduleToastDismiss(id, 1000);
else dismissToast(id);
}, delay);
}
/**
* Show a toast notification.
*
* When `duration` is omitted, per-type defaults apply: 'info' and
* 'success' auto-dismiss after 4000 ms, 'warning' after 8000 ms, and
* 'error' toasts never auto-dismiss. An explicit `duration` overrides
* the default. The auto-dismiss timer pauses while the toast is
* hovered.
* *
* @param {string} message Toast text * @param {string} message Toast text
* @param {string} [type] 'info' | 'success' | 'error' | 'warning' * @param {string} [type] 'info' | 'success' | 'error' | 'warning'
* @param {number} [duration] Auto-dismiss timeout in ms (0 = indefinite) * @param {number} [duration] Auto-dismiss timeout in ms (0 = indefinite)
* @returns {number} id * @returns {number} id
*/ */
export function toast(message, type = 'info', duration = 4000) { export function toast(message, type = 'info', duration) {
const id = _toastIds.next++; const id = _toastIds.next++;
_toasts.push({ id, message, type, createdAt: Date.now(), duration }); const dur = duration === undefined
? (_TOAST_DEFAULT_DURATIONS[type] ?? 4000)
: duration;
_toasts.push({ id, message, type, createdAt: Date.now(), duration: dur, hovered: false });
requestUpdate(); requestUpdate();
if (duration > 0) setTimeout(() => dismissToast(id), duration); if (dur > 0) _scheduleToastDismiss(id, dur);
return id; return id;
} }
+41 -6
View File
@@ -3,10 +3,38 @@
* *
* ToastContainer component that renders queued toast notifications. * ToastContainer component that renders queued toast notifications.
* Uses the toast/dismissToast state from api.js. * Uses the toast/dismissToast state from api.js.
*
* Long messages (>200 chars or containing newlines) render compact —
* first line with an ellipsis — plus a "Details" button that opens a
* modal with the full text. Dismissal is only via the × button;
* hovering the toast pauses its auto-dismiss timer.
*/ */
import { h } from '../vdom.js'; import { h } from '../vdom.js';
import { _toasts, dismissToast } from '../api.js'; import { _toasts, dismissToast } from '../api.js';
import { openModal } from './modal.js';
/** Messages longer than this (or containing newlines) render compact. */
const _LONG_MESSAGE_CHARS = 200;
function _isLong(message) {
return message.length > _LONG_MESSAGE_CHARS || message.includes('\n');
}
function _firstLine(message) {
return message.split('\n')[0].trim();
}
function _showDetails(t) {
openModal(
h('div', null,
h('h2', { class: 'modal-title' }, 'Details'),
h('div', { class: 'modal-body' },
h('pre', { class: 'toast-details-msg' }, t.message),
),
),
);
}
/** /**
* Render all pending toast notifications. * Render all pending toast notifications.
@@ -24,19 +52,26 @@ export function ToastContainer() {
}; };
return h('div', { class: 'toast' }, return h('div', { class: 'toast' },
..._toasts.map(t => ..._toasts.map(t => {
h('div', { const long = _isLong(t.message);
return h('div', {
class: `toast-message ${clsMap[t.type] || clsMap.info}`, class: `toast-message ${clsMap[t.type] || clsMap.info}`,
'on:click': () => dismissToast(t.id), 'on:mouseover': () => { t.hovered = true; },
'on:mouseout': () => { t.hovered = false; },
}, },
h('span', { class: 'toast-text' }, t.message), h('span', { class: 'toast-text' + (long ? ' toast-text-long' : '') },
long ? _firstLine(t.message) : t.message),
h('div', { class: 'toast-actions' }, h('div', { class: 'toast-actions' },
long ? h('button', {
class: 'toast-btn toast-details',
'on:click': (e) => { e.stopPropagation(); _showDetails(t); },
}, 'Details') : null,
h('button', { h('button', {
class: 'toast-btn toast-close', class: 'toast-btn toast-close',
'on:click': (e) => { e.stopPropagation(); dismissToast(t.id); }, 'on:click': (e) => { e.stopPropagation(); dismissToast(t.id); },
}, '\u00d7'), }, '\u00d7'),
), ),
), );
), }),
); );
} }
+31
View File
@@ -380,6 +380,37 @@ body {
white-space: pre-wrap; white-space: pre-wrap;
} }
/* Compact rendering for long messages: single line, ellipsized. */
.toast-message .toast-text-long {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.toast-message .toast-details {
font-size: 12px;
text-decoration: underline;
text-underline-offset: 2px;
padding: 0 4px;
}
/* Full message inside the toast Details modal. */
.toast-details-msg {
font-family: monospace;
font-size: 0.8rem;
line-height: 1.4;
white-space: pre-wrap;
word-break: break-word;
margin: 0;
padding: 0.75rem;
background: rgba(0, 0, 0, 0.35);
border: 1px solid var(--border);
border-radius: 6px;
max-height: 60vh;
overflow-y: auto;
color: var(--text);
}
.toast-message .toast-actions { .toast-message .toast-actions {
display: flex; display: flex;
gap: 2px; gap: 2px;