Task 5 – Monitoring Dashboard for mithal.space
Overview
This project implements a lightweight monitoring solution for mithal.space. It periodically collects website health metrics, stores them in CSV and JSON formats, and displays the results in a real-time monitoring dashboard.
The solution was built as part of the Ghaymah Cloud Training Project – Task 5.
Features
The monitoring system collects the following metrics every 60 seconds:
- HTTP Response Latency
- Website Availability (Uptime)
- HTTP Status Code
- SSL Certificate Status
- SSL Certificate Expiration
- DNS Resolution Time
- Search Endpoint Response Time
All collected metrics are automatically stored for visualization and historical analysis.
Project Structure
task5-mithal-dashboard/
│
├── collector.py # Monitoring data collector
├── dashboard.html # Monitoring dashboard
├── metrics.csv # Historical CSV data
├── latest.json # Latest collected metrics
├── history.json # Historical JSON records
├── requirements.txt
├── Dockerfile
└── README.md
Collected Metrics
| Metric | Description |
|---|---|
| Latency | HTTP response time in milliseconds |
| Uptime | Website availability based on HTTP status |
| Status Code | HTTP response code |
| DNS | DNS lookup time |
| SSL Status | Certificate validity |
| SSL Expiration | Remaining days until expiration |
| Search Response | Search endpoint response time |
Data Storage
The collector stores monitoring data in three formats:
metrics.csv
Historical metrics suitable for spreadsheet analysis.
latest.json
Contains only the latest monitoring result.
history.json
Stores the monitoring history for the last 24 hours (1440 checks).
Dashboard Features
The dashboard provides:
- 24-hour Uptime Percentage
- Current Website Status
- SSL Certificate Status
- Remaining SSL Validity
- DNS Response Time
- Average HTTP Latency
- Last Check Timestamp
- Response Time Line Chart (Last Hour)
- Latest 10 Monitoring Results
- Auto Refresh every 60 seconds
Technologies
- Python 3
- HTML5
- CSS3
- JavaScript
- Chart.js
- Requests Library
Installation
Install the required Python packages:
pip install -r requirements.txt
Run One Check
python collector.py --once
Continuous Monitoring
python collector.py
The collector performs a new health check every 60 seconds.
View Dashboard
Serve the project locally using any static web server.
Example:
python -m http.server 8000
Then open:
http://localhost:8000/dashboard.html
Docker
Build the image:
docker build -t mithal-dashboard .
Run the container:
docker run -p 8080:8080 mithal-dashboard
Deployment
The dashboard can be deployed to Ghaymah Cloud using the official CLI.
gy auth login
Initialize the application:
gy resource app init --project-id <PROJECT_ID>
Deploy:
gy resource app launch
Dashboard Preview
The dashboard displays:
- Overall availability
- Website health
- SSL certificate information
- DNS performance
- Response latency graph
- Search endpoint performance
- Latest monitoring history
Future Improvements
- Email notifications
- Slack alerts
- Telegram integration
- Prometheus exporter
- Grafana integration
- Multi-site monitoring
- Error trend analysis
- Response time statistics
- Dark/Light theme switch
- Authentication for dashboard access
Author
Moamen Lotfy
DevOps Engineer
Ghaymah Cloud Training Project – Task 5