Maze UI
| Field | AS_IS value |
|---|---|
| Kind | Client-side web application served by NGINX |
| C4 classification | Container: independently deployable web application |
| Deployment evidence | Vite build copied into a dedicated NGINX image; Helm Deployment, Service, ingress route and port 4200 |
| Source | applications/ui |
| Technology | React 18, TypeScript, Vite, Carbon Design System, Cytoscape, Monaco Editor, D3, React Router |
| Image | ui in AWS ECR; build uses tooling/docker/Dockerfile.ui |
| Runtime | NGINX, container/service port 4200, ingress path / |
| Persistence | Browser local storage for Maze and GitHub tokens; server-side state is held by Core/PostgreSQL/object storage |
Responsibilities
- Provide project, resource-canvas, template, import, Terraform, cost, account, status, feedback, administration, roadmap, and release-note experiences.
- Render and edit cloud-resource graphs with Cytoscape and configuration/code with Monaco.
- Call same-origin Maze APIs and handle authentication redirects.
- Subscribe to server-sent notifications.
Interfaces and dependencies
The service client declares /api/, /api/git/, and /api/images/ base paths. Authenticated requests read auth-token-key and githubToken from browser local storage and send them as request headers. The UI therefore depends on Ingress path routing to Maze Core and Maze Git.
Build and deployment observations
The multi-stage Dockerfile builds the entire monorepo dependency graph before applications/ui, then copies Vite output into an NGINX image. nginx/nginx.conf provides SPA fallback and gzip, but no API reverse proxy; Kubernetes Ingress owns path routing.
Risks and migration implications
- UI code imports controller types from
@maze/api, coupling browser builds to backend package structure. - Long-lived tokens in local storage increase exposure to browser script compromise.
- The Docker build context and prerequisite build steps are broader than this container's runtime responsibility.
- A hard-coded Prism API URL remains in the UI service enum, while other integrations use same-origin routes.