Table of content
- Introduction
- System Architecture
- Implementation Details
- Logging
- Technical Stack
- Runtime Architecture
- Source Code
Introduction
This page provides a comprehensive overview of the Dashboard system, its architecture, and how different components interact to deliver real-time system monitoring. It serves as an entry point to understand the system’s purpose, design decisions, and technical implementation.
Purpose and Scope
The Dashboard provides real-time monitoring of system resources through a web interface. It consists of two primary data components:
- Live Data - CPU, Memory, and Disk usage metrics that update in real-time via WebSockets
- Static Data - System information like hostname, IP address, and OS details that are fetched once
The system is designed to efficiently handle multiple simultaneous users while minimizing computational overhead by using a single worker thread to gather metrics and push updates to all connected clients.
System Architecture
High-level Architecture
The dashboard architecture addresses the computational expense of system information collection by implementing a WebSocket-based approach. Rather than having each user request data on-demand, a single worker thread collects metrics and pushes updates to all connected clients.
Key components include:
- Client Browser: HTML5-compatible browser that displays the dashboard UI
- Nginx Server: Acts as a reverse proxy for the Flask server
- Flask Server: Python web server with WebSocket capability
- Worker Thread: Part of the Flask server, performs system metrics collection and pushes updates
Implementation Details
Data Collection
The dashboard separates data collection into two classes:
| Class | Purpose | Update Frequency | Data Collected |
|---|---|---|---|
| StaticData | Collects static system information | Once, on initial connection | Hostname, IP address, OS details |
| DynamicData | Collects changing system metrics | Regular intervals (every second) | CPU usage, Memory usage, Disk usage |
This separation allows the system to optimize resource usage by only collecting static information once.
Worker Thread Implementation
The worker thread is a critical component of the system that:
- Runs as a singleton instance
- Collects system metrics at regular intervals
- Pushes updates to all connected clients via WebSockets
This design ensures that resource-intensive system metrics collection happens only once, regardless of how many clients are connected.
Logging
The dashboard implements comprehensive logging for troubleshooting and monitoring:
- Access and error logs handled at the Flask server level
- Log rotation policy to manage log file size
- Console and file logging for different environments
The logging configuration can be found in the logging.conf file.
Sources: README.md34-41
Technical Stack
The dashboard leverages several technologies:
| Component | Technology | Purpose |
|---|---|---|
| Frontend | HTML5, JavaScript | Client-side user interface |
| Backend | Flask, Flask-SocketIO | Web server and WebSocket support |
| Proxy | Nginx | Reverse proxy for the Flask server |
| Deployment | Vagrant, Puppet | Environment setup and configuration |
| Monitoring | Python system libraries | System metrics collection |
These technologies work together to create a responsive, real-time system monitoring dashboard.
Runtime Architecture
The runtime architecture illustrates how system resource data flows through various components to reach the client browser. The key insight is that all data collection happens in a single worker thread, which then distributes updates to all connected clients via WebSockets.
Source Code
You can find full source code GitHub Dashboard. Feel free to fork and contribute to the project. The code is organized into modules for easy navigation and understanding.