7d6e248a14
- 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>
96 lines
3.2 KiB
Markdown
96 lines
3.2 KiB
Markdown
# 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. |
|