60 lines
2.0 KiB
Markdown
60 lines
2.0 KiB
Markdown
# ClusterCanvas web UI
|
|
|
|
React 19 + TypeScript + Vite SPA for ClusterCanvas. It talks to the Go API over `/api` and `/health`.
|
|
|
|
For service config, remotedev, and repo-wide build/test targets, see the [root README](../README.md).
|
|
|
|
## Develop
|
|
|
|
From this directory:
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Or from the repo root: `make webui` (UI only) or `make dev` (API + UI).
|
|
|
|
The Vite dev server listens on `:5173` and proxies `/api` and `/health` to `http://localhost:8080` (see `vite.config.ts`).
|
|
|
|
Optional: set `VITE_API_BASE_URL` if you call the API without the Vite proxy (defaults to `http://localhost:8080`). An empty value means same-origin requests (used by `make remotedev` builds).
|
|
|
|
## Scripts
|
|
|
|
| Script | Purpose |
|
|
|--------|---------|
|
|
| `npm run dev` | Vite dev server with HMR |
|
|
| `npm run build` | Typecheck + production build to `dist/` |
|
|
| `npm run preview` | Serve the production build locally |
|
|
| `npm test` | Vitest (jsdom) once |
|
|
| `npm run test:watch` | Vitest in watch mode |
|
|
| `npm run lint` | Oxlint (see `.oxlintrc.json`) |
|
|
|
|
## App map
|
|
|
|
Flow: **setup wizard** → **login** → main shell.
|
|
|
|
| Area | Notes |
|
|
|------|-------|
|
|
| Overview | Placeholder for a future dashboard |
|
|
| Containers / Docker / VMs | UI categories for manually registered SSH hosts |
|
|
| Activity | Node and auth audit logs (when permitted) |
|
|
| Profile | Password change and TOTP enroll/disable |
|
|
| Configuration | Users, groups, roles catalog, actions, security, network; Integrations / Advanced are placeholders |
|
|
|
|
Node detail tabs: **Overview** (metadata), **Actions** (groups, schedules, run), **Logs** (action run history).
|
|
|
|
### Key source files
|
|
|
|
| Path | Role |
|
|
|------|------|
|
|
| `src/App.tsx` | Shell, routing state, main screens |
|
|
| `src/api/client.ts` | HTTP client and API types |
|
|
| `src/navigation.ts` | Section / tab / URL helpers |
|
|
| `src/NodeDetailPanel.tsx` | Per-node overview, actions, logs |
|
|
| `src/SetupWizard.tsx` | First-run setup |
|
|
|
|
## Stack
|
|
|
|
React 19, Vite 8, Vitest + Testing Library, Oxlint. React Compiler is not enabled.
|