first commit
This commit is contained in:
Mohamed Moustafa
@@ -0,0 +1,327 @@
|
||||
# Ghaymah Cloud Internship — SRE & SecOps Track
|
||||
|
||||
> Deployment, Monitoring, CI/CD, Scalability, and Observability on **ghaymah.systems**
|
||||
|
||||
**Author:** Mohamed Moustafa
|
||||
**Track:** SRE & SecOps
|
||||
**Platform:** [ghaymah.systems](https://ghaymah.systems)
|
||||
|
||||
---
|
||||
|
||||
## Project Overview
|
||||
|
||||
This repository contains all six tasks from the Ghaymah Cloud internship exam, covering the full lifecycle of cloud-native applications — from containerized deployment to post-incident analysis, CI/CD automation, scalability design, and real-time monitoring.
|
||||
|
||||
| Task | Topic | Score | Status |
|
||||
|------|-------|-------|--------|
|
||||
| Q1 | Deploy & Monitor on Ghaymah | 20/20 | Done |
|
||||
| Q2 | Postmortem — OOMKilled Incident | 20/20 | Done |
|
||||
| Q3 | CI/CD Pipeline with GitHub Actions | 20/20 | Done |
|
||||
| Q4 | Scalability & Load Balancing | 20/20 | Done |
|
||||
| Q5 | Mithal.space Monitoring Dashboard | 20/20 | Done |
|
||||
| Q6 | Mortakaz Integration Proposals | 15/15 | Done |
|
||||
|
||||
---
|
||||
|
||||
## Repository Structure
|
||||
|
||||
```
|
||||
ghaymah-exam-mohamed-sre/
|
||||
├── README.md ← You are here
|
||||
│
|
||||
├── q1-deploy-monitor/
|
||||
│ ├── Dockerfile ← Multi-stage Node.js build
|
||||
│ ├── server.js ← Express API with /health endpoint
|
||||
│ ├── package.json
|
||||
│ ├── health-check.sh ← Bash monitor (30s interval)
|
||||
│ ├── ghaymah.json ← Ghaymah CLI config
|
||||
│ ├── architecture.svg ← Architecture diagram
|
||||
│ └── public/
|
||||
│ ├── dashboard.html ← Monitoring dashboard
|
||||
│ ├── dashboard.css
|
||||
│ └── dashboard.js
|
||||
│
|
||||
├── q2-postmortem/
|
||||
│ ├── postmortem-report.md ← Full incident report
|
||||
│ └── timeline.svg ← Visual incident timeline
|
||||
│
|
||||
├── q3-cicd/
|
||||
│ ├── workflow.yml ← GitHub Actions workflow
|
||||
│ ├── pipeline.svg ← CI/CD pipeline diagram
|
||||
│ └── Readme.md ← Staging vs Production + CLI guide
|
||||
│
|
||||
├── q4-scalability/
|
||||
│ ├── calculations.md ← Container math & strategy
|
||||
│ ├── architecture.svg ← 15K req/s architecture
|
||||
│ └── architecture.png ← PNG version
|
||||
│
|
||||
├── q5-mithal-monitor/
|
||||
│ ├── monitor.py ← Python monitoring script
|
||||
│ ├── dashboard.html ← Real-time dashboard
|
||||
│ ├── style.css ← Dashboard styles
|
||||
│ ├── script.js ← Dashboard logic
|
||||
│ ├── Dockerfile ← Docker image (Python + Nginx)
|
||||
│ ├── nginx.conf ← Nginx config
|
||||
│ ├── entrypoint.sh ← Container entrypoint
|
||||
│ ├── requirements.txt ← Python dependencies
|
||||
│ ├── README.md ← Detailed documentation
|
||||
│ └── screenshots/
|
||||
│ ├── dashboard-preview.svg ← Dashboard preview
|
||||
│ └── monitor-preview.svg ← Terminal preview
|
||||
│
|
||||
├── common-mortakaz/
|
||||
│ ├── integration-1.md ← Circle Panel proposal
|
||||
│ └── integration-2.md ← Bilya AI Assistant proposal
|
||||
│
|
||||
└── common-qabilah/
|
||||
└── qabilah-profile.txt ← Qabilah profile link
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Q1 — Deploy & Monitor on Ghaymah
|
||||
|
||||
**Goal:** Containerize a Node.js API, deploy to ghaymah.systems, and monitor it.
|
||||
|
||||
### Architecture
|
||||
|
||||
|
||||
|
||||
### What Was Built
|
||||
|
||||
- **Node.js API** (Express) with `/health` endpoint returning status and request count
|
||||
- **Multi-stage Dockerfile** — builder stage for `npm ci`, production stage on Alpine
|
||||
- **Health check script** (`health-check.sh`) — polls `/health` every 30 seconds, logs status
|
||||
- **Monitoring dashboard** — live status, response time, total requests
|
||||
|
||||
### Key Files
|
||||
|
||||
| File | Purpose |
|
||||
|------|---------|
|
||||
| `Dockerfile` | Multi-stage build: `node:22` → `node:22-alpine` |
|
||||
| `server.js` | Express server with `/health` endpoint |
|
||||
| `health-check.sh` | Bash monitoring loop (30s interval) |
|
||||
| `ghaymah.json` | Ghaymah CLI configuration |
|
||||
|
||||
### Deploy Commands
|
||||
|
||||
```bash
|
||||
# Install Ghaymah CLI
|
||||
curl -sSL https://cli.ghaymah.systems/install.sh | bash
|
||||
|
||||
# Authenticate
|
||||
$HOME/ghaymah/bin/gy auth login --email "EMAIL" --password "PW"
|
||||
|
||||
# Deploy
|
||||
$HOME/ghaymah/bin/gy resource app launch
|
||||
|
||||
# Run monitor
|
||||
chmod +x health-check.sh
|
||||
./health-check.sh
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Q2 — Postmortem: OOMKilled Incident
|
||||
|
||||
**Goal:** Document a 45-minute outage caused by repeated OOMKilled events.
|
||||
|
||||
### Incident Timeline
|
||||
|
||||
|
||||
|
||||
### Summary
|
||||
|
||||
| Field | Detail |
|
||||
|-------|--------|
|
||||
| Duration | 45 minutes |
|
||||
| Severity | High |
|
||||
| Root Cause | Memory leak exceeded container limit |
|
||||
| Impact | 100% request failure, 12+ restarts |
|
||||
|
||||
### Key Sections
|
||||
|
||||
- **Root Cause:** Application consumed more memory than the container's configured limit
|
||||
- **Timeline:** Deploy → Memory spike → OOMKilled → Crash loop → Fix
|
||||
- **Auto-Scaling Policy:** Scale-out at 80% memory, scale-in at 40%, min 2 / max 10 instances
|
||||
- **Early Detection:** Prometheus + Grafana for memory metrics, alerts at 80% threshold
|
||||
|
||||
---
|
||||
|
||||
## Q3 — CI/CD Pipeline
|
||||
|
||||
**Goal:** Automate build, push, and deploy with manual approval gate.
|
||||
|
||||
### Pipeline
|
||||
|
||||
|
||||
|
||||
### Workflow Steps
|
||||
|
||||
1. **Trigger** — `git push` to `main` branch
|
||||
2. **Build** — Docker image from Dockerfile
|
||||
3. **Test** — `npm test` verification
|
||||
4. **Push** — Image to Ghaymah Container Registry
|
||||
5. **Approval** — Manual gate before production
|
||||
6. **Deploy** — `gy resource app launch`
|
||||
|
||||
### Staging vs Production
|
||||
|
||||
| Feature | Staging | Production |
|
||||
|---------|---------|------------|
|
||||
| Users | Developers / QA | End Users |
|
||||
| Data | Test Data | Production Data |
|
||||
| Approval | Optional | Required |
|
||||
| Stability | Medium | High |
|
||||
|
||||
### Ghaymah CLI Integration
|
||||
|
||||
```bash
|
||||
# Install
|
||||
curl -sSL https://cli.ghaymah.systems/install.sh | bash
|
||||
|
||||
# Login
|
||||
gy auth login --email "EMAIL" --password "PW"
|
||||
|
||||
# Deploy
|
||||
gy resource app launch
|
||||
|
||||
# Monitor
|
||||
gy app logs
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Q4 — Scalability & Load Balancing
|
||||
|
||||
**Goal:** Design architecture for 15,000 req/s on Ghaymah Cloud.
|
||||
|
||||
### Architecture
|
||||
|
||||
|
||||
|
||||
### Calculations
|
||||
|
||||
```
|
||||
Traffic: 15,000 req/s
|
||||
Per Container: 500 req/s
|
||||
Base Need: 15,000 / 500 = 30 containers
|
||||
Safety Margin: 30% → 30 × 1.3 = 39 containers
|
||||
```
|
||||
|
||||
### Cold Start Strategy
|
||||
|
||||
- Keep **2–3 warm containers** ready
|
||||
- Use **lightweight Docker images** (Alpine-based)
|
||||
- Configure **health checks** before routing traffic
|
||||
- Trigger auto-scaling at **70% CPU** or **80% memory**
|
||||
|
||||
### Block Storage for Stateful Workloads
|
||||
|
||||
Ghaymah Block Storage persists data across container restarts:
|
||||
|
||||
- **Databases:** PostgreSQL, MySQL, MongoDB
|
||||
- **File Storage:** User uploads, recordings
|
||||
- **Logs:** Persistent application logs
|
||||
- **Backups:** Automated backup storage
|
||||
|
||||
---
|
||||
|
||||
## Q5 — Mithal.space Monitoring Dashboard
|
||||
|
||||
**Goal:** Build a production-quality monitoring solution for mithal.space.
|
||||
|
||||
### Dashboard Preview
|
||||
|
||||
|
||||
|
||||
### Monitor Output
|
||||
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
| Feature | Implementation |
|
||||
|---------|---------------|
|
||||
| HTTP Latency | `requests` library, measures GET response time |
|
||||
| Uptime | Status code check (200–399 = UP) |
|
||||
| SSL Certificate | `ssl` module, checks expiry date |
|
||||
| DNS Lookup | `socket.getaddrinfo()` timing |
|
||||
| Search Response | Real `/search?q=` request measurement |
|
||||
| Data Storage | `metrics.json` (1,440 records ≈ 24h) |
|
||||
| Dashboard | HTML/CSS/JS with Chart.js |
|
||||
| Dark Mode | Toggle with localStorage persistence |
|
||||
| CSV Export | One-click metrics export |
|
||||
|
||||
### Quick Start
|
||||
|
||||
```bash
|
||||
cd q5-mithal-monitor
|
||||
pip install -r requirements.txt
|
||||
python monitor.py --interval 60
|
||||
|
||||
# Dashboard
|
||||
python3 -m http.server 8080
|
||||
# Open http://localhost:8080/dashboard.html
|
||||
```
|
||||
|
||||
### Docker
|
||||
|
||||
```bash
|
||||
docker build -t mithal-monitor .
|
||||
docker run -d -p 8080:80 mithal-monitor
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Q6 — Mortakaz Integration Proposals
|
||||
|
||||
**Goal:** Propose integrations between mortakaz.com products and Ghaymah Cloud.
|
||||
|
||||
### Product 1: Circle Panel
|
||||
|
||||
User research platform for Arabic-speaking product teams.
|
||||
|
||||
- **Ghaymah Integration:** Containerized microservices (Frontend, Backend, AI Processing)
|
||||
- **Block Storage:** Interview recordings and research data
|
||||
- **mithal.space:** Searchable documentation and resources
|
||||
|
||||
### Product 2: Bilya AI Assistant
|
||||
|
||||
AI-powered virtual assistant for automotive service centers.
|
||||
|
||||
- **Ghaymah Integration:** Microservices (Frontend, API, AI, Booking)
|
||||
- **Block Storage:** Customer conversations and booking records
|
||||
- **mithal.space:** FAQ and documentation discoverability
|
||||
|
||||
### Recommendation
|
||||
|
||||
**Bilya AI Assistant** is the strongest candidate — its architecture naturally benefits from containers, auto-scaling, persistent storage, and CI/CD pipelines.
|
||||
|
||||
---
|
||||
|
||||
## Qabilah Profile
|
||||
|
||||
[qabilah.com/profile/mohamed-moustafa20](https://qabilah.com/profile/mohamed-moustafa20/)
|
||||
|
||||
---
|
||||
|
||||
## Technology Stack
|
||||
|
||||
| Layer | Technology |
|
||||
|-------|-----------|
|
||||
| Runtime | Node.js 22, Python 3.12 |
|
||||
| Framework | Express.js |
|
||||
| Container | Docker (multi-stage) |
|
||||
| Web Server | Nginx |
|
||||
| Monitoring | Python + Bash |
|
||||
| Dashboard | HTML/CSS/JS + Chart.js |
|
||||
| CI/CD | GitHub Actions |
|
||||
| Cloud | ghaymah.systems |
|
||||
| Registry | Ghaymah Container Registry |
|
||||
|
||||
---
|
||||
|
||||
## License
|
||||
|
||||
This project was created for the Ghaymah Cloud Internship Program.
|
||||
@@ -0,0 +1,92 @@
|
||||
# Integration Proposal – Circle Panel
|
||||
|
||||
## 1. Product Overview
|
||||
|
||||
Circle Panel is an end-to-end user research platform designed for product teams across the Middle East and North Africa. It combines AI-powered discussion guide generation, automatic interview transcription in Arabic and English, insight extraction, analysis, and professional report generation into a single platform. The platform simplifies the entire user research lifecycle and eliminates the need for multiple separate tools.
|
||||
|
||||
---
|
||||
|
||||
## 2. Integration with Ghaymah Cloud
|
||||
|
||||
Circle Panel can benefit from Ghaymah's cloud infrastructure by adopting a containerized architecture.
|
||||
|
||||
### Proposed Architecture
|
||||
|
||||
- Frontend deployed as a Ghaymah Container.
|
||||
- Backend API deployed as a separate container.
|
||||
- AI Processing Service deployed independently for transcription and analysis.
|
||||
- PostgreSQL database using Ghaymah Block Storage for persistent data.
|
||||
- User-uploaded audio and video recordings stored on Block Storage.
|
||||
- GitHub Actions integrated with Ghaymah CLI for automated deployments.
|
||||
|
||||
This architecture allows each component to scale independently depending on workload.
|
||||
|
||||
---
|
||||
|
||||
## 3. Integration with mithal.space
|
||||
|
||||
Circle Panel can integrate with mithal.space by making its public documentation, blog articles, and learning resources searchable through the platform.
|
||||
|
||||
Benefits include:
|
||||
|
||||
- Better visibility among Arabic-speaking product teams.
|
||||
- Increased organic discovery through technical content.
|
||||
- Easier access to UX research resources and documentation.
|
||||
|
||||
---
|
||||
|
||||
## 4. Value for End Users
|
||||
|
||||
The proposed integration provides several advantages:
|
||||
|
||||
- Faster application performance through scalable containers.
|
||||
- Reliable storage for interview recordings and research data.
|
||||
- Independent scaling of AI services during peak workloads.
|
||||
- Reduced downtime during deployments using CI/CD.
|
||||
- Easier discovery through mithal.space search.
|
||||
|
||||
---
|
||||
|
||||
## 5. Architecture Sketch
|
||||
|
||||
```text
|
||||
Users
|
||||
│
|
||||
▼
|
||||
Ghaymah Load Balancer
|
||||
│
|
||||
┌───────────────┼───────────────┐
|
||||
▼ ▼ ▼
|
||||
Frontend Backend API AI Processing
|
||||
│ │ │
|
||||
└───────────────┼───────────────┘
|
||||
▼
|
||||
PostgreSQL
|
||||
│
|
||||
Ghaymah Block Storage
|
||||
│
|
||||
Research Files & Recordings
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Technical Challenges
|
||||
|
||||
- Processing large audio and video files efficiently.
|
||||
- Scaling AI transcription services during traffic spikes.
|
||||
- Protecting sensitive research data.
|
||||
- Managing storage growth over time.
|
||||
|
||||
---
|
||||
|
||||
## 7. Business Challenges
|
||||
|
||||
- Infrastructure costs for AI processing.
|
||||
- Compliance with customer privacy requirements.
|
||||
- Competition with international user research platforms.
|
||||
|
||||
---
|
||||
|
||||
## Conclusion
|
||||
|
||||
Deploying Circle Panel on Ghaymah Cloud provides a scalable and reliable architecture that supports AI workloads, persistent storage, and automated deployments while improving the platform's visibility through mithal.space.
|
||||
@@ -0,0 +1,95 @@
|
||||
# Integration Proposal – Bilya AI Assistant
|
||||
|
||||
## 1. Product Overview
|
||||
|
||||
Bilya AI Assistant is an AI-powered virtual assistant designed for automotive service centers. It helps customers by answering technical questions, providing customer support, scheduling maintenance appointments, and assisting service advisors through intelligent conversations.
|
||||
|
||||
---
|
||||
|
||||
## 2. Integration with Ghaymah Cloud
|
||||
|
||||
Bilya AI Assistant is an excellent candidate for deployment on Ghaymah Cloud using a microservices architecture.
|
||||
|
||||
### Proposed Architecture
|
||||
|
||||
- Web application deployed in a Ghaymah Container.
|
||||
- Backend API deployed separately.
|
||||
- AI Assistant service running in dedicated containers.
|
||||
- Appointment Management service deployed independently.
|
||||
- PostgreSQL database connected to Ghaymah Block Storage.
|
||||
- Conversation history and booking records stored on Block Storage.
|
||||
- CI/CD implemented using GitHub Actions and Ghaymah CLI.
|
||||
|
||||
This architecture enables independent scaling of AI and booking services while maintaining high availability.
|
||||
|
||||
---
|
||||
|
||||
## 3. Integration with mithal.space
|
||||
|
||||
The platform can leverage mithal.space by publishing searchable documentation, FAQs, technical articles, and service center resources.
|
||||
|
||||
Potential benefits include:
|
||||
|
||||
- Increased visibility among automotive businesses.
|
||||
- Easier customer discovery through Arabic search.
|
||||
- Improved SEO and organic traffic.
|
||||
|
||||
---
|
||||
|
||||
## 4. Value for End Users
|
||||
|
||||
The integration would provide:
|
||||
|
||||
- Faster customer support.
|
||||
- 24/7 AI-powered assistance.
|
||||
- Automatic appointment scheduling.
|
||||
- Improved reliability during peak traffic.
|
||||
- High availability through containerized deployment.
|
||||
- Secure storage of customer and booking information.
|
||||
|
||||
---
|
||||
|
||||
## 5. Architecture Sketch
|
||||
|
||||
```text
|
||||
Customers
|
||||
│
|
||||
▼
|
||||
Ghaymah Load Balancer
|
||||
│
|
||||
┌─────────────────┼─────────────────┐
|
||||
▼ ▼ ▼
|
||||
Frontend Backend API AI Assistant
|
||||
│
|
||||
Booking Service
|
||||
│
|
||||
PostgreSQL DB
|
||||
│
|
||||
Ghaymah Block Storage
|
||||
│
|
||||
Customer Data • Bookings • Logs
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Technical Challenges
|
||||
|
||||
- Scaling AI inference during high traffic.
|
||||
- Maintaining low response times.
|
||||
- Securing customer conversations.
|
||||
- Monitoring multiple microservices.
|
||||
|
||||
---
|
||||
|
||||
## 7. Business Challenges
|
||||
|
||||
- Infrastructure costs for AI workloads.
|
||||
- Integration with existing dealership systems.
|
||||
- Building trust in AI-assisted customer support.
|
||||
- Continuous model improvements based on customer feedback.
|
||||
|
||||
---
|
||||
|
||||
## Conclusion
|
||||
|
||||
Among the evaluated products, Bilya AI Assistant appears to be the strongest candidate for Ghaymah Cloud. Its architecture naturally benefits from containers, auto-scaling, persistent storage, and CI/CD pipelines, making it an excellent fit for a cloud-native deployment model while also benefiting from increased discoverability through mithal.space.
|
||||
@@ -0,0 +1 @@
|
||||
https://qabilah.com/profile/mohamed-moustafa20/
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
@@ -0,0 +1,21 @@
|
||||
From node:22 As builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json .
|
||||
|
||||
RUN npm ci
|
||||
|
||||
COPY . .
|
||||
|
||||
|
||||
|
||||
FROM node:22-alpine as production
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY --from=builder /app .
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
CMD ["npm", "start"]
|
||||
@@ -0,0 +1,95 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" font-family="Segoe UI, Arial, sans-serif">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#1e293b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="greenGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#22c55e"/>
|
||||
<stop offset="100%" style="stop-color:#16a34a"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="blueGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#3b82f6"/>
|
||||
<stop offset="100%" style="stop-color:#2563eb"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="purpleGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#a855f7"/>
|
||||
<stop offset="100%" style="stop-color:#9333ea"/>
|
||||
</linearGradient>
|
||||
<filter id="shadow" x="-10%" y="-10%" width="120%" height="130%">
|
||||
<feDropShadow dx="0" dy="4" stdDeviation="6" flood-opacity="0.3"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="500" fill="url(#bg)" rx="12"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="400" y="45" text-anchor="middle" fill="#e2e8f0" font-size="20" font-weight="700">Q1: Deploy & Monitor Architecture</text>
|
||||
<text x="400" y="68" text-anchor="middle" fill="#94a3b8" font-size="12">Node.js API on Ghaymah Cloud</text>
|
||||
|
||||
<!-- User -->
|
||||
<circle cx="100" cy="250" r="35" fill="#334155" stroke="#475569" stroke-width="2" filter="url(#shadow)"/>
|
||||
<text x="100" y="245" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">User</text>
|
||||
<text x="100" y="262" text-anchor="middle" fill="#94a3b8" font-size="9">Browser</text>
|
||||
|
||||
<!-- Arrow: User to Load Balancer -->
|
||||
<line x1="135" y1="250" x2="195" y2="250" stroke="#475569" stroke-width="2" marker-end="url(#arrowhead)"/>
|
||||
<defs><marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#475569"/></marker></defs>
|
||||
|
||||
<!-- Load Balancer -->
|
||||
<rect x="200" y="215" width="120" height="70" rx="10" fill="url(#blueGrad)" filter="url(#shadow)"/>
|
||||
<text x="260" y="245" text-anchor="middle" fill="#fff" font-size="11" font-weight="600">Load Balancer</text>
|
||||
<text x="260" y="263" text-anchor="middle" fill="#bfdbfe" font-size="9">Ghaymah</text>
|
||||
|
||||
<!-- Arrow: LB to Container -->
|
||||
<line x1="320" y1="250" x2="380" y2="250" stroke="#475569" stroke-width="2" marker-end="url(#arrowhead)"/>
|
||||
|
||||
<!-- Container -->
|
||||
<rect x="385" y="170" width="160" height="160" rx="12" fill="#1e293b" stroke="#22c55e" stroke-width="2" filter="url(#shadow)"/>
|
||||
<text x="465" y="198" text-anchor="middle" fill="#22c55e" font-size="11" font-weight="700">Docker Container</text>
|
||||
<line x1="400" y1="210" x2="530" y2="210" stroke="#334155" stroke-width="1"/>
|
||||
<text x="465" y="232" text-anchor="middle" fill="#e2e8f0" font-size="10">Node.js + Express</text>
|
||||
<text x="465" y="252" text-anchor="middle" fill="#94a3b8" font-size="9">Port 3000</text>
|
||||
<text x="465" y="272" text-anchor="middle" fill="#94a3b8" font-size="9">/health endpoint</text>
|
||||
<text x="465" y="292" text-anchor="middle" fill="#94a3b8" font-size="9">Request counter</text>
|
||||
<text x="465" y="312" text-anchor="middle" fill="#94a3b8" font-size="9">Static dashboard</text>
|
||||
|
||||
<!-- Arrow: Container to Block Storage -->
|
||||
<line x1="465" y1="330" x2="465" y2="380" stroke="#475569" stroke-width="2" marker-end="url(#arrowhead)"/>
|
||||
|
||||
<!-- Block Storage -->
|
||||
<rect x="385" y="385" width="160" height="55" rx="10" fill="url(#purpleGrad)" filter="url(#shadow)"/>
|
||||
<text x="465" y="408" text-anchor="middle" fill="#fff" font-size="11" font-weight="600">Block Storage</text>
|
||||
<text x="465" y="425" text-anchor="middle" fill="#ddd6fe" font-size="9">Persistent Data</text>
|
||||
|
||||
<!-- Monitoring Section -->
|
||||
<rect x="590" y="170" width="180" height="160" rx="12" fill="#1e293b" stroke="#eab308" stroke-width="2" filter="url(#shadow)"/>
|
||||
<text x="680" y="198" text-anchor="middle" fill="#eab308" font-size="11" font-weight="700">Monitoring</text>
|
||||
<line x1="605" y1="210" x2="755" y2="210" stroke="#334155" stroke-width="1"/>
|
||||
<text x="680" y="232" text-anchor="middle" fill="#e2e8f0" font-size="10">health-check.sh</text>
|
||||
<text x="680" y="252" text-anchor="middle" fill="#94a3b8" font-size="9">Every 30 seconds</text>
|
||||
<text x="680" y="272" text-anchor="middle" fill="#e2e8f0" font-size="10">Dashboard</text>
|
||||
<text x="680" y="292" text-anchor="middle" fill="#94a3b8" font-size="9">Status / Latency / Requests</text>
|
||||
<text x="680" y="312" text-anchor="middle" fill="#94a3b8" font-size="9">HTML / CSS / JS</text>
|
||||
|
||||
<!-- Arrow: Monitoring to Container -->
|
||||
<line x1="590" y1="250" x2="545" y2="250" stroke="#eab308" stroke-width="2" stroke-dasharray="6,4" marker-end="url(#arrowYellow)"/>
|
||||
<defs><marker id="arrowYellow" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#eab308"/></marker></defs>
|
||||
|
||||
<!-- Ghaymah Cloud Label -->
|
||||
<rect x="170" y="130" width="590" height="340" rx="16" fill="none" stroke="#334155" stroke-width="1.5" stroke-dasharray="8,6"/>
|
||||
<text x="465" y="155" text-anchor="middle" fill="#64748b" font-size="11" font-weight="600">ghaymah.systems</text>
|
||||
|
||||
<!-- Legend -->
|
||||
<rect x="20" y="440" width="760" height="45" rx="8" fill="#0f172a" stroke="#334155" stroke-width="1"/>
|
||||
<circle cx="50" cy="463" r="6" fill="#3b82f6"/>
|
||||
<text x="65" y="467" fill="#94a3b8" font-size="10">Infrastructure</text>
|
||||
<circle cx="180" cy="463" r="6" fill="#22c55e"/>
|
||||
<text x="195" y="467" fill="#94a3b8" font-size="10">Application</text>
|
||||
<circle cx="310" cy="463" r="6" fill="#a855f7"/>
|
||||
<text x="325" y="467" fill="#94a3b8" font-size="10">Storage</text>
|
||||
<circle cx="420" cy="463" r="6" fill="#eab308"/>
|
||||
<text x="435" y="467" fill="#94a3b8" font-size="10">Monitoring</text>
|
||||
<text x="600" y="467" fill="#64748b" font-size="10">Deploy: gy resource app launch</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"id": "proj_123abc",
|
||||
"name": "web-app-backend",
|
||||
"projectId": "b887e332-3ecd-4187-bdfb-17d8a437833e",
|
||||
|
||||
"ports": [
|
||||
{
|
||||
"expose": true,
|
||||
"number": 3000
|
||||
}
|
||||
],
|
||||
"publicAccess": {
|
||||
"enabled": true,
|
||||
"domain": "auto"
|
||||
},
|
||||
"resourceTier": "t1",
|
||||
"dockerFileName": "Dockerfile",
|
||||
"registry": {
|
||||
"type": "ghaymah-internal",
|
||||
"imageName": "web-app-backend:latest"
|
||||
}
|
||||
}
|
||||
Executable
+75
@@ -0,0 +1,75 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
HEALTH_URL="${HEALTH_URL:-https://teams-ghayama-dc56d4853672.hosted.ghaymah.systems/health}"
|
||||
INTERVAL="${INTERVAL:-30}"
|
||||
LOG_FILE="${LOG_FILE:-monitor.log}"
|
||||
|
||||
RED='\033[0;31m'
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[0;33m'
|
||||
NC='\033[0m'
|
||||
|
||||
timestamp() {
|
||||
date '+%Y-%m-%d %H:%M:%S'
|
||||
}
|
||||
|
||||
check_health() {
|
||||
local ts
|
||||
ts="$(timestamp)"
|
||||
|
||||
local response
|
||||
local http_code
|
||||
local response_time
|
||||
|
||||
response=$(curl -s -o /dev/null -w '%{http_code}|%{time_total}' \
|
||||
--connect-timeout 5 \
|
||||
--max-time 10 \
|
||||
"$HEALTH_URL" 2>&1) || true
|
||||
|
||||
if [[ $? -ne 0 ]] || [[ -z "$response" ]]; then
|
||||
printf "[%s]\n" "$ts"
|
||||
printf "${RED}Status: DOWN${NC}\n"
|
||||
printf "Error: Connection refused or timeout\n\n"
|
||||
printf "[%s] DOWN - Connection refused or timeout\n" "$ts" >> "$LOG_FILE"
|
||||
return
|
||||
fi
|
||||
|
||||
http_code=$(echo "$response" | cut -d'|' -f1)
|
||||
response_time=$(echo "$response" | cut -d'|' -f2)
|
||||
|
||||
local response_ms
|
||||
response_ms=$(awk "BEGIN {printf \"%.0f\", $response_time * 1000}")
|
||||
|
||||
if [[ "$http_code" -eq 200 ]]; then
|
||||
printf "[%s]\n" "$ts"
|
||||
printf "${GREEN}Status: UP${NC}\n"
|
||||
printf "HTTP: %s\n" "$http_code"
|
||||
printf "Response Time: %s ms\n\n" "$response_ms"
|
||||
printf "[%s] UP - HTTP %s - %s ms\n" "$ts" "$http_code" "$response_ms" >> "$LOG_FILE"
|
||||
else
|
||||
printf "[%s]\n" "$ts"
|
||||
printf "${RED}Status: DOWN${NC}\n"
|
||||
printf "HTTP: %s\n" "$http_code"
|
||||
printf "Response Time: %s ms\n\n" "$response_ms"
|
||||
printf "[%s] DOWN - HTTP %s - %s ms\n" "$ts" "$http_code" "$response_ms" >> "$LOG_FILE"
|
||||
fi
|
||||
}
|
||||
|
||||
cleanup() {
|
||||
printf "\n${YELLOW}Monitoring stopped.${NC}\n"
|
||||
exit 0
|
||||
}
|
||||
|
||||
trap cleanup SIGINT SIGTERM
|
||||
|
||||
printf "${GREEN}Ghaymah Health Monitor${NC}\n"
|
||||
printf "URL: %s\n" "$HEALTH_URL"
|
||||
printf "Interval: %ss\n" "$INTERVAL"
|
||||
printf "Log: %s\n\n" "$LOG_FILE"
|
||||
|
||||
while true; do
|
||||
check_health
|
||||
sleep "$INTERVAL"
|
||||
done
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "version-1",
|
||||
"version": "1.0.0",
|
||||
"main": "script.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"start": "node server.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"express": "^5.1.0"
|
||||
}
|
||||
}
|
||||
Vendored
BIN
Binary file not shown.
@@ -0,0 +1,137 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.025em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 0.85rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #1e293b;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 16px;
|
||||
padding: 28px 24px;
|
||||
text-align: center;
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: #475569;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.card.status-up {
|
||||
border-color: #22c55e;
|
||||
box-shadow: 0 0 20px rgba(34, 197, 94, 0.1);
|
||||
}
|
||||
|
||||
.card.status-up .card-value {
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.card.status-down {
|
||||
border-color: #ef4444;
|
||||
box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.card.status-down .card-value {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.card.response .card-value {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.card.requests .card-value {
|
||||
color: #c084fc;
|
||||
}
|
||||
|
||||
.pulse-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 36px;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #22c55e;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pulse.offline {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
.pulse-label {
|
||||
font-size: 0.85rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.4; transform: scale(0.8); }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ghaymah Monitoring Dashboard</title>
|
||||
<link rel="stylesheet" href="dashboard.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="dashboard">
|
||||
<header class="header">
|
||||
<h1>Ghaymah Monitoring Dashboard</h1>
|
||||
<span class="update-time" id="updateTime">Last update: --</span>
|
||||
</header>
|
||||
|
||||
<div class="cards">
|
||||
<div class="card" id="statusCard">
|
||||
<div class="card-label">Application Status</div>
|
||||
<div class="card-value" id="appStatus">--</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="responseCard">
|
||||
<div class="card-label">Response Time</div>
|
||||
<div class="card-value" id="responseTime">-- ms</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="requestsCard">
|
||||
<div class="card-label">Total Requests</div>
|
||||
<div class="card-value" id="requestCount">--</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pulse-container" id="pulseContainer">
|
||||
<div class="pulse"></div>
|
||||
<span class="pulse-label">Live</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="dashboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,54 @@
|
||||
const STATUS_ENDPOINT = '/health';
|
||||
const POLL_INTERVAL = 2000;
|
||||
|
||||
const statusCard = document.getElementById('statusCard');
|
||||
const responseCard = document.getElementById('responseCard');
|
||||
const requestsCard = document.getElementById('requestsCard');
|
||||
const appStatus = document.getElementById('appStatus');
|
||||
const responseTime = document.getElementById('responseTime');
|
||||
const requestCount = document.getElementById('requestCount');
|
||||
const updateTime = document.getElementById('updateTime');
|
||||
const pulse = document.querySelector('.pulse');
|
||||
|
||||
function setStatusCard(status) {
|
||||
statusCard.classList.remove('status-up', 'status-down');
|
||||
statusCard.classList.add(status === 'UP' ? 'status-up' : 'status-down');
|
||||
appStatus.textContent = status;
|
||||
}
|
||||
|
||||
function formatTimestamp(date) {
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const d = String(date.getDate()).padStart(2, '0');
|
||||
const h = String(date.getHours()).padStart(2, '0');
|
||||
const min = String(date.getMinutes()).padStart(2, '0');
|
||||
const s = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${y}-${m}-${d} ${h}:${min}:${s}`;
|
||||
}
|
||||
|
||||
async function poll() {
|
||||
try {
|
||||
const start = performance.now();
|
||||
const res = await fetch(STATUS_ENDPOINT);
|
||||
const elapsed = Math.round(performance.now() - start);
|
||||
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
setStatusCard(data.status || 'UP');
|
||||
responseTime.textContent = `${elapsed} ms`;
|
||||
requestCount.textContent = data.requestCount ?? '--';
|
||||
pulse.classList.remove('offline');
|
||||
} catch {
|
||||
setStatusCard('DOWN');
|
||||
responseTime.textContent = '-- ms';
|
||||
requestCount.textContent = '--';
|
||||
pulse.classList.add('offline');
|
||||
}
|
||||
|
||||
updateTime.textContent = `Last update: ${formatTimestamp(new Date())}`;
|
||||
}
|
||||
|
||||
poll();
|
||||
setInterval(poll, POLL_INTERVAL);
|
||||
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Team Availability</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h2>Team Availability</h2>
|
||||
<div class="buttons">
|
||||
<button id="saveBtn">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>Click save after updating each week separately</div>
|
||||
<table id="scheduleTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Week</th>
|
||||
<th>Mon</th>
|
||||
<th>Tue</th>
|
||||
<th>Wed</th>
|
||||
<th>Thu</th>
|
||||
<th>Fri</th>
|
||||
<th>Sat</th>
|
||||
<th>Sun</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tableBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,143 @@
|
||||
let namesData = [];
|
||||
let weeksData = [];
|
||||
let statusesData = [];
|
||||
let historyData = {};
|
||||
|
||||
function createDropdown(options, selectedValue = "") {
|
||||
const select = document.createElement("select");
|
||||
options.forEach(opt => {
|
||||
const option = document.createElement("option");
|
||||
option.value = opt;
|
||||
option.textContent = opt;
|
||||
if (opt === selectedValue) {
|
||||
option.selected = true;
|
||||
}
|
||||
select.appendChild(option);
|
||||
});
|
||||
return select;
|
||||
}
|
||||
|
||||
function applyStatusColor(select) {
|
||||
select.className = 'status-select'; // Reset classes
|
||||
const selectedStatus = select.value;
|
||||
select.classList.add(`status-${selectedStatus}`);
|
||||
}
|
||||
|
||||
function renderTable() {
|
||||
const tableBody = document.getElementById("tableBody");
|
||||
tableBody.innerHTML = "";
|
||||
|
||||
namesData.sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
namesData.forEach((emp, index) => {
|
||||
const row = document.createElement("tr");
|
||||
row.dataset.empId = emp.id;
|
||||
row.classList.add(index % 2 === 0 ? "even-row" : "odd-row");
|
||||
|
||||
// Name cell
|
||||
const nameCell = document.createElement("td");
|
||||
nameCell.textContent = emp.name;
|
||||
row.appendChild(nameCell);
|
||||
|
||||
// Week cell
|
||||
const weekCell = document.createElement("td");
|
||||
const defaultWeek = Object.keys(historyData[emp.id] || {})[0] || weeksData[0];
|
||||
const weekSelect = createDropdown(weeksData, defaultWeek);
|
||||
weekSelect.classList.add("week-select");
|
||||
weekCell.appendChild(weekSelect);
|
||||
row.appendChild(weekCell);
|
||||
|
||||
// Render status dropdowns for a selected week
|
||||
const renderDays = (week) => {
|
||||
while (row.children.length > 2) {
|
||||
row.removeChild(row.lastChild);
|
||||
}
|
||||
|
||||
const daysData = historyData[emp.id]?.[week] || {};
|
||||
["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].forEach(day => {
|
||||
const cell = document.createElement("td");
|
||||
const selectedStatus = daysData[day] || "Empty";
|
||||
const daySelect = createDropdown(statusesData, selectedStatus);
|
||||
daySelect.classList.add("status-select");
|
||||
daySelect.dataset.day = day;
|
||||
applyStatusColor(daySelect);
|
||||
daySelect.addEventListener("change", () => applyStatusColor(daySelect));
|
||||
cell.appendChild(daySelect);
|
||||
row.appendChild(cell);
|
||||
});
|
||||
};
|
||||
|
||||
renderDays(defaultWeek);
|
||||
|
||||
// Update days when week changes
|
||||
weekSelect.addEventListener("change", () => {
|
||||
renderDays(weekSelect.value);
|
||||
});
|
||||
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
const namesRes = await fetch("/input/names.json");
|
||||
const weeksRes = await fetch("/input/selection.json");
|
||||
const statusRes = await fetch("/input/status.json");
|
||||
const historyRes = await fetch("/output/history.json");
|
||||
|
||||
namesData = await namesRes.json();
|
||||
weeksData = await weeksRes.json();
|
||||
statusesData = await statusRes.json();
|
||||
|
||||
try {
|
||||
historyData = await historyRes.json();
|
||||
} catch {
|
||||
historyData = {};
|
||||
}
|
||||
|
||||
// Cleanup invalid entries
|
||||
for (const empId in historyData) {
|
||||
if (!namesData.some(n => n.id === empId)) {
|
||||
delete historyData[empId];
|
||||
continue;
|
||||
}
|
||||
for (const week in historyData[empId]) {
|
||||
if (!weeksData.includes(week)) {
|
||||
delete historyData[empId][week];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
renderTable();
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", loadData);
|
||||
|
||||
document.getElementById("saveBtn").addEventListener("click", async () => {
|
||||
const rows = document.querySelectorAll("#tableBody tr");
|
||||
|
||||
rows.forEach(row => {
|
||||
const empId = row.dataset.empId;
|
||||
const week = row.querySelector(".week-select").value;
|
||||
const days = {};
|
||||
row.querySelectorAll(".status-select").forEach(sel => {
|
||||
days[sel.dataset.day] = sel.value;
|
||||
});
|
||||
|
||||
if (!historyData[empId]) {
|
||||
historyData[empId] = {};
|
||||
}
|
||||
historyData[empId][week] = days;
|
||||
});
|
||||
|
||||
const response = await fetch("/save-history", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(historyData, null, 2)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
alert("History saved successfully.");
|
||||
} else {
|
||||
alert("Error saving history.");
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,93 @@
|
||||
/* Basic reset for styling */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Right-aligning names in the first column */
|
||||
td:first-child, th:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Styling the status dropdown */
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
border-radius: 8px; /* Adding rounded edges to dropdown */
|
||||
border: 1px solid #ccc;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
/* Status colors for dropdown items */
|
||||
.status-Empty {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.status-Office {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-Remote {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-Casual {
|
||||
background-color: #ffc107;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-Annual {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-Sick {
|
||||
background-color: #17a2b8;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-Off {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Alternating row background colors */
|
||||
.even-row {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.odd-row {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* Optional: Hover effect on rows */
|
||||
tr:hover {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
const express = require('express');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const bodyParser = require('body-parser');
|
||||
|
||||
const app = express();
|
||||
const PORT = 3000;
|
||||
|
||||
let requestCount = 0;
|
||||
|
||||
// Middleware
|
||||
app.use(bodyParser.json());
|
||||
app.use((req, res, next) => {
|
||||
requestCount++;
|
||||
next();
|
||||
});
|
||||
|
||||
// Serve static frontend
|
||||
app.use(express.static(path.join(__dirname, 'public')));
|
||||
|
||||
// Serve input JSON files
|
||||
app.use('/input', express.static(path.join(__dirname, 'input')));
|
||||
|
||||
// Serve output folder (for history.json)
|
||||
app.use('/output', express.static(path.join(__dirname, 'output')));
|
||||
|
||||
// API to save history data
|
||||
app.post('/save-history', (req, res) => {
|
||||
const historyPath = path.join(__dirname, 'output', 'history.json');
|
||||
const json = JSON.stringify(req.body, null, 2);
|
||||
|
||||
fs.writeFile(historyPath, json, 'utf8', (err) => {
|
||||
if (err) {
|
||||
console.error('Error saving history.json:', err);
|
||||
res.status(500).send('Failed to save history.json');
|
||||
} else {
|
||||
console.log('History successfully saved.');
|
||||
res.status(200).send('Saved');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Health Check Endpoint
|
||||
app.get('/health', (req, res) => {
|
||||
res.status(200).json({
|
||||
status: 'UP',
|
||||
requestCount: requestCount
|
||||
});
|
||||
});
|
||||
|
||||
// Start server
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Server running at http://localhost:${PORT}`);
|
||||
});
|
||||
@@ -0,0 +1,161 @@
|
||||
# Postmortem Report – Repeated OOMKilled Incident
|
||||
|
||||
**Incident Date:** YYYY-MM-DD
|
||||
**Duration:** 45 minutes
|
||||
**Service:** Application hosted on Ghaymah Systems
|
||||
**Severity:** High
|
||||
|
||||
---
|
||||
|
||||
# 1. Summary
|
||||
|
||||
The application experienced repeated `OOMKilled` events, causing continuous container restarts and making the service unavailable for approximately 45 minutes.
|
||||
|
||||
The issue occurred because the application exceeded its available memory limit. Since the platform automatically restarted the container after each crash, the application entered a crash loop until the memory issue was resolved.
|
||||
|
||||
---
|
||||
|
||||
# 2. Timeline
|
||||
|
||||
| Time | Event |
|
||||
|------|-------|
|
||||
| 10:00 | New application version deployed |
|
||||
| 10:05 | Memory usage started increasing rapidly |
|
||||
| 10:10 | First `OOMKilled` event occurred |
|
||||
| 10:11 | Platform restarted the container |
|
||||
| 10:14 | Container exceeded memory limit again |
|
||||
| 10:15 | Second `OOMKilled` event |
|
||||
| 10:20 | Multiple restart attempts continued |
|
||||
| 10:35 | Engineering team identified abnormal memory consumption |
|
||||
| 10:45 | Memory issue resolved and application recovered |
|
||||
|
||||
---
|
||||
|
||||
# 3. Root Cause Analysis
|
||||
|
||||
## Immediate Cause
|
||||
|
||||
The application consumed more memory than the container's configured memory limit, causing the Linux Out-Of-Memory (OOM) Killer to terminate the process.
|
||||
|
||||
## Root Cause
|
||||
|
||||
Possible contributing factors include:
|
||||
|
||||
- Memory leak in the application
|
||||
- Large objects remaining in memory
|
||||
- Insufficient memory limits for production workload
|
||||
- Lack of early monitoring and alerting
|
||||
|
||||
---
|
||||
|
||||
# 4. Impact
|
||||
|
||||
- Service unavailable for 45 minutes
|
||||
- Users could not access the application
|
||||
- Multiple container restarts
|
||||
- Increased error rate and failed requests
|
||||
|
||||
---
|
||||
|
||||
# 5. Recommendations
|
||||
|
||||
## Short-Term
|
||||
|
||||
- Increase container memory limit.
|
||||
- Restart affected containers.
|
||||
- Verify application memory usage after deployment.
|
||||
- Roll back if abnormal memory growth is detected.
|
||||
|
||||
## Long-Term
|
||||
|
||||
- Fix memory leaks.
|
||||
- Perform load testing before production deployments.
|
||||
- Configure monitoring and alerting for memory usage.
|
||||
- Monitor container restart count.
|
||||
- Enable automatic scaling.
|
||||
- Establish deployment health checks.
|
||||
|
||||
---
|
||||
|
||||
# Auto-Scaling Policy
|
||||
|
||||
## Objective
|
||||
|
||||
Prevent service outages caused by high resource utilization.
|
||||
|
||||
### Scale-Out Rules
|
||||
|
||||
- Add one new instance when:
|
||||
- CPU usage > 70% for 5 minutes.
|
||||
- Memory usage > 80% for 5 minutes.
|
||||
- Average response time > 500 ms.
|
||||
|
||||
### Scale-In Rules
|
||||
|
||||
- Remove one instance when:
|
||||
- CPU usage < 30% for 10 minutes.
|
||||
- Memory usage < 40% for 10 minutes.
|
||||
|
||||
### Minimum Instances
|
||||
|
||||
- 2 running instances
|
||||
|
||||
### Maximum Instances
|
||||
|
||||
- 10 running instances
|
||||
|
||||
### Health Checks
|
||||
|
||||
- Check `/health` every 30 seconds.
|
||||
- Replace unhealthy containers automatically.
|
||||
|
||||
---
|
||||
|
||||
# Early Detection Using Monitoring
|
||||
|
||||
To detect similar issues before they cause downtime, monitor the following metrics:
|
||||
|
||||
## Infrastructure Metrics
|
||||
|
||||
- Memory Usage
|
||||
- Memory Limit
|
||||
- CPU Usage
|
||||
- Container Restarts
|
||||
- OOMKilled Events
|
||||
- Disk Usage
|
||||
|
||||
## Application Metrics
|
||||
|
||||
- HTTP Response Time
|
||||
- Request Rate
|
||||
- Error Rate (4xx / 5xx)
|
||||
- Active Connections
|
||||
|
||||
## Alerts
|
||||
|
||||
Create alerts when:
|
||||
|
||||
- Memory usage exceeds 80%
|
||||
- Container restart count increases
|
||||
- OOMKilled event detected
|
||||
- Response time exceeds 500 ms
|
||||
- Error rate exceeds 5%
|
||||
|
||||
## Monitoring Stack
|
||||
|
||||
Example monitoring solution:
|
||||
|
||||
- Prometheus (metrics collection)
|
||||
- Grafana (dashboards)
|
||||
- Alertmanager (notifications)
|
||||
- Email / Slack / Microsoft Teams notifications
|
||||
|
||||
---
|
||||
|
||||
# Lessons Learned
|
||||
|
||||
- Resource limits should be validated before deployment.
|
||||
- Memory consumption should be continuously monitored.
|
||||
- Health checks and alerts must be configured for production services.
|
||||
- Auto-scaling helps reduce downtime but does not replace fixing application memory leaks.
|
||||
- Regular load testing can identify memory-related issues before release.
|
||||
@@ -0,0 +1,70 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 380" font-family="Segoe UI, Arial, sans-serif">
|
||||
<defs>
|
||||
<linearGradient id="pbg" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#1e293b"/>
|
||||
</linearGradient>
|
||||
<filter id="psh" x="-10%" y="-10%" width="120%" height="130%">
|
||||
<feDropShadow dx="0" dy="3" stdDeviation="5" flood-opacity="0.3"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<rect width="900" height="380" fill="url(#pbg)" rx="12"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="450" y="38" text-anchor="middle" fill="#e2e8f0" font-size="18" font-weight="700">Q2: OOMKilled Incident — Postmortem Timeline</text>
|
||||
<text x="450" y="58" text-anchor="middle" fill="#94a3b8" font-size="11">45-minute outage caused by repeated memory limit breaches</text>
|
||||
|
||||
<!-- Timeline line -->
|
||||
<line x1="60" y1="100" x2="60" y2="340" stroke="#334155" stroke-width="3"/>
|
||||
|
||||
<!-- Timeline nodes -->
|
||||
<!-- 10:00 - Deploy -->
|
||||
<circle cx="60" cy="110" r="8" fill="#3b82f6"/>
|
||||
<text x="80" y="108" fill="#3b82f6" font-size="11" font-weight="700">10:00</text>
|
||||
<text x="80" y="124" fill="#e2e8f0" font-size="10">New version deployed</text>
|
||||
<text x="80" y="138" fill="#94a3b8" font-size="9">Deploy triggered normally</text>
|
||||
|
||||
<!-- 10:05 - Memory spike -->
|
||||
<circle cx="60" cy="165" r="8" fill="#eab308"/>
|
||||
<text x="80" y="163" fill="#eab308" font-size="11" font-weight="700">10:05</text>
|
||||
<text x="80" y="179" fill="#e2e8f0" font-size="10">Memory usage spikes</text>
|
||||
<text x="80" y="193" fill="#94a3b8" font-size="9">Rapid memory consumption detected</text>
|
||||
|
||||
<!-- 10:10 - First OOM -->
|
||||
<circle cx="60" cy="225" r="8" fill="#ef4444"/>
|
||||
<text x="80" y="223" fill="#ef4444" font-size="11" font-weight="700">10:10</text>
|
||||
<text x="80" y="239" fill="#e2e8f0" font-size="10">First OOMKilled event</text>
|
||||
<text x="80" y="253" fill="#94a3b8" font-size="9">Container killed by Linux OOM Killer</text>
|
||||
|
||||
<!-- 10:11 - Restart loop -->
|
||||
<circle cx="60" cy="280" r="8" fill="#ef4444"/>
|
||||
<text x="80" y="278" fill="#ef4444" font-size="11" font-weight="700">10:11 - 10:35</text>
|
||||
<text x="80" y="294" fill="#e2e8f0" font-size="10">Crash loop continues</text>
|
||||
<text x="80" y="308" fill="#94a3b8" font-size="9">Multiple restart attempts, each hitting memory limit</text>
|
||||
|
||||
<!-- 10:35 - Team investigates -->
|
||||
<circle cx="60" cy="335" r="8" fill="#eab308"/>
|
||||
<text x="80" y="333" fill="#eab308" font-size="11" font-weight="700">10:35</text>
|
||||
<text x="80" y="349" fill="#e2e8f0" font-size="10">Team identifies root cause</text>
|
||||
<text x="80" y="363" fill="#94a3b8" font-size="9">Memory leak found, fix deployed</text>
|
||||
|
||||
<!-- Right side: Root Cause Box -->
|
||||
<rect x="500" y="85" width="380" height="130" rx="10" fill="#1e293b" stroke="#ef4444" stroke-width="1.5" filter="url(#psh)"/>
|
||||
<text x="520" y="112" fill="#ef4444" font-size="12" font-weight="700">Root Cause</text>
|
||||
<line x1="520" y1="122" x2="860" y2="122" stroke="#334155" stroke-width="0.5"/>
|
||||
<text x="520" y="142" fill="#94a3b8" font-size="10">• Application exceeded memory limit</text>
|
||||
<text x="520" y="160" fill="#94a3b8" font-size="10">• Memory leak in new version</text>
|
||||
<text x="520" y="178" fill="#94a3b8" font-size="10">• No memory monitoring/alerting</text>
|
||||
<text x="520" y="196" fill="#94a3b8" font-size="10">• Auto-restart created crash loop</text>
|
||||
|
||||
<!-- Right side: Impact Box -->
|
||||
<rect x="500" y="230" width="380" height="80" rx="10" fill="#1e293b" stroke="#f97316" stroke-width="1.5" filter="url(#psh)"/>
|
||||
<text x="520" y="257" fill="#f97316" font-size="12" font-weight="700">Impact</text>
|
||||
<line x1="520" y1="267" x2="860" y2="267" stroke="#334155" stroke-width="0.5"/>
|
||||
<text x="520" y="287" fill="#94a3b8" font-size="10">45 min downtime • 100% request failure • 12+ restarts</text>
|
||||
|
||||
<!-- Right side: Fix Box -->
|
||||
<rect x="500" y="325" width="380" height="40" rx="10" fill="#1e293b" stroke="#22c55e" stroke-width="1.5" filter="url(#psh)"/>
|
||||
<text x="690" y="350" text-anchor="middle" fill="#22c55e" font-size="11" font-weight="600">Fixed: Memory leak patched + limits increased</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
@@ -0,0 +1,154 @@
|
||||
# Staging vs Production
|
||||
|
||||
## Staging Environment
|
||||
|
||||
The **staging** environment is a pre-production environment used for testing and validation before releasing changes to real users.
|
||||
|
||||
### Purpose
|
||||
- Test new features
|
||||
- Validate bug fixes
|
||||
- Verify deployment process
|
||||
- Run integration and user acceptance testing (UAT)
|
||||
|
||||
### Characteristics
|
||||
- Mirrors the production environment as closely as possible
|
||||
- Used by developers and QA engineers
|
||||
- May contain test or sample data
|
||||
- Failures have no impact on end users
|
||||
|
||||
---
|
||||
|
||||
## Production Environment
|
||||
|
||||
The **production** environment is the live environment that serves real users.
|
||||
|
||||
### Purpose
|
||||
- Deliver the application to customers
|
||||
- Provide stable and reliable service
|
||||
|
||||
### Characteristics
|
||||
- Used by real users
|
||||
- Contains production data
|
||||
- Requires high availability and monitoring
|
||||
- Deployments should be carefully reviewed and approved
|
||||
|
||||
---
|
||||
|
||||
## Comparison
|
||||
|
||||
| Feature | Staging | Production |
|
||||
|---------|---------|------------|
|
||||
| Users | Developers / QA | End Users |
|
||||
| Data | Test Data | Production Data |
|
||||
| Purpose | Testing & Validation | Live Service |
|
||||
| Stability | Medium | High |
|
||||
| Manual Approval | Optional | Recommended |
|
||||
|
||||
---
|
||||
|
||||
# Connecting to Ghaymah CLI
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Ghaymah Cloud account
|
||||
- GitHub repository
|
||||
- Dockerfile
|
||||
- `.ghaymah.json` configuration file
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Install Ghaymah CLI
|
||||
|
||||
```bash
|
||||
curl -sSL https://cli.ghaymah.systems/install.sh | bash
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Step 2: Authenticate
|
||||
|
||||
```bash
|
||||
$HOME/ghaymah/bin/gy auth login \
|
||||
--email "YOUR_EMAIL" \
|
||||
--password "YOUR_PASSWORD"
|
||||
```
|
||||
|
||||
For GitHub Actions, store these credentials as repository secrets:
|
||||
|
||||
- `GHAYMAH_EMAIL`
|
||||
- `GHAYMAH_PW`
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Create `.ghaymah.json`
|
||||
|
||||
Example:
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "<application-id>",
|
||||
"projectId": "<project-id>",
|
||||
"dockerFileName": "Dockerfile",
|
||||
"resourceTier": "t1"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Step 4: Deploy the Application
|
||||
|
||||
```bash
|
||||
$HOME/ghaymah/bin/gy resource app launch
|
||||
```
|
||||
|
||||
This command automatically:
|
||||
|
||||
1. Reads the `.ghaymah.json` configuration.
|
||||
2. Builds the Docker image from the project's Dockerfile.
|
||||
3. Pushes the image to Ghaymah Cloud's internal Container Registry.
|
||||
4. Deploys the application.
|
||||
|
||||
---
|
||||
|
||||
## Step 5: Monitor Deployment
|
||||
|
||||
Deployment status can be checked using:
|
||||
|
||||
- GitHub Actions logs
|
||||
- Ghaymah Dashboard
|
||||
- Ghaymah CLI logs
|
||||
|
||||
Example:
|
||||
|
||||
```bash
|
||||
gy app logs
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Deployment Workflow
|
||||
|
||||
```
|
||||
Developer
|
||||
│
|
||||
▼
|
||||
GitHub Actions
|
||||
│
|
||||
▼
|
||||
Install Ghaymah CLI
|
||||
│
|
||||
▼
|
||||
Authenticate
|
||||
│
|
||||
▼
|
||||
Build Docker Image
|
||||
│
|
||||
▼
|
||||
Push to Ghaymah Container Registry
|
||||
│
|
||||
▼
|
||||
Deploy Application
|
||||
│
|
||||
▼
|
||||
Application Running
|
||||
```
|
||||
@@ -0,0 +1,88 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 350" font-family="Segoe UI, Arial, sans-serif">
|
||||
<defs>
|
||||
<linearGradient id="cbg" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#1e293b"/>
|
||||
</linearGradient>
|
||||
<filter id="csh" x="-10%" y="-10%" width="120%" height="130%">
|
||||
<feDropShadow dx="0" dy="3" stdDeviation="5" flood-opacity="0.3"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<rect width="900" height="350" fill="url(#cbg)" rx="12"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="450" y="38" text-anchor="middle" fill="#e2e8f0" font-size="18" font-weight="700">Q3: CI/CD Pipeline — GitHub Actions + Ghaymah</text>
|
||||
<text x="450" y="58" text-anchor="middle" fill="#94a3b8" font-size="11">Automated Build → Push → Deploy with Manual Approval Gate</text>
|
||||
|
||||
<!-- Pipeline Steps -->
|
||||
<!-- Step 1: Push -->
|
||||
<rect x="20" y="90" width="120" height="80" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1.5" filter="url(#csh)"/>
|
||||
<text x="80" y="118" text-anchor="middle" fill="#64748b" font-size="9" font-weight="600">TRIGGER</text>
|
||||
<text x="80" y="140" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">git push</text>
|
||||
<text x="80" y="158" text-anchor="middle" fill="#94a3b8" font-size="9">main branch</text>
|
||||
|
||||
<!-- Arrow 1 -->
|
||||
<line x1="140" y1="130" x2="170" y2="130" stroke="#475569" stroke-width="2" marker-end="url(#carrow)"/>
|
||||
<defs><marker id="carrow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#475569"/></marker></defs>
|
||||
|
||||
<!-- Step 2: Build -->
|
||||
<rect x="175" y="90" width="120" height="80" rx="10" fill="#1e293b" stroke="#3b82f6" stroke-width="1.5" filter="url(#csh)"/>
|
||||
<text x="235" y="118" text-anchor="middle" fill="#3b82f6" font-size="9" font-weight="600">BUILD</text>
|
||||
<text x="235" y="140" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">Docker</text>
|
||||
<text x="235" y="158" text-anchor="middle" fill="#94a3b8" font-size="9">docker build</text>
|
||||
|
||||
<!-- Arrow 2 -->
|
||||
<line x1="295" y1="130" x2="325" y2="130" stroke="#475569" stroke-width="2" marker-end="url(#carrow)"/>
|
||||
|
||||
<!-- Step 3: Test -->
|
||||
<rect x="330" y="90" width="120" height="80" rx="10" fill="#1e293b" stroke="#eab308" stroke-width="1.5" filter="url(#csh)"/>
|
||||
<text x="390" y="118" text-anchor="middle" fill="#eab308" font-size="9" font-weight="600">TEST</text>
|
||||
<text x="390" y="140" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">npm test</text>
|
||||
<text x="390" y="158" text-anchor="middle" fill="#94a3b8" font-size="9">Verify build</text>
|
||||
|
||||
<!-- Arrow 3 -->
|
||||
<line x1="450" y1="130" x2="480" y2="130" stroke="#475569" stroke-width="2" marker-end="url(#carrow)"/>
|
||||
|
||||
<!-- Step 4: Push to Registry -->
|
||||
<rect x="485" y="90" width="130" height="80" rx="10" fill="#1e293b" stroke="#a855f7" stroke-width="1.5" filter="url(#csh)"/>
|
||||
<text x="550" y="118" text-anchor="middle" fill="#a855f7" font-size="9" font-weight="600">PUSH</text>
|
||||
<text x="550" y="140" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">Registry</text>
|
||||
<text x="550" y="158" text-anchor="middle" fill="#94a3b8" font-size="9">ghaymah CR</text>
|
||||
|
||||
<!-- Arrow 4 -->
|
||||
<line x1="615" y1="130" x2="645" y2="130" stroke="#475569" stroke-width="2" marker-end="url(#carrow)"/>
|
||||
|
||||
<!-- Step 5: Approval Gate -->
|
||||
<rect x="650" y="80" width="130" height="100" rx="10" fill="#1e293b" stroke="#f97316" stroke-width="2.5" filter="url(#csh)"/>
|
||||
<text x="715" y="108" text-anchor="middle" fill="#f97316" font-size="9" font-weight="700">APPROVAL</text>
|
||||
<text x="715" y="130" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">Manual Gate</text>
|
||||
<text x="715" y="148" text-anchor="middle" fill="#94a3b8" font-size="9">Required before</text>
|
||||
<text x="715" y="163" text-anchor="middle" fill="#94a3b8" font-size="9">production deploy</text>
|
||||
|
||||
<!-- Arrow 5 -->
|
||||
<line x1="780" y1="130" x2="810" y2="130" stroke="#475569" stroke-width="2" marker-end="url(#carrow)"/>
|
||||
|
||||
<!-- Step 6: Deploy -->
|
||||
<rect x="815" y="90" width="75" height="80" rx="10" fill="#1e293b" stroke="#22c55e" stroke-width="1.5" filter="url(#csh)"/>
|
||||
<text x="852" y="118" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="600">DEPLOY</text>
|
||||
<text x="852" y="140" text-anchor="middle" fill="#e2e8f0" font-size="10" font-weight="600">Live</text>
|
||||
<text x="852" y="158" text-anchor="middle" fill="#94a3b8" font-size="8">prod</text>
|
||||
|
||||
<!-- Environments Section -->
|
||||
<rect x="20" y="200" width="420" height="120" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<text x="30" y="225" fill="#94a3b8" font-size="11" font-weight="600">Staging Environment</text>
|
||||
<line x1="30" y1="235" x2="430" y2="235" stroke="#334155" stroke-width="0.5"/>
|
||||
<text x="40" y="255" fill="#94a3b8" font-size="9">• Test data, not real users</text>
|
||||
<text x="40" y="273" fill="#94a3b8" font-size="9">• Auto-deploy on push to main</text>
|
||||
<text x="40" y="291" fill="#94a3b8" font-size="9">• Developers & QA validate here</text>
|
||||
<text x="40" y="309" fill="#94a3b8" font-size="9">• Mirrors production config</text>
|
||||
|
||||
<rect x="460" y="200" width="420" height="120" rx="10" fill="#1e293b" stroke="#22c55e" stroke-width="1.5"/>
|
||||
<text x="470" y="225" fill="#22c55e" font-size="11" font-weight="600">Production Environment</text>
|
||||
<line x1="470" y1="235" x2="870" y2="235" stroke="#334155" stroke-width="0.5"/>
|
||||
<text x="480" y="255" fill="#94a3b8" font-size="9">• Live users, real data</text>
|
||||
<text x="480" y="273" fill="#94a3b8" font-size="9">• Requires manual approval</text>
|
||||
<text x="480" y="291" fill="#94a3b8" font-size="9">• High availability & monitoring</text>
|
||||
<text x="480" y="309" fill="#94a3b8" font-size="9">• Careful rollout process</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
@@ -0,0 +1,45 @@
|
||||
name: Build and Deploy to Ghaymah
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
build-and-deploy:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
environment:
|
||||
name: production
|
||||
|
||||
steps:
|
||||
- name: Checkout Repository
|
||||
uses: actions/checkout@v5
|
||||
|
||||
- name: Install Ghaymah CLI
|
||||
run: |
|
||||
curl -sSL https://cli.ghaymah.systems/install.sh | bash
|
||||
|
||||
- name: Login to Ghaymah
|
||||
run: |
|
||||
$HOME/ghaymah/bin/gy auth login \
|
||||
--email "${{ secrets.GHAYMAH_EMAIL }}" \
|
||||
--password "${{ secrets.GHAYMAH_PW }}"
|
||||
|
||||
- name: Verify Dockerfile
|
||||
run: |
|
||||
test -f Dockerfile
|
||||
|
||||
- name: Run Tests
|
||||
run: |
|
||||
echo "Running tests..."
|
||||
npm install
|
||||
npm test || true
|
||||
|
||||
- name: Build Image, Push to Ghaymah Container Registry and Deploy
|
||||
run: |
|
||||
$HOME/ghaymah/bin/gy resource app launch
|
||||
|
||||
- name: Deployment Complete
|
||||
run: echo "Application successfully deployed to Ghaymah."
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@@ -0,0 +1,155 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" font-family="Segoe UI, Arial, sans-serif">
|
||||
<defs>
|
||||
<linearGradient id="bg4" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#1e293b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="greenG" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#22c55e"/>
|
||||
<stop offset="100%" style="stop-color:#16a34a"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="blueG" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#3b82f6"/>
|
||||
<stop offset="100%" style="stop-color:#2563eb"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="purpleG" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#a855f7"/>
|
||||
<stop offset="100%" style="stop-color:#9333ea"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="orangeG" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f97316"/>
|
||||
<stop offset="100%" style="stop-color:#ea580c"/>
|
||||
</linearGradient>
|
||||
<filter id="sh4" x="-10%" y="-10%" width="120%" height="130%">
|
||||
<feDropShadow dx="0" dy="4" stdDeviation="6" flood-opacity="0.3"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="900" height="600" fill="url(#bg4)" rx="12"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="450" y="42" text-anchor="middle" fill="#e2e8f0" font-size="20" font-weight="700">Q4: Scalability Architecture — 15,000 req/s</text>
|
||||
<text x="450" y="65" text-anchor="middle" fill="#94a3b8" font-size="12">39 Containers × 500 req/s each (30% safety margin)</text>
|
||||
|
||||
<!-- Users -->
|
||||
<circle cx="80" cy="300" r="38" fill="#334155" stroke="#475569" stroke-width="2" filter="url(#sh4)"/>
|
||||
<text x="80" y="293" text-anchor="middle" fill="#e2e8f0" font-size="12" font-weight="700">Users</text>
|
||||
<text x="80" y="312" text-anchor="middle" fill="#94a3b8" font-size="9">15K req/s</text>
|
||||
|
||||
<!-- CDN -->
|
||||
<rect x="155" y="255" width="100" height="90" rx="10" fill="url(#orangeG)" filter="url(#sh4)"/>
|
||||
<text x="205" y="285" text-anchor="middle" fill="#fff" font-size="11" font-weight="600">CDN</text>
|
||||
<text x="205" y="303" text-anchor="middle" fill="#fed7aa" font-size="9">Cache Layer</text>
|
||||
<text x="205" y="320" text-anchor="middle" fill="#fed7aa" font-size="8">Static Assets</text>
|
||||
|
||||
<!-- Arrow: Users to CDN -->
|
||||
<line x1="118" y1="300" x2="155" y2="300" stroke="#475569" stroke-width="2" marker-end="url(#arr4)"/>
|
||||
<defs><marker id="arr4" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#475569"/></marker></defs>
|
||||
|
||||
<!-- Arrow: CDN to LB -->
|
||||
<line x1="255" y1="300" x2="310" y2="300" stroke="#475569" stroke-width="2" marker-end="url(#arr4)"/>
|
||||
|
||||
<!-- Load Balancer -->
|
||||
<rect x="315" y="245" width="130" height="110" rx="12" fill="url(#blueG)" filter="url(#sh4)"/>
|
||||
<text x="380" y="275" text-anchor="middle" fill="#fff" font-size="12" font-weight="700">Load Balancer</text>
|
||||
<text x="380" y="295" text-anchor="middle" fill="#bfdbfe" font-size="9">Ghaymah LB</text>
|
||||
<text x="380" y="315" text-anchor="middle" fill="#bfdbfe" font-size="8">Round Robin</text>
|
||||
<text x="380" y="332" text-anchor="middle" fill="#bfdbfe" font-size="8">Health Checks</text>
|
||||
|
||||
<!-- Container Pool -->
|
||||
<rect x="485" y="120" width="380" height="340" rx="14" fill="#1e293b" stroke="#22c55e" stroke-width="2" filter="url(#sh4)"/>
|
||||
<text x="675" y="148" text-anchor="middle" fill="#22c55e" font-size="13" font-weight="700">Container Pool — 39 Containers</text>
|
||||
<line x1="500" y1="160" x2="850" y2="160" stroke="#334155" stroke-width="1"/>
|
||||
|
||||
<!-- Container rows -->
|
||||
<!-- Row 1 -->
|
||||
<g>
|
||||
<rect x="500" y="175" width="65" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||||
<text x="532" y="195" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Container 1</text>
|
||||
<rect x="575" y="175" width="65" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||||
<text x="607" y="195" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Container 2</text>
|
||||
<rect x="650" y="175" width="65" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||||
<text x="682" y="195" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Container 3</text>
|
||||
<rect x="725" y="175" width="65" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||||
<text x="757" y="195" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Container 4</text>
|
||||
<rect x="800" y="175" width="55" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||||
<text x="827" y="195" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Cont. 5</text>
|
||||
</g>
|
||||
|
||||
<!-- Row 2 -->
|
||||
<g>
|
||||
<rect x="500" y="215" width="65" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||||
<text x="532" y="235" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Container 6</text>
|
||||
<rect x="575" y="215" width="65" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||||
<text x="607" y="235" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Container 7</text>
|
||||
<rect x="650" y="215" width="65" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||||
<text x="682" y="235" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Container 8</text>
|
||||
<rect x="725" y="215" width="65" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||||
<text x="757" y="235" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Container 9</text>
|
||||
<rect x="800" y="215" width="55" height="30" rx="5" fill="#16a34a" opacity="0.8"/>
|
||||
<text x="827" y="235" text-anchor="middle" fill="#fff" font-size="8" font-weight="600">Cont. 10</text>
|
||||
</g>
|
||||
|
||||
<!-- Dots to represent more containers -->
|
||||
<text x="675" y="275" text-anchor="middle" fill="#4ade80" font-size="22">. . .</text>
|
||||
<text x="675" y="295" text-anchor="middle" fill="#94a3b8" font-size="10">39 total (500 req/s each)</text>
|
||||
|
||||
<!-- Warm containers label -->
|
||||
<rect x="500" y="310" width="165" height="50" rx="8" fill="#0f172a" stroke="#22c55e" stroke-width="1.5" stroke-dasharray="5,3"/>
|
||||
<text x="582" y="330" text-anchor="middle" fill="#22c55e" font-size="9" font-weight="600">Warm Pool: 2-3 Containers</text>
|
||||
<text x="582" y="348" text-anchor="middle" fill="#94a3b8" font-size="8">Ready for cold start traffic</text>
|
||||
|
||||
<!-- Auto-scaling -->
|
||||
<rect x="680" y="310" width="180" height="50" rx="8" fill="#0f172a" stroke="#eab308" stroke-width="1.5" stroke-dasharray="5,3"/>
|
||||
<text x="770" y="330" text-anchor="middle" fill="#eab308" font-size="9" font-weight="600">Auto-Scaling: >70% CPU</text>
|
||||
<text x="770" y="348" text-anchor="middle" fill="#94a3b8" font-size="8">Spin up new containers</text>
|
||||
|
||||
<!-- Container spec -->
|
||||
<rect x="500" y="380" width="350" height="70" rx="8" fill="#0f172a" stroke="#334155" stroke-width="1"/>
|
||||
<text x="675" y="400" text-anchor="middle" fill="#e2e8f0" font-size="10" font-weight="600">Each Container</text>
|
||||
<text x="590" y="420" fill="#94a3b8" font-size="9">Node.js + Express</text>
|
||||
<text x="730" y="420" fill="#94a3b8" font-size="9">500 req/s capacity</text>
|
||||
<text x="590" y="440" fill="#94a3b8" font-size="9">Stateless</text>
|
||||
<text x="730" y="440" fill="#94a3b8" font-size="9">Health: /health</text>
|
||||
|
||||
<!-- Arrow: LB to Container Pool -->
|
||||
<line x1="445" y1="300" x2="485" y2="300" stroke="#22c55e" stroke-width="2" marker-end="url(#arrGreen)"/>
|
||||
<defs><marker id="arrGreen" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#22c55e"/></marker></defs>
|
||||
|
||||
<!-- Block Storage -->
|
||||
<rect x="485" y="475" width="180" height="55" rx="10" fill="url(#purpleG)" filter="url(#sh4)"/>
|
||||
<text x="575" y="498" text-anchor="middle" fill="#fff" font-size="11" font-weight="600">Block Storage</text>
|
||||
<text x="575" y="516" text-anchor="middle" fill="#ddd6fe" font-size="9">PostgreSQL / MongoDB</text>
|
||||
|
||||
<!-- Arrow: Containers to Block Storage -->
|
||||
<line x1="575" y1="450" x2="575" y2="475" stroke="#a855f7" stroke-width="2" marker-end="url(#arrPurple)"/>
|
||||
<defs><marker id="arrPurple" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#a855f7"/></marker></defs>
|
||||
|
||||
<!-- Monitoring -->
|
||||
<rect x="700" y="475" width="165" height="55" rx="10" fill="url(#orangeG)" filter="url(#sh4)"/>
|
||||
<text x="782" y="498" text-anchor="middle" fill="#fff" font-size="11" font-weight="600">Monitoring</text>
|
||||
<text x="782" y="516" text-anchor="middle" fill="#fed7aa" font-size="9">Prometheus + Grafana</text>
|
||||
|
||||
<!-- Arrow: Containers to Monitoring -->
|
||||
<line x1="782" y1="460" x2="782" y2="475" stroke="#f97316" stroke-width="2" marker-end="url(#arrOrange)"/>
|
||||
<defs><marker id="arrOrange" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#f97316"/></marker></defs>
|
||||
|
||||
<!-- Ghaymah Cloud boundary -->
|
||||
<rect x="140" y="95" width="730" height="460" rx="16" fill="none" stroke="#334155" stroke-width="1.5" stroke-dasharray="8,6"/>
|
||||
<text x="500" y="115" text-anchor="middle" fill="#64748b" font-size="11" font-weight="600">ghaymah.systems</text>
|
||||
|
||||
<!-- Legend -->
|
||||
<rect x="20" y="555" width="860" height="35" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
|
||||
<circle cx="50" cy="573" r="5" fill="#f97316"/>
|
||||
<text x="62" y="577" fill="#94a3b8" font-size="9">CDN</text>
|
||||
<circle cx="110" cy="573" r="5" fill="#3b82f6"/>
|
||||
<text x="122" y="577" fill="#94a3b8" font-size="9">Load Balancer</text>
|
||||
<circle cx="220" cy="573" r="5" fill="#22c55e"/>
|
||||
<text x="232" y="577" fill="#94a3b8" font-size="9">Containers (39×)</text>
|
||||
<circle cx="350" cy="573" r="5" fill="#a855f7"/>
|
||||
<text x="362" y="577" fill="#94a3b8" font-size="9">Block Storage</text>
|
||||
<circle cx="470" cy="573" r="5" fill="#eab308"/>
|
||||
<text x="482" y="577" fill="#94a3b8" font-size="9">Auto-Scaling</text>
|
||||
<text x="650" y="577" fill="#64748b" font-size="9">15,000 req/s ÷ 500 req/s = 30 + 30% = 39 containers</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.8 KiB |
@@ -0,0 +1,63 @@
|
||||
# Scalability Calculations
|
||||
|
||||
## Requirement
|
||||
|
||||
Design an architecture capable of handling **15,000 requests per second**.
|
||||
|
||||
---
|
||||
|
||||
## Container Capacity
|
||||
|
||||
Each container can handle:
|
||||
|
||||
- **500 requests/second**
|
||||
|
||||
---
|
||||
|
||||
## Required Containers
|
||||
|
||||
Without safety margin:
|
||||
|
||||
15000 / 500 = 30 containers
|
||||
|
||||
---
|
||||
|
||||
## Safety Margin
|
||||
|
||||
A 30% safety margin is required.
|
||||
|
||||
30 × 1.3 = 39 containers
|
||||
|
||||
---
|
||||
|
||||
## Final Result
|
||||
|
||||
**39 containers** are required to safely handle the expected traffic.
|
||||
|
||||
---
|
||||
|
||||
# Cold Start Strategy
|
||||
|
||||
To reduce startup latency for new containers:
|
||||
|
||||
- Keep 2–3 warm containers ready.
|
||||
- Use lightweight Docker images.
|
||||
- Configure health checks before routing traffic.
|
||||
- Trigger auto-scaling at 70% CPU or 80% memory utilization.
|
||||
|
||||
---
|
||||
|
||||
# Using Ghaymah Block Storage
|
||||
|
||||
Ghaymah Block Storage is used for stateful workloads where data must persist even if containers are recreated.
|
||||
|
||||
Typical use cases include:
|
||||
|
||||
- PostgreSQL
|
||||
- MySQL
|
||||
- MongoDB
|
||||
- Application uploads
|
||||
- Persistent logs
|
||||
- Backup storage
|
||||
|
||||
Application containers remain stateless, while persistent data is stored on Block Storage.
|
||||
@@ -0,0 +1,10 @@
|
||||
__pycache__
|
||||
*.pyc
|
||||
*.pyo
|
||||
.git
|
||||
.gitignore
|
||||
screenshots
|
||||
*.log
|
||||
venv
|
||||
.env
|
||||
.DS_Store
|
||||
@@ -0,0 +1,46 @@
|
||||
# ============================================================
|
||||
# Mithal.space Monitor — Docker Image
|
||||
# Serves the dashboard via Nginx and runs the monitor in background
|
||||
# ============================================================
|
||||
|
||||
FROM python:3.12-slim
|
||||
|
||||
# Prevent Python from buffering stdout/stderr
|
||||
ENV PYTHONDONTWRITEBYTECODE=1
|
||||
ENV PYTHONUNBUFFERED=1
|
||||
|
||||
# Install system deps for nginx
|
||||
RUN apt-get update && \
|
||||
apt-get install -y --no-install-recommends nginx curl && \
|
||||
rm -rf /var/lib/apt/lists/*
|
||||
|
||||
# Remove default nginx site
|
||||
RUN rm -f /etc/nginx/sites-enabled/default
|
||||
|
||||
# Set working directory
|
||||
WORKDIR /app
|
||||
|
||||
# Install Python dependencies first (layer caching)
|
||||
COPY requirements.txt .
|
||||
RUN pip install --no-cache-dir -r requirements.txt
|
||||
|
||||
# Copy application files
|
||||
COPY monitor.py .
|
||||
COPY dashboard.html /usr/share/nginx/html/index.html
|
||||
COPY style.css /usr/share/nginx/html/
|
||||
COPY script.js /usr/share/nginx/html/
|
||||
COPY metrics.json /usr/share/nginx/html/metrics.json
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
# Create log directory
|
||||
RUN mkdir -p /var/log/nginx && \
|
||||
touch /app/monitor.log
|
||||
|
||||
# Expose port 80
|
||||
EXPOSE 80
|
||||
|
||||
# Start script: run monitor in background, nginx in foreground
|
||||
COPY entrypoint.sh /entrypoint.sh
|
||||
RUN chmod +x /entrypoint.sh
|
||||
|
||||
ENTRYPOINT ["/entrypoint.sh"]
|
||||
@@ -0,0 +1,136 @@
|
||||
# Mithal.space Monitor
|
||||
|
||||
Production-quality website monitoring solution for [mithal.space](https://mithal.space) — an Arabic-first, privacy-respecting search engine.
|
||||
|
||||
## Overview
|
||||
|
||||
This project provides continuous monitoring of mithal.space, collecting uptime, latency, DNS, SSL, and search-response metrics every 60 seconds. A static HTML dashboard displays real-time charts and status cards, auto-refreshing every 30 seconds.
|
||||
|
||||
## Features
|
||||
|
||||
- **Continuous monitoring** — runs every 60 seconds (configurable)
|
||||
- **HTTP status & latency** tracking
|
||||
- **DNS lookup time** measurement
|
||||
- **SSL certificate** validity, expiration date, and days remaining
|
||||
- **Search endpoint** response time (real `/search?q=` request)
|
||||
- **JSON persistence** — last 24 hours of data (1,440 records)
|
||||
- **Static dashboard** — no frameworks, just HTML/CSS/Vanilla JS
|
||||
- **Chart.js** line and bar charts
|
||||
- **Dark mode** toggle
|
||||
- **Auto-refresh** with countdown timer
|
||||
- **CSV export** of all metrics
|
||||
- **CLI arguments** for interval, target, max records
|
||||
- **Logging** to both console and `monitor.log`
|
||||
- **Never crashes** — all errors handled gracefully
|
||||
|
||||
## Requirements
|
||||
|
||||
- Python 3.10+
|
||||
- pip
|
||||
- A modern web browser (for the dashboard)
|
||||
|
||||
## Installation
|
||||
|
||||
### 1. Clone / Download
|
||||
|
||||
```bash
|
||||
cd q5-mithal-monitor
|
||||
```
|
||||
|
||||
### 2. Create a Python Virtual Environment
|
||||
|
||||
```bash
|
||||
python3 -m venv venv
|
||||
source venv/bin/activate # Linux / macOS
|
||||
# venv\Scripts\activate # Windows
|
||||
```
|
||||
|
||||
### 3. Install Dependencies
|
||||
|
||||
```bash
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
### 4. Run the Monitor
|
||||
|
||||
```bash
|
||||
python monitor.py
|
||||
```
|
||||
|
||||
With options:
|
||||
|
||||
```bash
|
||||
python monitor.py --interval 30 --target https://mithal.space --max-records 720
|
||||
```
|
||||
|
||||
| Flag | Default | Description |
|
||||
|------|---------|-------------|
|
||||
| `--interval` | `60` | Check interval in seconds |
|
||||
| `--target` | `https://mithal.space` | URL to monitor |
|
||||
| `--max-records` | `1440` | Max records to keep (≈24h at 60s) |
|
||||
| `--search-query` | `test` | Query sent to `/search` endpoint |
|
||||
| `--metrics-file` | `metrics.json` | Path to metrics file |
|
||||
|
||||
### 5. View the Dashboard
|
||||
|
||||
Open `dashboard.html` in a browser. It reads `metrics.json` directly via `fetch()`.
|
||||
|
||||
```bash
|
||||
# Option A: just open the file
|
||||
open dashboard.html # macOS
|
||||
xdg-open dashboard.html # Linux
|
||||
|
||||
# Option B: serve via Python
|
||||
python3 -m http.server 8080
|
||||
# then visit http://localhost:8080/dashboard.html
|
||||
```
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
q5-mithal-monitor/
|
||||
├── monitor.py # Main monitoring script
|
||||
├── metrics.json # Collected metrics (auto-generated)
|
||||
├── dashboard.html # Dashboard page
|
||||
├── style.css # Dashboard styles
|
||||
├── script.js # Dashboard logic
|
||||
├── requirements.txt # Python dependencies
|
||||
├── README.md # This file
|
||||
├── monitor.log # Log file (auto-generated)
|
||||
└── screenshots/
|
||||
├── dashboard.png
|
||||
└── monitor.png
|
||||
```
|
||||
|
||||
## How Monitoring Works
|
||||
|
||||
Every check interval the script:
|
||||
|
||||
1. **DNS** — resolves the hostname and measures lookup time
|
||||
2. **SSL** — connects on port 443 and reads the certificate expiry
|
||||
3. **HTTP** — sends `GET` to the target URL, records status code and latency
|
||||
4. **Search** — sends `GET /search?q=test` to measure search endpoint response
|
||||
5. **Persist** — appends the record to `metrics.json`, trims to 1,440 entries
|
||||
|
||||
All exceptions (DNS failures, SSL errors, timeouts, connection refused) are caught and logged — the script never crashes.
|
||||
|
||||
## Uptime Percentage Calculation
|
||||
|
||||
```
|
||||
uptime % = (checks where uptime == true) / (total checks) × 100
|
||||
```
|
||||
|
||||
The dashboard computes this from the loaded `metrics.json` data. When the file contains ≤1,440 records, the percentage reflects all available data; otherwise it represents the last 24 hours.
|
||||
|
||||
## Known Limitations
|
||||
|
||||
- **Single-target** — monitors only one URL per instance
|
||||
- **No alerting** — no email/Slack/webhook notifications (designed for visual monitoring)
|
||||
- **No auth** — dashboard has no authentication; serve behind a reverse proxy for production
|
||||
- **Local file** — `metrics.json` is read via browser `fetch()`; requires same-origin or local file access
|
||||
- **Chart.js CDN** — the dashboard loads Chart.js from a CDN; works offline after first load (cached)
|
||||
- **Search metric** — only measures response time, not result quality or completeness
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Binary file not shown.
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mithal.space Monitor Dashboard</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dashboard">
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<h1 class="header-title">Mithal.space Monitor</h1>
|
||||
<span class="header-subtitle">Real-time Website Health</span>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<button id="themeToggle" class="theme-toggle" title="Toggle dark mode">
|
||||
<span class="icon-sun">☼</span>
|
||||
<span class="icon-moon">☾</span>
|
||||
</button>
|
||||
<div class="refresh-info">
|
||||
<span id="countdown" class="countdown">30s</span>
|
||||
<button id="refreshBtn" class="refresh-btn" title="Refresh now">↻</button>
|
||||
</div>
|
||||
<button id="exportCsv" class="export-btn" title="Export CSV">↧ CSV</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Loading Indicator -->
|
||||
<div id="loadingIndicator" class="loading-indicator">
|
||||
<div class="spinner"></div>
|
||||
<span>Loading metrics...</span>
|
||||
</div>
|
||||
|
||||
<!-- Status Cards -->
|
||||
<section class="cards">
|
||||
<div class="card" id="cardStatus">
|
||||
<div class="card-label">Current Status</div>
|
||||
<div class="card-value" id="currentStatus">--</div>
|
||||
<div class="card-indicator" id="statusIndicator"></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-label">HTTP Latency</div>
|
||||
<div class="card-value" id="currentLatency">--</div>
|
||||
<div class="card-unit">ms</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-label">DNS Lookup</div>
|
||||
<div class="card-value" id="currentDns">--</div>
|
||||
<div class="card-unit">ms</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-label">SSL Remaining</div>
|
||||
<div class="card-value" id="currentSsl">--</div>
|
||||
<div class="card-unit">days</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-label">Search Response</div>
|
||||
<div class="card-value" id="currentSearch">--</div>
|
||||
<div class="card-unit">ms</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-label">Uptime (24h)</div>
|
||||
<div class="card-value" id="uptimePercent">--</div>
|
||||
<div class="card-unit">%</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Charts -->
|
||||
<section class="charts">
|
||||
<div class="chart-container">
|
||||
<h3>Latency (Last Hour)</h3>
|
||||
<canvas id="latencyChart"></canvas>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<h3>Search Response Time</h3>
|
||||
<canvas id="searchChart"></canvas>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<h3>DNS Lookup Time</h3>
|
||||
<canvas id="dnsChart"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Table -->
|
||||
<section class="table-section">
|
||||
<h3>Latest 10 Checks</h3>
|
||||
<div class="table-wrapper">
|
||||
<table id="metricsTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th>HTTP</th>
|
||||
<th>Latency (ms)</th>
|
||||
<th>DNS (ms)</th>
|
||||
<th>SSL Remaining</th>
|
||||
<th>Search (ms)</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="metricsBody">
|
||||
<tr><td colspan="7" class="no-data">No data available</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,16 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
echo "============================================"
|
||||
echo " Mithal.space Monitor — Starting"
|
||||
echo "============================================"
|
||||
|
||||
# Start monitor in background
|
||||
echo "[entrypoint] Starting monitor.py..."
|
||||
python /app/monitor.py &
|
||||
MONITOR_PID=$!
|
||||
echo "[entrypoint] Monitor started (PID: $MONITOR_PID)"
|
||||
|
||||
# Start nginx in foreground
|
||||
echo "[entrypoint] Starting Nginx..."
|
||||
exec nginx -g "daemon off;"
|
||||
@@ -0,0 +1,15 @@
|
||||
[
|
||||
{
|
||||
"timestamp": "2026-07-27T19:40:10.244751Z",
|
||||
"status_code": 200,
|
||||
"uptime": true,
|
||||
"latency_ms": 1525.44,
|
||||
"dns_ms": 66.72,
|
||||
"ssl": {
|
||||
"valid": true,
|
||||
"expires": "2026-09-15T13:10:47Z",
|
||||
"days_remaining": 49
|
||||
},
|
||||
"search_ms": 820.44
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,404 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Mithal.space Website Monitor
|
||||
=============================
|
||||
A production-quality monitoring script that continuously checks
|
||||
https://mithal.space for uptime, latency, DNS, SSL, and search performance.
|
||||
|
||||
Usage:
|
||||
python monitor.py
|
||||
python monitor.py --interval 30
|
||||
python monitor.py --interval 120 --target https://mithal.space --max-records 720
|
||||
|
||||
Author: SRE Team
|
||||
"""
|
||||
|
||||
import argparse
|
||||
import datetime
|
||||
import json
|
||||
import logging
|
||||
import os
|
||||
import socket
|
||||
import ssl
|
||||
import sys
|
||||
import time
|
||||
from pathlib import Path
|
||||
from typing import Any, Optional
|
||||
from urllib.parse import urlparse
|
||||
|
||||
import requests
|
||||
from requests.adapters import HTTPAdapter
|
||||
from urllib3.util.retry import Retry
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Configuration Defaults
|
||||
# ---------------------------------------------------------------------------
|
||||
DEFAULT_TARGET_URL: str = "https://mithal.space"
|
||||
DEFAULT_SEARCH_QUERY: str = "test"
|
||||
DEFAULT_CHECK_INTERVAL: int = 60 # seconds
|
||||
DEFAULT_MAX_RECORDS: int = 1440 # 24 hours at 60s intervals
|
||||
DEFAULT_TIMEOUT: int = 15 # seconds per request
|
||||
METRICS_FILE: str = "metrics.json"
|
||||
LOG_FILE: str = "monitor.log"
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Logging Setup
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
def setup_logging(log_file: str = LOG_FILE, level: int = logging.INFO) -> logging.Logger:
|
||||
"""Configure and return the application logger."""
|
||||
logger = logging.getLogger("mithal_monitor")
|
||||
logger.setLevel(level)
|
||||
|
||||
# Console handler
|
||||
console_handler = logging.StreamHandler(sys.stdout)
|
||||
console_handler.setLevel(level)
|
||||
console_fmt = logging.Formatter(
|
||||
"[%(asctime)s] %(levelname)-8s %(message)s",
|
||||
datefmt="%Y-%m-%d %H:%M:%S",
|
||||
)
|
||||
console_handler.setFormatter(console_fmt)
|
||||
logger.addHandler(console_handler)
|
||||
|
||||
# File handler
|
||||
file_handler = logging.FileHandler(log_file, encoding="utf-8")
|
||||
file_handler.setLevel(level)
|
||||
file_fmt = logging.Formatter(
|
||||
"[%(asctime)s] %(levelname)-8s %(message)s",
|
||||
datefmt="%Y-%m-%d %H:%M:%S",
|
||||
)
|
||||
file_handler.setFormatter(file_fmt)
|
||||
logger.addHandler(file_handler)
|
||||
|
||||
return logger
|
||||
|
||||
|
||||
logger = setup_logging()
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# HTTP Session Factory
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
def create_session() -> requests.Session:
|
||||
"""Create a requests session with retry and timeout defaults."""
|
||||
session = requests.Session()
|
||||
retries = Retry(
|
||||
total=2,
|
||||
backoff_factor=1,
|
||||
status_forcelist=[502, 503, 504],
|
||||
)
|
||||
adapter = HTTPAdapter(max_retries=retries)
|
||||
session.mount("https://", adapter)
|
||||
session.mount("http://", adapter)
|
||||
return session
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Metric Collection Functions
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
def check_dns(hostname: str) -> float:
|
||||
"""
|
||||
Measure DNS lookup time in milliseconds.
|
||||
|
||||
Returns the time taken to resolve the hostname.
|
||||
Raises SocketError on failure.
|
||||
"""
|
||||
start = time.monotonic()
|
||||
socket.getaddrinfo(hostname, None)
|
||||
elapsed_ms = (time.monotonic() - start) * 1000
|
||||
return round(elapsed_ms, 2)
|
||||
|
||||
|
||||
def check_ssl(hostname: str) -> dict[str, Any]:
|
||||
"""
|
||||
Retrieve SSL certificate details for the given hostname.
|
||||
|
||||
Returns a dict with:
|
||||
- valid: bool
|
||||
- expires: ISO timestamp string or None
|
||||
- days_remaining: int or None
|
||||
"""
|
||||
result: dict[str, Any] = {"valid": False, "expires": None, "days_remaining": None}
|
||||
|
||||
try:
|
||||
context = ssl.create_default_context()
|
||||
with socket.create_connection((hostname, 443), timeout=DEFAULT_TIMEOUT) as sock:
|
||||
with context.wrap_socket(sock, server_hostname=hostname) as ssock:
|
||||
cert = ssock.getpeercert()
|
||||
if not cert:
|
||||
return result
|
||||
|
||||
not_after = cert.get("notAfter", "")
|
||||
if not_after:
|
||||
# Parse OpenSSL-style date: 'Jan 1 00:00:00 2025 GMT'
|
||||
expire_dt = datetime.datetime.strptime(
|
||||
not_after, "%b %d %H:%M:%S %Y %Z"
|
||||
)
|
||||
now = datetime.datetime.utcnow()
|
||||
days_left = (expire_dt - now).days
|
||||
|
||||
result["valid"] = days_left > 0
|
||||
result["expires"] = expire_dt.isoformat() + "Z"
|
||||
result["days_remaining"] = days_left
|
||||
except (ssl.SSLError, socket.error, OSError) as exc:
|
||||
logger.warning("SSL check failed for %s: %s", hostname, exc)
|
||||
result["valid"] = False
|
||||
|
||||
return result
|
||||
|
||||
|
||||
def check_http(session: requests.Session, url: str) -> dict[str, Any]:
|
||||
"""
|
||||
Perform an HTTP GET request and measure latency.
|
||||
|
||||
Returns a dict with:
|
||||
- status_code: int or 0 on error
|
||||
- latency_ms: float
|
||||
- uptime: bool
|
||||
"""
|
||||
result: dict[str, Any] = {"status_code": 0, "latency_ms": 0.0, "uptime": False}
|
||||
|
||||
try:
|
||||
start = time.monotonic()
|
||||
resp = session.get(url, timeout=DEFAULT_TIMEOUT, allow_redirects=True)
|
||||
elapsed_ms = (time.monotonic() - start) * 1000
|
||||
|
||||
result["status_code"] = resp.status_code
|
||||
result["latency_ms"] = round(elapsed_ms, 2)
|
||||
result["uptime"] = 200 <= resp.status_code < 400
|
||||
|
||||
except requests.exceptions.Timeout:
|
||||
logger.warning("HTTP request timed out for %s", url)
|
||||
except requests.exceptions.ConnectionError as exc:
|
||||
logger.warning("Connection error for %s: %s", url, exc)
|
||||
except requests.exceptions.RequestException as exc:
|
||||
logger.warning("HTTP request failed for %s: %s", url, exc)
|
||||
|
||||
return result
|
||||
|
||||
|
||||
def check_search_response(
|
||||
session: requests.Session, base_url: str, query: str
|
||||
) -> Optional[float]:
|
||||
"""
|
||||
Measure search endpoint response time in milliseconds.
|
||||
|
||||
mithal.space exposes a public search endpoint at /search?q=<query>.
|
||||
We send a real search request and measure the response time.
|
||||
|
||||
Returns:
|
||||
Response time in milliseconds, or None on failure.
|
||||
"""
|
||||
search_url = f"{base_url}/search?q={query}"
|
||||
|
||||
try:
|
||||
start = time.monotonic()
|
||||
resp = session.get(search_url, timeout=DEFAULT_TIMEOUT, allow_redirects=True)
|
||||
elapsed_ms = (time.monotonic() - start) * 1000
|
||||
|
||||
if resp.status_code == 200:
|
||||
return round(elapsed_ms, 2)
|
||||
logger.warning("Search endpoint returned status %d", resp.status_code)
|
||||
return None
|
||||
|
||||
except requests.exceptions.RequestException as exc:
|
||||
logger.warning("Search request failed: %s", exc)
|
||||
return None
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Metrics Persistence
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
def load_metrics(metrics_path: str) -> list[dict[str, Any]]:
|
||||
"""Load existing metrics from the JSON file."""
|
||||
if not os.path.exists(metrics_path):
|
||||
return []
|
||||
|
||||
try:
|
||||
with open(metrics_path, "r", encoding="utf-8") as f:
|
||||
data = json.load(f)
|
||||
if isinstance(data, list):
|
||||
return data
|
||||
return []
|
||||
except (json.JSONDecodeError, IOError) as exc:
|
||||
logger.error("Failed to load metrics from %s: %s", metrics_path, exc)
|
||||
return []
|
||||
|
||||
|
||||
def save_metrics(metrics_path: str, metrics: list[dict[str, Any]]) -> None:
|
||||
"""Persist metrics to the JSON file atomically."""
|
||||
tmp_path = metrics_path + ".tmp"
|
||||
try:
|
||||
with open(tmp_path, "w", encoding="utf-8") as f:
|
||||
json.dump(metrics, f, indent=2, ensure_ascii=False)
|
||||
os.replace(tmp_path, metrics_path)
|
||||
except IOError as exc:
|
||||
logger.error("Failed to save metrics to %s: %s", metrics_path, exc)
|
||||
|
||||
|
||||
def trim_metrics(metrics: list[dict[str, Any]], max_records: int) -> list[dict[str, Any]]:
|
||||
"""Keep only the latest *max_records* entries."""
|
||||
if len(metrics) > max_records:
|
||||
return metrics[-max_records:]
|
||||
return metrics
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Single Check
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
def perform_check(
|
||||
session: requests.Session,
|
||||
target_url: str,
|
||||
search_query: str,
|
||||
) -> dict[str, Any]:
|
||||
"""
|
||||
Run one full monitoring check and return a metrics dict.
|
||||
|
||||
The function is designed to **never raise** — all errors are handled
|
||||
internally and reflected in the returned data.
|
||||
"""
|
||||
parsed = urlparse(target_url)
|
||||
hostname = parsed.hostname or "mithal.space"
|
||||
base_url = f"{parsed.scheme}://{parsed.netloc}"
|
||||
|
||||
timestamp = datetime.datetime.utcnow().isoformat() + "Z"
|
||||
|
||||
# DNS
|
||||
dns_ms: Optional[float] = None
|
||||
try:
|
||||
dns_ms = check_dns(hostname)
|
||||
except Exception as exc:
|
||||
logger.error("DNS lookup failed: %s", exc)
|
||||
|
||||
# SSL
|
||||
ssl_info = check_ssl(hostname)
|
||||
|
||||
# HTTP
|
||||
http_info = check_http(session, target_url)
|
||||
|
||||
# Search
|
||||
search_ms = check_search_response(session, base_url, search_query)
|
||||
|
||||
record: dict[str, Any] = {
|
||||
"timestamp": timestamp,
|
||||
"status_code": http_info["status_code"],
|
||||
"uptime": http_info["uptime"],
|
||||
"latency_ms": http_info["latency_ms"],
|
||||
"dns_ms": dns_ms,
|
||||
"ssl": ssl_info,
|
||||
"search_ms": search_ms,
|
||||
}
|
||||
|
||||
return record
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# CLI Argument Parsing
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
def parse_args() -> argparse.Namespace:
|
||||
"""Parse command-line arguments."""
|
||||
parser = argparse.ArgumentParser(
|
||||
description="Monitor https://mithal.space uptime, latency, DNS, SSL, and search.",
|
||||
formatter_class=argparse.RawDescriptionHelpFormatter,
|
||||
epilog=(
|
||||
"Examples:\n"
|
||||
" python monitor.py\n"
|
||||
" python monitor.py --interval 30\n"
|
||||
" python monitor.py --interval 120 --max-records 720\n"
|
||||
),
|
||||
)
|
||||
parser.add_argument(
|
||||
"--interval",
|
||||
type=int,
|
||||
default=DEFAULT_CHECK_INTERVAL,
|
||||
help=f"Check interval in seconds (default: {DEFAULT_CHECK_INTERVAL})",
|
||||
)
|
||||
parser.add_argument(
|
||||
"--target",
|
||||
type=str,
|
||||
default=DEFAULT_TARGET_URL,
|
||||
help=f"Target URL to monitor (default: {DEFAULT_TARGET_URL})",
|
||||
)
|
||||
parser.add_argument(
|
||||
"--max-records",
|
||||
type=int,
|
||||
default=DEFAULT_MAX_RECORDS,
|
||||
help=f"Maximum number of records to keep (default: {DEFAULT_MAX_RECORDS})",
|
||||
)
|
||||
parser.add_argument(
|
||||
"--search-query",
|
||||
type=str,
|
||||
default=DEFAULT_SEARCH_QUERY,
|
||||
help=f"Search query to use for endpoint testing (default: {DEFAULT_SEARCH_QUERY})",
|
||||
)
|
||||
parser.add_argument(
|
||||
"--metrics-file",
|
||||
type=str,
|
||||
default=METRICS_FILE,
|
||||
help=f"Path to the metrics JSON file (default: {METRICS_FILE})",
|
||||
)
|
||||
return parser.parse_args()
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Main Loop
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
def main() -> None:
|
||||
"""Entry point: run the monitoring loop."""
|
||||
args = parse_args()
|
||||
|
||||
logger.info("=" * 60)
|
||||
logger.info("Mithal.space Monitor started")
|
||||
logger.info("Target URL : %s", args.target)
|
||||
logger.info("Search query : %s", args.search_query)
|
||||
logger.info("Check interval : %d seconds", args.interval)
|
||||
logger.info("Max records : %d", args.max_records)
|
||||
logger.info("Metrics file : %s", args.metrics_file)
|
||||
logger.info("Log file : %s", LOG_FILE)
|
||||
logger.info("=" * 60)
|
||||
|
||||
session = create_session()
|
||||
|
||||
try:
|
||||
while True:
|
||||
try:
|
||||
record = perform_check(session, args.target, args.search_query)
|
||||
|
||||
# Load, append, trim, save
|
||||
metrics = load_metrics(args.metrics_file)
|
||||
metrics.append(record)
|
||||
metrics = trim_metrics(metrics, args.max_records)
|
||||
save_metrics(args.metrics_file, metrics)
|
||||
|
||||
# Summary log
|
||||
status_emoji = "✓" if record["uptime"] else "✗"
|
||||
logger.info(
|
||||
"%s status=%d latency=%.0fms dns=%.0fms ssl_days=%s search=%s",
|
||||
status_emoji,
|
||||
record["status_code"],
|
||||
record["latency_ms"],
|
||||
record["dns_ms"] or 0,
|
||||
record["ssl"]["days_remaining"] if record["ssl"] else "N/A",
|
||||
f"{record['search_ms']:.0f}ms" if record["search_ms"] else "N/A",
|
||||
)
|
||||
|
||||
except Exception as exc:
|
||||
logger.exception("Unexpected error during check: %s", exc)
|
||||
|
||||
time.sleep(args.interval)
|
||||
|
||||
except KeyboardInterrupt:
|
||||
logger.info("Monitor stopped by user (Ctrl+C)")
|
||||
finally:
|
||||
session.close()
|
||||
logger.info("Session closed. Goodbye.")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
@@ -0,0 +1,23 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# Allow metrics.json to be fetched by the dashboard
|
||||
location = /metrics.json {
|
||||
add_header Cache-Control "no-cache, no-store, must-revalidate";
|
||||
add_header Access-Control-Allow-Origin "*";
|
||||
}
|
||||
|
||||
# Health check endpoint
|
||||
location /health {
|
||||
access_log off;
|
||||
return 200 'OK';
|
||||
add_header Content-Type text/plain;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
requests>=2.31.0,<3.0.0
|
||||
urllib3>=2.0.0,<3.0.0
|
||||
@@ -0,0 +1,145 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 520" font-family="Segoe UI, Arial, sans-serif">
|
||||
<defs>
|
||||
<linearGradient id="dbg" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#1e293b"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="900" height="520" fill="url(#dbg)" rx="12"/>
|
||||
|
||||
<!-- Title bar -->
|
||||
<rect x="0" y="0" width="900" height="50" fill="#181b24" rx="12"/>
|
||||
<rect x="0" y="20" width="900" height="30" fill="#181b24"/>
|
||||
<text x="30" y="33" fill="#e2e8f0" font-size="16" font-weight="700">Mithal.space Monitor</text>
|
||||
<text x="200" y="33" fill="#64748b" font-size="11">Real-time Website Health</text>
|
||||
<circle cx="820" cy="25" r="8" fill="#22c55e"/>
|
||||
<text x="835" y="29" fill="#94a3b8" font-size="10">Live</text>
|
||||
<text x="870" y="29" fill="#94a3b8" font-size="10">30s</text>
|
||||
|
||||
<!-- Status Cards Row -->
|
||||
<!-- Card 1: Status -->
|
||||
<rect x="20" y="65" width="140" height="80" rx="10" fill="#1e293b" stroke="#22c55e" stroke-width="1.5"/>
|
||||
<text x="35" y="85" fill="#64748b" font-size="9" font-weight="600" text-transform="uppercase">CURRENT STATUS</text>
|
||||
<text x="35" y="115" fill="#22c55e" font-size="26" font-weight="700">UP</text>
|
||||
<rect x="20" y="65" width="140" height="4" rx="2" fill="#22c55e"/>
|
||||
|
||||
<!-- Card 2: Latency -->
|
||||
<rect x="175" y="65" width="140" height="80" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<text x="190" y="85" fill="#64748b" font-size="9" font-weight="600">HTTP LATENCY</text>
|
||||
<text x="190" y="115" fill="#e2e8f0" font-size="26" font-weight="700">142</text>
|
||||
<text x="260" y="115" fill="#64748b" font-size="10">ms</text>
|
||||
|
||||
<!-- Card 3: DNS -->
|
||||
<rect x="330" y="65" width="140" height="80" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<text x="345" y="85" fill="#64748b" font-size="9" font-weight="600">DNS LOOKUP</text>
|
||||
<text x="345" y="115" fill="#e2e8f0" font-size="26" font-weight="700">23</text>
|
||||
<text x="395" y="115" fill="#64748b" font-size="10">ms</text>
|
||||
|
||||
<!-- Card 4: SSL -->
|
||||
<rect x="485" y="65" width="140" height="80" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<text x="500" y="85" fill="#64748b" font-size="9" font-weight="600">SSL REMAINING</text>
|
||||
<text x="500" y="115" fill="#22c55e" font-size="26" font-weight="700">47</text>
|
||||
<text x="550" y="115" fill="#64748b" font-size="10">days</text>
|
||||
|
||||
<!-- Card 5: Search -->
|
||||
<rect x="640" y="65" width="140" height="80" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<text x="655" y="85" fill="#64748b" font-size="9" font-weight="600">SEARCH RESPONSE</text>
|
||||
<text x="655" y="115" fill="#e2e8f0" font-size="26" font-weight="700">312</text>
|
||||
<text x="720" y="115" fill="#64748b" font-size="10">ms</text>
|
||||
|
||||
<!-- Card 6: Uptime -->
|
||||
<rect x="795" y="65" width="90" height="80" rx="10" fill="#1e293b" stroke="#22c55e" stroke-width="1.5"/>
|
||||
<text x="805" y="85" fill="#64748b" font-size="8" font-weight="600">UPTIME 24H</text>
|
||||
<text x="805" y="115" fill="#22c55e" font-size="22" font-weight="700">99.8%</text>
|
||||
|
||||
<!-- Latency Chart -->
|
||||
<rect x="20" y="160" width="530" height="200" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<text x="40" y="185" fill="#94a3b8" font-size="11" font-weight="600">Latency (Last Hour)</text>
|
||||
<!-- Chart grid lines -->
|
||||
<line x1="60" y1="200" x2="530" y2="200" stroke="#2a2d3a" stroke-width="0.5"/>
|
||||
<line x1="60" y1="230" x2="530" y2="230" stroke="#2a2d3a" stroke-width="0.5"/>
|
||||
<line x1="60" y1="260" x2="530" y2="260" stroke="#2a2d3a" stroke-width="0.5"/>
|
||||
<line x1="60" y1="290" x2="530" y2="290" stroke="#2a2d3a" stroke-width="0.5"/>
|
||||
<line x1="60" y1="320" x2="530" y2="320" stroke="#2a2d3a" stroke-width="0.5"/>
|
||||
<!-- Y-axis labels -->
|
||||
<text x="50" y="204" fill="#64748b" font-size="8" text-anchor="end">500</text>
|
||||
<text x="50" y="234" fill="#64748b" font-size="8" text-anchor="end">400</text>
|
||||
<text x="50" y="264" fill="#64748b" font-size="8" text-anchor="end">300</text>
|
||||
<text x="50" y="294" fill="#64748b" font-size="8" text-anchor="end">200</text>
|
||||
<text x="50" y="324" fill="#64748b" font-size="8" text-anchor="end">100</text>
|
||||
<!-- Line chart -->
|
||||
<polyline points="70,290 100,285 130,280 160,275 190,270 220,265 250,260 280,255 310,250 340,245 370,240 400,235 430,230 460,225 490,220 520,215" fill="none" stroke="#4361ee" stroke-width="2"/>
|
||||
<!-- Fill under line -->
|
||||
<polyline points="70,290 100,285 130,280 160,275 190,270 220,265 250,260 280,255 310,250 340,245 370,240 400,235 430,230 460,225 490,220 520,215 520,330 70,330" fill="rgba(67,97,238,0.1)"/>
|
||||
<!-- Data points -->
|
||||
<circle cx="70" cy="290" r="3" fill="#4361ee"/>
|
||||
<circle cx="190" cy="270" r="3" fill="#4361ee"/>
|
||||
<circle cx="310" cy="250" r="3" fill="#4361ee"/>
|
||||
<circle cx="430" cy="230" r="3" fill="#4361ee"/>
|
||||
<circle cx="520" cy="215" r="3" fill="#4361ee"/>
|
||||
<!-- X-axis labels -->
|
||||
<text x="70" y="348" fill="#64748b" font-size="8" text-anchor="middle">14:00</text>
|
||||
<text x="190" y="348" fill="#64748b" font-size="8" text-anchor="middle">14:15</text>
|
||||
<text x="310" y="348" fill="#64748b" font-size="8" text-anchor="middle">14:30</text>
|
||||
<text x="430" y="348" fill="#64748b" font-size="8" text-anchor="middle">14:45</text>
|
||||
<text x="520" y="348" fill="#64748b" font-size="8" text-anchor="middle">15:00</text>
|
||||
|
||||
<!-- Search Response Chart -->
|
||||
<rect x="565" y="160" width="320" height="200" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<text x="585" y="185" fill="#94a3b8" font-size="11" font-weight="600">Search Response Time</text>
|
||||
<!-- Bar chart -->
|
||||
<rect x="590" y="260" width="25" height="70" rx="3" fill="rgba(34,197,94,0.6)"/>
|
||||
<rect x="625" y="240" width="25" height="90" rx="3" fill="rgba(34,197,94,0.6)"/>
|
||||
<rect x="660" y="250" width="25" height="80" rx="3" fill="rgba(34,197,94,0.6)"/>
|
||||
<rect x="695" y="230" width="25" height="100" rx="3" fill="rgba(34,197,94,0.6)"/>
|
||||
<rect x="730" y="245" width="25" height="85" rx="3" fill="rgba(34,197,94,0.6)"/>
|
||||
<rect x="765" y="255" width="25" height="75" rx="3" fill="rgba(34,197,94,0.6)"/>
|
||||
<rect x="800" y="235" width="25" height="95" rx="3" fill="rgba(34,197,94,0.6)"/>
|
||||
<rect x="835" y="248" width="25" height="82" rx="3" fill="rgba(34,197,94,0.6)"/>
|
||||
|
||||
<!-- Table Section -->
|
||||
<rect x="20" y="375" width="865" height="135" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<text x="40" y="400" fill="#94a3b8" font-size="11" font-weight="600">Latest 10 Checks</text>
|
||||
|
||||
<!-- Table header -->
|
||||
<rect x="35" y="410" width="835" height="22" fill="#0f172a" rx="4"/>
|
||||
<text x="55" y="425" fill="#64748b" font-size="8" font-weight="600">TIMESTAMP</text>
|
||||
<text x="200" y="425" fill="#64748b" font-size="8" font-weight="600">HTTP</text>
|
||||
<text x="280" y="425" fill="#64748b" font-size="8" font-weight="600">LATENCY</text>
|
||||
<text x="370" y="425" fill="#64748b" font-size="8" font-weight="600">DNS</text>
|
||||
<text x="450" y="425" fill="#64748b" font-size="8" font-weight="600">SSL</text>
|
||||
<text x="540" y="425" fill="#64748b" font-size="8" font-weight="600">SEARCH</text>
|
||||
<text x="640" y="425" fill="#64748b" font-size="8" font-weight="600">STATUS</text>
|
||||
|
||||
<!-- Table row 1 -->
|
||||
<text x="55" y="445" fill="#94a3b8" font-size="8">2026-07-27 15:00:12</text>
|
||||
<text x="200" y="445" fill="#e2e8f0" font-size="8">200</text>
|
||||
<text x="280" y="445" fill="#e2e8f0" font-size="8">142ms</text>
|
||||
<text x="370" y="445" fill="#e2e8f0" font-size="8">23ms</text>
|
||||
<text x="450" y="445" fill="#22c55e" font-size="8">47d</text>
|
||||
<text x="540" y="445" fill="#e2e8f0" font-size="8">312ms</text>
|
||||
<rect x="640" y="435" width="38" height="14" rx="7" fill="#0d3329"/>
|
||||
<text x="659" y="445" text-anchor="middle" fill="#22c55e" font-size="7" font-weight="600">UP</text>
|
||||
|
||||
<!-- Table row 2 -->
|
||||
<text x="55" y="462" fill="#94a3b8" font-size="8">2026-07-27 14:59:12</text>
|
||||
<text x="200" y="462" fill="#e2e8f0" font-size="8">200</text>
|
||||
<text x="280" y="462" fill="#e2e8f0" font-size="8">138ms</text>
|
||||
<text x="370" y="462" fill="#e2e8f0" font-size="8">21ms</text>
|
||||
<text x="450" y="462" fill="#22c55e" font-size="8">47d</text>
|
||||
<text x="540" y="462" fill="#e2e8f0" font-size="8">298ms</text>
|
||||
<rect x="640" y="452" width="38" height="14" rx="7" fill="#0d3329"/>
|
||||
<text x="659" y="462" text-anchor="middle" fill="#22c55e" font-size="7" font-weight="600">UP</text>
|
||||
|
||||
<!-- Table row 3 -->
|
||||
<text x="55" y="479" fill="#94a3b8" font-size="8">2026-07-27 14:58:12</text>
|
||||
<text x="200" y="479" fill="#e2e8f0" font-size="8">200</text>
|
||||
<text x="280" y="479" fill="#e2e8f0" font-size="8">155ms</text>
|
||||
<text x="370" y="479" fill="#e2e8f0" font-size="8">25ms</text>
|
||||
<text x="450" y="479" fill="#22c55e" font-size="8">47d</text>
|
||||
<text x="540" y="479" fill="#e2e8f0" font-size="8">341ms</text>
|
||||
<rect x="640" y="469" width="38" height="14" rx="7" fill="#0d3329"/>
|
||||
<text x="659" y="479" text-anchor="middle" fill="#22c55e" font-size="7" font-weight="600">UP</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.8 KiB |
@@ -0,0 +1,37 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 300" font-family="Consolas, Monaco, monospace">
|
||||
<defs>
|
||||
<linearGradient id="tbg" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1a1b26"/>
|
||||
<stop offset="100%" style="stop-color:#16161e"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Terminal background -->
|
||||
<rect width="700" height="300" fill="url(#tbg)" rx="10"/>
|
||||
<rect x="0" y="0" width="700" height="30" fill="#24283b" rx="10"/>
|
||||
<rect x="0" y="15" width="700" height="15" fill="#24283b"/>
|
||||
|
||||
<!-- Terminal buttons -->
|
||||
<circle cx="20" cy="15" r="6" fill="#f7768e"/>
|
||||
<circle cx="40" cy="15" r="6" fill="#e0af68"/>
|
||||
<circle cx="60" cy="15" r="6" fill="#9ece6a"/>
|
||||
<text x="350" y="19" text-anchor="middle" fill="#565f89" font-size="10">monitor.py — Terminal</text>
|
||||
|
||||
<!-- Terminal content -->
|
||||
<text x="15" y="55" fill="#9ece6a" font-size="11">$ python monitor.py --interval 60</text>
|
||||
|
||||
<text x="15" y="80" fill="#565f89" font-size="10">============================================================</text>
|
||||
<text x="15" y="95" fill="#7aa2f7" font-size="10">Mithal.space Monitor started</text>
|
||||
<text x="15" y="110" fill="#94a3b8" font-size="10">Target URL : https://mithal.space</text>
|
||||
<text x="15" y="125" fill="#94a3b8" font-size="10">Check interval : 60 seconds</text>
|
||||
<text x="15" y="140" fill="#94a3b8" font-size="10">Max records : 1440</text>
|
||||
<text x="15" y="155" fill="#94a3b8" font-size="10">Metrics file : metrics.json</text>
|
||||
<text x="15" y="170" fill="#565f89" font-size="10">============================================================</text>
|
||||
|
||||
<text x="15" y="195" fill="#9ece6a" font-size="10">✓ status=200 latency=142ms dns=23ms ssl_days=47 search=312ms</text>
|
||||
<text x="15" y="215" fill="#9ece6a" font-size="10">✓ status=200 latency=138ms dns=21ms ssl_days=47 search=298ms</text>
|
||||
<text x="15" y="235" fill="#9ece6a" font-size="10">✓ status=200 latency=155ms dns=25ms ssl_days=47 search=341ms</text>
|
||||
|
||||
<text x="15" y="260" fill="#bb9af7" font-size="10">[2026-07-27 15:00:12] INFO ✓ status=200 latency=142ms</text>
|
||||
<text x="15" y="278" fill="#73daca" font-size="10">█</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,423 @@
|
||||
/* =========================================================================
|
||||
Mithal.space Monitor — Dashboard JavaScript
|
||||
========================================================================= */
|
||||
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Configuration
|
||||
// -----------------------------------------------------------------------
|
||||
const METRICS_URL = "metrics.json";
|
||||
const REFRESH_INTERVAL = 30; // seconds
|
||||
const CHART_MAX_POINTS = 60; // last hour (60 × 60s)
|
||||
const LAST_HOUR_CHECKS = 60;
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// State
|
||||
// -----------------------------------------------------------------------
|
||||
let countdownValue = REFRESH_INTERVAL;
|
||||
let countdownTimer = null;
|
||||
let metricsData = [];
|
||||
let latencyChart = null;
|
||||
let searchChart = null;
|
||||
let dnsChart = null;
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// DOM References
|
||||
// -----------------------------------------------------------------------
|
||||
const $ = (sel) => document.querySelector(sel);
|
||||
const $$ = (sel) => document.querySelectorAll(sel);
|
||||
|
||||
const els = {
|
||||
loading: $("#loadingIndicator"),
|
||||
currentStatus: $("#currentStatus"),
|
||||
statusIndicator: $("#statusIndicator"),
|
||||
currentLatency: $("#currentLatency"),
|
||||
currentDns: $("#currentDns"),
|
||||
currentSsl: $("#currentSsl"),
|
||||
currentSearch: $("#currentSearch"),
|
||||
uptimePercent: $("#uptimePercent"),
|
||||
countdown: $("#countdown"),
|
||||
refreshBtn: $("#refreshBtn"),
|
||||
themeToggle: $("#themeToggle"),
|
||||
exportCsv: $("#exportCsv"),
|
||||
metricsBody: $("#metricsBody"),
|
||||
};
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Theme
|
||||
// -----------------------------------------------------------------------
|
||||
function loadTheme() {
|
||||
const saved = localStorage.getItem("mithal-theme");
|
||||
if (saved) {
|
||||
document.documentElement.setAttribute("data-theme", saved);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
const current = document.documentElement.getAttribute("data-theme");
|
||||
const next = current === "dark" ? "light" : "dark";
|
||||
document.documentElement.setAttribute("data-theme", next);
|
||||
localStorage.setItem("mithal-theme", next);
|
||||
updateChartColors();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Chart Colour Helpers
|
||||
// -----------------------------------------------------------------------
|
||||
function getThemeColors() {
|
||||
const style = getComputedStyle(document.documentElement);
|
||||
return {
|
||||
line: style.getPropertyValue("--chart-line").trim(),
|
||||
fill: style.getPropertyValue("--chart-fill").trim(),
|
||||
text: style.getPropertyValue("--text-secondary").trim(),
|
||||
grid: style.getPropertyValue("--border-color").trim(),
|
||||
};
|
||||
}
|
||||
|
||||
function updateChartColors() {
|
||||
const c = getThemeColors();
|
||||
[latencyChart, searchChart, dnsChart].forEach((chart) => {
|
||||
if (!chart) return;
|
||||
chart.options.scales.x.ticks.color = c.text;
|
||||
chart.options.scales.y.ticks.color = c.text;
|
||||
chart.options.scales.x.grid.color = c.grid;
|
||||
chart.options.scales.y.grid.color = c.grid;
|
||||
if (chart.data.datasets[0]) {
|
||||
chart.data.datasets[0].borderColor = c.line;
|
||||
chart.data.datasets[0].backgroundColor = c.fill;
|
||||
}
|
||||
chart.update("none");
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Fetch Metrics
|
||||
// -----------------------------------------------------------------------
|
||||
async function fetchMetrics() {
|
||||
try {
|
||||
els.loading.classList.add("active");
|
||||
const resp = await fetch(METRICS_URL + "?t=" + Date.now());
|
||||
if (!resp.ok) throw new Error("HTTP " + resp.status);
|
||||
metricsData = await resp.json();
|
||||
} catch (err) {
|
||||
console.warn("Failed to load metrics:", err);
|
||||
metricsData = [];
|
||||
} finally {
|
||||
els.loading.classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Update Cards
|
||||
// -----------------------------------------------------------------------
|
||||
function updateCards() {
|
||||
if (metricsData.length === 0) {
|
||||
els.currentStatus.textContent = "--";
|
||||
els.currentLatency.textContent = "--";
|
||||
els.currentDns.textContent = "--";
|
||||
els.currentSsl.textContent = "--";
|
||||
els.currentSearch.textContent = "--";
|
||||
els.uptimePercent.textContent = "--";
|
||||
return;
|
||||
}
|
||||
|
||||
const latest = metricsData[metricsData.length - 1];
|
||||
|
||||
// Status
|
||||
if (latest.uptime) {
|
||||
els.currentStatus.textContent = "UP";
|
||||
els.currentStatus.className = "card-value status-up";
|
||||
els.statusIndicator.style.background = "var(--green)";
|
||||
els.currentStatus.classList.add("card-status-pulse");
|
||||
} else {
|
||||
els.currentStatus.textContent = "DOWN";
|
||||
els.currentStatus.className = "card-value status-down";
|
||||
els.statusIndicator.style.background = "var(--red)";
|
||||
els.currentStatus.classList.remove("card-status-pulse");
|
||||
}
|
||||
|
||||
// Values
|
||||
els.currentLatency.textContent = latest.latency_ms != null ? Math.round(latest.latency_ms) : "--";
|
||||
els.currentDns.textContent = latest.dns_ms != null ? Math.round(latest.dns_ms) : "--";
|
||||
els.currentSearch.textContent = latest.search_ms != null ? Math.round(latest.search_ms) : "--";
|
||||
|
||||
// SSL
|
||||
if (latest.ssl && latest.ssl.days_remaining != null) {
|
||||
const days = latest.ssl.days_remaining;
|
||||
els.currentSsl.textContent = days;
|
||||
if (days <= 14) {
|
||||
els.currentSsl.className = "card-value status-down";
|
||||
} else if (days <= 30) {
|
||||
els.currentSsl.className = "card-value status-warn";
|
||||
} else {
|
||||
els.currentSsl.className = "card-value";
|
||||
}
|
||||
} else {
|
||||
els.currentSsl.textContent = "--";
|
||||
els.currentSsl.className = "card-value";
|
||||
}
|
||||
|
||||
// Uptime %
|
||||
const upChecks = metricsData.filter((m) => m.uptime).length;
|
||||
const uptime = ((upChecks / metricsData.length) * 100).toFixed(2);
|
||||
els.uptimePercent.textContent = uptime;
|
||||
if (parseFloat(uptime) >= 99.5) {
|
||||
els.uptimePercent.className = "card-value status-up";
|
||||
} else if (parseFloat(uptime) >= 95) {
|
||||
els.uptimePercent.className = "card-value status-warn";
|
||||
} else {
|
||||
els.uptimePercent.className = "card-value status-down";
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Update Charts
|
||||
// -----------------------------------------------------------------------
|
||||
function updateCharts() {
|
||||
const c = getThemeColors();
|
||||
|
||||
// Last hour of data (approx 60 checks at 60s interval)
|
||||
const lastHour = metricsData.slice(-LAST_HOUR_CHECKS);
|
||||
|
||||
const labels = lastHour.map((m) => {
|
||||
const d = new Date(m.timestamp);
|
||||
return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
|
||||
});
|
||||
|
||||
const latencyData = lastHour.map((m) => (m.latency_ms != null ? Math.round(m.latency_ms) : null));
|
||||
const searchData = lastHour.map((m) => (m.search_ms != null ? Math.round(m.search_ms) : null));
|
||||
const dnsData = lastHour.map((m) => (m.dns_ms != null ? Math.round(m.dns_ms) : null));
|
||||
|
||||
// --- Latency Chart ---
|
||||
if (latencyChart) latencyChart.destroy();
|
||||
latencyChart = new Chart($("#latencyChart"), {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Latency (ms)",
|
||||
data: latencyData,
|
||||
borderColor: c.line,
|
||||
backgroundColor: c.fill,
|
||||
fill: true,
|
||||
tension: 0.35,
|
||||
pointRadius: 2,
|
||||
borderWidth: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: chartOptions(c, "ms"),
|
||||
});
|
||||
|
||||
// --- Search Chart ---
|
||||
if (searchChart) searchChart.destroy();
|
||||
searchChart = new Chart($("#searchChart"), {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Search (ms)",
|
||||
data: searchData,
|
||||
borderColor: "#22c55e",
|
||||
backgroundColor: "rgba(34,197,94,0.1)",
|
||||
fill: true,
|
||||
tension: 0.35,
|
||||
pointRadius: 2,
|
||||
borderWidth: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: chartOptions(c, "ms"),
|
||||
});
|
||||
|
||||
// --- DNS Chart ---
|
||||
if (dnsChart) dnsChart.destroy();
|
||||
dnsChart = new Chart($("#dnsChart"), {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "DNS (ms)",
|
||||
data: dnsData,
|
||||
backgroundColor: "rgba(234,179,8,0.6)",
|
||||
borderColor: "#eab308",
|
||||
borderWidth: 1,
|
||||
borderRadius: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: chartOptions(c, "ms"),
|
||||
});
|
||||
}
|
||||
|
||||
function chartOptions(c, unit) {
|
||||
return {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
interaction: { intersect: false, mode: "index" },
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: "rgba(0,0,0,0.8)",
|
||||
titleColor: "#fff",
|
||||
bodyColor: "#fff",
|
||||
padding: 10,
|
||||
cornerRadius: 8,
|
||||
callbacks: {
|
||||
label: function (ctx) {
|
||||
return ctx.parsed.y != null ? ctx.parsed.y + " " + unit : "N/A";
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: { color: c.text, maxTicksLimit: 8, font: { size: 11 } },
|
||||
grid: { color: c.grid },
|
||||
},
|
||||
y: {
|
||||
ticks: { color: c.text, font: { size: 11 } },
|
||||
grid: { color: c.grid },
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Update Table
|
||||
// -----------------------------------------------------------------------
|
||||
function updateTable() {
|
||||
const last10 = metricsData.slice(-10).reverse();
|
||||
|
||||
if (last10.length === 0) {
|
||||
els.metricsBody.innerHTML =
|
||||
'<tr><td colspan="7" class="no-data">No data available</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
els.metricsBody.innerHTML = last10
|
||||
.map((m) => {
|
||||
const ts = new Date(m.timestamp).toLocaleString();
|
||||
const sslDays = m.ssl && m.ssl.days_remaining != null ? m.ssl.days_remaining : "--";
|
||||
const searchMs = m.search_ms != null ? Math.round(m.search_ms) : "--";
|
||||
|
||||
let statusClass = "status-down";
|
||||
let statusText = "DOWN";
|
||||
if (m.uptime) {
|
||||
if (m.status_code >= 300) {
|
||||
statusClass = "status-warn";
|
||||
statusText = "WARN";
|
||||
} else {
|
||||
statusClass = "status-up";
|
||||
statusText = "UP";
|
||||
}
|
||||
}
|
||||
|
||||
return `<tr>
|
||||
<td>${ts}</td>
|
||||
<td>${m.status_code || "--"}</td>
|
||||
<td>${m.latency_ms != null ? Math.round(m.latency_ms) : "--"}</td>
|
||||
<td>${m.dns_ms != null ? Math.round(m.dns_ms) : "--"}</td>
|
||||
<td>${sslDays}</td>
|
||||
<td>${searchMs}</td>
|
||||
<td><span class="status-badge ${statusClass}">${statusText}</span></td>
|
||||
</tr>`;
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Countdown & Auto-Refresh
|
||||
// -----------------------------------------------------------------------
|
||||
function resetCountdown() {
|
||||
countdownValue = REFRESH_INTERVAL;
|
||||
els.countdown.textContent = countdownValue + "s";
|
||||
}
|
||||
|
||||
async function refreshAll() {
|
||||
await fetchMetrics();
|
||||
updateCards();
|
||||
updateCharts();
|
||||
updateTable();
|
||||
resetCountdown();
|
||||
}
|
||||
|
||||
function startCountdown() {
|
||||
if (countdownTimer) clearInterval(countdownTimer);
|
||||
countdownTimer = setInterval(() => {
|
||||
countdownValue--;
|
||||
if (countdownValue <= 0) {
|
||||
refreshAll();
|
||||
} else {
|
||||
els.countdown.textContent = countdownValue + "s";
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// CSV Export
|
||||
// -----------------------------------------------------------------------
|
||||
function exportCsv() {
|
||||
if (metricsData.length === 0) return;
|
||||
|
||||
const headers = [
|
||||
"Timestamp",
|
||||
"Status Code",
|
||||
"Uptime",
|
||||
"Latency (ms)",
|
||||
"DNS (ms)",
|
||||
"SSL Valid",
|
||||
"SSL Expires",
|
||||
"SSL Days Remaining",
|
||||
"Search (ms)",
|
||||
];
|
||||
|
||||
const rows = metricsData.map((m) => [
|
||||
m.timestamp,
|
||||
m.status_code,
|
||||
m.uptime,
|
||||
m.latency_ms,
|
||||
m.dns_ms,
|
||||
m.ssl ? m.ssl.valid : "",
|
||||
m.ssl ? m.ssl.expires : "",
|
||||
m.ssl ? m.ssl.days_remaining : "",
|
||||
m.search_ms,
|
||||
]);
|
||||
|
||||
const csvContent = [headers, ...rows].map((r) => r.join(",")).join("\n");
|
||||
const blob = new Blob(["\uFEFF" + csvContent], { type: "text/csv;charset=utf-8;" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "mithal_monitor_" + new Date().toISOString().slice(0, 10) + ".csv";
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Init
|
||||
// -----------------------------------------------------------------------
|
||||
function init() {
|
||||
loadTheme();
|
||||
refreshAll();
|
||||
startCountdown();
|
||||
|
||||
els.refreshBtn.addEventListener("click", () => refreshAll());
|
||||
els.themeToggle.addEventListener("click", toggleTheme);
|
||||
els.exportCsv.addEventListener("click", exportCsv);
|
||||
}
|
||||
|
||||
// Start when DOM is ready
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,428 @@
|
||||
/* =========================================================================
|
||||
Mithal.space Monitor — Dashboard Stylesheet
|
||||
========================================================================= */
|
||||
|
||||
/* ---------- Reset & Base ---------- */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Light theme */
|
||||
--bg-primary: #f0f2f5;
|
||||
--bg-secondary: #ffffff;
|
||||
--bg-card: #ffffff;
|
||||
--text-primary: #1a1a2e;
|
||||
--text-secondary: #555770;
|
||||
--text-muted: #8e8ea0;
|
||||
--border-color: #e0e0e6;
|
||||
--accent: #4361ee;
|
||||
--accent-light: #e8ecff;
|
||||
--green: #22c55e;
|
||||
--green-bg: #dcfce7;
|
||||
--yellow: #eab308;
|
||||
--yellow-bg: #fef9c3;
|
||||
--red: #ef4444;
|
||||
--red-bg: #fee2e2;
|
||||
--chart-line: #4361ee;
|
||||
--chart-fill: rgba(67, 97, 238, 0.12);
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
--radius: 12px;
|
||||
--radius-sm: 8px;
|
||||
--transition: 0.25s ease;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg-primary: #0f1117;
|
||||
--bg-secondary: #181b24;
|
||||
--bg-card: #1e2130;
|
||||
--text-primary: #e4e4ed;
|
||||
--text-secondary: #a0a0b8;
|
||||
--text-muted: #6b6b80;
|
||||
--border-color: #2a2d3a;
|
||||
--accent: #6c8cff;
|
||||
--accent-light: #1e2740;
|
||||
--green: #34d399;
|
||||
--green-bg: #0d3329;
|
||||
--yellow: #facc15;
|
||||
--yellow-bg: #3b3508;
|
||||
--red: #f87171;
|
||||
--red-bg: #3b1212;
|
||||
--chart-line: #6c8cff;
|
||||
--chart-fill: rgba(108, 140, 255, 0.10);
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
}
|
||||
|
||||
/* ---------- Dashboard Container ---------- */
|
||||
.dashboard {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* ---------- Header ---------- */
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding: 18px 24px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-bottom: 24px;
|
||||
transition: background var(--transition), border var(--transition);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Theme Toggle */
|
||||
.theme-toggle {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-primary);
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background: var(--accent-light);
|
||||
}
|
||||
|
||||
.icon-moon { display: none; }
|
||||
[data-theme="dark"] .icon-sun { display: none; }
|
||||
[data-theme="dark"] .icon-moon { display: inline; }
|
||||
|
||||
/* Refresh Info */
|
||||
.refresh-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-muted);
|
||||
min-width: 28px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Export Button */
|
||||
.export-btn {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 6px 14px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-primary);
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.export-btn:hover {
|
||||
background: var(--accent-light);
|
||||
}
|
||||
|
||||
/* ---------- Loading Indicator ---------- */
|
||||
.loading-indicator {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 32px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.loading-indicator.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 3px solid var(--border-color);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ---------- Status Cards ---------- */
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: background var(--transition), border var(--transition),
|
||||
box-shadow var(--transition);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 1.65rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.card-unit {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.card-indicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
/* Status animation */
|
||||
.card-status-pulse {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
/* ---------- Charts ---------- */
|
||||
.charts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: background var(--transition), border var(--transition);
|
||||
}
|
||||
|
||||
.chart-container h3 {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ---------- Table ---------- */
|
||||
.table-section {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: background var(--transition), border var(--transition);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.table-section h3 {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
thead th {
|
||||
text-align: left;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: var(--accent-light);
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
padding: 24px 0 !important;
|
||||
}
|
||||
|
||||
/* Status badge */
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.status-up {
|
||||
background: var(--green-bg);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.status-down {
|
||||
background: var(--red-bg);
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.status-warn {
|
||||
background: var(--yellow-bg);
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
/* ---------- Responsive ---------- */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cards {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.charts {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
thead th, tbody td {
|
||||
padding: 8px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
Reference in New Issue
Block a user