refactor(admin): drop status strip from dashboard; full-bleed usage tab
- admin home is tournament section + tools list only - usage route matches sibling tabs (fullWidth, no shell padding); screen pads its own content so the tab bar stays flush
This commit is contained in:
@@ -1,24 +1,10 @@
|
||||
import { Suspense } from "react";
|
||||
import { Group, SimpleGrid, Skeleton, Stack } from "@mantine/core";
|
||||
import { SimpleGrid, Skeleton } from "@mantine/core";
|
||||
import QuietBoundary from "./quiet-boundary";
|
||||
import SectionBox from "./section-box";
|
||||
import StatusStrip from "./status-strip";
|
||||
import TournamentSection from "./tournament-section";
|
||||
import ToolsList from "./tools-list";
|
||||
|
||||
const StripSkeleton = () => (
|
||||
<SectionBox>
|
||||
<Group grow>
|
||||
{[0, 1, 2].map((i) => (
|
||||
<Stack key={i} gap={4} align="center">
|
||||
<Skeleton height={22} width={32} radius="sm" />
|
||||
<Skeleton height={10} width={56} radius="sm" />
|
||||
</Stack>
|
||||
))}
|
||||
</Group>
|
||||
</SectionBox>
|
||||
);
|
||||
|
||||
const TournamentSkeleton = () => (
|
||||
<SectionBox>
|
||||
<Skeleton height={24} width={180} radius="sm" />
|
||||
@@ -32,13 +18,6 @@ const TournamentSkeleton = () => (
|
||||
|
||||
export const AdminDashboard = () => (
|
||||
<>
|
||||
<QuietBoundary>
|
||||
<Suspense fallback={<StripSkeleton />}>
|
||||
<SectionBox>
|
||||
<StatusStrip />
|
||||
</SectionBox>
|
||||
</Suspense>
|
||||
</QuietBoundary>
|
||||
<QuietBoundary>
|
||||
<Suspense fallback={<TournamentSkeleton />}>
|
||||
<TournamentSection />
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
import { useMemo } from "react";
|
||||
import { Group, Stack, Text, UnstyledButton } from "@mantine/core";
|
||||
import { useLingui } from "@lingui/react/macro";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import {
|
||||
useClientErrorGroups,
|
||||
useRollupRange,
|
||||
useTelemetryRuntimeStatus,
|
||||
} from "@/features/telemetry/queries";
|
||||
import { isoDay, lastNDays } from "@/features/telemetry/range";
|
||||
|
||||
interface StatProps {
|
||||
value: string | number;
|
||||
label: string;
|
||||
alert?: boolean;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const Stat = ({ value, label, alert, onClick }: StatProps) => (
|
||||
<UnstyledButton className="flxn-press" onClick={onClick}>
|
||||
<Stack gap={0} align="center">
|
||||
<Text fz="lg" fw={700} lh={1.3} c={alert ? "red" : undefined}>
|
||||
{value}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{label}
|
||||
</Text>
|
||||
</Stack>
|
||||
</UnstyledButton>
|
||||
);
|
||||
|
||||
export const StatusStrip = () => {
|
||||
const { t } = useLingui();
|
||||
const navigate = useNavigate();
|
||||
const today = useMemo(() => isoDay(new Date()), []);
|
||||
const month = useMemo(() => lastNDays(30), []);
|
||||
|
||||
const { data: status } = useTelemetryRuntimeStatus();
|
||||
const { data: errorGroups } = useClientErrorGroups({ from: month.from, to: month.to });
|
||||
const { data: rollups } = useRollupRange({
|
||||
metrics: ["server_fn.count"],
|
||||
from: today,
|
||||
to: today,
|
||||
});
|
||||
|
||||
const callsToday = useMemo(
|
||||
() => (rollups ?? []).reduce((sum, row) => sum + row.value, 0),
|
||||
[rollups]
|
||||
);
|
||||
const openErrors = errorGroups?.length ?? 0;
|
||||
|
||||
return (
|
||||
<Group grow>
|
||||
<Stat
|
||||
value={status?.activeSseConnections ?? 0}
|
||||
label={t`Online`}
|
||||
onClick={() => navigate({ to: "/admin/telemetry/players" })}
|
||||
/>
|
||||
<Stat
|
||||
value={openErrors}
|
||||
label={t`Open errors`}
|
||||
alert={openErrors > 0}
|
||||
onClick={() => navigate({ to: "/admin/telemetry/errors" })}
|
||||
/>
|
||||
<Stat
|
||||
value={callsToday.toLocaleString()}
|
||||
label={t`Calls today`}
|
||||
onClick={() => navigate({ to: "/admin/telemetry/usage" })}
|
||||
/>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatusStrip;
|
||||
@@ -255,7 +255,7 @@ export const UsageScreen = () => {
|
||||
const range = useMemo(() => lastNDays(Number(rangeDays)), [rangeDays]);
|
||||
|
||||
return (
|
||||
<Stack gap="md">
|
||||
<Stack gap="md" px="md" pb="md">
|
||||
<SegmentedControl
|
||||
value={rangeDays}
|
||||
onChange={(value) => setRangeDays(value as "7" | "30")}
|
||||
|
||||
Reference in New Issue
Block a user