Files

33 lines
1.8 KiB
Markdown

# Frontend
Vite React demo UI for the minimal job queue.
![prompt for generating an svg image for the React frontend information architecture of a job queue demo UI with four routes: dashboard, jobs page, job detail page, and global events page; show shared AppLayout with topbar/sidebar, API client calling Django REST endpoints, and visual panels for stats, job table, detail timeline, and terminal-style event log; use clean product UI diagram style](../assets/images/frontend/ui-architecture.png)
It reuses the visual style from the previous advanced frontend, but only keeps:
- dashboard
- jobs page
- job detail page
- global events page
The UI polls:
![prompt for generating an svg image for frontend polling and pagination data flow: dashboard polls jobs stats and recent events every 2 seconds, job detail polls job and job events every 1 second, events page fetches first cursor page then loads older pages on terminal scroll, jobs page uses limit-offset pagination with page size and page number; show React pages on left and API endpoints on right with interval labels](../assets/images/frontend/data-flow.png)
- jobs and stats every 2 seconds
- events every 1 second
No WebSockets are used.
![prompt for generating an svg image for a terminal-style event log UI component with dark console background, colored rows by event type, cursor-paginated first page, older events loaded only when scrolling inside the terminal, and custom theme-aware scrollbar; include labels for live polling, de-duplication, and infinite scroll boundary](../assets/images/frontend/terminal-event-feed.png)
## Run
```powershell
npm install
npm run dev
```
The Docker frontend image serves the local `dist/` directory with nginx, so run `npm run build` before `docker compose up --build` if `dist/` is missing or stale.