📊 Monitoring Dashboard

A self-hosted, Grafana-inspired monitoring solution without Docker. Monitor multiple servers with a beautiful UI, real-time metrics, and intelligent alerts.

✨ Features

Core Features

• 📊 Grafana-like UI: Modern dark theme with drag & drop panels
• 🖥️ Multi-Server Monitoring: Monitor unlimited remote servers
• 🔔 Smart Alerts: CPU, Memory, Disk, Temperature alerts via Discord/Telegram
• 📈 Real-time Metrics: Live updates via WebSocket
• 👥 Multi-User System: Separate dashboards per user with login
• 🎨 Customizable: Drag, resize, and arrange panels freely
• 💾 Persistent Storage: Save your dashboard layouts

Supported Metrics

Metric	Details	Unit
CPU	Overall usage, per-core	Percentage
Memory	RAM usage, swap	Percentage
Disk	Usage per mount	Percentage, GB
Network	In/out traffic	MB/s
Temperature	CPU temperature	°C
System	Uptime, load average	-
Processes	Top processes by CPU/memory	-

Notification Channels

• Discord webhooks
• Telegram bot
• In-app notifications
• Browser push notifications

📋 Table of Contents

• Requirements
• Quick Start
• Detailed Installation
• Configuration
• Adding Remote Servers
• Alert Setup
• Usage Guide
• API Reference
• Troubleshooting
• Contributing
• License

💻 Requirements

Dashboard Server

Requirement	Minimum	Recommended
OS	Linux/macOS/Windows	Linux (Ubuntu 20.04+)
Python	3.8	3.10+
RAM	256 MB	512 MB
Disk	100 MB	1 GB
Network	Port 5000	-

Monitored Servers

Requirement	Minimum	Recommended
OS	Linux/macOS/Windows	Linux
Python	3.6	3.8+
RAM	50 MB	100 MB
Network	Port 5001	-

🚀 Quick Start

One-Line Install (Linux/macOS)

curl -sSL https://raw.githubusercontent.com/yourusername/monitoring-dashboard/main/scripts/install.sh | bash

Manual Installation

1. Clone the Repository

git clone https://github.com/Yuray-Dev/Monitra.git
cd monitoring-dashboard

2. Create Directory Structure

mkdir -p backend frontend/css frontend/js database agents

3. Install Dependencies

cd backend
pip install -r requirements.txt

4. Configure Environment

cp .env.example .env
# Edit .env with your settings
nano .env

5. Start the Dashboard

chmod +x start.sh
./start.sh

6. Access the Dashboard

http://localhost:5000

Default login: admin / admin

📦 Detailed Installation

Step 1: Clone or Create Project Files

Create all required files from the src directory:

monitra/
├── start.sh
├── start.bat
├── backend/
│   ├── app.py
│   ├── config.py
│   ├── requirements.txt
│   └── .env.example
├── frontend/
│   ├── index.html
│   ├── dashboard.html
│   ├── css/
│   │   └── style.css
│   └── js/
│       ├── dashboard.js
│       ├── drag-drop.js
│       └── alerts.js
├── database/
│   └── README.md
└── agents/
    └── monitoring-agent.py

Step 2: Python Virtual Environment (Recommended)

# Create virtual environment
python3 -m venv venv

# Activate it
source venv/bin/activate  # Linux/macOS
# venv\Scripts\activate    # Windows

# Install dependencies
cd backend
pip install -r requirements.txt

Step 3: Database Setup

The database will be created automatically on first run. To manually initialize:

cd backend
python

from app import app, db
with app.app_context():
    db.create_all()
    print("Database created successfully!")
exit()

⚙️ Configuration

Environment Variables (.env)

# Flask Security - CHANGE THIS!
SECRET_KEY=your-very-long-and-secure-random-key-here

# Discord Webhook (optional)
DISCORD_WEBHOOK_URL=https://discord.com/api/webhooks/123456789/abc123def456

# Telegram Bot (optional)
TELEGRAM_BOT_TOKEN=123456789:ABCdefGHIjklMNOpqrsTUVwxyz
TELEGRAM_CHAT_ID=123456789

