OpenVPN-Monitoring-Simple/DOCS/UI/Architecture.md

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):

{
  "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 for Nginx configuration details.