noraaan/ghaymah-exam-noran-sre
1
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

Initial commit

تصفح المصدر
هذا الالتزام موجود في:
Noran-Salm
2026-07-27 03:18:04 +03:00
التزام bc5489289e
17 ملفات معدلة مع 421 إضافات و0 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

4
.gitignore مباع Normal file
عرض الملف

@@ -0,0 +1,4 @@
.venv/
__pycache__/
*.pyc
monitoring-data.json

0
README.md Normal file
عرض الملف

0
common-mortakaz/integration-1.md Normal file
عرض الملف

0
common-mortakaz/integration-2.md Normal file
عرض الملف

0
common-qabilah/qabilah-profile.txt Normal file
عرض الملف

16
q1-deploy-monitor/Dockerfile Normal file
عرض الملف

@@ -0,0 +1,16 @@
FROM python:3.11-slim
ENV PYTHONDONTWRITEBYTECODE=1
ENV PYTHONUNBUFFERED=1
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
EXPOSE 5000
CMD ["python", "app.py"]

38
q1-deploy-monitor/app.py Normal file
عرض الملف

@@ -0,0 +1,38 @@
from flask import Flask, jsonify
import time
app = Flask(__name__)
request_count = 0
start_time = time.time()
@app.route("/")
def home():
global request_count
request_count += 1
return jsonify({
"message": "Hello from Ghaymah!",
"timestamp": time.time()
})
@app.route("/health")
def health():
global request_count
request_count += 1
return jsonify({
"status": "healthy"
})
@app.route("/metrics")
def metrics():
return jsonify({
"request_count": request_count,
"uptime": round(time.time() - start_time, 2)
})
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)

293
q1-deploy-monitor/dashboard.html Normal file
عرض الملف

