intial commit

2026-07-28 13:34:58 +03:00
--- a/q1-deploy-monitor/Dockerfile
+++ b/q1-deploy-monitor/Dockerfile
@@ -0,0 +1,18 @@
+# Use a lightweight Node base image
+FROM node:18-alpine
+
+# Set the working directory inside the container
+WORKDIR /usr/src/app
+
+# Copy dependency definitions and install them
+COPY package*.json ./
+RUN npm install --production
+
+# Copy the application code
+COPY . .
+
+# Expose the API port
+EXPOSE 3000
+
+# Start the application
+CMD ["npm", "start"]
--- a/q1-deploy-monitor/dashboard.html
+++ b/q1-deploy-monitor/dashboard.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>API Metrics Dashboard</title>
+    <style>
+        body { 
+            font-family: system-ui, -apple-system, sans-serif; 
+            background: #f4f4f9; 
+            padding: 2rem; 
+            color: #333; 
+        }
+        .grid { 
+            display: grid; 
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
+            gap: 1.5rem; 
+            max-width: 800px; 
+            margin: 0 auto; 
+        }
+        .card { 
+            background: white; 
+            padding: 2rem; 
+            border-radius: 12px; 
+            box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
+            text-align: center; 
+        }
+        h2 { 
+            margin: 0 0 0.5rem; 
+            font-size: 1rem; 
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: #666; 
+        }
+        .value { 
+            font-size: 2.5rem; 
+            font-weight: bold; 
+            color: #111; 
+        }
+        .status-up { color: #10b981; }
+        .status-down { color: #ef4444; }
+    </style>
+</head>
+<body>
+    <div class="grid">
+        <div class="card">
+            <h2>System Status</h2>
+            <div id="status" class="value">Loading...</div>
+        </div>
+        <div class="card">
+            <h2>Avg Response Time</h2>
+            <div class="value"><span id="responseTime">0</span> ms</div>
+        </div>
+        <div class="card">
+            <h2>Dashboard Pings</h2>
+            <div class="value" id="reqCount">0</div>
+        </div>
+    </div>
+
+    <script>
+        // Ensure this matches your running API (local or deployed)
+        const API_URL = 'https://bebars-64f19cdda81b.hosted.ghaymah.systems/health'; 
+
+        // Variables stored in the browser's memory
+        let requestCount = 0;
+        let totalResponseTimeMs = 0;
+
+        async function fetchMetrics() {
+            const startTime = Date.now(); // 1. Start the timer
+
+            try {
+                const res = await fetch(API_URL);
+                if (!res.ok) throw new Error('API unreachable');
+                
+                const data = await res.json();
+                
+                const endTime = Date.now(); // 2. Stop the timer
+                const duration = endTime - startTime; // 3. Calculate how long it took
+                
+                //Do the math 
+                requestCount++;
+                totalResponseTimeMs += duration;
+                const avgResponseTime = Math.round(totalResponseTimeMs / requestCount);
+                
+                // Update the UI
+                const statusEl = document.getElementById('status');
+                statusEl.textContent = data.status;
+                statusEl.className = data.status === 'UP' ? 'value status-up' : 'value status-down';
+                
+                document.getElementById('responseTime').textContent = avgResponseTime;
+                document.getElementById('reqCount').textContent = requestCount;
+
+            } catch (err) {
+                const statusEl = document.getElementById('status');
+                statusEl.textContent = 'DOWN';
+                statusEl.className = 'value status-down';
+            }
+        }
+
+        // Fetch immediately, then poll every 5 seconds
+        fetchMetrics();
+        setInterval(fetchMetrics, 5000); 
+    </script>
+</body>
+</html>
--- a/q1-deploy-monitor/monitor.sh
+++ b/q1-deploy-monitor/monitor.sh
@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# Replace this with your actual deployed Ghaymah URL
+API_URL="https://bebars-64f19cdda81b.hosted.ghaymah.systems/health"
+
+echo "Starting monitoring for $API_URL..."
+echo "Press [CTRL+C] to stop."
+
+while true; do
+    TIMESTAMP=$(date +"%Y-%m-%d %H:%M:%S")
+    
+    # Fetch only the HTTP status code
+    HTTP_STATUS=$(curl -o /dev/null -s -w "%{http_code}" "$API_URL")
+    
+    if [ "$HTTP_STATUS" -eq 200 ]; then
+        echo "[$TIMESTAMP] ✅ Status: $HTTP_STATUS - App is HEALTHY"
+    else
+        echo "[$TIMESTAMP] ❌ Status: $HTTP_STATUS - App is DOWN or UNREACHABLE"
+    fi
+    
+    sleep 30
+done
--- a/q1-deploy-monitor/package.json
+++ b/q1-deploy-monitor/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "q1-deploy-monitor",
+  "version": "1.0.0",
+  "description": "",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.18.2"
+  }
+}
--- a/q1-deploy-monitor/server.js
+++ b/q1-deploy-monitor/server.js
@@ -0,0 +1,23 @@
+const express = require('express');
+const cors = require('cors');
+
+const app = express();
+const port = process.env.PORT || 3000;
+
+let requestCount = 0;
+let totalResponseTime = 0;
+
+// cors 
+app.use(cors());
+
+
+
+// The requested health endpoint
+app.get('/health', (req, res) => {
+    res.status(200).json({ status: 'UP', timestamp: new Date().toISOString() });
+});
+
+
+app.listen(port, () => {
+    console.log(`API running on port ${port}`);
+});