36 lines
1.3 KiB
Markdown
36 lines
1.3 KiB
Markdown
|
# UI Architecture
|
||
|
|
|
||
|
|
The frontend is a Single Page Application (SPA) built with **Vue 3** and **Vite**. It is located in `APP_UI/`.
|
||
|
|
|
||
|
|
## Technology Stack
|
||
|
|
- **Framework**: Vue 3 (Composition API, Script Setup)
|
||
|
|
- **Build Tool**: Vite
|
||
|
|
- **Styling**: Bootstrap 5 + Custom CSS (`src/assets/main.css`)
|
||
|
|
- **Routing**: Vue Router
|
||
|
|
- **HTTP Client**: Axios
|
||
|
|
|
||
|
|
## Key Features
|
||
|
|
- **Responsive Design**: Mobile-friendly sidebar and layouts.
|
||
|
|
- **Theme Support**: Built-in Light/Dark mode toggling.
|
||
|
|
- **Real-Time Data**: Polls the Monitoring API (`APP_CORE`) for live statistics.
|
||
|
|
- **Authentication**: JWT-based auth flow with support for 2FA.
|
||
|
|
|
||
|
|
## Configuration
|
||
|
|
Run-time configuration is loaded from `/public/config.json`. This allows the Vue app to be built once and deployed to any environment.
|
||
|
|
|
||
|
|
**File Structure (`config.json`):**
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
"api_base_url": "/api/v1", // Proxy path to Core Monitoring API
|
||
|
|
"profiles_api_base_url": "/api", // Proxy path to Profiler API
|
||
|
|
"refresh_interval": 30000 // Poll interval in ms
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Integration
|
||
|
|
The UI is served by Nginx in production and proxies API requests to:
|
||
|
|
- `/api/v1/` -> **APP_CORE** (Flask, Port 5000)
|
||
|
|
- `/profiles-api/` -> **APP_PROFILER** (FastAPI, Port 8000)
|
||
|
|
|
||
|
|
See [Deployment Guide](../General/Deployment.md) for Nginx configuration details.
|