refactor(telemetry): chart scale labels, calmer vitals and error styling, usage-first tabs

- sparklines get start/end date and max-value footers
- vitals rating shown by value color instead of badges
- error rows use plain counts, subtle resolve button, terse empty state
- telemetry tab order: usage, players, functions, events, errors; usage is default
This commit is contained in:
2026-08-25 22:35:16 -07:00
parent 7ea189aa61
commit fd0489a22f
12 changed files with 222 additions and 238 deletions
+9 -9
View File
@@ -4,11 +4,11 @@ import { Trans } from "@lingui/react/macro";
import { msg } from "@lingui/core/macro";
const TAB_ROUTES = {
usage: "/admin/telemetry/usage",
players: "/admin/telemetry/players",
functions: "/admin/telemetry/functions",
events: "/admin/telemetry/events",
errors: "/admin/telemetry/errors",
players: "/admin/telemetry/players",
usage: "/admin/telemetry/usage",
} as const;
type TabValue = keyof typeof TAB_ROUTES;
@@ -29,7 +29,7 @@ function TelemetryLayout() {
const activeTab =
(Object.keys(TAB_ROUTES) as TabValue[]).find((tab) =>
pathname.endsWith(`/${tab}`)
) ?? "functions";
) ?? "usage";
return (
<Tabs
@@ -41,6 +41,12 @@ function TelemetryLayout() {
}}
>
<Tabs.List mb="md" style={{ flexWrap: "nowrap", overflowX: "auto", overflowY: "hidden" }}>
<Tabs.Tab value="usage">
<Trans>Usage</Trans>
</Tabs.Tab>
<Tabs.Tab value="players">
<Trans>Players</Trans>
</Tabs.Tab>
<Tabs.Tab value="functions">
<Trans>Functions</Trans>
</Tabs.Tab>
@@ -50,12 +56,6 @@ function TelemetryLayout() {
<Tabs.Tab value="errors">
<Trans>Errors</Trans>
</Tabs.Tab>
<Tabs.Tab value="players">
<Trans>Players</Trans>
</Tabs.Tab>
<Tabs.Tab value="usage">
<Trans>Usage</Trans>
</Tabs.Tab>
</Tabs.List>
<Outlet />
@@ -2,6 +2,6 @@ import { createFileRoute, redirect } from "@tanstack/react-router";
export const Route = createFileRoute("/_authed/admin/telemetry/")({
beforeLoad: () => {
throw redirect({ to: "/admin/telemetry/functions" });
throw redirect({ to: "/admin/telemetry/usage" });
},
});