Pass 3 next slice: snapshot polish, analytics depth, player drawer
- Snapshots now include recursive sizeBytes (lib/snapshots.ts dirSize),
rendered as a badge next to mod count.
- Snapshot restore/delete is now type-to-confirm: click Restore/Delete,
type the literal snapshot name, press Enter or click Confirm. Esc
cancels, matches the existing wizard Esc handler.
- Analytics card:
- Uptime ring showing % of datapoints with tps>0 (color-graded
green/amber/red) + numeric % over selected range.
- Peak-player marker dot on the Players sparkline + peak caption.
- "Online now" player list (up to 8) with small PlayerAvatar badges,
sourced from the latest analytics entry's players[] array.
- Player profile drawer (new):
- Slide-in right panel opened by clicking any PlayerAvatar.
- Shows Online / Op / Whitelisted / Banned badges, UUID, ban reason.
- Quick toggles for op/deop, whitelist add/remove, ban (with reason
input) and pardon — reuses /api/players POST contract.
- Global event bus (lib/events.ts) decouples avatars from drawer.
- Esc / backdrop / close-button dismiss.
- PlayerAvatar now renders as a <button> by default (stopPropagation on
click, focus-visible ring); pass interactive={false} to opt out (used
inside the drawer itself).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
a011423017
commit
19d66c2de6
7 changed files with 589 additions and 109 deletions
|
|
@ -3,6 +3,8 @@
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { PlayerAvatar } from "@/components/PlayerAvatar";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
|
@ -18,8 +20,53 @@ type MetricEntry = {
|
|||
ramTotalMB: number;
|
||||
cpuPercent: number;
|
||||
playersOnline: number;
|
||||
players?: string[];
|
||||
};
|
||||
|
||||
function UptimeRing({ percent, size = 64 }: { percent: number; size?: number }) {
|
||||
const r = size / 2 - 5;
|
||||
const c = 2 * Math.PI * r;
|
||||
const off = c * (1 - percent / 100);
|
||||
const color =
|
||||
percent >= 95 ? "#4ade80" : percent >= 80 ? "#facc15" : "#f87171";
|
||||
return (
|
||||
<svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-label={`Uptime ${percent.toFixed(0)}%`}>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={r}
|
||||
stroke="currentColor"
|
||||
strokeOpacity="0.15"
|
||||
strokeWidth="5"
|
||||
fill="none"
|
||||
/>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={r}
|
||||
stroke={color}
|
||||
strokeWidth="5"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={c}
|
||||
strokeDashoffset={off}
|
||||
fill="none"
|
||||
transform={`rotate(-90 ${size / 2} ${size / 2})`}
|
||||
/>
|
||||
<text
|
||||
x="50%"
|
||||
y="50%"
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
className="fill-foreground"
|
||||
fontSize={size * 0.28}
|
||||
fontWeight="700"
|
||||
>
|
||||
{Math.round(percent)}%
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function Sparkline({
|
||||
data,
|
||||
color,
|
||||
|
|
@ -28,6 +75,8 @@ function Sparkline({
|
|||
label,
|
||||
unit,
|
||||
currentValue,
|
||||
peakIndex,
|
||||
peakLabel,
|
||||
}: {
|
||||
data: number[];
|
||||
color: string;
|
||||
|
|
@ -36,6 +85,8 @@ function Sparkline({
|
|||
label: string;
|
||||
unit: string;
|
||||
currentValue: string;
|
||||
peakIndex?: number;
|
||||
peakLabel?: string;
|
||||
}) {
|
||||
if (data.length < 2) {
|
||||
return (
|
||||
|
|
@ -55,17 +106,27 @@ function Sparkline({
|
|||
);
|
||||
}
|
||||
|
||||
const { pathD, areaD, w } = useMemo(() => {
|
||||
const { pathD, areaD, w, peakXY } = useMemo(() => {
|
||||
const dataMax = max || Math.max(...data, 1);
|
||||
const width = 300;
|
||||
const pts = data.map((v, i) => {
|
||||
const coords = data.map((v, i) => {
|
||||
const x = (i / (data.length - 1)) * width;
|
||||
const y = height - (v / dataMax) * (height - 10) - 5;
|
||||
return `${x},${y}`;
|
||||
return { x, y };
|
||||
});
|
||||
const pts = coords.map((c) => `${c.x},${c.y}`);
|
||||
const p = `M${pts.join(" L")}`;
|
||||
return { pathD: p, areaD: `${p} L${width},${height} L0,${height} Z`, w: width };
|
||||
}, [data, max, height]);
|
||||
const peak =
|
||||
typeof peakIndex === "number" && peakIndex >= 0 && peakIndex < coords.length
|
||||
? coords[peakIndex]
|
||||
: null;
|
||||
return {
|
||||
pathD: p,
|
||||
areaD: `${p} L${width},${height} L0,${height} Z`,
|
||||
w: width,
|
||||
peakXY: peak,
|
||||
};
|
||||
}, [data, max, height, peakIndex]);
|
||||
|
||||
return (
|
||||
<div className="rounded-lg bg-muted p-4">
|
||||
|
|
@ -87,7 +148,18 @@ function Sparkline({
|
|||
</defs>
|
||||
<path d={areaD} fill={`url(#grad-${label})`} />
|
||||
<path d={pathD} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
{peakXY && (
|
||||
<>
|
||||
<circle cx={peakXY.x} cy={peakXY.y} r={3.5} fill={color} />
|
||||
<circle cx={peakXY.x} cy={peakXY.y} r={6} fill={color} fillOpacity="0.25" />
|
||||
</>
|
||||
)}
|
||||
</svg>
|
||||
{peakLabel && (
|
||||
<p className="text-[10px] text-muted-foreground mt-1 tabular-nums">
|
||||
peak {peakLabel}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -105,6 +177,25 @@ export function Analytics() {
|
|||
|
||||
const latest = metrics.length > 0 ? metrics[metrics.length - 1] : null;
|
||||
|
||||
const { uptimePct, peakPlayers, peakIndex, onlineNow } = useMemo(() => {
|
||||
if (metrics.length === 0) {
|
||||
return { uptimePct: 0, peakPlayers: 0, peakIndex: -1, onlineNow: [] as string[] };
|
||||
}
|
||||
const alive = metrics.filter((m) => m.tps > 0 || m.playersOnline > 0).length;
|
||||
const pct = (alive / metrics.length) * 100;
|
||||
let peak = -Infinity;
|
||||
let idx = -1;
|
||||
metrics.forEach((m, i) => {
|
||||
if (m.playersOnline > peak) {
|
||||
peak = m.playersOnline;
|
||||
idx = i;
|
||||
}
|
||||
});
|
||||
const online =
|
||||
(latest?.players?.filter((p): p is string => typeof p === "string" && p.length > 0)) || [];
|
||||
return { uptimePct: pct, peakPlayers: peak, peakIndex: idx, onlineNow: online };
|
||||
}, [metrics, latest]);
|
||||
|
||||
const ranges = [
|
||||
{ label: "1h", value: 1 },
|
||||
{ label: "6h", value: 6 },
|
||||
|
|
@ -138,7 +229,57 @@ export function Analytics() {
|
|||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="space-y-4">
|
||||
{metrics.length > 0 && (
|
||||
<div className="flex items-center gap-4 flex-wrap rounded-lg bg-muted p-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<UptimeRing percent={uptimePct} />
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Uptime</p>
|
||||
<p className="text-sm font-semibold">
|
||||
{uptimePct.toFixed(1)}%{" "}
|
||||
<span className="text-xs text-muted-foreground">
|
||||
over last {hours}h
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-10 w-px bg-border hidden sm:block" />
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Peak players</p>
|
||||
<p className="text-sm font-semibold tabular-nums">
|
||||
{peakPlayers >= 0 ? peakPlayers : 0}
|
||||
</p>
|
||||
</div>
|
||||
<div className="h-10 w-px bg-border hidden sm:block" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs text-muted-foreground mb-1">
|
||||
Online now ({onlineNow.length})
|
||||
</p>
|
||||
{onlineNow.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">—</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{onlineNow.slice(0, 8).map((name) => (
|
||||
<Badge
|
||||
key={name}
|
||||
variant="secondary"
|
||||
className="gap-1.5 text-xs px-1.5 py-0.5 font-normal"
|
||||
>
|
||||
<PlayerAvatar name={name} size={14} />
|
||||
{name}
|
||||
</Badge>
|
||||
))}
|
||||
{onlineNow.length > 8 && (
|
||||
<Badge variant="secondary" className="text-xs px-1.5 py-0.5">
|
||||
+{onlineNow.length - 8}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<Sparkline
|
||||
data={metrics.map((m) => m.tps)}
|
||||
|
|
@ -171,6 +312,8 @@ export function Analytics() {
|
|||
label="Players"
|
||||
unit=""
|
||||
currentValue={latest ? latest.playersOnline.toString() : "0"}
|
||||
peakIndex={peakPlayers > 0 ? peakIndex : undefined}
|
||||
peakLabel={peakPlayers > 0 ? peakPlayers.toString() : undefined}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue