finsh

task5-mithal-dashboard/README.md

@@ -1,62 +1,223 @@
-# المهمة 5 — لوحة مراقبة mithal.space
+# Task 5 – Monitoring Dashboard for mithal.space
 
-## الملفات
-- `collector.py` — يجمع المقاييس كل دقيقة (latency, uptime, SSL, DNS, search) ويخزنها في:
-  - `metrics.csv` (سجل تاريخي كامل، صف لكل فحص)
-  - `latest.json` (أحدث قراءة، يقرأها الـ dashboard)
-  - `history.json` (آخر 1440 قراءة = 24 ساعة، يقرأها الـ dashboard للرسم البياني والجدول)
-- `dashboard.html` — يعرض uptime%، رسم بياني لزمن الاستجابة، حالة SSL، وسجل آخر 10 فحوصات
-- `requirements.txt` — اعتماديات بايثون (`requests`)
+## 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:
 
-## 1) التشغيل محلياً
 ```bash
-cd task5-mithal-dashboard
 pip install -r requirements.txt
+```
 
-# فحص واحد للتجربة
+---
+
+# Run One Check
+
+```bash
 python collector.py --once
+```
 
-# تشغيل مستمر (يفحص كل دقيقة)
-python collector.py &
+---
 
-# تقديم الملفات (dashboard.html + json files) عبر خادم بسيط
+# 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
 ```
-افتح المتصفح على: `http://localhost:8000/dashboard.html`
 
-> ملاحظة: الـ dashboard يقرأ `history.json` و`latest.json` عبر `fetch()`، لذلك
-> يجب تشغيله من خادم HTTP (مثل `http.server`) وليس بفتح الملف مباشرة (`file://`)
-> لتفادي قيود CORS في المتصفح.
+Then open:
 
-## 2) النشر على Ghaymah
-
-نفس نمط النشر في المهمة 1: نضع `collector.py` و`dashboard.html` خلف سيرفر
-بسيط (مثال: Flask/`http.server`) داخل حاوية واحدة، وننشرها كتطبيق Ghaymah:
-
-```dockerfile
-FROM python:3.11-slim
-WORKDIR /app
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
-COPY collector.py dashboard.html ./
-EXPOSE 8000
-# يشغّل التجميع في الخلفية + خادم استضافة الملفات في الواجهة
-CMD sh -c "python collector.py & python -m http.server 8000"
 ```
+http://localhost:8000/dashboard.html
+```
+
+---
+
+# Docker
+
+Build the image:
 
 ```bash
-docker build -t mithal-monitor:v1 .
-docker push registry.ghaymah.systems/<org>/mithal-monitor:v1
-ghaymah deploy --app mithal-monitor \
-  --image registry.ghaymah.systems/<org>/mithal-monitor:v1 \
-  --port 8000
+docker build -t mithal-dashboard .
 ```
 
-بعد النشر، الرابط الناتج (مثال: `https://mithal-monitor.ghaymah.systems/dashboard.html`)
-يعرض اللوحة الحية، وتُحدَّث القراءات تلقائياً كل دقيقة عبر `collector.py`
-الذي يعمل باستمرار داخل نفس الحاوية.
+Run the container:
 
-## 3) ملاحظة حول رابط البحث (Search Response)
-عدّل المتغير `SEARCH_URL` داخل `collector.py` ليطابق مسار البحث الفعلي في
-موقع mithal.space (حالياً موضوع كمثال `mithal.space/search?q=test`)، حسب
-البنية الفعلية للموقع.
+```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