David
433cb2b908
Layout per user-supplied mockup: - Single header row (title + last sync, no sticky) - 5-card stats strip (Active / Runs 24h / Succeeded / Errors / Fail rate) - Single 'Needs attention' panel showing only anomalies (stale, burning, stuck) - 2-col grid: Workflows (left) + Activity (right) — both compact lists - Activity rows show error_message inline for failed executions - Each anomaly / error gets a deep-link to n8n Also: - Saved user's static HTML prototype to dashboard/public/preview.html (served at /preview.html so they can compare mock vs live) Bundle: 215 KB JS / 67 KB gzipped (smaller than v2 — removed dead components)
179 lines
11 KiB
HTML
179 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>n8n Workflow Monitor — Preview</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"></script>
|
|
<style>
|
|
:root{
|
|
--border:#27272a; --background:#09090b; --foreground:#fafafa;
|
|
--muted:#18181b; --muted-fg:#a1a1aa; --card:#0f0f12;
|
|
--success:#22c55e; --error:#ef4444; --warning:#f59e0b; --pending:#eab308; --accent:#60a5fa;
|
|
}
|
|
html,body{background:var(--background); color:var(--foreground); font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
background-image: radial-gradient(circle at 0% 0%, rgba(96,165,250,0.04), transparent 40%), radial-gradient(circle at 100% 100%, rgba(239,68,68,0.03), transparent 40%);
|
|
margin:0; padding:32px; -webkit-font-smoothing:antialiased;}
|
|
.card{background:var(--card); border:1px solid var(--border); border-radius:.5rem;}
|
|
.tabular{font-variant-numeric: tabular-nums;}
|
|
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
|
|
.badge{font-size:11px; padding:2px 8px; border-radius:9999px; font-weight:500; letter-spacing:.02em;}
|
|
.badge-success{background:rgba(34,197,94,.12); color:var(--success);}
|
|
.badge-error{background:rgba(239,68,68,.12); color:var(--error);}
|
|
.badge-pending{background:rgba(234,179,8,.12); color:var(--pending);}
|
|
.badge-muted{background:rgba(161,161,170,.12); color:var(--muted-fg);}
|
|
::selection{background:rgba(96,165,250,.3);}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div style="max-width:1200px;margin:0 auto;">
|
|
<div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;">
|
|
<div>
|
|
<h1 style="font-size:18px;font-weight:600;margin:0;">n8n Workflow Monitor</h1>
|
|
<p style="font-size:12px;color:var(--muted-fg);margin:2px 0 0;">Read-only · synced via PocketBase</p>
|
|
</div>
|
|
<span style="font-size:11px;color:var(--muted-fg);" class="tabular">last sync: 12s ago</span>
|
|
</div>
|
|
|
|
<!-- Stats strip -->
|
|
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px;">
|
|
<div class="card" style="padding:14px 16px;">
|
|
<p style="font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg);margin:0;">Active</p>
|
|
<p class="tabular" style="font-size:24px;font-weight:600;margin:4px 0 0;color:var(--success);">18 <span style="font-size:12px;color:var(--muted-fg);font-weight:400;">of 22</span></p>
|
|
</div>
|
|
<div class="card" style="padding:14px 16px;">
|
|
<p style="font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg);margin:0;">Runs 24h</p>
|
|
<p class="tabular" style="font-size:24px;font-weight:600;margin:4px 0 0;">341</p>
|
|
</div>
|
|
<div class="card" style="padding:14px 16px;">
|
|
<p style="font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg);margin:0;">Succeeded</p>
|
|
<p class="tabular" style="font-size:24px;font-weight:600;margin:4px 0 0;color:var(--success);">328 <span style="font-size:12px;color:var(--muted-fg);font-weight:400;">24h</span></p>
|
|
</div>
|
|
<div class="card" style="padding:14px 16px;">
|
|
<p style="font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg);margin:0;">Errors</p>
|
|
<p class="tabular" style="font-size:24px;font-weight:600;margin:4px 0 0;color:var(--error);">13 <span style="font-size:12px;color:var(--muted-fg);font-weight:400;">24h</span></p>
|
|
</div>
|
|
<div class="card" style="padding:14px 16px;">
|
|
<p style="font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg);margin:0;">Fail rate</p>
|
|
<p class="tabular" style="font-size:24px;font-weight:600;margin:4px 0 0;color:var(--warning);">3.8% <span style="font-size:12px;color:var(--muted-fg);font-weight:400;">24h</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Anomalies -->
|
|
<div class="card" style="padding:0;margin-bottom:20px;">
|
|
<div style="border-bottom:1px solid var(--border);padding:12px 16px;">
|
|
<h2 style="font-size:14px;font-weight:600;margin:0;">⚠ Needs attention</h2>
|
|
</div>
|
|
<ul style="list-style:none;margin:0;padding:0;">
|
|
<li style="padding:10px 16px;border-bottom:1px solid var(--border);font-size:13px;display:flex;gap:8px;align-items:center;">
|
|
<span style="color:var(--error);">●</span>
|
|
<span style="font-weight:500;">Master Drilling Quote Sync</span>
|
|
<span style="color:var(--muted-fg);font-size:11px;">·</span>
|
|
<span style="color:var(--error);font-size:12px;">last 6 of 6 runs failed</span>
|
|
</li>
|
|
<li style="padding:10px 16px;border-bottom:1px solid var(--border);font-size:13px;display:flex;gap:8px;align-items:center;">
|
|
<span style="color:var(--pending);">●</span>
|
|
<span style="font-weight:500;">WFDASH Order Monitor</span>
|
|
<span style="color:var(--muted-fg);font-size:11px;">·</span>
|
|
<span style="color:var(--pending);font-size:12px;">"running" for 47m (unusually long)</span>
|
|
</li>
|
|
<li style="padding:10px 16px;font-size:13px;display:flex;gap:8px;align-items:center;">
|
|
<span style="color:var(--warning);">●</span>
|
|
<span style="font-weight:500;">Nightly Backup Sync</span>
|
|
<span style="color:var(--muted-fg);font-size:11px;">·</span>
|
|
<span style="color:var(--warning);font-size:12px;">active but hasn't run in 31h</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
|
|
<!-- Workflows -->
|
|
<div class="card" style="padding:0;">
|
|
<div style="border-bottom:1px solid var(--border);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;">
|
|
<h2 style="font-size:14px;font-weight:600;margin:0;">Workflows</h2>
|
|
<span style="font-size:10px;color:var(--muted-fg);text-transform:uppercase;letter-spacing:.05em;">22 total</span>
|
|
</div>
|
|
<ul style="list-style:none;margin:0;padding:0;">
|
|
<li style="padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;">
|
|
<span class="dot" style="background:var(--success);"></span>
|
|
<span style="flex:1;font-size:13px;font-weight:500;">Master Drilling Quote Sync</span>
|
|
<span class="badge badge-error">error</span>
|
|
<span class="tabular" style="font-size:11px;color:var(--muted-fg);width:56px;text-align:right;">4m ago</span>
|
|
</li>
|
|
<li style="padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;">
|
|
<span class="dot" style="background:var(--success);"></span>
|
|
<span style="flex:1;font-size:13px;font-weight:500;">WFDASH Order Monitor</span>
|
|
<span class="badge badge-pending">running</span>
|
|
<span class="tabular" style="font-size:11px;color:var(--muted-fg);width:56px;text-align:right;">47m ago</span>
|
|
</li>
|
|
<li style="padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;">
|
|
<span class="dot" style="background:var(--success);"></span>
|
|
<span style="flex:1;font-size:13px;font-weight:500;">Book Draft QC Pipeline</span>
|
|
<span class="badge badge-success">success</span>
|
|
<span class="tabular" style="font-size:11px;color:var(--muted-fg);width:56px;text-align:right;">18m ago</span>
|
|
</li>
|
|
<li style="padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;">
|
|
<span class="dot" style="background:var(--muted-fg);"></span>
|
|
<span style="flex:1;font-size:13px;font-weight:500;color:var(--muted-fg);">Old Lead Enrichment (v1)</span>
|
|
<span class="badge badge-muted">never</span>
|
|
<span class="tabular" style="font-size:11px;color:var(--muted-fg);width:56px;text-align:right;">—</span>
|
|
</li>
|
|
<li style="padding:10px 16px;display:flex;align-items:center;gap:10px;">
|
|
<span class="dot" style="background:var(--success);"></span>
|
|
<span style="flex:1;font-size:13px;font-weight:500;">Gold Grid EA Signal Sync</span>
|
|
<span class="badge badge-success">success</span>
|
|
<span class="tabular" style="font-size:11px;color:var(--muted-fg);width:56px;text-align:right;">2m ago</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Activity -->
|
|
<div class="card" style="padding:0;">
|
|
<div style="border-bottom:1px solid var(--border);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;">
|
|
<h2 style="font-size:14px;font-weight:600;margin:0;">Activity</h2>
|
|
<span style="font-size:10px;color:var(--muted-fg);text-transform:uppercase;letter-spacing:.05em;">last 50 of 341</span>
|
|
</div>
|
|
<ul style="list-style:none;margin:0;padding:0;">
|
|
<li style="padding:10px 16px;border-bottom:1px solid var(--border);">
|
|
<div style="display:flex;gap:8px;align-items:flex-start;">
|
|
<span style="color:var(--error);font-size:13px;">✕</span>
|
|
<div style="flex:1;min-width:0;">
|
|
<div style="display:flex;gap:8px;align-items:center;">
|
|
<span style="font-size:13px;">Master Drilling Quote Sync</span>
|
|
<span class="badge badge-error">error</span>
|
|
</div>
|
|
<p style="margin:2px 0 0;font-size:11px;color:rgba(239,68,68,.8);font-family:ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Timeout connecting to PocketBase host</p>
|
|
</div>
|
|
<span class="tabular" style="font-size:11px;color:var(--muted-fg);">4m ago</span>
|
|
</div>
|
|
</li>
|
|
<li style="padding:10px 16px;border-bottom:1px solid var(--border);">
|
|
<div style="display:flex;gap:8px;align-items:center;">
|
|
<span style="color:var(--success);font-size:13px;">✓</span>
|
|
<span style="flex:1;font-size:13px;">Gold Grid EA Signal Sync</span>
|
|
<span class="badge badge-success">success</span>
|
|
<span class="tabular" style="font-size:11px;color:var(--muted-fg);">2m ago</span>
|
|
</div>
|
|
</li>
|
|
<li style="padding:10px 16px;border-bottom:1px solid var(--border);">
|
|
<div style="display:flex;gap:8px;align-items:center;">
|
|
<span style="color:var(--success);font-size:13px;">✓</span>
|
|
<span style="flex:1;font-size:13px;">Book Draft QC Pipeline</span>
|
|
<span class="badge badge-success">success</span>
|
|
<span class="tabular" style="font-size:11px;color:var(--muted-fg);">18m ago</span>
|
|
</div>
|
|
</li>
|
|
<li style="padding:10px 16px;">
|
|
<div style="display:flex;gap:8px;align-items:center;">
|
|
<span style="color:var(--pending);font-size:13px;animation:pulse 2s infinite;">●</span>
|
|
<span style="flex:1;font-size:13px;">WFDASH Order Monitor</span>
|
|
<span class="badge badge-pending">running</span>
|
|
<span class="tabular" style="font-size:11px;color:var(--muted-fg);">47m ago</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|