Modules
Web dashboard for monitoring and managing Durable workflows.
Plug that serves the dashboard's static assets (CSS, JS, woff2) from
priv/static/durable_dashboard/. Plugged via forward "/__assets__"
inside the host router by DurableDashboard.Router.dashboard_routes/2.
⌘K command palette. Rendered once by Layouts.app — always present,
hidden when closed. The JS hook (assets/src/hooks/command_palette.ts)
bridges keypresses to LC events.
Stateless function components used across the dashboard.
Reusable data-table LiveComponent. Owns its own filter / sort / page state,
drives data via a parent-supplied :fetcher function, and emits query-change
notifications to the parent LV so the parent can update the URL via
live_patch. Real-time updates from the parent are triggered with
Phoenix.LiveView.send_update(__MODULE__, id: "...", refresh: true).
Faceted filter bar for the Executions list — a row of facet chips, each opening a popover, in the spirit of an ops console's query builder.
Stateless pagination control. Emits a phx-click event to a target with
the new page number; the target (DataTable LiveComponent) decides how to
apply it.
Breadcrumb trail rendered in the topbar.
Left navigation sidebar. Stateless function component — active item is
derived from @current_path passed by the parent layout.
Top bar — breadcrumb (left) + command cluster (right).
Family tab — exposes the parent / child structure that the parallel
primitive in Durable's runtime uses to fan a workflow out across
multiple WorkflowExecution rows.
Compact header affordance that surfaces the workflow's family relationships at a glance
LiveComponent that wraps the ReactFlow island defined in
assets/src/react/flow_graph.tsx (mounted by the JS hook in
assets/src/hooks/flow_graph.ts).
History tab — the workflow's chronological execution trace. Every step attempt is one event in order (so a failure and its retry appear as two rows), threaded on a status-colored spine down the left edge: the sequence is the information here, so it reads as a trace, not a flat table.
I/O tab — shows the workflow's input payload and the accumulated context as pretty-printed JSON. Side-by-side on wide screens, stacked on narrow.
A single dense, Grafana-style log line — the shared visual unit used by both
the page-level LogsTab and the step inspector's logs tab so they render
identically. Stateless Phoenix.Component.
Logs tab — a Grafana-style log viewer over every step execution's captured
logs for the workflow. Stateful (filters, sort, page) so it lives as a
LiveComponent. Each step's :logs is a list of maps with "level",
"message", "timestamp", "source", and "metadata" keys.
Shared expand panel for a single step execution — the in-place inspector used by both the Timeline tab and the History tab (and conceptually the same content as the Flow step inspector). One source of truth so a step's details read identically wherever you open them.
Summary tab for the workflow detail view. Shows core metadata, timing, pending inputs, and the error payload (when failed) at a glance.
Tab navigation strip for the workflow detail view. Stateless function
component — the active tab is derived from @active (the parent LV's
live_action or a tab name from handle_params). Each tab links via
live_patch to its nested route so switching is a no-remount transition.
Timeline tab — absolute-time Gantt of step executions for a single workflow run.
Converts a %Durable.Definition.Workflow{} into ReactFlow-compatible
nodes and edges for graph visualization.
Workflow executions list. One LiveView covers two URLs
Pending inputs queue. Shows workflows waiting on human input
(wait_for_input, wait_for_approval, etc) so an operator can resolve them.
Dashboard landing — KPI counts + recent workflows.
Scheduled workflows list. Driven by the same DataTable LiveComponent as
WorkflowsLive, with schedule-shaped columns. No filter UI in v1 — schedules
are typically a small set; we'll add filters when the count justifies it.
Read-only settings view. Shows the running Durable instance's configuration — queues, timeouts, prefix, pubsub. No write actions yet; mutating settings via the dashboard is a separate (and more dangerous) feature.
Workflow detail view. One LiveView, six tabs (summary/flow/topology/logs/io/
history). Tab routing is live "/workflows/:id/:tab" — switching tabs
re-runs handle_params without unmounting, so the loaded workflow + steps
stay in memory.
Workflows catalog — one card per distinct workflow definition that has been executed on this instance. Drilling in opens the executions list filtered to that workflow.
Dashboard-specific aggregation queries for the overview metrics page.
Path helpers for the dashboard.
Router macro for embedding the Durable dashboard into a host Phoenix application.
Converts Elixir structs to JSON-safe maps for the React frontend.