v0.4.1
This commit is contained in:
Mateusz Gruszczyński committed
1 parent
439cc20dcf
commit
722a49f6bc
14 files changed
+564
-283
No files matched your search
+23
-26
@@ -61,28 +61,18 @@ html[data-theme=light] .theme-toggle .ic-moon{display:block}
|
||||
|
||||
/* === dashboard shell (stats page) ======================================= */
|
||||
.shell{min-height:100vh;display:grid;grid-template-rows:56px minmax(0,1fr)}
|
||||
.topbar{position:relative;display:grid;grid-template-columns:240px 1fr auto;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--panel)}
|
||||
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
|
||||
.brand svg{color:var(--accent);width:24px;height:24px}
|
||||
.header-online{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
|
||||
.topbar{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--panel)}
|
||||
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;min-width:0}
|
||||
.brand svg{color:var(--accent);width:24px;height:24px;flex:0 0 auto}
|
||||
.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.header-online{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;justify-content:center}
|
||||
.header-online strong{color:var(--text);font-size:16px}
|
||||
.top-actions{display:flex;align-items:center;gap:8px}
|
||||
.top-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end}
|
||||
.route-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;background:transparent}
|
||||
.route-progress>span{display:block;width:35%;height:100%;background:var(--accent);animation:route-progress 1.1s ease-in-out infinite}
|
||||
.route-progress[hidden]{display:none}
|
||||
@keyframes route-progress{0%{transform:translateX(-110%)}50%{transform:translateX(120%)}100%{transform:translateX(310%)}}
|
||||
|
||||
.body{min-height:0;display:grid;grid-template-columns:220px minmax(0,1fr)}
|
||||
.sidebar{min-height:0;padding:14px 10px;border-right:1px solid var(--line);background:var(--sidebar);overflow:auto}
|
||||
.nav{display:grid;gap:3px}
|
||||
.nav a{display:flex;align-items:center;gap:10px;height:38px;padding:0 11px;border:1px solid transparent;border-radius:var(--r);color:var(--muted)}
|
||||
.nav a:hover{background:var(--hover);color:var(--text)}
|
||||
.nav a.active{background:var(--selected);color:var(--text);border-color:var(--line)}
|
||||
.nav a svg{width:17px;height:17px}
|
||||
.nav-section{margin:16px 11px 6px;color:var(--subtle);font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
|
||||
.nav-server{display:flex;align-items:center;gap:9px;height:30px;padding:0 11px;color:var(--muted);font-size:12px}
|
||||
.nav-server svg{width:15px;height:15px;flex:0 0 auto}
|
||||
.nav-server span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.icon-sprite{display:none}
|
||||
|
||||
.content{min-width:0;min-height:0;overflow:auto;padding:26px 28px 48px}
|
||||
@@ -102,18 +92,20 @@ html[data-theme=light] .theme-toggle .ic-moon{display:block}
|
||||
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
|
||||
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;padding:0 13px;border-bottom:1px solid var(--line)}
|
||||
.panel-head h2{margin:0;font-size:14px;font-weight:650}
|
||||
.panel-head p{margin:0;font-size:11px;color:var(--muted)}
|
||||
|
||||
.graphs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
|
||||
.graph-image-button{display:block;width:100%;padding:0;border:0;background:var(--field);cursor:zoom-in;overflow:hidden}
|
||||
.graph-image-button img{display:block;width:100%;height:auto;aspect-ratio:1200/320;object-fit:contain;transition:transform .18s ease,opacity .18s ease}
|
||||
.graph-image-button:hover img{transform:scale(1.012);opacity:.96}
|
||||
.graph-chart{display:block;width:100%;padding:0;border:0;background:var(--field);cursor:zoom-in}
|
||||
.graph-chart canvas{display:block;width:100%;height:auto;aspect-ratio:3/1}
|
||||
.graph-empty{margin:0;padding:58px 10px;text-align:center;font-size:12px}
|
||||
.graph-stats{margin:0;padding:9px 13px 12px;font-size:11px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
|
||||
.lightbox[hidden]{display:none}
|
||||
.lightbox{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:28px}
|
||||
.lightbox-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(0,0,0,.78);cursor:zoom-out}
|
||||
.lightbox-dialog{position:relative;z-index:1;width:min(96vw,1500px);max-height:92vh;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);padding:48px 16px 16px;box-shadow:0 24px 80px var(--shadow);overflow:auto}
|
||||
.lightbox-dialog img{display:block;width:100%;height:auto}
|
||||
.lightbox-dialog{position:relative;z-index:1;width:min(96vw,1200px);max-height:92vh;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);padding:48px 18px 16px;box-shadow:0 24px 80px var(--shadow);overflow:auto}
|
||||
.lightbox-title{margin:0 0 10px;padding-right:90px;font-size:15px;font-weight:650}
|
||||
.lightbox-canvas{display:block;width:100%;height:min(62vh,560px)}
|
||||
.lightbox-dialog .graph-stats{padding:10px 2px 0}
|
||||
.lightbox-close{position:absolute;top:10px;right:12px;display:inline-flex;gap:6px;align-items:center}
|
||||
.lightbox-open{overflow:hidden}
|
||||
|
||||
@@ -158,12 +150,17 @@ html[data-theme=light] .theme-toggle .ic-moon{display:block}
|
||||
@media(max-width:1060px){
|
||||
.cards{grid-template-columns:repeat(2,minmax(140px,1fr))}
|
||||
.graphs{grid-template-columns:1fr}
|
||||
.graph-image-button img{aspect-ratio:auto;min-height:260px}
|
||||
.graph-chart canvas{aspect-ratio:auto;height:200px}
|
||||
}
|
||||
@media(max-width:860px){
|
||||
.topbar{grid-template-columns:auto 1fr auto}
|
||||
.body{grid-template-columns:1fr}
|
||||
.sidebar{display:none}
|
||||
.topbar{grid-template-columns:minmax(64px,auto) 1fr auto}
|
||||
#refresh-status{display:none}
|
||||
}
|
||||
@media(max-width:520px){
|
||||
.brand span{max-width:40vw}
|
||||
.header-online .badge{display:none}
|
||||
.btn-label{display:none}
|
||||
.top-actions .btn{padding:7px 10px}
|
||||
}
|
||||
@media(max-width:620px){
|
||||
.cards{grid-template-columns:1fr}
|
||||
|
||||
+224
-42
@@ -5,40 +5,23 @@
|
||||
var THEME_KEY = 'ts3monolith-theme';
|
||||
var root = document.documentElement;
|
||||
var toggle = document.querySelector('.theme-toggle');
|
||||
var graphs = document.querySelectorAll('.js-live-graph');
|
||||
var openers = document.querySelectorAll('.js-graph-open');
|
||||
|
||||
function currentTheme() {
|
||||
return root.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
|
||||
}
|
||||
|
||||
// RRD graphs are static PNGs rendered server-side in both a dark and a
|
||||
// light palette (see internal/rrd/rrd.go); swap to the variant matching
|
||||
// the active theme so panel graphs never clash with the page around them.
|
||||
function applyGraphTheme(theme) {
|
||||
var stamp = Date.now();
|
||||
graphs.forEach(function (img) {
|
||||
var src = theme === 'light' ? img.dataset.srcLight : img.dataset.src;
|
||||
if (src) img.src = src + '?v=' + stamp;
|
||||
});
|
||||
openers.forEach(function (button) {
|
||||
var full = theme === 'light' ? button.getAttribute('data-full-light') : button.getAttribute('data-full');
|
||||
if (full) button.setAttribute('data-full-active', full);
|
||||
});
|
||||
}
|
||||
|
||||
function applyTheme(mode) {
|
||||
if (mode === 'light') root.setAttribute('data-theme', 'light');
|
||||
else root.removeAttribute('data-theme');
|
||||
applyGraphTheme(mode === 'light' ? 'light' : 'dark');
|
||||
// Charts read their colors straight from the CSS custom properties at
|
||||
// draw time, so a theme switch just needs a redraw of the data already
|
||||
// in hand -- no re-fetch, unlike the old per-theme PNG swap.
|
||||
renderAllCharts();
|
||||
}
|
||||
try {
|
||||
var saved = window.localStorage.getItem(THEME_KEY);
|
||||
if (saved) applyTheme(saved);
|
||||
else applyGraphTheme(currentTheme());
|
||||
} catch (e) {
|
||||
applyGraphTheme(currentTheme());
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
|
||||
if (toggle) {
|
||||
toggle.addEventListener('click', function () {
|
||||
@@ -48,7 +31,200 @@
|
||||
});
|
||||
}
|
||||
|
||||
// --- live stats + graph refresh -----------------------------------------
|
||||
// --- RRD charts -----------------------------------------------------------
|
||||
// Each panel's time series comes from GET /stats/graph/{range} as plain
|
||||
// JSON (see rrd.Manager.Fetch / GraphData in internal/rrd/rrd.go) and is
|
||||
// drawn here in a <canvas>, instead of asking the server to render a PNG
|
||||
// with rrdtool. That makes the chart a normal responsive element (it
|
||||
// resizes with its card, including on mobile, instead of being locked to
|
||||
// whatever pixel size rrdtool was told to render) and lets a theme toggle
|
||||
// or window resize just redraw the cached points rather than re-fetching
|
||||
// an image.
|
||||
var chartPanels = document.querySelectorAll('.js-chart');
|
||||
var chartData = {};
|
||||
|
||||
function paletteColor(name, fallback) {
|
||||
var v = getComputedStyle(root).getPropertyValue(name);
|
||||
return v ? v.trim() : fallback;
|
||||
}
|
||||
|
||||
function timeFormatter(key) {
|
||||
if (key === 'week' || key === 'month') {
|
||||
return function (t) {
|
||||
return new Date(t * 1000).toLocaleDateString('pl-PL', { day: '2-digit', month: '2-digit' });
|
||||
};
|
||||
}
|
||||
if (key === 'year') {
|
||||
return function (t) {
|
||||
return new Date(t * 1000).toLocaleDateString('pl-PL', { month: 'short', year: 'numeric' });
|
||||
};
|
||||
}
|
||||
return function (t) {
|
||||
return new Date(t * 1000).toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' });
|
||||
};
|
||||
}
|
||||
|
||||
function fmtNum(v) {
|
||||
return v === null || v === undefined ? '—' : String(Math.round(v));
|
||||
}
|
||||
|
||||
function statsText(data) {
|
||||
return 'Aktualnie: ' + fmtNum(data.current) + ' Średnio: ' + fmtNum(data.average) + ' Maks.: ' + fmtNum(data.max);
|
||||
}
|
||||
|
||||
// Draws one series into canvas, sized to the canvas's current CSS box
|
||||
// (so the caller controls size purely through layout/CSS). Returns false
|
||||
// when there is nothing to draw (e.g. a fresh RRD with no samples yet),
|
||||
// so the caller can show a text fallback instead of a blank box.
|
||||
function drawChart(canvas, data) {
|
||||
var points = (data && data.points) || [];
|
||||
var hasData = points.some(function (p) { return p.v !== null && p.v !== undefined; });
|
||||
if (!hasData) return false;
|
||||
|
||||
var cssW = canvas.clientWidth;
|
||||
var cssH = canvas.clientHeight;
|
||||
if (!cssW || !cssH) return false;
|
||||
var dpr = window.devicePixelRatio || 1;
|
||||
canvas.width = Math.round(cssW * dpr);
|
||||
canvas.height = Math.round(cssH * dpr);
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
ctx.clearRect(0, 0, cssW, cssH);
|
||||
|
||||
var lineColor = paletteColor('--line', '#313832');
|
||||
var textColor = paletteColor('--muted', '#9da79f');
|
||||
var accent = paletteColor('--accent', '#8fb9a4');
|
||||
|
||||
var padL = 28, padR = 6, padT = 8, padB = 16;
|
||||
var plotW = Math.max(1, cssW - padL - padR);
|
||||
var plotH = Math.max(1, cssH - padT - padB);
|
||||
|
||||
var values = [];
|
||||
points.forEach(function (p) { if (p.v !== null && p.v !== undefined) values.push(p.v); });
|
||||
var maxV = values.length ? Math.max.apply(null, values) : 1;
|
||||
var top = Math.max(1, Math.ceil(maxV * 1.2));
|
||||
|
||||
function xAt(i) {
|
||||
return padL + (points.length > 1 ? (i / (points.length - 1)) * plotW : plotW / 2);
|
||||
}
|
||||
function yAt(v) {
|
||||
return padT + plotH - (v / top) * plotH;
|
||||
}
|
||||
|
||||
// horizontal grid + y labels (0 / mid / top)
|
||||
ctx.font = '10px ' + getComputedStyle(document.body).fontFamily;
|
||||
ctx.lineWidth = 1;
|
||||
[0, top / 2, top].forEach(function (t) {
|
||||
var y = Math.round(yAt(t)) + 0.5;
|
||||
ctx.strokeStyle = lineColor;
|
||||
ctx.globalAlpha = t === 0 ? 0.7 : 0.35;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padL, y);
|
||||
ctx.lineTo(padL + plotW, y);
|
||||
ctx.stroke();
|
||||
ctx.globalAlpha = 1;
|
||||
ctx.fillStyle = textColor;
|
||||
ctx.textAlign = 'right';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(String(Math.round(t)), padL - 6, yAt(t));
|
||||
});
|
||||
|
||||
// x labels: first / middle / last sample
|
||||
if (points.length > 1) {
|
||||
var fmt = timeFormatter(data.key);
|
||||
ctx.fillStyle = textColor;
|
||||
ctx.textBaseline = 'alphabetic';
|
||||
[0, Math.floor((points.length - 1) / 2), points.length - 1].forEach(function (i, idx) {
|
||||
ctx.textAlign = idx === 0 ? 'left' : (idx === 2 ? 'right' : 'center');
|
||||
ctx.fillText(fmt(points[i].t), xAt(i), cssH - 3);
|
||||
});
|
||||
}
|
||||
|
||||
// area + line, broken into separate segments across data gaps (nulls)
|
||||
// instead of interpolating through them
|
||||
var seg = [];
|
||||
function flushSegment() {
|
||||
if (seg.length < 2) {
|
||||
seg = [];
|
||||
return;
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(seg[0][0], padT + plotH);
|
||||
seg.forEach(function (pt) { ctx.lineTo(pt[0], pt[1]); });
|
||||
ctx.lineTo(seg[seg.length - 1][0], padT + plotH);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = accent + '38';
|
||||
ctx.fill();
|
||||
|
||||
ctx.beginPath();
|
||||
seg.forEach(function (pt, idx) {
|
||||
if (idx === 0) ctx.moveTo(pt[0], pt[1]);
|
||||
else ctx.lineTo(pt[0], pt[1]);
|
||||
});
|
||||
ctx.lineJoin = 'round';
|
||||
ctx.lineCap = 'round';
|
||||
ctx.lineWidth = 1.6;
|
||||
ctx.strokeStyle = accent;
|
||||
ctx.stroke();
|
||||
seg = [];
|
||||
}
|
||||
points.forEach(function (p, i) {
|
||||
if (p.v === null || p.v === undefined) {
|
||||
flushSegment();
|
||||
return;
|
||||
}
|
||||
seg.push([xAt(i), yAt(p.v)]);
|
||||
});
|
||||
flushSegment();
|
||||
return true;
|
||||
}
|
||||
|
||||
function renderPanel(panel) {
|
||||
var canvas = panel.querySelector('.js-chart-canvas');
|
||||
var empty = panel.querySelector('.graph-empty');
|
||||
var statsEl = panel.querySelector('.js-graph-stats');
|
||||
if (!canvas) return;
|
||||
var data = chartData[panel.dataset.range];
|
||||
var ok = !!data && drawChart(canvas, data);
|
||||
canvas.hidden = !ok;
|
||||
if (empty) {
|
||||
empty.hidden = ok;
|
||||
empty.textContent = data ? 'Brak danych' : 'Wykres niedostępny';
|
||||
}
|
||||
if (statsEl) statsEl.textContent = ok ? statsText(data) : '';
|
||||
}
|
||||
|
||||
function renderAllCharts() {
|
||||
chartPanels.forEach(renderPanel);
|
||||
}
|
||||
|
||||
function loadCharts() {
|
||||
return Promise.all(Array.prototype.map.call(chartPanels, function (panel) {
|
||||
var range = panel.dataset.range;
|
||||
return fetch('/stats/graph/' + range, { cache: 'no-store' })
|
||||
.then(function (r) {
|
||||
if (!r.ok) throw new Error('graph');
|
||||
return r.json();
|
||||
})
|
||||
.then(function (data) { chartData[range] = data; })
|
||||
.catch(function () { chartData[range] = null; });
|
||||
})).then(renderAllCharts);
|
||||
}
|
||||
|
||||
function debounce(fn, wait) {
|
||||
var t;
|
||||
return function () {
|
||||
clearTimeout(t);
|
||||
t = setTimeout(fn, wait);
|
||||
};
|
||||
}
|
||||
|
||||
if (chartPanels.length) {
|
||||
loadCharts();
|
||||
window.addEventListener('resize', debounce(renderAllCharts, 150));
|
||||
}
|
||||
|
||||
// --- live stats + chart refresh --------------------------------------------
|
||||
var count = document.getElementById('online-count');
|
||||
var status = document.getElementById('refresh-status');
|
||||
var progress = document.getElementById('route-progress');
|
||||
@@ -61,57 +237,63 @@
|
||||
setBusy(true);
|
||||
if (status) status.textContent = 'Odświeżanie…';
|
||||
|
||||
var done = Promise.resolve();
|
||||
var tasks = [];
|
||||
if (count) {
|
||||
done = fetch('/stats/live', { cache: 'no-store' })
|
||||
tasks.push(fetch('/stats/live', { cache: 'no-store' })
|
||||
.then(function (response) {
|
||||
if (!response.ok) throw new Error('stats');
|
||||
return response.json();
|
||||
})
|
||||
.then(function (data) {
|
||||
if (typeof data.current === 'number') count.textContent = String(data.current);
|
||||
if (status) status.textContent = 'Dane aktualne';
|
||||
})
|
||||
.catch(function () {
|
||||
if (status) status.textContent = 'Nie udało się odświeżyć';
|
||||
});
|
||||
}));
|
||||
}
|
||||
if (chartPanels.length) tasks.push(loadCharts());
|
||||
|
||||
applyGraphTheme(currentTheme());
|
||||
|
||||
done.then(function () { setBusy(false); });
|
||||
Promise.all(tasks)
|
||||
.then(function () { if (status) status.textContent = 'Dane aktualne'; })
|
||||
.catch(function () { if (status) status.textContent = 'Nie udało się odświeżyć'; })
|
||||
.then(function () { setBusy(false); });
|
||||
}
|
||||
|
||||
if (count || graphs.length) {
|
||||
if (count || chartPanels.length) {
|
||||
window.setInterval(refresh, 60000);
|
||||
}
|
||||
|
||||
// --- graph lightbox -------------------------------------------------------
|
||||
var lightbox = document.getElementById('graph-lightbox');
|
||||
var lightboxImage = document.getElementById('lightbox-image');
|
||||
var lightboxCanvas = document.getElementById('lightbox-canvas');
|
||||
var lightboxTitle = document.getElementById('lightbox-title');
|
||||
var lightboxStats = document.getElementById('lightbox-stats');
|
||||
var openers = document.querySelectorAll('.js-graph-open');
|
||||
var closeButtons = document.querySelectorAll('[data-lightbox-close]');
|
||||
|
||||
function openLightbox(src) {
|
||||
if (!lightbox || !lightboxImage) return;
|
||||
lightboxImage.src = src + (src.indexOf('?') === -1 ? '?' : '&') + 'v=' + Date.now();
|
||||
function openLightbox(range) {
|
||||
if (!lightbox || !lightboxCanvas) return;
|
||||
var data = chartData[range];
|
||||
lightbox.hidden = false;
|
||||
lightbox.setAttribute('aria-hidden', 'false');
|
||||
document.body.classList.add('lightbox-open');
|
||||
if (lightboxTitle) lightboxTitle.textContent = data ? data.title : '';
|
||||
if (lightboxStats) lightboxStats.textContent = data ? statsText(data) : '';
|
||||
// Wait a frame so the now-visible dialog has its real layout size
|
||||
// before measuring clientWidth/clientHeight for the bigger redraw.
|
||||
requestAnimationFrame(function () {
|
||||
if (data) drawChart(lightboxCanvas, data);
|
||||
});
|
||||
}
|
||||
|
||||
function closeLightbox() {
|
||||
if (!lightbox || !lightboxImage) return;
|
||||
if (!lightbox) return;
|
||||
lightbox.hidden = true;
|
||||
lightbox.setAttribute('aria-hidden', 'true');
|
||||
lightboxImage.src = '';
|
||||
document.body.classList.remove('lightbox-open');
|
||||
}
|
||||
|
||||
openers.forEach(function (button) {
|
||||
button.addEventListener('click', function () {
|
||||
var src = button.getAttribute('data-full-active') || button.getAttribute('data-full');
|
||||
if (src) openLightbox(src);
|
||||
var panel = button.closest('.js-chart');
|
||||
if (panel) openLightbox(panel.dataset.range);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Reference in new issue
Block a user