David/N8N-DASHBOARD
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
N8N-DASHBOARD/README.md
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

2.4 KiB
Raw Permalink Blame History

n8n Workflow Monitor

Read-only dashboard: n8n → PocketBase → shadcn-style React dashboard.

What's in here

  • n8n Monitoring Dashboard - Poller — already created in your n8n instance (draft, not yet activated). Polls /api/v1/workflows and /api/v1/executions every 5 minutes and upserts into PocketBase.
  • pocketbase_schema.json — importable PocketBase collections (workflows, executions).
  • dashboard/ — the React + Tailwind + shadcn-style dashboard, reads from PocketBase with realtime updates.

Setup

1. PocketBase

  1. In your PocketBase Admin UI, go to Settings → Import collections and upload pocketbase_schema.json. This creates workflows and executions with public read access and admin-only write access.
  2. Create an API token / auth for a superuser (or an app-level API key) the poller workflow can use to write — the poller authenticates with a plain Bearer token in the PocketBase Admin credential (see below).

2. n8n poller workflow

The workflow is already created: n8n Monitoring Dashboard - Poller (in your personal project). Before activating it:

  1. Create credential "n8n API Key" (type: HTTP Header Auth) — header X-N8N-API-KEY, value: an n8n API key from Settings → API.
  2. Create credential "PocketBase Admin" (type: HTTP Header Auth) — header Authorization, value: Bearer <your PocketBase superuser token>.
  3. Every HTTP node in the workflow uses https://pocketbase.apphub.co.za as a guessed placeholder base URL — find/replace with your real PocketBase URL if different.
  4. Activate the workflow.

3. Dashboard

cd dashboard
npm install

Edit src/lib/pocketbase.ts and set POCKETBASE_URL to your real PocketBase instance.

npm run dev

Open the printed local URL. For production, npm run build and serve the dist/ folder (e.g. behind the same reverse proxy/Cloudflare Tunnel setup you use for your other self-hosted tools).

Notes

  • The dashboard is read-only — it only ever calls PocketBase's list/realtime endpoints, never n8n directly, and never writes.
  • All writes to PocketBase happen from the poller workflow only, authenticated as admin — the dashboard's PocketBase access can stay on the public read rules set in the schema.
  • Realtime: the dashboard subscribes to PocketBase's realtime feed, so it updates within moments of the poller's next 5-minute sync — no page refresh needed.