Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: improve ux of lobby metrics #370

Closed
wants to merge 1 commit into from
Closed

refactor: improve ux of lobby metrics #370

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/hub/src/domains/game/components/game-matchmaker/game-matchmaker-lobby-details-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export function GameMatchmakerLobbyDetailsPanel({
<TabsTrigger value="logs">Output</TabsTrigger>
<TabsTrigger value="errors">Error</TabsTrigger>
{isLive && metrics ? (
<TabsTrigger value="stats">Stats</TabsTrigger>
<TabsTrigger value="stats">Monitor</TabsTrigger>
) : null}
</TabsList>
<TabsContent value="logs" className="min-h-0 flex-1 mt-0 p-4">
Expand Down
5 changes: 1 addition & 4 deletions apps/hub/src/domains/game/components/game-matchmaker/lobby-cpu-stats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,7 @@ export function LobbyCPUStats({ cpu, metricsAt, syncId }: LobbyCPUStatsProps) {
<YAxis
dataKey="value"
axisLine={false}
padding={{ top: 10 }}
domain={([, dataMax]) => {
return [0, Math.ceil(dataMax * 100) / 100];
}}
domain={[0, 1]}
tickFormatter={(value) => `${value * 100}%`}
/>
<ChartTooltip
Expand Down
11 changes: 5 additions & 6 deletions apps/hub/src/domains/game/components/game-matchmaker/lobby-memory-stats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ export function LobbyMemoryStats({
},
}));

const max = allocatedMemory || Math.max(...memory);

const id = useId();

const fillId = `fill-${id}`;
Expand All @@ -57,11 +59,8 @@ export function LobbyMemoryStats({
<YAxis
dataKey="value"
axisLine={false}
padding={{ top: 10 }}
domain={([, dataMax]) => {
return [0, allocatedMemory || dataMax];
}}
tickFormatter={(value) => `${filesize(value)}`}
domain={[0, max]}
tickFormatter={(value) => `${Math.ceil((value / max) * 100)}%`}
/>
<ChartTooltip
content={
Expand All @@ -75,7 +74,7 @@ export function LobbyMemoryStats({
if (typeof value !== "number") {
return "n/a";
}
return filesize(value);
return `${filesize(value)} (${Math.round((value / max) * 100).toFixed(2)}%)`;
}}
/>
}
Expand Down
7 changes: 4 additions & 3 deletions apps/hub/src/domains/game/components/game-matchmaker/lobby-metrics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ export function LobbyMetrics({
const currentMemory = memory[memory.length - 1];
const memoryPercentage = (currentMemory / (allocatedMemory || 1)) * 100;

const cpuPercentage = cpu[cpu.length - 1] * 100;
const cpuPercentage = cpu[cpu.length - 1];
const maxMemory = allocatedMemory || Math.max(...memory);
return (
<Flex gap="2">
<WithTooltip
Expand All @@ -26,7 +27,7 @@ export function LobbyMetrics({
}
content={
<>
{filesize(currentMemory)} / {filesize(allocatedMemory || 1)} (
{filesize(currentMemory)} / {filesize(maxMemory)} (
{memoryPercentage.toFixed(2)}%)
</>
}
Expand All @@ -36,7 +37,7 @@ export function LobbyMetrics({
trigger={
<Flex direction="col" gap="2" className="min-w-20">
<SmallText>CPU</SmallText>
<Progress className="h-2" value={cpu[cpu.length - 1] * 100} />
<Progress className="h-2" value={cpu[cpu.length - 1]} />
</Flex>
}
content={<>{cpuPercentage.toFixed(2)}%</>}
Expand Down
26 changes: 19 additions & 7 deletions apps/hub/src/domains/game/components/game-matchmaker/lobby-stats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,22 +27,28 @@ export function LobbyStats({
<ScrollArea className=" h-full w-full overflow-auto p-4">
<div className="grid grid-cols-1 gap-4 @3xl:grid-cols-2 gap-y-8 ">
<div>
<p className="mb-4 font-bold">Memory Usage</p>
<p className="mb-4 font-bold ml-5">Memory Usage</p>
<LobbyMemoryStats
memory={memory}
metricsAt={metricsAt}
allocatedMemory={allocatedMemory}
syncId={syncId}
/>
<Flex items="center" justify="center" py="4" gap="4">
<Progress value={memoryPercentage} />
<Flex
items="center"
justify="center"
py="4"
gap="4"
className="ml-16"
>
<Progress value={memoryPercentage} className="h-2" />
<Flex direction="col" gap="2">
<Strong className="tabular-nums">
{memoryPercentage.toFixed(2)}%
</Strong>
</Flex>
</Flex>
<p>
<p className="ml-16">
<Strong className="tabular-nums">
{filesize(memory[memory.length - 1])}
</Strong>{" "}
Expand All @@ -54,11 +60,17 @@ export function LobbyStats({
</p>
</div>
<div>
<p className="mb-4 font-bold">CPU Usage</p>
<p className="mb-4 font-bold ml-5">CPU Usage</p>
<LobbyCPUStats cpu={cpu} metricsAt={metricsAt} syncId={syncId} />

<Flex items="center" justify="center" py="4" gap="4">
<Progress value={cpuPercentage} />
<Flex
items="center"
justify="center"
py="4"
gap="4"
className="ml-16"
>
<Progress value={cpuPercentage} className="h-2" />
<Flex direction="col" gap="2">
<Strong className="tabular-nums">
{cpuPercentage.toFixed(2)}%
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/ui/chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,6 @@ const ChartTooltipContent = React.forwardRef<
const key = `${labelKey || item.dataKey || item.name || "value"}`;

const itemConfig = getPayloadConfigFromPayload(config, item, key);
console.log({ config, item, key }, itemConfig);
const value =
!labelKey && typeof label === "string"
? config[label as keyof typeof config]?.label || label
Expand Down