Edge Device Metrics Dashboard

A comprehensive monitoring solution for edge devices using Flask, Prometheus, and Grafana. This project simulates metrics from Kubernetes edge devices and provides real-time visualization through a custom dashboard and embedded Grafana panels.

Features

Real-time Monitoring: Track CPU, RAM, temperature, and network metrics
Custom Dashboard: Interactive web interface with live charts
Prometheus Integration: Time-series data collection and storage
Grafana Visualization: Professional monitoring dashboards
Alert System: Configurable alerts for high resource usage
Data Export: CSV export functionality
Docker Support: Easy deployment with Docker Compose
Kubernetes Ready: K8s deployment manifests included

Architecture

┌─────────────────────────────────────────────────────────┐
│                    Docker Compose                        │
│                                                          │
│  ┌──────────────────┐    ┌──────────────────┐          │
│  │  Flask Exporter  │───▶│   Prometheus     │          │
│  │  Port: 5000      │    │   Port: 9090     │          │
│  │  - Dashboard     │    │   - Scrapes /    │          │
│  │  - API           │    │     metrics      │          │
│  │  - Metrics       │    │   - Stores data  │          │
│  └──────────────────┘    └──────────────────┘          │
│           │                       │                      │
│           │              ┌────────▼──────────┐          │
│           │              │     Grafana       │          │
│           │              │     Port: 3000    │          │
│           │              │   - Visualizes    │          │
│           │              │   - Dashboards    │          │
│           │              └───────────────────┘          │
│           │                       │                      │
└───────────┼───────────────────────┼──────────────────────┘
            │                       │
            ▼                       ▼
      Browser Access          Browser Access
   localhost:5000           localhost:3000

Tech Stack

Backend: Python 3.11, Flask
Metrics: Prometheus Client
Monitoring: Prometheus, Grafana
Frontend: HTML, CSS, JavaScript, Chart.js
Containerization: Docker, Docker Compose, mini
Orchestration: Kubernetes

Project Structure

edge_metrics_ojt_final/
├── exporter.py              # Flask application (main server)
├── devices.py               # Device data generator
├── requirements.txt         # Python dependencies
├── Dockerfile              # Docker image configuration
├── docker-compose.yml      # Multi-container setup
├── prometheus.yml          # Prometheus configuration
├── alert_rules.yml         # Alert definitions
├── grafana-dashboard.json  # Pre-configured Grafana dashboard
├── k8s/                    # Kubernetes manifests
│   ├── namespace.yaml                  # Creates edge-metrics namespace
│   ├── prometheus-config.yaml          # Prometheus config and alert rules
│   ├── exporter-deployment.yaml        # Flask exporter deployment & service
│   ├── prometheus-deployment.yaml      # Prometheus deployment & service
│   └── grafana-deployment.yaml         # Grafana deployment & service
├── static/
│   ├── index.html         # Dashboard UI
│   ├── dashboard.js       # Frontend logic
│   └── style.css          # Styling
                                                           

## Prerequisites

- Docker Desktop installed
- Docker Compose installed
- Python 3.11+ (for local development)
- 8GB RAM recommended

## Quick Start

### 1. Clone the Repository

