feat(phase-2): workstream 6 — Web Dashboard UI
- dashboard/: Vite 5 + React 18 + TypeScript strict SPA
- Auth: sessionStorage credentials, TokenManager validation, AuthProvider context
- Pages: Login, Agents (search + filter), AgentDetail (suspend/reactivate),
Credentials (generate/rotate/revoke, new secret shown once),
AuditLog (filters + pagination), Health (PG + Redis status, 30s refresh)
- Components: Button, Badge, ConfirmDialog, AppShell, RequireAuth
- All destructive actions gated by ConfirmDialog
- Zero dangerouslySetInnerHTML; sessionStorage only (OWASP compliant)
- src/routes/health.ts: unauthenticated GET /health — PG + Redis connectivity
- src/app.ts: health route + dashboard/dist/ served at /dashboard with SPA fallback
- 6 new health route tests; 308/308 unit tests passing
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
95
dashboard/README.md
Normal file
95
dashboard/README.md
Normal file
@@ -0,0 +1,95 @@
|
||||
# SentryAgent.ai AgentIdP — Web Dashboard
|
||||
|
||||
## 1. Overview
|
||||
|
||||
The AgentIdP Dashboard is a React 18 single-page application (SPA) that provides a visual
|
||||
management interface for the AgentIdP API. It allows operators to:
|
||||
|
||||
- Browse, search, and filter all registered AI agents
|
||||
- View agent details and manage lifecycle (suspend / reactivate)
|
||||
- Generate, rotate, and revoke agent credentials
|
||||
- Query the audit log with filters for agent, action, outcome, and date range
|
||||
- Monitor PostgreSQL and Redis connectivity in real time
|
||||
|
||||
The dashboard is co-served by the Express API server at `/dashboard/` — no separate hosting
|
||||
is required.
|
||||
|
||||
## 2. Prerequisites
|
||||
|
||||
- Node.js 18+
|
||||
- A running AgentIdP server (local or remote)
|
||||
- An active agent credential (Client ID + Client Secret) with full scopes
|
||||
|
||||
## 3. Development
|
||||
|
||||
Install dashboard dependencies:
|
||||
|
||||
```bash
|
||||
cd dashboard
|
||||
npm install
|
||||
```
|
||||
|
||||
Start the Vite dev server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
The dev server starts at `http://localhost:5173/dashboard/`. API calls are made to
|
||||
`window.location.origin` (defaulted in the Login form), so either:
|
||||
|
||||
- Set the **API Base URL** field to your local server (e.g. `http://localhost:3000`)
|
||||
- Or configure a Vite proxy in `vite.config.ts` for `/api` and `/health` paths
|
||||
|
||||
## 4. Building
|
||||
|
||||
Compile TypeScript and bundle with Vite:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
Output is written to `dashboard/dist/`. The build is an optimised static bundle (HTML, CSS, JS).
|
||||
|
||||
To verify the build locally:
|
||||
|
||||
```bash
|
||||
npm run preview
|
||||
```
|
||||
|
||||
## 5. Deployment
|
||||
|
||||
The AgentIdP Express server automatically serves the built dashboard:
|
||||
|
||||
- Static assets at `/dashboard/` (via `express.static`)
|
||||
- SPA fallback — all `/dashboard/*` requests not matching a static file return `index.html`
|
||||
|
||||
**Steps:**
|
||||
|
||||
1. Build the dashboard: `cd dashboard && npm run build`
|
||||
2. Start (or restart) the AgentIdP server: `npm start`
|
||||
3. Open `https://your-api-host/dashboard/` in a browser
|
||||
|
||||
No additional nginx or CDN configuration is required for basic deployments.
|
||||
|
||||
## 6. Login
|
||||
|
||||
The login form has three fields:
|
||||
|
||||
| Field | Description |
|
||||
|---|---|
|
||||
| **API Base URL** | Base URL of the AgentIdP server, e.g. `https://api.example.com`. Defaults to the current page origin, which works when the dashboard is co-served. |
|
||||
| **Client ID** | The UUID of an agent registered in AgentIdP. This agent must have the scopes `agents:read agents:write tokens:read audit:read`. |
|
||||
| **Client Secret** | The plain-text client secret for the agent. Validated against the token endpoint on login. |
|
||||
|
||||
Credentials are stored in `sessionStorage` only — they are cleared when the browser tab is closed.
|
||||
|
||||
## 7. Pages
|
||||
|
||||
| Page | Route | Description |
|
||||
|---|---|---|
|
||||
| **Agents** | `/dashboard/agents` | Paginated list of all agents. Search by email (debounced), filter by status. Click a row for details. |
|
||||
| **Agent Detail** | `/dashboard/agents/:agentId` | Full agent metadata. Suspend or reactivate (with confirmation). Link to credentials. |
|
||||
| **Credentials** | `/dashboard/agents/:agentId/credentials` | List all credentials. Generate, rotate, or revoke. New secrets shown exactly once. |
|
||||
| **Audit Log** | `/dashboard/audit` | Paginated audit events with filters for agent ID, action, outcome, and date range. |
|
||||
| **Health** | `/dashboard/health` | PostgreSQL and Redis connectivity cards. Auto-refreshes every 30 seconds. |
|
||||
Reference in New Issue
Block a user