|
| 1 | +# DurableDashboard |
| 2 | + |
| 3 | +LiveView-first web console for the [Durable](https://hex.pm/packages/durable) |
| 4 | +workflow engine. |
| 5 | + |
| 6 | +The dashboard renders server-side via Phoenix LiveView, with a single |
| 7 | +ReactFlow island for the workflow-graph view. No SPA, no separate API — |
| 8 | +just one router macro. |
| 9 | + |
| 10 | +## Features |
| 11 | + |
| 12 | +- **Overview** — live status counts and recent executions |
| 13 | +- **Workflows** — searchable, filterable list with pagination |
| 14 | +- **Workflow detail** — summary, flow graph, topology, logs, I/O, and |
| 15 | + child-execution history |
| 16 | +- **Pending inputs** — surface and resolve human-in-the-loop steps |
| 17 | +- **Schedules** — toggle, trigger, and inspect cron-driven workflows |
| 18 | +- **Settings** — inspect Durable's runtime configuration |
| 19 | +- **⌘K command palette** — keyboard-driven navigation |
| 20 | + |
| 21 | +## Installation |
| 22 | + |
| 23 | +Add `durable_dashboard` alongside `durable`: |
| 24 | + |
| 25 | +```elixir |
| 26 | +def deps do |
| 27 | + [ |
| 28 | + {:durable, "~> 0.0.0-alpha"}, |
| 29 | + {:durable_dashboard, "~> 0.0.0-alpha"} |
| 30 | + ] |
| 31 | +end |
| 32 | +``` |
| 33 | + |
| 34 | +## Usage |
| 35 | + |
| 36 | +Mount the dashboard at any path in your host router: |
| 37 | + |
| 38 | +```elixir |
| 39 | +defmodule MyAppWeb.Router do |
| 40 | + use MyAppWeb, :router |
| 41 | + |
| 42 | + # ...your existing pipelines and scopes... |
| 43 | + |
| 44 | + use DurableDashboard.Router, mount: "/dashboard", durable: MyApp.Durable |
| 45 | +end |
| 46 | +``` |
| 47 | + |
| 48 | +The macro emits the dashboard's pipelines, asset routes, and live routes |
| 49 | +inline in your router. It must live at the **top level** — not inside a |
| 50 | +`scope` or `pipe_through` block, since it defines its own pipelines. |
| 51 | + |
| 52 | +### Options |
| 53 | + |
| 54 | +- `:mount` — URL prefix the dashboard mounts at (required) |
| 55 | +- `:durable` — Durable instance name (default: `Durable`) |
| 56 | +- `:live_socket_path` — path your endpoint uses for `Phoenix.LiveView.Socket` |
| 57 | + (default: `"/live"`) |
| 58 | +- `:on_mount` — list of `on_mount` hooks the host wants to inject for |
| 59 | + auth or other concerns (default: `[]`) |
| 60 | + |
| 61 | +### URL surface |
| 62 | + |
| 63 | +The macro emits these routes under your `:mount` prefix: |
| 64 | + |
| 65 | +- `GET /` — Overview |
| 66 | +- `GET /workflows` — list |
| 67 | +- `GET /workflows/:id[/:tab]` — detail |
| 68 | +- `GET /inputs` |
| 69 | +- `GET /schedules` |
| 70 | +- `GET /settings` |
| 71 | +- `GET /__assets__/*` — CSS/JS/font assets |
| 72 | + |
| 73 | +## Authentication |
| 74 | + |
| 75 | +Inject your host app's auth via `:on_mount` hooks — the dashboard does |
| 76 | +not ship its own auth layer: |
| 77 | + |
| 78 | +```elixir |
| 79 | +use DurableDashboard.Router, |
| 80 | + mount: "/dashboard", |
| 81 | + durable: MyApp.Durable, |
| 82 | + on_mount: [{MyAppWeb.UserAuth, :ensure_authenticated}] |
| 83 | +``` |
| 84 | + |
| 85 | +## Design |
| 86 | + |
| 87 | +`DESIGN.md` codifies the design language: tokens, typography, spacing, |
| 88 | +motion, status semantics, component primitives, and composition |
| 89 | +patterns. New visual decisions are made there first, then applied in |
| 90 | +code. |
| 91 | + |
| 92 | +## License |
| 93 | + |
| 94 | +MIT |
0 commit comments