Import source: web/src/components/TargetDetail
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,207 @@
|
||||
import { motion } from "motion/react";
|
||||
import type { Bucket, Incident, LiveTarget } from "../lib/types";
|
||||
import { StatusRing } from "./StatusRing";
|
||||
import { Sparkline } from "./Sparkline";
|
||||
import { RadialDay } from "./RadialDay";
|
||||
import { IncidentList } from "./IncidentList";
|
||||
import {
|
||||
fmtDate,
|
||||
fmtInterval,
|
||||
fmtLatency,
|
||||
fmtNumber,
|
||||
fmtUptime,
|
||||
pctSign,
|
||||
} from "../lib/format";
|
||||
import { springs, STATE_COLOR, useUI } from "../lib/ui";
|
||||
|
||||
interface TargetDetailProps {
|
||||
target: LiveTarget;
|
||||
buckets: Bucket[];
|
||||
incidents: Incident[];
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
function Stat({ label, value, accent }: { label: string; value: string; accent?: string }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-1 min-w-0">
|
||||
<span className="microlabel">{label}</span>
|
||||
<span
|
||||
className="text-[13px] tabular truncate"
|
||||
style={{ color: accent ?? "var(--color-paper)" }}
|
||||
dir="ltr"
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* The expanded view: shares its layout with the grid card, so the ring
|
||||
* physically travels from the grid into the panel.
|
||||
*/
|
||||
export function TargetDetail({ target, buckets, incidents, onClose }: TargetDetailProps) {
|
||||
const { t, lang, window, reduced } = useUI();
|
||||
const uptime = window === "7d" ? target.uptime_7d : target.uptime_24h;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-30 flex items-center justify-center p-4 sm:p-8"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0, transition: { duration: 0.18 } }}
|
||||
>
|
||||
{/* veil */}
|
||||
<div
|
||||
className="absolute inset-0 bg-ink-950/75 backdrop-blur-[6px]"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
layoutId={`card-${target.id}`}
|
||||
transition={reduced ? { duration: 0 } : springs.layout}
|
||||
className="relative w-full max-w-3xl max-h-[88vh] overflow-y-auto rounded-md border border-ink-700 bg-ink-900"
|
||||
style={{ boxShadow: "var(--panel-shadow)" }}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={target.name}
|
||||
>
|
||||
{/* state edge */}
|
||||
<span
|
||||
aria-hidden
|
||||
className="absolute inset-x-0 top-0 h-px"
|
||||
style={{
|
||||
background: `linear-gradient(to right, transparent, ${STATE_COLOR[target.state]}, transparent)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={onClose}
|
||||
aria-label={t.close}
|
||||
className="absolute top-4 end-4 z-10 size-8 rounded-full border border-ink-700 text-paper-faint hover:text-paper hover:border-ink-700 hover:bg-ink-850 transition-colors cursor-pointer text-[13px]"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
<div className="p-6 sm:p-8">
|
||||
{/* top: ring + identity */}
|
||||
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-6">
|
||||
<motion.div
|
||||
layoutId={`ring-${target.id}`}
|
||||
transition={reduced ? { duration: 0 } : springs.layout}
|
||||
className="shrink-0"
|
||||
>
|
||||
<StatusRing target={target} uptime={uptime} size={185} />
|
||||
</motion.div>
|
||||
|
||||
<div className="flex-1 min-w-0 text-center sm:text-start pt-2">
|
||||
<motion.h2
|
||||
className="text-[34px] leading-tight text-paper"
|
||||
style={{ fontFamily: "var(--font-display)" }}
|
||||
initial={reduced ? false : { opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.12 }}
|
||||
>
|
||||
{target.name}
|
||||
</motion.h2>
|
||||
<p className="mt-1 text-[11px] text-paper-faint tabular font-mono" dir="ltr">
|
||||
{target.type === "http" ? (
|
||||
<a
|
||||
href={target.endpoint}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="hover:text-brass transition-colors"
|
||||
title={t.openEndpoint}
|
||||
>
|
||||
{target.endpoint} ↗
|
||||
</a>
|
||||
) : (
|
||||
target.endpoint
|
||||
)}
|
||||
</p>
|
||||
<p className="mt-2 text-[12px]" style={{ color: STATE_COLOR[target.state] }}>
|
||||
● {t.state[target.state]}
|
||||
{target.fails > 0 && target.state !== "down" && (
|
||||
<span className="text-paper-faint"> · {fmtNumber(lang, target.fails)} {t.failed}</span>
|
||||
)}
|
||||
</p>
|
||||
|
||||
<motion.div
|
||||
className="mt-5 grid grid-cols-2 sm:grid-cols-3 gap-x-6 gap-y-4"
|
||||
initial={reduced ? false : { opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Stat label={t.latency + " p50"} value={fmtLatency(lang, target.latency.p50_ms)} />
|
||||
<Stat label={t.latency + " p95"} value={fmtLatency(lang, target.latency.p95_ms)} />
|
||||
<Stat
|
||||
label={t.lastCheck}
|
||||
value={target.last ? fmtDate(lang, target.last.ts) : "—"}
|
||||
/>
|
||||
<Stat label={t.interval} value={fmtInterval(lang, target.interval_sec)} />
|
||||
{target.uptime_30d !== undefined ? (
|
||||
<Stat
|
||||
label={t.uptime30}
|
||||
value={`${fmtUptime(lang, target.uptime_30d)}${pctSign(lang)}`}
|
||||
/>
|
||||
) : (
|
||||
<Stat label="type" value={target.type.toUpperCase()} />
|
||||
)}
|
||||
{target.cert_days !== undefined && (
|
||||
<Stat
|
||||
label={t.certExpiry}
|
||||
value={`${fmtNumber(lang, target.cert_days)}${t.daysShort}`}
|
||||
accent={
|
||||
target.cert_days < 14
|
||||
? "var(--color-warn)"
|
||||
: "var(--color-paper)"
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* middle: sparkline + personal day dial */}
|
||||
<motion.div
|
||||
className="mt-8 grid gap-8 sm:grid-cols-[1fr_auto] items-start"
|
||||
initial={reduced ? false : { opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.26, ...springs.gentle }}
|
||||
>
|
||||
<div>
|
||||
<div className="microlabel mb-3 flex items-baseline gap-4">
|
||||
<span>{t.latency}</span>
|
||||
<span className="rule-fade flex-1" />
|
||||
</div>
|
||||
<Sparkline series={target.series} pulse={target.pulse} />
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<RadialDay
|
||||
targets={[target]}
|
||||
dayBuckets={{ [target.id]: buckets }}
|
||||
only={target.id}
|
||||
size={185}
|
||||
caption={false}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* bottom: incidents */}
|
||||
<motion.div
|
||||
className="mt-8"
|
||||
initial={reduced ? false : { opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.32, ...springs.gentle }}
|
||||
>
|
||||
<div className="microlabel mb-3 flex items-baseline gap-4">
|
||||
<span>{t.recentIncidents}</span>
|
||||
<span className="rule-fade flex-1" />
|
||||
</div>
|
||||
<IncidentList incidents={incidents.slice(0, 6)} targets={[target]} hideTarget />
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user