{"id":45340524,"url":"https://github.com/jamilxt/metrics_app","last_synced_at":"2026-02-21T10:22:10.289Z","repository":{"id":286803972,"uuid":"962608099","full_name":"jamilxt/metrics_app","owner":"jamilxt","description":"A lightweight web application built with Flask to monitor system metrics in real-time. ","archived":false,"fork":false,"pushed_at":"2025-04-08T12:11:14.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T13:24:47.405Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jamilxt.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-08T12:08:56.000Z","updated_at":"2025-04-08T12:11:18.000Z","dependencies_parsed_at":"2025-04-08T13:35:36.446Z","dependency_job_id":null,"html_url":"https://github.com/jamilxt/metrics_app","commit_stats":null,"previous_names":["jamilxt/metrics_app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jamilxt/metrics_app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamilxt%2Fmetrics_app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamilxt%2Fmetrics_app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamilxt%2Fmetrics_app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamilxt%2Fmetrics_app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamilxt","download_url":"https://codeload.github.com/jamilxt/metrics_app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamilxt%2Fmetrics_app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29679049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T09:33:50.764Z","status":"ssl_error","status_checked_at":"2026-02-21T09:33:19.949Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-21T10:22:09.590Z","updated_at":"2026-02-21T10:22:10.280Z","avatar_url":"https://github.com/jamilxt.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# System Metrics Dashboard \n\u003cimg src=\"https://github.com/user-attachments/assets/bea6d1c2-fe37-442c-8ef7-17bcd618d1c7\" alt=\"Tomcat Hardening Recommendations\" width=\"600\"/\u003e\n\nA lightweight web application built with Flask to monitor system metrics in real-time. It tracks CPU, memory, and disk usage, streaming the data to a browser-based bar chart using Server-Sent Events (SSE) and Chart.js. The dashboard updates approximately every 1 second and displays the last 50 data points, providing a clear, large visualization of system performance.\n\n## Demo Link\nCheck out a live demo of the dashboard here:  \n[**Live Demo**](https://metrics-app-v72o.onrender.com/)\n\n## Features\n- Real-time monitoring of:\n  - CPU usage (%)\n  - Memory usage (%)\n  - Disk usage (%)\n- Bar chart visualization powered by Chart.js.\n- Automatic updates every ~1 second via Server-Sent Events (SSE).\n- Large, responsive UI optimized for readability.\n- No manual interaction required—fully automated display.\n\n## Prerequisites\n- **Python 3.x**: Verify with `python3 --version`.\n- **Internet Connection**: Needed to load Chart.js from CDN.\n- A system with accessible disk (e.g., `/` for Linux/macOS, `C:` for Windows).\n\n## Setup Instructions\nFollow these steps to set up and run the project locally.\n\n### 1. Create the Project Directory\n- Create a folder for the project:\n  ```bash\n  mkdir metrics_app\n  cd metrics_app\n  ```\n- Ensure your `app.py` file is saved in this directory.\n\n### 2. Set Up a Virtual Environment\n- Create a virtual environment to isolate dependencies:\n  ```bash\n  python3 -m venv venv\n  ```\n- Activate it:\n  - **Linux/macOS**:\n    ```bash\n    chmod +x ./venv/bin/activate\n    . ./venv/bin/activate\n    ```\n  - **Windows**:\n    ```bash\n    venv\\Scripts\\activate\n    ```\n  - You’ll see `(venv)` in your terminal prompt when active.\n\n### 3. Install Required Packages\n- Install Flask and psutil within the virtual environment:\n  ```bash\n  pip install flask psutil\n  ```\n\n### 4. Run the Application\n- Start the Flask server:\n  ```bash\n  python app.py\n  ```\n- Open a web browser and navigate to `http://localhost:5000`.\n\n## Usage\n- The dashboard loads at `http://localhost:5000` and displays a bar chart with:\n  - **CPU Usage (%)**: Cyan bars.\n  - **Memory Usage (%)**: Red bars.\n  - **Disk Usage (%)**: Blue bars.\n- Updates occur every ~1 second, showing the last 50 data points (~50 seconds of history).\n- Metrics are automatically saved to `metrics.json` in the project folder.\n\n## Project Structure\n```\nmetrics_app/\n├── app.py         # Flask application with SSE and Chart.js integration\n├── venv/          # Virtual environment folder\n└── metrics.json   # Generated file storing latest metrics\n```\n\n## Customization Options\n- **Update Frequency**: Modify `interval=1` in `psutil.cpu_percent(interval=1)` to `0.5` for faster updates or `2` for slower.\n- **Data Points**: Adjust `maxPoints = 50` in the JavaScript to `100` for more history or `20` for less.\n- **Chart Type**: Change `type: 'bar'` to `'line'` or add `scales: { x: { stacked: true }, y: { stacked: true } }` for a stacked bar chart (see [Chart.js docs](https://www.chartjs.org/docs/latest/)).\n- **UI Size**: Edit `max-width: 1200px` or `height: 600px` in the CSS for a different chart size.\n- **Colors**: Update `backgroundColor` in the datasets (e.g., `'rgba(0, 255, 0, 0.7)'` for green bars).\n\n## Troubleshooting\n- **Chart Not Loading**:\n  - Ensure internet access for the Chart.js CDN.\n  - Check browser console (F12 → Console) for errors.\n- **Updates Not Happening**:\n  - Verify the `/metrics-stream` endpoint is streaming (F12 → Network tab).\n  - Ensure `app.py` is running without errors.\n- **Permission Issues**:\n  - Check write permissions for `metrics_app` (`chmod -R u+w metrics_app` on Linux).\n- **Port Conflict**:\n  - If `5000` is in use, change `port=5000` to another (e.g., `port=5001`) in `app.run()`.\n\n## Dependencies\n- **Flask**: Web framework for serving the app and SSE.\n- **psutil**: Python library for system metrics.\n- **Chart.js**: JavaScript library for charting (loaded via CDN).\n\n## Notes\n- The update rate (~1 second) is tied to `psutil.cpu_percent(interval=1)`. Reducing `interval` below 0.5 may increase CPU load without improving accuracy.\n- Disk usage is measured for the root partition (`/`). For Windows, replace `\"/\"` with `\"C:\"` in `psutil.disk_usage()` if needed.\n\n## License\nThis project is open-source and unlicensed—use and modify it freely!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamilxt%2Fmetrics_app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamilxt%2Fmetrics_app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamilxt%2Fmetrics_app/lists"}