Skip to content
/ network-dashboard Public

🌐 Network Dashboard (NetMon) — A real-time network monitoring dashboard built with Flask and Chart.js. Features include live bandwidth tracking, internet speed testing, IP geolocation on interactive maps, and historical data analysis with CSV export.

0 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

ifauzeee/network-dashboard

BranchesTags

Repository files navigation

NetMon - Your Insightful Network Monitoring Dashboard 📊🚀

NetMon is an elegant, responsive, and powerful web dashboard designed to provide comprehensive real-time insights into your network's health and performance. Built with Python, Flask, and modern frontend technologies, NetMon empowers you to monitor traffic, diagnose connection issues, verify ISP speeds, and track network behavior over time through an intuitive and visually appealing interface.

Whether you're a home user curious about your internet stability, a gamer tracking latency spikes, or a developer needing a quick network diagnostic tool, NetMon offers the clarity you need.

📸 Application Screenshot

Main dashboard view of NetMon, showcasing real-time metrics and historical charts.

✨ Key Features

NetMon comes packed with features to give you full visibility into your network:

📊 Real-time Dashboard

  • Live Speed Monitoring: Current Download & Upload speeds, updated every few seconds.
  • Connection Quality: View live Ping (Latency) and Jitter measurements to assess connection quality instantly.
  • Historical Graph: Visualize recent speed fluctuations with a dynamic speed graph (last 2 minutes or 1 hour).
  • Instant Averages: See average Download & Upload speeds based on the selected time range (Live, 1 Hour, All History).

🚀 Accurate Speed Test

  • Perform comprehensive internet speed tests measuring Ping, Download, and Upload speeds.
  • Features a dynamic gauge visualizing speed in real-time during the test phases.
  • Supports automatic server selection for optimal testing (finding the closest and fastest server).
  • Allows manual server selection from a list of nearby servers for targeted diagnostics.

🌍 IP Geolocation Info

  • Displays your public IP address along with detailed information: ISP, organization, city, region, country, and timezone.
  • Visualizes your approximate location on an interactive map using Leaflet.js.

💾 Data History & Management

  • Automatically saves all live monitoring data and completed speed test results to a local database.
  • Browse your complete network history on a dedicated page.
  • Filter historical data by type (Live Monitoring, Speed Test).
  • Export your entire network history to a .csv file for external analysis.
  • Easily clear the entire data history from the settings page.

⚙️ Flexible Settings

  • Theme Customization: Seamlessly switch between Light and Dark modes (preference is saved locally).
  • Proactive Monitoring (Scheduled Tests): Configure automatic speed tests to run at regular intervals (e.g., every hour).
  • Download Speed Alerts: Set a minimum download speed threshold. If a scheduled test falls below this, a warning is logged (extensible for email/webhook notifications).

🛡️ Robust & User-Friendly

  • Responsive Design: Adapts beautifully to different screen sizes.
  • Rate Limiting: Protects backend endpoints from excessive requests.
  • Efficient Backend: Uses background threads for non-blocking network monitoring and speed tests.

🤔 Why NetMon?

In today's connected world, understanding your network's performance is crucial. NetMon provides:

  • Visibility: Stop guessing about your internet speed and stability. See real-time data and historical trends.
  • Verification: Easily verify if you're getting the speeds promised by your ISP.
  • Diagnostics: Identify patterns in network slowdowns or latency spikes.
  • Simplicity: Access comprehensive network insights through a clean, easy-to-understand web interface.

🛠️ Technology Stack

NetMon leverages a modern and efficient technology stack:

Backend

  • Python 3.12+: Core programming language.
  • Flask: Micro web framework for routing and request handling.
  • SQLAlchemy: ORM for database interaction (SQLite by default).
  • speedtest-cli: Official library for performing internet speed tests.
  • APScheduler: Handles scheduled background tasks (automatic speed tests).
  • pandas: Used for efficient data handling and CSV export.
  • Other key libraries: psutil, pingparsing, Flask-Limiter, requests, gunicorn (optional for production).

