Tandap Noel Bansikah

Posted on Mar 13

Building a Real-time Laptop Monitoring System with Flask and Redis

#python #devops #redis #monitoring

Introduction

After a considerable break from Python Flask development, I decided to refresh my skills by creating a practical project - a real-time laptop monitoring system. This project combines the simplicity of Flask with the power of Redis for real-time data handling, creating a responsive dashboard that displays crucial system metrics like CPU, memory, and disk usage.

Why Redis?

Redis, an in-memory data structure store, plays a crucial role in this project. It serves as a perfect solution for:

Real-time Data Storage: Storing rapidly changing system metrics efficiently
Fast Data Retrieval: Providing instant access to historical performance data
Time-Series Data: Managing temporal data for trend analysis and visualization
Lightweight: Minimal overhead compared to traditional databases
Built-in Data Structures: Utilizing Redis lists for storing time-series metrics

Prerequisites

Before diving into the project, ensure you have the following installed:

Docker and Docker Compose
Python 3.9 (included in the Docker image)
Modern web browser for viewing the dashboard
Basic understanding of Python, Flask, and Redis

Project Structure

laptop-monitor/
├── app/
│   ├── __init__.py
│   ├── monitor.py
│   ├── redis_client.py
│   ├── routes.py
│   └── templates/
│       └── index.html
├── static/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── script.js
├── Dockerfile
├── docker-compose.yml
└── requirements.txt

Code Implementation

1. Flask Application Initialization (app/init.py)

import sys
import os
sys.path.append(os.path.dirname(os.path.abspath(__file__)))

from flask import Flask
from routes import init_routes

app = Flask(__name__,
           static_folder='../static',
           static_url_path='')

init_routes(app)

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000, debug=True)

2. System Monitoring (app/monitor.py)

import psutil

def get_metrics():
    return {
        'cpu_percent': psutil.cpu_percent(),
        'memory_percent': psutil.virtual_memory().percent,
        'disk_percent': psutil.disk_usage('/').percent
    }

3. Redis Client (app/redis_client.py)

import redis
import json
from datetime import datetime

redis_client = redis.Redis(host='redis', port=6379, db=0)

def store_metrics(metrics):
    timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
    metrics['timestamp'] = timestamp
    redis_client.lpush('metrics', json.dumps(metrics))
    redis_client.ltrim('metrics', 0, 99)  # Keep last 100 entries

def get_metrics_history():
    metrics_history = redis_client.lrange('metrics', 0, -1)
    return [json.loads(m) for m in metrics_history]

4. Routes Configuration (app/routes.py)

from flask import render_template
from monitor import get_metrics
from redis_client import store_metrics, get_metrics_history

def init_routes(app):
    @app.route('/')
    def dashboard():
        metrics = get_metrics()
        store_metrics(metrics)
        history = get_metrics_history()
        return render_template('index.html', metrics=metrics, history=history)

    @app.route('/api/metrics')
    def api_metrics():
        return get_metrics()

5. Frontend Template (app/templates/index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laptop Monitor</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
    <div class="container">
        <h1>Laptop Performance Dashboard</h1>
        <div class="metrics-grid">
            <div class="metric-card">
                <h3>CPU Usage</h3>
                <p class="metric-value">{{ metrics.cpu_percent }}%</p>
            </div>
            <div class="metric-card">
                <h3>Memory Usage</h3>
                <p class="metric-value">{{ metrics.memory_percent }}%</p>
            </div>
            <div class="metric-card">
                <h3>Disk Usage</h3>
                <p class="metric-value">{{ metrics.disk_percent }}%</p>
            </div>
        </div>
        <div class="chart-container">
            <canvas id="performanceChart"></canvas>
        </div>
    </div>
    <script src="/js/script.js"></script>
</body>
</html>

6. Frontend Styling (static/css/style.css)

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7fa;
    margin: 0;
    padding: 0;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
}

h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 30px;
    font-size: 2.5em;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.metric-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.2s;
}

.metric-card:hover {
    transform: translateY(-5px);
}

