Admin protetto, dashboard KPI e aggiornamenti sito marketing.
Login admin con cambio password, metriche server (CPU/RAM/disco/banda), grafici e statistiche streaming; sezione piani ridimensionata. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
121
backend/public/admin-dashboard.js
Normal file
121
backend/public/admin-dashboard.js
Normal file
@@ -0,0 +1,121 @@
|
||||
(function () {
|
||||
const metricsUrl = window.adminMetricsUrl;
|
||||
if (!metricsUrl) return;
|
||||
|
||||
const cpuCanvas = document.getElementById("chart-cpu");
|
||||
const memCanvas = document.getElementById("chart-mem");
|
||||
if (!cpuCanvas || !memCanvas || typeof Chart === "undefined") return;
|
||||
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: { duration: 300 },
|
||||
scales: {
|
||||
x: {
|
||||
ticks: { maxTicksLimit: 6, color: "#9a9aad", font: { size: 10 } },
|
||||
grid: { color: "rgba(255,255,255,0.06)" }
|
||||
},
|
||||
y: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
ticks: { color: "#9a9aad", font: { size: 10 }, callback: (v) => v + "%" },
|
||||
grid: { color: "rgba(255,255,255,0.06)" }
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: { display: false }
|
||||
}
|
||||
};
|
||||
|
||||
function labelsFromHistory(history) {
|
||||
return history.map((p) => {
|
||||
const d = new Date(p.at);
|
||||
return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
|
||||
});
|
||||
}
|
||||
|
||||
const initial = window.adminInitialHistory || [];
|
||||
const cpuChart = new Chart(cpuCanvas, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: labelsFromHistory(initial),
|
||||
datasets: [{
|
||||
data: initial.map((p) => p.cpu),
|
||||
borderColor: "#e53935",
|
||||
backgroundColor: "rgba(229, 57, 53, 0.12)",
|
||||
fill: true,
|
||||
tension: 0.35,
|
||||
pointRadius: 0,
|
||||
borderWidth: 2
|
||||
}]
|
||||
},
|
||||
options: chartOptions
|
||||
});
|
||||
|
||||
const memChart = new Chart(memCanvas, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: labelsFromHistory(initial),
|
||||
datasets: [{
|
||||
data: initial.map((p) => p.mem),
|
||||
borderColor: "#43a047",
|
||||
backgroundColor: "rgba(67, 160, 71, 0.12)",
|
||||
fill: true,
|
||||
tension: 0.35,
|
||||
pointRadius: 0,
|
||||
borderWidth: 2
|
||||
}]
|
||||
},
|
||||
options: chartOptions
|
||||
});
|
||||
|
||||
function updateCharts(history) {
|
||||
const labels = labelsFromHistory(history);
|
||||
cpuChart.data.labels = labels;
|
||||
cpuChart.data.datasets[0].data = history.map((p) => p.cpu);
|
||||
cpuChart.update("none");
|
||||
memChart.data.labels = labels;
|
||||
memChart.data.datasets[0].data = history.map((p) => p.mem);
|
||||
memChart.update("none");
|
||||
}
|
||||
|
||||
function setText(id, value) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.textContent = value;
|
||||
}
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (bytes == null) return "—";
|
||||
const units = ["B", "KB", "MB", "GB", "TB"];
|
||||
let size = bytes;
|
||||
let i = 0;
|
||||
while (size >= 1024 && i < units.length - 1) {
|
||||
size /= 1024;
|
||||
i += 1;
|
||||
}
|
||||
return (size >= 10 ? size.toFixed(0) : size.toFixed(1)) + " " + units[i];
|
||||
}
|
||||
|
||||
async function poll() {
|
||||
try {
|
||||
const res = await fetch(metricsUrl, { headers: { Accept: "application/json" }, credentials: "same-origin" });
|
||||
if (!res.ok) return;
|
||||
const data = await res.json();
|
||||
const host = data.host || {};
|
||||
const stats = data.stats || {};
|
||||
|
||||
setText("kpi-active-sessions", stats.active_sessions);
|
||||
setText("kpi-sessions-today", stats.sessions_today);
|
||||
setText("kpi-sessions-month", stats.sessions_month);
|
||||
setText("kpi-cpu", (host.cpu ?? 0) + "%");
|
||||
setText("kpi-mem", (host.memory?.used_percent ?? 0) + "%");
|
||||
if (host.network) setText("kpi-network", formatBytes(host.network.total_bytes));
|
||||
|
||||
if (host.history) updateCharts(host.history);
|
||||
} catch (_e) {
|
||||
/* ignore polling errors */
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(poll, 8000);
|
||||
})();
|
||||
260
backend/public/admin.css
Normal file
260
backend/public/admin.css
Normal file
@@ -0,0 +1,260 @@
|
||||
:root {
|
||||
--red: #e53935;
|
||||
--red-dim: rgba(229, 57, 53, 0.15);
|
||||
--bg: #0a0a0e;
|
||||
--card: #14141c;
|
||||
--card-border: #2a2a36;
|
||||
--text: #f5f5f7;
|
||||
--muted: #9a9aad;
|
||||
--green: #43a047;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body.admin-body {
|
||||
font-family: "Segoe UI", system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.admin-header {
|
||||
border-bottom: 1px solid var(--card-border);
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
background: #0d0d12;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.admin-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.admin-header h1 span { color: var(--red); }
|
||||
|
||||
.admin-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.35rem 1rem;
|
||||
}
|
||||
|
||||
.admin-nav a,
|
||||
.admin-nav button {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
background: none;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.admin-nav a:hover,
|
||||
.admin-nav a.active { color: var(--red); }
|
||||
|
||||
.admin-main {
|
||||
padding: 1.5rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.admin-flash {
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
background: var(--red-dim);
|
||||
border: 1px solid rgba(229, 57, 53, 0.35);
|
||||
}
|
||||
|
||||
.admin-section-title {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.kpi-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.kpi-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.1rem;
|
||||
}
|
||||
|
||||
.kpi-card--accent {
|
||||
border-color: rgba(229, 57, 53, 0.45);
|
||||
background: linear-gradient(145deg, #1a1214 0%, var(--card) 60%);
|
||||
}
|
||||
|
||||
.kpi-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.kpi-value {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.kpi-sub {
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.kpi-value--live { color: var(--red); }
|
||||
|
||||
.charts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.chart-card h3 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chart-wrap {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.admin-panels {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.admin-panels { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.admin-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.admin-table th,
|
||||
.admin-table td {
|
||||
padding: 0.65rem 0.5rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
.admin-table th {
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge--live { background: var(--red); color: #fff; }
|
||||
.badge--connecting { background: #ff9800; color: #111; }
|
||||
.badge--paused { background: #555; color: #fff; }
|
||||
|
||||
.team-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.team-list li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.55rem 0;
|
||||
border-bottom: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
.team-list a { color: var(--text); text-decoration: none; }
|
||||
.team-list a:hover { color: var(--red); }
|
||||
|
||||
.muted { color: var(--muted); }
|
||||
.empty { color: var(--muted); font-size: 0.9rem; margin: 0; }
|
||||
|
||||
.progress-bar {
|
||||
height: 6px;
|
||||
background: #2a2a36;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-bar span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: var(--red);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.progress-bar--ok span { background: var(--green); }
|
||||
|
||||
.disk-row {
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.disk-row:last-child { margin-bottom: 0; }
|
||||
|
||||
.disk-row header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
@@ -459,7 +459,7 @@ body.nav-menu-open { overflow: hidden; }
|
||||
margin: 0 auto 28px;
|
||||
}
|
||||
.plans-teaser-visual {
|
||||
max-width: 920px;
|
||||
max-width: 460px;
|
||||
margin: 0 auto 32px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user