JakeBreath
afca89de8f
- New e621 metrics store tracks request count, cumulative time and the last request (path + duration) for the session - The e621 client measures each request around fetch and JSON parsing - Status pill appends a teal 'e621: <total>' segment with a tooltip showing request count and the last request; a server-side e621 time is shown separately if the backend ever reports one
71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import { Laptop, Monitor, Terminal, type LucideIcon } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/cn";
|
|
import type { SystemStatus } from "@/lib/types";
|
|
import { useE621Metrics } from "@/store/e621Metrics";
|
|
|
|
const osIcons: Record<string, LucideIcon> = {
|
|
linux: Terminal,
|
|
apple: Laptop,
|
|
windows: Monitor,
|
|
};
|
|
|
|
function formatMs(value: number): string {
|
|
if (value >= 1000) return `${(value / 1000).toFixed(1)}s`;
|
|
if (value >= 100) return `${Math.round(value)}ms`;
|
|
return `${value.toFixed(1)}ms`;
|
|
}
|
|
|
|
export function StatusPill({ status }: { status?: SystemStatus }) {
|
|
const requestCount = useE621Metrics((state) => state.requestCount);
|
|
const totalMs = useE621Metrics((state) => state.totalMs);
|
|
const last = useE621Metrics((state) => state.last);
|
|
|
|
if (!status) return null;
|
|
const OsIcon = osIcons[status.os.icon] ?? Monitor;
|
|
|
|
return (
|
|
<span
|
|
className="hidden select-none items-center gap-1.5 rounded-full border border-ctp-surface0 bg-ctp-mantle px-2.5 py-1 font-mono text-[11px] text-ctp-overlay1 lg:flex"
|
|
title={`${status.os.name} ${status.os.release} · built from ${status.git_hash}`}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"font-medium",
|
|
status.env === "prod" ? "text-ctp-teal" : "text-ctp-yellow",
|
|
)}
|
|
>
|
|
ENV: {status.env.toUpperCase()}
|
|
</span>
|
|
<span className="text-ctp-surface2">·</span>
|
|
<span>{status.git_hash}</span>
|
|
<span className="text-ctp-surface2">·</span>
|
|
<OsIcon className="h-3 w-3" />
|
|
<span>{status.os.name}</span>
|
|
<span className="text-ctp-surface2">·</span>
|
|
<span>{formatMs(status.server_time_ms)}</span>
|
|
{requestCount > 0 ? (
|
|
<>
|
|
<span className="text-ctp-surface2">·</span>
|
|
<span
|
|
className="text-ctp-teal"
|
|
title={`${requestCount} e621 request${
|
|
requestCount === 1 ? "" : "s"
|
|
} this session · last ${last ? `${formatMs(last.ms)} (${last.path})` : "—"}`}
|
|
>
|
|
e621: {formatMs(totalMs)}
|
|
</span>
|
|
</>
|
|
) : null}
|
|
{status.e621_time_ms !== null ? (
|
|
<>
|
|
<span className="text-ctp-surface2">·</span>
|
|
<span title="Server-side e621 time">
|
|
e621 (server): {formatMs(status.e621_time_ms)}
|
|
</span>
|
|
</>
|
|
) : null}
|
|
</span>
|
|
);
|
|
}
|