josh/Catalyst
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 13 Wiki Activity

feat: rework history timeline for clarity
All checks were successful
CI / test (pull_request) Successful in 12s
Details
CI / build-dev (pull_request) Has been skipped
Details

Browse Source 
Timestamp now sits on its own line above each event so it's visually
separate from the change description. Field names use a friendly label
map (hardware_acceleration → hw acceleration, tailscale_ip → tailscale ip,
etc.). The created event reads "instance created" in accent colour instead
of a raw "created / —". Padding between rows increased.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Josh Wright
2026-03-28 15:00:22 -04:00
parent badd542bd7
commit 94c4a0af51
2 changed files with 32 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
css/app.css
View File

@@ -630,26 +630,21 @@ select:focus { border-color: var(--accent); }
/* ── HISTORY TIMELINE ── */
.tl-item {
display: grid;
grid-template-columns: 160px 140px 1fr;
gap: 0 12px;
padding: 7px 0;
padding: 12px 0;
border-bottom: 1px solid var(--border);
font-size: 12px;
align-items: baseline;
}
.tl-item:last-child { border-bottom: none; }
.tl-time { color: var(--text3); font-size: 11px; white-space: nowrap; }
.tl-field { color: var(--text2); }
.tl-change { display: flex; align-items: baseline; gap: 6px; }
.tl-time { display: block; color: var(--text3); font-size: 11px; margin-bottom: 5px; }
.tl-desc { display: flex; align-items: baseline; gap: 16px; font-size: 13px; }
.tl-label { color: var(--text2); min-width: 130px; }
.tl-change { display: flex; align-items: baseline; gap: 8px; }
.tl-old { color: var(--text3); text-decoration: line-through; }
.tl-arrow { color: var(--text3); }
.tl-new { color: var(--text); }
.tl-new { color: var(--text); font-weight: 500; }
.tl-deployed { color: var(--accent); }
.tl-testing { color: var(--amber); }
.tl-degraded { color: var(--red); }
.tl-created .tl-field { color: var(--accent); }
.tl-created .tl-change { color: var(--text3); }
.tl-created .tl-label { color: var(--accent); font-weight: 500; }
.tl-empty { color: var(--text3); font-size: 12px; padding: 8px 0; }
/* ── SETTINGS MODAL ── */

23
js/ui.js
View File

@@ -129,6 +129,21 @@ async function filterInstances() {
const BOOL_FIELDS = ['atlas','argus','semaphore','patchmon','tailscale','andromeda','hardware_acceleration'];
const FIELD_LABELS = {
name: 'name',
state: 'state',
stack: 'stack',
vmid: 'vmid',
tailscale_ip: 'tailscale ip',
atlas: 'atlas',
argus: 'argus',
semaphore: 'semaphore',
patchmon: 'patchmon',
tailscale: 'tailscale',
andromeda: 'andromeda',
hardware_acceleration: 'hw acceleration',
};
function stateClass(field, val) {
if (field !== 'state') return '';
return { deployed: 'tl-deployed', testing: 'tl-testing', degraded: 'tl-degraded' }[val] ?? '';
@@ -179,18 +194,20 @@ async function renderDetailPage(vmid) {
if (e.field === 'created') return `
<div class="tl-item tl-created">
<span class="tl-time">${fmtDateFull(e.changed_at)}</span>
<span class="tl-field">created</span>
<span class="tl-change">—</span>
<div class="tl-desc"><span class="tl-label">instance created</span></div>
</div>`;
const label = FIELD_LABELS[e.field] ?? esc(e.field);
return `
<div class="tl-item">
<span class="tl-time">${fmtDateFull(e.changed_at)}</span>
<span class="tl-field">${esc(e.field)}</span>
<div class="tl-desc">
<span class="tl-label">${label}</span>
<span class="tl-change">
<span class="tl-old">${fmtHistVal(e.field, e.old_value)}</span>
<span class="tl-arrow">→</span>
<span class="tl-new ${stateClass(e.field, e.new_value)}">${fmtHistVal(e.field, e.new_value)}</span>
</span>
</div>
</div>`;
}).join('')
: '<div class="tl-empty">no history yet</div>';