224 أسطر
3.9 KiB
Markdown
224 أسطر
3.9 KiB
Markdown
# 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
|
||
|
||
```text
|
||
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:
|
||
|
||
```bash
|
||
pip install -r requirements.txt
|
||
```
|
||
|
||
---
|
||
|
||
# Run One Check
|
||
|
||
```bash
|
||
python collector.py --once
|
||
```
|
||
|
||
---
|
||
|
||
# Continuous Monitoring
|
||
|
||
```bash
|
||
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:
|
||
|
||
```bash
|
||
python -m http.server 8000
|
||
```
|
||
|
||
Then open:
|
||
|
||
```
|
||
http://localhost:8000/dashboard.html
|
||
```
|
||
|
||
---
|
||
|
||
# Docker
|
||
|
||
Build the image:
|
||
|
||
```bash
|
||
docker build -t mithal-dashboard .
|
||
```
|
||
|
||
Run the container:
|
||
|
||
```bash
|
||
docker run -p 8080:8080 mithal-dashboard
|
||
```
|
||
|
||
---
|
||
|
||
# Deployment
|
||
|
||
The dashboard can be deployed to **Ghaymah Cloud** using the official CLI.
|
||
|
||
```bash
|
||
gy auth login
|
||
```
|
||
|
||
Initialize the application:
|
||
|
||
```bash
|
||
gy resource app init --project-id <PROJECT_ID>
|
||
```
|
||
|
||
Deploy:
|
||
|
||
```bash
|
||
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
|