.metric-card h3 {
    margin: 0 0 10px;
    color: #34495e;
    font-size: 1.2em;
}

.metric-value {
    font-size: 2em;
    font-weight: bold;
    color: #2980b9;
    margin: 0;
}

.chart-container {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 100%;
}

canvas {
    width: 100% !important;
    height: auto !important;
}

7. Frontend JavaScript (static/js/script.js)

let chart;
const maxDataPoints = 10;

function initChart() {
    const ctx = document.getElementById('performanceChart').getContext('2d');
    chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [
                {
                    label: 'CPU Usage',
                    borderColor: '#2980b9',
                    data: [],
                    fill: false
                },
                {
                    label: 'Memory Usage',
                    borderColor: '#27ae60',
                    data: [],
                    fill: false
                },
                {
                    label: 'Disk Usage',
                    borderColor: '#c0392b',
                    data: [],
                    fill: false
                }
            ]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            },
            animation: {
                duration: 0
            }
        }
    });
}

function updateMetrics() {
    fetch('/api/metrics')
        .then(response => response.json())
        .then(data => {
            // Update metric values
            document.querySelector('.metric-card:nth-child(1) .metric-value').textContent = `${data.cpu_percent}%`;
            document.querySelector('.metric-card:nth-child(2) .metric-value').textContent = `${data.memory_percent}%`;
            document.querySelector('.metric-card:nth-child(3) .metric-value').textContent = `${data.disk_percent}%`;

            // Update chart
            const timestamp = new Date().toLocaleTimeString();
            chart.data.labels.push(timestamp);
            chart.data.datasets[0].data.push(data.cpu_percent);
            chart.data.datasets[1].data.push(data.memory_percent);
            chart.data.datasets[2].data.push(data.disk_percent);

            // Remove old data points if exceeding maxDataPoints
            if (chart.data.labels.length > maxDataPoints) {
                chart.data.labels.shift();
                chart.data.datasets.forEach(dataset => dataset.data.shift());
            }

            chart.update();
        })
        .catch(error => console.error('Error fetching metrics:', error));
}

// Initialize chart when page loads
document.addEventListener('DOMContentLoaded', () => {
    initChart();
    // Update metrics every 2 seconds
    setInterval(updateMetrics, 2000);
});

8. Requirements (requirements.txt)

Flask==2.0.1
redis==4.0.2
psutil==5.8.0

9. Docker Configuration

Dockerfile

FROM python:3.9-slim
WORKDIR /app

# Copy requirements first to leverage Docker cache
COPY requirements.txt /app/
RUN pip install -r requirements.txt

# Create static directory structure explicitly
RUN mkdir -p /app/static/css /app/static/js

# Copy all application files
COPY . /app/

# Ensure proper permissions for static files
RUN chmod -R 755 /app/static

CMD ["python", "-m", "flask", "run", "--host=0.0.0.0"]

docker-compose.yml

services:
  flask-app:
    build: .
    ports:
      - "5001:5000"
    depends_on:
      - redis
    environment:
      - REDIS_HOST=redis
    volumes:
      - ./static:/app/static
  redis:
    image: redis:latest
    ports:
      - "6379:6379"
    volumes:
      - redis-data:/data

volumes:
  redis-data:

Running the Application

To run the application, follow these steps:

Clone the repository:

cd laptop-monitor #at the root of you project where we have the docker compose file

Build and start the containers:

docker-compose up --build

Access the dashboard: Open your web browser and navigate to http://localhost:5001

Conclusion

This laptop monitoring project serves as an excellent refresher for Python Flask development while incorporating modern development practices like containerization and real-time data handling. The combination of Flask's simplicity and Redis's powerful data handling capabilities creates a robust solution for system monitoring.

The project demonstrates several key concepts:

Building a Flask web application
Real-time data handling with Redis
Docker containerization
Frontend development with Chart.js
System metrics monitoring with psutil

If you encounter any challenges while setting up or running the project, feel free to reach out in the comments section below. Your feedback and questions are valuable for improving this tutorial and helping others in the community.
Link to the code on github

References

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More