@@ -0,0 +1,293 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Monitoring Dashboard</title>
<!-- Chart.js (lightweight, cached) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f0f2f5;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
font-weight: 300;
color: #1a1a2e;
margin-bottom: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.card {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: 0.2s;
}
.card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.card-label {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6c757d;
margin-bottom: 6px;
}
.card-value {
font-size: 2rem;
font-weight: 600;
}
.status-up { color: #28a745; }
.status-down { color: #dc3545; }
.chart-container {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
margin-bottom: 20px;
height: 300px;
}
.table-container {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
th {
text-align: left;
padding: 10px 8px;
border-bottom: 2px solid #dee2e6;
color: #495057;
}
td {
padding: 8px;
border-bottom: 1px solid #e9ecef;
}
.badge {
display: inline-block;
padding: 2px 10px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.badge-up { background: #d4edda; color: #155724; }
.badge-down { background: #f8d7da; color: #721c24; }
.text-muted {
color: #6c757d;
font-size: 0.85rem;
}
@media (max-width: 600px) {
.grid {
grid-template-columns: 1fr 1fr;
}
.card-value {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1>📊 API Monitoring Dashboard</h1>
<!-- Summary Cards -->
<div class="grid" id="summary">
<div class="card">
<div class="card-label">Uptime (24h)</div>
<div class="card-value" id="uptime">--</div>
</div>
<div class="card">
<div class="card-label">Current Status</div>
<div class="card-value" id="status">--</div>
</div>
<div class="card">
<div class="card-label">Last Latency</div>
<div class="card-value" id="last-latency">--</div>
<div class="text-muted">milliseconds</div>
</div>
<div class="card">
<div class="card-label">Total Requests</div>
<div class="card-value" id="total-requests">--</div>
</div>
</div>
<!-- Latency Chart -->
<div class="chart-container">
<canvas id="latencyChart"></canvas>
</div>
<!-- Recent Checks Table -->
<div class="table-container">
<h3 style="margin-bottom: 10px; font-weight: 400;">Recent Checks (last 10)</h3>
<table>
<thead>
<tr>
<th>Timestamp</th>
<th>Status</th>
<th>Latency (ms)</th>
<th>Request Count</th>
</tr>
</thead>
<tbody id="checks-body">
<tr><td colspan="4" class="text-muted">Loading data…</td></tr>
</tbody>
</table>
</div>
</div>
<script>
let chart = null;
// Compute uptime for the last 24 hours
function computeUptime(data) {
if (!data || data.length === 0) return 0;
const now = new Date();
const last24h = data.filter(entry => {
const ts = new Date(entry.timestamp);
return (now - ts) <= 24 * 60 * 60 * 1000;
});
if (last24h.length === 0) return 0;
const up = last24h.filter(e => e.status === 'up').length;
return (up / last24h.length) * 100;
}
// Update the dashboard with new data
function updateDashboard(data) {
if (!data || data.length === 0) {
document.getElementById('uptime').textContent = '--';
document.getElementById('status').innerHTML = '--';
document.getElementById('last-latency').textContent = '--';
document.getElementById('total-requests').textContent = '--';
document.getElementById('checks-body').innerHTML = '<tr><td colspan="4" class="text-muted">No data</td></tr>';
return;
}
// Latest entry
const latest = data[data.length - 1];
// Status with badge
const statusEl = document.getElementById('status');
if (latest.status === 'up') {
statusEl.innerHTML = '<span class="status-up">🟢 UP</span>';
} else {
statusEl.innerHTML = '<span class="status-down">🔴 DOWN</span>';
}
document.getElementById('last-latency').textContent = latest.latency >= 0 ? latest.latency : 'N/A';
document.getElementById('total-requests').textContent = latest.request_count || 0;
// Uptime
const uptime = computeUptime(data);
document.getElementById('uptime').textContent = uptime.toFixed(2) + '%';
// Update table (last 10, newest first)
const tbody = document.getElementById('checks-body');
tbody.innerHTML = '';
const last10 = data.slice(-10).reverse();
last10.forEach(entry => {
const row = document.createElement('tr');
const statusBadge = entry.status === 'up'
? '<span class="badge badge-up">UP</span>'
: '<span class="badge badge-down">DOWN</span>';
row.innerHTML = `
<td>${entry.timestamp}</td>
<td>${statusBadge}</td>
<td>${entry.latency >= 0 ? entry.latency : '—'}</td>
<td>${entry.request_count || '—'}</td>
`;
tbody.appendChild(row);
});
// Update chart (use last 60 entries, or all if less)
const chartData = data.slice(-60);
const labels = chartData.map(e => {
const d = new Date(e.timestamp);
return d.toLocaleTimeString();
});
const latencies = chartData.map(e => e.latency >= 0 ? e.latency : 0);
if (chart) {
chart.data.labels = labels;
chart.data.datasets[0].data = latencies;
chart.update();
} else {
const ctx = document.getElementById('latencyChart').getContext('2d');
chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Latency (ms)',
data: latencies,
borderColor: '#007bff',
backgroundColor: 'rgba(0,123,255,0.1)',
tension: 0.2,
fill: true,
pointRadius: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false }
},
scales: {
x: { grid: { display: false } },
y: { beginAtZero: true, grid: { color: '#f0f0f0' } }
}
}
});
}
}
// Fetch the JSON data
async function fetchData() {
try {
const response = await fetch('monitoring-data.json');
if (!response.ok) throw new Error('Network error');
const data = await response.json();
// Ensure data is an array
if (!Array.isArray(data)) {
console.warn('Data is not an array; converting to empty array');
return [];
}
return data;
} catch (error) {
console.error('Failed to fetch data:', error);
return [];
}
}
// Refresh loop
async function refresh() {
const data = await fetchData();
updateDashboard(data);
}
// Initial load and periodic refresh every 10 seconds
refresh();
setInterval(refresh, 10000);
</script>
</body>
</html>

38
q1-deploy-monitor/health-check.sh Normal file
عرض الملف

@@ -0,0 +1,38 @@
#!/bin/bash
URL="http://localhost:5000"
REQUESTS=0
while true
do
REQUESTS=$((REQUESTS+1))
RESPONSE=$(curl -o /dev/null -s -w "%{http_code} %{time_total}" "$URL/health")
STATUS_CODE=$(echo "$RESPONSE" | cut -d' ' -f1)
RESPONSE_TIME=$(echo "$RESPONSE" | cut -d' ' -f2)
if [ "$STATUS_CODE" = "200" ]
then
STATUS="UP"
else
STATUS="DOWN"
fi
TIMESTAMP=$(date -Iseconds)
LATENCY_MS=$(awk "BEGIN {print $RESPONSE_TIME * 1000}")
python update_monitor.py \
"$TIMESTAMP" \
"$(echo $STATUS | tr '[:upper:]' '[:lower:]')" \
"$LATENCY_MS" \
"$REQUESTS"
echo "Status : $STATUS"
echo "Latency : ${LATENCY_MS} ms"
echo "Requests : $REQUESTS"
echo "-------------------------"
sleep 30
done

1
q1-deploy-monitor/requirements.txt Normal file
عرض الملف

@@ -0,0 +1 @@
Flask==2.3.3

31
q1-deploy-monitor/update_monitor.py Normal file
عرض الملف

@@ -0,0 +1,31 @@
import json
import os
import sys
FILE = "monitoring-data.json"
MAX_ENTRIES = 100
entry = {
"timestamp": sys.argv[1],
"status": sys.argv[2],
"latency": float(sys.argv[3]),
"request_count": int(sys.argv[4])
}
if os.path.exists(FILE):
try:
with open(FILE, "r") as f:
data = json.load(f)
if not isinstance(data, list):
data = []
except Exception:
data = []
else:
data = []
data.append(entry)
data = data[-MAX_ENTRIES:]
with open(FILE, "w") as f:
json.dump(data, f, indent=2)

0
q2-postmortem/postmortem-report.md Normal file
عرض الملف

0
q3-cicd/workflow.yml Normal file
عرض الملف

0
q4-scalability/architecture.png Normal file
عرض الملف

0
q4-scalability/calculations.md Normal file
عرض الملف

0
q5-mithal-monitor/dashboard.html Normal file
عرض الملف

0
q5-mithal-monitor/monitor.py Normal file
عرض الملف