```bash
cd edge_metrics_ojt_final

2. Start All Services

docker-compose up -d

This will start:

Flask Exporter on port 5000
Prometheus on port 9090
Grafana on port 3000

3. Access the Dashboard

Open your browser and navigate to:

Main Dashboard: http://localhost:5000
Prometheus: http://localhost:9090
Grafana: http://localhost:3000

4. Configure Grafana (First Time Only)

Go to http://localhost:3000
Login with default credentials:
- Username: admin
- Password: admin
Add Prometheus data source:
- Go to Configuration → Data Sources
- Click "Add data source"
- Select "Prometheus"
- URL: http://prometheus:9090
- Click "Save & Test"
Import dashboard:
- Go to Dashboards → Import
- Upload grafana-dashboard.json
- Select Prometheus data source
- Click "Import"

API Endpoints

Flask Exporter (Port 5000)

GET / - Main dashboard UI
GET /api/devices - JSON data of all devices
GET /metrics - Prometheus metrics endpoint

Example API Response

{
  "devices": [
    {
      "id": "edge-device-1",
      "type": "sensor",
      "cpu": 45.23,
      "ram": 62.15,
      "temp": 55.8,
      "network_sent": 3440000.0,
      "network_received": 29800000.0,
      "status": "Online",
      "anomaly": "Normal"
    }
  ],
  "timestamp": 1733315400
}

Metrics Exposed

The exporter exposes the following Prometheus metrics:

edge_device_cpu_usage_percent - CPU usage percentage
edge_device_ram_usage_percent - RAM usage percentage
edge_device_temperature_celsius - Device temperature
edge_device_network_sent_bytes - Network bytes sent
edge_device_network_received_bytes - Network bytes received
edge_device_anomaly_flag - Anomaly detection (1=Anomaly, 0=Normal)

All metrics include labels: device_id and type

Alerts

Configured alerts in Prometheus:

HighEdgeCPU: Triggers when CPU > 80% for 1 minute

View alerts at: http://localhost:9090/alerts

Dashboard Features

Main Dashboard (localhost:5000)

Device Table
- Real-time device metrics
- Status indicators (Online/High Load)
- Anomaly detection
- Filter by status
Live Charts
- CPU Usage Over Time
- RAM Usage Over Time
- Temperature Over Time
- Network Sent/Received
Controls
- Refresh Data button
- Export to CSV
- Status filter
- Auto-refresh every 4 seconds
Embedded Grafana
- Professional monitoring dashboard
- Historical data visualization

Development

Run Locally (Without Docker)

# Install dependencies
pip install -r requirements.txt

# Run the exporter
python exporter.py

# Access at http://localhost:5000

Build Docker Image

docker build -t edge-metrics-exporter:latest .

View Logs

# All services
docker-compose logs -f

# Specific service
docker-compose logs -f exporter
docker-compose logs -f prometheus
docker-compose logs -f grafana

Kubernetes Deployment

Deploy the edge metrics monitoring stack on Kubernetes Desktop or Minikube.

Prerequisites

Docker Desktop with Kubernetes enabled, OR
Minikube installed and running
kubectl configured

Deploy to Kubernetes Desktop

# 1. Switch to Docker Desktop context
kubectl config use-context docker-desktop

# 2. Build Docker image
docker build -t edge-metrics-exporter:latest .

# 3. Deploy all resources
kubectl apply -f k8s/namespace.yaml
kubectl apply -f k8s/prometheus-config.yaml
kubectl apply -f k8s/exporter-deployment.yaml
kubectl apply -f k8s/prometheus-deployment.yaml
kubectl apply -f k8s/grafana-deployment.yaml

# 4. Verify deployment
kubectl get pods -n edge-metrics

# 5. Access services (run each in separate terminal)
kubectl port-forward -n edge-metrics service/exporter 5000:5000
kubectl port-forward -n edge-metrics service/prometheus 9090:9090
kubectl port-forward -n edge-metrics service/grafana 3000:3000

Deploy to Minikube

# 1. Start Minikube
minikube start

# 2. Build image in Minikube's Docker environment
eval $(minikube docker-env)
docker build -t edge-metrics-exporter:latest .

# 3. Deploy all resources
kubectl apply -f k8s/

# 4. Verify deployment
kubectl get pods -n edge-metrics

# 5. Access services
kubectl port-forward -n edge-metrics service/exporter 5000:5000
kubectl port-forward -n edge-metrics service/prometheus 9090:9090
kubectl port-forward -n edge-metrics service/grafana 3000:3000

# Or use Minikube dashboard
minikube dashboard

Kubernetes Resources

The k8s/ directory contains:

namespace.yaml - Creates edge-metrics namespace
prometheus-config.yaml - ConfigMap with Prometheus config and alert rules
exporter-deployment.yaml - Flask exporter deployment and service
prometheus-deployment.yaml - Prometheus deployment and service
grafana-deployment.yaml - Grafana deployment and service

Access Applications

After port-forwarding, access:

Exporter Dashboard: http://localhost:5000
Prometheus: http://localhost:9090
Grafana: http://localhost:3000

View in Kubernetes Desktop UI

Open Kubernetes Desktop UI
Select namespace: edge-metrics
View running pods, deployments, and services

Cleanup Kubernetes Resources

# Delete all resources
kubectl delete namespace edge-metrics

# Or delete individually
kubectl delete -f k8s/

Troubleshooting

Grafana Not Loading in Iframe

If Grafana shows login screen in iframe:

Check environment variables in docker-compose.yml
Ensure GF_AUTH_ANONYMOUS_ENABLED=true is set
Restart containers: docker-compose restart grafana

No Data in Prometheus

Check if exporter is running: docker-compose ps
Verify metrics endpoint: http://localhost:5000/metrics
Check Prometheus targets: http://localhost:9090/targets
Ensure target status is "UP"

Containers Not Starting

# Stop all containers
docker-compose down

# Remove volumes
docker-compose down -v

# Rebuild and start
docker-compose up -d --build

Configuration

Change Scrape Interval

Edit prometheus.yml:

global:
  scrape_interval: 10s  # Change from 5s to 10s

Modify Alert Rules

Edit alert_rules.yml:

- alert: HighEdgeCPU
  expr: edge_device_cpu_usage_percent > 90  # Change threshold
  for: 2m  # Change duration

Adjust Auto-Refresh Rate

Edit static/dashboard.js:

setInterval(refreshAll, 5000);  // Change from 4000ms to 5000ms

Stop Services

# Stop containers
docker-compose stop

# Stop and remove containers
docker-compose down

# Stop and remove everything (including volumes)
docker-compose down -v

How It Works

devices.py generates random CPU, RAM, temperature, and network metrics. exporter.py exposes: /api/devices → JSON data for the frontend /metrics → Prometheus-format data The frontend fetches new metrics every second. UI updates in real time using JavaScript. Deployed on Render using Gunicorn for production.

Images

metrics-endpoint

prometheus-cpu-usage-graph

prometheus-memory-graph

dashboard

kubernate dashboard

deployment link

https://edge-device-metrics-simulated-2.onrender.com

https://edge-device-metrics-simulated-2.onrender.com/metrics

License

This project is created for educational purposes (OJT Project).

Author

Created as part of On-the-Job Training (OJT) project for edge device monitoring.

Support

For issues or questions, please check the troubleshooting section or review the logs.

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
__pycache__		__pycache__
k8s		k8s
static		static
Dockerfile		Dockerfile
README.md		README.md
alert_rules.yml		alert_rules.yml
devices.py		devices.py
docker-compose.yml		docker-compose.yml
exporter.py		exporter.py
grafana-dashboard.json		grafana-dashboard.json
prometheus.yml		prometheus.yml
render.yaml		render.yaml
requirements.txt		requirements.txt

Folders and files

Latest commit

History

Repository files navigation

Edge Device Metrics Dashboard

Features

Architecture

Tech Stack

Project Structure

2. Start All Services

3. Access the Dashboard

4. Configure Grafana (First Time Only)

API Endpoints

Flask Exporter (Port 5000)

Example API Response

Metrics Exposed

Alerts

Dashboard Features

Main Dashboard (localhost:5000)

Development

Run Locally (Without Docker)

Build Docker Image

View Logs

Kubernetes Deployment

Prerequisites

Deploy to Kubernetes Desktop

Deploy to Minikube

Kubernetes Resources

Access Applications

View in Kubernetes Desktop UI

Cleanup Kubernetes Resources

Troubleshooting

Grafana Not Loading in Iframe

No Data in Prometheus

Containers Not Starting

Configuration

Change Scrape Interval

Modify Alert Rules

Adjust Auto-Refresh Rate

Stop Services

How It Works

Images

deployment link

License

Author

Support

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages