Add stacked account display and fixed live progress row sizing
Improve account display by showing source/destination in a stacked format when they differ, and add fixed sizing for live progress rows to prevent resizing during scans. Also update the table header to use a single "Account" column.
This commit is contained in:
@@ -255,11 +255,36 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* per-account live progress */
|
/* per-account live progress */
|
||||||
|
/* merged Source/Destination "Account" cell: single line when src == dst,
|
||||||
|
stacked (src over dst) when they differ. */
|
||||||
|
.acct-ident {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.acct-dst {
|
||||||
|
color: var(--fg-dim);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.acct-progress {
|
.acct-progress {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
min-width: 160px;
|
min-width: 160px;
|
||||||
|
/* reserve room for the bar + two meta lines so toggling the scan line
|
||||||
|
during a run doesn't change the row height */
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Running rows get a fixed wide size up front so live progress updates
|
||||||
|
(which change text length and can wrap) never resize the row mid-scan.
|
||||||
|
The size reverts only when the run finishes and the class drops. */
|
||||||
|
.progress-cell--live {
|
||||||
|
min-width: 340px;
|
||||||
|
height: 48px;
|
||||||
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pbar {
|
.pbar {
|
||||||
@@ -283,6 +308,8 @@
|
|||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
color: var(--fg-dim);
|
color: var(--fg-dim);
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
|
/* keep progress text on one line so its length never reflows the row */
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pscan {
|
.pscan {
|
||||||
|
|||||||
@@ -538,8 +538,7 @@ export function TaskDetail({ id }: { id: number }) {
|
|||||||
<table className="tbl">
|
<table className="tbl">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Source</th>
|
<th>Account</th>
|
||||||
<th>Destination</th>
|
|
||||||
<th>Src test</th>
|
<th>Src test</th>
|
||||||
<th>Dst test</th>
|
<th>Dst test</th>
|
||||||
<th>Status</th>
|
<th>Status</th>
|
||||||
@@ -553,20 +552,24 @@ export function TaskDetail({ id }: { id: number }) {
|
|||||||
<tbody>
|
<tbody>
|
||||||
{accounts.length === 0 ? (
|
{accounts.length === 0 ? (
|
||||||
<tr className="empty-row">
|
<tr className="empty-row">
|
||||||
<td colSpan={10}>no accounts yet — add one or import a CSV above</td>
|
<td colSpan={9}>no accounts yet — add one or import a CSV above</td>
|
||||||
</tr>
|
</tr>
|
||||||
) : (
|
) : (
|
||||||
accounts.map((a) => (
|
accounts.map((a) => (
|
||||||
<tr key={a.id}>
|
<tr key={a.id}>
|
||||||
<td>
|
<td>
|
||||||
{a.src_login}
|
<div className="acct-ident">
|
||||||
|
<span>{a.src_login}</span>
|
||||||
|
{a.dst_login !== a.src_login && (
|
||||||
|
<span className="acct-dst">→ {a.dst_login}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
{a.last_error && (
|
{a.last_error && (
|
||||||
<div className="acct-error" title={a.last_error}>
|
<div className="acct-error" title={a.last_error}>
|
||||||
{a.last_error}
|
{a.last_error}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</td>
|
</td>
|
||||||
<td>{a.dst_login}</td>
|
|
||||||
<td>
|
<td>
|
||||||
<StatusBadge status={a.test_src_status} />
|
<StatusBadge status={a.test_src_status} />
|
||||||
</td>
|
</td>
|
||||||
@@ -576,7 +579,7 @@ export function TaskDetail({ id }: { id: number }) {
|
|||||||
<td>
|
<td>
|
||||||
<StatusBadge status={a.status} />
|
<StatusBadge status={a.status} />
|
||||||
</td>
|
</td>
|
||||||
<td className="progress-cell">
|
<td className={`progress-cell${a.status === 'running' ? ' progress-cell--live' : ''}`}>
|
||||||
{(() => {
|
{(() => {
|
||||||
const lv = live[a.id]
|
const lv = live[a.id]
|
||||||
if (!lv || !lv.total) return <span className="muted-note">—</span>
|
if (!lv || !lv.total) return <span className="muted-note">—</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user