Complete Task 5: Mithal monitoring dashboard

q5-mithal-monitor/dashboard/app.js

@@ -0,0 +1,120 @@
+async function loadData() {
+
+    try {
+
+        const response = await fetch("data.json?t=" + Date.now());
+        const data = await response.json();
+
+        if (data.length === 0) {
+            return;
+        }
+
+        const latest = data[data.length - 1];
+
+        const upCount = data.filter(item => item.uptime === "UP").length;
+        const uptimePercentage = ((upCount / data.length) * 100).toFixed(1);
+
+        document.getElementById("uptime").innerText =
+            uptimePercentage + "%";
+
+        document.getElementById("latency").innerText =
+            (latest.latency_ms ?? "-") + " ms";
+
+        document.getElementById("dns").innerText =
+            (latest.dns_ms ?? "-") + " ms";
+
+        if (latest.ssl && latest.ssl.valid) {
+
+            document.getElementById("ssl").innerHTML = `
+                <strong style="color:green;">Valid</strong><br>
+                <small>${latest.ssl.expires}</small>
+            `;
+
+        } else {
+
+            document.getElementById("ssl").innerHTML = `
+                <strong style="color:red;">Invalid</strong>
+            `;
+
+        }
+
+        const table = document.getElementById("historyTable");
+        table.innerHTML = "";
+
+        data
+            .slice()
+            .reverse()
+            .forEach(item => {
+
+                table.innerHTML += `
+                    <tr>
+                        <td>${item.timestamp}</td>
+                        <td>${item.uptime}</td>
+                        <td>${item.latency_ms ?? "-"}</td>
+                        <td>${item.dns_ms ?? "-"}</td>
+                        <td>${item.ssl && item.ssl.valid ? "Valid" : "Invalid"}</td>
+                    </tr>
+                `;
+
+            });
+
+
+        const labels = data.map(item => item.timestamp);
+        const latency = data.map(item => item.latency_ms);
+
+        if (!window.latencyChart) {
+
+            window.latencyChart = new Chart(
+                document.getElementById("latencyChart"),
+                {
+                    type: "line",
+
+                    data: {
+                        labels: labels,
+                        datasets: [{
+                            label: "Latency (ms)",
+                            data: latency,
+                            borderColor: "#0b7dda",
+                            backgroundColor: "rgba(11,125,218,0.15)",
+                            fill: true,
+                            tension: 0.3
+                        }]
+                    },
+
+                    options: {
+                        responsive: true,
+                        plugins: {
+                            legend: {
+                                display: true
+                            }
+                        },
+                        scales: {
+                            y: {
+                                beginAtZero: false
+                            }
+                        }
+                    }
+                }
+            );
+
+        } else {
+
+            window.latencyChart.data.labels = labels;
+            window.latencyChart.data.datasets[0].data = latency;
+            window.latencyChart.update();
+
+        }
+
+    }
+
+    catch (error) {
+
+        console.error(error);
+
+    }
+
+}
+
+loadData();
+
+setInterval(loadData, 60000);