David/N8N-DASHBOARD
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
6 commits 1 branch 0 tags 26 MiB
Commit graph

3 commits

Author SHA1 Message Date
David
bac00f617d Modernize dashboard: glassmorphism, gradient stat cards, refined palette 
Visual upgrade — keeps same data flow + layout structure, just elevates the look:

Header:
- Glassmorphism: sticky + bg-background/70 + backdrop-blur-xl
- Brand mark: zap icon in accent-tinted gradient box with glow
- Title: 'Command Center' (was 'n8n Workflow Monitor')
- Animated live dot with glow-success on the indicator

Stat cards:
- Gradient: from-card to-transparent
- Icon chip in top-right (per-stat: Power, Activity, CheckCircle, AlertCircle, Gauge)
- Bigger numbers (3xl), tracking-tight
- Color glow classes (glow-success, glow-error, glow-warning) when relevant
- Sub-text under the number for context
- Border-strong on hover

Anomalies:
- Severity-tinted icon chips (error/pending/warning soft backgrounds)
- New 'All clear' state with success glow when zero anomalies
- Each row has hover bg-muted/40
- n8n link in a pill button (border + bg-muted/50)

Workflows + Activity:
- Reusable Panel wrapper with icon + title + meta badge
- Empty states with icon + message + hint
- Status pills: rings + uppercase tracking-wider (looks more 'operator console')
- Scrollable lists (max-h-96) with thin custom scrollbar
- Error rows: subtle red hover bg (error-soft/40)

Palette refinements:
- Background: deeper (#08080a)
- Border: rgba white 8% (more subtle)
- Status: success/emerald, error/rose, warning/amber, pending/yellow
- 'Soft' color tokens for translucent backgrounds

CSS:
- Subtle radial gradient bg (accent top-left, error bottom-right)
- Fixed background-attachment for nice scroll feel
- Custom thin scrollbar
- glow-* utility classes
- fadeIn keyframe

Bundle: 223 KB JS / 69 KB gzipped, 16 KB CSS
 2026-08-24 16:13:39 +02:00
David
cd1a922976 Redesign dashboard as command center + capture error_message in poller 
Dashboard:
- Dark theme by default (zinc-950 background, high-contrast status colors)
- Layout: sticky header with live status, hero HealthBanner, FailuresPanel,
  AnomaliesPanel, 2-col grid (Workflows + Activity), StatsStrip footer
- Auto-detected anomalies: stale active workflows, 100% fail rate, stuck running
- Click any failure/activity row → links to n8n execution view (VITE_N8N_URL)
- VITE_N8N_URL env var threaded through Dockerfile + compose

Poller (poller.n8n.json):
- Fetch n8n Executions: includeData false → true (now includes execution data)
- Create/Update Execution Record: extract error_message from data.resultData.error
  using a safe IIFE that JSON.parses the data field

Also:
- Added vite-env.d.ts so VITE_* env vars are typed
- docker-compose.yml: VITE_N8N_URL added to build args
- .env.example: documented VITE_N8N_URL at root and dashboard level
 2026-08-23 19:11:29 +02:00
David
c3d42e54bb Initial commit: n8n workflow monitor dashboard 
- Vite + React + Tailwind SPA reading from PocketBase
- Realtime subscriptions on workflows + executions collections
- Coolify-ready Dockerfile (multi-stage node build → nginx serve)
- PocketBase URL configurable via VITE_POCKETBASE_URL build arg
- Schema import (workflows, executions) included
 2026-08-23 15:47:51 +02:00