# Alert Thresholds (%)
CPU_THRESHOLD=80
MEMORY_THRESHOLD=85
DISK_THRESHOLD=90
TEMP_THRESHOLD=75

# Update Intervals (seconds)
METRICS_INTERVAL=5
METRICS_RETENTION=24  # hours

# Security (for HTTPS)
SESSION_COOKIE_SECURE=False  # Set to True in production with HTTPS
REMEMBER_COOKIE_SECURE=False

🌐 Adding Remote Servers

Installing the Agent

Linux Server (Ubuntu/Debian)

# Copy agent to server
scp agents/monitoring-agent.py user@remote-server:/tmp/

# SSH into server
ssh user@remote-server

# Install Python and dependencies
sudo apt update
sudo apt install -y python3 python3-pip
pip3 install flask psutil

# Setup agent
sudo mkdir -p /opt/monitoring-agent
sudo cp /tmp/monitoring-agent.py /opt/monitoring-agent/
cd /opt/monitoring-agent

# Create systemd service
sudo tee /etc/systemd/system/monitoring-agent.service << EOF
[Unit]
Description=Monitoring Agent
After=network.target

[Service]
Type=simple
User=nobody
WorkingDirectory=/opt/monitoring-agent
Environment="MONITORING_API_KEY=your-secure-api-key"
ExecStart=/usr/bin/python3 /opt/monitoring-agent/monitoring-agent.py --port 5001
Restart=always
RestartSec=10

[Install]
WantedBy=multi-user.target
EOF

# Start agent
sudo systemctl daemon-reload
sudo systemctl enable monitoring-agent
sudo systemctl start monitoring-agent
sudo systemctl status monitoring-agent

Windows Server

# Download Python from python.org
# Install Python with "Add to PATH" option

# Copy agent to server
copy monitoring-agent.py C:\Monitoring-Agent\

# Create scheduled task
schtasks /create /tn "MonitoringAgent" /tr "C:\Python39\python.exe C:\Monitoring-Agent\monitoring-agent.py" /sc onstart /ru SYSTEM

# Start agent
python C:\Monitoring-Agent\monitoring-agent.py

Adding Server to Dashboard

1. Login to the dashboard
2. Click ➕ next to "Servers" in the sidebar
3. Fill in the details:
   • Name: Friendly name (e.g., "Production Web Server")
   • Host: IP address or hostname
   • Port: 5001 (or custom port)
   • API Key: The key you set on the agent
4. Click Hinzufügen

🔔 Alert Setup

Discord Alerts

1. Create Discord Webhook:

   • Open Discord Server Settings
   • Go to Integrations → Webhooks
   • Click "New Webhook"
   • Name it "Monitoring Alerts"
   • Copy the Webhook URL

2. Add to .env:

   DISCORD_WEBHOOK_URL=https://discord.com/api/webhooks/123456789/abc123def456

Telegram Alerts

1. Create Bot:

   • Message @BotFather on Telegram
   • Send /newbot and follow instructions
   • Copy the bot token

2. Get Chat ID:

   • Start a chat with your bot
   • Send any message
   • Visit: https://api.telegram.org/bot<YOUR_BOT_TOKEN>/getUpdates
   • Copy the chat_id from response

3. Add to .env:

   TELEGRAM_BOT_TOKEN=123456789:ABCdefGHIjklMNOpqrsTUVwxyz
   TELEGRAM_CHAT_ID=123456789

📖 Usage Guide

First Steps

1. Login with admin/admin
2. Add your first server (see above)
3. Arrange panels by dragging them from the library
4. Resize panels using the expand button (⤢)
5. Save your layout with the "Speichern" button

Panel Types

Panel	Icon	Description
CPU	🖥️	Overall CPU usage and per-core breakdown
Memory	💾	RAM and swap utilization
Disk	💽	Disk space usage per mount point
Network	🌐	Incoming/outgoing network traffic
Temperature	🌡️	CPU temperature sensor data

Managing Alerts

