The dashboard
The admin UI for Switchyard: create projects, switch flags per environment, edit targeting rules and percentage rollouts, rotate SDK keys, and read (and undo) the change history.
Angular 22 (standalone components, signals, zoneless) with Angular Material 3: a violet Material 3 theme in light and dark (following the system, or picked from the top bar), the Inter typeface, Material Symbols icons, and a phone layout below 900 px. It's a static site, so any static host works (Cloudflare Pages in production; public/_redirects sends every path to the app).
Run it
Needs Node.js 22.22.3+ or 24.15+, and a Switchyard server that allows this origin:
# Server (from ../server), allowing the dashboard's dev origin
SWITCHYARD_ADMIN_TOKEN=dev-admin-token SWITCHYARD_DASHBOARD_ORIGINS=http://localhost:4200 ./mvnw spring-boot:test-run
# Dashboard
npm install
npm startOpen http://localhost:4200, enter the server URL (http://localhost:8080) and the admin token.
Signing in
Two ways, depending on the server:
- Continue with GitHub, shown when the server has GitHub sign-in set up (it asks
GET /auth/config). The server does the OAuth exchange and sends the browser back to/auth/callback#token=…; the page stores the session token and takes it out of the URL. - Token: the server's
SWITCHYARD_ADMIN_TOKEN, or an API token (api-…) made under API tokens, which brings its own role.
Either token is kept in sessionStorage, so it lasts for the browser tab and nothing else; the server URL is remembered in localStorage. The server must list the dashboard's origin in SWITCHYARD_DASHBOARD_ORIGINS, or the browser blocks its requests (and GitHub sign-in won't return here).
Structure
| Path | What |
|---|---|
src/app/app.ts |
The shell: sidebar, breadcrumbs, theme and account menus |
src/app/core/api.ts |
Typed admin API calls, the auth interceptor, error helpers |
src/app/core/session.ts |
Server URL, token and signed-in user |
src/app/core/targeting.ts |
Converts between the API's targeting JSON and the editor form |
src/app/core/ui.ts |
Snackbar notices, the confirm dialog, relative times |
src/app/core/theme.ts |
Light, dark or system theme |
src/app/core/access.ts |
What the signed-in role may change (the server checks again) |
src/app/core/highlight.ts |
Coloured code snippets and the before/after diff in History |
src/app/pages/ |
Sign-in and the GitHub callback, projects, flags table, flag editor (with serve-editor.ts, clause-row.ts, variations-editor.ts), segments, history, SDK keys, dialogs |
src/styles.scss |
The Material theme and all page styles |
Test and build
npx ng test --watch=false
npx ng build