adding task files

q5-mithal-monitor/app.js

@@ -0,0 +1,230 @@
+let chart = null;
+
+async function loadData() {
+
+    try {
+
+        const response = await fetch("../metrics.csv?t=" + Date.now());
+
+        const text = await response.text();
+
+        let rows = text.trim().split("\n");
+
+        if (rows.length <= 1) return;
+
+        // Remove CSV header
+        rows.shift();
+
+        const data = rows
+            .map(row => row.split(","))
+            .filter(row => row.length >= 7);
+
+        const history = document.getElementById("history");
+        history.innerHTML = "";
+
+        const now = new Date();
+
+        // ==========================
+        // Uptime (24h)
+        // ==========================
+
+        const last24 = data.filter(row => {
+
+            const t = new Date(row[0].replace(" ", "T"));
+
+            return (now - t) <= (24 * 60 * 60 * 1000);
+
+        });
+
+        const up = last24.filter(row => row[2] === "200").length;
+
+        const uptime =
+            last24.length === 0
+                ? 0
+                : ((up / last24.length) * 100).toFixed(2);
+
+        document.getElementById("uptime").textContent = uptime + "%";
+
+        // ==========================
+        // SSL Status
+        // ==========================
+
+        const latest = data[data.length - 1];
+
+        document.getElementById("ssl").textContent =
+            latest[5] + " Days Remaining";
+
+        // ==========================
+        // Chart
+        // ==========================
+
+        let labels = [];
+        let values = [];
+
+        data.forEach(row => {
+
+            const latency = parseFloat(row[1]);
+
+            // Ignore abnormal values
+            if (latency <= 500) {
+
+                labels.push(row[0].split(" ")[1]);
+
+                values.push(latency);
+
+            }
+
+        });
+
+        drawChart(labels, values);
+
+        // ==========================
+        // Last 10 Checks
+        // ==========================
+
+        data.slice(-10).reverse().forEach(row => {
+
+            const status = row[2] === "200";
+
+            history.innerHTML += `
+
+            <tr>
+
+                <td>${row[0]}</td>
+
+                <td class="${status ? "up" : "down"}">
+
+                    ${status ? "UP" : "DOWN"}
+
+                </td>
+
+                <td>${row[1]} ms</td>
+
+                <td>${row[3]} ms</td>
+
+                <td>${row[6]} ms</td>
+
+                <td>${row[5]} Days</td>
+
+            </tr>
+
+            `;
+
+        });
+
+    }
+
+    catch (err) {
+
+        console.error("Dashboard Error:", err);
+
+    }
+
+}
+
+function drawChart(labels, values) {
+
+    const canvas = document.getElementById("latencyChart");
+
+    if (!canvas) return;
+
+    if (chart) {
+
+        chart.destroy();
+
+    }
+
+    chart = new Chart(canvas, {
+
+        type: "line",
+
+        data: {
+
+            labels: labels,
+
+            datasets: [
+
+                {
+
+                    label: "Latency (ms)",
+
+                    data: values,
+
+                    borderColor: "#3498db",
+
+                    backgroundColor: "rgba(52,152,219,0.15)",
+
+                    borderWidth: 2,
+
+                    fill: true,
+
+                    tension: 0.3,
+
+                    pointRadius: 3,
+
+                    pointHoverRadius: 5
+
+                }
+
+            ]
+
+        },
+
+        options: {
+
+            responsive: true,
+
+            maintainAspectRatio: false,
+
+            animation: false,
+
+            plugins: {
+
+                legend: {
+
+                    display: true
+
+                }
+
+            },
+
+            scales: {
+
+                y: {
+
+                    min: 0,
+
+                    max: 250,
+
+                    title: {
+
+                        display: true,
+
+                        text: "Milliseconds"
+
+                    }
+
+                },
+
+                x: {
+
+                    title: {
+
+                        display: true,
+
+                        text: "Time"
+
+                    }
+
+                }
+
+            }
+
+        }
+
+    });
+
+}
+
+loadData();
+