86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import * as stylex from "@stylexjs/stylex";
|
|
import { formatMicros } from "@/lib/format";
|
|
import type { StatsTotals } from "@/lib/types";
|
|
import { styles as shared } from "@/ui/styles";
|
|
import { colors } from "@/ui/tokens.stylex";
|
|
|
|
const numberFormat = new Intl.NumberFormat();
|
|
|
|
const styles = stylex.create({
|
|
/** Two columns on a phone, three from `md`, five from `xl`, as before. */
|
|
grid: {
|
|
display: "grid",
|
|
gap: "0.75rem",
|
|
gridTemplateColumns: {
|
|
default: "repeat(2, minmax(0, 1fr))",
|
|
"@media (min-width: 768px)": "repeat(3, minmax(0, 1fr))",
|
|
"@media (min-width: 1280px)": "repeat(5, minmax(0, 1fr))",
|
|
},
|
|
},
|
|
card: {
|
|
borderRadius: "0.25rem",
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
borderColor: colors.border,
|
|
backgroundColor: colors.surfaceRaised,
|
|
paddingInline: "1rem",
|
|
paddingBlock: "0.75rem",
|
|
},
|
|
label: {
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
color: colors.textMuted,
|
|
},
|
|
value: {
|
|
fontSize: "1.5rem",
|
|
lineHeight: "2rem",
|
|
fontWeight: 600,
|
|
},
|
|
detail: {
|
|
marginLeft: "0.5rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
color: colors.textMuted,
|
|
},
|
|
});
|
|
|
|
function percentOf(part: number, total: number): string | null {
|
|
if (total === 0) return null;
|
|
return `${((part / total) * 100).toFixed(1)}%`;
|
|
}
|
|
|
|
function Card({ label, value, detail }: { label: string; value: string; detail?: string | null }) {
|
|
return (
|
|
<div {...stylex.props(styles.card)}>
|
|
<dt {...stylex.props(styles.label)}>{label}</dt>
|
|
<dd>
|
|
<span {...stylex.props(styles.value, shared.tabularNums)}>{value}</span>
|
|
{detail != null && <span {...stylex.props(styles.detail, shared.tabularNums)}>{detail}</span>}
|
|
</dd>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function StatCards({ stats }: { stats: StatsTotals }) {
|
|
return (
|
|
<dl {...stylex.props(styles.grid)}>
|
|
<Card label="Queries" value={numberFormat.format(stats.queries)} />
|
|
<Card
|
|
label="Blocked"
|
|
value={numberFormat.format(stats.blocked)}
|
|
detail={percentOf(stats.blocked, stats.queries)}
|
|
/>
|
|
<Card
|
|
label="Cached"
|
|
value={numberFormat.format(stats.cached)}
|
|
detail={percentOf(stats.cached, stats.queries)}
|
|
/>
|
|
<Card label="Clients" value={numberFormat.format(stats.clients)} />
|
|
<Card
|
|
label="Avg response"
|
|
value={stats.avg_response_time_us === null ? "—" : formatMicros(stats.avg_response_time_us)}
|
|
/>
|
|
</dl>
|
|
);
|
|
}
|