Frontend

  • HTML5 & CSS3: Structure and styling, utilizing CSS Variables for easy theming.
  • JavaScript (ES6+): Handles UI interactivity, asynchronous data fetching, and dynamic updates.
  • Chart.js: Creates beautiful, responsive, and interactive charts for visualizing data.
  • Leaflet.js: Renders the interactive map for IP geolocation.
  • Font Awesome: Provides icons.

🚀 Getting Started

Follow these steps to get NetMon running on your local machine.

1. Prerequisites

  • Python 3.12 or later.
  • Git.
  • (Windows Only) Microsoft C++ Build Tools: Required to compile some Python dependencies.

2. Clone the Repository

git clone https://github.com/ifauzeee/network-dashboard.git
cd network-dashboard

3. Create and Activate Virtual Environment

Using a virtual environment is strongly recommended.

Windows:

python -m venv venv
.\venv\Scripts\activate

macOS / Linux:

python3 -m venv venv
source venv/bin/activate

4. Install Dependencies

Install all required Python packages from requirements.txt:

pip install -r requirements.txt

5. Run the Application

Start the Flask development server:

python app.py

6. Access NetMon

Open your web browser and navigate to:

http://127.0.0.1:5000

💻 Usage

  • Navigation: Use the sidebar menu to switch between pages (Dashboard, Speed Test, Cek IP Saya, History, Settings).
  • Dashboard: View real-time speeds and recent history. Use the dropdown to change the time range.
  • Speed Test: Click the large "Mulai Tes" button to start a speed test.
  • Cek IP Saya: Your public IP details and location map will load automatically.
  • History: View all recorded data. Use the filter dropdown to select specific data types. Click "Export CSV" to download the data.
  • Settings: Toggle the theme, clear history, or configure scheduled speed tests and alerts.

📁 Project Structure

network-dashboard/
│
├── static/              # Static files (CSS, JS, images)
│   ├── app.js           # Main frontend JavaScript logic
│   ├── style.css        # All CSS styles
│   └── images/          # Image assets
│
├── templates/           # Jinja2 HTML templates
│   ├── layout.html      # Base template with sidebar & structure
│   ├── dashboard.html   # Dashboard page content
│   ├── speedtest.html   # Speed Test page content
...
│
├── .gitignore           # Specifies intentionally untracked files by Git
├── app.py               # Main Flask application, backend logic, API endpoints
├── check_network.py     # Diagnostic script to check live traffic per interface
├── README.md            # This documentation file
└── requirements.txt     # List of Python dependencies for pip

(Files like venv/, __pycache__/, and network_data.db are generated locally and ignored by Git)

🤔 Troubleshooting

Encountering issues? Here are common problems and solutions:

Issue Solution
ImportError: cannot import name 'url_quote' from 'werkzeug.urls' Ensure Werkzeug==2.3.8 is installed. Rerun pip install -r requirements.txt or force install: pip install Werkzeug==2.3.8.
ValueError: numpy.dtype size changed... Ensure a compatible NumPy version is installed (e.g., numpy==1.26.4). Rerun pip install -r requirements.txt.
Microsoft Visual C++ 14.0 or greater is required (Windows) Install Microsoft C++ Build Tools (see Prerequisites).
Dashboard shows 0.00 Mbps Ensure you have the latest app.py. For stable monitoring, run without Flask debug mode or use a production server like gunicorn. Diagnose with python check_network.py.
UI doesn't update or seems stuck Perform a Hard Refresh (Ctrl+Shift+R or Cmd+Shift+R). Check the browser's Developer Console (F12) for JavaScript errors.

🤝 Contributing

Contributions are welcome! If you'd like to improve NetMon:

  1. Fork the repository.
  2. Create a new branch for your feature or bug fix (git checkout -b feature/your-feature-name).
  3. Make your changes and commit them with clear messages.
  4. Push your branch to your fork.
  5. Open a Pull Request back to the main repository.

Please also feel free to open an Issue to report bugs or suggest features.

📝 License

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

🧑‍💻 Author & Contact

Developed with ❤️ by Muhammad Ibnu Fauzi.

About

🌐 Network Dashboard (NetMon) — A real-time network monitoring dashboard built with Flask and Chart.js. Features include live bandwidth tracking, internet speed testing, IP geolocation on interactive maps, and historical data analysis with CSV export.

Topics

python flask dashboard network-monitoring

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages