231 أسطر
3.9 KiB
JavaScript
231 أسطر
3.9 KiB
JavaScript
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();
|
|
|