dashboard(swarm): wrap agent status to two lines, always show set-time
The agent self-reported status rendered on one line with white-space:nowrap + text-overflow:ellipsis. Because the "(set N ago)" stamp trailed the text in the same clipped flow, a long status clipped the set-time away entirely. Wrap the icon + message in a .status-msg span clamped to two lines and make the age a non-shrinking flex sibling, so the message wraps to two lines (then ellipsizes) and the set-time is always shown.
This commit is contained in:
parent
6a7c0bcad8
commit
74196ac582
2 changed files with 31 additions and 5 deletions
|
|
@ -671,12 +671,18 @@ window.marked = marked;
|
|||
const ageAttrs = ds.status_set_at != null
|
||||
? { class: 'status-age', 'data-set-at': String(ds.status_set_at) }
|
||||
: { class: 'status-age' };
|
||||
// Icon + message are wrapped together in `.status-msg` so the
|
||||
// CSS can clamp *just the message* to two lines; the age span is
|
||||
// a separate flex sibling that is never clipped, so the "(set N
|
||||
// ago)" stamp stays visible even when the status text is long.
|
||||
body.append(el('div', {
|
||||
class: 'agent-status',
|
||||
title: `agent self-reported status${ageStr}`,
|
||||
},
|
||||
el('span', { class: 'status-icon' }, '◈ '),
|
||||
ds.status_text,
|
||||
el('span', { class: 'status-msg' },
|
||||
el('span', { class: 'status-icon' }, '◈ '),
|
||||
ds.status_text,
|
||||
),
|
||||
el('span', ageAttrs, ageStr),
|
||||
));
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue