Import source: web/src/components/StatusRing
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,237 @@
|
|||||||
|
import { memo, useMemo } from "react";
|
||||||
|
import { motion } from "motion/react";
|
||||||
|
import type { LiveTarget } from "../lib/types";
|
||||||
|
import { arcPath, circumference, latencyScale, polar } from "../lib/geometry";
|
||||||
|
import { fmtLatency, fmtUptime, pctSign } from "../lib/format";
|
||||||
|
import { springs, STATE_COLOR, useUI } from "../lib/ui";
|
||||||
|
import { useSpringNumber } from "../hooks/useSpringNumber";
|
||||||
|
|
||||||
|
const C = 60; // center
|
||||||
|
const R_TRACK = 44; // uptime ring radius
|
||||||
|
const R_LAT = 36; // latency gauge radius
|
||||||
|
const LAT_SWEEP = 270; // latency gauge max sweep, degrees
|
||||||
|
|
||||||
|
/** 60 watch-face ticks; every fifth is longer — the "fine instrument" detail. */
|
||||||
|
function Ticks() {
|
||||||
|
const ticks = useMemo(() => {
|
||||||
|
const lines = [];
|
||||||
|
for (let i = 0; i < 60; i++) {
|
||||||
|
const major = i % 5 === 0;
|
||||||
|
const a = i * 6;
|
||||||
|
const p1 = polar(C, C, major ? 50 : 51.4, a);
|
||||||
|
const p2 = polar(C, C, 53, a);
|
||||||
|
lines.push(
|
||||||
|
<line
|
||||||
|
key={i}
|
||||||
|
x1={p1.x}
|
||||||
|
y1={p1.y}
|
||||||
|
x2={p2.x}
|
||||||
|
y2={p2.y}
|
||||||
|
stroke="var(--color-ink-700)"
|
||||||
|
strokeWidth={major ? 1 : 0.5}
|
||||||
|
opacity={major ? 0.9 : 0.45}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return lines;
|
||||||
|
}, []);
|
||||||
|
return <g>{ticks}</g>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface StatusRingProps {
|
||||||
|
target: LiveTarget;
|
||||||
|
/** Uptime fraction 0..100 for the selected window. */
|
||||||
|
uptime?: number;
|
||||||
|
size?: number;
|
||||||
|
/** Mount-stagger delay in seconds (boot sequence). */
|
||||||
|
delay?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Circular visualization #1 — the radial status ring.
|
||||||
|
* Uptime fills the outer arc; latency reads on an inner brass gauge;
|
||||||
|
* every completed probe lands as a visible pulse.
|
||||||
|
*/
|
||||||
|
export const StatusRing = memo(function StatusRing({
|
||||||
|
target,
|
||||||
|
uptime,
|
||||||
|
size = 150,
|
||||||
|
delay = 0,
|
||||||
|
}: StatusRingProps) {
|
||||||
|
const { lang, reduced } = useUI();
|
||||||
|
const color = STATE_COLOR[target.state];
|
||||||
|
|
||||||
|
const frac = (uptime ?? 0) / 100;
|
||||||
|
const circ = circumference(R_TRACK);
|
||||||
|
|
||||||
|
const latMS = target.last?.latency_ms ?? target.latency.p50_ms ?? 0;
|
||||||
|
const latSweep = latencyScale(latMS) * LAT_SWEEP;
|
||||||
|
const latCirc = circumference(R_LAT);
|
||||||
|
|
||||||
|
const displayUptime = useSpringNumber(uptime ?? 0);
|
||||||
|
|
||||||
|
const arcTransition = reduced
|
||||||
|
? { duration: 0 }
|
||||||
|
: { ...springs.arc, delay };
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 120 120"
|
||||||
|
width={size}
|
||||||
|
height={size}
|
||||||
|
role="img"
|
||||||
|
aria-label={`${target.name}: ${target.state}, ${
|
||||||
|
uptime !== undefined ? fmtUptime(lang, uptime) + "%" : "—"
|
||||||
|
} uptime`}
|
||||||
|
>
|
||||||
|
<Ticks />
|
||||||
|
|
||||||
|
{/* track */}
|
||||||
|
<circle
|
||||||
|
cx={C}
|
||||||
|
cy={C}
|
||||||
|
r={R_TRACK}
|
||||||
|
fill="none"
|
||||||
|
stroke="var(--color-ink-800)"
|
||||||
|
strokeWidth={1}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* soft glow under the arc — a wide faint twin, no filters */}
|
||||||
|
<motion.circle
|
||||||
|
cx={C}
|
||||||
|
cy={C}
|
||||||
|
r={R_TRACK}
|
||||||
|
fill="none"
|
||||||
|
stroke={color}
|
||||||
|
strokeWidth={7}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeDasharray={circ}
|
||||||
|
transform={`rotate(-90 ${C} ${C})`}
|
||||||
|
initial={{ strokeDashoffset: circ, opacity: 0 }}
|
||||||
|
animate={{
|
||||||
|
strokeDashoffset: circ * (1 - frac),
|
||||||
|
opacity: 0.16,
|
||||||
|
stroke: color,
|
||||||
|
}}
|
||||||
|
transition={arcTransition}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* uptime arc — springs to its value, never snaps */}
|
||||||
|
<motion.circle
|
||||||
|
cx={C}
|
||||||
|
cy={C}
|
||||||
|
r={R_TRACK}
|
||||||
|
fill="none"
|
||||||
|
stroke={color}
|
||||||
|
strokeWidth={2.75}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeDasharray={circ}
|
||||||
|
transform={`rotate(-90 ${C} ${C})`}
|
||||||
|
initial={{ strokeDashoffset: circ, opacity: 0 }}
|
||||||
|
animate={{
|
||||||
|
strokeDashoffset: circ * (1 - frac),
|
||||||
|
opacity: 1,
|
||||||
|
stroke: color,
|
||||||
|
}}
|
||||||
|
transition={arcTransition}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* latency gauge — brass, log scale 1ms..2.5s */}
|
||||||
|
<g opacity={0.9}>
|
||||||
|
<path
|
||||||
|
d={arcPath(C, C, R_LAT, 0, LAT_SWEEP)}
|
||||||
|
fill="none"
|
||||||
|
stroke="var(--color-ink-800)"
|
||||||
|
strokeWidth={0.75}
|
||||||
|
/>
|
||||||
|
<motion.circle
|
||||||
|
cx={C}
|
||||||
|
cy={C}
|
||||||
|
r={R_LAT}
|
||||||
|
fill="none"
|
||||||
|
stroke="var(--color-brass)"
|
||||||
|
strokeWidth={1.5}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeDasharray={latCirc}
|
||||||
|
transform={`rotate(-90 ${C} ${C})`}
|
||||||
|
initial={{ strokeDashoffset: latCirc, opacity: 0 }}
|
||||||
|
animate={{
|
||||||
|
strokeDashoffset: latCirc * (1 - latSweep / 360),
|
||||||
|
opacity: 0.95,
|
||||||
|
}}
|
||||||
|
transition={
|
||||||
|
reduced ? { duration: 0 } : { ...springs.gentle, delay: delay + 0.15 }
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
{/* live pulse — a probe just landed */}
|
||||||
|
{!reduced && target.pulse > 0 && (
|
||||||
|
<motion.circle
|
||||||
|
key={target.pulse}
|
||||||
|
cx={C}
|
||||||
|
cy={C}
|
||||||
|
r={R_TRACK}
|
||||||
|
fill="none"
|
||||||
|
stroke={color}
|
||||||
|
initial={{ r: R_TRACK, opacity: 0.55, strokeWidth: 2 }}
|
||||||
|
animate={{ r: R_TRACK + 11, opacity: 0, strokeWidth: 0.4 }}
|
||||||
|
transition={{ duration: 1.1, ease: "easeOut" }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* state ripple — a confirmed transition radiates outward */}
|
||||||
|
{!reduced && target.stateChangedAt > 0 && (
|
||||||
|
<motion.circle
|
||||||
|
key={`state-${target.stateChangedAt}`}
|
||||||
|
cx={C}
|
||||||
|
cy={C}
|
||||||
|
r={R_TRACK}
|
||||||
|
fill="none"
|
||||||
|
stroke={color}
|
||||||
|
initial={{ r: 10, opacity: 0.8, strokeWidth: 3 }}
|
||||||
|
animate={{ r: 58, opacity: 0, strokeWidth: 0.5 }}
|
||||||
|
transition={{ duration: 1.4, ease: [0.16, 1, 0.3, 1] }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* center figures */}
|
||||||
|
<motion.g
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={reduced ? { duration: 0 } : { duration: 0.6, delay: delay + 0.3 }}
|
||||||
|
>
|
||||||
|
<text
|
||||||
|
x={C}
|
||||||
|
y={C + 3}
|
||||||
|
textAnchor="middle"
|
||||||
|
fontFamily="var(--font-display)"
|
||||||
|
fontSize={uptime !== undefined && uptime < 100 ? 21 : 24}
|
||||||
|
fill="var(--color-paper)"
|
||||||
|
className="tabular"
|
||||||
|
>
|
||||||
|
{uptime !== undefined ? fmtUptime(lang, displayUptime) : "—"}
|
||||||
|
<tspan fontSize={10} fill="var(--color-paper-faint)" dx={1}>
|
||||||
|
{pctSign(lang)}
|
||||||
|
</tspan>
|
||||||
|
</text>
|
||||||
|
{/* re-keyed per probe so fresh data visibly lands */}
|
||||||
|
<motion.text
|
||||||
|
key={target.pulse}
|
||||||
|
x={C}
|
||||||
|
y={C + 17}
|
||||||
|
textAnchor="middle"
|
||||||
|
fontFamily="var(--font-mono)"
|
||||||
|
fontSize={7.5}
|
||||||
|
fill="var(--color-brass)"
|
||||||
|
className="tabular"
|
||||||
|
initial={reduced ? false : { opacity: 0, y: 3 }}
|
||||||
|
animate={{ opacity: 0.95, y: 0 }}
|
||||||
|
transition={reduced ? { duration: 0 } : springs.snappy}
|
||||||
|
>
|
||||||
|
{target.last ? fmtLatency(lang, latMS) : "·"}
|
||||||
|
</motion.text>
|
||||||
|
</motion.g>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user