600 lines
17 KiB
JavaScript
600 lines
17 KiB
JavaScript
let clientsChart = null;
|
|
let commandsChart = null;
|
|
let countryMap = null;
|
|
let countriesLayer = null;
|
|
let countryCounts = {};
|
|
let maxCountryCount = 0;
|
|
let latestByCountry = {};
|
|
|
|
const GEOJSON_URL = "/vendor/geo-countries/countries.geojson";
|
|
|
|
if (typeof Chart !== "undefined") {
|
|
Chart.defaults.color = "#cbd5e1";
|
|
Chart.defaults.borderColor = "rgba(100, 116, 139, 0.25)";
|
|
Chart.defaults.font.family = "Inter, system-ui, sans-serif";
|
|
}
|
|
|
|
function initCharts() {
|
|
const clientsCtx = document.getElementById("clients-chart");
|
|
const commandsCtx = document.getElementById("commands-chart");
|
|
|
|
clientsChart = new Chart(clientsCtx, {
|
|
type: "line",
|
|
data: {
|
|
labels: [],
|
|
datasets: [
|
|
{
|
|
label: "Clients Online",
|
|
data: [],
|
|
borderColor: "rgb(96, 165, 250)",
|
|
backgroundColor: "rgba(96, 165, 250, 0.1)",
|
|
fill: true,
|
|
tension: 0.4,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
backgroundColor: "#0f172a",
|
|
titleColor: "#e2e8f0",
|
|
bodyColor: "#cbd5e1",
|
|
borderColor: "#334155",
|
|
borderWidth: 1,
|
|
},
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: { color: "#94a3b8", stepSize: 1 },
|
|
grid: { color: "rgba(100, 116, 139, 0.1)" },
|
|
},
|
|
x: {
|
|
ticks: { color: "#94a3b8", maxTicksLimit: 10 },
|
|
grid: { color: "rgba(100, 116, 139, 0.1)" },
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
commandsChart = new Chart(commandsCtx, {
|
|
type: "line",
|
|
data: {
|
|
labels: [],
|
|
datasets: [
|
|
{
|
|
label: "Commands/Min",
|
|
data: [],
|
|
borderColor: "rgb(192, 132, 252)",
|
|
backgroundColor: "rgba(192, 132, 252, 0.1)",
|
|
fill: true,
|
|
tension: 0.4,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
backgroundColor: "#0f172a",
|
|
titleColor: "#e2e8f0",
|
|
bodyColor: "#cbd5e1",
|
|
borderColor: "#334155",
|
|
borderWidth: 1,
|
|
},
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: { color: "#94a3b8" },
|
|
grid: { color: "rgba(100, 116, 139, 0.1)" },
|
|
},
|
|
x: {
|
|
ticks: { color: "#94a3b8", maxTicksLimit: 10 },
|
|
grid: { color: "rgba(100, 116, 139, 0.1)" },
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
function formatBytes(bytes) {
|
|
if (bytes === 0) return "0 B";
|
|
const k = 1024;
|
|
const sizes = ["B", "KB", "MB", "GB", "TB"];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement("div");
|
|
div.textContent = text == null ? "" : String(text);
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function formatDuration(ms) {
|
|
const seconds = Math.floor(ms / 1000);
|
|
const minutes = Math.floor(seconds / 60);
|
|
const hours = Math.floor(minutes / 60);
|
|
const days = Math.floor(hours / 24);
|
|
|
|
if (days > 0) return `${days}d ${hours % 24}h`;
|
|
if (hours > 0) return `${hours}h ${minutes % 60}m`;
|
|
if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
|
|
return `${seconds}s`;
|
|
}
|
|
|
|
function formatMs(value) {
|
|
if (!Number.isFinite(value)) return "0 ms";
|
|
return `${Math.round(value)} ms`;
|
|
}
|
|
|
|
function formatTime(timestamp) {
|
|
const date = new Date(timestamp);
|
|
return date.toLocaleTimeString("en-US", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
});
|
|
}
|
|
|
|
function animateCounter(element, newValue, duration = 800) {
|
|
const oldValue = parseInt(element.textContent.replace(/,/g, "")) || 0;
|
|
if (oldValue === newValue) return;
|
|
|
|
const startTime = performance.now();
|
|
const diff = newValue - oldValue;
|
|
|
|
function update(currentTime) {
|
|
const elapsed = currentTime - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
|
|
const easeOutQuad = progress * (2 - progress);
|
|
const current = Math.round(oldValue + diff * easeOutQuad);
|
|
|
|
element.textContent = current.toLocaleString();
|
|
element.classList.add("counter-animate");
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(update);
|
|
} else {
|
|
setTimeout(() => element.classList.remove("counter-animate"), 500);
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(update);
|
|
}
|
|
|
|
function updateMetrics(data, debug) {
|
|
animateCounter(
|
|
document.getElementById("clients-online"),
|
|
data.clients.online,
|
|
);
|
|
animateCounter(document.getElementById("clients-total"), data.clients.total);
|
|
|
|
const totalSessions =
|
|
data.sessions.console +
|
|
data.sessions.remoteDesktop +
|
|
data.sessions.fileBrowser +
|
|
data.sessions.process;
|
|
animateCounter(document.getElementById("active-sessions"), totalSessions);
|
|
|
|
animateCounter(
|
|
document.getElementById("commands-hour"),
|
|
data.commands.lastHour,
|
|
);
|
|
animateCounter(
|
|
document.getElementById("commands-minute"),
|
|
data.commands.lastMinute,
|
|
);
|
|
animateCounter(
|
|
document.getElementById("commands-total"),
|
|
data.commands.total,
|
|
);
|
|
|
|
const totalRate =
|
|
data.bandwidth.sentPerSecond + data.bandwidth.receivedPerSecond;
|
|
document.getElementById("bandwidth-rate").textContent =
|
|
formatBytes(totalRate) + "/s";
|
|
document.getElementById("bandwidth-sent").textContent = formatBytes(
|
|
data.bandwidth.sent,
|
|
);
|
|
document.getElementById("bandwidth-received").textContent = formatBytes(
|
|
data.bandwidth.received,
|
|
);
|
|
|
|
document.getElementById("server-uptime").textContent = formatDuration(
|
|
data.server.uptime,
|
|
);
|
|
document.getElementById("server-memory").textContent = formatBytes(
|
|
data.server.memoryUsage.heapUsed,
|
|
);
|
|
const serverRssEl = document.getElementById("server-rss");
|
|
if (serverRssEl) {
|
|
serverRssEl.textContent = formatBytes(data.server.memoryUsage.rss);
|
|
}
|
|
const serverSystemMemEl = document.getElementById("server-system-memory");
|
|
if (serverSystemMemEl && data.server.systemMemory) {
|
|
const used = data.server.systemMemory.used || 0;
|
|
const total = data.server.systemMemory.total || 0;
|
|
const percent = data.server.systemMemory.usedPercent || 0;
|
|
serverSystemMemEl.textContent = `${formatBytes(used)} / ${formatBytes(total)} (${Math.round(percent)}%)`;
|
|
}
|
|
const serverCpuEl = document.getElementById("server-cpu-load");
|
|
if (serverCpuEl && data.server.cpu) {
|
|
const [l1, l5, l15] = data.server.cpu.loadAvg || [0, 0, 0];
|
|
const cores = data.server.cpu.cores || 0;
|
|
serverCpuEl.textContent = `${Number(l1).toFixed(2)} / ${Number(l5).toFixed(2)} / ${Number(l15).toFixed(2)}${cores ? ` (${cores} cores)` : ""}`;
|
|
}
|
|
animateCounter(
|
|
document.getElementById("total-connections"),
|
|
data.connections.totalConnections,
|
|
);
|
|
|
|
const httpRequestsEl = document.getElementById("http-requests-minute");
|
|
if (httpRequestsEl) {
|
|
animateCounter(httpRequestsEl, data.http.lastMinute || 0);
|
|
}
|
|
const httpErrorsEl = document.getElementById("http-errors-minute");
|
|
if (httpErrorsEl) {
|
|
animateCounter(httpErrorsEl, data.http.lastMinuteErrors || 0);
|
|
}
|
|
const httpLatencyAvgEl = document.getElementById("http-latency-avg");
|
|
if (httpLatencyAvgEl) {
|
|
httpLatencyAvgEl.textContent = formatMs(data.http.latencyAvg || 0);
|
|
}
|
|
const httpLatencyP95El = document.getElementById("http-latency-p95");
|
|
if (httpLatencyP95El) {
|
|
httpLatencyP95El.textContent = formatMs(data.http.latencyP95 || 0);
|
|
}
|
|
const eventLoopAvgEl = document.getElementById("event-loop-avg");
|
|
if (eventLoopAvgEl) {
|
|
eventLoopAvgEl.textContent = formatMs(data.eventLoop.avg || 0);
|
|
}
|
|
const eventLoopP95El = document.getElementById("event-loop-p95");
|
|
if (eventLoopP95El) {
|
|
eventLoopP95El.textContent = formatMs(data.eventLoop.p95 || 0);
|
|
}
|
|
const eventLoopMaxEl = document.getElementById("event-loop-max");
|
|
if (eventLoopMaxEl) {
|
|
eventLoopMaxEl.textContent = formatMs(data.eventLoop.max || 0);
|
|
}
|
|
|
|
if (data.ping.count > 0) {
|
|
document.getElementById("ping-avg").textContent =
|
|
Math.round(data.ping.avg) + " ms";
|
|
document.getElementById("ping-min").textContent =
|
|
Math.round(data.ping.min) + " ms";
|
|
document.getElementById("ping-max").textContent =
|
|
Math.round(data.ping.max) + " ms";
|
|
animateCounter(document.getElementById("ping-count"), data.ping.count);
|
|
} else {
|
|
document.getElementById("ping-avg").textContent = "-";
|
|
document.getElementById("ping-min").textContent = "-";
|
|
document.getElementById("ping-max").textContent = "-";
|
|
document.getElementById("ping-count").textContent = "0";
|
|
}
|
|
|
|
const osList = document.getElementById("clients-by-os");
|
|
if (Object.keys(data.clients.byOS).length > 0) {
|
|
osList.innerHTML = Object.entries(data.clients.byOS)
|
|
.sort((a, b) => b[1] - a[1])
|
|
.map(
|
|
([os, count]) => `
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-slate-400">${escapeHtml(os)}</span>
|
|
<span class="font-semibold">${count}</span>
|
|
</div>
|
|
`,
|
|
)
|
|
.join("");
|
|
} else {
|
|
osList.innerHTML = '<div class="text-slate-500">No clients</div>';
|
|
}
|
|
|
|
const commandTypesList = document.getElementById("command-types");
|
|
if (Object.keys(data.commands.byType).length > 0) {
|
|
const topCommands = Object.entries(data.commands.byType)
|
|
.sort((a, b) => b[1] - a[1])
|
|
.slice(0, 10);
|
|
|
|
commandTypesList.innerHTML = topCommands
|
|
.map(
|
|
([type, count]) => `
|
|
<div class="bg-slate-800/50 rounded p-3">
|
|
<div class="text-xs text-slate-400 mb-1">${escapeHtml(type)}</div>
|
|
<div class="text-xl font-bold">${count.toLocaleString()}</div>
|
|
</div>
|
|
`,
|
|
)
|
|
.join("");
|
|
} else {
|
|
commandTypesList.innerHTML =
|
|
'<div class="text-slate-500 col-span-full text-center py-4">No commands executed yet</div>';
|
|
}
|
|
|
|
document.getElementById("last-update").textContent =
|
|
new Date().toLocaleTimeString();
|
|
|
|
updateCountryMap(data.clients.byCountry);
|
|
}
|
|
|
|
function normalizeCountry(code) {
|
|
return (code || "").toString().trim().toUpperCase();
|
|
}
|
|
|
|
function getFeatureCode(feature) {
|
|
const props = feature?.properties || {};
|
|
return normalizeCountry(
|
|
props["ISO3166-1-Alpha-2"] ||
|
|
props.ISO_A2 ||
|
|
props.iso_a2 ||
|
|
props.ISO_A2_EH ||
|
|
props.iso2 ||
|
|
props.ISO2 ||
|
|
props.country_code ||
|
|
props.countryCode ||
|
|
props.A2 ||
|
|
props.abbrev ||
|
|
props.abbreviation ||
|
|
feature?.id ||
|
|
"",
|
|
);
|
|
}
|
|
|
|
function getFeatureName(feature) {
|
|
const props = feature?.properties || {};
|
|
return (
|
|
props.NAME ||
|
|
props.name ||
|
|
props.ADMIN ||
|
|
props.admin ||
|
|
props.Country ||
|
|
"Unknown"
|
|
);
|
|
}
|
|
|
|
function countryFillOpacity(count) {
|
|
if (maxCountryCount <= 0) return 0.1;
|
|
const intensity = Math.min(count / maxCountryCount, 1);
|
|
return 0.1 + intensity * 0.75;
|
|
}
|
|
|
|
function styleCountry(feature) {
|
|
const code = getFeatureCode(feature);
|
|
const count = code ? countryCounts[code] || 0 : 0;
|
|
return {
|
|
weight: 0.7,
|
|
color: "#1e293b",
|
|
fillColor: "#3b82f6",
|
|
fillOpacity: countryFillOpacity(count),
|
|
};
|
|
}
|
|
|
|
function updateCountryMap(byCountry) {
|
|
latestByCountry = byCountry || {};
|
|
countryCounts = {};
|
|
for (const [code, count] of Object.entries(latestByCountry || {})) {
|
|
const cc = normalizeCountry(code);
|
|
if (!cc || cc === "ZZ") continue;
|
|
countryCounts[cc] = Number(count) || 0;
|
|
}
|
|
maxCountryCount = Math.max(0, ...Object.values(countryCounts));
|
|
|
|
if (!countriesLayer) return;
|
|
|
|
countriesLayer.setStyle(styleCountry);
|
|
countriesLayer.eachLayer((layer) => {
|
|
const feature = layer.feature;
|
|
const code = getFeatureCode(feature) || "--";
|
|
const name = getFeatureName(feature);
|
|
const count = code ? countryCounts[code] || 0 : 0;
|
|
layer.bindTooltip(`${escapeHtml(name)} (${code}): ${count}`, {
|
|
sticky: true,
|
|
direction: "auto",
|
|
});
|
|
});
|
|
}
|
|
|
|
async function initCountryMap() {
|
|
const mapEl = document.getElementById("country-map");
|
|
if (!mapEl || typeof L === "undefined") return;
|
|
|
|
countryMap = L.map(mapEl, {
|
|
zoomControl: false,
|
|
attributionControl: false,
|
|
minZoom: 1,
|
|
maxZoom: 5,
|
|
worldCopyJump: true,
|
|
}).setView([20, 0], 2);
|
|
|
|
L.tileLayer(
|
|
"https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
|
|
{
|
|
maxZoom: 5,
|
|
minZoom: 1,
|
|
},
|
|
).addTo(countryMap);
|
|
|
|
try {
|
|
const res = await fetch(GEOJSON_URL);
|
|
if (!res.ok) throw new Error("GeoJSON fetch failed");
|
|
const geojson = await res.json();
|
|
|
|
countriesLayer = L.geoJSON(geojson, {
|
|
style: styleCountry,
|
|
}).addTo(countryMap);
|
|
|
|
updateCountryMap(latestByCountry);
|
|
|
|
if (countriesLayer.getBounds) {
|
|
countryMap.fitBounds(countriesLayer.getBounds(), {
|
|
padding: [10, 10],
|
|
});
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to load country map:", err);
|
|
mapEl.innerHTML =
|
|
'<div class="text-slate-400 text-sm p-4">Failed to load map data.</div>';
|
|
}
|
|
}
|
|
|
|
function updateCharts(history, snapshot) {
|
|
if (history.length === 0) {
|
|
const now = new Date();
|
|
const label = formatTime(now.getTime());
|
|
|
|
clientsChart.data.labels = [label];
|
|
clientsChart.data.datasets[0].data = [snapshot.clients.online];
|
|
clientsChart.update("none");
|
|
|
|
commandsChart.data.labels = [label];
|
|
commandsChart.data.datasets[0].data = [snapshot.commands.lastMinute];
|
|
commandsChart.update("none");
|
|
return;
|
|
}
|
|
|
|
const labels = history.map((h) => formatTime(h.timestamp));
|
|
const clientsData = history.map((h) => h.clientsOnline);
|
|
|
|
clientsChart.data.labels = labels;
|
|
clientsChart.data.datasets[0].data = clientsData;
|
|
clientsChart.update("none");
|
|
|
|
const commandsData = history.map((h) => h.commandsPerMinute);
|
|
|
|
commandsChart.data.labels = labels;
|
|
commandsChart.data.datasets[0].data = commandsData;
|
|
commandsChart.update("none");
|
|
}
|
|
|
|
async function fetchMetrics() {
|
|
try {
|
|
const response = await fetch("/api/metrics", {
|
|
credentials: "include",
|
|
});
|
|
|
|
if (response.status === 401) {
|
|
window.location.href = "/";
|
|
return;
|
|
}
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Failed to fetch metrics");
|
|
}
|
|
|
|
const data = await response.json();
|
|
updateMetrics(data.snapshot, data.debug);
|
|
updateCharts(data.history, data.snapshot);
|
|
|
|
document.getElementById("status-text").textContent = "Live";
|
|
} catch (err) {
|
|
console.error("Error fetching metrics:", err);
|
|
document.getElementById("status-text").textContent = "Error";
|
|
}
|
|
}
|
|
|
|
async function checkAuth() {
|
|
try {
|
|
const res = await fetch("/api/auth/me", { credentials: "include" });
|
|
if (!res.ok) {
|
|
window.location.href = "/";
|
|
return;
|
|
}
|
|
|
|
const data = await res.json();
|
|
document.getElementById("username-display").textContent = data.username;
|
|
|
|
const roleBadge = document.getElementById("role-badge");
|
|
const roleBadges = {
|
|
admin: '<i class="fa-solid fa-crown mr-1"></i>Admin',
|
|
operator: '<i class="fa-solid fa-sliders mr-1"></i>Operator',
|
|
viewer: '<i class="fa-solid fa-eye mr-1"></i>Viewer',
|
|
};
|
|
if (roleBadges[data.role]) {
|
|
roleBadge.innerHTML = roleBadges[data.role];
|
|
} else {
|
|
roleBadge.textContent = data.role || "";
|
|
}
|
|
|
|
if (data.role === "admin") {
|
|
roleBadge.classList.add(
|
|
"bg-purple-900/50",
|
|
"text-purple-300",
|
|
"border",
|
|
"border-purple-800",
|
|
);
|
|
} else if (data.role === "operator") {
|
|
roleBadge.classList.add(
|
|
"bg-blue-900/50",
|
|
"text-blue-300",
|
|
"border",
|
|
"border-blue-800",
|
|
);
|
|
} else {
|
|
roleBadge.classList.add(
|
|
"bg-slate-700",
|
|
"text-slate-300",
|
|
"border",
|
|
"border-slate-600",
|
|
);
|
|
}
|
|
|
|
if (data.role === "admin") {
|
|
document.getElementById("users-link")?.classList.remove("hidden");
|
|
document.getElementById("build-link")?.classList.remove("hidden");
|
|
document.getElementById("plugins-link")?.classList.remove("hidden");
|
|
document.getElementById("deploy-link")?.classList.remove("hidden");
|
|
} else if (data.role === "operator" || data.canBuild) {
|
|
document.getElementById("build-link")?.classList.remove("hidden");
|
|
}
|
|
|
|
if (data.role !== "viewer") {
|
|
document.getElementById("scripts-link")?.classList.remove("hidden");
|
|
}
|
|
} catch (err) {
|
|
console.error("Auth check failed:", err);
|
|
window.location.href = "/";
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
await checkAuth();
|
|
|
|
initCharts();
|
|
|
|
await initCountryMap();
|
|
|
|
await fetchMetrics();
|
|
|
|
setInterval(fetchMetrics, 2000);
|
|
|
|
const logoutBtn = document.getElementById("logout-btn");
|
|
if (logoutBtn && !logoutBtn.dataset.boundLogout) {
|
|
logoutBtn.dataset.boundLogout = "true";
|
|
logoutBtn.addEventListener("click", async () => {
|
|
if (!confirm("Are you sure you want to logout?")) return;
|
|
|
|
try {
|
|
const res = await fetch("/api/logout", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
});
|
|
|
|
if (res.ok) {
|
|
window.location.href = "/";
|
|
} else {
|
|
alert("Logout failed. Please try again.");
|
|
}
|
|
} catch (err) {
|
|
console.error("Logout error:", err);
|
|
alert("Logout failed. Please try again.");
|
|
}
|
|
});
|
|
}
|
|
});
|