• View Alerts: Check the alerts panel in sidebar
• Dismiss: Click ✓ on individual alerts
• Severity Levels:
  • 🔴 Critical - Immediate action needed
  • 🟡 Warning - Investigate soon
  • 🔵 Info - Informational only

User Management

Add new user:

1. Logout
2. Click "Registrieren" tab
3. Fill in username and password
4. Login with new credentials

Each user has:

• Private dashboard layout
• Own server list
• Personal alert history

📡 API Reference

Authentication

All API endpoints (except login/register) require authentication via session cookie.

Endpoints

GET /api/user

Get current user info

curl -b cookies.txt http://localhost:5000/api/user

GET /api/servers

List all servers

curl -b cookies.txt http://localhost:5000/api/servers

POST /api/servers

Add a new server

curl -b cookies.txt -X POST -H "Content-Type: application/json" \
     -d '{"name":"Web Server","host":"192.168.1.100","port":5001,"api_key":"secret"}' \
     http://localhost:5000/api/servers

GET /api/metrics/<server_id>

Get metrics for a server

curl -b cookies.txt http://localhost:5000/api/metrics/1

GET /api/alerts

Get recent alerts

curl -b cookies.txt http://localhost:5000/api/alerts

PUT /api/dashboard

Save dashboard layout

curl -b cookies.txt -X PUT -H "Content-Type: application/json" \
     -d '{"layout":{},"panels":[]}' \
     http://localhost:5000/api/dashboard

WebSocket Events

Event	Direction	Description
metrics_update	Server → Client	New metrics data
new_alert	Server → Client	New alert triggered
server_error	Server → Client	Server connection error

🔍 Troubleshooting

Common Issues

Dashboard won't start

# Check Python version
python3 --version

# Check if port is in use
lsof -i :5000  # Linux/macOS
netstat -ano | findstr :5000  # Windows

# Run in debug mode
cd backend
python app.py --debug

Can't connect to remote server

# Test connection from dashboard server
curl http://remote-server:5001/health

# Check agent status
sudo systemctl status monitoring-agent  # Linux
ps aux | grep monitoring-agent  # macOS
tasklist | findstr python  # Windows

# Check firewall
sudo ufw status  # Ubuntu
sudo firewall-cmd --list-all  # CentOS

No metrics showing

# Test agent directly
curl -H "X-API-Key: your-key" http://remote-server:5001/metrics

# Check database
sqlite3 database/monitoring.db "SELECT COUNT(*) FROM metric;"

Alerts not sending

# Test Discord webhook
curl -X POST -H "Content-Type: application/json" \
     -d '{"content":"Test Alert"}' \
     YOUR_DISCORD_WEBHOOK_URL

# Test Telegram
curl -X POST https://api.telegram.org/botYOUR_TOKEN/sendMessage \
     -d "chat_id=YOUR_CHAT_ID&text=Test Alert"

🤝 Contributing

Contributions are welcome! Please read our Contributing Guidelines.

Development Setup

# Fork and clone
git clone https://github.com/yourusername/monitoring-dashboard.git
cd monitoring-dashboard

# Install dev dependencies
pip install -r requirements-dev.txt

# Run tests
pytest tests/

# Run linter
flake8 backend/ frontend/js/

Project Structure

monitoring-dashboard/
├── backend/           # Flask backend
│   ├── app.py        # Main application
│   ├── config.py     # Configuration
│   └── requirements.txt
├── frontend/          # Web frontend
│   ├── index.html    # Login page
│   ├── dashboard.html # Main dashboard
│   ├── css/          # Stylesheets
│   └── js/           # JavaScript files
├── agents/            # Remote monitoring agents
├── database/          # SQLite database
├── tests/             # Unit tests
├── docs/              # Documentation
└── scripts/           # Utility scripts

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2024 [Your Name]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files...

🙏 Acknowledgments

• Inspired by Grafana
• Charts by Chart.js
• Built with Flask

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Wiki: Project Wiki

🚀 Roadmap

• Prometheus integration
• Mobile app
• Email alerts
• Custom plugins
• Team sharing
• SSL/TLS support
• Backup/Restore functionality
• API rate limiting
• Grafana dashboard import

---

Made with ❤️ for the open-source community