Feature: Web Dashboard
Relevant source files
The following files were used as context for generating this wiki page:The Web Dashboard is a web interface for the Technical Blog Monitor, providing a user-friendly way to view statistics and browse the blog posts discovered by the monitoring daemon. It is built using FastAPI for the backend API and a simple, dynamic HTML/JavaScript frontend for the user interface.
The dashboard displays key metrics such as the total number of posts collected, posts from the last day and week, and the number of active sources. It also presents a list of the most recent posts with links to the original articles. The data is fetched dynamically from the backend and periodically refreshed.
Architecture
The dashboard is a standalone web application powered by FastAPI and served by Uvicorn. It interacts with the project's vector database to retrieve post information and statistics. If a connection to the database cannot be established, it can fall back to displaying mock data for demonstration purposes.
The overall architecture is composed of a Python-based backend, a Jinja2-templated HTML frontend, and client-side JavaScript for dynamic data loading.
Sources: monitor/web/app.py, monitor/dashboard.py, monitor/web/templates/index.html
Component Diagram
The following diagram illustrates the main components of the Web Dashboard and their interactions.
Launch and Configuration
The dashboard is launched via the run_dashboard.sh script, which sets up the environment and executes monitor/dashboard.py. The Python script initializes the FastAPI application and starts a Uvicorn server.
Sources: run_dashboard.sh, [monitor/dashboard.py]
Launch Sequence
Configuration
The dashboard's behavior can be configured through environment variables, which are parsed by the WebDashboardConfig Pydantic model.
| Parameter | Type | Default | Description |
|---|---|---|---|
enabled | bool | True | Toggles the entire dashboard feature. |
host | str | "0.0.0.0" | The host address to bind the server to. |
port | int | 8080 | The port to run the server on. |
auto_refresh_seconds | int | 30 | Interval in seconds for the frontend to auto-refresh data. |
show_mock_data | bool | True | If true, shows mock data when a real database connection fails. |
Sources: monitor/config.py:202-208
Backend API
The backend is a FastAPI application defined in monitor/web/app.py. It exposes several endpoints to serve the frontend and provide data.
Sources: [monitor/web/app.py]
API Endpoints
| Method | Path | Response | Description |
|---|---|---|---|
GET | / | HTMLResponse | Serves the main index.html dashboard page. |
GET | /api/stats | JSONResponse | Returns dashboard statistics as a DashboardStats object. |
GET | /api/posts | JSONResponse | Returns a paginated list of recent posts as PostSummary objects. |
GET | /health | JSONResponse | A health check endpoint that reports the application status and DB connectivity. |
Sources: monitor/web/app.py:85-197, monitor/web/templates/index.html:70-73
Data Models
The API uses Pydantic models to define the structure of the data it returns.
Pydantic Class Diagram
This diagram shows the structure of the main data models used by the API.
Sources: monitor/web/app.py:22-45
Frontend UI
The user interface is a single HTML page (index.html) that uses JavaScript to dynamically load and display data from the backend API.
Sources: [monitor/web/templates/index.html]
UI Components
- Navigation Bar: Provides links to the Dashboard, API endpoints, and Health Check.
- Statistics Cards: A grid of cards displaying
Total Posts,Posts Today,Posts This Week, andActive Sources. - Recent Posts List: A list of recently discovered blog posts, showing title, source, author, and publication date.
Sources: monitor/web/templates/index.html:69-102
Data Loading Flow
The frontend fetches data upon initial load and then refreshes it periodically.
// monitor/web/templates/index.html:142-145
// Refresh every 30 seconds
setInterval(loadDashboard, 30000);
The following sequence diagram shows how the frontend loads data from the backend API.